@cntyclub/agent-react 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -1,213 +1,10 @@
-import * as React from 'react';
-
-/** A structured UI block attached to a message (currently: result tables). */
-interface TableBlock {
-    type: "table";
-    tool_name: string;
-    columns: string[];
-    rows: Record<string, unknown>[];
-    row_count: number;
-    truncated?: boolean;
-    pagination?: Record<string, unknown>;
-}
-type MessageBlock = TableBlock;
-interface ToolCallInfo {
-    id?: string;
-    name?: string;
-    arguments?: Record<string, unknown>;
-}
-interface AgentMessage {
-    id: string;
-    role: "user" | "assistant" | "tool";
-    content: string;
-    created_at: string;
-    blocks?: MessageBlock[];
-    tool_calls?: ToolCallInfo[];
-    tool_name?: string;
-    tool_call_id?: string;
-}
-interface PendingApproval {
-    id: string;
-    tool_name: string;
-    arguments: Record<string, unknown>;
-    created_at: string;
-}
-interface ConversationSummary {
-    id: string;
-    title: string;
-    created_at: string;
-    updated_at: string;
-}
-interface AgentPublicConfig {
-    name: string;
-    description: string;
-    has_mcp: boolean;
-    is_public: boolean;
-}
-interface ChatResponse {
-    status: "success" | "error";
-    message?: string;
-    conversation_id?: string;
-    messages?: AgentMessage[];
-    pending_approvals?: PendingApproval[];
-}
-/** Maps MCP tools to a page in the host app so the agent can navigate alongside chat. */
-interface AgentPageMapping {
-    /** MCP tool names whose execution relates to this page. */
-    tools: string[];
-    /** Host-app route (path) to navigate to, e.g. "/dashboard/target-companies". */
-    route: string;
-    /** Human title shown in navigation hints. */
-    title: string;
-    /**
-     * Optional builder for dynamic routes: receives the tool arguments and
-     * returns the concrete path (e.g. `/dashboard/company/${args.id}`).
-     * Return null to skip navigation for that call.
-     */
-    buildRoute?: (args: Record<string, unknown>) => string | null;
-}
-interface AgentConfig {
-    /** The Agent Mode client ID from the office panel (identifies the agent only). */
-    clientId: string;
-    /** Country Club backend base URL, e.g. https://api.country.club */
-    apiBaseUrl: string;
-    /** Returns the logged-in user's Country Club JWT (or null when logged out). */
-    getAccessToken: () => string | null | Promise<string | null>;
-    /** Display name override; falls back to the backend-configured agent name. */
-    agentName?: string;
-    /** Short line under the title in the panel header. */
-    tagline?: string;
-    /** Suggested prompts shown on the empty state. */
-    suggestions?: string[];
-    /** Navigate the host app (e.g. Next router push). Enables page-follow in popup mode. */
-    navigate?: (path: string) => void;
-    /** Tool → page mappings used for page-follow navigation and hints. */
-    pages?: AgentPageMapping[];
-    /** Widget appearance tweaks. All styling comes from the host's UI-kit theme tokens. */
-    appearance?: {
-        /** Floating button position. Default: "bottom-right". */
-        position?: "bottom-right" | "bottom-left";
-        /** Desktop popup panel size. Defaults: 400 x 640. */
-        panelWidth?: number;
-        panelHeight?: number;
-        /** Hide the floating button (render the panel through your own trigger). */
-        hideLauncher?: boolean;
-    };
-}
-
-declare class AgentApiError extends Error {
-    status: number;
-    constructor(message: string, status: number);
-}
-/**
- * Thin fetch client for the Country Club Agent Mode API.
- *
- * Every request carries the agent client_id (query param — also used by the
- * backend's per-agent CORS middleware, including on preflights) and the
- * logged-in user's bearer token.
- */
-declare class AgentApiClient {
-    private config;
-    constructor(config: AgentConfig);
-    private request;
-    getConfig(): Promise<AgentPublicConfig>;
-    sendMessage(message: string, conversationId?: string | null): Promise<ChatResponse>;
-    resolveApproval(callId: string, approve: boolean): Promise<ChatResponse>;
-    listConversations(): Promise<{
-        conversations: ConversationSummary[];
-    }>;
-    getConversation(conversationId: string): Promise<{
-        conversation: ConversationSummary;
-        messages: ChatResponse["messages"];
-        pending_approvals: ChatResponse["pending_approvals"];
-    }>;
-    deleteConversation(conversationId: string): Promise<void>;
-}
-
-interface AgentChatState {
-    agentInfo: AgentPublicConfig | null;
-    conversationId: string | null;
-    conversations: ConversationSummary[];
-    messages: AgentMessage[];
-    pendingApprovals: PendingApproval[];
-    sending: boolean;
-    resolvingApprovalId: string | null;
-    error: string | null;
-}
-interface AgentChatActions {
-    send: (text: string) => Promise<void>;
-    resolveApproval: (callId: string, approve: boolean) => Promise<void>;
-    newChat: () => void;
-    openConversation: (conversationId: string) => Promise<void>;
-    refreshConversations: () => Promise<void>;
-    deleteConversation: (conversationId: string) => Promise<void>;
-    clearError: () => void;
-}
-/**
- * Headless chat state for an Agent Mode agent: message history, sending,
- * pending write-tool approvals, and conversation management. UI-agnostic.
- */
-declare function useAgentChat(config: AgentConfig): AgentChatState & AgentChatActions;
-
-interface AgentPanelProps {
-    config: AgentConfig;
-    chat: AgentChatState & AgentChatActions;
-    /** Fullscreen "Agent Mode" is active. */
-    agentMode: boolean;
-    /** Hide the expand button (mobile is always fullscreen). */
-    canToggleAgentMode: boolean;
-    onToggleAgentMode: () => void;
-    onClose: () => void;
-    className?: string;
-}
-/**
- * The chat surface shared by the popup panel and fullscreen Agent Mode.
- * Header (title, history, new chat, expand/collapse, close) + messages + input.
- */
-declare function AgentPanel({ agentMode, canToggleAgentMode, chat, className, config, onClose, onToggleAgentMode, }: AgentPanelProps): React.JSX.Element;
-
-interface AgentWidgetProps {
-    config: AgentConfig;
-    /** Controlled open state (optional). */
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}
-/**
- * The embeddable Agent Mode widget.
- *
- * - Closed: a floating round button (bottom-right by default).
- * - Open on desktop: a popup panel anchored to the button, with an
- *   "Agent Mode" button that expands to a fullscreen chat. While in the popup,
- *   the widget can navigate the host app to pages related to the tools the
- *   agent uses (via `config.pages` + `config.navigate`).
- * - Open on mobile: fullscreen from the start.
- *
- * All colors come from the host app's UI-kit theme tokens, so light/dark mode
- * follows the dashboard automatically.
- */
-declare function AgentWidget({ config, onOpenChange, open: controlledOpen }: AgentWidgetProps): React.JSX.Element;
-
-/** Renders one conversation message: user/assistant bubbles or tool results. */
-declare function MessageItem({ message }: {
-    message: AgentMessage;
-}): React.JSX.Element | null;
-
-interface ToolApprovalCardProps {
-    approval: PendingApproval;
-    resolving: boolean;
-    onResolve: (callId: string, approve: boolean) => void;
-}
-/**
- * Approval prompt for a write action the agent wants to perform. The stored
- * arguments are shown so the user knows exactly what will change; nothing runs
- * until they approve.
- */
-declare function ToolApprovalCard({ approval, onResolve, resolving }: ToolApprovalCardProps): React.JSX.Element;
-
-/**
- * Identity helper that gives host apps full type inference/checking when
- * declaring their agent config file.
- */
-declare function defineAgentConfig(config: AgentConfig): AgentConfig;
-
-export { AgentApiClient, AgentApiError, type AgentChatActions, type AgentChatState, type AgentConfig, type AgentMessage, type AgentPageMapping, AgentPanel, type AgentPanelProps, type AgentPublicConfig, AgentWidget, type AgentWidgetProps, type ChatResponse, type ConversationSummary, type MessageBlock, MessageItem, type PendingApproval, type TableBlock, ToolApprovalCard, type ToolApprovalCardProps, type ToolCallInfo, defineAgentConfig, useAgentChat };
+export { AgentApiClient, AgentApiError } from "./api-client";
+export { AgentPanel, type AgentPanelProps } from "./components/agent-panel";
+export { AgentWidget, type AgentWidgetProps } from "./components/agent-widget";
+export { MessageItem } from "./components/message-item";
+export { ToolApprovalCard, type ToolApprovalCardProps } from "./components/tool-approval-card";
+export { defineAgentConfig } from "./config";
+export type { AgentConfig, AgentMessage, AgentModeSchemas, AgentPageMapping, AgentPublicConfig, ApprovalRequest, ChatRequest, ChatResponse, ConversationSummary, MessageBlock, PendingApproval, TableBlock, ToolCallInfo, } from "./types";
+export type { components as AgentModeComponents, operations as AgentModeOperations, paths as AgentModePaths, } from "./api/schema";
+export { useAgentChat, type AgentChatActions, type AgentChatState, } from "./use-agent-chat";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,UAAU,IAAI,mBAAmB,EACjC,UAAU,IAAI,mBAAmB,EACjC,KAAK,IAAI,cAAc,GACxB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,cAAc,GACpB,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
-import { ChatMessage, ChatMessageBubble, Markdown, DataTablePaged, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Button, Spinner, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatTypingIndicator, cn, ChatInput, useMediaQuery, TooltipProvider, Fab } from '@cntyclub/ui-react';
-import { WrenchIcon, CheckCircle2Icon, ShieldAlertIcon, SparklesIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Maximize2Icon, XIcon, Trash2Icon } from 'lucide-react';
+import { ChatMessage, ChatMessageBubble, Markdown, ChatToolChip, DataTablePaged, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Button, Spinner, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, ChatTypingIndicator, cn, ChatInput, useMediaQuery, TooltipProvider, Fab } from '@cntyclub/ui-react';
+import { WrenchIcon, CheckIcon, ShieldAlertIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Maximize2Icon, XIcon, Trash2Icon, SparklesIcon } from 'lucide-react';
 import * as React2 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -89,19 +89,11 @@ function MessageItem({ message }) {
     if (!message.content && requestedTools.length === 0) return null;
     return /* @__PURE__ */ jsxs(ChatMessage, { from: "assistant", children: [
       message.content ? /* @__PURE__ */ jsx(ChatMessageBubble, { from: "assistant", children: /* @__PURE__ */ jsx(Markdown, { children: message.content }) }) : null,
-      requestedTools.map((toolCall) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center gap-1.5 px-1 text-muted-foreground text-xs",
-          children: [
-            /* @__PURE__ */ jsx(WrenchIcon, { className: "size-3" }),
-            "Using ",
-            humanizeToolName(toolCall.name ?? "tool"),
-            "\u2026"
-          ]
-        },
-        toolCall.id ?? toolCall.name
-      ))
+      requestedTools.map((toolCall) => /* @__PURE__ */ jsxs(ChatToolChip, { icon: /* @__PURE__ */ jsx(WrenchIcon, {}), children: [
+        "Using ",
+        humanizeToolName(toolCall.name ?? "tool"),
+        "\u2026"
+      ] }, toolCall.id ?? toolCall.name))
     ] });
   }
   const tableBlocks = (message.blocks ?? []).filter((block) => block.type === "table");
