@tangle-network/ui 1.0.0

package/dist/chunk-2NFQRQOD.js

@@ -0,0 +1,1009 @@
+import {
+  useAutoScroll,
+  useRunCollapseState,
+  useRunGroups
+} from "./chunk-54SQQMMM.js";
+import {
+  InlineThinkingItem,
+  RunGroup
+} from "./chunk-YNN4O57I.js";
+import {
+  ToolCallGroup,
+  ToolCallStep
+} from "./chunk-2VH6PUXD.js";
+import {
+  getToolDisplayMetadata
+} from "./chunk-BX6AQMUS.js";
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-TMFOPHHN.js";
+import {
+  Markdown
+} from "./chunk-CD53GZOM.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/chat/chat-container.tsx
+import {
+  memo as memo3,
+  useCallback as useCallback2,
+  useMemo,
+  useRef as useRef2
+} from "react";
+import { ArrowDown } from "lucide-react";
+
+// src/chat/message-list.tsx
+import { memo as memo2 } from "react";
+
+// src/chat/user-message.tsx
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UserMessage = memo(({ message, parts, actions }) => {
+  const textContent = parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
+  if (!textContent.trim()) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[26px] rounded-br-[12px] bg-[var(--brand-primary)] px-4 py-3 text-white shadow-[0_8px_20px_rgba(15,23,42,0.12)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/60", children: "You" }),
+      /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[15px] leading-6.5 text-white", children: textContent })
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
+  ] }) });
+});
+UserMessage.displayName = "UserMessage";
+
+// src/chat/message-list.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MessageList = memo2(
+  ({
+    groups,
+    partMap,
+    isCollapsed,
+    onToggleCollapse,
+    branding,
+    renderToolDetail,
+    renderRunActions,
+    renderUserMessageActions,
+    renderToolActions
+  }) => {
+    return /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: groups.map((group) => {
+      if (group.type === "user") {
+        const messageParts = partMap[group.message.id] ?? [];
+        return /* @__PURE__ */ jsx2(
+          UserMessage,
+          {
+            message: group.message,
+            parts: messageParts,
+            actions: renderUserMessageActions?.(group.message, messageParts)
+          },
+          group.message.id
+        );
+      }
+      return /* @__PURE__ */ jsx2(
+        RunGroup,
+        {
+          run: group.run,
+          partMap,
+          collapsed: isCollapsed(group.run.id),
+          onToggle: () => onToggleCollapse(group.run.id),
+          branding,
+          renderToolDetail,
+          headerActions: renderRunActions?.(group.run),
+          renderToolActions
+        },
+        group.run.id
+      );
+    }) });
+  }
+);
+MessageList.displayName = "MessageList";
+
+// src/chat/agent-timeline.tsx
+import {
+  AlertTriangle,
+  CheckCircle2,
+  CircleDot,
+  FileText,
+  Info
+} from "lucide-react";
+
+// src/chat/thinking-indicator.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ThinkingIndicator({ className }) {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    const interval = window.setInterval(() => setElapsed((current) => current + 1), 1e3);
+    return () => window.clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center gap-2 px-3 py-1.5", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex gap-[3px]", children: [
+      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
+      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
+      /* @__PURE__ */ jsx3("span", { className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
+    ] }),
+    elapsed > 3 && /* @__PURE__ */ jsxs2("span", { className: "text-[var(--font-size-xs)] tabular-nums text-[var(--text-dim)]", children: [
+      elapsed,
+      "s"
+    ] })
+  ] });
+}
+
+// src/chat/agent-timeline.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TONE_STYLES = {
+  default: {
+    dot: "bg-[var(--border-hover)]",
+    card: "border-border bg-card",
+    text: "text-foreground",
+    icon: CircleDot
+  },
+  info: {
+    dot: "bg-[var(--surface-info-text)]",
+    card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
+    text: "text-[var(--surface-info-text)]",
+    icon: Info
+  },
+  success: {
+    dot: "bg-[var(--surface-success-text)]",
+    card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
+    text: "text-[var(--surface-success-text)]",
+    icon: CheckCircle2
+  },
+  warning: {
+    dot: "bg-[var(--surface-warning-text)]",
+    card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
+    text: "text-[var(--surface-warning-text)]",
+    icon: AlertTriangle
+  },
+  error: {
+    dot: "bg-[var(--surface-danger-text)]",
+    card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
+    text: "text-[var(--surface-danger-text)]",
+    icon: AlertTriangle
+  }
+};
+function formatTime(date) {
+  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function AgentTimelineRow({ isLast, accentClassName, children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "relative flex justify-center", children: [
+      !isLast && /* @__PURE__ */ jsx4("span", { className: "absolute top-4 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-border" }),
+      /* @__PURE__ */ jsx4("span", { className: cn("relative mt-2 h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", accentClassName) })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "min-w-0 pb-3", children })
+  ] });
+}
+function UserMessage2({ item }) {
+  return /* @__PURE__ */ jsx4("div", { className: "mb-3 flex justify-end", children: /* @__PURE__ */ jsx4("div", { className: "max-w-[72%]", children: /* @__PURE__ */ jsxs3("div", { className: "rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
+    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
+    /* @__PURE__ */ jsx4("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: item.content })
+  ] }) }) });
+}
+function AssistantMessage({ item }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "-mt-0.5", children: [
+    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
+    item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: item.content }),
+    item.isStreaming && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-primary align-text-bottom" }),
+    item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-3", children: item.toolCalls }),
+    item.after && /* @__PURE__ */ jsx4("div", { className: "mt-3 border-t border-border pt-3", children: item.after })
+  ] });
+}
+function StatusCard({ item }) {
+  const tone = TONE_STYLES[item.tone ?? "default"];
+  const Icon = tone.icon;
+  return /* @__PURE__ */ jsx4("div", { className: cn("rounded-[var(--radius-lg)] border px-4 py-3", tone.card), children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx4(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", tone.text) }),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx4("div", { className: cn("text-sm font-medium", tone.text), children: item.label }),
+      item.detail && /* @__PURE__ */ jsx4("div", { className: "mt-0.5 text-sm text-muted-foreground", children: item.detail })
+    ] })
+  ] }) });
+}
+function ArtifactCard({ item }) {
+  const tone = TONE_STYLES[item.tone ?? "default"];
+  const content = /* @__PURE__ */ jsx4("div", { className: cn("rounded-[var(--radius-lg)] border px-4 py-3", tone.card), children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx4("div", { className: "mt-0.5 flex h-[var(--avatar-size)] w-[var(--avatar-size)] shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-muted/50 text-foreground", children: item.icon ?? /* @__PURE__ */ jsx4(FileText, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx4("div", { className: "text-sm font-medium text-foreground", children: item.title }),
+      item.description && /* @__PURE__ */ jsx4("div", { className: "mt-1 text-sm text-muted-foreground", children: item.description }),
+      item.meta && /* @__PURE__ */ jsx4("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: item.meta })
+    ] }),
+    item.action && /* @__PURE__ */ jsx4("div", { className: "shrink-0", children: item.action })
+  ] }) });
+  if (!item.onClick) return content;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick: item.onClick,
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          item.onClick?.();
+        }
+      },
+      className: "block w-full text-left transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+      children: content
+    }
+  );
+}
+function AgentTimeline({
+  items,
+  isThinking,
+  emptyState,
+  className
+}) {
+  if (items.length === 0 && !isThinking) {
+    return emptyState ? /* @__PURE__ */ jsx4("div", { className: cn("flex h-full items-center justify-center p-4", className), children: emptyState }) : null;
+  }
+  const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }] : items;
+  const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
+  return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
+    if (item.kind === "message" && item.role === "user") {
+      return /* @__PURE__ */ jsx4(UserMessage2, { item }, item.id);
+    }
+    const timelineIndex = timelineItems.indexOf(item);
+    const isLast = timelineIndex === timelineItems.length - 1;
+    if (item.kind === "message") {
+      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--brand-glow)]", children: /* @__PURE__ */ jsx4(AssistantMessage, { item }) }, item.id);
+    }
+    if (item.kind === "tool") {
+      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
+        ToolCallStep,
+        {
+          type: item.call.type,
+          label: item.call.label,
+          status: item.call.status,
+          detail: item.call.detail,
+          output: item.call.output,
+          duration: item.call.duration
+        }
+      ) }, item.id);
+    }
+    if (item.kind === "tool_group") {
+      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call) => /* @__PURE__ */ jsx4(
+        ToolCallStep,
+        {
+          type: call.type,
+          label: call.label,
+          status: call.status,
+          detail: call.detail,
+          output: call.output,
+          duration: call.duration
+        },
+        call.id
+      )) }) }, item.id);
+    }
+    if (item.kind === "status") {
+      return /* @__PURE__ */ jsx4(
+        AgentTimelineRow,
+        {
+          isLast,
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(StatusCard, { item })
+        },
+        item.id
+      );
+    }
+    if (item.kind === "artifact") {
+      return /* @__PURE__ */ jsx4(
+        AgentTimelineRow,
+        {
+          isLast,
+          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+          children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: item.content }, item.id);
+  }) });
+}
+
+// src/chat/chat-input.tsx
+import { useState as useState2, useRef, useCallback } from "react";
+import { Send, Square, Paperclip, FolderUp, X, Upload } from "lucide-react";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChatInput({
+  onSend,
+  onCancel,
+  isStreaming,
+  disabled,
+  placeholder = "Ask the agent to inspect files, run commands, or explain results\u2026",
+  modelLabel,
+  onModelClick,
+  pendingFiles = [],
+  onRemoveFile,
+  onAttach,
+  onAttachFolder,
+  accept,
+  dropTitle = "Drop files to add context",
+  dropDescription = "Files will be attached to your next message.",
+  className,
+  inputLabel = "Agent Command Deck",
+  idleStatus = "Ready for next instruction",
+  streamingStatus = "Streaming response",
+  hideShortcutHint
+}) {
+  const [value, setValue] = useState2("");
+  const [dragOver, setDragOver] = useState2(false);
+  const dragCounter = useRef(0);
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const folderInputRef = useRef(null);
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || isStreaming || disabled) return;
+    onSend(trimmed);
+    setValue("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }, [value, isStreaming, disabled, onSend]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  };
+  const handleAttachClick = () => {
+    fileInputRef.current?.click();
+  };
+  const handleFolderClick = () => {
+    folderInputRef.current?.click();
+  };
+  const handleFileChange = (e) => {
+    if (e.target.files?.length) {
+      onAttach?.(e.target.files);
+      e.target.value = "";
+    }
+  };
+  const handleFolderChange = (e) => {
+    if (e.target.files?.length) {
+      (onAttachFolder ?? onAttach)?.(e.target.files);
+      e.target.value = "";
+    }
+  };
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current++;
+    if (e.dataTransfer?.types.includes("Files")) {
+      setDragOver(true);
+    }
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setDragOver(false);
+    }
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "copy";
+  }, []);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounter.current = 0;
+    setDragOver(false);
+    const files = e.dataTransfer?.files;
+    if (files?.length && onAttach) {
+      onAttach(files);
+    }
+  }, [onAttach]);
+  const fileChips = pendingFiles.filter((f) => f.type === "file" || !f.type);
+  const folderChips = pendingFiles.filter((f) => f.type === "folder");
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn("relative", className),
+      onDragEnter: onAttach ? handleDragEnter : void 0,
+      onDragLeave: onAttach ? handleDragLeave : void 0,
+      onDragOver: onAttach ? handleDragOver : void 0,
+      onDrop: onAttach ? handleDrop : void 0,
+      children: [
+        dragOver && /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-[var(--radius-xl)] border-2 border-dashed border-border bg-card pointer-events-none", children: /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx5("div", { className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--accent-surface-soft)]", children: /* @__PURE__ */ jsx5(Upload, { className: "h-6 w-6 text-primary" }) }),
+          /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-foreground", children: dropTitle }),
+          /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-muted-foreground", children: dropDescription })
+        ] }) }),
+        pendingFiles.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "mb-3 flex flex-wrap gap-2", children: [
+          folderChips.map((f) => /* @__PURE__ */ jsxs4(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs",
+                "border-border bg-muted/50",
+                f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+                f.status !== "error" && "text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsx5(FolderUp, { className: "h-3 w-3 shrink-0" }),
+                /* @__PURE__ */ jsx5("span", { className: "truncate max-w-[150px]", children: f.name }),
+                f.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
+                  "(",
+                  f.fileCount,
+                  ")"
+                ] }),
+                f.status === "uploading" && /* @__PURE__ */ jsx5("span", { className: "w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
+                onRemoveFile && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${f.name}`,
+                    onClick: () => onRemoveFile(f.id),
+                    className: "rounded p-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+                    children: /* @__PURE__ */ jsx5(X, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            f.id
+          )),
+          fileChips.map((f) => /* @__PURE__ */ jsxs4(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border px-3 py-1.5 text-xs",
+                "border-border bg-muted/50",
+                f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+                f.status !== "error" && "text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsx5(Paperclip, { className: "h-3 w-3 shrink-0" }),
+                /* @__PURE__ */ jsx5("span", { className: "truncate max-w-[150px]", children: f.name }),
+                f.status === "uploading" && /* @__PURE__ */ jsx5("span", { className: "w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
+                onRemoveFile && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${f.name}`,
+                    onClick: () => onRemoveFile(f.id),
+                    className: "rounded p-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+                    children: /* @__PURE__ */ jsx5(X, { className: "h-3 w-3" })
+                  }
+                )
+              ]
+            },
+            f.id
+          ))
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "rounded-[24px] border border-[var(--chat-input-border,var(--border-default))] [background:var(--chat-input-bg,var(--bg-card))] shadow-[var(--chat-input-shadow,0_1px_2px_rgba(15,23,42,0.05))] transition-all focus-within:border-[var(--chat-input-focus-border,var(--border-accent))] focus-within:shadow-[var(--chat-input-focus-shadow,0_10px_30px_rgba(15,23,42,0.08))]", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-[24px] px-4 py-[var(--chat-input-py)]", children: [
+          (inputLabel !== null || idleStatus !== null || streamingStatus !== null) && /* @__PURE__ */ jsxs4("div", { className: "mb-1.5 flex items-center justify-between gap-3 px-1", children: [
+            inputLabel !== null && /* @__PURE__ */ jsx5("div", { className: "text-[var(--chat-label-size,11px)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.16em)] text-[var(--text-muted)]", children: inputLabel }),
+            (idleStatus !== null || streamingStatus !== null) && /* @__PURE__ */ jsx5("div", { className: "text-[var(--chat-label-size,11px)] text-[var(--text-muted)]", children: isStreaming ? streamingStatus ?? "" : idleStatus ?? "" })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2.5", children: [
+            onAttach && /* @__PURE__ */ jsxs4(Fragment, { children: [
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAttachClick,
+                  disabled: isStreaming,
+                  "aria-label": "Attach files",
+                  title: "Attach files",
+                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+                  children: /* @__PURE__ */ jsx5(Paperclip, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  onChange: handleFileChange,
+                  accept: accept ?? ".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif,.txt,.json,.yaml,.yml"
+                }
+              )
+            ] }),
+            (onAttachFolder ?? onAttach) && /* @__PURE__ */ jsxs4(Fragment, { children: [
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleFolderClick,
+                  disabled: isStreaming,
+                  "aria-label": "Attach folder",
+                  title: "Attach folder",
+                  className: "mb-0.5 shrink-0 rounded-[var(--radius-md)] border border-transparent p-2 text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+                  children: /* @__PURE__ */ jsx5(FolderUp, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  ref: folderInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  onChange: handleFolderChange,
+                  webkitdirectory: ""
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx5(
+              "textarea",
+              {
+                ref: textareaRef,
+                value,
+                onChange: handleChange,
+                onKeyDown: handleKeyDown,
+                placeholder,
+                disabled: isStreaming || disabled,
+                rows: 1,
+                "aria-label": "Message input",
+                className: "min-h-[42px] max-h-[160px] flex-1 resize-none bg-transparent py-2 text-[15px] leading-6 text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus-visible:outline-none"
+              }
+            ),
+            isStreaming ? /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                "aria-label": "Stop response",
+                className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--code-error)]/20 bg-[var(--code-error)]/14 p-2.5 text-[var(--code-error)] transition-colors hover:bg-[var(--code-error)]/24 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--code-error)]/50",
+                children: /* @__PURE__ */ jsx5(Square, { className: "h-4 w-4" })
+              }
+            ) : /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                type: "button",
+                onClick: handleSend,
+                disabled: !value.trim() || disabled,
+                "aria-label": "Send message",
+                className: "mb-0.5 inline-flex shrink-0 items-center gap-1.5 rounded-full border border-[var(--chat-send-border,var(--border-accent))] [background:var(--chat-send-bg,var(--brand-primary))] px-3.5 py-2.5 text-sm font-medium text-[var(--chat-send-color,white)] shadow-[var(--chat-send-shadow,0_6px_16px_rgba(15,23,42,0.12))] transition-all hover:translate-y-[-1px] hover:[background:var(--chat-send-hover-bg,var(--brand-strong))] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chat-send-ring,var(--border-accent))]",
+                children: [
+                  /* @__PURE__ */ jsx5(Send, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx5("span", { children: "Send" })
+                ]
+              }
+            )
+          ] })
+        ] }) }),
+        (modelLabel || !hideShortcutHint) && /* @__PURE__ */ jsxs4("div", { className: "mt-2 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-2", children: modelLabel && /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              onClick: onModelClick,
+              "aria-label": `Select model, current model ${modelLabel}`,
+              className: "inline-flex items-center gap-1.5 rounded-[var(--radius-full)] border border-border bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/20 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+              children: [
+                /* @__PURE__ */ jsx5("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--code-success)]" }),
+                modelLabel
+              ]
+            }
+          ) }),
+          !hideShortcutHint && /* @__PURE__ */ jsxs4("span", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx5("kbd", { className: "px-1 py-0.5 bg-background rounded border border-border text-[10px]", children: "Cmd" }),
+            /* @__PURE__ */ jsx5("kbd", { className: "px-1 py-0.5 bg-background rounded border border-border text-[10px] ml-0.5", children: "L" }),
+            /* @__PURE__ */ jsx5("span", { className: "ml-1", children: "to focus" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/chat/chat-container.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var OPENUI_NODE_TYPES = /* @__PURE__ */ new Set([
+  "heading",
+  "text",
+  "badge",
+  "stat",
+  "key_value",
+  "code",
+  "markdown",
+  "table",
+  "actions",
+  "separator",
+  "stack",
+  "grid",
+  "card"
+]);
+function isOpenUINode(value) {
+  return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string" && OPENUI_NODE_TYPES.has(value.type);
+}
+function extractOpenUISchema(output) {
+  if (output == null) return null;
+  if (isOpenUINode(output)) return [output];
+  if (Array.isArray(output) && output.length > 0 && output.every(isOpenUINode)) {
+    return output;
+  }
+  if (typeof output === "object" && !Array.isArray(output)) {
+    const obj = output;
+    for (const key of ["openui", "schema", "ui"]) {
+      if (obj[key]) {
+        const inner = obj[key];
+        if (isOpenUINode(inner)) return [inner];
+        if (Array.isArray(inner) && inner.length > 0 && inner.every(isOpenUINode)) {
+          return inner;
+        }
+      }
+    }
+  }
+  if (typeof output === "string") {
+    try {
+      const parsed = JSON.parse(output);
+      return extractOpenUISchema(parsed);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+function formatUnknown(value) {
+  if (value == null) return void 0;
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function createdAtFromMessage(message) {
+  return message.time?.created ? new Date(message.time.created) : void 0;
+}
+function mapToolPartToTimelineType(part) {
+  const name = part.tool.toLowerCase().replace(/^tool:/, "");
+  switch (name) {
+    case "bash":
+    case "shell":
+    case "command":
+    case "execute":
+      return "bash";
+    case "write":
+    case "write_file":
+    case "create_file":
+      return "write";
+    case "read":
+    case "read_file":
+    case "cat":
+      return "read";
+    case "edit":
+    case "patch":
+    case "sed":
+      return "edit";
+    case "glob":
+    case "find":
+      return "glob";
+    case "ls":
+      return "list";
+    case "grep":
+    case "search":
+    case "rg":
+      return "grep";
+    case "inspect":
+      return "inspect";
+    default:
+      return "unknown";
+  }
+}
+function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI = true) {
+  const items = [];
+  const lastAssistantMessage = [...messages].reverse().find((message) => message.role === "assistant");
+  const toToolCall = (part) => {
+    const meta = getToolDisplayMetadata(part);
+    const start = part.state.time?.start;
+    const end = part.state.time?.end;
+    return {
+      id: part.id,
+      type: mapToolPartToTimelineType(part),
+      label: meta.description ? `${meta.title}: ${meta.description}` : meta.title,
+      status: part.state.status === "completed" ? "success" : part.state.status === "error" ? "error" : "running",
+      detail: formatUnknown(part.state.input),
+      output: formatUnknown(part.state.output),
+      duration: start && end ? end - start : void 0
+    };
+  };
+  for (const message of messages) {
+    const parts = partMap[message.id] ?? [];
+    if (message.role === "user") {
+      const content = parts.filter((part) => part.type === "text").map((part) => part.text).join("\n").trim();
+      if (!content) continue;
+      items.push({
+        id: message.id,
+        kind: "message",
+        role: "user",
+        content,
+        timestamp: createdAtFromMessage(message)
+      });
+      continue;
+    }
+    const toolBuffer = [];
+    const flushToolBuffer = (index) => {
+      if (toolBuffer.length === 0) return;
+      if (toolBuffer.length === 1) {
+        items.push({
+          id: `${message.id}-tool-${toolBuffer[0].id}`,
+          kind: "tool",
+          call: toToolCall(toolBuffer[0])
+        });
+      } else {
+        items.push({
+          id: `${message.id}-tool-group-${index}`,
+          kind: "tool_group",
+          title: "Tool activity",
+          calls: toolBuffer.map((part) => toToolCall(part))
+        });
+      }
+      if (enableOpenUI) {
+        for (const part of toolBuffer) {
+          if (part.state.status !== "completed" || !part.state.output) continue;
+          const schema = extractOpenUISchema(part.state.output);
+          if (!schema) continue;
+          items.push({
+            id: `${message.id}-openui-${part.id}`,
+            kind: "custom",
+            content: /* @__PURE__ */ jsx6("div", { className: "my-2 rounded-[var(--radius-lg)] border border-border bg-card p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx6(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
+          });
+        }
+      }
+      toolBuffer.length = 0;
+    };
+    parts.forEach((part, index) => {
+      const itemId = `${message.id}-${index}`;
+      if (part.type === "tool") {
+        toolBuffer.push(part);
+        return;
+      }
+      flushToolBuffer(index);
+      if (part.type === "text" && !part.synthetic && part.text.trim()) {
+        if (enableOpenUI) {
+          const jsonMatch = part.text.match(/```(?:json)?\s*\n([\s\S]*?)\n```/);
+          if (jsonMatch) {
+            const schema = extractOpenUISchema(jsonMatch[1]);
+            if (schema) {
+              const beforeJson = part.text.slice(0, part.text.indexOf("```")).trim();
+              if (beforeJson) {
+                items.push({
+                  id: `${itemId}-text`,
+                  kind: "message",
+                  role: "assistant",
+                  content: beforeJson,
+                  timestamp: createdAtFromMessage(message)
+                });
+              }
+              items.push({
+                id: `${itemId}-openui`,
+                kind: "custom",
+                content: /* @__PURE__ */ jsx6("div", { className: "my-2 rounded-[var(--radius-lg)] border border-border bg-card p-4 shadow-[var(--shadow-card)]", children: /* @__PURE__ */ jsx6(OpenUIArtifactRenderer, { schema, onAction: onOpenUIAction }) })
+              });
+              const afterJson = part.text.slice(part.text.lastIndexOf("```") + 3).trim();
+              if (afterJson) {
+                items.push({
+                  id: `${itemId}-after`,
+                  kind: "message",
+                  role: "assistant",
+                  content: afterJson,
+                  timestamp: createdAtFromMessage(message)
+                });
+              }
+              return;
+            }
+          }
+        }
+        items.push({
+          id: itemId,
+          kind: "message",
+          role: "assistant",
+          content: part.text,
+          timestamp: createdAtFromMessage(message),
+          isStreaming: isStreaming && lastAssistantMessage?.id === message.id && index === parts.length - 1
+        });
+        return;
+      }
+      if (part.type === "reasoning") {
+        items.push({
+          id: itemId,
+          kind: "custom",
+          content: /* @__PURE__ */ jsx6(InlineThinkingItem, { part, defaultOpen: isStreaming && lastAssistantMessage?.id === message.id })
+        });
+        return;
+      }
+    });
+    flushToolBuffer(parts.length);
+  }
+  const showThinking = isStreaming && lastAssistantMessage != null && !items.some(
+    (item) => item.kind === "message" && item.role === "assistant" && item.id.startsWith(lastAssistantMessage.id)
+  );
+  return { items, showThinking };
+}
+var ChatContainer = memo3(
+  ({
+    messages,
+    partMap,
+    isStreaming,
+    onSend,
+    onCancel,
+    branding,
+    placeholder = "Type a message...",
+    className,
+    hideInput = false,
+    renderToolDetail,
+    presentation = "runs",
+    modelLabel,
+    onModelClick,
+    pendingFiles,
+    onRemoveFile,
+    onAttach,
+    disabled = false,
+    onOpenUIAction,
+    enableOpenUI = true,
+    renderRunActions,
+    renderUserMessageActions,
+    renderToolActions
+  }) => {
+    const scrollRef = useRef2(null);
+    const groups = useRunGroups({ messages, partMap, isStreaming });
+    const runs = groups.filter((g) => g.type === "run").map((g) => g.run);
+    const { isCollapsed, toggleCollapse } = useRunCollapseState(runs);
+    const { isAtBottom, scrollToBottom } = useAutoScroll(scrollRef, [
+      messages,
+      partMap,
+      isStreaming
+    ]);
+    const timeline = useMemo(
+      () => buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI),
+      [messages, partMap, isStreaming, onOpenUIAction, enableOpenUI]
+    );
+    const handleSend = useCallback2(
+      (text) => {
+        onSend?.(text);
+      },
+      [onSend]
+    );
+    return /* @__PURE__ */ jsxs5("div", { className: cn("flex h-full flex-col", className), children: [
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          ref: scrollRef,
+          className: "flex-1 overflow-y-auto [scrollbar-gutter:stable]",
+          children: messages.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx6("div", { className: "max-w-md text-center", children: /* @__PURE__ */ jsx6("div", { className: "text-sm font-medium text-muted-foreground", children: "Start a conversation." }) }) }) : presentation === "timeline" ? /* @__PURE__ */ jsx6("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx6(AgentTimeline, { items: timeline.items, isThinking: timeline.showThinking }) }) : /* @__PURE__ */ jsx6("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx6(
+            MessageList,
+            {
+              groups,
+              partMap,
+              isCollapsed,
+              onToggleCollapse: toggleCollapse,
+              branding,
+              renderToolDetail,
+              renderRunActions,
+              renderUserMessageActions,
+              renderToolActions
+            }
+          ) })
+        }
+      ),
+      !isAtBottom && /* @__PURE__ */ jsx6("div", { className: "relative z-10 -mt-10 flex justify-center", children: /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          onClick: scrollToBottom,
+          className: cn(
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
+            "border border-border bg-card shadow-[0_6px_16px_rgba(15,23,42,0.08)]",
+            "text-xs text-foreground transition-colors hover:bg-accent",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+          ),
+          children: [
+            /* @__PURE__ */ jsx6(ArrowDown, { className: "w-3 h-3" }),
+            "Scroll to bottom"
+          ]
+        }
+      ) }),
+      !hideInput && onSend && /* @__PURE__ */ jsx6(
+        ChatInput,
+        {
+          onSend: handleSend,
+          onCancel,
+          isStreaming,
+          placeholder,
+          modelLabel,
+          onModelClick,
+          pendingFiles,
+          onRemoveFile,
+          onAttach,
+          disabled,
+          className: "shrink-0 border-t border-border bg-background"
+        }
+      )
+    ] });
+  }
+);
+ChatContainer.displayName = "ChatContainer";
+
+// src/chat/chat-message.tsx
+import { User, Bot } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChatMessage({
+  role,
+  content,
+  toolCalls,
+  isStreaming,
+  timestamp,
+  className,
+  userLabel = "You",
+  assistantLabel = "Agent",
+  hideRoleLabel,
+  hideAvatar,
+  avatar
+}) {
+  const isUser = role === "user";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "flex gap-3",
+        isUser ? "flex-row-reverse" : "flex-row",
+        className
+      ),
+      children: [
+        !hideAvatar && (avatar ? /* @__PURE__ */ jsx7("div", { className: "mt-0.5 shrink-0", children: avatar }) : /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: cn(
+              "mt-0.5 flex shrink-0 items-center justify-center rounded-[calc(var(--radius-md)+2px)] border",
+              "h-[var(--avatar-size)] w-[var(--avatar-size)]",
+              isUser ? "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-border bg-muted text-[var(--brand-cool)]"
+            ),
+            children: isUser ? /* @__PURE__ */ jsx7(User, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(Bot, { className: "h-3.5 w-3.5" })
+          }
+        )),
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: cn(
+              "min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border",
+              "px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
+              isUser ? "border-border bg-muted/50" : "border-border bg-card"
+            ),
+            children: [
+              !hideRoleLabel && /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-2", isUser && "flex-row-reverse"), children: [
+                /* @__PURE__ */ jsx7("span", { className: "text-[var(--font-size-xs)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.14em)] text-foreground", children: isUser ? userLabel : assistantLabel }),
+                timestamp && /* @__PURE__ */ jsx7("span", { className: "text-[var(--font-size-xs)] text-muted-foreground", children: formatTime2(timestamp) })
+              ] }),
+              isUser ? /* @__PURE__ */ jsx7("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: content }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                content && /* @__PURE__ */ jsx7(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: content }),
+                isStreaming && /* @__PURE__ */ jsx7("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })
+              ] }),
+              toolCalls
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function formatTime2(date) {
+  return date.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+
+export {
+  UserMessage,
+  MessageList,
+  ThinkingIndicator,
+  AgentTimeline,
+  ChatInput,
+  ChatContainer,
+  ChatMessage
+};