@xinghunm/ai-chat 1.1.2 → 1.2.1

package/dist/index.mjs

@@ -49,6 +49,28 @@ var DEFAULT_AI_CHAT_LABELS = {
   questionnaireOtherPlaceholder: "Other"
 };
 
+// src/lib/chat-session.ts
+var DRAFT_CHAT_SESSION_ID_PREFIX = "draft-session-";
+var draftChatSessionSequence = 0;
+var createDraftChatSessionId = () => `${DRAFT_CHAT_SESSION_ID_PREFIX}${Date.now()}-${draftChatSessionSequence++}`;
+var isDraftChatSessionId = (sessionId) => Boolean(sessionId?.startsWith(DRAFT_CHAT_SESSION_ID_PREFIX));
+var createDraftChatSession = ({
+  model,
+  mode = DEFAULT_CHAT_AGENT_MODE,
+  nowIso: nowIso2,
+  createSessionId = createDraftChatSessionId
+}) => {
+  const iso = nowIso2();
+  return {
+    sessionId: createSessionId(),
+    title: "New Chat",
+    createdAt: iso,
+    updatedAt: iso,
+    model,
+    mode
+  };
+};
+
 // src/store/chat-store.ts
 var DEFAULT_CHAT_SESSION_TITLE = "New Chat";
 var IMAGE_MESSAGE_SESSION_TITLE = "Image message";
@@ -182,6 +204,15 @@ var createChatStore = (initialState) => createStore((set, get) => ({
       isStoppingBySession: nextIsStoppingBySession
     });
   },
+  startNewChat: () => {
+    const state = get();
+    const session = createDraftChatSession({
+      model: "",
+      mode: state.preferredMode,
+      nowIso: () => (/* @__PURE__ */ new Date()).toISOString()
+    });
+    get().createSession(session);
+  },
   setActiveSession: (sessionId) => {
     set({ activeSessionId: sessionId });
   },
