@coral-ai/chat 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,14 +1,16 @@
 // src/Chat.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState7 } from "react";
 import {
-  InteractionTag,
-  InteractionTagPrimary,
-  makeStyles as makeStyles8,
+  Caption1 as Caption14,
+  Title3,
+  makeStyles as makeStyles10,
   motionTokens
 } from "@fluentui/react-components";
+import { useCoralConfig } from "@coral-ai/react";
 
 // src/Chat.Canvas.tsx
 import { useState, useEffect, useLayoutEffect, useRef, useCallback } from "react";
-import { Button, makeStyles, tokens } from "@fluentui/react-components";
+import { Button as Button2, makeStyles as makeStyles2, tokens as tokens2 } from "@fluentui/react-components";
 import { ArrowDown } from "@coral-ai/bundleicons";
 
 // src/Chat.Context.tsx
@@ -18,9 +20,154 @@ function useChatContext() {
   return useContext(ChatContext);
 }
 
-// src/Chat.Canvas.tsx
+// src/Chat.Error.tsx
+import { Body1, Button, makeStyles, tokens } from "@fluentui/react-components";
+import {
+  ErrorCircle20Regular,
+  Clock20Regular,
+  LockClosed20Regular,
+  PlugDisconnected20Regular,
+  Warning20Regular
+} from "@fluentui/react-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
+var ERROR_CATEGORIES = [
+  "auth_billing",
+  "rate_limit",
+  "overloaded",
+  "bad_input",
+  "not_found",
+  "server_error",
+  "unknown"
+];
+function isNormalizedChatError(err) {
+  return !!err && typeof err === "object" && typeof err.message === "string" && ERROR_CATEGORIES.includes(err.category);
+}
+function normalizeChatError(err) {
+  if (isNormalizedChatError(err)) return err;
+  const anyErr = err;
+  const rawMessage = String(
+    anyErr?.message ?? anyErr?.error?.message ?? err ?? ""
+  ).toLowerCase();
+  const status = Number(anyErr?.status ?? anyErr?.statusCode ?? 0);
+  const errorType = String(
+    anyErr?.error?.type ?? anyErr?.type ?? anyErr?.code ?? ""
+  );
+  const errorCode = String(
+    anyErr?.error?.code ?? anyErr?.code ?? ""
+  );
+  if (rawMessage.includes("credit") || rawMessage.includes("billing") || rawMessage.includes("insufficient_quota") || errorCode === "insufficient_quota" || errorType === "PERMISSION_DENIED") {
+    return {
+      category: "auth_billing",
+      message: "API credits exhausted. Add credits in your provider's billing dashboard."
+    };
+  }
+  if (errorType === "rate_limit_error" || rawMessage.includes("rate limit") || rawMessage.includes("too many requests")) {
+    return {
+      category: "rate_limit",
+      message: "You're being rate limited. Wait a moment and try again."
+    };
+  }
+  if (status === 529 || status === 503 || errorType === "overloaded_error" || errorType === "RESOURCE_EXHAUSTED" || rawMessage.includes("overload") || rawMessage.includes("capacity")) {
+    return {
+      category: "overloaded",
+      message: "The AI service is overloaded right now. Try again in a few seconds."
+    };
+  }
+  if (status === 404 || errorType === "NOT_FOUND" || rawMessage.includes("model_not_found") || rawMessage.includes("not found")) {
+    return {
+      category: "not_found",
+      message: "Model not found. Check the model name in your configuration."
+    };
+  }
+  if (status === 400 || errorType === "invalid_request_error" || errorType === "INVALID_ARGUMENT") {
+    return {
+      category: "bad_input",
+      message: "The request was invalid. Check your message or API configuration."
+    };
+  }
+  if (status >= 500 || errorType === "api_error" || errorType === "INTERNAL") {
+    return {
+      category: "server_error",
+      message: "The AI service hit an internal error. Try again shortly."
+    };
+  }
+  return {
+    category: "unknown",
+    message: "Something went wrong. Check your connection and try again."
+  };
+}
 var useStyles = makeStyles({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "8px",
+    padding: "12px",
+    borderRadius: tokens.borderRadiusXLarge,
+    backgroundColor: tokens.colorNeutralBackground3,
+    border: `1px solid ${tokens.colorNeutralStroke2}`,
+    color: tokens.colorNeutralForeground3,
+    width: "100%",
+    boxSizing: "border-box",
+    margin: "8px 0"
+  },
+  left: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    minWidth: 0
+  },
+  message: {
+    fontFamily: "var(--fontFamilyMonospace)"
+  }
+});
+var categoryIcon = {
+  auth_billing: /* @__PURE__ */ jsx(LockClosed20Regular, {}),
+  rate_limit: /* @__PURE__ */ jsx(Clock20Regular, {}),
+  overloaded: /* @__PURE__ */ jsx(PlugDisconnected20Regular, {}),
+  bad_input: /* @__PURE__ */ jsx(Warning20Regular, {}),
+  not_found: /* @__PURE__ */ jsx(ErrorCircle20Regular, {}),
+  server_error: /* @__PURE__ */ jsx(ErrorCircle20Regular, {}),
+  unknown: /* @__PURE__ */ jsx(Warning20Regular, {})
+};
+var ChatError = ({ error, onRetry }) => {
+  const styles = useStyles();
+  const { category, message } = normalizeChatError(error);
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles.left, children: [
+      categoryIcon[category],
+      /* @__PURE__ */ jsx(Body1, { className: styles.message, children: message })
+    ] }),
+    onRetry && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        appearance: "primary",
+        onClick: onRetry,
+        children: "Retry"
+      }
+    )
+  ] });
+};
+var Chat_Error_default = ChatError;
+
+// src/fileToBase64.ts
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = reader.result;
+      const comma = dataUrl.indexOf(",");
+      resolve(comma === -1 ? dataUrl : dataUrl.slice(comma + 1));
+    };
+    reader.onerror = () => reject(reader.error ?? new Error("FileReader failed"));
+    reader.readAsDataURL(file);
+  });
+}
+
+// src/Chat.Canvas.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var useStyles2 = makeStyles2({
   root: {
     width: "100%",
     display: "flex",
@@ -35,8 +182,10 @@ var useStyles = makeStyles({
     transform: "translateX(-50%)",
     zIndex: 1e3,
     cursor: "pointer",
-    boxShadow: tokens.shadow8,
-    marginBottom: "16px"
+    boxShadow: tokens2.shadow8,
+    marginBottom: "48px",
+    backgroundColor: "var(--colorNeutralBackgroundAlpha2)",
+    backdropFilter: "blur(40px) saturate(150%)"
   }
 });
 function isAsyncIterable(value) {
@@ -48,9 +197,54 @@ function isRateLimitError(err) {
   const msg = String(e?.message ?? "").toLowerCase();
   return status === 429 || msg.includes("rate limit") || msg.includes("too many requests");
 }
+async function* wrapWithStatusChunk(taskType, reply) {
+  yield { type: "status", name: taskType };
+  if (reply) yield reply;
+}
+async function* parseStream(res) {
+  const reader = res.body?.getReader();
+  if (!reader) return;
+  const decoder = new TextDecoder();
+  let buffer = "";
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+    for (const raw of lines) {
+      const line = raw.startsWith("data:") ? raw.slice(5).trim() : raw.trim();
+      if (!line || line === "[DONE]") continue;
+      try {
+        const parsed = JSON.parse(line);
+        if (typeof parsed === "string") {
+          yield parsed;
+        } else if (parsed && typeof parsed === "object" && "type" in parsed) {
+          yield parsed;
+        } else if (parsed && typeof parsed === "object" && typeof parsed.reply === "string") {
+          if (typeof parsed.type === "string") {
+            yield { type: "status", name: parsed.type };
+          }
+          yield parsed.reply;
+        }
+      } catch {
+        yield line;
+      }
+    }
+  }
+  if (buffer.trim()) {
+    try {
+      const parsed = JSON.parse(buffer);
+      if (typeof parsed === "string") yield parsed;
+      else if (parsed && typeof parsed === "object" && "type" in parsed) yield parsed;
+    } catch {
+      yield buffer;
+    }
+  }
+}
 var ChatCanvas = ({
-  agent,
-  agents,
+  api,
+  allowedAttachments,
   conversationId,
   initialMessages,
   systemPrompt,
@@ -63,20 +257,67 @@ var ChatCanvas = ({
   onStop,
   children
 }) => {
-  const styles = useStyles();
-  const agentKey = agent ?? "default";
-  const resolvedHandler = onSendMessage ?? agents?.[agentKey]?.handler ?? agents?.["default"]?.handler;
-  const [messages, setMessages] = useState(initialMessages ?? []);
+  const styles = useStyles2();
+  const apiHandler = api ? async function(input2, history, files) {
+    const attachments2 = await Promise.all(
+      files.map(async (file) => ({
+        name: file.name,
+        mediaType: file.type,
+        data: await fileToBase64(file)
+      }))
+    );
+    const res = await fetch(api, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        text: input2,
+        history,
+        attachments: attachments2
+      })
+    });
+    if (!res.ok) {
+      const text = await res.text().catch(() => "");
+      throw Object.assign(
+        new Error(`Chat API request failed (${res.status}): ${text || res.statusText}`),
+        { status: res.status }
+      );
+    }
+    const contentType = res.headers.get("content-type") ?? "";
+    if (contentType.includes("text/event-stream") || contentType.includes("application/x-ndjson")) {
+      return parseStream(res);
+    }
+    const data = await res.json();
+    if (data && typeof data === "object") {
+      if (typeof data.type === "string") {
+        return wrapWithStatusChunk(data.type, String(data.reply ?? ""));
+      }
+      if (typeof data.reply === "string") return data.reply;
+    }
+    return typeof data === "string" ? data : "";
+  } : void 0;
+  const resolvedHandler = onSendMessage ?? apiHandler;
+  const [messages, setMessages] = useState(
+    () => (initialMessages ?? []).map((m) => m.id ? m : { ...m, id: crypto.randomUUID() })
+  );
   const [input, setInput] = useState("");
   const [isTyping, setIsTyping] = useState(false);
   const [isRetrying, setIsRetrying] = useState(false);
-  const [chatError, setChatError] = useState(null);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [inputHeight, setInputHeightState] = useState(0);
   const [isInterrupted, setIsInterrupted] = useState(false);
   const [streamingReasoning, setStreamingReasoning] = useState("");
-  const [streamingAgentName, setStreamingAgentName] = useState();
+  const [streamingStatus, setStreamingStatus] = useState();
   const [attachments, setAttachments] = useState([]);
+  const [awaitingFreeformApproval, setAwaitingFreeformApproval] = useState(null);
+  const pendingApproval = (() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i];
+      if (m.role !== "assistant") continue;
+      if (m.approval && !m.approval.answer) return m.approval;
+      if (m.approval && m.approval.answer) return null;
+    }
+    return null;
+  })();
   const reasoningRef = useRef("");
   const lastUserInputRef = useRef("");
   const hasEverSentRef = useRef(false);