@@ -113,8 +105,7 @@ function MessageItem({ message }) {
       rows: block.rows,
       totalCount: typeof block.pagination?.count === "number" ? block.pagination.count : block.row_count
     }
-  ) }, `${message.id}-${index}`)) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-1 text-muted-foreground text-xs", children: [
-    /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-3" }),
+  ) }, `${message.id}-${index}`)) : /* @__PURE__ */ jsxs(ChatToolChip, { icon: /* @__PURE__ */ jsx(CheckIcon, {}), children: [
     humanizeToolName(message.tool_name ?? "tool"),
     " finished"
   ] }) });
@@ -205,72 +196,74 @@ function AgentPanel({
       ),
       "data-slot": "agent-panel",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 border-border border-b px-3 py-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "size-4" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs(ChatHeader, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx(ChatHeaderAvatar, {}),
+            /* @__PURE__ */ jsxs(ChatHeaderTitle, { children: [
               /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-sm", children: agentName }),
               config.tagline ? /* @__PURE__ */ jsx("div", { className: "truncate text-muted-foreground text-xs", children: config.tagline }) : null
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(
-              TooltipTrigger,
-              {
-                render: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    "aria-label": "Conversation history",
-                    onClick: view === "history" ? () => setView("chat") : openHistory,
-                    size: "icon-sm",
-                    variant: "ghost",
-                    children: /* @__PURE__ */ jsx(HistoryIcon, {})
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(TooltipContent, { children: "History" })
-          ] }),
-          /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(
-              TooltipTrigger,
-              {
-                render: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    "aria-label": "New chat",
-                    onClick: () => {
-                      chat.newChat();
-                      setView("chat");
-                    },
-                    size: "icon-sm",
-                    variant: "ghost",
-                    children: /* @__PURE__ */ jsx(SquarePenIcon, {})
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(TooltipContent, { children: "New chat" })
-          ] }),
-          canToggleAgentMode ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(
-              TooltipTrigger,
-              {
-                render: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    "aria-label": agentMode ? "Exit Agent Mode" : "Enter Agent Mode",
-                    onClick: onToggleAgentMode,
-                    size: "icon-sm",
-                    variant: "ghost",
-                    children: agentMode ? /* @__PURE__ */ jsx(Minimize2Icon, {}) : /* @__PURE__ */ jsx(Maximize2Icon, {})
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(TooltipContent, { children: agentMode ? "Exit Agent Mode" : "Agent Mode" })
-          ] }) : null,
-          /* @__PURE__ */ jsx(Button, { "aria-label": "Close", onClick: onClose, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsx(XIcon, {}) })
+          /* @__PURE__ */ jsxs(ChatHeaderActions, { children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  render: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "aria-label": "Conversation history",
+                      onClick: view === "history" ? () => setView("chat") : openHistory,
+                      size: "icon-sm",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ jsx(HistoryIcon, {})
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "History" })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  render: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "aria-label": "New chat",
+                      onClick: () => {
+                        chat.newChat();
+                        setView("chat");
+                      },
+                      size: "icon-sm",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ jsx(SquarePenIcon, {})
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "New chat" })
+            ] }),
+            canToggleAgentMode ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  render: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "aria-label": agentMode ? "Exit Agent Mode" : "Enter Agent Mode",
+                      onClick: onToggleAgentMode,
+                      size: "icon-sm",
+                      variant: "ghost",
+                      children: agentMode ? /* @__PURE__ */ jsx(Minimize2Icon, {}) : /* @__PURE__ */ jsx(Maximize2Icon, {})
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(TooltipContent, { children: agentMode ? "Exit Agent Mode" : "Agent Mode" })
+            ] }) : null,
+            /* @__PURE__ */ jsx(Button, { "aria-label": "Close", onClick: onClose, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsx(XIcon, {}) })
+          ] })
         ] }),
         view === "history" ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-2", children: chat.conversations.length === 0 ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-muted-foreground text-sm", children: "No conversations yet." }) : chat.conversations.map((conversation) => /* @__PURE__ */ jsxs(
           "div",
@@ -307,22 +300,21 @@ function AgentPanel({
           },
           conversation.id
         )) }) : /* @__PURE__ */ jsxs(Chat, { children: [
-          /* @__PURE__ */ jsx(ChatMessages, { className: cn(agentMode && "mx-auto w-full max-w-3xl"), children: chat.messages.length === 0 && !chat.sending ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center", children: [
-            /* @__PURE__ */ jsx("span", { className: "flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "size-6" }) }),
+          /* @__PURE__ */ jsx(ChatMessages, { className: cn(agentMode && "mx-auto w-full max-w-3xl"), children: chat.messages.length === 0 && !chat.sending ? /* @__PURE__ */ jsxs(ChatEmptyState, { children: [
+            /* @__PURE__ */ jsx(ChatEmptyStateIcon, {}),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("p", { className: "font-medium text-sm", children: [
+              /* @__PURE__ */ jsxs(ChatEmptyStateTitle, { children: [
                 "Hi! I'm ",
                 agentName,
                 "."
               ] }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-muted-foreground text-sm", children: "Ask me anything about your data \u2014 I can look things up and take actions (with your approval)." })
+              /* @__PURE__ */ jsx(ChatEmptyStateDescription, { className: "mt-1", children: "Ask me anything about your data \u2014 I can look things up and take actions (with your approval)." })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: suggestions.slice(0, 3).map((suggestion) => /* @__PURE__ */ jsx(
-              Button,
+            /* @__PURE__ */ jsx(ChatSuggestions, { children: suggestions.slice(0, 4).map((suggestion, index) => /* @__PURE__ */ jsx(
+              ChatSuggestion,
               {
+                index,
                 onClick: () => handleSubmit(suggestion),
-                size: "sm",
-                variant: "outline",
                 children: suggestion
               },
               suggestion
@@ -347,7 +339,7 @@ function AgentPanel({
           /* @__PURE__ */ jsx(
             ChatInput,
             {
-              className: cn(agentMode && "mx-auto w-full max-w-3xl border-t-0"),
+              className: cn(agentMode && "mx-auto w-full max-w-3xl"),
               disabled: busy || chat.pendingApprovals.length > 0,
               onSubmit: handleSubmit,
               onValueChange: setDraft,