Add stop button for streaming responses

components/input/InputBar.tsx

@@ -6,14 +6,16 @@ import { InputSettings } from "./InputSettings";
 
 interface InputBarProps {
   onSubmit: (content: string) => void;
+  onStop: () => void;
   isLoading: boolean;
 }
 
 const MAX_CONTENT_LENGTH = 9000;
 
-export const InputBar: React.FC<InputBarProps> = ({ isLoading, onSubmit }) => {
+export const InputBar: React.FC<InputBarProps> = ({ isLoading, onSubmit, onStop }) => {
   const [input, setInput] = useState("");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isHovering, setIsHovering] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const handleInputChange = useCallback(
@@ -74,14 +76,22 @@ export const InputBar: React.FC<InputBarProps> = ({ isLoading, onSubmit }) => {
                 {isLoading ? (
                   <button
                     type="button"
-                    disabled
-                    className="inline-flex items-center justify-center h-8 w-8 rounded-md bg-black text-white cursor-not-allowed"
-                    aria-label="Loading"
+                    onClick={onStop}
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
+                    className="inline-flex items-center justify-center h-8 w-8 rounded-md bg-black text-white cursor-pointer"
+                    aria-label={isHovering ? "Stop" : "Loading"}
                   >
-                    <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
+                    {isHovering ? (
+                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
+                        <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Z"></path>
+                      </svg>
+                    ) : (
+                      <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                    )}
                   </button>
                 ) : (
                   <button
@@ -103,4 +113,4 @@ export const InputBar: React.FC<InputBarProps> = ({ isLoading, onSubmit }) => {
       </form>
     </div>
   );
-};
+};

hooks/chat/useChatCore.ts

@@ -159,6 +159,11 @@ export function useChat({ propsId, onTitleUpdate }: { propsId?: Id<"threads">, o
     }
   }, [threadId, user, vercelChatProps, threadData, addMessageToThread, sendMessageMutation, model])
 
+  const stopGenerating = useCallback(() => {
+    vercelChatProps.stop()
+    toast.success('Message generation stopped.')
+  }, [vercelChatProps])
+
   return {
     ...vercelChatProps,
     messages: debouncedMessages,
@@ -167,6 +172,7 @@ export function useChat({ propsId, onTitleUpdate }: { propsId?: Id<"threads">, o
     user,
     setCurrentThreadId,
     sendMessage,
+    stopGenerating,
     error,
   }
 }

panes/chat/Chat.tsx

@@ -15,6 +15,7 @@ export const Chat = ({ threadId, className }: ChatProps) => {
     messages,
     sendMessage,
     isLoading,
+    stopGenerating
   } = useChat({ propsId: threadId })
   const chatContainerRef = useChatScroll(messages);
 
@@ -25,9 +26,9 @@ export const Chat = ({ threadId, className }: ChatProps) => {
       </div>
       <div className="flex-shrink-0 w-full">
         <div className="sticky bottom-0 w-full">
-          <InputBar onSubmit={sendMessage} isLoading={isLoading} />
+          <InputBar onSubmit={sendMessage} isLoading={isLoading} onStop={stopGenerating} />
         </div>
       </div>
     </div>
   )
-}
+}