thepopebot 1.2.33 → 1.2.35

package/lib/ai/index.js

@@ -102,14 +102,16 @@ async function chat(threadId, message, attachments = [], options = {}) {
  * @param {string} threadId - Conversation thread ID
  * @param {string} message - User's message text
  * @param {Array} [attachments=[]] - Image/PDF attachments: { category, mimeType, dataUrl }
- * @param {object} [options] - { userId, chatTitle } for DB persistence
+ * @param {object} [options] - { userId, chatTitle, skipUserPersist } for DB persistence
  * @returns {AsyncIterableIterator<string>} Stream of text chunks
  */
 async function* chatStream(threadId, message, attachments = [], options = {}) {
   const agent = await getAgent();
 
-  // Save user message to DB
-  persistMessage(threadId, 'user', message || '[attachment]', options);
+  // Save user message to DB (skip on regeneration — message already exists)
+  if (!options.skipUserPersist) {
+    persistMessage(threadId, 'user', message || '[attachment]', options);
+  }
 
   // Build content blocks: text + any image/PDF attachments as vision
   const content = [];

package/lib/chat/api.js

@@ -12,7 +12,7 @@ export async function POST(request) {
   }
 
   const body = await request.json();
-  const { messages, chatId: rawChatId } = body;
+  const { messages, chatId: rawChatId, trigger } = body;
 
   if (!messages?.length) {
     return Response.json({ error: 'No messages' }, { status: 400 });
@@ -72,8 +72,10 @@ export async function POST(request) {
     },
     execute: async ({ writer }) => {
       // chatStream handles: save user msg, invoke agent, save assistant msg, auto-title
+      const skipUserPersist = trigger === 'regenerate-message';
       const chunks = chatStream(threadId, userText, attachments, {
         userId: session.user.id,
+        skipUserPersist,
       });
 
       // Signal start of assistant message

package/lib/chat/components/app-sidebar.js

@@ -34,7 +34,7 @@ function AppSidebar({ user }) {
       /* @__PURE__ */ jsxs("div", { className: collapsed ? "flex justify-center" : "flex items-center justify-between", children: [
         !collapsed && /* @__PURE__ */ jsxs("span", { className: "px-2 font-semibold text-lg", children: [
           "The Pope Bot ",
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-normal text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-normal text-muted-foreground", children: [
             "v",
             pkg.version
           ] })

package/lib/chat/components/app-sidebar.jsx

@@ -39,7 +39,7 @@ export function AppSidebar({ user }) {
         {/* Top row: brand name + toggle icon (open) or just toggle icon (collapsed) */}
         <div className={collapsed ? 'flex justify-center' : 'flex items-center justify-between'}>
           {!collapsed && (
-            <span className="px-2 font-semibold text-lg">The Pope Bot <span className="text-xs font-normal text-muted-foreground">v{pkg.version}</span></span>
+            <span className="px-2 font-semibold text-lg">The Pope Bot <span className="text-[11px] font-normal text-muted-foreground">v{pkg.version}</span></span>
           )}
           <Tooltip>
             <TooltipTrigger asChild>

package/lib/chat/components/chat-input.js

@@ -118,7 +118,7 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles })
     }
   };
   const canSend = input.trim() || files.length > 0;
-  return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-2 pb-4 md:px-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "relative", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 md:px-6", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "relative", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(

package/lib/chat/components/chat-input.jsx

@@ -115,7 +115,7 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
   const canSend = input.trim() || files.length > 0;
 
   return (
-    <div className="mx-auto w-full max-w-4xl px-2 pb-4 md:px-4">
+    <div className="mx-auto w-full max-w-4xl px-4 pb-4 md:px-6">
       <form onSubmit={handleSubmit} className="relative">
         <div
           className={cn(

package/lib/chat/components/chat-page.js

@@ -16,7 +16,9 @@ function ChatPage({ session, needsSetup, chatId }) {
     } else {
       window.history.pushState({}, "", "/");
     }
-    setActiveChatId(id);
+    setResolvedChatId(null);
+    setInitialMessages([]);
+    setActiveChatId(id || null);
   }, []);
   useEffect(() => {
     const onPopState = () => {

package/lib/chat/components/chat-page.jsx

@@ -26,7 +26,11 @@ export function ChatPage({ session, needsSetup, chatId }) {
     } else {
       window.history.pushState({}, '', '/');
     }
-    setActiveChatId(id);
+    // Clear current chat immediately — unmounts Chat via the
+    // {resolvedChatId && ...} guard before the effect runs
+    setResolvedChatId(null);
+    setInitialMessages([]);
+    setActiveChatId(id || null);
   }, []);
 
   // Browser back/forward

package/lib/chat/components/chat.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { Messages } from "./messages.js";
 import { ChatInput } from "./chat-input.js";
 import { ChatHeader } from "./chat-header.js";
@@ -23,7 +23,9 @@ function Chat({ chatId, initialMessages = [] }) {
     status,
     stop,
     error,
-    sendMessage
+    sendMessage,
+    regenerate,
+    setMessages
   } = useChat({
     id: chatId,
     messages: initialMessages,
@@ -31,13 +33,13 @@ function Chat({ chatId, initialMessages = [] }) {
     onError: (err) => console.error("Chat error:", err)
   });
   useEffect(() => {
-    if (!hasNavigated.current && messages.length >= 2 && !window.location.pathname.includes(chatId)) {
+    if (!hasNavigated.current && messages.length >= 1 && status !== "ready" && window.location.pathname !== `/chat/${chatId}`) {
       hasNavigated.current = true;
       window.history.replaceState({}, "", `/chat/${chatId}`);
       window.dispatchEvent(new Event("chatsupdated"));
       setTimeout(() => window.dispatchEvent(new Event("chatsupdated")), 5e3);
     }
-  }, [messages.length, chatId]);
+  }, [messages.length, status, chatId]);
   const handleSend = () => {
     if (!input.trim() && files.length === 0) return;
     const text = input;
@@ -56,9 +58,31 @@ function Chat({ chatId, initialMessages = [] }) {
       sendMessage({ text: text || void 0, files: fileParts });
     }
   };
+  const handleRetry = useCallback((message) => {
+    if (message.role === "assistant") {
+      regenerate({ messageId: message.id });
+    } else {
+      const idx = messages.findIndex((m) => m.id === message.id);
+      const nextAssistant = messages.slice(idx + 1).find((m) => m.role === "assistant");
+      if (nextAssistant) {
+        regenerate({ messageId: nextAssistant.id });
+      } else {
+        const text = message.parts?.filter((p) => p.type === "text").map((p) => p.text).join("\n") || message.content || "";
+        if (text.trim()) {
+          sendMessage({ text });
+        }
+      }
+    }
+  }, [messages, regenerate, sendMessage]);
+  const handleEdit = useCallback((message, newText) => {
+    const idx = messages.findIndex((m) => m.id === message.id);
+    if (idx === -1) return;
+    setMessages(messages.slice(0, idx));
+    sendMessage({ text: newText });
+  }, [messages, setMessages, sendMessage]);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-svh flex-col", children: [
     /* @__PURE__ */ jsx(ChatHeader, { chatId }),
-    messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center px-2 md:px-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl", children: [
+    messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center px-4 md:px-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl", children: [
       /* @__PURE__ */ jsx(Greeting, {}),
       error && /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error.message || "Something went wrong. Please try again." }),
       /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
@@ -74,7 +98,7 @@ function Chat({ chatId, initialMessages = [] }) {
         }
       ) })
     ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Messages, { messages, status }),
+      /* @__PURE__ */ jsx(Messages, { messages, status, onRetry: handleRetry, onEdit: handleEdit }),
       error && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-2 md:px-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error.message || "Something went wrong. Please try again." }) }),
       /* @__PURE__ */ jsx(
         ChatInput,

package/lib/chat/components/chat.jsx

@@ -2,7 +2,7 @@
 
 import { useChat } from '@ai-sdk/react';
 import { DefaultChatTransport } from 'ai';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { Messages } from './messages.js';
 import { ChatInput } from './chat-input.js';
 import { ChatHeader } from './chat-header.js';
@@ -28,6 +28,8 @@ export function Chat({ chatId, initialMessages = [] }) {
     stop,
     error,
     sendMessage,
+    regenerate,
+    setMessages,
   } = useChat({
     id: chatId,
     messages: initialMessages,
@@ -35,16 +37,16 @@ export function Chat({ chatId, initialMessages = [] }) {
     onError: (err) => console.error('Chat error:', err),
   });
 
-  // After first exchange, update URL and notify sidebar
+  // After first message sent, update URL and notify sidebar
   useEffect(() => {
-    if (!hasNavigated.current && messages.length >= 2 && !window.location.pathname.includes(chatId)) {
+    if (!hasNavigated.current && messages.length >= 1 && status !== 'ready' && window.location.pathname !== `/chat/${chatId}`) {
       hasNavigated.current = true;
       window.history.replaceState({}, '', `/chat/${chatId}`);
       window.dispatchEvent(new Event('chatsupdated'));
       // Dispatch again after delay to pick up async title update
       setTimeout(() => window.dispatchEvent(new Event('chatsupdated')), 5000);
     }
-  }, [messages.length, chatId]);
+  }, [messages.length, status, chatId]);
 
   const handleSend = () => {
     if (!input.trim() && files.length === 0) return;
@@ -67,11 +69,44 @@ export function Chat({ chatId, initialMessages = [] }) {
     }
   };
 
+  const handleRetry = useCallback((message) => {
+    if (message.role === 'assistant') {
+      regenerate({ messageId: message.id });
+    } else {
+      // User message — find the next assistant message and regenerate it
+      const idx = messages.findIndex((m) => m.id === message.id);
+      const nextAssistant = messages.slice(idx + 1).find((m) => m.role === 'assistant');
+      if (nextAssistant) {
+        regenerate({ messageId: nextAssistant.id });
+      } else {
+        // No assistant response yet — extract text and resend
+        const text =
+          message.parts
+            ?.filter((p) => p.type === 'text')
+            .map((p) => p.text)
+            .join('\n') ||
+          message.content ||
+          '';
+        if (text.trim()) {
+          sendMessage({ text });
+        }
+      }
+    }
+  }, [messages, regenerate, sendMessage]);
+
+  const handleEdit = useCallback((message, newText) => {
+    const idx = messages.findIndex((m) => m.id === message.id);
+    if (idx === -1) return;
+    // Truncate conversation to before this message, then send edited text
+    setMessages(messages.slice(0, idx));
+    sendMessage({ text: newText });
+  }, [messages, setMessages, sendMessage]);
+
   return (
     <div className="flex h-svh flex-col">
       <ChatHeader chatId={chatId} />
       {messages.length === 0 ? (
-        <div className="flex flex-1 flex-col items-center justify-center px-2 md:px-4">
+        <div className="flex flex-1 flex-col items-center justify-center px-4 md:px-6">
           <div className="w-full max-w-4xl">
             <Greeting />
             {error && (
@@ -94,7 +129,7 @@ export function Chat({ chatId, initialMessages = [] }) {
         </div>
       ) : (
         <>
-          <Messages messages={messages} status={status} />
+          <Messages messages={messages} status={status} onRetry={handleRetry} onEdit={handleEdit} />
           {error && (
             <div className="mx-auto w-full max-w-4xl px-2 md:px-4">
               <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">

package/lib/chat/components/greeting.js

@@ -1,10 +1,7 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function Greeting() {
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "font-semibold text-xl md:text-2xl text-foreground", children: "Hello there!" }),
-    /* @__PURE__ */ jsx("div", { className: "text-xl text-muted-foreground md:text-2xl", children: "How can I help you today?" })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "w-full text-center", children: /* @__PURE__ */ jsx("div", { className: "font-semibold text-2xl md:text-3xl text-foreground", children: "Hello! How can I help?" }) });
 }
 export {
   Greeting

package/lib/chat/components/greeting.jsx

@@ -2,12 +2,9 @@
 
 export function Greeting() {
   return (
-    <div className="w-full">
-      <div className="font-semibold text-xl md:text-2xl text-foreground">
-        Hello there!
-      </div>
-      <div className="text-xl text-muted-foreground md:text-2xl">
-        How can I help you today?
+    <div className="w-full text-center">
+      <div className="font-semibold text-2xl md:text-3xl text-foreground">
+        Hello! How can I help?
       </div>
     </div>
   );

package/lib/chat/components/message.js

@@ -1,59 +1,179 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
 import { Streamdown } from "streamdown";
 import { cn } from "../utils.js";
-import { SpinnerIcon, FileTextIcon } from "./icons.js";
-function PreviewMessage({ message, isLoading }) {
+import { SpinnerIcon, FileTextIcon, CopyIcon, CheckIcon, RefreshIcon, SquarePenIcon } from "./icons.js";
+function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
   const isUser = message.role === "user";
+  const [copied, setCopied] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editText, setEditText] = useState("");
+  const textareaRef = useRef(null);
   const text = message.parts?.filter((p) => p.type === "text").map((p) => p.text).join("\n") || message.content || "";
   const fileParts = message.parts?.filter((p) => p.type === "file") || [];
   const imageParts = fileParts.filter((p) => p.mediaType?.startsWith("image/"));
   const otherFileParts = fileParts.filter((p) => !p.mediaType?.startsWith("image/"));
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const handleEditStart = () => {
+    setEditText(text);
+    setEditing(true);
+  };
+  const handleEditCancel = () => {
+    setEditing(false);
+    setEditText("");
+  };
+  const handleEditSubmit = () => {
+    const trimmed = editText.trim();
+    if (trimmed && trimmed !== text) {
+      onEdit?.(message, trimmed);
+    }
+    setEditing(false);
+    setEditText("");
+  };
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      const ta = textareaRef.current;
+      ta.focus();
+      ta.style.height = "auto";
+      ta.style.height = `${ta.scrollHeight}px`;
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+    }
+  }, [editing]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "flex gap-4 w-full",
+        "group flex gap-4 w-full",
         isUser ? "justify-end" : "justify-start"
       ),
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "max-w-[85%] rounded-xl px-4 py-3 text-sm leading-relaxed",
-            isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground"
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col max-w-[80%]", children: editing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            value: editText,
+            onChange: (e) => {
+              setEditText(e.target.value);
+              e.target.style.height = "auto";
+              e.target.style.height = `${e.target.scrollHeight}px`;
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleEditSubmit();
+              }
+              if (e.key === "Escape") {
+                handleEditCancel();
+              }
+            },
+            className: "w-full resize-none rounded-xl border border-border bg-muted px-4 py-3 text-sm leading-relaxed text-foreground focus:outline-none focus:ring-1 focus:ring-primary",
+            rows: 1
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleEditCancel,
+              className: "rounded-md px-3 py-1 text-xs text-muted-foreground hover:text-foreground",
+              children: "Cancel"
+            }
           ),
-          children: [
-            imageParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: imageParts.map((part, i) => /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: part.url,
-                alt: "attachment",
-                className: "max-h-64 max-w-full rounded-lg object-contain"
-              },
-              i
-            )) }),
-            otherFileParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: otherFileParts.map((part, i) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs",
-                  isUser ? "bg-primary-foreground/20" : "bg-foreground/10"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(FileTextIcon, { size: 12 }),
-                  /* @__PURE__ */ jsx("span", { className: "max-w-[150px] truncate", children: part.name || part.mediaType || "file" })
-                ]
-              },
-              i
-            )) }),
-            text ? isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: text }) : /* @__PURE__ */ jsx(Streamdown, { mode: isLoading ? "streaming" : "static", children: text }) : isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-              /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
-              /* @__PURE__ */ jsx("span", { children: "Working..." })
-            ] }) : null
-          ]
-        }
-      )
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleEditSubmit,
+              className: "rounded-md bg-primary px-3 py-1 text-xs text-primary-foreground hover:opacity-80",
+              children: "Send"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "rounded-xl px-4 py-3 text-sm leading-relaxed",
+              isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground"
+            ),
+            children: [
+              imageParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: imageParts.map((part, i) => /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: part.url,
+                  alt: "attachment",
+                  className: "max-h-64 max-w-full rounded-lg object-contain"
+                },
+                i
+              )) }),
+              otherFileParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-wrap gap-2", children: otherFileParts.map((part, i) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs",
+                    isUser ? "bg-primary-foreground/20" : "bg-foreground/10"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(FileTextIcon, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { className: "max-w-[150px] truncate", children: part.name || part.mediaType || "file" })
+                  ]
+                },
+                i
+              )) }),
+              text ? isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: text }) : /* @__PURE__ */ jsx(Streamdown, { mode: isLoading ? "streaming" : "static", children: text }) : isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { children: "Working..." })
+              ] }) : null
+            ]
+          }
+        ),
+        !isLoading && text && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex gap-1 mt-1 opacity-0 transition-opacity group-hover:opacity-100",
+              isUser ? "justify-end" : "justify-start"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleCopy,
+                  className: "rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted",
+                  "aria-label": "Copy message",
+                  children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 })
+                }
+              ),
+              onRetry && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onRetry(message),
+                  className: "rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted",
+                  "aria-label": "Retry",
+                  children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+                }
+              ),
+              isUser && onEdit && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleEditStart,
+                  className: "rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted",
+                  "aria-label": "Edit message",
+                  children: /* @__PURE__ */ jsx(SquarePenIcon, { size: 14 })
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
     }
   );
 }

