Add 9 lines in InputBar.tsx

OpenAgentsInc · Aug 27, 2024 · 1aeafd8 · 1aeafd8
1 parent 0c6040b
commit 1aeafd8
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/components/input/InputBar.tsx b/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>
   );
-};
+};