From 3a43799577fd27600db8c16c46d4835b22607f95 Mon Sep 17 00:00:00 2001
From: lhl <liuhaili1203@126.com>
Date: Sun, 13 Sep 2026 01:00:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E9=99=84=E4=BB=B6=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=9C=A8=E7=94=A8=E6=88=B7=E6=B0=94=E6=B3=A1=E4=B8=8B=E6=96=B9?=
 =?UTF-8?q?(=E7=8B=AC=E7=AB=8B=E8=A1=8C=E3=80=81=E5=8F=B3=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90)=E8=80=8C=E9=9D=9E=E6=B0=94=E6=B3=A1=E5=86=85?=
 =?UTF-8?q?=E4=B8=8E=E6=96=87=E5=AD=97=E5=90=8C=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/chat.css              |  3 +++
 frontend/src/main.ts               | 23 ++++++++++++++++++++---
 src/genesis/server/static/chat.css |  6 ++++++
 src/genesis/server/static/chat.js  | 20 ++++++++++++++++++--
 4 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/frontend/src/chat.css b/frontend/src/chat.css
index 79b79d2..1a5f9d5 100644
--- a/frontend/src/chat.css
+++ b/frontend/src/chat.css
@@ -473,3 +473,6 @@ header h1 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin: 0
 .viewer-body { flex: 1; overflow: auto; padding: 12px; background: #fff; color: #111; }
 .viewer-body table { border-collapse: collapse; font-size: 12px; }
 .viewer-body td, .viewer-body th { border: 1px solid #ccc; padding: 3px 8px; white-space: nowrap; }
+
+/* === 用户消息：气泡 + 下方附件（同列右对齐） === */
+.msg-stack { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 1818975..e1ff874 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -57,16 +57,33 @@ function renderPendingAttachment(): void {
 }
 
 function attachmentChipHtml(att: AttachmentRef): string {
-  return '<div class="attach-line"><button class="attach-chip" type="button"'
-    + ' data-ft="' + esc(att.file_type) + '" data-name="' + esc(att.name) + '">📄 ' + esc(att.name) + '</button></div>';
+  return '<button class="attach-chip" type="button"'
+    + ' data-ft="' + esc(att.file_type) + '" data-name="' + esc(att.name) + '">📄 ' + esc(att.name) + '</button>';
 }
 function bindAttachChips(root: HTMLElement): void {
   root.querySelectorAll<HTMLElement>('.attach-chip').forEach((btn) => {
     btn.onclick = () => { void openAttachmentViewer(btn.dataset.ft || 'requirements', btn.dataset.name || ''); };
   });
 }
+// 用户消息：文字在气泡内，附件在气泡**下方**（同一列、右对齐）
 function addUserMsg(text: string, att: AttachmentRef | null): void {
-  const m = addMsg('user', esc(text) + (att ? attachmentChipHtml(att) : ''));
+  const m = document.createElement('div');
+  m.className = 'msg user';
+  const stack = document.createElement('div');
+  stack.className = 'msg-stack';
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble';
+  bubble.innerHTML = esc(text);
+  stack.appendChild(bubble);
+  if (att) {
+    const line = document.createElement('div');
+    line.className = 'attach-line';
+    line.innerHTML = attachmentChipHtml(att);
+    stack.appendChild(line);
+  }
+  m.appendChild(stack);
+  chatEl.appendChild(m);
+  chatEl.scrollTop = chatEl.scrollHeight;
   bindAttachChips(m);
 }
 
diff --git a/src/genesis/server/static/chat.css b/src/genesis/server/static/chat.css
index a85cc7f..c70a817 100644
--- a/src/genesis/server/static/chat.css
+++ b/src/genesis/server/static/chat.css
@@ -1295,3 +1295,9 @@ header h1 {
   padding: 3px 8px;
   white-space: nowrap;
 }
+.msg-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-width: 100%;
+}
diff --git a/src/genesis/server/static/chat.js b/src/genesis/server/static/chat.js
index 756c5f1..135a1fc 100644
--- a/src/genesis/server/static/chat.js
+++ b/src/genesis/server/static/chat.js
@@ -26948,7 +26948,7 @@ function renderPendingAttachment() {
   };
 }
 function attachmentChipHtml(att) {
-  return '<div class="attach-line"><button class="attach-chip" type="button" data-ft="' + esc(att.file_type) + '" data-name="' + esc(att.name) + '">\u{1F4C4} ' + esc(att.name) + "</button></div>";
+  return '<button class="attach-chip" type="button" data-ft="' + esc(att.file_type) + '" data-name="' + esc(att.name) + '">\u{1F4C4} ' + esc(att.name) + "</button>";
 }
 function bindAttachChips(root) {
   root.querySelectorAll(".attach-chip").forEach((btn) => {
@@ -26958,7 +26958,23 @@ function bindAttachChips(root) {
   });
 }
 function addUserMsg(text, att) {
-  const m = addMsg("user", esc(text) + (att ? attachmentChipHtml(att) : ""));
+  const m = document.createElement("div");
+  m.className = "msg user";
+  const stack = document.createElement("div");
+  stack.className = "msg-stack";
+  const bubble = document.createElement("div");
+  bubble.className = "bubble";
+  bubble.innerHTML = esc(text);
+  stack.appendChild(bubble);
+  if (att) {
+    const line = document.createElement("div");
+    line.className = "attach-line";
+    line.innerHTML = attachmentChipHtml(att);
+    stack.appendChild(line);
+  }
+  m.appendChild(stack);
+  chatEl.appendChild(m);
+  chatEl.scrollTop = chatEl.scrollHeight;
   bindAttachChips(m);
 }
 var pfName = must("pf-name");