feat: add an interrupt button to chat (#34)

hugodutka · web-flow · commit 35dcff013026 · 2025-07-22T14:56:38.000+02:00
diff --git a/chat/src/components/chat-provider.tsx b/chat/src/components/chat-provider.tsx
@@ -40,7 +40,7 @@ function isDraftMessage(message: Message | DraftMessage): boolean {
 
 type MessageType = "user" | "raw";
 
-type ServerStatus = "online" | "offline" | "unknown";
+export type ServerStatus = "stable" | "running" | "offline" | "unknown";
 
 interface ChatContextValue {
   messages: (Message | DraftMessage)[];
@@ -121,7 +121,13 @@ export function ChatProvider({ children }: PropsWithChildren) {
       // Handle status changes
       eventSource.addEventListener("status_change", (event) => {
         const data: StatusChangeEvent = JSON.parse(event.data);
-        setServerStatus(data.status as ServerStatus);
+        if (data.status === "stable") {
+          setServerStatus("stable");
+        } else if (data.status === "running") {
+          setServerStatus("running");
+        } else {
+          setServerStatus("unknown");
+        }
       });
 
       // Handle connection open (server is online)
diff --git a/chat/src/components/chat.tsx b/chat/src/components/chat.tsx
@@ -5,12 +5,16 @@ import MessageInput from "./message-input";
 import MessageList from "./message-list";
 
 export function Chat() {
-  const { messages, loading, sendMessage } = useChat();
+  const { messages, loading, sendMessage, serverStatus } = useChat();
 
   return (
     <>
       <MessageList messages={messages} />
-      <MessageInput onSendMessage={sendMessage} disabled={loading} />
+      <MessageInput
+        onSendMessage={sendMessage}
+        disabled={loading}
+        serverStatus={serverStatus}
+      />
     </>
   );
 }
diff --git a/chat/src/components/message-input.tsx b/chat/src/components/message-input.tsx
@@ -10,12 +10,15 @@ import {
   CornerDownLeftIcon,
   DeleteIcon,
   SendIcon,
+  Square,
 } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import type { ServerStatus } from "./chat-provider";
 
 interface MessageInputProps {
   onSendMessage: (message: string, type: "user" | "raw") => void;
   disabled?: boolean;
+  serverStatus: ServerStatus;
 }
 
 interface SentChar {
@@ -24,9 +27,27 @@ interface SentChar {
   timestamp: number;
 }
 
+// List of keys to send as raw input when in control mode
+
+const specialKeys: Record<string, string> = {
+  ArrowUp: "\x1b[A", // Escape sequence for up arrow
+  ArrowDown: "\x1b[B", // Escape sequence for down arrow
+  ArrowRight: "\x1b[C", // Escape sequence for right arrow
+  ArrowLeft: "\x1b[D", // Escape sequence for left arrow
+  Escape: "\x1b", // Escape key
+  Tab: "\t", // Tab key
+  Delete: "\x1b[3~", // Delete key
+  Home: "\x1b[H", // Home key
+  End: "\x1b[F", // End key
+  PageUp: "\x1b[5~", // Page Up
+  PageDown: "\x1b[6~", // Page Down
+  Backspace: "\b", // Backspace key
+};
+
 export default function MessageInput({
   onSendMessage,
   disabled = false,
+  serverStatus,
 }: MessageInputProps) {
   const [message, setMessage] = useState("");
   const [inputMode, setInputMode] = useState("text");
@@ -69,22 +90,6 @@ export default function MessageInput({
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     // In control mode, send special keys as raw messages
     if (inputMode === "control" && !disabled) {
-      // List of keys to send as raw input when in control mode
-      const specialKeys: Record<string, string> = {
-        ArrowUp: "\x1b[A", // Escape sequence for up arrow
-        ArrowDown: "\x1b[B", // Escape sequence for down arrow
-        ArrowRight: "\x1b[C", // Escape sequence for right arrow
-        ArrowLeft: "\x1b[D", // Escape sequence for left arrow
-        Escape: "\x1b", // Escape key
-        Tab: "\t", // Tab key
-        Delete: "\x1b[3~", // Delete key
-        Home: "\x1b[H", // Home key
-        End: "\x1b[F", // End key
-        PageUp: "\x1b[5~", // Page Up
-        PageDown: "\x1b[6~", // Page Down
-        Backspace: "\b", // Backspace key
-      };
-
       // Check if the pressed key is in our special keys map
       if (specialKeys[e.key]) {
         e.preventDefault();
@@ -168,8 +173,13 @@ export default function MessageInput({
                   value={message}
                   onChange={(e) => setMessage(e.target.value)}
                   onKeyDown={handleKeyDown}
-                  placeholder={"Type a message..."}
+                  placeholder={
+                    serverStatus === "running"
+                      ? "Running..."
+                      : "Type a message..."
+                  }
                   className="resize-none w-full text-sm outline-none p-4 h-20"
+                  disabled={serverStatus !== "stable"}
                 />
               )}
             </div>
@@ -194,7 +204,7 @@ export default function MessageInput({
                 </TabsTrigger>
               </TabsList>
 
-              {inputMode === "text" && (
+              {inputMode === "text" && serverStatus !== "running" && (
                 <Button
                   type="submit"
                   disabled={disabled || !message.trim()}
@@ -206,6 +216,20 @@ export default function MessageInput({
                 </Button>
               )}
 
+              {inputMode === "text" && serverStatus === "running" && (
+                <Button
+                  size="icon"
+                  className="rounded-full"
+                  disabled={disabled}
+                  onClick={() => {
+                    onSendMessage(specialKeys.Escape, "raw");
+                  }}
+                >
+                  <Square />
+                  <span className="sr-only">Stop</span>
+                </Button>
+              )}
+
               {inputMode === "control" && !disabled && (
                 <div className="flex items-center gap-1">
                   {sentChars.map((char) => (
diff --git a/chat/src/stories/message-input.stories.tsx b/chat/src/stories/message-input.stories.tsx
@@ -14,8 +14,31 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+const defaultArgs = {
+  onSendMessage: () => {},
+};
+
+export const ServerStatusStable: Story = {
+  args: {
+    ...defaultArgs,
+    serverStatus: "stable",
+  },
+};
+export const ServerStatusRunning: Story = {
+  args: {
+    ...defaultArgs,
+    serverStatus: "running",
+  },
+};
+export const ServerStatusOffline: Story = {
+  args: {
+    ...defaultArgs,
+    serverStatus: "offline",
+  },
+};
+export const ServerStatusUnknown: Story = {
   args: {
-    onSendMessage: () => {},
+    ...defaultArgs,
+    serverStatus: "unknown",
   },
 };