@@ -444,6 +475,7 @@ var startChatStream = async ({
   sessionId,
   authToken,
   requestHeaders,
+  requestBody,
   model,
   mode,
   content,
@@ -465,12 +497,14 @@ var startChatStream = async ({
     const response = await fetch(`${apiBaseUrl}${endpointPath}`, {
       method: "POST",
       headers,
-      body: JSON.stringify({
-        model,
-        mode,
-        stream: true,
-        messages: [{ role: "user", content }]
-      }),
+      body: JSON.stringify(
+        requestBody ?? {
+          model,
+          mode,
+          stream: true,
+          messages: [{ role: "user", content }]
+        }
+      ),
       signal
     });
     const contentType = response.headers.get("content-type") ?? "";
@@ -546,11 +580,70 @@ var createModeDefaultHeaders = (mode) => {
   }
   return {};
 };
+var readFileAsDataUrl = (file) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    if (typeof reader.result === "string") {
+      resolve(reader.result);
+      return;
+    }
+    reject(new Error(`Failed to read image attachment: ${file.name}`));
+  };
+  reader.onerror = () => {
+    reject(new Error(`Failed to read image attachment: ${file.name}`));
+  };
+  reader.readAsDataURL(file);
+});
+var resolveAttachmentDataUrl = async (attachment) => {
+  if (attachment.file) {
+    return readFileAsDataUrl(attachment.file);
+  }
+  if (attachment.previewUrl.startsWith("data:image/")) {
+    return attachment.previewUrl;
+  }
+  throw new Error(`Attachment is missing file data: ${attachment.name}`);
+};
+var createDefaultRequestBody = async ({
+  model,
+  mode,
+  content,
+  attachments
+}) => {
+  const hasAttachments = Boolean(attachments?.length);
+  if (!hasAttachments) {
+    return {
+      model,
+      mode,
+      stream: true,
+      messages: [{ role: "user", content }]
+    };
+  }
+  const imageParts = await Promise.all(
+    (attachments ?? []).map(async (attachment) => ({
+      type: "image_url",
+      image_url: {
+        url: await resolveAttachmentDataUrl(attachment)
+      }
+    }))
+  );
+  const messageContent = [
+    ...content ? [{ type: "text", text: content }] : [],
+    ...imageParts
+  ];
+  return {
+    model,
+    mode,
+    stream: true,
+    messages: [{ role: "user", content: messageContent }]
+  };
+};
 var createDefaultChatTransport = ({
   apiBaseUrl,
   authToken,
   toolExecutionPolicy,
   streamHeaders,
+  resolveModels,
+  buildRequestBody,
   transformStreamPacket,
   endpoints,
   axiosInstance
@@ -565,12 +658,13 @@ var createDefaultChatTransport = ({
     ...streamHeaders
   };
   return {
-    getModels: () => getChatModels(client, resolvedEndpoints.models),
+    getModels: () => resolveModels?.() ?? getChatModels(client, resolvedEndpoints.models),
     startStream: async ({
       sessionId,
       model,
       mode,
       content,
+      attachments,
       signal,
       onUpdate,
       onSessionId,
@@ -581,12 +675,20 @@ var createDefaultChatTransport = ({
         ...createModeDefaultHeaders(mode),
         ...resolvedStreamHeaders
       };
+      const requestBody = buildRequestBody ? buildRequestBody({
+        sessionId,
+        model,
+        mode,
+        content,
+        attachments
+      }) : await createDefaultRequestBody({ model, mode, content, attachments });
       await startChatStream({
         apiBaseUrl,
         endpointPath: resolvedEndpoints.completions,
         sessionId,
         authToken,
         requestHeaders,
+        requestBody,
         model,
         mode,
         content,
@@ -628,6 +730,8 @@ var AiChatProvider = (props) => {
   });
   const retryRef = useRef(async () => {
   });
+  const stopRef = useRef(async (_sessionId) => {
+  });
   const defaultApiBaseUrl = "apiBaseUrl" in props ? props.apiBaseUrl : void 0;
   const defaultAuthToken = "authToken" in props ? props.authToken : void 0;
   const defaultTransformStreamPacket = "transformStreamPacket" in props ? props.transformStreamPacket : void 0;
@@ -671,6 +775,7 @@ var AiChatProvider = (props) => {
       labels: { ...DEFAULT_AI_CHAT_LABELS, ...labels },
       sendRef,
       retryRef,
+      stopRef,
       renderMessageBlock,
       handleQuestionnaireSubmit,
       handleConfirmationSubmit,
@@ -691,6 +796,7 @@ var AiChatProvider = (props) => {
       renderMessageBlock,
       sendRef,
       retryRef,
+      stopRef,
       store,
       transport
     ]
@@ -1495,7 +1601,6 @@ import {
   useState as useState2
 } from "react";
 import styled4 from "@emotion/styled";
-import { Input } from "@xinghunm/compass-ui";
 
 // src/components/chat-thread/components/questionnaire-card-helpers.ts
 var OTHER_OPTION_VALUE = "__other__";
@@ -2296,7 +2401,7 @@ var TextInput = styled4.input`
     color: rgba(255, 255, 255, 0.34);
   }
 `;
-var InlineOtherInput = styled4(Input)`
+var InlineOtherInput = styled4.input`
   width: 100%;
   margin-top: 0;
 
@@ -3684,19 +3789,20 @@ var ChatThread = () => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
-    void retryRef.current();
+    void retryRef.current(activeSessionId);
   }, [activeSessionId, clearSessionError, retryRef]);
   const handleQuestionnaireSubmit = useCallback3(
     async (submission) => {
+      const sourceSessionId = activeSessionId;
       if (customQuestionnaireSubmit) {
         const handled = await customQuestionnaireSubmit(submission, {
-          sessionId: activeSessionId ?? void 0,
+          sessionId: sourceSessionId ?? void 0,
           mode: activeSessionMode
         });
         if (handled !== false) {
-          if (activeSessionId && submission.sourceMessageId) {
+          if (sourceSessionId && submission.sourceMessageId) {
             updateQA(
-              activeSessionId,
+              sourceSessionId,
               submission.sourceMessageId,
               submission.questionnaireId,
               submission.answers
@@ -3705,10 +3811,13 @@ var ChatThread = () => {
           return;
         }
       }
-      await sendRef.current(submission.content);
-      if (activeSessionId && submission.sourceMessageId) {
+      await sendRef.current(submission.content, {
+        sessionId: sourceSessionId ?? void 0,
+        includeComposerAttachments: false
+      });
+      if (sourceSessionId && submission.sourceMessageId) {
         updateQA(
-          activeSessionId,
+          sourceSessionId,
           submission.sourceMessageId,
           submission.questionnaireId,
           submission.answers
@@ -3719,16 +3828,20 @@ var ChatThread = () => {
   );
   const handleConfirmation = useCallback3(
     async (submission) => {
+      const sourceSessionId = activeSessionId;
       if (customConfirmationSubmit) {
         const handled = await customConfirmationSubmit(submission, {
-          sessionId: activeSessionId ?? void 0,
+          sessionId: sourceSessionId ?? void 0,
           mode: activeSessionMode
         });
         if (handled !== false) {
           return;
         }
       }
-      await sendRef.current(submission.content);
+      await sendRef.current(submission.content, {
+        sessionId: sourceSessionId ?? void 0,
+        includeComposerAttachments: false
+      });
     },
     [activeSessionId, activeSessionMode, sendRef, customConfirmationSubmit]
   );
@@ -3865,25 +3978,6 @@ import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as
 import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
-var DRAFT_CHAT_SESSION_ID_PREFIX = "draft-session-";
-var createDraftChatSessionId = () => `${DRAFT_CHAT_SESSION_ID_PREFIX}${Date.now()}`;
-var isDraftChatSessionId = (sessionId) => Boolean(sessionId?.startsWith(DRAFT_CHAT_SESSION_ID_PREFIX));
-var createDraftChatSession = ({
-  model,
-  mode = DEFAULT_CHAT_AGENT_MODE,
-  nowIso: nowIso2,
-  createSessionId
-}) => {
-  const iso = nowIso2();
-  return {
-    sessionId: createSessionId(),
-    title: "New Chat",
-    createdAt: iso,
-    updatedAt: iso,
-    model,
-    mode
-  };
-};
 var createUserMessage = ({
   sessionId,
   content,
@@ -4044,7 +4138,8 @@ var useComposerAttachments = () => {
       return [];
     }
     const nextMessageAttachments = currentAttachments.map(({ file: _file, ...attachment }) => ({
-      ...attachment
+      ...attachment,
+      file: _file
     }));
     attachmentsRef.current = [];
     setAttachments([]);
@@ -4083,19 +4178,20 @@ var normalizeChatErrorMessage = (message, labels) => {
   return trimmedMessage;
 };
 var useChatComposer = () => {
-  const { transport, enableImageAttachments, labels } = useChatContext();
+  const { transport, enableImageAttachments, labels, store } = useChatContext();
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const activeSession = useChatStore(
     (s) => s.sessions.find((x) => x.sessionId === s.activeSessionId) ?? null
   );
   const preferredMode = useChatStore((s) => s.preferredMode);
   const streamingSessionId = useChatStore(
-    (s) => Object.entries(s.isStreamingBySession).find(([, v]) => v)?.[0] ?? null
+    (s) => s.activeSessionId && s.isStreamingBySession[s.activeSessionId] ? s.activeSessionId : null
   );
   const isStreaming = Boolean(streamingSessionId);
-  const isStopping = useChatStore(
-    (s) => streamingSessionId ? s.isStoppingBySession[streamingSessionId] ?? false : false
-  );
+  const isStopping = useChatStore((s) => {
+    const currentStreamingSessionId = s.activeSessionId && s.isStreamingBySession[s.activeSessionId] ? s.activeSessionId : null;
+    return currentStreamingSessionId ? s.isStoppingBySession[currentStreamingSessionId] ?? false : false;
+  });
   const createSession = useChatStore((s) => s.createSession);
   const replaceSessionId = useChatStore((s) => s.replaceSessionId);
   const appendMessage = useChatStore((s) => s.appendMessage);
@@ -4132,9 +4228,9 @@ var useChatComposer = () => {
   const [selectedMode, setSelectedModeLocal] = useState6(DEFAULT_CHAT_AGENT_MODE);
   const [attachmentNotice, setAttachmentNotice] = useState6(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerRef = useRef7(null);
-  const stopRequestRef = useRef7(null);
-  const lastRequestRef = useRef7(null);
+  const abortControllerBySessionRef = useRef7(/* @__PURE__ */ new Map());
+  const stopRequestBySessionRef = useRef7(/* @__PURE__ */ new Map());
+  const lastRequestBySessionRef = useRef7(/* @__PURE__ */ new Map());
   useEffect6(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
@@ -4157,33 +4253,47 @@ var useChatComposer = () => {
     return () => window.clearTimeout(timeoutId);
   }, [attachmentNotice]);
   const clearStopTimeout = (sessionId) => {
-    if (!stopRequestRef.current)
-      return;
-    if (sessionId && stopRequestRef.current.sessionId !== sessionId)
+    const stopRequest = stopRequestBySessionRef.current.get(sessionId);
+    if (!stopRequest || stopRequest.timeoutId === null) {
       return;
-    if (stopRequestRef.current.timeoutId !== null) {
-      window.clearTimeout(stopRequestRef.current.timeoutId);
-      stopRequestRef.current.timeoutId = null;
     }
+    window.clearTimeout(stopRequest.timeoutId);
+    stopRequest.timeoutId = null;
   };
   const clearStopRequest = useCallback4((sessionId) => {
-    if (!stopRequestRef.current)
-      return;
-    if (sessionId && stopRequestRef.current.sessionId !== sessionId)
-      return;
     clearStopTimeout(sessionId);
-    stopRequestRef.current = null;
+    stopRequestBySessionRef.current.delete(sessionId);
   }, []);
+  const moveSessionRuntimeState = useCallback4(
+    (previousSessionId, nextSessionId) => {
+      if (previousSessionId === nextSessionId) {
+        return;
+      }
+      const abortController = abortControllerBySessionRef.current.get(previousSessionId);
+      if (abortController) {
+        abortControllerBySessionRef.current.set(nextSessionId, abortController);
+        abortControllerBySessionRef.current.delete(previousSessionId);
+      }
+      const stopRequest = stopRequestBySessionRef.current.get(previousSessionId);
+      if (stopRequest) {
+        stopRequestBySessionRef.current.set(nextSessionId, stopRequest);
+        stopRequestBySessionRef.current.delete(previousSessionId);
+      }
+    },
+    []
+  );
   const finalizeStop = useCallback4(
     (sessionId) => {
-      if (stopRequestRef.current?.sessionId === sessionId) {
-        if (stopRequestRef.current.finalized)
+      const stopRequest = stopRequestBySessionRef.current.get(sessionId);
+      if (stopRequest) {
+        if (stopRequest.finalized) {
           return;
-        stopRequestRef.current.finalized = true;
+        }
+        stopRequest.finalized = true;
       }
       clearStopTimeout(sessionId);
-      abortControllerRef.current?.abort();
-      abortControllerRef.current = null;
+      abortControllerBySessionRef.current.get(sessionId)?.abort();
+      abortControllerBySessionRef.current.delete(sessionId);
       finalizeStoppedStreamingMessage(sessionId);
       clearStopRequest(sessionId);
     },
@@ -4194,10 +4304,11 @@ var useChatComposer = () => {
       localSessionId,
       sessionId,
       content,
+      attachments: attachments2,
       model,
       mode
     }) => {
-      clearStopRequest();
+      clearStopRequest(localSessionId);
       let currentSessionId = localSessionId;
       clearSessionError(currentSessionId);
       const assistantMessage = createAssistantStreamingMessage({
@@ -4206,29 +4317,44 @@ var useChatComposer = () => {
         createMessageId: () => `assistant-${Date.now()}`
       });
       startStreamingMessage(currentSessionId, assistantMessage);
-      abortControllerRef.current?.abort();
-      abortControllerRef.current = new AbortController();
-      lastRequestRef.current = { localSessionId, sessionId, content, model, mode };
+      abortControllerBySessionRef.current.get(currentSessionId)?.abort();
+      const abortController = new AbortController();
+      abortControllerBySessionRef.current.set(currentSessionId, abortController);
+      lastRequestBySessionRef.current.set(currentSessionId, {
+        localSessionId,
+        sessionId,
+        content,
+        attachments: attachments2,
+        model,
+        mode
+      });
       let accumulated = "";
+      let streamSettled = false;
       try {
         await transport.startStream({
           sessionId,
           model,
           mode,
           content,
-          signal: abortControllerRef.current.signal,
+          attachments: attachments2,
+          signal: abortController.signal,
           onSessionId: (nextSessionId) => {
             if (!nextSessionId || nextSessionId === currentSessionId)
               return;
-            replaceSessionId(currentSessionId, nextSessionId);
+            const previousSessionId = currentSessionId;
+            replaceSessionId(previousSessionId, nextSessionId);
+            moveSessionRuntimeState(previousSessionId, nextSessionId);
             currentSessionId = nextSessionId;
-            lastRequestRef.current = {
+            const nextRequest = {
               localSessionId: nextSessionId,
               sessionId: nextSessionId,
               content,
+              attachments: attachments2,
               model,
               mode
             };
+            lastRequestBySessionRef.current.delete(previousSessionId);
+            lastRequestBySessionRef.current.set(nextSessionId, nextRequest);
           },
           onUpdate: (update) => {
             accumulated = resolveAccumulatedContent(accumulated, update);
@@ -4238,16 +4364,18 @@ var useChatComposer = () => {
             });
           },
           onDone: () => {
-            if (stopRequestRef.current?.sessionId === currentSessionId) {
+            streamSettled = true;
+            if (stopRequestBySessionRef.current.has(currentSessionId)) {
               finalizeStop(currentSessionId);
               return;
             }
             completeStreamingMessage(currentSessionId);
-            abortControllerRef.current = null;
+            abortControllerBySessionRef.current.delete(currentSessionId);
             clearStopRequest(currentSessionId);
           },
           onError: (streamError) => {
-            if (stopRequestRef.current?.sessionId === currentSessionId) {
+            streamSettled = true;
+            if (stopRequestBySessionRef.current.has(currentSessionId)) {
               finalizeStop(currentSessionId);
               return;
             }
@@ -4256,12 +4384,24 @@ var useChatComposer = () => {
               currentSessionId,
               normalizeChatErrorMessage(streamError.message, labels)
             );
-            abortControllerRef.current = null;
+            abortControllerBySessionRef.current.delete(currentSessionId);
             clearStopRequest(currentSessionId);
           }
         });
-      } catch {
-        abortControllerRef.current = null;
+      } catch (streamError) {
+        abortControllerBySessionRef.current.delete(currentSessionId);
+        if (streamSettled || abortController.signal.aborted || !store.getState().isStreamingBySession[currentSessionId]) {
+          return;
+        }
+        finalizeStoppedStreamingMessage(currentSessionId);
+        setSessionError(
+          currentSessionId,
+          normalizeChatErrorMessage(
+            streamError instanceof Error ? streamError.message : void 0,
+            labels
+          )
+        );
+        clearStopRequest(currentSessionId);
       }
     },
     [
@@ -4270,61 +4410,68 @@ var useChatComposer = () => {
       clearStopRequest,
       finalizeStop,
       labels,
+      moveSessionRuntimeState,
       startStreamingMessage,
       replaceSessionId,
       patchStreamingMessage,
       completeStreamingMessage,
       finalizeStoppedStreamingMessage,
-      setSessionError
+      setSessionError,
+      store
     ]
   );
   const send = useCallback4(
-    async (contentOverride) => {
+    async (contentOverride, options) => {
       const content = (contentOverride ?? value).trim();
-      const hasText = Boolean(content);
-      const hasAttachments = attachments.length > 0;
+      const includeComposerAttachments = options?.includeComposerAttachments ?? true;
+      const composerAttachmentCount = includeComposerAttachments ? attachments.length : 0;
       if (!canSendChatMessage({
         value: content,
-        attachmentCount: attachments.length,
+        attachmentCount: composerAttachmentCount,
         isModelsLoading,
         isModelsError,
         hasModels
       })) {
         return;
       }
-      if (hasText && !(selectedModel || activeSession?.model || availableModels[0]?.id)) {
+      const storeState = store.getState();
+      const currentActiveSessionId = options?.sessionId ?? storeState.activeSessionId;
+      const currentActiveSession = storeState.sessions.find((session2) => session2.sessionId === currentActiveSessionId) ?? null;
+      const currentMode = currentActiveSession?.mode ?? selectedMode;
+      if (!(selectedModel || currentActiveSession?.model || availableModels[0]?.id)) {
         return;
       }
-      const resolvedModel = selectedModel || activeSession?.model || availableModels[0]?.id || "local-image";
+      const resolvedModel = selectedModel || currentActiveSession?.model || availableModels[0]?.id || "local-image";
       const { localSessionId, sessionId, session } = resolveSendSession({
-        activeSessionId,
+        activeSessionId: currentActiveSessionId,
         selectedModel: resolvedModel,
-        selectedMode,
+        selectedMode: currentMode,
         nowIso,
         createSessionId: createDraftChatSessionId
       });
       if (session)
         createSession(session);
-      const messageAttachments = takeMessageAttachments();
+      const messageAttachments = includeComposerAttachments ? takeMessageAttachments() : void 0;
       const userMessage = createUserMessage({
         sessionId: localSessionId,
         content,
         attachments: messageAttachments,
-        localOnly: hasAttachments,
+        localOnly: false,
         createdAt: nowIso(),
         createMessageId: () => `user-${Date.now()}`
       });
       appendMessage(localSessionId, userMessage);
-      setAttachmentNotice(null);
-      setValue("");
-      if (!hasText)
-        return;
+      if (includeComposerAttachments) {
+        setAttachmentNotice(null);
+        setValue("");
+      }
       await runStream({
         localSessionId,
         sessionId,
         content,
+        attachments: messageAttachments,
         model: resolvedModel,
-        mode: selectedMode
+        mode: currentMode
       });
     },
     [
@@ -4334,16 +4481,47 @@ var useChatComposer = () => {
       isModelsError,
       hasModels,
       selectedModel,
-      activeSession,
       availableModels,
-      activeSessionId,
       selectedMode,
       createSession,
       takeMessageAttachments,
       appendMessage,
-      runStream
+      runStream,
+      store
     ]
   );
+  const stopSession = useCallback4(
+    async (sessionId) => {
+      const storeState = store.getState();
+      const isSessionStreaming = storeState.isStreamingBySession[sessionId] ?? false;
+      const isSessionStopping = storeState.isStoppingBySession[sessionId] ?? false;
+      if (!isSessionStreaming || isSessionStopping) {
+        return;
+      }
+      if (isDraftChatSessionId(sessionId)) {
+        finalizeStop(sessionId);
+        return;
+      }
+      requestStopStreaming(sessionId);
+      stopRequestBySessionRef.current.set(sessionId, {
+        timeoutId: window.setTimeout(() => {
+          finalizeStop(sessionId);
+        }, STOP_WAIT_TIMEOUT_MS),
+        finalized: false
+      });
+      try {
+        const result = await transport.terminateStream(sessionId);
+        if (!result.terminated) {
+          console.error("Failed to terminate chat session: server returned not terminated");
+        }
+        finalizeStop(sessionId);
+      } catch (err) {
+        console.error("Failed to terminate chat session", err);
+        finalizeStop(sessionId);
+      }
+    },
+    [finalizeStop, requestStopStreaming, store, transport]
+  );
   return {
     state: {
       value,
@@ -4383,43 +4561,27 @@ var useChatComposer = () => {
         setPreferredMode(mode);
         if (activeSessionId)
           setSessionMode(activeSessionId, mode);
-        if (lastRequestRef.current && activeSessionId && (lastRequestRef.current.localSessionId === activeSessionId || lastRequestRef.current.sessionId === activeSessionId)) {
-          lastRequestRef.current = { ...lastRequestRef.current, mode };
+        if (activeSessionId) {
+          const previousRequest = lastRequestBySessionRef.current.get(activeSessionId);
+          if (previousRequest) {
+            lastRequestBySessionRef.current.set(activeSessionId, { ...previousRequest, mode });
+          }
         }
       },
       reloadModels: () => void fetchModels(),
+      stopSession,
       stop: async () => {
         if (!streamingSessionId)
           return;
-        if (isStopping)
-          return;
-        if (isDraftChatSessionId(streamingSessionId)) {
-          finalizeStop(streamingSessionId);
-          return;
-        }
-        requestStopStreaming(streamingSessionId);
-        stopRequestRef.current = {
-          sessionId: streamingSessionId,
-          timeoutId: window.setTimeout(() => {
-            finalizeStop(streamingSessionId);
-          }, STOP_WAIT_TIMEOUT_MS),
-          finalized: false
-        };
-        try {
-          const result = await transport.terminateStream(streamingSessionId);
-          if (!result.terminated) {
-            console.error("Failed to terminate chat session: server returned not terminated");
-          }
-          finalizeStop(streamingSessionId);
-        } catch (err) {
-          console.error("Failed to terminate chat session", err);
-          finalizeStop(streamingSessionId);
-        }
+        await stopSession(streamingSessionId);
       },
-      retry: () => {
-        if (!lastRequestRef.current)
+      retry: (sessionId) => {
+        if (!sessionId)
           return;
-        void runStream(lastRequestRef.current);
+        const request = lastRequestBySessionRef.current.get(sessionId);
+        if (!request)
+          return;
+        void runStream(request);
       }
     }
   };
@@ -5066,7 +5228,7 @@ var ChatComposerView = ({
         }
       ) : null,
       /* @__PURE__ */ jsx15(
-        Input2,
+        Input,
         {
           ref: inputRef,
           "data-testid": "chat-composer-input",
@@ -5127,15 +5289,16 @@ var ChatComposerView = ({
   ] }) });
 };
 var ChatComposer = () => {
-  const { labels, sendRef, retryRef, enableImageAttachments } = useChatContext();
+  const { labels, sendRef, retryRef, stopRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
   useEffect7(() => {
     sendRef.current = send;
-    retryRef.current = async () => {
-      retry();
+    retryRef.current = async (sessionId) => {
+      retry(sessionId);
     };
-  }, [retry, retryRef, send, sendRef]);
+    stopRef.current = actions.stopSession;
+  }, [actions.stopSession, retry, retryRef, send, sendRef, stopRef]);
   const modeLabels = {
     ask: labels.modeLabelAsk,
     plan: labels.modeLabelPlan,
@@ -5210,7 +5373,7 @@ var InputArea = styled14.div`
   grid-area: input;
   position: relative;
 `;
-var Input2 = styled14.textarea`
+var Input = styled14.textarea`
   --textarea-line-height: ${CHAT_COMPOSER_LINE_HEIGHT_PX}px;
   --textarea-min-rows: ${CHAT_COMPOSER_MIN_ROWS};
   --textarea-max-rows: ${CHAT_COMPOSER_MAX_ROWS};
@@ -5281,9 +5444,9 @@ var ComposerExpandButton = styled14.button`
 var Footer = styled14.div`
   grid-area: footer;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: flex-end;
-  gap: 16px;
+  gap: 8px;
   padding: 0 14px 14px;
 `;
 var LeadingActions = styled14.div`
@@ -5298,6 +5461,9 @@ var TrailingActions = styled14.div`
   align-items: center;
   flex-wrap: wrap;
   min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  justify-self: end;
   justify-content: flex-end;
   gap: 8px;
 `;
@@ -5384,28 +5550,17 @@ var ChatConversationList = () => {
   const { labels } = useChatContext();
   const sessions = useChatStore((s) => s.sessions);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
-  const preferredMode = useChatStore((s) => s.preferredMode);
-  const createSession = useChatStore((s) => s.createSession);
+  const startNewChat = useChatStore((s) => s.startNewChat);
   const setActiveSession = useChatStore((s) => s.setActiveSession);
   const modeLabels = {
     ask: labels.modeLabelAsk,
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
-  const handleCreateSession = () => {
-    const session = createDraftChatSession({
-      // Model is intentionally deferred: ChatComposer resolves selectedModel at send time.
-      model: "",
-      mode: preferredMode,
-      nowIso: () => (/* @__PURE__ */ new Date()).toISOString(),
-      createSessionId: createDraftChatSessionId
-    });
-    createSession(session);
-  };
   return /* @__PURE__ */ jsxs12(Container3, { children: [
     /* @__PURE__ */ jsxs12(Toolbar, { children: [
       /* @__PURE__ */ jsx17(Title3, { children: "Sessions" }),
-      /* @__PURE__ */ jsx17(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
+      /* @__PURE__ */ jsx17(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: startNewChat, children: labels.newChat })
     ] }),
     /* @__PURE__ */ jsx17(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ jsx17(
       ChatSessionItem,
@@ -5456,8 +5611,70 @@ var List2 = styled16.div`
 `;
 
 // src/components/ai-chat/index.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
-var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ jsx18(
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+var QuickActions = ({ renderNewChatTrigger }) => {
+  const { labels, stopRef, store } = useChatContext();
+  const startNewChat = useChatStore((state) => state.startNewChat);
+  const activeSessionId = useChatStore((state) => state.activeSessionId);
+  const isActiveSessionStreaming = useChatStore(
+    (state) => state.activeSessionId ? state.isStreamingBySession[state.activeSessionId] ?? false : false
+  );
+  const isActiveSessionStopping = useChatStore(
+    (state) => state.activeSessionId ? state.isStoppingBySession[state.activeSessionId] ?? false : false
+  );
+  const createNewSession = () => {
+    startNewChat();
+  };
+  const stopActiveSession = async () => {
+    const currentState = store.getState();
+    const currentSessionId = currentState.activeSessionId;
+    const isCurrentSessionStreaming = currentSessionId ? currentState.isStreamingBySession[currentSessionId] ?? false : false;
+    if (!currentSessionId || !isCurrentSessionStreaming) {
+      return;
+    }
+    await stopRef.current(currentSessionId);
+  };
+  const handleStartNewChat = async () => {
+    const currentState = store.getState();
+    const currentSessionId = currentState.activeSessionId;
+    const isCurrentSessionStreaming = currentSessionId ? currentState.isStreamingBySession[currentSessionId] ?? false : false;
+    if (currentSessionId && isCurrentSessionStreaming) {
+      void stopRef.current(currentSessionId);
+    }
+    createNewSession();
+  };
+  const triggerProps = {
+    activeSessionId,
+    isStreaming: isActiveSessionStreaming,
+    isStopping: isActiveSessionStopping,
+    createNewSession,
+    stopActiveSession,
+    startNewChat: handleStartNewChat
+  };
+  if (renderNewChatTrigger) {
+    return /* @__PURE__ */ jsx18(QuickActionsRow, { children: /* @__PURE__ */ jsx18(NewChatTriggerRenderer, { renderNewChatTrigger, triggerProps }) });
+  }
+  return /* @__PURE__ */ jsx18(QuickActionsRow, { children: /* @__PURE__ */ jsx18(
+    QuickActionButton,
+    {
+      type: "button",
+      "data-testid": "chat-start-new-session",
+      onClick: () => void handleStartNewChat(),
+      disabled: isActiveSessionStopping,
+      children: labels.newChat
+    }
+  ) });
+};
+var NewChatTriggerRenderer = ({
+  renderNewChatTrigger,
+  triggerProps
+}) => /* @__PURE__ */ jsx18(Fragment5, { children: renderNewChatTrigger(triggerProps) });
+var AiChat = ({
+  showConversationList = false,
+  showNewChatButton = false,
+  renderNewChatTrigger,
+  ...providerProps
+}) => /* @__PURE__ */ jsx18(
   ConfigProvider,
   {
     theme: {
@@ -5495,6 +5712,7 @@ var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE_
     children: /* @__PURE__ */ jsx18(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
       showConversationList ? /* @__PURE__ */ jsx18(ChatConversationList, {}) : null,
       /* @__PURE__ */ jsxs13(Workspace, { children: [
+        showNewChatButton && !showConversationList ? /* @__PURE__ */ jsx18(QuickActions, { renderNewChatTrigger }) : null,
         /* @__PURE__ */ jsx18(ChatThread, {}),
         /* @__PURE__ */ jsx18(ChatComposer, {})
       ] })
@@ -5512,9 +5730,28 @@ var Workspace = styled17.section`
   flex: 1;
   display: flex;
   flex-direction: column;
+  gap: 12px;
   min-height: 0;
   overflow: hidden;
 `;
+var QuickActionsRow = styled17.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 12px 0;
+`;
+var QuickActionButton = styled17.button`
+  border: none;
+  border-radius: 12px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-primary, #fcfbf8);
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
 export {
   AiChat,
   AiChatProvider,