From 0347bd4afe2246e89d4a85165de40631ad7df177 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 3 May 2026 15:04:47 -0700
Subject: [PATCH] feat(FN-3331): add New Chat button to thread header on
 desktop

Adds a New Chat button to the ChatView thread header on desktop with accompanying CSS styling and tests. The feature is scoped to the dashboard's chat interface with 62 lines of additions across the component, its stylesheet, and test file.

Fusion-Task-Id: FN-3331
---
 .../dashboard/app/components/ChatView.css     |  9 ++++
 .../dashboard/app/components/ChatView.tsx     | 10 +++++
 .../components/__tests__/ChatView.test.tsx    | 43 +++++++++++++++++++
 3 files changed, 62 insertions(+)

diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css
index 2421a04b4..7420cedaa 100644
--- a/packages/dashboard/app/components/ChatView.css
+++ b/packages/dashboard/app/components/ChatView.css
@@ -214,6 +214,11 @@
   font-size: 15px;
 }
 
+.chat-thread-header-new-chat {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
 /* Messages */
 .chat-messages {
   flex: 1;
@@ -1026,6 +1031,10 @@
     flex-wrap: wrap;
   }
 
+  .chat-thread-header-new-chat {
+    display: none;
+  }
+
   .chat-session-delete-btn {
     opacity: 1;
   }
diff --git a/packages/dashboard/app/components/ChatView.tsx b/packages/dashboard/app/components/ChatView.tsx
index 45ad5c8ed..d3f9df1b3 100644
--- a/packages/dashboard/app/components/ChatView.tsx
+++ b/packages/dashboard/app/components/ChatView.tsx
@@ -1686,6 +1686,16 @@ export function ChatView({ projectId, addToast }: ChatViewProps) {
             <Bot size={16} />
             <span className="chat-thread-header-title">{threadHeaderTitle}</span>
             {showThreadHeaderModelTag && <span className="chat-model-tag">{activeModelTag}</span>}
+            {!isMobile && (
+              <button
+                className="btn btn-sm btn-primary chat-thread-header-new-chat"
+                onClick={() => setShowNewDialog(true)}
+                data-testid="chat-thread-new-chat-btn"
+              >
+                <Plus size={14} />
+                New Chat
+              </button>
+            )}
 
           </div>
         )}
diff --git a/packages/dashboard/app/components/__tests__/ChatView.test.tsx b/packages/dashboard/app/components/__tests__/ChatView.test.tsx
index f942da04e..2f9c0f6a5 100644
--- a/packages/dashboard/app/components/__tests__/ChatView.test.tsx
+++ b/packages/dashboard/app/components/__tests__/ChatView.test.tsx
@@ -2348,6 +2348,49 @@ describe("resizable sidebar", () => {
   });
 });
 
+describe("thread header New Chat button", () => {
+  const activeSession = { id: "session-001", agentId: "agent-001", status: "active", title: "Test Chat", createdAt: "2026-04-08T00:00:00.000Z", updatedAt: "2026-04-08T00:00:00.000Z" };
+
+  it("renders New Chat button in thread header on desktop when session is active", () => {
+    const viewportSpy = mockViewportMode("desktop");
+    setupMockChat({ activeSession });
+
+    render(<ChatView projectId="proj-123" addToast={vi.fn()} />);
+
+    const btn = screen.getByTestId("chat-thread-new-chat-btn");
+    expect(btn).toBeInTheDocument();
+    expect(btn).toHaveTextContent("New Chat");
+    expect(btn).toHaveClass("btn", "btn-sm", "btn-primary");
+
+    viewportSpy.mockRestore();
+  });
+
+  it("clicking thread header New Chat button opens the NewChatDialog", () => {
+    const viewportSpy = mockViewportMode("desktop");
+    setupMockChat({ activeSession });
+
+    render(<ChatView projectId="proj-123" addToast={vi.fn()} />);
+
+    const btn = screen.getByTestId("chat-thread-new-chat-btn");
+    fireEvent.click(btn);
+
+    expect(screen.getByTestId("chat-new-dialog-mode-toggle")).toBeInTheDocument();
+
+    viewportSpy.mockRestore();
+  });
+
+  it("does not render New Chat button in thread header on mobile", () => {
+    const viewportSpy = mockViewportMode("mobile");
+    setupMockChat({ activeSession });
+
+    render(<ChatView projectId="proj-123" addToast={vi.fn()} />);
+
+    expect(screen.queryByTestId("chat-thread-new-chat-btn")).toBeNull();
+
+    viewportSpy.mockRestore();
+  });
+});
+
 describe("ChatView mobile behavior", () => {
   let savedVisualViewport: typeof window.visualViewport;
   let savedInnerHeight: number;