veryfront 0.0.72 → 0.0.74

package/dist/ai/components.js

@@ -735,14 +735,497 @@ function Markdown({
 }
 
 // src/ai/react/components/chat.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function CircleIcon({ className }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" })
+    }
+  );
+}
+function ClockIcon({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx7("polyline", { points: "12 6 12 12 16 14" })
+      ]
+    }
+  );
+}
+function CheckCircleIcon({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx7("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx7("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  );
+}
+function XCircleIcon({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx7("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+        /* @__PURE__ */ jsx7("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+      ]
+    }
+  );
+}
+function WrenchIcon({ className }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" })
+    }
+  );
+}
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function BrainIcon({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx7("path", { d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" }),
+        /* @__PURE__ */ jsx7("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" }),
+        /* @__PURE__ */ jsx7("path", { d: "M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" }),
+        /* @__PURE__ */ jsx7("path", { d: "M17.599 6.5a3 3 0 0 0 .399-1.375" }),
+        /* @__PURE__ */ jsx7("path", { d: "M6.003 5.125A3 3 0 0 0 6.401 6.5" }),
+        /* @__PURE__ */ jsx7("path", { d: "M3.477 10.896a4 4 0 0 1 .585-.396" }),
+        /* @__PURE__ */ jsx7("path", { d: "M19.938 10.5a4 4 0 0 1 .585.396" }),
+        /* @__PURE__ */ jsx7("path", { d: "M6 18a4 4 0 0 1-1.967-.516" }),
+        /* @__PURE__ */ jsx7("path", { d: "M19.967 17.484A4 4 0 0 1 18 18" })
+      ]
+    }
+  );
+}
+function MessageSquareIcon({ className }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    }
+  );
+}
+function ArrowDownIcon({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx7("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+        /* @__PURE__ */ jsx7("polyline", { points: "19 12 12 19 5 12" })
+      ]
+    }
+  );
+}
+function RefreshCwIcon({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx7("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+        /* @__PURE__ */ jsx7("path", { d: "M21 3v5h-5" }),
+        /* @__PURE__ */ jsx7("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+        /* @__PURE__ */ jsx7("path", { d: "M8 16H3v5" })
+      ]
+    }
+  );
+}
+function CopyIcon({ className }) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx7("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx7("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+      ]
+    }
+  );
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      className: cn("size-4", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function Shimmer({ children }) {
+  return /* @__PURE__ */ jsx7("span", { className: "relative inline-block overflow-hidden", children: /* @__PURE__ */ jsx7("span", { className: "animate-pulse", children }) });
+}
+function ReasoningCard({ text, isStreaming = false }) {
+  const [isOpen, setIsOpen] = React8.useState(true);
+  React8.useEffect(() => {
+    if (!isStreaming && isOpen) {
+      const timer = setTimeout(() => {
+        setIsOpen(false);
+      }, 1e3);
+      return () => clearTimeout(timer);
+    }
+  }, [isStreaming, isOpen]);
+  return /* @__PURE__ */ jsxs4("div", { className: "not-prose mb-4", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        className: "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx7(BrainIcon, { className: "size-4" }),
+          isStreaming ? /* @__PURE__ */ jsx7(Shimmer, { children: "Thinking..." }) : /* @__PURE__ */ jsx7("span", { children: "Thought process" }),
+          /* @__PURE__ */ jsx7(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx7("div", { className: "mt-4 text-sm text-muted-foreground border-l-2 border-muted pl-4 ml-2", children: /* @__PURE__ */ jsx7(Markdown, { className: "text-sm", children: text }) })
+  ] });
+}
+function Suggestion({ suggestion, onClick, className, icon }) {
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type: "button",
+      onClick: () => onClick?.(suggestion),
+      className: cn(
+        "group flex items-start gap-3 rounded-xl border border-border bg-background p-4 text-left text-sm text-foreground transition-all hover:bg-muted hover:border-muted-foreground/20",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-muted-foreground group-hover:text-foreground transition-colors", children: icon }),
+        /* @__PURE__ */ jsx7("span", { className: "line-clamp-2", children: suggestion })
+      ]
+    }
+  );
+}
+function Suggestions({ children, className, layout = "grid" }) {
+  if (layout === "horizontal") {
+    return /* @__PURE__ */ jsx7("div", { className: cn("flex gap-2 overflow-x-auto pb-2 scrollbar-hide", className), children });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: cn("grid grid-cols-2 gap-3 max-w-2xl mx-auto", className), children });
+}
+function ConversationEmptyState({
+  icon,
+  title = "What can I help with?",
+  description,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col items-center justify-center text-center", className), children: [
+    icon && /* @__PURE__ */ jsx7("div", { className: "mb-4 text-muted-foreground", children: icon }),
+    /* @__PURE__ */ jsx7("h1", { className: "text-3xl font-semibold text-foreground", children: title }),
+    description && /* @__PURE__ */ jsx7("p", { className: "mt-2 text-base text-muted-foreground max-w-md", children: description }),
+    children
+  ] });
+}
+function ConversationScrollButton({
+  onClick,
+  visible = true,
+  className
+}) {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background p-2 shadow-lg transition-all hover:bg-muted",
+        className
+      ),
+      children: /* @__PURE__ */ jsx7(ArrowDownIcon, { className: "size-4" })
+    }
+  );
+}
+function MessageActions({ content, className }) {
+  const [copied, setCopied] = React8.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = content;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  return /* @__PURE__ */ jsx7("div", { className: cn("flex items-center gap-1 mt-2", className), children: /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors",
+      title: copied ? "Copied!" : "Copy to clipboard",
+      children: copied ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+        /* @__PURE__ */ jsx7(CheckIcon, { className: "size-3" }),
+        /* @__PURE__ */ jsx7("span", { children: "Copied" })
+      ] }) : /* @__PURE__ */ jsxs4(Fragment4, { children: [
+        /* @__PURE__ */ jsx7(CopyIcon, { className: "size-3" }),
+        /* @__PURE__ */ jsx7("span", { children: "Copy" })
+      ] })
+    }
+  ) });
+}
+function ToolStatusBadge({ state }) {
+  const labels = {
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    "approval-requested": "Awaiting Approval",
+    "approval-responded": "Responded",
+    "output-available": "Completed",
+    "output-error": "Error",
+    "output-denied": "Denied",
+    // Legacy states
+    "call": "Running",
+    "partial-call": "Running",
+    "result": "Completed",
+    "error": "Error"
+  };
+  const icons = {
+    "input-streaming": /* @__PURE__ */ jsx7(CircleIcon, { className: "size-3.5" }),
+    "input-available": /* @__PURE__ */ jsx7(ClockIcon, { className: "size-3.5 animate-pulse" }),
+    "approval-requested": /* @__PURE__ */ jsx7(ClockIcon, { className: "size-3.5 text-yellow-600" }),
+    "approval-responded": /* @__PURE__ */ jsx7(CheckCircleIcon, { className: "size-3.5 text-blue-600" }),
+    "output-available": /* @__PURE__ */ jsx7(CheckCircleIcon, { className: "size-3.5 text-green-600" }),
+    "output-error": /* @__PURE__ */ jsx7(XCircleIcon, { className: "size-3.5 text-red-600" }),
+    "output-denied": /* @__PURE__ */ jsx7(XCircleIcon, { className: "size-3.5 text-orange-600" }),
+    // Legacy states
+    "call": /* @__PURE__ */ jsx7(ClockIcon, { className: "size-3.5 animate-pulse" }),
+    "partial-call": /* @__PURE__ */ jsx7(ClockIcon, { className: "size-3.5 animate-pulse" }),
+    "result": /* @__PURE__ */ jsx7(CheckCircleIcon, { className: "size-3.5 text-green-600" }),
+    "error": /* @__PURE__ */ jsx7(XCircleIcon, { className: "size-3.5 text-red-600" })
+  };
+  return /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground border border-border", children: [
+    icons[state] || /* @__PURE__ */ jsx7(CircleIcon, { className: "size-3.5" }),
+    labels[state] || state
+  ] });
+}
+function formatJsonWithHighlight(obj) {
+  if (obj === void 0 || obj === null)
+    return null;
+  const jsonStr = typeof obj === "string" ? obj : JSON.stringify(obj, null, 2);
+  const highlighted = jsonStr.replace(/"([^"]+)":/g, '<span class="text-green-600 dark:text-green-400">"$1"</span>:').replace(/: "([^"]*)"/g, ': <span class="text-amber-600 dark:text-amber-400">"$1"</span>').replace(/: (\d+)/g, ': <span class="text-blue-600 dark:text-blue-400">$1</span>').replace(/: (true|false)/g, ': <span class="text-purple-600 dark:text-purple-400">$1</span>');
+  return /* @__PURE__ */ jsx7(
+    "pre",
+    {
+      className: "text-sm font-mono whitespace-pre-wrap",
+      dangerouslySetInnerHTML: { __html: highlighted }
+    }
+  );
+}
+function renderOutputAsTable(output) {
+  if (!Array.isArray(output) || output.length === 0)
+    return null;
+  const firstItem = output[0];
+  if (typeof firstItem !== "object" || firstItem === null)
+    return null;
+  const keys = Object.keys(firstItem);
+  if (keys.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs4("table", { className: "min-w-full text-sm", children: [
+    /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { className: "border-b border-neutral-200 dark:border-neutral-700", children: keys.map((key) => /* @__PURE__ */ jsx7(
+      "th",
+      {
+        className: "px-4 py-2 text-left font-semibold text-neutral-900 dark:text-neutral-100",
+        children: key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+      },
+      key
+    )) }) }),
+    /* @__PURE__ */ jsx7("tbody", { children: output.map((row, i) => /* @__PURE__ */ jsx7("tr", { className: "border-b border-neutral-100 dark:border-neutral-800", children: keys.map((key) => /* @__PURE__ */ jsx7("td", { className: "px-4 py-2 text-neutral-700 dark:text-neutral-300", children: String(row[key] ?? "") }, key)) }, i)) })
+  ] }) });
+}
+function ToolCallCard({ tool }) {
+  const [isExpanded, setIsExpanded] = React8.useState(true);
+  const tableOutput = tool.output !== void 0 ? renderOutputAsTable(tool.output) : null;
+  return /* @__PURE__ */ jsxs4("div", { className: "not-prose w-full rounded-md border border-border bg-card", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "group flex w-full items-center justify-between gap-4 p-3 hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx7(WrenchIcon, { className: "size-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx7("span", { className: "font-medium text-sm text-foreground", children: tool.toolName }),
+            /* @__PURE__ */ jsx7(ToolStatusBadge, { state: tool.state })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 text-muted-foreground transition-transform",
+                isExpanded && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs4("div", { className: "border-t border-border", children: [
+      tool.input !== void 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2 overflow-hidden p-4", children: [
+        /* @__PURE__ */ jsx7("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+        /* @__PURE__ */ jsx7("div", { className: "rounded-md bg-muted/50 p-3", children: formatJsonWithHighlight(tool.input) })
+      ] }),
+      tool.output !== void 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2 p-4 border-t border-border", children: [
+        /* @__PURE__ */ jsx7("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Result" }),
+        /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto rounded-md bg-muted/50 text-foreground", children: tableOutput || /* @__PURE__ */ jsx7("div", { className: "p-3", children: formatJsonWithHighlight(tool.output) }) })
+      ] }),
+      tool.errorText && /* @__PURE__ */ jsxs4("div", { className: "space-y-2 p-4 border-t border-border", children: [
+        /* @__PURE__ */ jsx7("h4", { className: "font-medium text-destructive text-xs uppercase tracking-wide", children: "Error" }),
+        /* @__PURE__ */ jsx7("div", { className: "rounded-md bg-destructive/10 text-destructive p-3 text-sm", children: tool.errorText })
+      ] })
+    ] })
+  ] });
+}
 function getTextContent(message) {
   return message.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
 }
