@open-mercato/ui 0.6.2-develop.3406.1.2b403f40da → 0.6.2-develop.3446.1.bd060c6017

package/dist/ai/AiChat.js

@@ -2,17 +2,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
+  Activity,
+  AlertTriangle,
+  BadgeQuestionMark,
   Bot,
+  ChartNoAxesCombined,
   Check,
   ChevronDown,
   ChevronRight,
+  Circle,
+  CircleAlert,
+  CircleCheck,
+  CircleDashed,
   Copy,
+  Database,
+  FileQuestion,
+  GitBranch,
+  Handshake,
   Lightbulb,
+  ListChecks,
   Loader2,
   Paperclip,
   Plus,
+  Search,
   Send,
   Square,
+  TrendingDown,
   User,
   Wrench,
   X
@@ -42,6 +57,7 @@ import {
 import { useAiChatUpload } from "./useAiChatUpload.js";
 import { useAiShortcuts } from "./useAiShortcuts.js";
 import { LoopTracePanel } from "./LoopTracePanel.js";
+import { AiIcon } from "./AiIcon.js";
 const PREVIEW_DATA_URL_MAX_BYTES = 2 * 1024 * 1024;
 const COMPACT_FOOTER_MAX_WIDTH = 640;
 const MODEL_PICKER_STORAGE_PREFIX = "om-ai-model-picker:";
@@ -192,80 +208,153 @@ function safeStringify(value) {
     return String(value);
   }
 }
+function titleWords(value) {
+  return value.replace(/\b[a-z]/g, (char) => char.toUpperCase());
+}
+function formatToolCaption(call) {
+  const rawCaption = call.caption?.trim();
+  if (!rawCaption) return call.toolName;
+  const caption = titleWords(rawCaption.replace(/\s*·\s*/g, " - "));
+  return `${caption} (${call.toolName})`;
+}
+function AiChatTaskPlan({ tasks }) {
+  const t = useT();
+  if (!tasks || tasks.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-md border border-border bg-muted/30",
+      "data-ai-chat-task-plan": "",
+      "data-ai-chat-task-plan-count": tasks.length,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border/60 px-2 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(ListChecks, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { children: t("ai_assistant.chat.taskPlanTitle", "Plan") }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono", children: tasks.length })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/60", "data-ai-chat-task-plan-list": "", children: tasks.map((task) => /* @__PURE__ */ jsx(AiChatTaskRow, { task }, task.id)) })
+      ]
+    }
+  );
+}
+function AiChatTaskRow({ task }) {
+  const t = useT();
+  const statusLabel = task.state === "running" ? t("ai_assistant.chat.taskRunning", "running\u2026") : task.state === "done" ? t("ai_assistant.chat.taskDone", "done") : task.state === "failed" ? t("ai_assistant.chat.taskFailed", "failed") : task.state === "skipped" ? t("ai_assistant.chat.taskSkipped", "skipped") : t("ai_assistant.chat.taskPending", "pending");
+  const Icon = task.state === "running" ? Loader2 : task.state === "done" ? CircleCheck : task.state === "failed" ? CircleAlert : task.state === "skipped" ? CircleDashed : Circle;
+  const iconClassName = cn(
+    "size-3.5 shrink-0",
+    task.state === "running" && "animate-spin text-muted-foreground",
+    task.state === "done" && "text-status-success-icon",
+    task.state === "failed" && "text-destructive",
+    task.state === "skipped" && "text-muted-foreground",
+    task.state === "pending" && "text-muted-foreground"
+  );
+  const statusBadgeClassName = cn(
+    "ml-auto text-[10px] uppercase tracking-wide",
+    task.state === "done" && "text-status-success-text",
+    task.state === "failed" && "text-destructive",
+    task.state !== "done" && task.state !== "failed" && "text-muted-foreground"
+  );
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex h-7 items-center gap-2 px-2 text-xs",
+      "data-ai-chat-task-id": task.id,
+      "data-ai-chat-task-state": task.state,
+      "data-ai-chat-task-source": task.source,
+      "data-ai-chat-task-tool-call-id": task.toolCallId,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: iconClassName, "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", title: task.detail ?? task.label, children: task.label }),
+        /* @__PURE__ */ jsx("span", { className: statusBadgeClassName, children: statusLabel })
+      ]
+    }
+  );
+}
 function ToolCallList({ toolCalls }) {
   const t = useT();
   const [openId, setOpenId] = React.useState(null);
   if (!toolCalls || toolCalls.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", "data-ai-chat-tool-calls": "", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { children: t("ai_assistant.chat.agentTasksTitle", "Agent tasks") }),
-      /* @__PURE__ */ jsx("span", { children: toolCalls.length })
-    ] }),
-    toolCalls.map((call) => {
-      const isOpen = openId === call.id;
-      const isError = call.state === "error";
-      const isPending = call.state === "pending";
-      const isComplete = call.state === "complete";
-      const statusLabel = isError ? t("ai_assistant.chat.toolError", "failed") : isPending ? t("ai_assistant.chat.toolRunning", "running\u2026") : t("ai_assistant.chat.toolDone", "done");
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "rounded-md border border-border bg-muted/30",
-            isError ? "border-destructive/40 bg-destructive/5" : ""
-          ),
-          "data-ai-chat-tool-call": call.toolName,
-          "data-ai-chat-tool-state": call.state,
-          children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => setOpenId(isOpen ? null : call.id),
-                className: "flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs font-medium hover:bg-muted/60",
-                children: [
-                  isOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }),
-                  isPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin text-muted-foreground", "aria-hidden": true }) : /* @__PURE__ */ jsx(
-                    Wrench,
-                    {
-                      className: cn(
-                        "size-3.5",
-                        isError ? "text-destructive" : "text-muted-foreground"
-                      ),
-                      "aria-hidden": true
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "font-mono", children: call.toolName }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "ml-auto text-[10px] uppercase tracking-wide",
-                        isError ? "text-destructive" : isComplete ? "text-status-success-text" : "text-muted-foreground"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-md border border-border bg-muted/30",
+      "data-ai-chat-tool-calls": "",
+      "data-ai-chat-tool-call-count": toolCalls.length,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border/60 px-2 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Wrench, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { children: t("ai_assistant.chat.agentTasksTitle", "Tool calls") }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono", children: toolCalls.length })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/60", children: toolCalls.map((call) => {
+          const isOpen = openId === call.id;
+          const isError = call.state === "error";
+          const isPending = call.state === "pending";
+          const isComplete = call.state === "complete";
+          const statusLabel = isError ? t("ai_assistant.chat.toolError", "failed") : isPending ? t("ai_assistant.chat.toolRunning", "running\u2026") : t("ai_assistant.chat.toolDone", "done");
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: cn(
+                isError ? "bg-destructive/5" : ""
+              ),
+              "data-ai-chat-tool-call": call.toolName,
+              "data-ai-chat-tool-state": call.state,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "2xs",
+                    type: "button",
+                    onClick: () => setOpenId(isOpen ? null : call.id),
+                    className: "w-full justify-start rounded-none px-2 text-left hover:bg-muted/60",
+                    children: [
+                      isOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }),
+                      isPending ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin text-muted-foreground", "aria-hidden": true }) : /* @__PURE__ */ jsx(
+                        Wrench,
+                        {
+                          className: cn(
+                            "size-3.5",
+                            isError ? "text-destructive" : "text-muted-foreground"
+                          ),
+                          "aria-hidden": true
+                        }
                       ),
