From a4d3589a14aaabb8213a3bcf4fe23f9b3e95f841 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Wed, 3 Jun 2026 16:37:40 -0700 Subject: [PATCH] FN-5948: fix mobile chat empty-state rendering Restore the chat message pane empty state on mobile without regressing desktop sidebar layouts. - style chat message-pane empty states as centered framed cards and normalize mobile spacing tokens - keep sidebar padded empty states left-aligned so loading and list placeholders preserve their desktop layout - add mobile and desktop regression coverage for direct chats and chat rooms across empty, loading, populated, and streaming states Files changed: packages/dashboard/app/components/ChatView.css | 26 +- .../__tests__/ChatView.mobile-render.test.tsx | 299 +++++++++++++++++++++ 2 files changed, 323 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-5948 Fusion-Task-Lineage: f4165f04-363d-4ade-8c10-6d242f943c6c --- .../dashboard/app/components/ChatView.css | 26 +- .../__tests__/ChatView.mobile-render.test.tsx | 299 ++++++++++++++++++ 2 files changed, 323 insertions(+), 2 deletions(-) create mode 100644 packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css index ee368a38cb..9559207c93 100644 --- a/packages/dashboard/app/components/ChatView.css +++ b/packages/dashboard/app/components/ChatView.css @@ -240,6 +240,12 @@ padding: var(--space-md); } +.chat-sidebar-list > .chat-empty-state--padded { + flex: 0 0 auto; + display: block; + text-align: left; +} + .chat-session-item { padding: 10px 12px; border-radius: var(--radius-md); @@ -645,10 +651,10 @@ flex: 1 1 auto; min-height: 0; overflow-y: auto; - padding: 16px; + padding: var(--space-lg); display: flex; flex-direction: column; - gap: 12px; + gap: var(--space-md); -webkit-overflow-scrolling: touch; touch-action: pan-y; /* Stop iOS rubber-band scroll from propagating to the parent / @@ -660,6 +666,22 @@ overscroll-behavior: contain; } +.chat-messages > .chat-empty-state { + flex: 1 1 auto; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-md); + padding: var(--space-xl) var(--space-lg); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--surface); + text-align: center; + box-sizing: border-box; +} + .chat-message { max-width: 75%; padding: 10px 14px; diff --git a/packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx b/packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx new file mode 100644 index 0000000000..b3efcf4745 --- /dev/null +++ b/packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx @@ -0,0 +1,299 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; +import { act, cleanup, render, screen } from "@testing-library/react"; +import { ChatView } from "../ChatView"; +import { loadAllAppCss } from "../../test/cssFixture"; +import * as useChatModule from "../../hooks/useChat"; +import * as useChatRoomsModule from "../../hooks/useChatRooms"; +import type { ChatMessageInfo, ChatSessionInfo, UseChatReturn } from "../../hooks/useChat"; +import type { UseChatRoomsResult } from "../../hooks/useChatRooms"; +import { _resetInitialViewportHeight } from "../../hooks/useMobileKeyboard"; + +Element.prototype.scrollIntoView = vi.fn(); + +vi.mock("../../hooks/useChat"); +vi.mock("../../hooks/useChatRooms"); +vi.mock("../../hooks/useNavigationHistory", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useNavigationHistoryContext: () => ({ pushNav: vi.fn(), replaceCurrent: vi.fn() }), + }; +}); +vi.mock("../../api", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + fetchAgents: vi.fn().mockResolvedValue([]), + fetchDiscoveredSkills: vi.fn().mockResolvedValue([]), + fetchTasks: vi.fn().mockResolvedValue([]), + searchFiles: vi.fn().mockResolvedValue({ files: [] }), + }; +}); + +const mockUseChat = vi.mocked(useChatModule.useChat); +const mockUseChatRooms = vi.mocked(useChatRoomsModule.useChatRooms); +const css = loadAllAppCss(); + +const activeSession: ChatSessionInfo = { + id: "session-001", + agentId: "agent-001", + status: "active", + title: "Mobile chat", + createdAt: "2026-06-03T00:00:00.000Z", + updatedAt: "2026-06-03T00:00:00.000Z", +}; + +const messageFixture: ChatMessageInfo = { + id: "msg-001", + sessionId: activeSession.id, + role: "assistant", + content: "Hello from Fusion", + createdAt: "2026-06-03T00:00:00.000Z", +}; + +const defaultChatState: UseChatReturn = { + sessions: [], + activeSession: null, + sessionsLoading: false, + messages: [], + messagesLoading: false, + isStreaming: false, + streamingText: "", + streamingThinking: "", + streamingToolCalls: [], + selectSession: vi.fn(), + createSession: vi.fn(), + archiveSession: vi.fn(), + deleteSession: vi.fn(), + sendMessage: vi.fn(), + stopStreaming: vi.fn(), + pendingMessage: "", + clearPendingMessage: vi.fn(), + loadMoreMessages: vi.fn(), + hasMoreMessages: false, + searchQuery: "", + setSearchQuery: vi.fn(), + filteredSessions: [], + refreshSessions: vi.fn(), + agentsMap: new Map([["agent-001", { id: "agent-001", name: "Alpha" }]]), +}; + +const defaultRoomsState: UseChatRoomsResult = { + rooms: [], + roomsLoading: false, + roomsError: null, + activeRoom: null, + activeRoomMembers: [], + messages: [], + messagesLoading: false, + selectRoom: vi.fn(), + createRoom: vi.fn(), + deleteRoom: vi.fn(), + sendRoomMessage: vi.fn().mockResolvedValue(undefined), + refreshRooms: vi.fn(), +}; + +function ensureMatchMedia() { + if (window.matchMedia) { + return; + } + Object.defineProperty(window, "matchMedia", { + writable: true, + value: vi.fn(), + }); +} + +function mockViewportMode(mode: "mobile" | "desktop") { + ensureMatchMedia(); + const isMobile = mode === "mobile"; + Object.defineProperty(window, "innerWidth", { value: isMobile ? 375 : 1280, configurable: true }); + return vi.spyOn(window, "matchMedia").mockImplementation((query: string) => ({ + matches: (isMobile && query === "(max-width: 768px)") || query === "(max-width: 768px), (max-height: 480px)", + media: query, + onchange: null, + addListener: vi.fn(), + removeListener: vi.fn(), + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + })); +} + +async function renderWithCss(ui: JSX.Element) { + const style = document.createElement("style"); + style.textContent = css; + document.head.appendChild(style); + + let rendered = null; + await act(async () => { + rendered = render(ui); + }); + return rendered; +} + +function setupChat(overrides: Partial = {}) { + mockUseChat.mockReturnValue({ ...defaultChatState, ...overrides }); +} + +function setupRooms(overrides: Partial = {}) { + mockUseChatRooms.mockReturnValue({ ...defaultRoomsState, ...overrides }); +} + +describe("FN-5948 mobile chat message pane rendering", () => { + beforeEach(() => { + vi.clearAllMocks(); + document.head.innerHTML = ""; + localStorage.clear(); + _resetInitialViewportHeight(); + setupChat(); + setupRooms(); + }); + + it("keeps the regular mobile empty message pane centered and framed while preserving other direct-thread states", async () => { + const restoreMatchMedia = mockViewportMode("mobile"); + try { + setupChat({ + sessions: [activeSession], + filteredSessions: [activeSession], + activeSession, + }); + + await renderWithCss(); + + const emptyState = screen.getByText("No messages yet. Start the conversation!").closest(".chat-empty-state"); + expect(emptyState).toBeTruthy(); + expect(getComputedStyle(emptyState as HTMLElement).display).toBe("flex"); + expect(getComputedStyle(emptyState as HTMLElement).justifyContent).toBe("center"); + expect(getComputedStyle(emptyState as HTMLElement).textAlign).toBe("center"); + expect(css).toMatch(/\.chat-messages\s*>\s*\.chat-empty-state\s*\{[\s\S]*border:\s*1px solid var\(--border\);[\s\S]*background:\s*var\(--surface\);/); + + cleanup(); + document.head.innerHTML = ""; + setupChat({ + sessions: [activeSession], + filteredSessions: [activeSession], + activeSession, + messagesLoading: true, + }); + await renderWithCss(); + expect(screen.getByText("Loading messages...")).toBeInTheDocument(); + + cleanup(); + document.head.innerHTML = ""; + setupChat({ + sessions: [activeSession], + filteredSessions: [activeSession], + activeSession, + messages: [messageFixture], + }); + await renderWithCss(); + expect(screen.getByText("Hello from Fusion")).toBeInTheDocument(); + + cleanup(); + document.head.innerHTML = ""; + setupChat({ + sessions: [activeSession], + filteredSessions: [activeSession], + activeSession, + isStreaming: true, + streamingText: "Streaming reply", + }); + await renderWithCss(); + expect(screen.getByText("Streaming reply")).toBeInTheDocument(); + expect(screen.queryByText("No messages yet. Start the conversation!")).toBeNull(); + } finally { + restoreMatchMedia.mockRestore(); + } + }); + + it("keeps the rooms mobile empty pane centered and framed while preserving room loading and populated states", async () => { + const restoreMatchMedia = mockViewportMode("mobile"); + try { + localStorage.setItem("fusion:chat-scope", "rooms"); + const activeRoom = { + id: "room-001", + projectId: "proj-123", + slug: "eng", + name: "eng", + createdAt: "2026-06-03T00:00:00.000Z", + updatedAt: "2026-06-03T00:00:00.000Z", + }; + + setupRooms({ + rooms: [activeRoom], + activeRoom, + }); + await renderWithCss(); + + const emptyState = screen.getByText("No messages yet. Start the conversation!").closest(".chat-empty-state"); + expect(emptyState).toBeTruthy(); + expect(getComputedStyle(emptyState as HTMLElement).display).toBe("flex"); + expect(getComputedStyle(emptyState as HTMLElement).justifyContent).toBe("center"); + expect(css).toMatch(/\.chat-messages\s*>\s*\.chat-empty-state\s*\{[\s\S]*border:\s*1px solid var\(--border\);[\s\S]*background:\s*var\(--surface\);/); + + cleanup(); + document.head.innerHTML = ""; + setupRooms({ + rooms: [activeRoom], + activeRoom, + messagesLoading: true, + }); + await renderWithCss(); + expect(screen.getByText("Loading messages...")).toBeInTheDocument(); + + cleanup(); + document.head.innerHTML = ""; + setupRooms({ + rooms: [activeRoom], + activeRoom, + messages: [{ + id: "room-msg-001", + roomId: activeRoom.id, + role: "assistant", + content: "Room message", + senderAgentId: "agent-001", + attachments: [], + metadata: null, + mentions: [], + createdAt: "2026-06-03T00:00:00.000Z", + }], + }); + await renderWithCss(); + expect(screen.getByText("Room message")).toBeInTheDocument(); + } finally { + restoreMatchMedia.mockRestore(); + } + }); + + it("preserves the desktop message-pane invariant and does not recenter sidebar padded empty states", async () => { + const restoreMatchMedia = mockViewportMode("desktop"); + try { + setupChat({ + sessions: [activeSession], + filteredSessions: [activeSession], + activeSession, + }); + await renderWithCss(); + + const messagePaneEmptyState = screen.getByText("No messages yet. Start the conversation!").closest(".chat-empty-state"); + expect(messagePaneEmptyState).toBeTruthy(); + expect(getComputedStyle(messagePaneEmptyState as HTMLElement).display).toBe("flex"); + expect(getComputedStyle(messagePaneEmptyState as HTMLElement).justifyContent).toBe("center"); + expect(css).toMatch(/\.chat-messages\s*>\s*\.chat-empty-state\s*\{[\s\S]*border:\s*1px solid var\(--border\);[\s\S]*background:\s*var\(--surface\);/); + + cleanup(); + document.head.innerHTML = ""; + setupChat({ + sessionsLoading: true, + }); + await renderWithCss(); + + const sidebarEmptyState = screen.getByText("Loading...").closest(".chat-empty-state"); + expect(sidebarEmptyState).toBeTruthy(); + expect(getComputedStyle(sidebarEmptyState as HTMLElement).display).toBe("block"); + expect(getComputedStyle(sidebarEmptyState as HTMLElement).textAlign).toBe("left"); + } finally { + restoreMatchMedia.mockRestore(); + } + }); +});