@ai-me-chat/react 0.0.1 → 0.2.0

package/dist/index.d.ts

@@ -3,15 +3,59 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as ai from 'ai';
 
+/** Payload passed to the `onAction` callback */
+interface AIMeAction {
+    /** Action type — e.g. "navigate", "prefill", "open-modal" */
+    type: string;
+    /** Flexible additional payload supplied by the AI tool */
+    [key: string]: unknown;
+}
+interface AIMeContextValue {
+    /** API endpoint for AI-Me handler */
+    endpoint: string;
+    /** Additional headers to send with requests */
+    headers?: Record<string, string>;
+    /**
+     * Optional callback for client-side action intents emitted by the AI.
+     * Use this to handle navigation, form pre-fill, modal opening, etc.
+     * without the AI making an API call directly.
+     */
+    onAction?: (action: AIMeAction) => void;
+}
+declare function useAIMeContext(): AIMeContextValue;
+
 interface AIMeProviderProps {
     /** API endpoint for AI-Me handler */
     endpoint: string;
     /** Optional: additional headers to send with requests */
     headers?: Record<string, string>;
+    /**
+     * Optional callback for client-side action intents emitted by the AI.
+     *
+     * The AI can emit structured actions (e.g. "navigate", "prefill",
+     * "open-modal") that your app handles without making an API call.
+     * Wire the corresponding `__navigate` / `__prefill` tools in your
+     * AI-Me handler to produce these actions, then consume them here.
+     *
+     * @example
+     * ```tsx
+     * <AIMeProvider
+     *   endpoint="/api/ai-me"
+     *   onAction={(action) => {
+     *     if (action.type === "navigate") {
+     *       router.push(action.href as string);
+     *     }
+     *   }}
+     * >
+     *   {children}
+     * </AIMeProvider>
+     * ```
+     */
+    onAction?: (action: AIMeAction) => void;
     /** Child components */
     children: ReactNode;
 }