package/lib/chat/components/message.jsx

@@ -1,11 +1,16 @@
 'use client';
 
+import { useState, useRef, useEffect } from 'react';
 import { Streamdown } from 'streamdown';
 import { cn } from '../utils.js';
-import { SpinnerIcon, FileTextIcon } from './icons.js';
+import { SpinnerIcon, FileTextIcon, CopyIcon, CheckIcon, RefreshIcon, SquarePenIcon } from './icons.js';
 
-export function PreviewMessage({ message, isLoading }) {
+export function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
   const isUser = message.role === 'user';
+  const [copied, setCopied] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editText, setEditText] = useState('');
+  const textareaRef = useRef(null);
 
   // Extract text from parts (AI SDK v5+) or fall back to content
   const text =
@@ -21,65 +26,183 @@ export function PreviewMessage({ message, isLoading }) {
   const imageParts = fileParts.filter((p) => p.mediaType?.startsWith('image/'));
   const otherFileParts = fileParts.filter((p) => !p.mediaType?.startsWith('image/'));
 
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  };
+
+  const handleEditStart = () => {
+    setEditText(text);
+    setEditing(true);
+  };
+
+  const handleEditCancel = () => {
+    setEditing(false);
+    setEditText('');
+  };
+
+  const handleEditSubmit = () => {
+    const trimmed = editText.trim();
+    if (trimmed && trimmed !== text) {
+      onEdit?.(message, trimmed);
+    }
+    setEditing(false);
+    setEditText('');
+  };
+
+  // Auto-resize and focus textarea when entering edit mode
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      const ta = textareaRef.current;
+      ta.focus();
+      ta.style.height = 'auto';
+      ta.style.height = `${ta.scrollHeight}px`;
+      // Move cursor to end
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+    }
+  }, [editing]);
+
   return (
     <div
       className={cn(
-        'flex gap-4 w-full',
+        'group flex gap-4 w-full',
         isUser ? 'justify-end' : 'justify-start'
       )}
     >
-      <div
-        className={cn(
-          'max-w-[85%] rounded-xl px-4 py-3 text-sm leading-relaxed',
-          isUser
-            ? 'bg-primary text-primary-foreground'
-            : 'bg-muted text-foreground'
-        )}
-      >
-        {imageParts.length > 0 && (
-          <div className="mb-2 flex flex-wrap gap-2">
-            {imageParts.map((part, i) => (
-              <img
-                key={i}
-                src={part.url}
-                alt="attachment"
-                className="max-h-64 max-w-full rounded-lg object-contain"
-              />
-            ))}
+      <div className="flex flex-col max-w-[80%]">
+        {editing ? (
+          <div className="flex flex-col gap-2">
+            <textarea
+              ref={textareaRef}
+              value={editText}
+              onChange={(e) => {
+                setEditText(e.target.value);
+                e.target.style.height = 'auto';
+                e.target.style.height = `${e.target.scrollHeight}px`;
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  handleEditSubmit();
+                }
+                if (e.key === 'Escape') {
+                  handleEditCancel();
+                }
+              }}
+              className="w-full resize-none rounded-xl border border-border bg-muted px-4 py-3 text-sm leading-relaxed text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+              rows={1}
+            />
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={handleEditCancel}
+                className="rounded-md px-3 py-1 text-xs text-muted-foreground hover:text-foreground"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleEditSubmit}
+                className="rounded-md bg-primary px-3 py-1 text-xs text-primary-foreground hover:opacity-80"
+              >
+                Send
+              </button>
+            </div>
           </div>
-        )}
-        {otherFileParts.length > 0 && (
-          <div className="mb-2 flex flex-wrap gap-2">
-            {otherFileParts.map((part, i) => (
+        ) : (
+          <>
+            <div
+              className={cn(
+                'rounded-xl px-4 py-3 text-sm leading-relaxed',
+                isUser
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-foreground'
+              )}
+            >
+              {imageParts.length > 0 && (
+                <div className="mb-2 flex flex-wrap gap-2">
+                  {imageParts.map((part, i) => (
+                    <img
+                      key={i}
+                      src={part.url}
+                      alt="attachment"
+                      className="max-h-64 max-w-full rounded-lg object-contain"
+                    />
+                  ))}
+                </div>
+              )}
+              {otherFileParts.length > 0 && (
+                <div className="mb-2 flex flex-wrap gap-2">
+                  {otherFileParts.map((part, i) => (
+                    <div
+                      key={i}
+                      className={cn(
+                        'inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs',
+                        isUser
+                          ? 'bg-primary-foreground/20'
+                          : 'bg-foreground/10'
+                      )}
+                    >
+                      <FileTextIcon size={12} />
+                      <span className="max-w-[150px] truncate">
+                        {part.name || part.mediaType || 'file'}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {text ? (
+                isUser ? (
+                  <div className="whitespace-pre-wrap break-words">{text}</div>
+                ) : (
+                  <Streamdown mode={isLoading ? 'streaming' : 'static'}>{text}</Streamdown>
+                )
+              ) : isLoading ? (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <SpinnerIcon size={14} />
+                  <span>Working...</span>
+                </div>
+              ) : null}
+            </div>
+
+            {/* Action toolbar */}
+            {!isLoading && text && (
               <div
-                key={i}
                 className={cn(
-                  'inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs',
-                  isUser
-                    ? 'bg-primary-foreground/20'
-                    : 'bg-foreground/10'
+                  'flex gap-1 mt-1 opacity-0 transition-opacity group-hover:opacity-100',
+                  isUser ? 'justify-end' : 'justify-start'
                 )}
               >
-                <FileTextIcon size={12} />
-                <span className="max-w-[150px] truncate">
-                  {part.name || part.mediaType || 'file'}
-                </span>
+                <button
+                  onClick={handleCopy}
+                  className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted"
+                  aria-label="Copy message"
+                >
+                  {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+                </button>
+                {onRetry && (
+                  <button
+                    onClick={() => onRetry(message)}
+                    className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted"
+                    aria-label="Retry"
+                  >
+                    <RefreshIcon size={14} />
+                  </button>
+                )}
+                {isUser && onEdit && (
+                  <button
+                    onClick={handleEditStart}
+                    className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted"
+                    aria-label="Edit message"
+                  >
+                    <SquarePenIcon size={14} />
+                  </button>
+                )}
               </div>
-            ))}
-          </div>
+            )}
+          </>
         )}
-        {text ? (
-          isUser ? (
-            <div className="whitespace-pre-wrap break-words">{text}</div>
-          ) : (
-            <Streamdown mode={isLoading ? 'streaming' : 'static'}>{text}</Streamdown>
-          )
-        ) : isLoading ? (
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <SpinnerIcon size={14} />
-            <span>Working...</span>
-          </div>
-        ) : null}
       </div>
     </div>
   );

package/lib/chat/components/messages.js

@@ -4,7 +4,7 @@ import { useRef, useEffect, useState } from "react";
 import { PreviewMessage, ThinkingMessage } from "./message.js";
 import { Greeting } from "./greeting.js";
 import { ArrowDown } from "lucide-react";
-function Messages({ messages, status }) {
+function Messages({ messages, status, onRetry, onEdit }) {
   const containerRef = useRef(null);
   const endRef = useRef(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -32,13 +32,15 @@ function Messages({ messages, status }) {
       {
         className: "absolute inset-0 touch-pan-y overflow-y-auto",
         ref: containerRef,
-        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-4 md:gap-6 md:px-4", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-4 py-4 md:gap-6 md:px-6", children: [
           messages.length === 0 && /* @__PURE__ */ jsx(Greeting, {}),
           messages.map((message, index) => /* @__PURE__ */ jsx(
             PreviewMessage,
             {
               message,
-              isLoading: status === "streaming" && index === messages.length - 1
+              isLoading: status === "streaming" && index === messages.length - 1,
+              onRetry,
+              onEdit
             },
             message.id
           )),

package/lib/chat/components/messages.jsx

@@ -5,7 +5,7 @@ import { PreviewMessage, ThinkingMessage } from './message.js';
 import { Greeting } from './greeting.js';
 import { ArrowDown } from 'lucide-react';
 
-export function Messages({ messages, status }) {
+export function Messages({ messages, status, onRetry, onEdit }) {
   const containerRef = useRef(null);
   const endRef = useRef(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -41,7 +41,7 @@ export function Messages({ messages, status }) {
         className="absolute inset-0 touch-pan-y overflow-y-auto"
         ref={containerRef}
       >
-        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-2 py-4 md:gap-6 md:px-4">
+        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-4 py-4 md:gap-6 md:px-6">
           {messages.length === 0 && <Greeting />}
 
           {messages.map((message, index) => (
@@ -49,6 +49,8 @@ export function Messages({ messages, status }) {
               key={message.id}
               message={message}
               isLoading={status === 'streaming' && index === messages.length - 1}
+              onRetry={onRetry}
+              onEdit={onEdit}
             />
           ))}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thepopebot",
-  "version": "1.2.33",
+  "version": "1.2.35",
   "type": "module",
   "description": "Create autonomous AI agents with a two-layer architecture: Next.js Event Handler + Docker Agent.",
   "bin": {