@ai-me-chat/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -13,20 +13,35 @@ function useAIMeContext() {
 
 // src/provider.tsx
 import { jsx } from "react/jsx-runtime";
-function AIMeProvider({ endpoint, headers, onAction, children }) {
-  return /* @__PURE__ */ jsx(AIMeContext, { value: { endpoint, headers, onAction }, children });
+function AIMeProvider({ endpoint, headers, onAction, stuckTimeout, children }) {
+  return /* @__PURE__ */ jsx(AIMeContext, { value: { endpoint, headers, onAction, stuckTimeout }, children });
 }
 
 // src/chat.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useId } from "react";
+import { useState as useState2, useRef as useRef3, useEffect as useEffect3, useCallback as useCallback3, useId as useId2, useMemo as useMemo2, Fragment } from "react";
 
 // src/use-ai-me.ts
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 var STORAGE_KEY = "ai-me-messages";
+function cleanAssistantText(text) {
+  return text.replace(/<tools>[\s\S]*?<\/tools>/g, "").trim();
+}
+function trimIncompleteToolCalls(messages) {
+  if (messages.length === 0) return messages;
+  const last = messages[messages.length - 1];
+  if (last.role !== "assistant") return messages;
+  const hasToolCall = last.parts.some((p) => p.type === "tool-call");
+  const hasToolResult = last.parts.some((p) => p.type === "tool-result");
+  if (hasToolCall && !hasToolResult) {
+    return messages.slice(0, -1);
+  }
+  return messages;
+}
 function useAIMe() {
-  const { endpoint, headers } = useAIMeContext();
+  const { endpoint, headers, stuckTimeout: configuredTimeout } = useAIMeContext();
+  const stuckTimeout = configuredTimeout ?? 3e4;
   const [input, setInput] = useState("");
   const initialized = useRef(false);
   const chat = useChat({
@@ -35,6 +50,24 @@ function useAIMe() {
       headers
     })
   });
+  const messages = useMemo(() => {
+    return chat.messages.map((m) => {
+      if (m.role !== "assistant") return m;
+      let changed = false;
+      const cleanedParts = m.parts.map((p) => {
+        if (p.type !== "text") return p;
+        const cleaned = cleanAssistantText(p.text);
+        if (cleaned === p.text) return p;
+        changed = true;
+        return { ...p, text: cleaned };
+      });
+      if (!changed) return m;
+      const nonEmptyParts = cleanedParts.filter(
+        (p) => p.type !== "text" || p.text.length > 0
+      );
+      return { ...m, parts: nonEmptyParts };
+    });
+  }, [chat.messages]);
   useEffect(() => {
     if (initialized.current) return;
     initialized.current = true;
@@ -43,7 +76,10 @@ function useAIMe() {
       if (stored) {
         const parsed = JSON.parse(stored);
         if (Array.isArray(parsed) && parsed.length > 0) {
-          chat.setMessages(parsed);
+          const cleaned = trimIncompleteToolCalls(parsed);
+          if (cleaned.length > 0) {
+            chat.setMessages(cleaned);
+          }
         }
       }
     } catch {
@@ -60,6 +96,14 @@ function useAIMe() {
     } catch {
     }
   }, [chat.messages]);
+  useEffect(() => {
+    if (stuckTimeout <= 0) return;
+    if (chat.status !== "submitted") return;
+    const timer = setTimeout(() => {
+      chat.stop();
+    }, stuckTimeout);
+    return () => clearTimeout(timer);
+  }, [chat.status, stuckTimeout, chat.stop]);
   const handleInputChange = useCallback(
     (e) => {
       setInput(e.target.value);
@@ -84,7 +128,7 @@ function useAIMe() {
   }, [chat]);
   return {
     /** Conversation messages */
-    messages: chat.messages,
+    messages,
     /** Current input value */
     input,
     /** Set input value */
@@ -104,7 +148,9 @@ function useAIMe() {
     /** Set messages */
     setMessages: chat.setMessages,
     /** Clear all messages and session storage */
-    clearMessages
+    clearMessages,
+    /** Approve or reject a pending tool call (for confirmation flow) */
+    addToolApprovalResponse: chat.addToolApprovalResponse
   };
 }
 
@@ -306,8 +352,197 @@ var linkStyle = {
   textUnderlineOffset: "2px"
 };
 
+// src/confirm.tsx
+import { useRef as useRef2, useEffect as useEffect2, useId, useCallback as useCallback2 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function AIMeConfirm({
+  action,
+  description,
+  parameters,
+  onConfirm,
+  onReject
+}) {
+  const dialogRef = useRef2(null);
+  const cancelButtonRef = useRef2(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onReject();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+      const focusable = dialog.querySelectorAll(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    },
+    [onReject]
+  );
+  useEffect2(() => {
+    const previousFocus = document.activeElement;
+    cancelButtonRef.current?.focus();
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      previousFocus?.focus();
+    };
+  }, [handleKeyDown]);
+  const overlayStyle = {
+    ...defaultThemeVars,
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e4,
+    fontFamily: "var(--ai-me-font)"
+  };
+  const dialogStyle = {
+    backgroundColor: "var(--ai-me-bg)",
+    borderRadius: "var(--ai-me-radius)",
+    padding: 24,
+    maxWidth: 420,
+    width: "90%",
+    boxShadow: "var(--ai-me-shadow)",
+    color: "var(--ai-me-text)"
+  };
+  const focusStyle = {
+    outline: "2px solid transparent",
+    outlineOffset: 2
+  };
+  function applyFocusRing(el) {
+    el.style.outline = "2px solid var(--ai-me-primary)";
+    el.style.outlineOffset = "2px";
+  }
+  function removeFocusRing(el) {
+    el.style.outline = "2px solid transparent";
+    el.style.outlineOffset = "2px";
+  }
+  return (
+    // Overlay is presentational — role and aria go on the inner dialog
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: overlayStyle,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onReject();
+        },
+        "aria-hidden": "false",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: dialogRef,
+            style: dialogStyle,
+            role: "alertdialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            tabIndex: -1,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx3("h3", { id: titleId, style: { margin: "0 0 8px", fontSize: 16 }, children: "Confirm Action" }),
+              /* @__PURE__ */ jsx3("p", { style: { margin: "0 0 4px", fontSize: 14, fontWeight: 600 }, children: action }),
+              /* @__PURE__ */ jsx3(
+                "p",
+                {
+                  id: descriptionId,
+                  style: {
+                    margin: "0 0 16px",
+                    fontSize: 13,
+                    color: "var(--ai-me-text-secondary)"
+                  },
+                  children: description
+                }
+              ),
+              parameters && Object.keys(parameters).length > 0 && /* @__PURE__ */ jsx3(
+                "pre",
+                {
+                  style: {
+                    margin: "0 0 16px",
+                    padding: 12,
+                    backgroundColor: "var(--ai-me-bg-secondary)",
+                    borderRadius: 8,
+                    fontSize: 12,
+                    overflow: "auto",
+                    maxHeight: 200,
+                    border: "1px solid var(--ai-me-border)"
+                  },
+                  children: JSON.stringify(parameters, null, 2)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    ref: cancelButtonRef,
+                    type: "button",
+                    onClick: onReject,
+                    style: {
+                      padding: "8px 16px",
+                      border: "1px solid var(--ai-me-border)",
+                      borderRadius: 8,
+                      backgroundColor: "var(--ai-me-bg)",
+                      color: "var(--ai-me-text)",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      ...focusStyle
+                    },
+                    onFocus: (e) => applyFocusRing(e.currentTarget),
+                    onBlur: (e) => removeFocusRing(e.currentTarget),
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onConfirm,
+                    style: {
+                      padding: "8px 16px",
+                      border: "none",
+                      borderRadius: 8,
+                      // #fff on var(--ai-me-primary) = #6366f1 → contrast ≈ 4.6:1 (passes AA)
+                      backgroundColor: "var(--ai-me-primary)",
+                      color: "#fff",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      ...focusStyle
+                    },
+                    onFocus: (e) => applyFocusRing(e.currentTarget),
+                    onBlur: (e) => removeFocusRing(e.currentTarget),
+                    children: "Confirm"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+
 // src/chat.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var srOnly = {
   position: "absolute",
   width: 1,
@@ -319,6 +554,12 @@ var srOnly = {
   whiteSpace: "nowrap",
   borderWidth: 0
 };
+function DefaultAIIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5Z" }),
+    /* @__PURE__ */ jsx4("path", { d: "M19 11l.75 2.25L22 14l-2.25.75L19 17l-.75-2.25L16 14l2.25-.75Z" })
+  ] });
+}
 function AIMeChat({
   position = "bottom-right",
   theme,
@@ -327,15 +568,17 @@ function AIMeChat({
   defaultOpen = false,
   onToggle,
   onToolComplete,
-  onMessageComplete
+  onMessageComplete,
+  triggerIcon,
+  renderConfirmation
 }) {
   const [open, setOpen] = useState2(defaultOpen);
-  const messagesEndRef = useRef2(null);
-  const inputRef = useRef2(null);
-  const panelRef = useRef2(null);
-  const triggerRef = useRef2(null);
-  const firedToolResults = useRef2(/* @__PURE__ */ new Set());
-  const prevStatus = useRef2(null);
+  const messagesEndRef = useRef3(null);
+  const inputRef = useRef3(null);
+  const panelRef = useRef3(null);
+  const triggerRef = useRef3(null);
+  const firedToolResults = useRef3(/* @__PURE__ */ new Set());
+  const prevStatus = useRef3(null);
   const {
     messages,
     input,
@@ -343,17 +586,18 @@ function AIMeChat({
     handleSubmit,
     status,
     error,
-    setInput
+    setInput,
+    addToolApprovalResponse
   } = useAIMe();
-  const titleId = useId();
-  const messagesId = useId();
+  const titleId = useId2();
+  const messagesId = useId2();
   const isInline = position === "inline";
-  const toggleOpen = useCallback2(() => {
+  const toggleOpen = useCallback3(() => {
     const next = !open;
     setOpen(next);
     onToggle?.(next);
   }, [open, onToggle]);
-  useEffect2(() => {
+  useEffect3(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === ".") {
         e.preventDefault();
@@ -363,10 +607,10 @@ function AIMeChat({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleOpen]);
-  useEffect2(() => {
+  useEffect3(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!onToolComplete) return;
     for (const message of messages) {
       for (const part of message.parts) {
@@ -382,7 +626,7 @@ function AIMeChat({
       }
     }
   }, [messages, onToolComplete]);
-  useEffect2(() => {
+  useEffect3(() => {
     const prev = prevStatus.current;
     prevStatus.current = status;
     if (!onMessageComplete) return;
@@ -404,7 +648,7 @@ function AIMeChat({
       toolCalls: toolCalls.length > 0 ? toolCalls : void 0
     });
   }, [status, messages, onMessageComplete]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (open) {
       panelRef.current?.focus();
       setTimeout(() => inputRef.current?.focus(), 0);
@@ -412,7 +656,7 @@ function AIMeChat({
       triggerRef.current?.focus();
     }
   }, [open]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open || isInline) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") {
@@ -444,6 +688,20 @@ function AIMeChat({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, isInline, toggleOpen]);
+  const pendingToolCalls = useMemo2(() => {
+    const resultIds = /* @__PURE__ */ new Set();
+    const toolCalls = [];
+    for (const m of messages) {
+      for (const p of m.parts) {
+        if (p.type === "tool-result") {
+          resultIds.add(p.toolCallId);
+        } else if (p.type === "tool-call") {
+          toolCalls.push(p);
+        }
+      }
+    }
+    return toolCalls.filter((tc) => !resultIds.has(tc.toolCallId));
+  }, [messages]);
   const themeVars = {
     ...defaultThemeVars,
     ...themeToVars(theme)
@@ -499,8 +757,8 @@ function AIMeChat({
     zIndex: 9999
   };
   const isStreaming = status === "submitted" || status === "streaming";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
       "button",
       {
         ref: triggerRef,
@@ -510,10 +768,10 @@ function AIMeChat({
         "aria-expanded": open,
         "aria-controls": isInline ? void 0 : "ai-me-chat-panel",
         type: "button",
-        children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u{1F4AC}" })
+        children: /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: triggerIcon ?? /* @__PURE__ */ jsx4(DefaultAIIcon, {}) })
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       "div",
       {
         id: "ai-me-chat-panel",
@@ -525,7 +783,7 @@ function AIMeChat({
         "aria-busy": isStreaming,
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs2(
             "div",
             {
               style: {
@@ -537,8 +795,8 @@ function AIMeChat({
                 backgroundColor: "var(--ai-me-bg-secondary)"
               },
               children: [
-                /* @__PURE__ */ jsx3("span", { id: titleId, style: { fontWeight: 600, fontSize: 14 }, children: "AI Assistant" }),
-                !isInline && /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4("span", { id: titleId, style: { fontWeight: 600, fontSize: 14 }, children: "AI Assistant" }),
+                !isInline && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     onClick: toggleOpen,
@@ -562,13 +820,13 @@ function AIMeChat({
                     },
                     "aria-label": "Close chat",
                     type: "button",
-                    children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2715" })
+                    children: /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u2715" })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "a",
             {
               href: "#ai-me-chat-input",
@@ -598,7 +856,7 @@ function AIMeChat({
               children: "Skip to message input"
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs2(
             "div",
             {
               id: messagesId,
@@ -614,9 +872,9 @@ function AIMeChat({
                 gap: 12
               },
               children: [
-                messages.length === 0 && /* @__PURE__ */ jsxs("div", { style: { color: "var(--ai-me-text-secondary)", fontSize: 14 }, children: [
-                  /* @__PURE__ */ jsx3("p", { children: welcomeMessage }),
-                  suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ jsxs(
+                messages.length === 0 && /* @__PURE__ */ jsxs2("div", { style: { color: "var(--ai-me-text-secondary)", fontSize: 14 }, children: [
+                  /* @__PURE__ */ jsx4("p", { children: welcomeMessage }),
+                  suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ jsxs2(
                     "div",
                     {
                       style: {
@@ -626,8 +884,8 @@ function AIMeChat({
                         gap: 8
                       },
                       children: [
-                        /* @__PURE__ */ jsx3("p", { style: { margin: "0 0 4px", fontSize: 12, fontWeight: 500 }, children: "Suggested questions:" }),
-                        suggestedPrompts.map((prompt) => /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx4("p", { style: { margin: "0 0 4px", fontSize: 12, fontWeight: 500 }, children: "Suggested questions:" }),
+                        suggestedPrompts.map((prompt) => /* @__PURE__ */ jsx4(
                           "button",
                           {
                             type: "button",
@@ -661,31 +919,35 @@ function AIMeChat({
                     }
                   )
                 ] }),
-                messages.map((m) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      alignSelf: m.role === "user" ? "flex-end" : "flex-start",
-                      maxWidth: "85%",
-                      padding: "8px 12px",
-                      borderRadius: 8,
-                      backgroundColor: m.role === "user" ? "var(--ai-me-primary)" : "var(--ai-me-bg-secondary)",
-                      color: m.role === "user" ? "#fff" : "var(--ai-me-text)",
-                      fontSize: 14,
-                      lineHeight: 1.5,
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-word"
+                messages.map((m) => {
+                  const hasTextContent = m.parts.some((p) => p.type === "text");
+                  if (!hasTextContent && m.role === "assistant") return null;
+                  return /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      style: {
+                        alignSelf: m.role === "user" ? "flex-end" : "flex-start",
+                        maxWidth: "85%",
+                        padding: "8px 12px",
+                        borderRadius: 8,
+                        backgroundColor: m.role === "user" ? "var(--ai-me-primary)" : "var(--ai-me-bg-secondary)",
+                        color: m.role === "user" ? "#fff" : "var(--ai-me-text)",
+                        fontSize: 14,
+                        lineHeight: 1.5,
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-word"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx4("span", { style: srOnly, children: m.role === "user" ? "You: " : "Assistant: " }),
+                        m.parts.map(
+                          (p, i) => p.type === "text" ? /* @__PURE__ */ jsx4("span", { children: m.role === "assistant" ? renderMarkdown(p.text) : p.text }, i) : null
+                        )
+                      ]
                     },
-                    children: [
-                      /* @__PURE__ */ jsx3("span", { style: srOnly, children: m.role === "user" ? "You: " : "Assistant: " }),
-                      m.parts.map(
-                        (p, i) => p.type === "text" ? /* @__PURE__ */ jsx3("span", { children: m.role === "assistant" ? renderMarkdown(p.text) : p.text }, i) : null
-                      )
-                    ]
-                  },
-                  m.id
-                )),
-                status === "submitted" && /* @__PURE__ */ jsx3(
+                    m.id
+                  );
+                }),
+                status === "submitted" && /* @__PURE__ */ jsx4(
                   "div",
                   {
                     "aria-label": "Assistant is thinking",
@@ -694,10 +956,10 @@ function AIMeChat({
                       color: "var(--ai-me-text-secondary)",
                       fontSize: 13
                     },
-                    children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "Thinking\u2026" })
+                    children: /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "Thinking\u2026" })
                   }
                 ),
-                error && /* @__PURE__ */ jsx3(
+                error && /* @__PURE__ */ jsx4(
                   "div",
                   {
                     role: "alert",
@@ -713,11 +975,11 @@ function AIMeChat({
                     children: "Something went wrong. Please try again."
                   }
                 ),
-                /* @__PURE__ */ jsx3("div", { ref: messagesEndRef, "aria-hidden": "true" })
+                /* @__PURE__ */ jsx4("div", { ref: messagesEndRef, "aria-hidden": "true" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs2(
             "form",
             {
               onSubmit: handleSubmit,
@@ -728,7 +990,7 @@ function AIMeChat({
                 gap: 8
               },
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "label",
                   {
                     htmlFor: "ai-me-chat-input",
@@ -736,7 +998,7 @@ function AIMeChat({
                     children: "Message to AI Assistant"
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     id: "ai-me-chat-input",
@@ -767,7 +1029,7 @@ function AIMeChat({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "submit",
@@ -802,13 +1064,38 @@ function AIMeChat({
           )
         ]
       }
-    )
+    ),
+    pendingToolCalls.map((tc) => {
+      const onConfirm = () => addToolApprovalResponse({ id: tc.toolCallId, approved: true });
+      const onCancel = () => addToolApprovalResponse({ id: tc.toolCallId, approved: false, reason: "User cancelled" });
+      return renderConfirmation ? /* @__PURE__ */ jsx4(Fragment, { children: renderConfirmation({
+        tool: {
+          name: tc.toolName,
+          httpMethod: "",
+          path: "",
+          description: tc.toolName
+        },
+        params: tc.args,
+        onConfirm,
+        onCancel
+      }) }, tc.toolCallId) : /* @__PURE__ */ jsx4(
+        AIMeConfirm,
+        {
+          action: tc.toolName,
+          description: `Execute ${tc.toolName}?`,
+          parameters: tc.args,
+          onConfirm,
+          onReject: onCancel
+        },
+        tc.toolCallId
+      );
+    })
   ] });
 }
 
 // src/command-palette.tsx
-import { useState as useState3, useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3, useId as useId2 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState as useState3, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback4, useId as useId3 } from "react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultCommands = [
   {
     id: "help",
@@ -855,14 +1142,14 @@ function AIMeCommandPalette({
   const [open, setOpen] = useState3(false);
   const [query, setQuery] = useState3("");
   const [selectedIndex, setSelectedIndex] = useState3(0);
-  const inputRef = useRef3(null);
-  const listRef = useRef3(null);
-  const dialogRef = useRef3(null);
-  const previousFocusRef = useRef3(null);
+  const inputRef = useRef4(null);
+  const listRef = useRef4(null);
+  const dialogRef = useRef4(null);
+  const previousFocusRef = useRef4(null);
   const { sendMessage } = useAIMe();
-  const titleId = useId2();
-  const inputId = useId2();
-  const toggle = useCallback3(
+  const titleId = useId3();
+  const inputId = useId3();
+  const toggle = useCallback4(
     (next) => {
       setOpen(next);
       setQuery("");
@@ -871,7 +1158,7 @@ function AIMeCommandPalette({
     },
     [onToggle]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     function handleKeyDown2(e) {
       const metaMatch = shortcut.meta ? e.metaKey : true;
       const ctrlMatch = shortcut.ctrl ? e.ctrlKey : !shortcut.meta ? e.ctrlKey : true;
@@ -886,7 +1173,7 @@ function AIMeCommandPalette({
     window.addEventListener("keydown", handleKeyDown2);
     return () => window.removeEventListener("keydown", handleKeyDown2);
   }, [open, shortcut, toggle]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (open) {
       setTimeout(() => inputRef.current?.focus(), 0);
     } else {
@@ -896,7 +1183,7 @@ function AIMeCommandPalette({
       }
     }
   }, [open]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     function handleFocusTrap(e) {
       if (e.key !== "Tab") return;
@@ -926,12 +1213,12 @@ function AIMeCommandPalette({
   const filtered = query.trim() ? commands.filter(
     (cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()) || cmd.description?.toLowerCase().includes(query.toLowerCase()) || cmd.category?.toLowerCase().includes(query.toLowerCase())
   ) : commands;
-  useEffect3(() => {
+  useEffect4(() => {
     if (selectedIndex >= filtered.length) {
       setSelectedIndex(Math.max(0, filtered.length - 1));
     }
   }, [filtered.length, selectedIndex]);
-  useEffect3(() => {
+  useEffect4(() => {
     const list = listRef.current;
     if (!list) return;
     const selected = list.children[selectedIndex];
@@ -976,8 +1263,8 @@ function AIMeCommandPalette({
     grouped.get(cat).push(cmd);
   }
   let flatIndex = 0;
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx5(
       "div",
       {
         onClick: () => toggle(false),
@@ -990,7 +1277,7 @@ function AIMeCommandPalette({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs3(
       "div",
       {
         ref: dialogRef,
@@ -1018,10 +1305,10 @@ function AIMeCommandPalette({
         "aria-labelledby": titleId,
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ jsx4("h2", { id: titleId, style: srOnly2, children: "Command Palette" }),
-          /* @__PURE__ */ jsxs2("div", { style: { padding: "12px 16px", borderBottom: "1px solid var(--ai-me-border)" }, children: [
-            /* @__PURE__ */ jsx4("label", { htmlFor: inputId, style: srOnly2, children: "Search commands or ask AI" }),
-            /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5("h2", { id: titleId, style: srOnly2, children: "Command Palette" }),
+          /* @__PURE__ */ jsxs3("div", { style: { padding: "12px 16px", borderBottom: "1px solid var(--ai-me-border)" }, children: [
+            /* @__PURE__ */ jsx5("label", { htmlFor: inputId, style: srOnly2, children: "Search commands or ask AI" }),
+            /* @__PURE__ */ jsx5(
               "input",
               {
                 id: inputId,
@@ -1059,7 +1346,7 @@ function AIMeCommandPalette({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "div",
             {
               id: "ai-me-cmd-listbox",
@@ -1068,7 +1355,7 @@ function AIMeCommandPalette({
               role: "listbox",
               "aria-label": "Commands",
               children: [
-                filtered.length === 0 && query.trim() && /* @__PURE__ */ jsxs2(
+                filtered.length === 0 && query.trim() && /* @__PURE__ */ jsxs3(
                   "div",
                   {
                     role: "option",
@@ -1088,8 +1375,8 @@ function AIMeCommandPalette({
                 ),
                 Array.from(grouped.entries()).map(([category, items]) => (
                   // role="group" with aria-label for the category heading
-                  /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": category, children: [
-                    /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": category, children: [
+                    /* @__PURE__ */ jsx5(
                       "div",
                       {
                         "aria-hidden": "true",
@@ -1107,7 +1394,7 @@ function AIMeCommandPalette({
                     items.map((cmd) => {
                       const idx = flatIndex++;
                       const isSelected = idx === selectedIndex;
-                      return /* @__PURE__ */ jsxs2(
+                      return /* @__PURE__ */ jsxs3(
                         "div",
                         {
                           id: `cmd-${cmd.id}`,
@@ -1140,10 +1427,10 @@ function AIMeCommandPalette({
                           },
                           children: [
                             cmd.icon && // Icon is decorative — label comes from cmd.label
-                            /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 }, children: cmd.icon }),
-                            /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
-                              /* @__PURE__ */ jsx4("div", { style: { fontSize: 14, fontWeight: 500 }, children: cmd.label }),
-                              cmd.description && /* @__PURE__ */ jsx4(
+                            /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 }, children: cmd.icon }),
+                            /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
+                              /* @__PURE__ */ jsx5("div", { style: { fontSize: 14, fontWeight: 500 }, children: cmd.label }),
+                              cmd.description && /* @__PURE__ */ jsx5(
                                 "div",
                                 {
                                   style: {
@@ -1167,7 +1454,7 @@ function AIMeCommandPalette({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "div",
             {
               "aria-hidden": "true",
@@ -1180,9 +1467,9 @@ function AIMeCommandPalette({
                 gap: 16
               },
               children: [
-                /* @__PURE__ */ jsx4("span", { children: "\u2191\u2193 Navigate" }),
-                /* @__PURE__ */ jsx4("span", { children: "\u21B5 Select" }),
-                /* @__PURE__ */ jsx4("span", { children: "Esc Close" })
+                /* @__PURE__ */ jsx5("span", { children: "\u2191\u2193 Navigate" }),
+                /* @__PURE__ */ jsx5("span", { children: "\u21B5 Select" }),
+                /* @__PURE__ */ jsx5("span", { children: "Esc Close" })
               ]
             }
           )
@@ -1191,200 +1478,12 @@ function AIMeCommandPalette({
     )
   ] });
 }
-
-// src/confirm.tsx
-import { useRef as useRef4, useEffect as useEffect4, useId as useId3, useCallback as useCallback4 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function AIMeConfirm({
-  action,
-  description,
-  parameters,
-  onConfirm,
-  onReject
-}) {
-  const dialogRef = useRef4(null);
-  const cancelButtonRef = useRef4(null);
-  const titleId = useId3();
-  const descriptionId = useId3();
-  const handleKeyDown = useCallback4(
-    (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onReject();
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const dialog = dialogRef.current;
-      if (!dialog) return;
-      const focusable = dialog.querySelectorAll(
-        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-      );
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (e.shiftKey) {
-        if (document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else {
-        if (document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    },
-    [onReject]
-  );
-  useEffect4(() => {
-    const previousFocus = document.activeElement;
-    cancelButtonRef.current?.focus();
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      previousFocus?.focus();
-    };
-  }, [handleKeyDown]);
-  const overlayStyle = {
-    ...defaultThemeVars,
-    position: "fixed",
-    inset: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.4)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e4,
-    fontFamily: "var(--ai-me-font)"
-  };
-  const dialogStyle = {
-    backgroundColor: "var(--ai-me-bg)",
-    borderRadius: "var(--ai-me-radius)",
-    padding: 24,
-    maxWidth: 420,
-    width: "90%",
-    boxShadow: "var(--ai-me-shadow)",
-    color: "var(--ai-me-text)"
-  };
-  const focusStyle = {
-    outline: "2px solid transparent",
-    outlineOffset: 2
-  };
-  function applyFocusRing(el) {
-    el.style.outline = "2px solid var(--ai-me-primary)";
-    el.style.outlineOffset = "2px";
-  }
-  function removeFocusRing(el) {
-    el.style.outline = "2px solid transparent";
-    el.style.outlineOffset = "2px";
-  }
-  return (
-    // Overlay is presentational — role and aria go on the inner dialog
-    /* @__PURE__ */ jsx5(
-      "div",
-      {
-        style: overlayStyle,
-        onClick: (e) => {
-          if (e.target === e.currentTarget) onReject();
-        },
-        "aria-hidden": "false",
-        children: /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            ref: dialogRef,
-            style: dialogStyle,
-            role: "alertdialog",
-            "aria-modal": "true",
-            "aria-labelledby": titleId,
-            "aria-describedby": descriptionId,
-            tabIndex: -1,
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsx5("h3", { id: titleId, style: { margin: "0 0 8px", fontSize: 16 }, children: "Confirm Action" }),
-              /* @__PURE__ */ jsx5("p", { style: { margin: "0 0 4px", fontSize: 14, fontWeight: 600 }, children: action }),
-              /* @__PURE__ */ jsx5(
-                "p",
-                {
-                  id: descriptionId,
-                  style: {
-                    margin: "0 0 16px",
-                    fontSize: 13,
-                    color: "var(--ai-me-text-secondary)"
-                  },
-                  children: description
-                }
-              ),
-              parameters && Object.keys(parameters).length > 0 && /* @__PURE__ */ jsx5(
-                "pre",
-                {
-                  style: {
-                    margin: "0 0 16px",
-                    padding: 12,
-                    backgroundColor: "var(--ai-me-bg-secondary)",
-                    borderRadius: 8,
-                    fontSize: 12,
-                    overflow: "auto",
-                    maxHeight: 200,
-                    border: "1px solid var(--ai-me-border)"
-                  },
-                  children: JSON.stringify(parameters, null, 2)
-                }
-              ),
-              /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    ref: cancelButtonRef,
-                    type: "button",
-                    onClick: onReject,
-                    style: {
-                      padding: "8px 16px",
-                      border: "1px solid var(--ai-me-border)",
-                      borderRadius: 8,
-                      backgroundColor: "var(--ai-me-bg)",
-                      color: "var(--ai-me-text)",
-                      cursor: "pointer",
-                      fontSize: 14,
-                      ...focusStyle
-                    },
-                    onFocus: (e) => applyFocusRing(e.currentTarget),
-                    onBlur: (e) => removeFocusRing(e.currentTarget),
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: onConfirm,
-                    style: {
-                      padding: "8px 16px",
-                      border: "none",
-                      borderRadius: 8,
-                      // #fff on var(--ai-me-primary) = #6366f1 → contrast ≈ 4.6:1 (passes AA)
-                      backgroundColor: "var(--ai-me-primary)",
-                      color: "#fff",
-                      cursor: "pointer",
-                      fontSize: 14,
-                      ...focusStyle
-                    },
-                    onFocus: (e) => applyFocusRing(e.currentTarget),
-                    onBlur: (e) => removeFocusRing(e.currentTarget),
-                    children: "Confirm"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    )
-  );
-}
 export {
   AIMeChat,
   AIMeCommandPalette,
   AIMeConfirm,
   AIMeProvider,
+  cleanAssistantText,
   renderMarkdown,
   useAIMe,
   useAIMeContext