@@ -89,7 +330,9 @@ var ChatCanvas = ({
   useEffect(() => {
     setMessages((current) => {
       if ((initialMessages?.length ?? 0) > 0 || current.length === 0) {
-        return initialMessages ?? [];
+        return (initialMessages ?? []).map(
+          (m) => m.id ? m : { ...m, id: crypto.randomUUID() }
+        );
       }
       return current;
     });
@@ -156,40 +399,18 @@ var ChatCanvas = ({
   const removeAttachment = (id) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id));
   };
-  const sendMessage = async (overrideInput) => {
-    const textToSend = overrideInput ?? input;
-    if (!textToSend.trim()) return;
-    hasEverSentRef.current = true;
+  const runHandler = async (textToSend, updatedMessages, snapshotAttachments) => {
     const sessionAtSend = conversationId;
-    const baseMessages = overrideInput ? messages.filter((_, i) => i < messages.length - 2) : messages;
-    const snapshotAttachments = attachments;
-    const attachmentMeta = snapshotAttachments.map((a) => ({
-      name: a.file.name,
-      type: a.file.type,
-      preview: a.preview
-    }));
-    const updatedMessages = [
-      ...baseMessages,
-      {
-        id: crypto.randomUUID(),
-        role: "user",
-        content: textToSend.replace(/^[\n\r]+|[\n\r]+$/g, ""),
-        ...attachmentMeta.length > 0 ? { metadata: { attachments: attachmentMeta } } : {}
-      }
-    ];
     lastUserInputRef.current = textToSend;
     userScrolledUpRef.current = false;
     setMessages(updatedMessages);
     onMessagesChange?.(updatedMessages, sessionAtSend);
-    if (!overrideInput) setInput("");
-    setAttachments([]);
     setIsTyping(true);
     setIsInterrupted(false);
-    setChatError(null);
     shouldStopRef.current = false;
     reasoningRef.current = "";
     setStreamingReasoning("");
-    setStreamingAgentName(void 0);
+    setStreamingStatus(void 0);
     const historyForAI = systemPrompt ? [{ role: "system", content: systemPrompt }, ...updatedMessages] : updatedMessages;
     const MAX_RETRIES = 3;
     try {
@@ -205,6 +426,8 @@ var ChatCanvas = ({
               let assistantContent = "";
               let rafId = null;
               let pendingContent = "";
+              let streamedApproval;
+              let streamedTodos;
               for await (const chunk of response) {
                 if (shouldStopRef.current) break;
                 if (sessionAtSend !== void 0 && currentConversationIdRef.current !== sessionAtSend) break;
@@ -214,9 +437,13 @@ var ChatCanvas = ({
                   if (rafId === null) {
                     rafId = requestAnimationFrame(() => {
                       const content = pendingContent;
-                      const nextMsg = { id: assistantId, role: "assistant", content };
+                      let nextMsg = { id: assistantId, role: "assistant", content };
                       setMessages((prev) => {
                         const updated = [...prev];
+                        const last = updated[updated.length - 1];
+                        if (last && last.id === assistantId) {
+                          nextMsg = { ...last, content };
+                        }
                         updated[updated.length - 1] = nextMsg;
                         return updated;
                       });
@@ -227,8 +454,28 @@ var ChatCanvas = ({
                 } else if (chunk.type === "reasoning") {
                   reasoningRef.current += chunk.content;
                   setStreamingReasoning(reasoningRef.current);
-                } else if (chunk.type === "agent") {
-                  setStreamingAgentName(chunk.name);
+                } else if (chunk.type === "status") {
+                  setStreamingStatus(chunk.name);
+                } else if (chunk.type === "approval") {
+                  streamedApproval = chunk.approval;
+                  setMessages((prev) => {
+                    const updated = [...prev];
+                    const last = updated[updated.length - 1];
+                    if (last && last.id === assistantId) {
+                      updated[updated.length - 1] = { ...last, approval: chunk.approval };
+                    }
+                    return updated;
+                  });
+                } else if (chunk.type === "todos") {
+                  streamedTodos = chunk.todos;
+                  setMessages((prev) => {
+                    const updated = [...prev];
+                    const last = updated[updated.length - 1];
+                    if (last && last.id === assistantId) {
+                      updated[updated.length - 1] = { ...last, todos: chunk.todos };
+                    }
+                    return updated;
+                  });
                 }
               }
               if (rafId !== null) cancelAnimationFrame(rafId);
@@ -240,7 +487,9 @@ var ChatCanvas = ({
                 id: assistantId,
                 role: "assistant",
                 content: assistantContent,
-                ...reasoningRef.current ? { metadata: { reasoning: reasoningRef.current } } : {}
+                ...reasoningRef.current ? { metadata: { reasoning: reasoningRef.current } } : {},
+                ...streamedApproval ? { approval: streamedApproval } : {},
+                ...streamedTodos ? { todos: streamedTodos } : {}
               };
               const finalMessages = [...updatedMessages, finalMsg];
               setMessages(finalMessages);
@@ -259,7 +508,8 @@ var ChatCanvas = ({
                 role: "assistant",
                 content: response.content,
                 type: response.type,
-                metadata: response.metadata
+                metadata: response.metadata,
+                todos: response.todos
               };
               const finalMessages = [...updatedMessages, assistantMsg];
               setMessages(finalMessages);
@@ -279,17 +529,148 @@ var ChatCanvas = ({
       }
     } catch (err) {
       onError?.(err);
-      setChatError(err);
+      if (sessionAtSend === void 0 || currentConversationIdRef.current === sessionAtSend) {
+        const erroredMessages = [
+          ...updatedMessages,
+          {
+            id: crypto.randomUUID(),
+            role: "assistant",
+            content: "",
+            error: normalizeChatError(err)
+          }
+        ];
+        setMessages(erroredMessages);
+        onMessagesChange?.(erroredMessages, sessionAtSend);
+      }
     } finally {
       setIsRetrying(false);
       setIsTyping(false);
     }
   };
-  return /* @__PURE__ */ jsx(
+  const resolveApproval = (approvalId, optionId) => {
+    const target = messages.find(
+      (m) => m.role === "assistant" && m.approval?.id === approvalId
+    );
+    if (!target || !target.approval) return;
+    if (target.approval.answer) return;
+    const option = target.approval.options.find((o) => o.id === optionId);
+    if (!option) return;
+    if (option.freeform) {
+      setAwaitingFreeformApproval({ approvalId, optionId });
+      return;
+    }
+    const updated = messages.map(
+      (m) => m.role === "assistant" && m.approval?.id === approvalId ? { ...m, approval: { ...m.approval, answer: { optionId } } } : m
+    );
+    const replyText = option.label;
+    const userMsg = {
+      id: crypto.randomUUID(),
+      role: "user",
+      type: "approval_response",
+      content: replyText,
+      metadata: { approvalId, optionId, label: option.label }
+    };
+    const next = [...updated, userMsg];
+    void runHandler(replyText, next, []);
+  };
+  const sendMessage = async (overrideInput) => {
+    const textToSend = overrideInput ?? input;
+    if (!textToSend.trim()) return;
+    if (awaitingFreeformApproval) {
+      const { approvalId, optionId } = awaitingFreeformApproval;
+      const target = messages.find(
+        (m) => m.role === "assistant" && m.approval?.id === approvalId
+      );
+      if (target && target.approval) {
+        const option = target.approval.options.find((o) => o.id === optionId);
+        const updated = messages.map(
+          (m) => m.role === "assistant" && m.approval?.id === approvalId ? { ...m, approval: { ...m.approval, answer: { optionId, text: textToSend } } } : m
+        );
+        const userMsg = {
+          id: crypto.randomUUID(),
+          role: "user",
+          type: "approval_response",
+          content: textToSend.replace(/^[\n\r]+|[\n\r]+$/g, ""),
+          metadata: { approvalId, optionId, label: option?.label, text: textToSend }
+        };
+        const next = [...updated, userMsg];
+        if (!overrideInput) setInput("");
+        setAwaitingFreeformApproval(null);
+        hasEverSentRef.current = true;
+        await runHandler(textToSend, next, []);
+        return;
+      }
+      setAwaitingFreeformApproval(null);
+    }
+    hasEverSentRef.current = true;
+    const lastMessage = messages[messages.length - 1];
+    const baseMessages = overrideInput ? messages.filter((_, i) => i < messages.length - 2) : lastMessage?.role === "assistant" && lastMessage.error ? messages.slice(0, -1) : messages;
+    const snapshotAttachments = attachments;
+    const attachmentMeta = snapshotAttachments.map((a) => ({
+      name: a.file.name,
+      type: a.file.type,
+      preview: a.preview
+    }));
+    const updatedMessages = [
+      ...baseMessages,
+      {
+        id: crypto.randomUUID(),
+        role: "user",
+        content: textToSend.replace(/^[\n\r]+|[\n\r]+$/g, ""),
+        ...attachmentMeta.length > 0 ? { metadata: { attachments: attachmentMeta } } : {}
+      }
+    ];
+    if (!overrideInput) setInput("");
+    setAttachments([]);
+    await runHandler(textToSend, updatedMessages, snapshotAttachments);
+  };
+  const resolveRegenerateTarget = (messageId) => {
+    if (!messageId) {
+      for (let i = messages.length - 1; i >= 0; i--) {
+        if (messages[i].role === "user") return i;
+      }
+      return -1;
+    }
+    const idx = messages.findIndex((m) => m.id === messageId);
+    if (idx === -1) return -1;
+    if (messages[idx].role === "user") return idx;
+    if (messages[idx].role === "assistant") {
+      for (let i = idx - 1; i >= 0; i--) {
+        if (messages[i].role === "user") return i;
+      }
+    }
+    return -1;
+  };
+  const regenerate = async (messageId) => {
+    const userIdx = resolveRegenerateTarget(messageId);
+    if (userIdx === -1) return;
+    const userMsg = messages[userIdx];
+    const baseMessages = messages.slice(0, userIdx + 1);
+    await runHandler(userMsg.content, baseMessages, []);
+  };
+  const editMessage = async (messageId, newContent) => {
+    const idx = messages.findIndex((m) => m.id === messageId);
+    if (idx === -1) return;
+    if (messages[idx].role !== "user") return;
+    const trimmed = newContent.replace(/^[\n\r]+|[\n\r]+$/g, "");
+    if (!trimmed.trim()) return;
+    const editedMessage = {
+      ...messages[idx],
+      content: trimmed
+    };
+    const baseMessages = [
+      ...messages.slice(0, idx),
+      editedMessage
+    ];
+    await runHandler(trimmed, baseMessages, []);
+  };
+  return /* @__PURE__ */ jsx2(
     ChatContext.Provider,
     {
       value: {
         sendMessage,
+        regenerate,
+        editMessage,
         scrollToBottom,
         handleCopy,
         messages,
@@ -300,9 +681,8 @@ var ChatCanvas = ({
         isRetrying,
         isInterrupted,
         streamingReasoning,
-        streamingAgentName,
+        streamingStatus,
         thinkingStatus,
-        chatError,
         showScrollButton,
         setInputHeight: setInputHeightState,
         messagesContainerRef,
@@ -314,12 +694,16 @@ var ChatCanvas = ({
         onStop,
         attachments,
         addAttachments,
-        removeAttachment
+        removeAttachment,
+        allowedAttachments,
+        pendingApproval,
+        awaitingFreeformApproval,
+        resolveApproval
       },
-      children: /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+      children: /* @__PURE__ */ jsxs2("div", { className: styles.root, children: [
         children,
-        showScrollButton && /* @__PURE__ */ jsx(
-          Button,
+        showScrollButton && /* @__PURE__ */ jsx2(
+          Button2,
           {
             onClick: scrollToBottom,
             className: styles.scrollToBottom,
@@ -327,10 +711,10 @@ var ChatCanvas = ({
             style: {
               bottom: inputHeight + 16,
               backgroundColor: "transparent",
-              border: `1px solid ${tokens.colorNeutralStroke3}`,
+              border: `1px solid ${tokens2.colorNeutralStroke3}`,
               backdropFilter: "saturate(180%) blur(16px)"
             },
-            icon: /* @__PURE__ */ jsx(ArrowDown, { style: { fontSize: "16px" } })
+            icon: /* @__PURE__ */ jsx2(ArrowDown, { style: { fontSize: "16px" } })
           }
         )
       ] })
@@ -340,22 +724,34 @@ var ChatCanvas = ({
 var Chat_Canvas_default = ChatCanvas;
 
 // src/Chat.Messages.tsx
-import React4, { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
-import { Body1 as Body14, Button as Button4, makeStyles as makeStyles6, tokens as tokens6 } from "@fluentui/react-components";
-import { Copy, Heart } from "@coral-ai/bundleicons";
-import { CoralMarkdown } from "@coral-ai/markdown";
+import React5, { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState5 } from "react";
+import {
+  Body1 as Body15,
+  Button as Button4,
+  Caption1 as Caption12,
+  makeStyles as makeStyles7,
+  tokens as tokens7
+} from "@fluentui/react-components";
+import {
+  ArrowClockwise,
+  Copy,
+  Edit as EditIcon,
+  Info
+} from "@coral-ai/bundleicons";
+import {
+  CoralMarkdown
+} from "@coral-ai/markdown";
 
 // src/Chat.ThinkingIndicator.tsx
 import { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { makeStyles as makeStyles2, tokens as tokens2 } from "@fluentui/react-components";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { makeStyles as makeStyles3, Spinner, tokens as tokens3 } from "@fluentui/react-components";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var thinkingMessages = [
   "Generating",
   "Thinking",
   "Optimizing",
   "Processing",
   "Analyzing",
-  "Reasoning",
   "Drafting",
   "Evaluating",
   "Computing",
@@ -374,45 +770,13 @@ var retryingMessages = [
 ];
 var TYPING_SPEED = 80;
 var HOLD_DURATION = 1300;
-var SPINNER_BG = "#000000";
-var useStyles2 = makeStyles2({
+var useStyles3 = makeStyles3({
   root: {
     display: "flex",
     alignItems: "center",
     gap: "8px",
     width: "100%",
-    color: tokens2.colorNeutralForeground3
-    // fontSize: "14px",
-  },
-  icon: {
-    width: "28px",
-    height: "28px",
-    flexShrink: 0,
-    border: `3px solid ${SPINNER_BG}`,
-    boxSizing: "border-box",
-    backgroundColor: "${SPINNER_BG}",
-    opacity: 0.8,
-    backgroundImage: [
-      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
-      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
-      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
-      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
-      `radial-gradient(farthest-side, ${tokens2.colorNeutralForeground1} 98%, ${SPINNER_BG})`,
-      `linear-gradient(${tokens2.colorNeutralForeground1} 0 0)`,
-      `linear-gradient(${tokens2.colorNeutralForeground1} 0 0)`
-    ].join(", "),
-    backgroundSize: "7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 100% 3px, 3px 100%",
-    backgroundPosition: "50%, 50%, 50%, 50%, 50%, 50%, 50%",
-    backgroundRepeat: "no-repeat",
-    filter: "blur(2px) contrast(10)",
-    animationName: {
-      "100%": {
-        backgroundPosition: "50% -7px, -7px 50%, 22px 50%, 50% 22px, 50%, 50%, 50%"
-      }
-    },
-    animationDuration: "0.8s",
-    animationIterationCount: "infinite",
-    animationTimingFunction: "ease"
+    color: tokens3.colorNeutralForeground3
   },
   text: {
     // fontFamily: tokens.fontFamilyBase,
@@ -425,7 +789,7 @@ var useStyles2 = makeStyles2({
     display: "inline-block",
     width: "6px",
     height: "1em",
-    backgroundColor: tokens2.colorNeutralForeground3,
+    backgroundColor: tokens3.colorNeutralForeground3,
     marginLeft: "1px",
     verticalAlign: "text-bottom",
     animationName: {
@@ -437,14 +801,14 @@ var useStyles2 = makeStyles2({
     animationIterationCount: "infinite"
   }
 });
-var ThinkingIndicator = ({ isRetrying = false, status }) => {
-  const styles = useStyles2();
+var ThinkingIndicator = ({ isRetrying = false, status, messages }) => {
+  const styles = useStyles3();
   const [displayText, setDisplayText] = useState2("");
   const timerRef = useRef2(void 0);
   const msgIdxRef = useRef2(0);
   const charIdxRef = useRef2(0);
   useEffect2(() => {
-    const pool = isRetrying ? retryingMessages : thinkingMessages;
+    const pool = isRetrying ? retryingMessages : messages && messages.length > 0 ? messages : thinkingMessages;
     msgIdxRef.current = 0;
     charIdxRef.current = 0;
     const tick = () => {
@@ -463,32 +827,58 @@ var ThinkingIndicator = ({ isRetrying = false, status }) => {
     };
     tick();
     return () => clearTimeout(timerRef.current);
-  }, [isRetrying]);
-  return /* @__PURE__ */ jsxs2("div", { className: styles.root, children: [
-    /* @__PURE__ */ jsx2("div", { className: styles.icon }),
-    /* @__PURE__ */ jsxs2("span", { className: styles.text, children: [
+  }, [isRetrying, messages]);
+  return /* @__PURE__ */ jsxs3("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx3(Spinner, { size: "tiny" }),
+    /* @__PURE__ */ jsxs3("span", { className: styles.text, children: [
       status ?? displayText,
-      /* @__PURE__ */ jsx2("span", { className: styles.cursor })
+      /* @__PURE__ */ jsx3("span", { className: styles.cursor })
     ] })
   ] });
 };
 var Chat_ThinkingIndicator_default = ThinkingIndicator;
 
+// src/Chat.TaskMessages.ts
+var DEFAULT_TASK_MESSAGES = {
+  text: [
+    "Generating",
+    "Thinking",
+    "Optimizing",
+    "Processing",
+    "Analyzing",
+    "Drafting",
+    "Evaluating",
+    "Computing",
+    "Synthesizing",
+    "Reviewing",
+    "Refining"
+  ],
+  photo: ["Looking", "Examining", "Reading image", "Analyzing visuals"],
+  file: ["Reading document", "Parsing", "Reviewing", "Scanning"],
+  voice: ["Listening", "Transcribing", "Processing audio"]
+};
+function resolveTaskMessages(name) {
+  if (name && name in DEFAULT_TASK_MESSAGES) {
+    return DEFAULT_TASK_MESSAGES[name];
+  }
+  return DEFAULT_TASK_MESSAGES.text;
+}
+
 // src/Chat.Callout.tsx
-import { Body1, Button as Button2, makeStyles as makeStyles3, mergeClasses, tokens as tokens3 } from "@fluentui/react-components";
+import { Body1 as Body12, Button as Button3, makeStyles as makeStyles4, mergeClasses, tokens as tokens4 } from "@fluentui/react-components";
 import { ChatWarning20Regular } from "@fluentui/react-icons";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var useStyles3 = makeStyles3({
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var useStyles4 = makeStyles4({
   root: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
     gap: "8px",
     padding: "12px 12px",
-    borderRadius: tokens3.borderRadiusXLarge,
-    backgroundColor: tokens3.colorNeutralBackground3,
-    border: `1px solid ${tokens3.colorNeutralStroke2}`,
-    color: tokens3.colorNeutralForeground3,
+    borderRadius: tokens4.borderRadiusXLarge,
+    backgroundColor: tokens4.colorNeutralBackground3,
+    border: `1px solid ${tokens4.colorNeutralStroke2}`,
+    color: tokens4.colorNeutralForeground3,
     width: "100%",
     boxSizing: "border-box",
     margin: "24px 0"
@@ -506,143 +896,25 @@ var useStyles3 = makeStyles3({
   }
 });
 var ChatCallout = ({ message, onRetry, className }) => {
-  const styles = useStyles3();
-  return /* @__PURE__ */ jsxs3("div", { className: mergeClasses(styles.root, className), children: [
-    /* @__PURE__ */ jsxs3("span", { className: styles.left, children: [
-      /* @__PURE__ */ jsx3(ChatWarning20Regular, {}),
-      /* @__PURE__ */ jsx3(Body1, { className: styles.label, children: message })
-    ] }),
-    onRetry && /* @__PURE__ */ jsx3(
-      Button2,
-      {
-        onClick: onRetry,
-        className: styles.retryButton,
-        size: "small",
-        appearance: "primary",
-        children: "Retry"
-      }
-    )
-  ] });
-};
-var Chat_Callout_default = ChatCallout;
-
-// src/Chat.Error.tsx
-import { Body1 as Body12, Button as Button3, makeStyles as makeStyles4, tokens as tokens4 } from "@fluentui/react-components";
-import {
-  ErrorCircle20Regular,
-  Clock20Regular,
-  LockClosed20Regular,
-  PlugDisconnected20Regular,
-  Warning20Regular
-} from "@fluentui/react-icons";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function normalizeChatError(err) {
-  const anyErr = err;
-  const rawMessage = String(
-    anyErr?.message ?? anyErr?.error?.message ?? err ?? ""
-  ).toLowerCase();
-  const status = Number(anyErr?.status ?? anyErr?.statusCode ?? 0);
-  const errorType = String(
-    anyErr?.error?.type ?? anyErr?.type ?? anyErr?.code ?? ""
-  );
-  const errorCode = String(
-    anyErr?.error?.code ?? anyErr?.code ?? ""
-  );
-  if (rawMessage.includes("credit") || rawMessage.includes("billing") || rawMessage.includes("insufficient_quota") || errorCode === "insufficient_quota" || errorType === "PERMISSION_DENIED") {
-    return {
-      category: "auth_billing",
-      message: "API credits exhausted. Add credits in your provider's billing dashboard."
-    };
-  }
-  if (errorType === "rate_limit_error" || rawMessage.includes("rate limit") || rawMessage.includes("too many requests")) {
-    return {
-      category: "rate_limit",
-      message: "You're being rate limited. Wait a moment and try again."
-    };
-  }
-  if (status === 529 || status === 503 || errorType === "overloaded_error" || errorType === "RESOURCE_EXHAUSTED" || rawMessage.includes("overload") || rawMessage.includes("capacity")) {
-    return {
-      category: "overloaded",
-      message: "The AI service is overloaded right now. Try again in a few seconds."
-    };
-  }
-  if (status === 404 || errorType === "NOT_FOUND" || rawMessage.includes("model_not_found") || rawMessage.includes("not found")) {
-    return {
-      category: "not_found",
-      message: "Model not found. Check the model name in your configuration."
-    };
-  }
-  if (status === 400 || errorType === "invalid_request_error" || errorType === "INVALID_ARGUMENT") {
-    return {
-      category: "bad_input",
-      message: "The request was invalid. Check your message or API configuration."
-    };
-  }
-  if (status >= 500 || errorType === "api_error" || errorType === "INTERNAL") {
-    return {
-      category: "server_error",
-      message: "The AI service hit an internal error. Try again shortly."
-    };
-  }
-  return {
-    category: "unknown",
-    message: "Something went wrong. Check your connection and try again."
-  };
-}
-var useStyles4 = makeStyles4({
-  root: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "8px",
-    padding: "12px",
-    borderRadius: tokens4.borderRadiusXLarge,
-    backgroundColor: tokens4.colorNeutralBackground3,
-    border: `1px solid ${tokens4.colorNeutralStroke2}`,
-    color: tokens4.colorNeutralForeground3,
-    width: "100%",
-    boxSizing: "border-box",
-    margin: "8px 0"
-  },
-  left: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    minWidth: 0
-  },
-  message: {
-    fontFamily: "var(--fontFamilyMonospace)"
-  }
-});
-var categoryIcon = {
-  auth_billing: /* @__PURE__ */ jsx4(LockClosed20Regular, {}),
-  rate_limit: /* @__PURE__ */ jsx4(Clock20Regular, {}),
-  overloaded: /* @__PURE__ */ jsx4(PlugDisconnected20Regular, {}),
-  bad_input: /* @__PURE__ */ jsx4(Warning20Regular, {}),
-  not_found: /* @__PURE__ */ jsx4(ErrorCircle20Regular, {}),
-  server_error: /* @__PURE__ */ jsx4(ErrorCircle20Regular, {}),
-  unknown: /* @__PURE__ */ jsx4(Warning20Regular, {})
-};
-var ChatError = ({ error, onRetry }) => {
   const styles = useStyles4();
-  const { category, message } = normalizeChatError(error);
-  return /* @__PURE__ */ jsxs4("div", { className: styles.root, children: [
+  return /* @__PURE__ */ jsxs4("div", { className: mergeClasses(styles.root, className), children: [
     /* @__PURE__ */ jsxs4("span", { className: styles.left, children: [
-      categoryIcon[category],
-      /* @__PURE__ */ jsx4(Body12, { className: styles.message, children: message })
+      /* @__PURE__ */ jsx4(ChatWarning20Regular, {}),
+      /* @__PURE__ */ jsx4(Body12, { className: styles.label, children: message })
     ] }),
     onRetry && /* @__PURE__ */ jsx4(
       Button3,
       {
+        onClick: onRetry,
+        className: styles.retryButton,
         size: "small",
         appearance: "primary",
-        onClick: onRetry,
         children: "Retry"
       }
     )
   ] });
 };
-var Chat_Error_default = ChatError;
+var Chat_Callout_default = ChatCallout;
 
 // src/Chat.ReasoningBlock.tsx
 import { useState as useState3, useEffect as useEffect3, useRef as useRef3 } from "react";
@@ -763,10 +1035,168 @@ var ReasoningBlock = ({
 };
 var Chat_ReasoningBlock_default = ReasoningBlock;
 
-// src/Chat.Messages.tsx
-import { CheckmarkCircle20Filled } from "@fluentui/react-icons";
+// src/Chat.TodoList.tsx
+import { useState as useState4 } from "react";
+import {
+  Body1 as Body14,
+  Caption1,
+  makeStyles as makeStyles6,
+  Spinner as Spinner2,
+  tokens as tokens6
+} from "@fluentui/react-components";
+import {
+  CheckmarkCircle16Filled,
+  ChevronRight16Regular as ChevronRight16Regular2,
+  Circle16Regular
+} from "@fluentui/react-icons";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var useStyles6 = makeStyles6({
+  root: {
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    margin: "12px 0",
+    borderRadius: "var(--borderRadiusXLarge)",
+    backgroundColor: "var(--colorNeutralBackgroundAlpha2)",
+    border: `1px solid ${tokens6.colorNeutralStroke2}`,
+    overflow: "hidden"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "10px 14px",
+    cursor: "pointer",
+    background: "none",
+    border: "none",
+    width: "100%",
+    textAlign: "left"
+  },
+  label: {
+    color: tokens6.colorNeutralForeground2,
+    flexShrink: 0
+  },
+  count: {
+    color: tokens6.colorNeutralForeground3,
+    marginLeft: "auto",
+    flexShrink: 0
+  },
+  chevron: {
+    color: tokens6.colorNeutralForeground3,
+    flexShrink: 0,
+    transition: "transform 0.2s ease"
+  },
+  chevronExpanded: {
+    transform: "rotate(90deg)"
+  },
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "2px 14px 14px 14px"
+  },
+  item: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px"
+  },
+  iconCell: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "20px",
+    flexShrink: 0
+  },
+  pendingIcon: {
+    color: tokens6.colorNeutralForeground4
+  },
+  doneIcon: {
+    color: tokens6.colorStatusSuccessForeground1
+  },
+  text: {
+    minWidth: 0,
+    wordBreak: "break-word"
+  },
+  pendingText: {
+    color: tokens6.colorNeutralForeground3
+  },
+  activeText: {
+    color: tokens6.colorNeutralForeground1,
+    fontWeight: tokens6.fontWeightSemibold
+  },
+  doneText: {
+    color: tokens6.colorNeutralForeground3,
+    textDecorationLine: "line-through"
+  }
+});
+var ChatTodoList = ({
+  todos,
+  className,
+  style
+}) => {
+  const styles = useStyles6();
+  const total = todos.length;
+  const completed = todos.filter((t) => t.status === "completed").length;
+  const [expanded, setExpanded] = useState4(true);
+  if (total === 0) return null;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `${styles.root}${className ? ` ${className}` : ""}`,
+      style,
+      role: "group",
+      "aria-label": `Task plan, ${completed} of ${total} done`,
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            type: "button",
+            className: styles.header,
+            onClick: () => setExpanded((e) => !e),
+            "aria-expanded": expanded,
+            children: [
+              /* @__PURE__ */ jsx6(
+                ChevronRight16Regular2,
+                {
+                  className: `${styles.chevron}${expanded ? ` ${styles.chevronExpanded}` : ""}`
+                }
+              ),
+              /* @__PURE__ */ jsx6(Body14, { className: styles.label, children: "Tasks" }),
+              /* @__PURE__ */ jsxs6(Caption1, { className: styles.count, children: [
+                completed,
+                "/",
+                total
+              ] })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx6("div", { className: styles.list, role: "list", children: todos.map((todo, index) => {
+          const text = todo.status === "in_progress" ? todo.activeForm ?? todo.content : todo.content;
+          const textClass = todo.status === "completed" ? styles.doneText : todo.status === "in_progress" ? styles.activeText : styles.pendingText;
+          return /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: styles.item,
+              role: "listitem",
+              children: [
+                /* @__PURE__ */ jsx6("span", { className: styles.iconCell, children: todo.status === "completed" ? /* @__PURE__ */ jsx6(CheckmarkCircle16Filled, { className: styles.doneIcon }) : todo.status === "in_progress" ? /* @__PURE__ */ jsx6(Spinner2, { size: "extra-tiny" }) : /* @__PURE__ */ jsx6(Circle16Regular, { className: styles.pendingIcon }) }),
+                /* @__PURE__ */ jsx6(Body14, { className: `${styles.text} ${textClass}`, children: text })
+              ]
+            },
+            todo.id ?? `todo-${index}`
+          );
+        }) })
+      ]
+    }
+  );
+};
+var Chat_TodoList_default = ChatTodoList;
+
+// src/Chat.Messages.tsx
+import { CheckmarkCircle20Filled } from "@fluentui/react-icons";
+import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var useStyles7 = makeStyles7({
   messages: {
     flex: "1",
     overflowY: "auto",
@@ -787,43 +1217,119 @@ var useStyles6 = makeStyles6({
     padding: "0 16px",
     boxSizing: "border-box"
   },
-  messageUser: {
+  // ── User message column: holds attachments + bubble + hover-only footer ──
+  userRow: {
     alignSelf: "flex-end",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
     maxWidth: "80%",
-    backgroundColor: tokens6.colorNeutralBackground2,
-    color: tokens6.colorNeutralForeground2,
-    border: `1px solid ${tokens6.colorNeutralStroke2}`,
+    "&:hover .coral-user-footer, &:focus-within .coral-user-footer": {
+      opacity: 1
+    }
+  },
+  userBubble: {
+    backgroundColor: tokens7.colorNeutralBackground2,
+    color: tokens7.colorNeutralForeground2,
+    border: `1px solid ${tokens7.colorNeutralStroke2}`,
     padding: "8px 12px",
-    borderRadius: tokens6.borderRadiusXLarge,
+    borderRadius: tokens7.borderRadiusXLarge,
     wordBreak: "break-word",
     boxSizing: "border-box"
   },
+  userFooter: {
+    display: "flex",
+    justifyContent: "flex-end",
+    marginTop: "6px",
+    marginRight: "-10px",
+    opacity: 0,
+    transition: "opacity 120ms ease-in-out"
+  },
+  userActions: {
+    display: "flex"
+  },
+  // ── Inline edit mode ──
+  userEditWrap: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    width: "min(640px, 80vw)",
+    gap: "8px"
+  },
+  userEditTextarea: {
+    backgroundColor: tokens7.colorNeutralBackground2,
+    color: tokens7.colorNeutralForeground2,
+    border: `1px solid ${tokens7.colorNeutralStroke1}`,
+    padding: "8px 12px",
+    borderRadius: tokens7.borderRadiusLarge,
+    fontFamily: tokens7.fontFamilyBase,
+    fontSize: tokens7.fontSizeBase300,
+    lineHeight: tokens7.lineHeightBase300,
+    resize: "none",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    minHeight: "40px",
+    "&:focus": {
+      border: `1px solid ${tokens7.colorNeutralStroke3}`
+    }
+  },
+  userEditFooter: {
+    display: "flex",
+    marginTop: "8px",
+    // marginLeft: "12px",
+    color: `${tokens7.colorNeutralForeground3}`,
+    gap: "12px",
+    alignItems: "center"
+  },
+  userEditActions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px"
+  },
+  // ── Assistant message ──
   messageAssistant: {
     alignSelf: "flex-start",
     width: "100%",
-    color: tokens6.colorNeutralForeground2,
+    color: tokens7.colorNeutralForeground2,
     wordBreak: "break-word",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    "&:hover .coral-assistant-footer, &:focus-within .coral-assistant-footer": {
+      opacity: 1
+    }
   },
   assistantFooter: {
     display: "flex",
     justifyContent: "space-between",
     marginTop: "6px",
-    marginLeft: "-10px"
+    marginLeft: "-10px",
+    // Hover-only by default; the latest message overrides this to stay visible.
+    opacity: 0,
+    transition: "opacity 120ms ease-in-out"
   },
   assistantActions: {
     display: "flex"
+  },
+  copiedBadge: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    color: tokens7.colorPaletteSeafoamForeground2
+  },
+  footerIconButton: {
+    color: tokens7.colorNeutralForeground3
   }
 });
 var ChatMessages = ({
   components,
-  onFeedback,
   onCopy,
   onNavigate,
   fontSize,
   fontFamily
 }) => {
-  const styles = useStyles6();
+  const styles = useStyles7();
   const ctx = useChatContext();
   const {
     messages,
@@ -832,35 +1338,204 @@ var ChatMessages = ({
     isRetrying,
     isInterrupted,
     streamingReasoning,
-    streamingAgentName,
+    streamingStatus,
     thinkingStatus,
-    chatError,
     sendMessage,
+    regenerate,
+    editMessage,
     handleCopy,
     lastUserInputRef,
     registerMessagesContainer,
     bottomRef
   } = ctx;
   const containerRef = useRef4(null);
-  const [copiedIndex, setCopiedIndex] = useState4(null);
+  const [surface, setSurface] = useState5(null);
+  useLayoutEffect2(() => {
+    const el = containerRef.current?.closest("[data-coral-surface]");
+    setSurface(el?.getAttribute("data-coral-surface") ?? null);
+  }, []);
+  const isSidecar = surface === "panel-right";
+  const [copiedKey, setCopiedKey] = useState5(null);
   const copiedTimerRef = useRef4(null);
+  const [editingId, setEditingId] = useState5(null);
+  const [editDraft, setEditDraft] = useState5("");
+  const editTextareaRef = useRef4(null);
   useEffect4(() => {
     registerMessagesContainer(containerRef.current);
     return () => registerMessagesContainer(null);
   }, []);
-  const onCopyMerged = (content, index) => {
+  useLayoutEffect2(() => {
+    if (editingId && editTextareaRef.current) {
+      const ta = editTextareaRef.current;
+      ta.focus();
+      ta.setSelectionRange(ta.value.length, ta.value.length);
+      ta.style.height = "auto";
+      ta.style.height = `${ta.scrollHeight}px`;
+    }
+  }, [editingId]);
+  const startEdit = (msg) => {
+    if (!msg.id) return;
+    setEditingId(msg.id);
+    setEditDraft(msg.content);
+  };
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditDraft("");
+  };
+  const saveEdit = async () => {
+    if (!editingId) return;
+    const trimmed = editDraft.trim();
+    if (!trimmed) return;
+    const id = editingId;
+    setEditingId(null);
+    setEditDraft("");
+    await editMessage(id, trimmed);
+  };
+  const handleEditTextareaInput = (e) => {
+    setEditDraft(e.target.value);
+    const ta = e.target;
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight}px`;
+  };
+  const handleEditKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      cancelEdit();
+    } else if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      void saveEdit();
+    }
+  };
+  const onCopyMerged = (content, key) => {
     handleCopy(content);
     onCopy?.(content);
     if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
-    setCopiedIndex(index);
-    copiedTimerRef.current = setTimeout(() => setCopiedIndex(null), 1500);
+    setCopiedKey(key);
+    copiedTimerRef.current = setTimeout(() => setCopiedKey(null), 1500);
+  };
+  const renderUserMessage = (msg, index) => {
+    const key = msg.id ?? `idx-${index}`;
+    const isEditing = !!msg.id && editingId === msg.id;
+    const attachments = Array.isArray(msg.metadata?.attachments) ? msg.metadata.attachments : null;
+    return /* @__PURE__ */ jsxs7("div", { className: styles.userRow, children: [
+      attachments && /* @__PURE__ */ jsx7(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "6px",
+            flexWrap: "wrap",
+            marginBottom: "6px"
+          },
+          children: attachments.map(
+            (a, i) => a.type.startsWith("image/") && a.preview ? /* @__PURE__ */ jsx7(
+              "img",
+              {
+                src: a.preview,
+                alt: a.name,
+                style: {
+                  width: 64,
+                  height: 64,
+                  borderRadius: tokens7.borderRadiusMedium,
+                  objectFit: "cover"
+                }
+              },
+              i
+            ) : /* @__PURE__ */ jsxs7(
+              "span",
+              {
+                style: {
+                  fontSize: 12,
+                  padding: "2px 8px",
+                  borderRadius: tokens7.borderRadiusSmall,
+                  backgroundColor: tokens7.colorNeutralBackground3,
+                  color: tokens7.colorNeutralForeground2
+                },
+                children: [
+                  "\u{1F4C4} ",
+                  a.name
+                ]
+              },
+              i
+            )
+          )
+        }
+      ),
+      isEditing ? /* @__PURE__ */ jsxs7("div", { className: styles.userEditWrap, children: [
+        /* @__PURE__ */ jsx7(
+          "textarea",
+          {
+            ref: editTextareaRef,
+            className: styles.userEditTextarea,
+            value: editDraft,
+            onChange: handleEditTextareaInput,
+            onKeyDown: handleEditKeyDown,
+            rows: 1
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: styles.userEditFooter, children: [
+          /* @__PURE__ */ jsx7(
+            Info,
+            {
+              style: {
+                marginRight: "6px",
+                color: `${tokens7.colorNeutralForeground3}`,
+                fontSize: "20px",
+                boxSizing: "border-box",
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx7(Caption12, { children: "Editing this message will discard the current response and regenerate from here." }),
+          /* @__PURE__ */ jsxs7("div", { className: styles.userEditActions, children: [
+            /* @__PURE__ */ jsx7(Button4, { appearance: "subtle", onClick: cancelEdit, children: "Cancel" }),
+            /* @__PURE__ */ jsx7(
+              Button4,
+              {
+                appearance: "primary",
+                onClick: saveEdit,
+                disabled: !editDraft.trim(),
+                children: "Save"
+              }
+            )
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx7("div", { className: styles.userBubble, children: /* @__PURE__ */ jsx7(Body15, { children: msg.content.split("\n").map((line, i, arr) => /* @__PURE__ */ jsxs7(React5.Fragment, { children: [
+          line,
+          i < arr.length - 1 && /* @__PURE__ */ jsx7("br", {})
+        ] }, i)) }) }),
+        msg.id && /* @__PURE__ */ jsx7("div", { className: `${styles.userFooter} coral-user-footer`, children: /* @__PURE__ */ jsxs7("div", { className: styles.userActions, children: [
+          copiedKey === `user-${key}` ? /* @__PURE__ */ jsx7("span", { className: styles.copiedBadge, children: /* @__PURE__ */ jsx7(CheckmarkCircle20Filled, {}) }) : /* @__PURE__ */ jsx7(
+            Button4,
+            {
+              onClick: () => onCopyMerged(msg.content, `user-${key}`),
+              title: "Copy message",
+              appearance: "subtle",
+              className: styles.footerIconButton,
+              icon: /* @__PURE__ */ jsx7(Copy, {})
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            Button4,
+            {
+              onClick: () => startEdit(msg),
+              title: "Edit message",
+              appearance: "subtle",
+              className: styles.footerIconButton,
+              icon: /* @__PURE__ */ jsx7(EditIcon, {})
+            }
+          )
+        ] }) })
+      ] })
+    ] }, key);
   };
   const renderAssistantMessage = (msg, index) => {
     const isLatest = index === messages.length - 1;
     const reasoning = isLatest && isTyping ? streamingReasoning : msg.metadata?.reasoning;
     if (msg.type && components?.[msg.type]) {
       const CustomRenderer = components[msg.type];
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx7(
         CustomRenderer,
         {
           message: msg,
@@ -875,131 +1550,197 @@ var ChatMessages = ({
         }
       );
     }
-    return /* @__PURE__ */ jsxs6("div", { children: [
-      reasoning && /* @__PURE__ */ jsx6(
+    const key = msg.id ?? `idx-${index}`;
+    return /* @__PURE__ */ jsxs7("div", { children: [
+      reasoning && /* @__PURE__ */ jsx7(
         Chat_ReasoningBlock_default,
         {
           content: reasoning,
           isStreaming: isLatest && isTyping && !msg.content
         }
       ),
-      /* @__PURE__ */ jsx6(CoralMarkdown, { onNavigate, fontSize, fontFamily, children: msg.content }),
-      isInterrupted && !isTyping && index === messages.length - 1 && /* @__PURE__ */ jsx6(
+      msg.todos && msg.todos.length > 0 && /* @__PURE__ */ jsx7(Chat_TodoList_default, { todos: msg.todos }),
+      /* @__PURE__ */ jsx7(
+        CoralMarkdown,
+        {
+          onNavigate,
+          fontSize,
+          fontFamily,
+          children: msg.content
+        }
+      ),
+      msg.error && /* @__PURE__ */ jsx7(
+        Chat_Error_default,
+        {
+          error: msg.error,
+          onRetry: () => {
+            const userMsg = messages[index - 1];
+            if (userMsg?.role === "user") sendMessage(userMsg.content);
+          }
+        }
+      ),
+      isInterrupted && !isTyping && isLatest && /* @__PURE__ */ jsx7(
         Chat_Callout_default,
         {
           message: "Response was interrupted",
           onRetry: () => sendMessage(lastUserInputRef.current)
         }
       ),
-      !(isTyping && isLatest) && /* @__PURE__ */ jsx6("div", { className: `${styles.assistantFooter} coral-assistant-footer`, children: /* @__PURE__ */ jsxs6("div", { className: styles.assistantActions, children: [
-        copiedIndex === index ? /* @__PURE__ */ jsx6(
-          "span",
-          {
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "32px",
-              height: "32px",
-              color: tokens6.colorPaletteSeafoamForeground2
-            },
-            children: /* @__PURE__ */ jsx6(CheckmarkCircle20Filled, {})
+      !(isTyping && isLatest) && msg.content.trim() && /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: `${styles.assistantFooter} coral-assistant-footer`,
+          style: isLatest ? { opacity: 1 } : void 0,
+          children: /* @__PURE__ */ jsxs7("div", { className: styles.assistantActions, children: [
+            copiedKey === `assistant-${key}` ? /* @__PURE__ */ jsx7("span", { className: styles.copiedBadge, children: /* @__PURE__ */ jsx7(CheckmarkCircle20Filled, {}) }) : /* @__PURE__ */ jsx7(
+              Button4,
+              {
+                onClick: () => onCopyMerged(msg.content, `assistant-${key}`),
+                title: "Copy response",
+                appearance: "subtle",
+                className: styles.footerIconButton,
+                icon: /* @__PURE__ */ jsx7(Copy, {})
+              }
+            ),
+            isLatest && /* @__PURE__ */ jsx7(
+              Button4,
+              {
+                onClick: () => regenerate(msg.id),
+                title: "Regenerate response",
+                appearance: "subtle",
+                className: styles.footerIconButton,
+                icon: /* @__PURE__ */ jsx7(ArrowClockwise, {})
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsx7("div", { className: styles.messages, ref: containerRef, children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: styles.messageWrapper,
+      style: isSidecar ? { padding: "0 8px" } : void 0,
+      children: [
+        messages.map((msg, index) => {
+          if (msg.role === "user") {
+            return renderUserMessage(msg, index);
           }
-        ) : /* @__PURE__ */ jsx6(
-          Button4,
+          const key = msg.id ?? `idx-${index}`;
+          const isLatest = index === messages.length - 1;
+          return /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: `${styles.messageAssistant} coral-message-assistant${isLatest ? " is-latest" : ""}`,
+              children: renderAssistantMessage(msg, index)
+            },
+            key
+          );
+        }),
+        isTyping && /* @__PURE__ */ jsx7(
+          Chat_ThinkingIndicator_default,
           {
-            onClick: () => onCopyMerged(msg.content, index),
-            title: "Copy Response",
-            appearance: "subtle",
-            style: { color: tokens6.colorNeutralForeground3 },
-            icon: /* @__PURE__ */ jsx6(Copy, {})
+            isRetrying,
+            status: thinkingStatus,
+            messages: resolveTaskMessages(streamingStatus)
           }
         ),
-        /* @__PURE__ */ jsx6(
-          Button4,
-          {
-            onClick: () => onFeedback?.(index, "up"),
-            title: "Like",
-            appearance: "subtle",
-            style: { color: tokens6.colorNeutralForeground3 },
-            icon: /* @__PURE__ */ jsx6(Heart, {})
-          }
-        )
-      ] }) })
-    ] });
-  };
-  return /* @__PURE__ */ jsx6("div", { className: styles.messages, ref: containerRef, children: /* @__PURE__ */ jsxs6("div", { className: styles.messageWrapper, children: [
-    messages.map((msg, index) => /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        className: msg.role === "user" ? styles.messageUser : `${styles.messageAssistant} coral-message-assistant${index === messages.length - 1 ? " is-latest" : ""}`,
-        children: [
-          msg.role === "user" && Array.isArray(msg.metadata?.attachments) && /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "6px" }, children: msg.metadata.attachments.map(
-            (a, i) => a.type.startsWith("image/") && a.preview ? /* @__PURE__ */ jsx6(
-              "img",
-              {
-                src: a.preview,
-                alt: a.name,
-                style: { width: 64, height: 64, borderRadius: "var(--borderRadiusMedium)", objectFit: "cover" }
-              },
-              i
-            ) : /* @__PURE__ */ jsxs6(
-              "span",
-              {
-                style: {
-                  fontSize: 12,
-                  padding: "2px 8px",
-                  borderRadius: "var(--borderRadiusSmall)",
-                  backgroundColor: tokens6.colorNeutralBackground3,
-                  color: tokens6.colorNeutralForeground2
-                },
-                children: [
-                  "\u{1F4C4} ",
-                  a.name
-                ]
-              },
-              i
-            )
-          ) }),
-          /* @__PURE__ */ jsx6(Body14, { children: msg.role === "user" ? msg.content.split("\n").map((line, i, arr) => /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
-            line,
-            i < arr.length - 1 && /* @__PURE__ */ jsx6("br", {})
-          ] }, i)) : renderAssistantMessage(msg, index) })
-        ]
-      },
-      msg.id ?? index
-    )),
-    chatError !== null && !isTyping && /* @__PURE__ */ jsx6(
-      Chat_Error_default,
-      {
-        error: chatError,
-        onRetry: () => sendMessage(lastUserInputRef.current)
-      }
-    ),
-    isTyping && /* @__PURE__ */ jsx6(
-      Chat_ThinkingIndicator_default,
-      {
-        isRetrying,
-        status: streamingAgentName ? `${streamingAgentName}...` : thinkingStatus
-      }
-    ),
-    /* @__PURE__ */ jsx6("div", { ref: bottomRef })
-  ] }) });
+        /* @__PURE__ */ jsx7("div", { ref: bottomRef })
+      ]
+    }
+  ) });
 };
 var Chat_Messages_default = ChatMessages;
 
 // src/Chat.Input.tsx
 import {
-  useRef as useRef5,
-  useState as useState5,
+  useRef as useRef6,
+  useState as useState6,
   useEffect as useEffect5,
   forwardRef,
   useImperativeHandle
 } from "react";
-import { Body1 as Body15, Button as Button5, Tag, makeStyles as makeStyles7, tokens as tokens7 } from "@fluentui/react-components";
+import { Body1 as Body16, Button as Button6, Tag, makeStyles as makeStyles8, tokens as tokens8 } from "@fluentui/react-components";
 import { Dismiss, Send, Stop } from "@coral-ai/bundleicons";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var useStyles7 = makeStyles7({
+
+// src/Chat.AttachButton.tsx
+import { useRef as useRef5 } from "react";
+import {
+  Button as Button5,
+  Menu,
+  MenuTrigger,
+  MenuPopover,
+  MenuList,
+  MenuItem
+} from "@fluentui/react-components";
+import { Add, DocumentAdd, ImageAdd } from "@coral-ai/bundleicons";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var ChatAttachButton = ({
+  types = ["files", "photos"]
+}) => {
+  const { addAttachments } = useChatContext();
+  const fileRef = useRef5(null);
+  const photoRef = useRef5(null);
+  const showFiles = types.includes("files");
+  const showPhotos = types.includes("photos");
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    showFiles && /* @__PURE__ */ jsx8(
+      "input",
+      {
+        ref: fileRef,
+        type: "file",
+        hidden: true,
+        multiple: true,
+        onChange: (e) => {
+          if (e.target.files) addAttachments([...e.target.files]);
+          e.target.value = "";
+        }
+      }
+    ),
+    showPhotos && /* @__PURE__ */ jsx8(
+      "input",
+      {
+        ref: photoRef,
+        type: "file",
+        hidden: true,
+        multiple: true,
+        accept: "image/*",
+        onChange: (e) => {
+          if (e.target.files) addAttachments([...e.target.files]);
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs8(Menu, { children: [
+      /* @__PURE__ */ jsx8(MenuTrigger, { children: /* @__PURE__ */ jsx8(Button5, { appearance: "subtle", icon: /* @__PURE__ */ jsx8(Add, {}) }) }),
+      /* @__PURE__ */ jsx8(MenuPopover, { children: /* @__PURE__ */ jsx8(MenuList, { children: types.map(
+        (t) => t === "files" ? /* @__PURE__ */ jsx8(
+          MenuItem,
+          {
+            icon: /* @__PURE__ */ jsx8(DocumentAdd, {}),
+            onClick: () => fileRef.current?.click(),
+            children: "Add files"
+          },
+          "files"
+        ) : /* @__PURE__ */ jsx8(
+          MenuItem,
+          {
+            icon: /* @__PURE__ */ jsx8(ImageAdd, {}),
+            onClick: () => photoRef.current?.click(),
+            children: "Add photos"
+          },
+          "photos"
+        )
+      ) }) })
+    ] })
+  ] });
+};
+var Chat_AttachButton_default = ChatAttachButton;
+
+// src/Chat.Input.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var useStyles8 = makeStyles8({
   wrapper: {
     width: "100%",
     margin: "0 auto"
@@ -1019,7 +1760,7 @@ var useStyles7 = makeStyles7({
     overflow: "hidden"
   },
   cardFocused: {
-    boxShadow: tokens7.shadow28
+    boxShadow: tokens8.shadow28
   },
   cardDisabled: {
     opacity: "0.3",
@@ -1038,7 +1779,7 @@ var useStyles7 = makeStyles7({
     height: "128px",
     borderRadius: "var(--borderRadiusMedium)",
     overflow: "hidden",
-    border: `1px solid ${tokens7.colorNeutralStroke2}`,
+    border: `1px solid ${tokens8.colorNeutralStroke2}`,
     backgroundColor: "var(--colorNeutralBackground3)",
     display: "flex",
     flexDirection: "column"
@@ -1124,18 +1865,20 @@ var ChatInput = forwardRef(
     actionsStart,
     actionsEnd,
     attachments: attachmentsProp,
-    removeAttachment: removeAttachmentProp
+    removeAttachment: removeAttachmentProp,
+    allowedAttachments: allowedAttachmentsProp
   }, ref) => {
-    const styles = useStyles7();
-    const [isFocused, setIsFocused] = useState5(false);
-    const textareaRef = useRef5(null);
-    const containerRef = useRef5(null);
+    const styles = useStyles8();
+    const [isFocused, setIsFocused] = useState6(false);
+    const textareaRef = useRef6(null);
+    const containerRef = useRef6(null);
     useImperativeHandle(ref, () => textareaRef.current);
     const ctx = useChatContext();
     const isInsideCanvas = ctx.setInput !== void 0;
     const attachments = isInsideCanvas ? ctx.attachments : attachmentsProp ?? [];
     const removeAttachment = isInsideCanvas ? ctx.removeAttachment : removeAttachmentProp ?? (() => {
     });
+    const allowedAttachments = allowedAttachmentsProp ?? (isInsideCanvas ? ctx.allowedAttachments : void 0);
     const value = valueProp ?? (isInsideCanvas ? ctx.input : "");
     const onChange = onChangeProp ?? (isInsideCanvas ? ctx.setInput : () => {
     });
@@ -1170,53 +1913,53 @@ var ChatInput = forwardRef(
       observer.observe(el);
       return () => observer.disconnect();
     }, []);
-    const sendStopButton = isInsideCanvas ? ctx.isTyping ? /* @__PURE__ */ jsx7(
-      Button5,
+    const sendStopButton = isInsideCanvas ? ctx.isTyping ? /* @__PURE__ */ jsx9(
+      Button6,
       {
         appearance: "transparent",
         onClick: () => {
           ctx.shouldStopRef.current = true;
           ctx.onStop?.();
         },
-        icon: /* @__PURE__ */ jsx7(Stop, {}),
+        icon: /* @__PURE__ */ jsx9(Stop, {}),
         style: { cursor: "default" }
       }
-    ) : /* @__PURE__ */ jsx7(
-      Button5,
+    ) : /* @__PURE__ */ jsx9(
+      Button6,
       {
         appearance: "transparent",
         onClick: () => ctx.sendMessage(),
-        icon: /* @__PURE__ */ jsx7(Send, {}),
+        icon: /* @__PURE__ */ jsx9(Send, {}),
         disabled: !value.trim(),
         style: { cursor: "default" }
       }
     ) : null;
-    return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: styles.wrapper, style, children: /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsx9("div", { ref: containerRef, className: styles.wrapper, style, children: /* @__PURE__ */ jsxs9(
       "div",
       {
         className: `${styles.card}${isFocused ? ` ${styles.cardFocused}` : ""}${disabled ? ` ${styles.cardDisabled}` : ""}`,
         style: {
-          border: isFocused ? `1px solid ${tokens7.colorNeutralStroke1}` : `1px solid ${tokens7.colorNeutralStroke2}`
+          border: isFocused ? `1px solid ${tokens8.colorNeutralStroke1}` : `1px solid ${tokens8.colorNeutralStroke2}`
         },
         children: [
-          attachments.length > 0 && /* @__PURE__ */ jsx7("div", { className: styles.attachmentsRow, children: attachments.map((a) => {
+          attachments.length > 0 && /* @__PURE__ */ jsx9("div", { className: styles.attachmentsRow, children: attachments.map((a) => {
             const ext = a.file.name.split(".").pop()?.toUpperCase() ?? "FILE";
-            return /* @__PURE__ */ jsxs7("div", { className: styles.attachmentItem, children: [
-              a.preview ? /* @__PURE__ */ jsx7(
+            return /* @__PURE__ */ jsxs9("div", { className: styles.attachmentItem, children: [
+              a.preview ? /* @__PURE__ */ jsx9(
                 "img",
                 {
                   src: a.preview,
                   alt: a.file.name,
                   className: styles.attachmentImage
                 }
-              ) : /* @__PURE__ */ jsxs7("div", { className: styles.attachmentFile, children: [
-                /* @__PURE__ */ jsx7(Body15, { className: styles.attachmentFileName, children: a.file.name }),
-                /* @__PURE__ */ jsx7(Tag, { appearance: "outline", size: "small", children: ext })
+              ) : /* @__PURE__ */ jsxs9("div", { className: styles.attachmentFile, children: [
+                /* @__PURE__ */ jsx9(Body16, { className: styles.attachmentFileName, children: a.file.name }),
+                /* @__PURE__ */ jsx9(Tag, { appearance: "outline", size: "small", children: ext })
               ] }),
-              /* @__PURE__ */ jsx7(
-                Button5,
+              /* @__PURE__ */ jsx9(
+                Button6,
                 {
-                  icon: /* @__PURE__ */ jsx7(Dismiss, {}),
+                  icon: /* @__PURE__ */ jsx9(Dismiss, {}),
                   size: "small",
                   onClick: () => removeAttachment(a.id),
                   className: styles.attachmentDismiss
@@ -1224,7 +1967,7 @@ var ChatInput = forwardRef(
               )
             ] }, a.id);
           }) }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "textarea",
             {
               disabled,
@@ -1244,14 +1987,17 @@ var ChatInput = forwardRef(
               className: styles.textarea
             }
           ),
-          /* @__PURE__ */ jsxs7("div", { className: styles.toolbar, children: [
-            /* @__PURE__ */ jsx7("div", { className: styles.toolbarSide, children: actionsStart }),
-            /* @__PURE__ */ jsxs7("div", { className: styles.toolbarSide, children: [
+          /* @__PURE__ */ jsxs9("div", { className: styles.toolbar, children: [
+            /* @__PURE__ */ jsxs9("div", { className: styles.toolbarSide, children: [
+              allowedAttachments && allowedAttachments.length > 0 && /* @__PURE__ */ jsx9(Chat_AttachButton_default, { types: allowedAttachments }),
+              actionsStart
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: styles.toolbarSide, children: [
               actionsEnd,
               sendStopButton
             ] })
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx9(
             "span",
             {
               className: `${styles.focusBar} ${isFocused ? styles.focusBarVisible : styles.focusBarHidden}`
@@ -1264,9 +2010,112 @@ var ChatInput = forwardRef(
 );
 var Chat_Input_default = ChatInput;
 
+// src/Chat.Approval.tsx
+import { Body1 as Body17, Body1Strong, Button as Button7, Caption1 as Caption13, makeStyles as makeStyles9, tokens as tokens9 } from "@fluentui/react-components";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var useStyles9 = makeStyles9({
+  root: {
+    width: "100%",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    padding: "12px 14px",
+    marginBottom: "8px",
+    borderRadius: "var(--borderRadiusXLarge)",
+    backgroundColor: "var(--colorNeutralBackgroundAlpha2)",
+    border: `1px solid ${tokens9.colorNeutralStroke2}`
+  },
+  header: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px"
+  },
+  description: {
+    color: tokens9.colorNeutralForeground3
+  },
+  optionsRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px"
+  },
+  optionsColumn: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px"
+  },
+  optionStacked: {
+    justifyContent: "flex-start"
+  },
+  hint: {
+    color: tokens9.colorNeutralForeground3
+    // fontStyle: "italic",
+  }
+});
+function shouldStackVertically(options) {
+  if (options.length > 3) return true;
+  const totalLength = options.reduce((sum, o) => sum + o.label.length, 0);
+  if (totalLength > 40) return true;
+  if (options.some((o) => !!o.description)) return true;
+  return false;
+}
+var ChatApproval = ({
+  approval: approvalProp,
+  onSelect: onSelectProp,
+  disabled = false,
+  className,
+  style
+}) => {
+  const styles = useStyles9();
+  const ctx = useChatContext();
+  const approval = approvalProp ?? ctx.pendingApproval;
+  if (!approval) return null;
+  const onSelect = onSelectProp ?? ((optionId) => ctx.resolveApproval(approval.id, optionId));
+  const answeredId = approval.answer?.optionId;
+  const isAnswered = answeredId !== void 0;
+  const awaitingFreeform = ctx.awaitingFreeformApproval?.approvalId === approval.id ? ctx.awaitingFreeformApproval : null;
+  const stack = shouldStackVertically(approval.options);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `${styles.root}${className ? ` ${className}` : ""}`,
+      style,
+      role: "group",
+      "aria-label": approval.question,
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: styles.header, children: [
+          /* @__PURE__ */ jsx10(Body1Strong, { children: approval.question }),
+          approval.description && /* @__PURE__ */ jsx10(Body17, { className: styles.description, children: approval.description })
+        ] }),
+        /* @__PURE__ */ jsx10("div", { className: stack ? styles.optionsColumn : styles.optionsRow, children: approval.options.map((opt) => {
+          const selected = answeredId === opt.id || awaitingFreeform?.optionId === opt.id;
+          const baseAppearance = opt.appearance ?? (opt.freeform ? "subtle" : "outline");
+          const appearance = selected ? "primary" : baseAppearance;
+          return /* @__PURE__ */ jsx10(
+            Button7,
+            {
+              appearance,
+              disabled: disabled || isAnswered,
+              onClick: () => onSelect(opt.id),
+              className: stack ? styles.optionStacked : void 0,
+              style: {
+                height: "40px"
+              },
+              children: opt.label
+            },
+            opt.id
+          );
+        }) }),
+        awaitingFreeform && !isAnswered && /* @__PURE__ */ jsx10(Caption13, { className: styles.hint, children: "Type your reply in the message box below." })
+      ]
+    }
+  );
+};
+var Chat_Approval_default = ChatApproval;
+
 // src/Chat.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var useStyles8 = makeStyles8({
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var useStyles10 = makeStyles10({
   emptySlot: {
     width: "100%",
     maxWidth: "768px",
@@ -1295,50 +2144,52 @@ var useStyles8 = makeStyles8({
     maxWidth: "768px",
     padding: "0 16px 16px 16px",
     boxSizing: "border-box"
-  },
-  starterRow: {
-    display: "flex",
-    flexWrap: "wrap",
-    justifyContent: "center",
-    gap: "6px",
-    width: "100%",
-    maxWidth: "768px",
-    margin: "0 auto",
-    padding: "0 16px",
-    boxSizing: "border-box",
-    overflow: "hidden"
   }
 });
+var remapFontSizeForSurface = (size, surface) => {
+  if (surface === "panel-right" && (size === void 0 || size === "default")) {
+    return "small";
+  }
+  return size;
+};
 var ChatLayout = ({
-  emptyState,
-  promptStarters,
+  welcomeMessage,
   surfaceMotion,
   placeholder,
   disabled,
   actionsStart,
   actionsEnd,
   components,
-  onFeedback,
   onCopy,
   onNavigate,
   fontSize,
   fontFamily
 }) => {
-  const styles = useStyles8();
-  const { messages, isTyping, sendMessage } = useChatContext();
+  const welcomeIsFill = welcomeMessage !== void 0 && typeof welcomeMessage !== "string";
+  const welcomeNode = typeof welcomeMessage === "string" ? /* @__PURE__ */ jsx11(Title3, { children: welcomeMessage }) : welcomeMessage;
+  const styles = useStyles10();
+  const surfaceProbeRef = useRef7(null);
+  const [surface, setSurface] = useState7(null);
+  useLayoutEffect3(() => {
+    const el = surfaceProbeRef.current?.closest("[data-coral-surface]");
+    setSurface(el?.getAttribute("data-coral-surface") ?? null);
+  }, []);
+  const effectiveFontSize = remapFontSizeForSurface(fontSize, surface);
+  const { messages, isTyping, pendingApproval, awaitingFreeformApproval } = useChatContext();
   const empty = messages.every((m) => m.role === "system") && !isTyping;
+  const approvalLocksInput = pendingApproval !== null && awaitingFreeformApproval === null;
+  const inputDisabled = disabled || approvalLocksInput;
   const motionEnabled = surfaceMotion !== null;
   const curve = motionTokens.curveDecelerateMax;
   const spacerTransition = motionEnabled ? `flex-grow 300ms ${curve}` : "none";
   const gapTransition = motionEnabled ? `height 300ms ${curve}` : "none";
-  const starterTransition = motionEnabled ? `opacity 300ms ${curve}, max-height 300ms ${curve}, padding-bottom 300ms ${curve}` : "none";
-  const hasStarters = !!promptStarters && promptStarters.length > 0;
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(
       "div",
       {
+        ref: surfaceProbeRef,
         style: {
-          flexGrow: empty ? 1 : 0,
+          flexGrow: empty && !welcomeIsFill ? 1 : 0,
           flexShrink: 1,
           flexBasis: 0,
           minHeight: 0,
@@ -1346,79 +2197,80 @@ var ChatLayout = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       "div",
       {
         className: styles.contentArea,
         style: {
-          flex: empty ? "none" : 1,
-          overflow: empty ? "visible" : "hidden"
+          flex: empty && !welcomeIsFill ? "none" : 1,
+          overflow: empty && !welcomeIsFill ? "visible" : "hidden"
         },
-        children: empty ? /* @__PURE__ */ jsx8("div", { className: styles.emptySlot, children: emptyState }) : /* @__PURE__ */ jsx8(
+        children: empty ? /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: styles.emptySlot,
+            style: welcomeIsFill ? {
+              flex: 1,
+              justifyContent: "center",
+              alignContent: "center"
+            } : void 0,
+            children: welcomeNode
+          }
+        ) : /* @__PURE__ */ jsx11(
           Chat_Messages_default,
           {
             components,
-            onFeedback,
             onCopy,
             onNavigate,
-            fontSize,
+            fontSize: effectiveFontSize,
             fontFamily
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx8("div", { style: { height: empty ? 24 : 0, transition: gapTransition } }),
-    /* @__PURE__ */ jsx8("div", { className: styles.inputRow, children: /* @__PURE__ */ jsx8("div", { className: styles.inputInner, children: /* @__PURE__ */ jsx8(
-      Chat_Input_default,
-      {
-        placeholder,
-        disabled,
-        actionsStart,
-        actionsEnd
-      }
-    ) }) }),
-    hasStarters && /* @__PURE__ */ jsx8(
-      "div",
-      {
-        className: styles.starterRow,
-        style: {
-          opacity: empty ? 1 : 0,
-          maxHeight: empty ? 160 : 0,
-          paddingBottom: empty ? 16 : 0,
-          pointerEvents: empty ? "auto" : "none",
-          transition: starterTransition,
-          gap: "8px"
-        },
-        "aria-hidden": !empty,
-        children: promptStarters.map((p) => /* @__PURE__ */ jsx8(
-          InteractionTag,
-          {
-            appearance: "outline",
-            onClick: () => sendMessage(p),
-            tabIndex: empty ? 0 : -1,
-            children: /* @__PURE__ */ jsx8(InteractionTagPrimary, { children: p })
-          },
-          p
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11("div", { style: { height: empty ? 24 : 0, transition: gapTransition } }),
+    /* @__PURE__ */ jsx11("div", { className: styles.inputRow, children: /* @__PURE__ */ jsxs11("div", { className: styles.inputInner, style: { flexDirection: "column" }, children: [
+      pendingApproval && /* @__PURE__ */ jsx11(Chat_Approval_default, {}),
+      /* @__PURE__ */ jsx11(
+        Chat_Input_default,
+        {
+          placeholder: approvalLocksInput ? "Choose an option above to continue..." : placeholder,
+          disabled: inputDisabled,
+          actionsStart,
+          actionsEnd
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
-          flexGrow: empty ? 1 : 0,
+          flexGrow: empty && !welcomeIsFill ? 1 : 0,
           flexShrink: 1,
           flexBasis: 0,
           minHeight: 0,
           transition: spacerTransition
         }
       }
+    ),
+    /* @__PURE__ */ jsx11(
+      Caption14,
+      {
+        style: {
+          display: "flex",
+          width: "100%",
+          justifyContent: "center",
+          height: "32px",
+          opacity: 0.5
+        },
+        children: "AI makes mistakes. Check outputs."
+      }
     )
   ] });
 };
 var Chat = ({
-  agent,
-  agents,
+  api,
+  allowedAttachments,
   conversationId,
   initialMessages,
   systemPrompt,
@@ -1429,11 +2281,9 @@ var Chat = ({
   autoSendMessage,
   thinkingStatus,
   onStop,
-  emptyState,
-  promptStarters,
+  welcomeMessage,
   surfaceMotion,
   components,
-  onFeedback,
   onCopy,
   onNavigate,
   placeholder,
@@ -1443,11 +2293,14 @@ var Chat = ({
   fontSize,
   fontFamily
 }) => {
-  return /* @__PURE__ */ jsx8(
+  const chatConfig = useCoralConfig()?.chat;
+  const resolvedApi = api ?? chatConfig?.api;
+  const resolvedAllowedAttachments = allowedAttachments ?? chatConfig?.attachments;
+  return /* @__PURE__ */ jsx11(
     Chat_Canvas_default,
     {
-      agent,
-      agents,
+      api: resolvedApi,
+      allowedAttachments: resolvedAllowedAttachments,
       conversationId,
       initialMessages,
       systemPrompt,
@@ -1458,18 +2311,16 @@ var Chat = ({
       autoSendMessage,
       thinkingStatus,
       onStop,
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx11(
         ChatLayout,
         {
-          emptyState,
-          promptStarters,
+          welcomeMessage,
           surfaceMotion,
           placeholder,
           disabled,
           actionsStart,
           actionsEnd,
           components,
-          onFeedback,
           onCopy,
           onNavigate,
           fontSize,
@@ -1483,11 +2334,18 @@ var Chat_default = Chat;
 
 // src/createHandler.ts
 function createHandler({ endpoint, headers }) {
-  return async function* (input, history, context) {
+  return async function* (input, history, files) {
+    const attachments = await Promise.all(
+      files.map(async (file) => ({
+        name: file.name,
+        mediaType: file.type,
+        data: await fileToBase64(file)
+      }))
+    );
     const res = await fetch(endpoint, {
       method: "POST",
       headers: { "Content-Type": "application/json", ...headers },
-      body: JSON.stringify({ input, history, context })
+      body: JSON.stringify({ input, history, attachments })
     });
     if (!res.ok || !res.body) {
       throw Object.assign(new Error(`${res.status} ${res.statusText}`), {
@@ -1518,20 +2376,407 @@ function createHandler({ endpoint, headers }) {
   };
 }
 
+// src/Chat.Agent.ts
+var UPDATE_TODOS_TOOL = {
+  name: "update_todos",
+  description: "Display or update the multi-step task plan shown to the user as an inline checklist. Call this when you begin a task that takes 3 or more distinct steps, and again every time a step changes status. Always send the COMPLETE list of todos \u2014 it replaces the previous one. Keep exactly one item 'in_progress' at a time.",
+  parameters: {
+    type: "object",
+    properties: {
+      todos: {
+        type: "array",
+        description: "The full task list, in order.",
+        items: {
+          type: "object",
+          properties: {
+            content: {
+              type: "string",
+              description: "Imperative title, e.g. 'Optimize images'."
+            },
+            activeForm: {
+              type: "string",
+              description: "Present-tense title shown while this step is in progress, e.g. 'Optimizing images'."
+            },
+            status: {
+              type: "string",
+              enum: ["pending", "in_progress", "completed"]
+            }
+          },
+          required: ["content", "status"]
+        }
+      }
+    },
+    required: ["todos"]
+  }
+};
+var REQUEST_APPROVAL_TOOL = {
+  name: "request_approval",
+  description: "Pause and ask the user to approve an action or choose between options before continuing. The conversation halts until the user responds \u2014 their choice comes back as this tool's result. Use this before any consequential or irreversible action (deleting, sending, purchasing, etc).",
+  parameters: {
+    type: "object",
+    properties: {
+      question: {
+        type: "string",
+        description: "The question or action to confirm."
+      },
+      description: {
+        type: "string",
+        description: "Optional extra context shown below the question."
+      },
+      options: {
+        type: "array",
+        description: "The choices offered to the user.",
+        items: {
+          type: "object",
+          properties: {
+            id: { type: "string" },
+            label: { type: "string" },
+            description: { type: "string" },
+            freeform: {
+              type: "boolean",
+              description: "If true, choosing this option lets the user type a free-text reply instead of a canned choice."
+            }
+          },
+          required: ["id", "label"]
+        }
+      }
+    },
+    required: ["question", "options"]
+  }
+};
+function createMemoryStore() {
+  const map = /* @__PURE__ */ new Map();
+  return {
+    get: (id) => map.get(id),
+    set: (id, snap) => {
+      map.set(id, snap);
+    },
+    delete: (id) => {
+      map.delete(id);
+    }
+  };
+}
+function historyToAgentMessages(history) {
+  const out = [];
+  for (const m of history) {
+    if (m.role === "user") out.push({ role: "user", content: m.content });
+    else if (m.role === "assistant") out.push({ role: "assistant", content: m.content });
+  }
+  return out;
+}
+function extractTodos(input) {
+  const todos = input?.todos;
+  if (!Array.isArray(todos)) return [];
+  return todos.map((t, i) => {
+    const o = t ?? {};
+    return {
+      id: typeof o.id === "string" ? o.id : `todo-${i}`,
+      content: String(o.content ?? ""),
+      activeForm: typeof o.activeForm === "string" ? o.activeForm : void 0,
+      status: o.status === "in_progress" || o.status === "completed" ? o.status : "pending"
+    };
+  });
+}
+function buildApproval(tc) {
+  const input = tc.input ?? {};
+  const rawOptions = Array.isArray(input.options) ? input.options : [];
+  const options = rawOptions.map((o, i) => {
+    const obj = o ?? {};
+    return {
+      id: typeof obj.id === "string" ? obj.id : `opt-${i}`,
+      label: String(obj.label ?? `Option ${i + 1}`),
+      description: typeof obj.description === "string" ? obj.description : void 0,
+      freeform: obj.freeform === true ? true : void 0
+    };
+  });
+  return {
+    // The tool-call id is the approval id — Coral round-trips it as
+    // metadata.approvalId, which is the session-store key on resume.
+    id: tc.id,
+    question: String(input.question ?? "Approve?"),
+    description: typeof input.description === "string" ? input.description : void 0,
+    options
+  };
+}
+function createAgentHandler(options) {
+  const { callModel, system, tools = [], maxSteps = 8 } = options;
+  const store = options.sessionStore ?? createMemoryStore();
+  const customByName = new Map(tools.map((t) => [t.spec.name, t]));
+  const toolSpecs = [
+    UPDATE_TODOS_TOOL,
+    REQUEST_APPROVAL_TOOL,
+    ...tools.map((t) => t.spec)
+  ];
+  return async function* (_input, history, attachments) {
+    const sysFromHistory = history.filter((m) => m.role === "system").map((m) => m.content);
+    const effectiveSystem = [system, ...sysFromHistory].filter(Boolean).join("\n\n") || void 0;
+    const last = history[history.length - 1];
+    let messages;
+    let firstCallAttachments;
+    const resumeId = last?.role === "user" && last.type === "approval_response" && typeof last.metadata?.approvalId === "string" ? last.metadata.approvalId : void 0;
+    const snapshot = resumeId ? await store.get(resumeId) : void 0;
+    if (resumeId && snapshot) {
+      await store.delete(resumeId);
+      const meta = last.metadata;
+      const answer = typeof meta.text === "string" && meta.text || typeof meta.label === "string" && meta.label || last.content;
+      messages = [
+        ...snapshot.messages,
+        {
+          role: "tool",
+          toolCallId: snapshot.pendingToolCallId,
+          content: `The user chose: ${answer}`
+        }
+      ];
+    } else {
+      messages = historyToAgentMessages(history);
+      firstCallAttachments = attachments.length > 0 ? attachments : void 0;
+    }
+    for (let step = 0; step < maxSteps; step++) {
+      const events = callModel({
+        system: effectiveSystem,
+        messages,
+        tools: toolSpecs,
+        attachments: step === 0 ? firstCallAttachments : void 0
+      });
+      let assistantText = "";
+      let assistantRaw;
+      const toolCalls = [];
+      for await (const ev of events) {
+        if (ev.type === "text") {
+          assistantText += ev.delta;
+          yield ev.delta;
+        } else if (ev.type === "reasoning") {
+          yield { type: "reasoning", content: ev.delta };
+        } else if (ev.type === "tool_call") {
+          toolCalls.push(ev.toolCall);
+        } else if (ev.type === "raw") {
+          assistantRaw = ev.raw;
+        }
+      }
+      messages.push({
+        role: "assistant",
+        content: assistantText,
+        ...toolCalls.length > 0 ? { toolCalls } : {},
+        ...assistantRaw !== void 0 ? { raw: assistantRaw } : {}
+      });
+      if (toolCalls.length === 0) return;
+      for (const tc of toolCalls) {
+        if (tc.name === UPDATE_TODOS_TOOL.name) {
+          yield { type: "todos", todos: extractTodos(tc.input) };
+          messages.push({
+            role: "tool",
+            toolCallId: tc.id,
+            content: "Task list updated and shown to the user."
+          });
+        } else if (tc.name === REQUEST_APPROVAL_TOOL.name) {
+          yield { type: "approval", approval: buildApproval(tc) };
+          await store.set(tc.id, { messages, pendingToolCallId: tc.id });
+          return;
+        } else {
+          const tool = customByName.get(tc.name);
+          let content;
+          if (!tool) {
+            content = `Error: unknown tool "${tc.name}".`;
+          } else {
+            try {
+              content = (await tool.execute(tc.input)).content;
+            } catch (err) {
+              content = `Error: ${err instanceof Error ? err.message : String(err)}`;
+            }
+          }
+          messages.push({ role: "tool", toolCallId: tc.id, content });
+        }
+      }
+    }
+    yield "\n\n_(Reached the tool-step limit for this turn.)_";
+  };
+}
+
+// src/Chat.Threads.tsx
+import * as React9 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ChatThreadsContext = React9.createContext(
+  null
+);
+function useChatThreads() {
+  const value = React9.useContext(ChatThreadsContext);
+  if (!value) {
+    throw new Error(
+      "useChatThreads must be used inside <ChatThreadsProvider>."
+    );
+  }
+  return value;
+}
+function createMemoryThreadsAdapter(initialThreads = []) {
+  let threads = [...initialThreads];
+  return {
+    list: () => threads,
+    get: (id) => threads.find((t) => t.id === id),
+    create: (initial) => {
+      const thread = {
+        id: initial?.id ?? crypto.randomUUID(),
+        title: initial?.title ?? "New chat",
+        messages: initial?.messages ?? [],
+        createdAt: Date.now(),
+        updatedAt: Date.now()
+      };
+      threads = [thread, ...threads];
+      return thread;
+    },
+    save: (thread) => {
+      const idx = threads.findIndex((t) => t.id === thread.id);
+      const next = { ...thread, updatedAt: Date.now() };
+      threads = idx >= 0 ? threads.map((t, i) => i === idx ? next : t) : [next, ...threads];
+    },
+    rename: (id, newTitle) => {
+      threads = threads.map(
+        (t) => t.id === id ? { ...t, title: newTitle, updatedAt: Date.now() } : t
+      );
+    },
+    remove: (id) => {
+      threads = threads.filter((t) => t.id !== id);
+    }
+  };
+}
+function ChatThreadsProvider({
+  adapter: providedAdapter,
+  activeThreadId: controlledId,
+  defaultActiveThreadId,
+  onActiveThreadChange,
+  children
+}) {
+  const adapter = React9.useMemo(
+    () => providedAdapter ?? createMemoryThreadsAdapter(),
+    [providedAdapter]
+  );
+  const [threads, setThreads] = React9.useState([]);
+  const [uncontrolledId, setUncontrolledId] = React9.useState(
+    defaultActiveThreadId
+  );
+  const [isLoading, setIsLoading] = React9.useState(true);
+  const isControlled = controlledId !== void 0;
+  const activeThreadId = isControlled ? controlledId : uncontrolledId;
+  const setActiveThreadId = React9.useCallback(
+    (id) => {
+      if (!isControlled) setUncontrolledId(id);
+      onActiveThreadChange?.(id);
+    },
+    [isControlled, onActiveThreadChange]
+  );
+  React9.useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setIsLoading(true);
+      const result = await adapter.list();
+      if (cancelled) return;
+      setThreads(result);
+      setIsLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [adapter]);
+  const createThread = React9.useCallback(
+    async (initial) => {
+      const thread = await adapter.create(initial);
+      setThreads((prev) => [thread, ...prev.filter((t) => t.id !== thread.id)]);
+      return thread;
+    },
+    [adapter]
+  );
+  const renameThread = React9.useCallback(
+    async (id, newTitle) => {
+      await adapter.rename(id, newTitle);
+      setThreads(
+        (prev) => prev.map(
+          (t) => t.id === id ? { ...t, title: newTitle, updatedAt: Date.now() } : t
+        )
+      );
+    },
+    [adapter]
+  );
+  const removeThread = React9.useCallback(
+    async (id) => {
+      await adapter.remove(id);
+      setThreads((prev) => prev.filter((t) => t.id !== id));
+      if (activeThreadId === id) setActiveThreadId(void 0);
+    },
+    [adapter, activeThreadId, setActiveThreadId]
+  );
+  const threadsRef = React9.useRef(threads);
+  threadsRef.current = threads;
+  const updateThreadMessages = React9.useCallback(
+    (id, messages) => {
+      const existing = threadsRef.current.find((t) => t.id === id);
+      if (!existing) return;
+      const next = {
+        ...existing,
+        messages,
+        updatedAt: Date.now()
+      };
+      setThreads((prev) => prev.map((t) => t.id === id ? next : t));
+      void adapter.save(next);
+    },
+    [adapter]
+  );
+  const activeThread = React9.useMemo(
+    () => threads.find((t) => t.id === activeThreadId),
+    [threads, activeThreadId]
+  );
+  const value = React9.useMemo(
+    () => ({
+      threads,
+      activeThreadId,
+      activeThread,
+      setActiveThreadId,
+      createThread,
+      renameThread,
+      removeThread,
+      updateThreadMessages,
+      isLoading
+    }),
+    [
+      threads,
+      activeThreadId,
+      activeThread,
+      setActiveThreadId,
+      createThread,
+      renameThread,
+      removeThread,
+      updateThreadMessages,
+      isLoading
+    ]
+  );
+  return /* @__PURE__ */ jsx12(ChatThreadsContext.Provider, { value, children });
+}
+
 // src/index.ts
 var Chat2 = Object.assign(Chat_default, {
   Canvas: Chat_Canvas_default,
   Messages: Chat_Messages_default,
   Input: Chat_Input_default,
   Error: Chat_Error_default,
-  Callout: Chat_Callout_default
+  Callout: Chat_Callout_default,
+  Approval: Chat_Approval_default,
+  TodoList: Chat_TodoList_default,
+  AttachButton: Chat_AttachButton_default,
+  ThinkingIndicator: Chat_ThinkingIndicator_default
 });
 var normalizeChatError2 = normalizeChatError;
 var createHandler2 = createHandler;
 export {
   Chat2 as Chat,
+  ChatThreadsProvider,
+  DEFAULT_TASK_MESSAGES,
+  REQUEST_APPROVAL_TOOL,
+  UPDATE_TODOS_TOOL,
+  createAgentHandler,
   createHandler2 as createHandler,
+  createMemoryThreadsAdapter,
+  fileToBase64,
   normalizeChatError2 as normalizeChatError,
-  useChatContext
+  resolveTaskMessages,
+  useChatContext,
+  useChatThreads
 };
 //# sourceMappingURL=index.js.map