-                      children: statusLabel
-                    }
-                  )
-                ]
-              }
-            ),
-            isOpen ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-t border-border/60 px-2 py-1.5 text-xs", children: [
-              call.input !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: t("ai_assistant.chat.toolInput", "Input") }),
-                /* @__PURE__ */ jsx("pre", { className: "mt-0.5 max-h-32 overflow-auto rounded bg-background p-1.5 font-mono text-[11px]", children: safeStringify(call.input) })
-              ] }) : null,
-              call.output !== void 0 && !isError ? /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: t("ai_assistant.chat.toolOutput", "Output") }),
-                /* @__PURE__ */ jsx("pre", { className: "mt-0.5 max-h-32 overflow-auto rounded bg-background p-1.5 font-mono text-[11px]", children: safeStringify(call.output) })
-              ] }) : null,
-              call.errorMessage ? /* @__PURE__ */ jsx("div", { className: "text-destructive", children: call.errorMessage }) : null
-            ] }) : null
-          ]
-        },
-        call.id
-      );
-    })
-  ] });
+                      /* @__PURE__ */ jsx("span", { className: "truncate", title: formatToolCaption(call), children: formatToolCaption(call) }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "ml-auto text-[10px] uppercase tracking-wide",
+                            isError ? "text-destructive" : isComplete ? "text-status-success-text" : "text-muted-foreground"
+                          ),
+                          children: statusLabel
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isOpen ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-t border-border/60 px-2 py-1.5 text-xs", children: [
+                  call.input !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: t("ai_assistant.chat.toolInput", "Input") }),
+                    /* @__PURE__ */ jsx("pre", { className: "mt-0.5 max-h-32 overflow-auto rounded bg-background p-1.5 font-mono text-[11px]", children: safeStringify(call.input) })
+                  ] }) : null,
+                  call.output !== void 0 && !isError ? /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: t("ai_assistant.chat.toolOutput", "Output") }),
+                    /* @__PURE__ */ jsx("pre", { className: "mt-0.5 max-h-32 overflow-auto rounded bg-background p-1.5 font-mono text-[11px]", children: safeStringify(call.output) })
+                  ] }) : null,
+                  call.errorMessage ? /* @__PURE__ */ jsx("div", { className: "text-destructive", children: call.errorMessage }) : null
+                ] }) : null
+              ]
+            },
+            call.id
+          );
+        }) })
+      ]
+    }
+  );
 }
 function ReasoningPanel({ text, streaming }) {
   const t = useT();
@@ -313,6 +402,7 @@ function MessageRow({
   const Icon = isAssistant ? Bot : User;
   const [copied, setCopied] = React.useState(false);
   const copyTimerRef = React.useRef(null);
+  const visibleTaskPlan = isAssistant && message.taskPlan ? message.taskPlan.filter((task) => task.source === "agent") : [];
   React.useEffect(() => {
     return () => {
       if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
@@ -406,6 +496,7 @@ function MessageRow({
               streaming: message.reasoningStreaming === true
             }
           ) : null,
+          visibleTaskPlan.length > 0 ? /* @__PURE__ */ jsx(AiChatTaskPlan, { tasks: visibleTaskPlan }) : null,
           isAssistant && message.toolCalls && message.toolCalls.length > 0 ? /* @__PURE__ */ jsx(ToolCallList, { toolCalls: message.toolCalls }) : null,
           /* @__PURE__ */ jsx(MessageContent, { content: message.content, isAssistant }),
           isAssistant && registry && message.uiParts && message.uiParts.length > 0 ? /* @__PURE__ */ jsx(
@@ -489,6 +580,45 @@ function AiUiPartRenderer({
     }
   );
 }
+function getSuggestionIcon(suggestion) {
+  if (suggestion.icon) return { icon: suggestion.icon, name: "custom" };
+  const text = `${suggestion.label} ${suggestion.prompt}`.toLowerCase();
+  const iconClassName = "size-4 text-foreground";
+  if (/\b(analy[sz]e|analysis|health|score|summary|summari[sz]e)\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(ChartNoAxesCombined, { className: iconClassName }), name: "analysis" };
+  }
+  if (/\b(at[-\s]?risk|risk|stalled|stale|overdue|danger)\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(AlertTriangle, { className: iconClassName }), name: "risk" };
+  }
+  if (/\bpipeline|stage|funnel\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(GitBranch, { className: iconClassName }), name: "pipeline" };
+  }
+  if (/\bdeal|opportunit(?:y|ies)\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(Handshake, { className: iconClassName }), name: "deal" };
+  }
+  if (/\bdata|access|record|records|schema\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(Database, { className: iconClassName }), name: "data" };
+  }
+  if (/\bwhat can you help|help me|capabilit(?:y|ies)\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(BadgeQuestionMark, { className: iconClassName }), name: "capabilities" };
+  }
+  if (/\bsuggest|try|idea|ideas|recommend\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(Lightbulb, { className: iconClassName }), name: "ideas" };
+  }
+  if (/\bhow do i|how to|use this|instructions?|guide\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(FileQuestion, { className: iconClassName }), name: "guide" };
+  }
+  if (/\bfind|search|show|list|lookup\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(Search, { className: iconClassName }), name: "search" };
+  }
+  if (/\bactivity|activities|timeline|recent\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(Activity, { className: iconClassName }), name: "activity" };
+  }
+  if (/\bdown|drop|declin|loss|lost\b/.test(text)) {
+    return { icon: /* @__PURE__ */ jsx(TrendingDown, { className: iconClassName }), name: "trend-down" };
+  }
+  return { icon: /* @__PURE__ */ jsx(AiIcon, { className: iconClassName }), name: "ai" };
+}
 function WelcomeState({
   title,
   description,
@@ -514,20 +644,25 @@ function WelcomeState({
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: desc })
     ] }),
-    suggestions && suggestions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-md flex-col gap-2", "data-ai-chat-suggestions": "", children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
-        onClick: () => onSuggestionClick(suggestion.prompt),
-        "data-ai-chat-suggestion": index,
-        children: [
-          suggestion.icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": true, children: suggestion.icon }) : null,
-          /* @__PURE__ */ jsx("span", { children: suggestion.label })
-        ]
-      },
-      index
-    )) }) : null
+    suggestions && suggestions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-md flex-col gap-2", "data-ai-chat-suggestions": "", children: suggestions.map((suggestion, index) => {
+      const suggestionIcon = getSuggestionIcon(suggestion);
+      return /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          type: "button",
+          className: "h-auto w-full justify-start whitespace-normal rounded-lg bg-card px-3 py-2.5 text-left text-sm",
+          onClick: () => onSuggestionClick(suggestion.prompt),
+          "data-ai-chat-suggestion": index,
+          "data-ai-chat-suggestion-icon": suggestionIcon.name,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": true, children: suggestionIcon.icon }),
+            /* @__PURE__ */ jsx("span", { children: suggestion.label })
+          ]
+        },
+        index
+      );
+    }) }) : null
   ] });
 }
 function ContextItemsPill({ items }) {