From c61217e71a7fe5bb46268745f066a507a68128f0 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sat, 27 Jun 2026 10:29:36 -0700 Subject: [PATCH] FN-7121: show queued chat previews above composer Show queued Chat messages above the composer with a clear divider and covered placement behavior. - Move the queued-message indicator out of the textarea wrapper so it spans above the input row. - Add divider styling and responsive pending-message alignment for the composer. - Extend ChatView coverage for placement, dismissal, and divider removal. - Document the queued-message preview behavior and add a patch changeset. Files changed: .changeset/fn-7121-queued-message-above-input.md | 7 ++++ docs/dashboard-guide.md | 2 +- packages/dashboard/app/components/ChatView.css | 19 +++++++++-- packages/dashboard/app/components/ChatView.tsx | 35 ++++++++++++-------- .../__tests__/ChatView.core-interactions.test.tsx | 37 +++++++++++++++++++--- 5 files changed, 77 insertions(+), 23 deletions(-) Fusion-Task-Id: FN-7121 Fusion-Task-Lineage: b5cb0577-ca4e-459b-9b9e-5c60efd7bdfd Co-authored-by: Fusion (runfusion.ai) --- .../fn-7121-queued-message-above-input.md | 7 ++++ docs/dashboard-guide.md | 2 +- .../dashboard/app/components/ChatView.css | 19 ++++++++-- .../dashboard/app/components/ChatView.tsx | 35 +++++++++++-------- .../ChatView.core-interactions.test.tsx | 35 ++++++++++++++++--- 5 files changed, 76 insertions(+), 22 deletions(-) create mode 100644 .changeset/fn-7121-queued-message-above-input.md diff --git a/.changeset/fn-7121-queued-message-above-input.md b/.changeset/fn-7121-queued-message-above-input.md new file mode 100644 index 0000000000..2913a7dc9f --- /dev/null +++ b/.changeset/fn-7121-queued-message-above-input.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Show queued Chat messages above the input box with a divider. +category: fix +dev: Moves the existing single pending-message indicator out of the textarea wrapper and covers placement with ChatView tests. diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index 87ebd2a27f..499dd118cd 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -346,7 +346,7 @@ Chat view provides project-scoped conversations with agents. - Full Chat and Quick Chat both consume the same streamed `/api/chat/sessions/:id/messages` response contract, and both now prefer the authoritative assistant `message` snapshot on `done` while still accumulating `text` chunks when present (so providers without incremental text streaming still render output immediately) - In-progress assistant responses now survive refresh/navigation while generation is still active: Chat restores the last durable in-flight text/thinking/tool state immediately, keeps the prior persisted conversation visible, then resumes streaming from the stored replay point; any new text, thinking, or tool-call updates append to that restored bubble instead of replacing it or starting from an empty "Working…" placeholder. - If a regular Chat stream drops with a hidden-tab/browser-suspension error (for example `Load failed`) while the server is still generating, Chat suppresses the false error banner, re-attaches to the in-progress stream using the durable replay state, and reconciles the final assistant reply when generation completes. -- If you queue a follow-up user message while the assistant is still streaming, Chat now persists that queued text per session so leaving and returning to the view still restores and sends it once the active response finishes. +- If you queue a follow-up user message while the assistant is still streaming, Chat persists that queued text per session, shows the queued preview above the input box with a divider, and restores/sends it once the active response finishes if you leave and return. - Chat message lists now track near-bottom scroll state: while you are reading older messages, live streaming/new replies do not force-scroll; a **Latest** jump control appears until you return to the tail. - On mobile direct-chat threads, entering a thread and restoring Chat after tab/page visibility returns re-anchors to the newest message (`scrollTop = scrollHeight`) so the view always opens at the live tail. - On mobile direct-chat threads, tapping the active title/identity in the thread header opens a lightweight conversation dropdown so you can switch to another direct session without backing out to the sidebar list first; long conversation titles now stay readable in the dropdown via wrapped option text and taller touch-friendly rows. diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css index 68c0eb9715..dfa29353f6 100644 --- a/packages/dashboard/app/components/ChatView.css +++ b/packages/dashboard/app/components/ChatView.css @@ -1917,21 +1917,30 @@ Tablet Chat View has enough message-pane width for assistant prose, markdown, to } /* === Chat Pending Message === */ +/* +FNXC:ChatComposer 2026-06-27-00:00: +The single queued-message banner spans the composer above the input row, and the divider below it makes the queued state visually distinct without rendering an empty rule when no pending message exists. +*/ .chat-pending-message { display: flex; align-items: center; gap: var(--space-sm); - margin-top: var(--space-xs); + width: 100%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--todo) 10%, transparent); color: var(--text-muted); - font-size: 12px; + font-size: 0.75rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } +.chat-pending-divider { + width: 100%; + border-top: 1px solid var(--border); +} + .chat-pending-message span { overflow: hidden; text-overflow: ellipsis; @@ -1946,7 +1955,7 @@ Tablet Chat View has enough message-pane width for assistant prose, markdown, to padding: var(--space-xs); line-height: 1; flex-shrink: 0; - font-size: 14px; + font-size: 0.875rem; } .chat-pending-message-dismiss:hover { @@ -1975,6 +1984,10 @@ Tablet Chat View has enough message-pane width for assistant prose, markdown, to thread takes the full viewport. The thread already renders a back button (ChevronLeft) on mobile to flip back to the session list. */ @media (max-width: 768px) { + .chat-pending-message { + align-items: flex-start; + } + .chat-view__body { flex-direction: column; } diff --git a/packages/dashboard/app/components/ChatView.tsx b/packages/dashboard/app/components/ChatView.tsx index f044e0b7e5..c579778cf4 100644 --- a/packages/dashboard/app/components/ChatView.tsx +++ b/packages/dashboard/app/components/ChatView.tsx @@ -3057,6 +3057,27 @@ export function ChatView({ projectId, addToast, floating = false, onPopOut, onMa ))} )} + {pendingMessage && ( + <> + {/* + FNXC:ChatComposer 2026-06-27-00:00: + The single-slot queued chat message must appear above the input box, separated by a divider, so users can notice the pending send without changing the one-pending-message queue model. + */} +
+ {t("chat.queuedMessage", "Queued: {{preview}}", { preview: pendingPreview })} + +
+ {isStreaming ? (