-function getToolParts(message) {
-  return message.parts.filter(
-    (p) => p.type.startsWith("tool-") || p.type === "dynamic-tool"
-  );
+function isToolPart(part) {
+  return part.type.startsWith("tool-") && part.type !== "tool-result" || part.type === "dynamic-tool";
+}
+function isReasoningPart(part) {
+  return part.type === "reasoning";
+}
+function groupPartsInOrder(parts) {
+  const groups = [];
+  let currentTextGroup = [];
+  for (const part of parts) {
+    if (part.type === "text") {
+      currentTextGroup.push(part.text);
+    } else if (isToolPart(part)) {
+      if (currentTextGroup.length > 0) {
+        groups.push({ type: "text", content: currentTextGroup.join("") });
+        currentTextGroup = [];
+      }
+      groups.push({ type: "tool", tool: part });
+    } else if (isReasoningPart(part)) {
+      if (currentTextGroup.length > 0) {
+        groups.push({ type: "text", content: currentTextGroup.join("") });
+        currentTextGroup = [];
+      }
+      groups.push({
+        type: "reasoning",
+        text: part.text,
+        isStreaming: part.state === "streaming"
+      });
+    }
+  }
+  if (currentTextGroup.length > 0) {
+    groups.push({ type: "text", content: currentTextGroup.join("") });
+  }
+  return groups;
 }
 var Chat = React8.forwardRef(
   ({
@@ -753,6 +1236,7 @@ var Chat = React8.forwardRef(
     onSubmit,
     handleSubmit,
     stop,
+    reload,
     enableVoice = false,
     onVoice,
     setInput,
@@ -764,7 +1248,12 @@ var Chat = React8.forwardRef(
     theme: userTheme,
     renderMessage,
     renderTool,
-    multiline = false
+    multiline = false,
+    suggestions,
+    onSuggestionClick,
+    emptyState,
+    showScrollButton = false,
+    showMessageActions = true
   }, ref) => {
     const theme = mergeThemes(defaultChatTheme, userTheme);
     const messagesEndRef = React8.useRef(null);
@@ -796,54 +1285,106 @@ var Chat = React8.forwardRef(
         className: cn(theme.container, className),
         style: { maxHeight },
         children: [
-          /* @__PURE__ */ jsx7(MessageList, { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxs4("div", { className: "max-w-2xl mx-auto px-4 py-4 space-y-2", children: [
-            messages.map((msg) => {
-              const content = getTextContent(msg);
-              const toolParts = getToolParts(msg);
-              return renderMessage ? /* @__PURE__ */ jsx7(React8.Fragment, { children: renderMessage(msg) }, msg.id) : /* @__PURE__ */ jsx7(
-                MessageItem,
+          /* @__PURE__ */ jsxs4(MessageList, { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
+            messages.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center h-full px-4", children: [
+              /* @__PURE__ */ jsx7("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsx7(
+                ConversationEmptyState,
                 {
-                  role: msg.role,
-                  className: cn(
-                    "flex",
-                    msg.role === "user" ? "justify-end" : "justify-start"
-                  ),
-                  children: /* @__PURE__ */ jsxs4("div", { className: theme.message?.[msg.role] || theme.message?.assistant, children: [
-                    msg.role === "user" ? /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed", children: content }) : /* @__PURE__ */ jsx7(Markdown, { className: "text-[15px] leading-relaxed", children: content }),
-                    toolParts.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 space-y-1", children: toolParts.map(
-                      (tool) => renderTool ? /* @__PURE__ */ jsx7(React8.Fragment, { children: renderTool(tool) }, tool.toolCallId) : /* @__PURE__ */ jsxs4(
-                        "div",
-                        {
-                          className: cn(
-                            "text-xs rounded px-2 py-1",
-                            tool.type === "dynamic-tool" ? "bg-blue-50 dark:bg-blue-900/20" : "bg-neutral-100 dark:bg-neutral-800"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx7("span", { className: "font-mono", children: tool.toolName }),
-                            /* @__PURE__ */ jsxs4("span", { className: "ml-2 opacity-70", children: [
-                              "[",
-                              tool.state,
-                              "]"
-                            ] }),
-                            tool.errorText && /* @__PURE__ */ jsx7("div", { className: "text-red-600 dark:text-red-400 mt-1", children: tool.errorText })
-                          ]
-                        },
-                        tool.toolCallId
-                      )
-                    ) })
-                  ] })
+                  icon: emptyState?.icon || /* @__PURE__ */ jsx7(MessageSquareIcon, { className: "size-10" }),
+                  title: emptyState?.title || "What can I help with?",
+                  description: emptyState?.description
+                }
+              ),
+              suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx7("div", { className: "w-full max-w-2xl mt-6 mb-8", children: /* @__PURE__ */ jsx7(Suggestions, { layout: "grid", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx7(
+                Suggestion,
+                {
+                  suggestion,
+                  onClick: onSuggestionClick
                 },
-                msg.id
-              );
-            }),
-            isLoading && /* @__PURE__ */ jsx7("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx7("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-[20px] rounded-bl-[4px] px-4 py-3", children: /* @__PURE__ */ jsxs4("div", { className: "flex gap-1.5 items-center", children: [
-              /* @__PURE__ */ jsx7("span", { className: cn(theme.loading) }),
-              /* @__PURE__ */ jsx7("span", { className: cn(theme.loading), style: { animationDelay: "0.15s" } }),
-              /* @__PURE__ */ jsx7("span", { className: cn(theme.loading), style: { animationDelay: "0.3s" } })
-            ] }) }) }),
-            /* @__PURE__ */ jsx7("div", { ref: messagesEndRef })
-          ] }) }),
-          error && /* @__PURE__ */ jsx7("div", { className: "mx-4 mb-2 px-4 py-3 bg-red-50 dark:bg-red-900/20 rounded-2xl text-red-600 dark:text-red-400 text-sm", children: error.message }),
+                suggestion
+              )) }) }),
+              /* @__PURE__ */ jsx7("div", { className: "flex-1" })
+            ] }) : /* @__PURE__ */ jsxs4("div", { className: "max-w-2xl mx-auto px-4 py-4 space-y-2", children: [
+              messages.map((msg) => {
+                if (msg.role === "user") {
+                  const content = getTextContent(msg);
+                  return renderMessage ? /* @__PURE__ */ jsx7(React8.Fragment, { children: renderMessage(msg) }, msg.id) : /* @__PURE__ */ jsx7(
+                    MessageItem,
+                    {
+                      role: msg.role,
+                      className: cn("flex", "justify-end"),
+                      children: /* @__PURE__ */ jsx7("div", { className: theme.message?.[msg.role] || theme.message?.user, children: /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap text-[15px] leading-relaxed", children: content }) })
+                    },
+                    msg.id
+                  );
+                }
+                const partGroups = groupPartsInOrder(msg.parts);
+                const textContent = getTextContent(msg);
+                return renderMessage ? /* @__PURE__ */ jsx7(React8.Fragment, { children: renderMessage(msg) }, msg.id) : /* @__PURE__ */ jsx7(
+                  MessageItem,
+                  {
+                    role: msg.role,
+                    className: cn("flex", "justify-start"),
+                    children: /* @__PURE__ */ jsxs4("div", { className: theme.message?.[msg.role] || theme.message?.assistant, children: [
+                      partGroups.map((group, index) => {
+                        if (group.type === "text") {
+                          return /* @__PURE__ */ jsx7(
+                            Markdown,
+                            {
+                              className: "text-[15px] leading-relaxed",
+                              children: group.content
+                            },
+                            `text-${index}`
+                          );
+                        }
+                        if (group.type === "reasoning") {
+                          return /* @__PURE__ */ jsx7(
+                            ReasoningCard,
+                            {
+                              text: group.text,
+                              isStreaming: group.isStreaming
+                            },
+                            `reasoning-${index}`
+                          );
+                        }
+                        return /* @__PURE__ */ jsx7("div", { className: "my-3", children: renderTool ? renderTool(group.tool) : /* @__PURE__ */ jsx7(ToolCallCard, { tool: group.tool }) }, group.tool.toolCallId);
+                      }),
+                      showMessageActions && textContent && /* @__PURE__ */ jsx7(MessageActions, { content: textContent })
+                    ] })
+                  },
+                  msg.id
+                );
+              }),
+              isLoading && /* @__PURE__ */ jsx7("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx7("div", { className: "bg-neutral-100 dark:bg-neutral-800 rounded-[20px] rounded-bl-[4px] px-4 py-3", children: /* @__PURE__ */ jsxs4("div", { className: "flex gap-1.5 items-center", children: [
+                /* @__PURE__ */ jsx7("span", { className: cn(theme.loading) }),
+                /* @__PURE__ */ jsx7("span", { className: cn(theme.loading), style: { animationDelay: "0.15s" } }),
+                /* @__PURE__ */ jsx7("span", { className: cn(theme.loading), style: { animationDelay: "0.3s" } })
+              ] }) }) }),
+              /* @__PURE__ */ jsx7("div", { ref: messagesEndRef })
+            ] }),
+            showScrollButton && /* @__PURE__ */ jsx7(
+              ConversationScrollButton,
+              {
+                onClick: () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsxs4("div", { className: "mx-4 mb-2 px-4 py-3 bg-red-50 dark:bg-red-900/20 rounded-2xl text-red-600 dark:text-red-400 text-sm flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx7("span", { children: error.message }),
+            reload && /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                onClick: reload,
+                className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/40 hover:bg-red-200 dark:hover:bg-red-900/60 rounded-lg transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx7(RefreshCwIcon, { className: "size-3.5" }),
+                  "Retry"
+                ]
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx7("div", { className: "flex-shrink-0 bg-white dark:bg-neutral-900 border-t border-neutral-200 dark:border-neutral-800", children: /* @__PURE__ */ jsx7(
             "form",
             {