@cntyclub/agent-react 0.2.0 → 0.4.0

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';
 
@@ -77,6 +77,144 @@ var AgentApiClient = class {
     });
   }
 };
+var NOISE_KEYS = /* @__PURE__ */ new Set([
+  "id",
+  "pk",
+  "uuid",
+  "slug",
+  "object_id",
+  "external_id",
+  "client_id",
+  "content_type",
+  "provider_call_id",
+  "tool_call_id"
+]);
+var NOISE_PATTERNS = [
+  /_id$/i,
+  /_ids$/i,
+  /_key$/i,
+  /_hash$/i,
+  /embedding/i,
+  /vector/i,
+  /password/i,
+  /secret/i,
+  /(^|_)token(_|$)/i
+];
+var IMAGE_KEY = /(image|logo|avatar|photo|picture|icon|thumbnail|banner|cover|headshot)/i;
+var IMAGE_EXT = /\.(png|jpe?g|gif|webp|svg|avif)(\?|$)/i;
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+var ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}(T|$)/;
+var URL_RE = /^https?:\/\//i;
+var PRIORITY_KEYS = ["name", "title", "label", "full_name", "email"];
+var LABEL_KEYS = ["name", "title", "label", "full_name", "email", "code"];
+function isUuid(value) {
+  return typeof value === "string" && UUID_RE.test(value);
+}
+function humanize(key) {
+  const text = key.replace(/_/g, " ").trim();
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function isNoiseColumn(key, rows) {
+  if (NOISE_KEYS.has(key.toLowerCase())) return true;
+  if (NOISE_PATTERNS.some((pattern) => pattern.test(key))) return true;
+  const values = rows.map((row) => row[key]).filter((value) => value !== null && value !== void 0 && value !== "");
+  return values.length > 0 && values.every(isUuid);
+}
+function pickLabel(obj) {
+  for (const key of LABEL_KEYS) {
+    const value = obj[key];
+    if (typeof value === "string" && value.trim()) return value;
+    if (typeof value === "number") return String(value);
+  }
+  return null;
+}
+function formatObject(obj) {
+  const label = pickLabel(obj);
+  if (label) return label;
+  const parts = [];
+  for (const [key, value] of Object.entries(obj)) {
+    if (value === null || value === void 0 || value === "") continue;
+    if (typeof value === "object") continue;
+    parts.push(`${humanize(key)} ${value}`);
+    if (parts.length >= 6) break;
+  }
+  return parts.join(" \xB7 ") || "\u2014";
+}
+function formatArray(arr) {
+  const items = arr.map((item) => {
+    if (item === null || item === void 0) return "";
+    if (Array.isArray(item)) return "";
+    if (typeof item === "object") return pickLabel(item) ?? "";
+    return String(item);
+  }).filter(Boolean);
+  if (items.length === 0) return "\u2014";
+  const shown = items.slice(0, 8);
+  const extra = items.length - shown.length;
+  return shown.join(", ") + (extra > 0 ? ` +${extra} more` : "");
+}
+function renderScalar(key, value) {
+  if (typeof value !== "string") return value;
+  const text = value.trim();
+  if (URL_RE.test(text) && (IMAGE_EXT.test(text) || IMAGE_KEY.test(key))) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: humanize(key),
+        className: "h-9 w-9 rounded-md border border-border object-cover",
+        loading: "lazy",
+        src: text
+      }
+    );
+  }
+  if (URL_RE.test(text)) {
+    let label = text;
+    try {
+      label = new URL(text).hostname.replace(/^www\./, "");
+    } catch {
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "text-primary underline underline-offset-2",
+        href: text,
+        rel: "noreferrer",
+        target: "_blank",
+        children: label
+      }
+    );
+  }
+  if (ISO_DATE_RE.test(text)) {
+    const date = new Date(text);
+    if (!Number.isNaN(date.getTime())) return date.toLocaleDateString();
+  }
+  return text;
+}
+function formatCellValue(key, value) {
+  if (value === null || value === void 0 || value === "") return value;
+  if (Array.isArray(value)) return formatArray(value);
+  if (typeof value === "object") return formatObject(value);
+  return renderScalar(key, value);
+}
+function toDisplayTable(block) {
+  const rows = block.rows ?? [];
+  const kept = (block.columns ?? []).filter((key) => !isNoiseColumn(key, rows));
+  const columnKeys = kept.length > 0 ? kept : block.columns ?? [];
+  const ordered = [...columnKeys].sort((a, b) => {
+    const ra = PRIORITY_KEYS.indexOf(a.toLowerCase());
+    const rb = PRIORITY_KEYS.indexOf(b.toLowerCase());
+    const pa = ra === -1 ? PRIORITY_KEYS.length : ra;
+    const pb = rb === -1 ? PRIORITY_KEYS.length : rb;
+    if (pa !== pb) return pa - pb;
+    return columnKeys.indexOf(a) - columnKeys.indexOf(b);
+  });
+  const columns = ordered.map((key) => ({ key, label: humanize(key) }));
+  const displayRows = rows.map((row) => {
+    const out = {};
+    for (const key of ordered) out[key] = formatCellValue(key, row[key]);
+    return out;
+  });
+  return { columns, rows: displayRows };
+}
 function humanizeToolName(toolName) {
   return toolName.replace(/^[a-z]+_/, "").replaceAll("_", " ");
 }
@@ -89,32 +227,26 @@ 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");
-  return /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: tableBlocks.length > 0 ? tableBlocks.map((block, index) => /* @__PURE__ */ jsx("div", { className: "w-full max-w-full", children: /* @__PURE__ */ jsx(
-    DataTablePaged,
-    {
-      columns: block.columns.map((key) => ({ key })),
-      pageSize: 8,
-      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" }),
+  return /* @__PURE__ */ jsx(ChatMessage, { from: "assistant", children: tableBlocks.length > 0 ? tableBlocks.map((block, index) => {
+    const { columns, rows } = toDisplayTable(block);
+    return /* @__PURE__ */ jsx("div", { className: "w-full max-w-full", children: /* @__PURE__ */ jsx(
+      DataTablePaged,
+      {
+        columns,
+        pageSize: 8,
+        rows,
+        totalCount: typeof block.pagination?.count === "number" ? block.pagination.count : block.row_count
+      }
+    ) }, `${message.id}-${index}`);
+  }) : /* @__PURE__ */ jsxs(ChatToolChip, { icon: /* @__PURE__ */ jsx(CheckIcon, {}), children: [
     humanizeToolName(message.tool_name ?? "tool"),
     " finished"
   ] }) });
@@ -205,72 +337,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 +441,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 +480,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,