[app] Turn send button into stop button when goose is responding so u…

…ser can cancel if needed
block · Nov 28, 2024 · 32b4771 · 32b4771
1 parent 24e00d7
commit 32b4771
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 21 deletions.
diff --git a/ui/desktop/src/ChatWindow.tsx b/ui/desktop/src/ChatWindow.tsx
@@ -206,6 +206,8 @@ function ChatContent({
           handleInputChange={handleInputChange}
           input={input}
           disabled={isLoading}
+          isLoading={isLoading}
+          onStop={stop}
         />
       </Card>
     </div>

diff --git a/ui/desktop/src/components/Input.tsx b/ui/desktop/src/components/Input.tsx
@@ -1,15 +1,25 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { Button } from './ui/button';
 import Send from './ui/Send';
+import Stop from './ui/Stop';
 
 interface InputProps {
   handleSubmit: (e: React.FormEvent) => void;
   handleInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   input: string;
   disabled?: boolean;
+  isLoading?: boolean;
+  onStop?: () => void;
 }
 
-export default function Input({ handleSubmit, handleInputChange, input, disabled = false }: InputProps) {
+export default function Input({
+  handleSubmit,
+  handleInputChange,
+  input,
+  disabled = false,
+  isLoading = false,
+  onStop
+}: InputProps) {
   const [value, setValue] = useState(input);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -65,17 +75,29 @@ export default function Input({ handleSubmit, handleInputChange, input, disabled
           disabled ? 'cursor-not-allowed opacity-50' : ''
         }`}
       />
-      <Button
-        type="submit"
-        size="icon"
-        variant="ghost"
-        disabled={disabled}
-        className={`absolute right-2 top-1/2 -translate-y-1/2 text-indigo-600 hover:text-indigo-700 hover:bg-indigo-100 ${
-          disabled ? 'opacity-50 cursor-not-allowed' : ''
-        }`}
-      >
-        <Send size={24} />
-      </Button>
+      {isLoading ? (
+        <Button
+          type="button"
+          size="icon"
+          variant="ghost"
+          onClick={onStop}
+          className="absolute right-2 top-1/2 -translate-y-1/2 text-indigo-600 hover:text-indigo-700 hover:bg-indigo-100"
+        >
+          <Stop size={24} />
+        </Button>
+      ) : (
+        <Button
+          type="submit"
+          size="icon"
+          variant="ghost"
+          disabled={disabled}
+          className={`absolute right-2 top-1/2 -translate-y-1/2 text-indigo-600 hover:text-indigo-700 hover:bg-indigo-100 ${
+            disabled ? 'opacity-50 cursor-not-allowed' : ''
+          }`}
+        >
+          <Send size={24} />
+        </Button>
+      )}
     </form>
   );
-}
+}
diff --git a/ui/desktop/src/components/MoreMenu.tsx b/ui/desktop/src/components/MoreMenu.tsx
@@ -4,12 +4,11 @@ import VertDots from './ui/VertDots';
 
 interface MoreMenuProps {
   className?: string;
-  onStopGoose: () => void;
   onClearContext: () => void;
   onRestartGoose: () => void;
 }
 
-export default function MoreMenu({ onStopGoose, onClearContext, onRestartGoose }: MoreMenuProps) {
+export default function MoreMenu({ onClearContext, onRestartGoose }: MoreMenuProps) {
   const [open, setOpen] = useState(false);
 
   const handleAction = (action: () => void) => {
@@ -26,12 +25,6 @@ export default function MoreMenu({ onStopGoose, onClearContext, onRestartGoose }
       </PopoverTrigger>
       <PopoverContent className="w-48 rounded-md">
         <div className="flex flex-col bg-black text-white rounded-md">
-          <button
-            onClick={() => handleAction(onStopGoose)}
-            className="w-full text-left px-2 py-1.5 text-sm"
-          >
-            Stop current Goose
-          </button>
           <button
             onClick={() => handleAction(onClearContext)}
             className="w-full text-left px-2 py-1.5 text-sm"

diff --git a/ui/desktop/src/components/ui/Stop.tsx b/ui/desktop/src/components/ui/Stop.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+interface StopProps {
+  size?: number;
+}
+
+export default function Stop({ size = 24 }: StopProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="6"
+        y="6"
+        width="12"
+        height="12"
+        fill="currentColor"
+        rx="1"
+      />
+    </svg>
+  );
+}