root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): unify QuickChat backend path and consolidate render toggle

Browse Source 
Backend
- chat.ts now routes both regular chat and QuickChat through
  createResolvedAgentSession instead of branching to createFnAgent for
  the no-runtime-hint case. This removes the divergent path where
  pi-ai's cleanupSessionResources(sessionId) could tear down resources
  the next generation depends on.
- sendMessage's finally only disposes the agent if it still owns the
  activeGenerations slot. A newer generation that has pre-empted us
  cleans up its own agent in its own finally — disposing here would
  yank the underlying CLI process out from under it.
- __setCreateFnAgent test helper now mirrors its mock into the
  createResolvedAgentSession slot so existing test setups still work
  after the unification.

Frontend
- Extract createChatStreamHandlers (RAF coalescing, accumulators,
  tool-call dedup, fallback handling) — useChat and useQuickChat were
  duplicating ~85 LOC each. Both now compose the shared factory.
- Move shared chat types into chatTypes.ts. The hooks re-export them
  for backward compatibility with existing consumers.
- Removed per-message Markdown/plain-text eye toggles. A single
  thread-level toggle in the chat header now flips every assistant
  bubble (including the streaming one) between rendered Markdown and
  plain text.
- Model-only chats hide the per-message agent identity row entirely;
  the model name is already in the thread header.

Tests
- Updated ChatView tests to reflect the new render-toggle contract
  (single header toggle drives all bubbles) and the model-only avatar
  suppression.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-05 11:04:48 -07:00
parent a77932205c
commit b4a2e7a486
9 changed files with 491 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.changeset/chat-quickchat-unification-and-render-toggle.md Normal file
View File

@@ -0,0 +1,9 @@
---
"@runfusion/fusion": patch
---
Fix Quick Chat backend divergence and consolidate the chat render-mode toggle.
- Backend: Quick Chat and regular chat now go through a single agent-creation path (`createResolvedAgentSession`), eliminating the `createFnAgent` branch where pi-ai's `cleanupSessionResources(sessionId)` could tear down resources still in use by a newer generation. The `sendMessage` `finally` only disposes the agent if it still owns the `activeGenerations` slot, so a pre-empted generation no longer rips state out from under its successor.
- Frontend: extracted the SSE streaming-handler factory shared between `useChat` and `useQuickChat` (RAF coalescing, accumulators, tool-call dedup, fallback handling) into `createChatStreamHandlers`. Both hooks now compose it instead of duplicating ~85 LOC each.
- UX: removed per-message Markdown/plain-text eye toggles. A single thread-level toggle now lives in the chat header and flips every assistant bubble (including the streaming one) between rendered Markdown and plain text. Model-only chats also drop their per-message agent-identity row — the model is shown once in the thread header.

41
packages/dashboard/app/components/ChatView.css
View File