-declare function AIMeProvider({ endpoint, headers, children }: AIMeProviderProps): react_jsx_runtime.JSX.Element;
+declare function AIMeProvider({ endpoint, headers, onAction, children }: AIMeProviderProps): react_jsx_runtime.JSX.Element;
 
 interface AIMeTheme {
     primaryColor?: string;
@@ -21,6 +65,25 @@ interface AIMeTheme {
     fontFamily?: string;
 }
 
+/** Tool execution result passed to onToolComplete */
+interface ToolCompleteEvent {
+    /** Tool (function) name */
+    name: string;
+    /** HTTP method used, if available from the tool result */
+    httpMethod?: string;
+    /** API path called, if available from the tool result */
+    path?: string;
+    /** Raw result returned by the tool */
+    result: unknown;
+    /** Whether the tool required user confirmation */
+    requiresConfirmation?: boolean;
+}
+/** Completed assistant message passed to onMessageComplete */
+interface MessageCompleteEvent {
+    role: string;
+    content: string;
+    toolCalls?: unknown[];
+}
 interface AIMeChatProps {
     /** Position of chat panel */
     position?: "bottom-right" | "bottom-left" | "inline";
@@ -34,8 +97,61 @@ interface AIMeChatProps {
     defaultOpen?: boolean;
     /** Callback when chat opens/closes */
     onToggle?: (open: boolean) => void;
+    /**
+     * Fired after each tool execution completes (after the API call returns).
+     * Use this to trigger client-side data refreshes when the AI mutates data.
+     */
+    onToolComplete?: (tool: ToolCompleteEvent) => void;
+    /**
+     * Fired when the assistant finishes a full response (status transitions
+     * from "streaming" to "ready").
+     */
+    onMessageComplete?: (message: MessageCompleteEvent) => void;
+    /**
+     * Custom renderer for the tool confirmation dialog.
+     *
+     * When provided, AI-Me will call this function instead of showing the
+     * default confirmation UI. Return any React node — a modal, an inline
+     * card, a drawer, etc.
+     *
+     * If not provided, the built-in `<AIMeConfirm>` dialog is used.
+     *
+     * @example
+     * ```tsx
+     * <AIMeChat
+     *   renderConfirmation={({ tool, params, onConfirm, onCancel }) => (
+     *     <MyCustomConfirmDialog
+     *       title={`Run ${tool.name}?`}
+     *       description={tool.description}
+     *       params={params}
+     *       onConfirm={onConfirm}
+     *       onCancel={onCancel}
+     *     />
+     *   )}
+     * />
+     * ```
+     */
+    renderConfirmation?: (props: {
+        /** Metadata about the tool that is about to be executed */
+        tool: {
+            /** Tool (function) name */
+            name: string;
+            /** HTTP method the tool maps to, e.g. "POST" */
+            httpMethod: string;
+            /** API path the tool will call, e.g. "/api/projects" */
+            path: string;
+            /** Human-readable description of what the tool does */
+            description: string;
+        };
+        /** Resolved parameters the tool will be called with */
+        params: Record<string, unknown>;
+        /** Call to proceed with the tool execution */
+        onConfirm: () => void;
+        /** Call to abort without executing the tool */
+        onCancel: () => void;
+    }) => ReactNode;
 }
-declare function AIMeChat({ position, theme, welcomeMessage, suggestedPrompts, defaultOpen, onToggle, }: AIMeChatProps): react_jsx_runtime.JSX.Element;
+declare function AIMeChat({ position, theme, welcomeMessage, suggestedPrompts, defaultOpen, onToggle, onToolComplete, onMessageComplete, }: AIMeChatProps): react_jsx_runtime.JSX.Element;
 
 interface AIMeCommandPaletteProps {
     /** List of available commands/actions */
@@ -129,14 +245,6 @@ declare function useAIMe(): {
     clearMessages: () => void;
 };
 
-interface AIMeContextValue {
-    /** API endpoint for AI-Me handler */
-    endpoint: string;
-    /** Additional headers to send with requests */
-    headers?: Record<string, string>;
-}
-declare function useAIMeContext(): AIMeContextValue;
-
 /**
  * Lightweight inline markdown renderer for chat messages.
  * Supports: **bold**, *italic*, `code`, ```code blocks```, [links](url), - lists

package/dist/index.js

@@ -13,8 +13,8 @@ function useAIMeContext() {
 
 // src/provider.tsx
 import { jsx } from "react/jsx-runtime";
-function AIMeProvider({ endpoint, headers, children }) {
-  return /* @__PURE__ */ jsx(AIMeContext, { value: { endpoint, headers }, children });
+function AIMeProvider({ endpoint, headers, onAction, children }) {
+  return /* @__PURE__ */ jsx(AIMeContext, { value: { endpoint, headers, onAction }, children });
 }
 
 // src/chat.tsx
@@ -325,13 +325,17 @@ function AIMeChat({
   welcomeMessage = "Hi! I can help you navigate and use this app. What would you like to do?",
   suggestedPrompts,
   defaultOpen = false,
-  onToggle
+  onToggle,
+  onToolComplete,
+  onMessageComplete
 }) {
   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 {
     messages,
     input,
@@ -362,6 +366,44 @@ function AIMeChat({
   useEffect2(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
+  useEffect2(() => {
+    if (!onToolComplete) return;
+    for (const message of messages) {
+      for (const part of message.parts) {
+        if (part.type !== "tool-result") continue;
+        const id = part.toolCallId;
+        const dedupeKey = id ?? `${message.id}:${part.type}`;
+        if (firedToolResults.current.has(dedupeKey)) continue;
+        firedToolResults.current.add(dedupeKey);
+        onToolComplete({
+          name: part.toolName ?? "",
+          result: part.result
+        });
+      }
+    }
+  }, [messages, onToolComplete]);
+  useEffect2(() => {
+    const prev = prevStatus.current;
+    prevStatus.current = status;
+    if (!onMessageComplete) return;
+    if (status !== "ready") return;
+    if (prev !== "streaming" && prev !== "submitted") return;
+    let lastAssistant;
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === "assistant") {
+        lastAssistant = messages[i];
+        break;
+      }
+    }
+    if (!lastAssistant) return;
+    const textContent = lastAssistant.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
+    const toolCalls = lastAssistant.parts.filter((p) => p.type === "tool-call");
+    onMessageComplete({
+      role: lastAssistant.role,
+      content: textContent,
+      toolCalls: toolCalls.length > 0 ? toolCalls : void 0
+    });
+  }, [status, messages, onMessageComplete]);
   useEffect2(() => {
     if (open) {
       panelRef.current?.focus();
@@ -424,7 +466,8 @@ function AIMeChat({
     bottom: 24,
     ...position === "bottom-right" ? { right: 24 } : { left: 24 },
     width: 380,
-    maxHeight: "70vh",
+    height: "70vh",
+    maxHeight: 600,
     display: open ? "flex" : "none",
     flexDirection: "column",
     fontFamily: "var(--ai-me-font)",