feat: add stop button to interrupt agent response

- Implement 'stop' button in `ChatInput` that appears during streaming
- Disable textarea while streaming to prevent concurrent messages
- Map 'Enter' key to stop generation during streaming
- Connect `stopGeneration` from `useChat` hook to the UI

Co-authored-by: MrOrz <108608+MrOrz@users.noreply.github.com>

Author: google-labs-jules[bot]

src/components/ChatArea.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useRef } from 'react'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { UserMessage } from './UserMessage'
 import { AgentMessage } from './AgentMessage'
 import { FeedbackButtons } from './FeedbackButtons'
@@ -10,12 +9,14 @@ interface ChatAreaProps {
   messages: Array<ChatMessage>
   isStreaming: boolean
   onSendMessage: (text: string) => void
+  onStop?: () => void
 }
 
 export function ChatArea({
   messages,
   isStreaming,
   onSendMessage,
+  onStop,
 }: ChatAreaProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
 
@@ -34,47 +35,57 @@ export function ChatArea({
         className="flex-1 overflow-y-auto p-4 md:p-6 chat-container pb-0"
       >
         {messages.map((msg, index) => {
-          const prevMsg: ChatMessage | undefined = messages[index - 1];
-          const nextMsg: ChatMessage | undefined = messages[index + 1];
+          const prevMsg = messages[index - 1] as ChatMessage | undefined
+          const nextMsg = messages[index + 1] as ChatMessage | undefined
 
-          return <React.Fragment key={msg.id}>
-            {msg.author === 'user'
-              ? <UserMessage message={msg} />
-              : <AgentMessage
-                message={msg}
-                showAvatar={msg.author !== prevMsg?.author}
-              />}
-            {
-              /* Show thumbs up/down when all below are true:
+          return (
+            <React.Fragment key={msg.id}>
+              {msg.author === 'user' ? (
+                <UserMessage message={msg} />
+              ) : (
+                <AgentMessage
+                  message={msg}
+                  showAvatar={msg.author !== prevMsg?.author}
+                />
+              )}
+              {
+                /* Show thumbs up/down when all below are true:
                 - Message has trace id
                 - Message is not streaming
                 - Next message has different trace id or doesn't exist
               */
-              msg.langfuseTraceId &&
-              !msg.isStreaming &&
-              (!nextMsg?.langfuseTraceId || msg.langfuseTraceId !== nextMsg.langfuseTraceId) &&
-              <FeedbackButtons traceId={msg.langfuseTraceId} />
-            }
-          </React.Fragment>
+                msg.langfuseTraceId &&
+                  !msg.isStreaming &&
+                  (!nextMsg?.langfuseTraceId ||
+                    msg.langfuseTraceId !== nextMsg.langfuseTraceId) && (
+                    <FeedbackButtons traceId={msg.langfuseTraceId} />
+                  )
+              }
+            </React.Fragment>
+          )
         })}
 
-        {
-          isStreaming && <p className="flex items-center gap-2 text-gray-500 mt-2">
+        {isStreaming && (
+          <p className="flex items-center gap-2 text-gray-500 mt-2">
             正在思考中
             <span className="typing-indicator ml-1">
               <span />
               <span />
               <span />
             </span>
           </p>
-        }
+        )}
 
         {/* Extra space at the bottom */}
         <div className="h-4" />
       </div>
 
       {/* Input area */}
-      <ChatInput onSend={onSendMessage} disabled={isStreaming} />
+      <ChatInput
+        onSend={onSendMessage}
+        onStop={onStop}
+        isStreaming={isStreaming}
+      />
     </>
   )
 }

src/components/ChatInput.tsx

@@ -2,10 +2,17 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 
 interface ChatInputProps {
   onSend: (text: string) => void
+  onStop?: () => void
+  isStreaming?: boolean
   disabled?: boolean
 }
 
-export function ChatInput({ onSend, disabled }: ChatInputProps) {
+export function ChatInput({
+  onSend,
+  onStop,
+  isStreaming,
+  disabled,
+}: ChatInputProps) {
   const [value, setValue] = useState('')
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
@@ -33,19 +40,25 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
           onKeyDown={(e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault()
-              handleSubmit()
+              if (isStreaming) {
+                onStop?.()
+              } else {
+                handleSubmit()
+              }
             }
           }}
-          disabled={disabled}
+          disabled={disabled || isStreaming}
           className="w-full bg-transparent border-none focus:ring-0 p-3 pr-12 min-h-[50px] max-h-32 resize-none text-sm rounded-xl"
           placeholder="詢問後續問題或要求修改..."
         />
         <button
-          onClick={handleSubmit}
-          disabled={!value.trim() || disabled}
+          onClick={isStreaming ? onStop : handleSubmit}
+          disabled={(!isStreaming && !value.trim()) || disabled}
           className="absolute right-2 bottom-2 p-1.5 bg-primary text-black rounded-lg hover:bg-primary-hover transition-colors flex items-center justify-center disabled:opacity-40 disabled:cursor-not-allowed"
         >
-          <span className="material-symbols-outlined text-sm">send</span>
+          <span className="material-symbols-outlined text-sm">
+            {isStreaming ? 'stop' : 'send'}
+          </span>
         </button>
       </div>
       <div className="text-center mt-2">

src/routes/_app/session.$sessionId.tsx

@@ -8,7 +8,9 @@ export const Route = createFileRoute('/_app/session/$sessionId')({
 
 function SessionPage() {
   const { sessionId } = useParams({ from: '/_app/session/$sessionId' })
-  const { messages, isStreaming, error, sendMessage } = useChat({ sessionId })
+  const { messages, isStreaming, error, sendMessage, stopGeneration } = useChat(
+    { sessionId },
+  )
 
   return (
     <>
@@ -28,6 +30,7 @@ function SessionPage() {
         messages={messages}
         isStreaming={isStreaming}
         onSendMessage={sendMessage}
+        onStop={stopGeneration}
       />
     </>
   )