@@ -215,10 +215,40 @@
}
.chat-thread-header-new-chat {
margin-left: auto;
flex-shrink: 0;
}
/* Single thread-wide markdown / plain-text toggle, anchored to the right of
* the header next to "New Chat". Replaces the per-message eye toggle that
* used to live inside every assistant bubble. */
.chat-thread-header-render-toggle {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--space-md) * 3);
height: calc(var(--space-md) * 3);
min-width: calc(var(--space-md) * 3);
min-height: calc(var(--space-md) * 3);
padding: 0;
border: none;
border-radius: 4px;
color: var(--text-muted);
background: transparent;
cursor: pointer;
outline: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
.chat-thread-header-render-toggle:hover {
background: var(--bg-hover, var(--bg-secondary));
color: var(--text);
}
.chat-thread-header-render-toggle--plain {
color: var(--text);
}
/* Messages */
.chat-messages {
flex: 1;
@@ -262,6 +292,15 @@
color: var(--text-secondary);
}
/* Model-only chats hide the per-message agent identity. The toggle still
* needs a place to live, so collapse the avatar row to just the toggle on
* the right edge instead of a full identity strip. */
.chat-message-avatar.chat-message-avatar--toolbar-only {
margin-bottom: 0;
min-height: 0;
justify-content: flex-end;
}
.chat-message-render-toggle {
display: inline-flex;
align-items: center;

99
packages/dashboard/app/components/ChatView.tsx
View File

@@ -541,13 +541,24 @@ function NewChatDialog({ projectId, onClose, onCreate }: NewChatDialogProps) {
interface ChatMessageItemProps {
message: ChatMessageInfo;
/**
* When true, render assistant message content as plain text instead of
* Markdown. The per-message eye toggle has been removed in favor of a
* single thread-level toggle in the chat header, so this is a global
* mirror of that header state.
*/
forcePlain: boolean;
agentName: string;
/**
* Hide the per-message agent identity (icon + name + model tag) on
* assistant bubbles. In model-only chats the agent identity *is* the
* active model and it's already shown in the thread header.
*/
hideAssistantIdentity: boolean;
showAssistantModelTag: boolean;
activeModelTag: string | null;
activeSessionId: string | null;
mentionAgentsByName: Map<string, Agent>;
onToggleRender: (id: string) => void;
}
// Renders a single chat message bubble. Memoized so the streaming bubble's
@@ -557,11 +568,11 @@ const ChatMessageItem = memo(function ChatMessageItem({
message,
forcePlain,
agentName,
hideAssistantIdentity,
showAssistantModelTag,
activeModelTag,
activeSessionId,
mentionAgentsByName,
onToggleRender,
}: ChatMessageItemProps) {
const isAssistantMessage = message.role === "assistant";
@@ -659,20 +670,11 @@ const ChatMessageItem = memo(function ChatMessageItem({
className={`chat-message chat-message--${message.role}`}
data-testid={`chat-message-${message.id}`}
>
{isAssistantMessage && (
{isAssistantMessage && !hideAssistantIdentity && (
<div className="chat-message-avatar">
<Bot size={14} />
<span>{agentName}</span>
{showAssistantModelTag && activeModelTag && <span className="chat-model-tag">{activeModelTag}</span>}
<button
type="button"
className={`chat-message-render-toggle${forcePlain ? " chat-message-render-toggle--plain" : ""}`}
data-testid="chat-message-render-toggle"
aria-label={forcePlain ? "Show rendered markdown" : "Show plain text"}
onClick={() => onToggleRender(message.id)}
>
{forcePlain ? <EyeOff size={14} /> : <Eye size={14} />}
</button>
</div>
)}
{isAssistantMessage
@@ -730,7 +732,11 @@ export function ChatView({ projectId, addToast }: ChatViewProps) {
const [mentionPopupVisible, setMentionPopupVisible] = useState(false);
const [mentionHighlightIndex, setMentionHighlightIndex] = useState(0);
const [mentionStartPos, setMentionStartPos] = useState(-1);
const [plainTextMessageIds, setPlainTextMessageIds] = useState<Set<string>>(() => new Set());
// Single thread-wide toggle: when true, all assistant content (including the
// streaming bubble) renders as plain text instead of Markdown. Replaces the
// earlier per-message toggle so the chat header owns this control instead
// of every reply having its own button.
const [showAllAsPlain, setShowAllAsPlain] = useState(false);
// Attachment state mirrors QuickEntryBox: pending files selected before send.
const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
const [isDragOver, setIsDragOver] = useState(false);
@@ -1479,22 +1485,25 @@ export function ChatView({ projectId, addToast }: ChatViewProps) {
? (activeModelTag ?? "Fusion")
: (activeSession?.agentId?.slice(0, 30) ?? "Fusion"));
const showAssistantModelTag = Boolean(activeModelTag && activeModelTag !== agentName);
// The model tag is already visible in the thread header — repeating it on
// every assistant message is noise. Keep it suppressed for regular chat
// (real agent name is the identity); QuickChat already collapses the tag
// because its `agentName` IS the model tag, so the per-message slot was
// always empty there too.
const showAssistantModelTag = false;
// In model-only chats (no real agent picked) the agent identity *is* the
// model name, which is already in the thread header. Repeating it on every
// assistant bubble is noise. Hide the per-message identity row entirely;
// the render-mode toggle still appears in a slim toolbar.
const hideAssistantIdentity = activeSession?.agentId === FN_AGENT_ID;
const pendingPreview = pendingMessage.length > 50
? `${pendingMessage.slice(0, 50)}…`
: pendingMessage;
const toggleMessageRenderMode = useCallback((messageId: string) => {
setPlainTextMessageIds((current) => {
const next = new Set(current);
if (next.has(messageId)) {
next.delete(messageId);
} else {
next.add(messageId);
}
return next;
});
const toggleAllAsPlain = useCallback(() => {
setShowAllAsPlain((value) => !value);
}, []);
const renderAssistantContent = useCallback(
@@ -1677,6 +1686,17 @@ 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>}
{hasThreadInView && (
<button
type="button"
className={`chat-thread-header-render-toggle${showAllAsPlain ? " chat-thread-header-render-toggle--plain" : ""}`}
data-testid="chat-thread-render-toggle"
aria-label={showAllAsPlain ? "Show all messages as rendered Markdown" : "Show all messages as plain text"}
onClick={toggleAllAsPlain}
>
{showAllAsPlain ? <EyeOff size={14} /> : <Eye size={14} />}
</button>
)}
{!isMobile && (
<button
className="btn btn-sm btn-primary chat-thread-header-new-chat"
@@ -1699,32 +1719,25 @@ export function ChatView({ projectId, addToast }: ChatViewProps) {
<ChatMessageItem
key={message.id}
message={message}
forcePlain={plainTextMessageIds.has(message.id)}
forcePlain={showAllAsPlain}
agentName={agentName}
hideAssistantIdentity={hideAssistantIdentity}
showAssistantModelTag={showAssistantModelTag}
activeModelTag={activeModelTag}
activeSessionId={activeSession?.id ?? null}
mentionAgentsByName={mentionAgentsByName}
onToggleRender={toggleMessageRenderMode}
/>
))}
<div className="chat-message chat-message--assistant chat-message--streaming">
<div className="chat-message-avatar">
<Bot size={14} />
<span>{agentName}</span>
{showAssistantModelTag && <span className="chat-model-tag">{activeModelTag}</span>}
<button
type="button"
className={`chat-message-render-toggle${plainTextMessageIds.has("__streaming__") ? " chat-message-render-toggle--plain" : ""}`}
data-testid="chat-message-render-toggle"
aria-label={plainTextMessageIds.has("__streaming__") ? "Show rendered markdown" : "Show plain text"}
onClick={() => toggleMessageRenderMode("__streaming__")}
>
{plainTextMessageIds.has("__streaming__") ? <EyeOff size={14} /> : <Eye size={14} />}
</button>
</div>
{!hideAssistantIdentity && (
<div className="chat-message-avatar">
<Bot size={14} />
<span>{agentName}</span>
{showAssistantModelTag && <span className="chat-model-tag">{activeModelTag}</span>}
</div>
)}
{streamingText ? (
renderAssistantContent(streamingText, plainTextMessageIds.has("__streaming__"))
renderAssistantContent(streamingText, showAllAsPlain)
) : (
<div className="chat-message-content chat-message-content--waiting">
{streamingThinking ? "Thinking…" : "Connecting…"}
@@ -1758,13 +1771,13 @@ export function ChatView({ projectId, addToast }: ChatViewProps) {
<ChatMessageItem
key={message.id}
message={message}
forcePlain={plainTextMessageIds.has(message.id)}
forcePlain={showAllAsPlain}
agentName={agentName}
hideAssistantIdentity={hideAssistantIdentity}
showAssistantModelTag={showAssistantModelTag}
activeModelTag={activeModelTag}
activeSessionId={activeSession?.id ?? null}
mentionAgentsByName={mentionAgentsByName}
onToggleRender={toggleMessageRenderMode}
/>
))}
</>

72
packages/dashboard/app/components/__tests__/ChatView.test.tsx
View File

@@ -445,7 +445,7 @@ describe("ChatView", () => {
expect(screen.queryByTestId("chat-render-mode-plain")).not.toBeInTheDocument();
});
it("renders per-message eye toggles for assistant bubbles on desktop and isolates toggles by message", async () => {
it("thread-header toggle flips every assistant bubble between rendered Markdown and plain text", async () => {
setupMockChat({
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" },
messages: [
@@ -458,24 +458,27 @@ describe("ChatView", () => {
const firstBubble = screen.getByTestId("chat-message-msg-001");
const secondBubble = screen.getByTestId("chat-message-msg-002");
const [firstToggle, secondToggle] = screen.getAllByTestId("chat-message-render-toggle");
const headerToggle = screen.getByTestId("chat-thread-render-toggle");
expect(firstToggle).toBeInTheDocument();
expect(secondToggle).toBeInTheDocument();
// Per-message toggles were intentionally removed; only the single
// thread-level toggle should exist.
expect(screen.queryAllByTestId("chat-message-render-toggle")).toHaveLength(0);
expect(within(firstBubble).getByText("First", { selector: "strong" })).toBeInTheDocument();
expect(within(secondBubble).getByText("Second", { selector: "strong" })).toBeInTheDocument();
await userEvent.click(firstToggle);
await userEvent.click(headerToggle);
expect(within(firstBubble).getByText(/\*\*First\*\* item/)).toBeInTheDocument();
expect(within(firstBubble).queryByText("First", { selector: "strong" })).toBeNull();
expect(within(secondBubble).getByText("Second", { selector: "strong" })).toBeInTheDocument();
expect(within(secondBubble).getByText(/\*\*Second\*\* item/)).toBeInTheDocument();
expect(within(secondBubble).queryByText("Second", { selector: "strong" })).toBeNull();
await userEvent.click(firstToggle);
await userEvent.click(headerToggle);
expect(within(firstBubble).getByText("First", { selector: "strong" })).toBeInTheDocument();
expect(within(secondBubble).getByText("Second", { selector: "strong" })).toBeInTheDocument();
});
it("uses a dedicated streaming toggle sentinel without affecting persisted assistant messages", async () => {
it("thread-header toggle also drives the streaming bubble", async () => {
setupMockChat({
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" },
messages: [{ id: "msg-001", sessionId: "session-001", role: "assistant", content: "**Persisted**", createdAt: "2026-04-08T00:00:00.000Z" }],
@@ -487,19 +490,19 @@ describe("ChatView", () => {
const persistedBubble = screen.getByTestId("chat-message-msg-001");
const streamingBubble = document.querySelector(".chat-message--streaming") as HTMLElement;
const [persistedToggle, streamingToggle] = screen.getAllByTestId("chat-message-render-toggle");
const headerToggle = screen.getByTestId("chat-thread-render-toggle");
expect(within(streamingBubble).getByText("Live", { selector: "strong" })).toBeInTheDocument();
expect(within(persistedBubble).getByText("Persisted", { selector: "strong" })).toBeInTheDocument();
await userEvent.click(streamingToggle);
await userEvent.click(headerToggle);
expect(within(streamingBubble).getByText(/\*\*Live\*\* stream/)).toBeInTheDocument();
expect(within(persistedBubble).getByText("Persisted", { selector: "strong" })).toBeInTheDocument();
await userEvent.click(persistedToggle);
expect(within(persistedBubble).getByText(/\*\*Persisted\*\*/)).toBeInTheDocument();
expect(within(streamingBubble).getByText(/\*\*Live\*\* stream/)).toBeInTheDocument();
await userEvent.click(headerToggle);
expect(within(streamingBubble).getByText("Live", { selector: "strong" })).toBeInTheDocument();
expect(within(persistedBubble).getByText("Persisted", { selector: "strong" })).toBeInTheDocument();
});
it("renders tool calls from persisted messages", () => {
@@ -869,7 +872,10 @@ describe("ChatView", () => {
expect(within(avatar!).queryByText("Fusion")).not.toBeInTheDocument();
});
it("shows Fusion in assistant message avatar for fn agent sessions", () => {
it("hides per-message assistant identity for fn agent (model-only) sessions", () => {
// Model-only chats use the active model as their identity, which is
// already shown in the thread header. We deliberately suppress the
// per-message avatar to avoid repeating it on every reply.
setupMockChat({
activeSession: { id: "session-001", agentId: "__fn_agent__", status: "active", title: "Fusion Chat", createdAt: "2026-04-08T00:00:00.000Z", updatedAt: "2026-04-08T00:00:00.000Z" },
messages: [
@@ -879,12 +885,11 @@ describe("ChatView", () => {
render(<ChatView projectId="proj-123" addToast={vi.fn()} />);
const avatar = document.querySelector(".chat-message-avatar") as HTMLElement | null;
expect(avatar).toBeInTheDocument();
expect(within(avatar!).getByText("Fusion")).toBeInTheDocument();
const messageBubble = screen.getByTestId("chat-message-msg-001");
expect(messageBubble.querySelector(".chat-message-avatar")).toBeNull();
});
it("shows formatted model name in assistant message avatar for fn agent sessions", async () => {
it("hides per-message assistant identity for fn agent (model-only) sessions even when a model is configured", async () => {
setupMockChat({
activeSession: {
id: "session-001",
@@ -902,14 +907,12 @@ describe("ChatView", () => {
render(<ChatView projectId="proj-123" addToast={vi.fn()} />);
const avatar = document.querySelector(".chat-message-avatar") as HTMLElement | null;
expect(avatar).toBeInTheDocument();
const messageBubble = screen.getByTestId("chat-message-msg-001");
expect(messageBubble.querySelector(".chat-message-avatar")).toBeNull();
// The model name still appears once in the thread header.
await waitFor(() => {
expect(within(avatar!).getByText("Claude Sonnet 4.5")).toBeInTheDocument();
expect(screen.getByText("Claude Sonnet 4.5")).toBeInTheDocument();
});
expect(within(avatar!).queryByText("Fusion")).not.toBeInTheDocument();
expect(avatar?.querySelector(".chat-model-tag")).toBeNull();
});
it("shows resolved agent name in streaming assistant avatar", async () => {
@@ -1858,7 +1861,11 @@ describe("ChatView", () => {
expect(modelTag).not.toBeInTheDocument();
});
it("shows model tag in message avatar when non-fn session has model", () => {
it("does not repeat the model tag in per-message avatars for non-fn sessions", () => {
// Per-message model tags were intentionally removed — the model is shown
// once in the thread header. The avatar should still render with the
// agent name (no agent identity collapse for real agents) but no model
// tag inside it.
setupMockChat({
activeSession: {
id: "session-001",
@@ -1876,12 +1883,13 @@ describe("ChatView", () => {
render(<ChatView projectId="proj-123" addToast={vi.fn()} />);
const avatar = document.querySelector(".chat-message-avatar") as HTMLElement | null;
const messageBubble = screen.getByTestId("chat-message-msg-001");
const avatar = messageBubble.querySelector(".chat-message-avatar") as HTMLElement | null;
expect(avatar).toBeInTheDocument();
expect(avatar?.querySelector(".chat-model-tag")?.textContent).toContain("GPT");
expect(avatar?.querySelector(".chat-model-tag")).toBeNull();
});
it("does not show duplicate model tag in message avatar for fn agent sessions", () => {
it("hides per-message identity entirely for fn agent (model-only) sessions even when model is set", () => {
setupMockChat({
activeSession: {
id: "session-001",
@@ -1899,10 +1907,8 @@ describe("ChatView", () => {
render(<ChatView projectId="proj-123" addToast={vi.fn()} />);
const avatar = document.querySelector(".chat-message-avatar") as HTMLElement | null;
expect(avatar).toBeInTheDocument();
expect(within(avatar!).getByText("GPT-4o")).toBeInTheDocument();
expect(avatar?.querySelector(".chat-model-tag")).toBeNull();
const messageBubble = screen.getByTestId("chat-message-msg-001");
expect(messageBubble.querySelector(".chat-message-avatar")).toBeNull();
});
});

40
packages/dashboard/app/hooks/chatTypes.ts Normal file
View File

@@ -0,0 +1,40 @@
/**
* Shared chat type definitions used by both `useChat` (full chat panel) and
* `useQuickChat` (FAB) plus the `createChatStreamHandlers` factory they
* compose. Keeping the types here lets the streaming-handler factory live in
* its own file without re-importing from one of the hooks (which would create
* an awkward parent→sibling dependency cycle).
*/
export interface ToolCallInfo {
toolName: string;
args?: Record<string, unknown>;
isError: boolean;
result?: unknown;
status: "running" | "completed";
}
export interface FallbackInfo {
primaryModel: string;
fallbackModel: string;
triggerPoint: "session-creation" | "prompt-time";
}
export interface ChatMessageInfo {
id: string;
sessionId: string;
role: "user" | "assistant" | "system";
content: string;
thinkingOutput?: string | null;
toolCalls?: ToolCallInfo[];
fallbackInfo?: FallbackInfo;
attachments?: Array<{
id: string;
filename: string;
originalName: string;
mimeType: string;
size: number;
createdAt: string;
}>;
createdAt: string;
}

212
packages/dashboard/app/hooks/createChatStreamHandlers.ts Normal file
View File

@@ -0,0 +1,212 @@
import type { ChatMessage } from "@fusion/core";
import type { Dispatch, RefObject, SetStateAction } from "react";
import type { ChatMessageInfo, FallbackInfo, ToolCallInfo } from "./chatTypes";
/**
* Inputs for the chat streaming-handler factory.
*
* The shared factory owns the per-stream accumulator state (text, thinking,
* tool calls, fallback info), the requestAnimationFrame coalescing of state
* updates, and the SSE event → state-setter wiring. Caller-specific behaviour
* for the terminal events (`onDone`, `onError`) and the optional
* `onFallbackSession` model-swap is provided through callbacks so that
* `useChat` and `useQuickChat` can plug in their own session-management
* semantics without re-implementing the streaming machinery.
*/
export interface CreateChatStreamHandlersOptions {
/** Active session id — used by `onFallbackSession` for parent-side updates. */
sessionId: string;
/** Optimistic temp id of the user message added before the stream started. */
tempUserMessageId: string;
/**
* The latest text/thinking/tool-call snapshots that are committed to React
* state. We pass setters (not values) so the factory can flush per-frame
* without rerunning the parent's effects.
*/
setStreamingText: Dispatch<SetStateAction<string>>;
setStreamingThinking: Dispatch<SetStateAction<string>>;
setStreamingToolCalls: Dispatch<SetStateAction<ToolCallInfo[]>>;
/**
* Caller-side `cancelStreamingFlushes` ref slot. The factory writes its own
* cancel function here so `stopStreaming` (in either parent hook) can call
* it to abort pending RAF flushes regardless of which sendMessage owns them.
*/
cancelStreamingFlushesRef: RefObject<(() => void) | null>;
/** Optional toast helper, used to surface fallback-model warnings + errors. */
addToast?: (message: string, level: "error" | "warning" | "success") => void;
/** Caller-supplied terminal handlers — bind in their own state setters. */
onDone: (data: {
messageId: string;
message?: ChatMessage;
accumulated: {
text: string;
thinking: string;
toolCalls: ToolCallInfo[];
fallbackInfo?: FallbackInfo;
};
}) => void;
onError: (data: string, tempUserMessageId: string) => void;
/**
* Fallback-model side effect for the parent (e.g. updating the session list
* or the active session's model fields). The factory still emits the toast.
*/
onFallbackSession?: (data: FallbackInfo, sessionId: string) => void;
}
export interface ChatStreamHandlers {
onThinking: (delta: string) => void;
onText: (delta: string) => void;
onToolStart: (data: { toolName: string; args?: Record<string, unknown> }) => void;
onToolEnd: (data: { toolName: string; isError: boolean; result?: unknown }) => void;
onFallback: (data: FallbackInfo) => void;
onDone: (data: { messageId: string; message?: ChatMessage }) => void;
onError: (data: string) => void;
}
export interface CreateChatStreamHandlersResult {
handlers: ChatStreamHandlers;
/** Cancel any pending RAF flushes for this stream. Idempotent. */
cancelFlushes: () => void;
}
/**
* Build the SSE handler bundle that `streamChatResponse` consumes. This is the
* portion of the chat send/stream flow that was identical between `useChat`
* and `useQuickChat`; extracting it keeps both hooks in sync when we tweak
* coalescing, tool-call dedup, fallback toasts, etc. The terminal events
* (`onDone`/`onError`) and parent-side fallback bookkeeping stay caller-owned
* because each hook handles message persistence and error recovery
* differently.
*
* The factory writes its `cancelFlushes` into `cancelStreamingFlushesRef.current`
* so the parent's `stopStreaming` can drain pending RAF callbacks before
* clearing transient streaming state — preventing a flushed delta from
* flashing back into the UI after a stop.
*/
export function createChatStreamHandlers(
options: CreateChatStreamHandlersOptions,
): CreateChatStreamHandlersResult {
const {
sessionId,
tempUserMessageId,
setStreamingText,
setStreamingThinking,
setStreamingToolCalls,
cancelStreamingFlushesRef,
addToast,
onDone,
onError,
onFallbackSession,
} = options;
let capturedText = "";
let capturedThinking = "";
let capturedToolCalls: ToolCallInfo[] = [];
let capturedFallbackInfo: FallbackInfo | undefined;
// Coalesce per-token state updates to one render per animation frame.
// ReactMarkdown re-parses the entire growing string on every render and
// every prior message also re-renders, so unthrottled setState here pegs
// the main thread on long replies.
let textRaf: number | null = null;
let thinkingRaf: number | null = null;
const flushText = (): void => {
textRaf = null;
setStreamingText(capturedText);
};
const flushThinking = (): void => {
thinkingRaf = null;
setStreamingThinking(capturedThinking);
};
const cancelFlushes = (): void => {
if (textRaf !== null) {
cancelAnimationFrame(textRaf);
textRaf = null;
}
if (thinkingRaf !== null) {
cancelAnimationFrame(thinkingRaf);
thinkingRaf = null;
}
};
cancelStreamingFlushesRef.current = cancelFlushes;
const handlers: ChatStreamHandlers = {
onThinking: (delta: string) => {
capturedThinking += delta;
if (thinkingRaf === null) {
thinkingRaf = requestAnimationFrame(flushThinking);
}
},
onText: (delta: string) => {
capturedText += delta;
if (textRaf === null) {
textRaf = requestAnimationFrame(flushText);
}
},
onToolStart: (data: { toolName: string; args?: Record<string, unknown> }) => {
capturedToolCalls = [
...capturedToolCalls,
{
toolName: data.toolName,
args: data.args,
isError: false,
status: "running",
},
];
setStreamingToolCalls(capturedToolCalls);
},
onToolEnd: (data: { toolName: string; isError: boolean; result?: unknown }) => {
const nextToolCalls = [...capturedToolCalls];
for (let i = nextToolCalls.length - 1; i >= 0; i--) {
const candidate = nextToolCalls[i];
if (candidate?.toolName === data.toolName && candidate.status === "running") {
nextToolCalls[i] = {
...candidate,
status: "completed",
isError: data.isError,
result: data.result,
};
capturedToolCalls = nextToolCalls;
setStreamingToolCalls(nextToolCalls);
return;
}
}
capturedToolCalls = [
...nextToolCalls,
{
toolName: data.toolName,
isError: data.isError,
result: data.result,
status: "completed",
},
];
setStreamingToolCalls(capturedToolCalls);
},
onFallback: (data: FallbackInfo) => {
capturedFallbackInfo = data;
onFallbackSession?.(data, sessionId);
addToast?.(`Primary model unavailable. Switched to fallback ${data.fallbackModel}.`, "warning");
},
onDone: (data: { messageId: string; message?: ChatMessage }) => {
cancelFlushes();
onDone({
messageId: data.messageId,
message: data.message,
accumulated: {
text: capturedText,
thinking: capturedThinking,
toolCalls: capturedToolCalls,
fallbackInfo: capturedFallbackInfo,
},
});
},
onError: (data: string) => {
cancelFlushes();
onError(data, tempUserMessageId);
},
};
return { handlers, cancelFlushes };
}
export type { ChatMessageInfo };

174
packages/dashboard/app/hooks/useChat.ts
View File

@@ -30,38 +30,11 @@ export interface ChatSessionInfo {
isGenerating?: boolean;
}
export interface ToolCallInfo {
toolName: string;
args?: Record<string, unknown>;
isError: boolean;
result?: unknown;
status: "running" | "completed";
}
export interface FallbackInfo {
primaryModel: string;
fallbackModel: string;
triggerPoint: "session-creation" | "prompt-time";
}
export interface ChatMessageInfo {
id: string;
sessionId: string;
role: "user" | "assistant" | "system";
content: string;
thinkingOutput?: string | null;
toolCalls?: ToolCallInfo[];
fallbackInfo?: FallbackInfo;
attachments?: Array<{
id: string;
filename: string;
originalName: string;
mimeType: string;
size: number;
createdAt: string;
}>;
createdAt: string;
}
// Re-export shared chat types so existing consumers (`import { ChatMessageInfo } from "../hooks/useChat"`)
// keep working — single source of truth lives in chatTypes.ts.
export type { ChatMessageInfo, FallbackInfo, ToolCallInfo } from "./chatTypes";
import type { ChatMessageInfo, FallbackInfo, ToolCallInfo } from "./chatTypes";
import { createChatStreamHandlers } from "./createChatStreamHandlers";
export interface UseChatReturn {
// Session state
@@ -547,127 +520,37 @@ export function useChat(
setStreamingToolCalls([]);
setIsStreaming(true);
// Accumulate streaming text and tool calls in local variables
let capturedText = "";
let capturedThinking = "";
let capturedToolCalls: ToolCallInfo[] = [];
let capturedFallbackInfo: FallbackInfo | undefined;
// Coalesce per-token state updates to one render per animation frame.
// ReactMarkdown re-parses the entire growing string on every render and
// every prior message also re-renders, so unthrottled updates pin the
// main thread for long replies.
let textRaf: number | null = null;
let thinkingRaf: number | null = null;
const flushText = () => {
textRaf = null;
setStreamingText(capturedText);
};
const flushThinking = () => {
thinkingRaf = null;
setStreamingThinking(capturedThinking);
};
const cancelStreamingFlushes = () => {
if (textRaf !== null) {
cancelAnimationFrame(textRaf);
textRaf = null;
}
if (thinkingRaf !== null) {
cancelAnimationFrame(thinkingRaf);
thinkingRaf = null;
}
};
cancelStreamingFlushesRef.current = cancelStreamingFlushes;
const textHandlers = {
onThinking: (data: string) => {
capturedThinking += data;
if (thinkingRaf === null) {
thinkingRaf = requestAnimationFrame(flushThinking);
}
},
onText: (data: string) => {
capturedText += data;
if (textRaf === null) {
textRaf = requestAnimationFrame(flushText);
}
},
onToolStart: (data: { toolName: string; args?: Record<string, unknown> }) => {
capturedToolCalls = [
...capturedToolCalls,
{
toolName: data.toolName,
args: data.args,
isError: false,
status: "running",
},
];
setStreamingToolCalls(capturedToolCalls);
},
onToolEnd: (data: { toolName: string; isError: boolean; result?: unknown }) => {
const nextToolCalls = [...capturedToolCalls];
for (let i = nextToolCalls.length - 1; i >= 0; i--) {
const candidate = nextToolCalls[i];
if (candidate?.toolName === data.toolName && candidate.status === "running") {
nextToolCalls[i] = {
...candidate,
status: "completed",
isError: data.isError,
result: data.result,
};
capturedToolCalls = nextToolCalls;
setStreamingToolCalls(nextToolCalls);
return;
}
}
capturedToolCalls = [
...nextToolCalls,
{
toolName: data.toolName,
isError: data.isError,
result: data.result,
status: "completed",
},
];
setStreamingToolCalls(capturedToolCalls);
},
onFallback: (data: FallbackInfo) => {
capturedFallbackInfo = data;
const { handlers } = createChatStreamHandlers({
sessionId: activeSession.id,
tempUserMessageId: tempId,
setStreamingText,
setStreamingThinking,
setStreamingToolCalls,
cancelStreamingFlushesRef,
addToast,
onFallbackSession: (data, sessionId) => {
const nextModel = parseModelDescriptor(data.fallbackModel);
setSessions((prev) => prev.map((session) =>
session.id === activeSession.id
? {
...session,
...nextModel,
}
: session,
session.id === sessionId ? { ...session, ...nextModel } : session,
));
setActiveSession((prev) => prev && prev.id === activeSession.id
? {
...prev,
...nextModel,
}
: prev);
addToast?.(`Primary model unavailable. Switched to fallback ${data.fallbackModel}.`, "warning");
setActiveSession((prev) => prev && prev.id === sessionId ? { ...prev, ...nextModel } : prev);
},
onDone: (data: { messageId: string; message?: ChatMessage }) => {
cancelStreamingFlushes();
const finalMessage = data.message;
onDone: ({ messageId, message: finalMessage, accumulated }) => {
const assistantMessage: ChatMessageInfo = finalMessage
? mapChatMessageToInfo(finalMessage)
: {
id: data.messageId || `msg-${Date.now()}`,
id: messageId || `msg-${Date.now()}`,
sessionId: activeSession.id,
role: "assistant",
content: capturedText,
thinkingOutput: capturedThinking,
toolCalls: capturedToolCalls.length > 0 ? capturedToolCalls : undefined,
fallbackInfo: capturedFallbackInfo,
content: accumulated.text,
thinkingOutput: accumulated.thinking,
toolCalls: accumulated.toolCalls.length > 0 ? accumulated.toolCalls : undefined,
fallbackInfo: accumulated.fallbackInfo,
createdAt: new Date().toISOString(),
};
// Track this message ID so SSE handler skips it if event arrives first
// Track this message ID so the SSE chatMessageAdded handler skips it
// if the broadcast event arrives before our optimistic add settles.
streamingMessageIdsRef.current.add(assistantMessage.id);
// Preserve user message and add assistant message
@@ -693,9 +576,8 @@ export function useChat(
sendMessage(queuedMessage);
}
},
onError: (data: string) => {
cancelStreamingFlushes();
setMessages((prev) => prev.filter((m) => m.id !== tempId));
onError: (data, tempUserMessageId) => {
setMessages((prev) => prev.filter((m) => m.id !== tempUserMessageId));
setStreamingText("");
setStreamingThinking("");
setStreamingToolCalls([]);
@@ -713,9 +595,9 @@ export function useChat(
}
}
},
};
});
streamRef.current = streamChatResponse(activeSession.id, content, textHandlers, attachments, projectId);
streamRef.current = streamChatResponse(activeSession.id, content, handlers, attachments, projectId);
},
[activeSession, isStreaming, projectId, refreshSessions, addToast],
);

162
packages/dashboard/app/hooks/useQuickChat.ts
View File

@@ -12,30 +12,14 @@ import {
export const FN_AGENT_ID = "__fn_agent__";
export interface ToolCallInfo {
toolName: string;
args?: Record<string, unknown>;
isError: boolean;
result?: unknown;
status: "running" | "completed";
}
export interface FallbackInfo {
primaryModel: string;
fallbackModel: string;
triggerPoint: "session-creation" | "prompt-time";
}
export interface ChatMessageInfo {
id: string;
sessionId: string;
role: "user" | "assistant" | "system";
content: string;
thinkingOutput?: string | null;
toolCalls?: ToolCallInfo[];
fallbackInfo?: FallbackInfo;
createdAt: string;
}
// Re-export shared chat types so existing consumers keep working — single
// source of truth lives in chatTypes.ts and is shared with useChat.
// Note: useQuickChat's previous local `ChatMessageInfo` lacked the
// `attachments` field; the shared type adds it (a strict superset), which is
// safe for callers that ignore it.
export type { ChatMessageInfo, FallbackInfo, ToolCallInfo } from "./chatTypes";
import type { ChatMessageInfo, FallbackInfo, ToolCallInfo } from "./chatTypes";
import { createChatStreamHandlers } from "./createChatStreamHandlers";
interface ModelSelection {
modelProvider?: string;
@@ -559,121 +543,32 @@ export function useQuickChat(
setStreamingToolCalls([]);
setIsStreaming(true);
// Accumulate streaming text and tool calls in local variables
let capturedText = "";
let capturedThinking = "";
let capturedToolCalls: ToolCallInfo[] = [];
let capturedFallbackInfo: FallbackInfo | undefined;
// Coalesce per-token state updates to one render per animation frame —
// unthrottled setStreamingText pegs the main thread on long replies.
let textRaf: number | null = null;
let thinkingRaf: number | null = null;
const flushText = () => {
textRaf = null;
setStreamingText(capturedText);
};
const flushThinking = () => {
thinkingRaf = null;
setStreamingThinking(capturedThinking);
};
const cancelStreamingFlushes = () => {
if (textRaf !== null) {
cancelAnimationFrame(textRaf);
textRaf = null;
}
if (thinkingRaf !== null) {
cancelAnimationFrame(thinkingRaf);
thinkingRaf = null;
}
};
cancelStreamingFlushesRef.current = cancelStreamingFlushes;
const textHandlers = {
onThinking: (data: string) => {
capturedThinking += data;
if (thinkingRaf === null) {
thinkingRaf = requestAnimationFrame(flushThinking);
}
},
onText: (data: string) => {
capturedText += data;
if (textRaf === null) {
textRaf = requestAnimationFrame(flushText);
}
},
onToolStart: (data: { toolName: string; args?: Record<string, unknown> }) => {
capturedToolCalls = [
...capturedToolCalls,
{
toolName: data.toolName,
args: data.args,
isError: false,
status: "running",
},
];
setStreamingToolCalls(capturedToolCalls);
},
onToolEnd: (data: { toolName: string; isError: boolean; result?: unknown }) => {
const nextToolCalls = [...capturedToolCalls];
for (let i = nextToolCalls.length - 1; i >= 0; i--) {
const candidate = nextToolCalls[i];
if (candidate?.toolName === data.toolName && candidate.status === "running") {
nextToolCalls[i] = {
...candidate,
status: "completed",
isError: data.isError,
result: data.result,
};
capturedToolCalls = nextToolCalls;
setStreamingToolCalls(nextToolCalls);
return;
}
}
capturedToolCalls = [
...nextToolCalls,
{
toolName: data.toolName,
isError: data.isError,
result: data.result,
status: "completed",
},
];
setStreamingToolCalls(capturedToolCalls);
},
onFallback: (data: FallbackInfo) => {
capturedFallbackInfo = data;
const { handlers } = createChatStreamHandlers({
sessionId: activeSession.id,
tempUserMessageId: tempId,
setStreamingText,
setStreamingThinking,
setStreamingToolCalls,
cancelStreamingFlushesRef,
addToast,
onFallbackSession: (data, sessionId) => {
const nextModel = parseModelDescriptor(data.fallbackModel);
setSessions((prev) => prev.map((session) =>
session.id === activeSession.id
? {
...session,
...nextModel,
}
: session,
session.id === sessionId ? { ...session, ...nextModel } : session,
));
setActiveSession((prev) => prev && prev.id === activeSession.id
? {
...prev,
...nextModel,
}
: prev);
addToast?.(`Primary model unavailable. Switched to fallback ${data.fallbackModel}.`, "warning");
setActiveSession((prev) => prev && prev.id === sessionId ? { ...prev, ...nextModel } : prev);
},
onDone: (data: { messageId: string; message?: ChatMessage }) => {
cancelStreamingFlushes();
const finalMessage = data.message;
onDone: ({ messageId, message: finalMessage, accumulated }) => {
const assistantMessage: ChatMessageInfo = finalMessage
? mapChatMessageToInfo(finalMessage)
: {
id: data.messageId || `msg-${Date.now()}`,
id: messageId || `msg-${Date.now()}`,
sessionId: activeSession.id,
role: "assistant",
content: capturedText,
thinkingOutput: capturedThinking || undefined,
toolCalls: capturedToolCalls.length > 0 ? capturedToolCalls : undefined,
fallbackInfo: capturedFallbackInfo,
content: accumulated.text,
thinkingOutput: accumulated.thinking || undefined,
toolCalls: accumulated.toolCalls.length > 0 ? accumulated.toolCalls : undefined,
fallbackInfo: accumulated.fallbackInfo,
createdAt: new Date().toISOString(),
};
@@ -695,8 +590,7 @@ export function useQuickChat(
void sendMessage(queuedMessage);
}
},
onError: (data: string) => {
cancelStreamingFlushes();
onError: (data) => {
setStreamingText("");
setStreamingThinking("");
setStreamingToolCalls([]);
@@ -718,9 +612,9 @@ export function useQuickChat(
void reloadMessages();
},
};
});
streamRef.current = streamChatResponse(activeSession.id, content, textHandlers, attachments, projectId);
streamRef.current = streamChatResponse(activeSession.id, content, handlers, attachments, projectId);
});
// Preserve rejection semantics for awaiters while preventing unhandled rejection noise

55
packages/dashboard/src/chat.ts
View File

@@ -1013,17 +1013,21 @@ export class ChatManager {
},
};
// Single agent-creation path for both regular chat and QuickChat. When
// the chat is bound to an agent that declares a runtime hint we pass it
// through; when there's no agent (e.g. QuickChat's model-only mode) or
// no hint, `createResolvedAgentSession` falls back to the default
// runtime via `resolveRuntime`. This avoids the previous divergence
// where QuickChat went through `createFnAgent` and hit pi-ai's shared
// `cleanupSessionResources(sessionId)` tear-down across overlapping
// sessions opened from the same CLI session file.
const agentRuntimeHint = agent ? extractRuntimeHint(agent.runtimeConfig) : undefined;
if (agentRuntimeHint) {
agentResult = await createResolvedAgentSession({
sessionPurpose: "executor",
runtimeHint: agentRuntimeHint,
pluginRunner: this.pluginRunner,
...sessionOptions,
});
} else {
agentResult = await createFnAgent(sessionOptions);
}
agentResult = await createResolvedAgentSession({
sessionPurpose: "executor",
...(agentRuntimeHint ? { runtimeHint: agentRuntimeHint } : {}),
pluginRunner: this.pluginRunner,
...sessionOptions,
});
this.activeGenerations.set(sessionId, { abortController, agentResult, generationId });
if (abortController.signal.aborted) {
@@ -1143,16 +1147,29 @@ export class ChatManager {
data: errorMessage,
}, broadcastOptions);
} finally {
// Only clear the active-generation slot if it still belongs to us. If a newer
// sendMessage pre-empted us via beginGeneration, the slot now holds that newer
// generation's controller and must not be deleted by our cleanup.
// Only clear the active-generation slot if it still belongs to us. If a
// newer sendMessage pre-empted us via beginGeneration, the slot now holds
// that newer generation's controller and must not be deleted by us.
const current = this.activeGenerations.get(sessionId);
if (current?.generationId === generationId) {
const stillOwnsSlot = current?.generationId === generationId;
if (stillOwnsSlot) {
this.activeGenerations.delete(sessionId);
}
// Always dispose agent session
if (agentResult) {
// Dispose the agent session — but ONLY when we still own the slot.
//
// pi-ai's `cleanupSessionResources(sessionId)` fires globally-registered
// cleanup callbacks keyed by sessionId, and two agents opened from the
// same CLI session file share that sessionId. If a newer generation has
// taken over for the same chat session, disposing this (older) agent
// tears down resources the newer agent is actively using — the model
// produces no output and the next turn looks like a silent failure.
//
// The newer generation will dispose its own agent in its own finally.
// The older agent's resources are largely garbage-collectible without
// an explicit dispose; the small leak per pre-empted generation is
// worth avoiding the cross-generation tear-down.
if (stillOwnsSlot && agentResult) {
try {
agentResult.session.dispose?.();
} catch (err) {
@@ -1209,6 +1226,12 @@ export class ChatManager {
*/
export function __setCreateFnAgent(mock: typeof createFnAgent): void {
createFnAgent = mock;
// chat.ts now routes both regular chat and QuickChat through
// `createResolvedAgentSession`, which would normally bypass this mock and
// hit the real engine. Mirror the same fake into the resolved-session slot
// so existing test setups that only call `__setCreateFnAgent` continue to
// work.
createResolvedAgentSession = (async (options: any) => mock(options)) as typeof createResolvedAgentSession;
}
/**