Implement message editing

web/public/locales/en/views/chat.json

@@ -8,5 +8,6 @@
   "call": "Call",
   "result": "Result",
   "arguments": "Arguments:",
-  "response": "Response:"
+  "response": "Response:",
+  "send": "Send"
 }

web/src/components/chat/ChatMessage.tsx

@@ -1,9 +1,12 @@
+import { useState, useEffect, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import { useTranslation } from "react-i18next";
 import copy from "copy-to-clipboard";
 import { toast } from "sonner";
-import { FaCopy } from "react-icons/fa";
+import { FaCopy, FaPencilAlt } from "react-icons/fa";
+import { FaArrowUpLong } from "react-icons/fa6";
 import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
@@ -14,11 +17,35 @@ import { cn } from "@/lib/utils";
 type MessageBubbleProps = {
   role: "user" | "assistant";
   content: string;
+  messageIndex?: number;
+  onEditSubmit?: (messageIndex: number, newContent: string) => void;
 };
 
-export function MessageBubble({ role, content }: MessageBubbleProps) {
+export function MessageBubble({
+  role,
+  content,
+  messageIndex = 0,
+  onEditSubmit,
+}: MessageBubbleProps) {
   const { t } = useTranslation(["views/chat", "common"]);
   const isUser = role === "user";
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftContent, setDraftContent] = useState(content);
+  const editInputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setDraftContent(content);
+  }, [content]);
+
+  useEffect(() => {
+    if (isEditing) {
+      editInputRef.current?.focus();
+      editInputRef.current?.setSelectionRange(
+        editInputRef.current.value.length,
+        editInputRef.current.value.length,
+      );
+    }
+  }, [isEditing]);
 
   const handleCopy = () => {
     const text = content?.trim() || "";
@@ -28,6 +55,69 @@ export function MessageBubble({ role, content }: MessageBubbleProps) {
     }
   };
 
