FN-8028: widen tablet chat message bubbles

Increase tablet agent-side chat bubble width while preserving responsive behavior.

- Raise the tablet assistant, streaming, and failure bubble cap to 92%.
- Update the responsive CSS contract and dashboard documentation.

Files changed:
 docs/dashboard-guide.md                                              | 2 +-
 packages/dashboard/app/components/ChatView.css                       | 5 ++++-
 packages/dashboard/app/components/__tests__/ChatView.core-contracts.test.tsx        | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

Fusion-Task-Id: FN-8028

Fusion-Task-Lineage: 2158a4c8-f07b-4e96-bcf2-80ebe6b08515

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-15 23:47:04 -07:00
parent 5ab46a6430
commit d6f94693b2
3 changed files with 7 additions and 4 deletions

View File

@@ -555,7 +555,7 @@ Chat view provides project-scoped conversations with agents.
<!-- FNXC:ChatContextWindow 2026-06-27-00:00: Direct-chat docs must describe the desktop/tablet-only estimated token budget indicator and its intentional absence from mobile, narrow floating chat, and room headers. -->
- On desktop/tablet Direct chat, the thread header shows an estimated token count against the active model's known context window (for example `~12.3k / 200k`). It is hidden on mobile, narrow floating chat, rooms, and unknown-context-window models.
<!-- FNXC:ChatViewDocs 2026-06-28-14:52: Chat responsive docs must reflect that narrow chat hosts now key bubble width off the ChatView container, not just viewport media, so Quick Chat popups and the right dock on desktop viewports get the same full-width bubbles as phone Chat. -->
- In narrow Chat containers (including phone-width full Chat, narrow Quick Chat popups, and right-dock Chat), message bubbles use the full content width for improved readability. On tablet-width main Chat containers, assistant/agent, streaming, and failure bubbles keep the wider 88% reading measure, while wide desktop Chat keeps the standard 75% bubble cap.
- In narrow Chat containers (including phone-width full Chat, narrow Quick Chat popups, and right-dock Chat), message bubbles use the full content width for improved readability. On tablet-width main Chat containers, assistant/agent, streaming, and failure bubbles keep the wider 92% reading measure, while wide desktop Chat keeps the standard 75% bubble cap.
- Full Chat tool-call summaries now use a denser mobile layout: grouped and single-call collapsed rows keep icon + label + status on one line (Quick Chat-style scanability) while expanded details remain unchanged.
<!-- FNXC:ChatAskQuestion 2026-06-17-16:35: Dashboard chat agents have a Fusion-native `fn_ask_question` tool, so the documented question-card behavior must cover both provider-native question tools and Fusion's first-party tool. -->
- Assistant question tool calls now render as a shared in-chat response card instead of a generic tool-call disclosure. The card recognizes provider-native question tools and Fusion's `fn_ask_question`, supports select, multi-select, text, and yes/no prompts, sends the formatted answer back into the same direct or room thread, and renders historical answered questions read-only.

View File

@@ -1042,12 +1042,15 @@ The thread-wide Markdown/plain render toggle (`.chat-thread-header-render-toggle
/*
FNXC:ChatView 2026-06-23-11:40:
Tablet Chat View has enough message-pane width for assistant prose, markdown, tool output, failure details, and attachments, so agent-side bubbles need a wider reading measure than the shared desktop/user cap. Use the ChatView container width instead of the viewport so floating Quick Chat and other narrow hosts keep their bounded bubble layout.
FNXC:ChatView 2026-07-15-00:00:
FN-8028 widens the tablet agent-side cap from 88% to 92% for a slightly wider reading measure while keeping it container-keyed, so Quick Chat and the right dock remain bounded by their narrow-host rule.
*/
@container chat-view (min-width: 48.0625rem) and (max-width: 64rem) {
.chat-message--assistant,
.chat-message--streaming,
.chat-message--failure {
max-width: 88%;
max-width: 92%;
}
}

View File

@@ -453,7 +453,7 @@ describe("ChatView CSS — responsive bubble width", () => {
expect(userRule?.[1]).toContain("align-self: flex-end");
expect(userRule?.[1]).not.toContain("max-width");
expect(tabletRule?.[1]).toMatch(
/\.chat-message--assistant,\s*\.chat-message--streaming,\s*\.chat-message--failure\s*\{[^}]*max-width:\s*88%/,
/\.chat-message--assistant,\s*\.chat-message--streaming,\s*\.chat-message--failure\s*\{[^}]*max-width:\s*92%/,
);
expect(tabletRule?.[1]).not.toMatch(/\.chat-message--user\s*\{[^}]*max-width/);
expect(css).toMatch(/@media\s*\(max-width:\s*768px\)[\s\S]*?\.chat-message\s*\{[^}]*max-width:\s*100%/);
@@ -469,7 +469,7 @@ describe("ChatView CSS — responsive bubble width", () => {
expect(baseMessageRule?.[1]).toContain("max-width: 75%");
expect(narrowRule?.[1]).toMatch(/\.chat-message\s*\{[^}]*max-width:\s*100%/);
expect(tabletRule?.[1]).toMatch(
/\.chat-message--assistant,\s*\.chat-message--streaming,\s*\.chat-message--failure\s*\{[^}]*max-width:\s*88%/,
/\.chat-message--assistant,\s*\.chat-message--streaming,\s*\.chat-message--failure\s*\{[^}]*max-width:\s*92%/,
);
});
});