+  const handleEditClick = () => {
+    setDraftContent(content);
+    setIsEditing(true);
+  };
+
+  const handleEditSubmit = () => {
+    const trimmed = draftContent.trim();
+    if (!trimmed || onEditSubmit == null) return;
+    onEditSubmit(messageIndex, trimmed);
+    setIsEditing(false);
+  };
+
+  const handleEditCancel = () => {
+    setDraftContent(content);
+    setIsEditing(false);
+  };
+
+  const handleEditKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleEditSubmit();
+    }
+    if (e.key === "Escape") {
+      handleEditCancel();
+    }
+  };
+
+  if (isUser && isEditing) {
+    return (
+      <div className="flex w-full max-w-full flex-col gap-2 self-end">
+        <Textarea
+          ref={editInputRef}
+          value={draftContent}
+          onChange={(e) => setDraftContent(e.target.value)}
+          onKeyDown={handleEditKeyDown}
+          className="min-h-[80px] w-full resize-y rounded-lg bg-primary px-3 py-2 text-primary-foreground placeholder:text-primary-foreground/60"
+          placeholder={t("placeholder")}
+          rows={3}
+        />
+        <div className="flex items-center gap-2 self-end">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={handleEditCancel}
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+          <Button
+            variant="select"
+            size="icon"
+            className="size-9 rounded-full"
+            disabled={!draftContent.trim()}
+            onClick={handleEditSubmit}
+            aria-label={t("send")}
+          >
+            <FaArrowUpLong size="16" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(
@@ -43,21 +133,41 @@ export function MessageBubble({ role, content }: MessageBubbleProps) {
       >
         {isUser ? content : <ReactMarkdown>{content}</ReactMarkdown>}
       </div>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7 text-muted-foreground hover:text-foreground"
-            onClick={handleCopy}
-            disabled={!content?.trim()}
-            aria-label={t("button.copy", { ns: "common" })}
-          >
-            <FaCopy className="size-3" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{t("button.copy", { ns: "common" })}</TooltipContent>
-      </Tooltip>
+      <div className="flex items-center gap-0.5">
+        {isUser && onEditSubmit != null && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7 text-muted-foreground hover:text-foreground"
+                onClick={handleEditClick}
+                aria-label={t("button.edit", { ns: "common" })}
+              >
+                <FaPencilAlt className="size-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {t("button.edit", { ns: "common" })}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 text-muted-foreground hover:text-foreground"
+              onClick={handleCopy}
+              disabled={!content?.trim()}
+              aria-label={t("button.copy", { ns: "common" })}
+            >
+              <FaCopy className="size-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t("button.copy", { ns: "common" })}</TooltipContent>
+        </Tooltip>
+      </div>
     </div>
   );
 }

web/src/pages/Chat.tsx

@@ -6,7 +6,8 @@ import { useState, useCallback } from "react";
 import axios from "axios";
 import { MessageBubble } from "@/components/chat/ChatMessage";
 import { ToolCallBubble } from "@/components/chat/ToolCallBubble";
-import type { ChatMessage, ToolCall } from "@/types/chat";
+import type { ChatMessage } from "@/types/chat";
+import { streamChatCompletion } from "@/utils/chatUtil";
 
 export default function ChatPage() {
   const { t } = useTranslation(["views/chat"]);
@@ -15,151 +16,60 @@ export default function ChatPage() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const sendMessage = useCallback(async () => {
-    const text = input.trim();
-    if (!text || isLoading) return;
+  const submitConversation = useCallback(
+    async (messagesToSend: ChatMessage[]) => {
+      if (isLoading) return;
+      const last = messagesToSend[messagesToSend.length - 1];
+      if (!last || last.role !== "user" || !last.content.trim()) return;
 
-    const userMessage: ChatMessage = { role: "user", content: text };
-    setInput("");
-    setError(null);
-    setMessages((prev) => [...prev, userMessage]);
-    setIsLoading(true);
+      setError(null);
+      const assistantPlaceholder: ChatMessage = {
+        role: "assistant",
+        content: "",
+        toolCalls: undefined,
+      };
+      setMessages([...messagesToSend, assistantPlaceholder]);
+      setIsLoading(true);
 
-    const apiMessages = [...messages, userMessage].map((m) => ({
-      role: m.role,
-      content: m.content,
-    }));
+      const apiMessages = messagesToSend.map((m) => ({
+        role: m.role,
+        content: m.content,
+      }));
 
-    try {
       const baseURL = axios.defaults.baseURL ?? "";
       const url = `${baseURL}chat/completion`;
       const headers: Record<string, string> = {
         "Content-Type": "application/json",
         ...(axios.defaults.headers.common as Record<string, string>),
       };
-      const res = await fetch(url, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({ messages: apiMessages, stream: true }),
+
+      await streamChatCompletion(url, headers, apiMessages, {
+        updateMessages: (updater) => setMessages(updater),
+        onError: (message) => setError(message),
+        onDone: () => setIsLoading(false),
+        defaultErrorMessage: t("error"),
       });
+    },
+    [isLoading, t],
+  );
 
-      if (!res.ok) {
-        const errBody = await res.json().catch(() => ({}));
-        throw new Error(
-          (errBody as { error?: string }).error ?? res.statusText,
-        );
-      }
+  const sendMessage = useCallback(() => {
+    const text = input.trim();
+    if (!text || isLoading) return;
+    setInput("");
+    submitConversation([...messages, { role: "user", content: text }]);
+  }, [input, isLoading, messages, submitConversation]);
 
-      const reader = res.body?.getReader();
-      const decoder = new TextDecoder();
-      if (!reader) throw new Error("No response body");
-
-      const assistantMessage: ChatMessage = {
-        role: "assistant",
-        content: "",
-        toolCalls: undefined,
-      };
-      setMessages((prev) => [...prev, assistantMessage]);
-
-      let buffer = "";
-      let hadStreamError = false;
-      for (;;) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split("\n");
-        buffer = lines.pop() ?? "";
-        for (const line of lines) {
-          const trimmed = line.trim();
-          if (!trimmed) continue;
-          let data: { type: string; tool_calls?: ToolCall[]; delta?: string };
-          try {
-            data = JSON.parse(trimmed) as {
-              type: string;
-              tool_calls?: ToolCall[];
-              delta?: string;
-            };
-          } catch {
-            continue;
-          }
-          if (data.type === "error" && "error" in data) {
-            setError((data as { error?: string }).error ?? t("error"));
-            setMessages((prev) =>
-              prev.filter((m) => !(m.role === "assistant" && m.content === "")),
-            );
-            hadStreamError = true;
-            break;
-          }
-          if (data.type === "tool_calls" && data.tool_calls?.length) {
-            setMessages((prev) => {
-              const next = [...prev];
-              const last = next[next.length - 1];
-              if (last?.role === "assistant")
-                next[next.length - 1] = {
-                  ...last,
-                  toolCalls: data.tool_calls,
-                };
-              return next;
-            });
-          } else if (data.type === "content" && data.delta !== undefined) {
-            setMessages((prev) => {
-              const next = [...prev];
-              const last = next[next.length - 1];
-              if (last?.role === "assistant")
-                next[next.length - 1] = {
-                  ...last,
-                  content: last.content + data.delta,
-                };
-              return next;
-            });
-          }
-        }
-        if (hadStreamError) break;
-      }
-      if (hadStreamError) {
-        // already set error and cleaned up
-      } else if (buffer.trim()) {
-        try {
-          const data = JSON.parse(buffer.trim()) as {
-            type: string;
-            tool_calls?: ToolCall[];
-            delta?: string;
-          };
-          if (data.type === "content" && data.delta !== undefined) {
-            setMessages((prev) => {
-              const next = [...prev];
-              const last = next[next.length - 1];
-              if (last?.role === "assistant")
-                next[next.length - 1] = {
-                  ...last,
-                  content: last.content + data.delta,
-                };
-              return next;
-            });
-          }
-        } catch {
-          // ignore final malformed chunk
-        }
-      }
-
-      if (!hadStreamError) {
-        setMessages((prev) => {
-          const next = [...prev];
-          const last = next[next.length - 1];
-          if (last?.role === "assistant" && last.content === "")
-            next[next.length - 1] = { ...last, content: " " };
-          return next;
-        });
-      }
-    } catch {
-      setError(t("error"));
-      setMessages((prev) =>
-        prev.filter((m) => !(m.role === "assistant" && m.content === "")),
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [input, isLoading, messages, t]);
+  const handleEditSubmit = useCallback(
+    (messageIndex: number, newContent: string) => {
+      const newList: ChatMessage[] = [
+        ...messages.slice(0, messageIndex),
+        { role: "user", content: newContent },
+      ];
+      submitConversation(newList);
+    },
+    [messages, submitConversation],
+  );
 
   return (
     <div className="flex size-full justify-center p-2">
@@ -187,7 +97,14 @@ export default function ChatPage() {
                   ))}
                 </>
               )}
-              <MessageBubble role={msg.role} content={msg.content} />
+              <MessageBubble
+                role={msg.role}
+                content={msg.content}
+                messageIndex={i}
+                onEditSubmit={
+                  msg.role === "user" ? handleEditSubmit : undefined
+                }
+              />
             </div>
           ))}
           {isLoading && (

web/src/utils/chatUtil.ts

@@ -0,0 +1,163 @@
+import type { ChatMessage, ToolCall } from "@/types/chat";
+
+export type StreamChatCallbacks = {
+  /** Update the messages array (e.g. pass to setState). */
+  updateMessages: (updater: (prev: ChatMessage[]) => ChatMessage[]) => void;
+  /** Called when the stream sends an error or fetch fails. */
+  onError: (message: string) => void;
+  /** Called when the stream finishes (success or error). */
+  onDone: () => void;
+  /** Message used when fetch throws and no server error is available. */
+  defaultErrorMessage?: string;
+};
+
+type StreamChunk =
+  | { type: "error"; error: string }
+  | { type: "tool_calls"; tool_calls: ToolCall[] }
+  | { type: "content"; delta: string };
+
+/**
+ * POST to chat/completion with stream: true, parse NDJSON stream, and invoke
+ * callbacks so the caller can update UI (e.g. React state).
+ */
+export async function streamChatCompletion(
+  url: string,
+  headers: Record<string, string>,
+  apiMessages: { role: string; content: string }[],
+  callbacks: StreamChatCallbacks,
+): Promise<void> {
+  const {
+    updateMessages,
+    onError,
+    onDone,
+    defaultErrorMessage = "Something went wrong. Please try again.",
+  } = callbacks;
+
+  try {
+    const res = await fetch(url, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ messages: apiMessages, stream: true }),
+    });
+
+    if (!res.ok) {
+      const errBody = await res.json().catch(() => ({}));
+      const message = (errBody as { error?: string }).error ?? res.statusText;
+      onError(message);
+      onDone();
+      return;
+    }
+
+    const reader = res.body?.getReader();
+    const decoder = new TextDecoder();
+    if (!reader) {
+      onError("No response body");
+      onDone();
+      return;
+    }
+
+    let buffer = "";
+    let hadStreamError = false;
+
+    const applyChunk = (data: StreamChunk) => {
+      if (data.type === "error") {
+        onError(data.error);
+        updateMessages((prev) =>
+          prev.filter((m) => !(m.role === "assistant" && m.content === "")),
+        );
+        return "break";
+      }
+      if (data.type === "tool_calls" && data.tool_calls?.length) {
+        updateMessages((prev) => {
+          const next = [...prev];
+          const lastMsg = next[next.length - 1];
+          if (lastMsg?.role === "assistant")
+            next[next.length - 1] = {
+              ...lastMsg,
+              toolCalls: data.tool_calls,
+            };
+          return next;
+        });
+        return "continue";
+      }
+      if (data.type === "content" && data.delta !== undefined) {
+        updateMessages((prev) => {
+          const next = [...prev];
+          const lastMsg = next[next.length - 1];
+          if (lastMsg?.role === "assistant")
+            next[next.length - 1] = {
+              ...lastMsg,
+              content: lastMsg.content + data.delta,
+            };
+          return next;
+        });
+        return "continue";
+      }
+      return "continue";
+    };
+
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop() ?? "";
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+        try {
+          const data = JSON.parse(trimmed) as StreamChunk & { type: string };
+          const result = applyChunk(data as StreamChunk);
+          if (result === "break") {
+            hadStreamError = true;
+            break;
+          }
+        } catch {
+          // skip malformed JSON lines
+        }
+      }
+      if (hadStreamError) break;
+    }
+
+    // Flush remaining buffer
+    if (!hadStreamError && buffer.trim()) {
+      try {
+        const data = JSON.parse(buffer.trim()) as StreamChunk & {
+          type: string;
+          delta?: string;
+        };
+        if (data.type === "content" && data.delta !== undefined) {
+          updateMessages((prev) => {
+            const next = [...prev];
+            const lastMsg = next[next.length - 1];
+            if (lastMsg?.role === "assistant")
+              next[next.length - 1] = {
+                ...lastMsg,
+                content: lastMsg.content + data.delta!,
+              };
+            return next;
+          });
+        }
+      } catch {
+        // ignore final malformed chunk
+      }
+    }
+
+    if (!hadStreamError) {
+      updateMessages((prev) => {
+        const next = [...prev];
+        const lastMsg = next[next.length - 1];
+        if (lastMsg?.role === "assistant" && lastMsg.content === "")
+          next[next.length - 1] = { ...lastMsg, content: " " };
+        return next;
+      });
+    }
+  } catch {
+    onError(defaultErrorMessage);
+    updateMessages((prev) =>
+      prev.filter((m) => !(m.role === "assistant" && m.content === "")),
+    );
+  } finally {
+    onDone();
+  }
+}