@tangle-network/sandbox-ui 0.2.0

package/dist/chunk-U62G5TS7.js

@@ -0,0 +1,472 @@
+import {
+  useAutoScroll,
+  useRunCollapseState,
+  useRunGroups
+} from "./chunk-KMXV7DDX.js";
+import {
+  RunGroup
+} from "./chunk-6MQIDUPA.js";
+import {
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  SimpleMarkdown
+} from "./chunk-M34OA6PQ.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/chat/chat-message.tsx
+import { User, Bot } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ChatMessage({
+  role,
+  content,
+  toolCalls,
+  isStreaming,
+  timestamp,
+  className
+}) {
+  const isUser = role === "user";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 px-4 py-3", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-7 h-7 rounded-lg shrink-0 flex items-center justify-center mt-0.5",
+          isUser ? "bg-[var(--brand-cool)]/15 text-[var(--brand-cool)]" : "bg-[var(--brand-glow)]/15 text-[var(--brand-glow)]"
+        ),
+        children: isUser ? /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Bot, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[var(--text-secondary)]", children: isUser ? "You" : "Agent" }),
+        timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: formatTime(timestamp) })
+      ] }),
+      isUser ? /* @__PURE__ */ jsx("div", { className: "text-[var(--text-primary)] text-sm whitespace-pre-wrap leading-relaxed", children: content }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        content && /* @__PURE__ */ jsx(SimpleMarkdown, { content }),
+        isStreaming && /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-4 bg-[var(--brand-cool)] animate-pulse rounded-sm ml-0.5 align-text-bottom" })
+      ] }),
+      toolCalls
+    ] })
+  ] });
+}
+function formatTime(date) {
+  return date.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+
+// src/chat/chat-message-list.tsx
+import { useRef, useEffect, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatMessageList({
+  messages,
+  renderAfter,
+  emptyState,
+  isThinking,
+  className
+}) {
+  const containerRef = useRef(null);
+  const endRef = useRef(null);
+  const [isNearBottom, setIsNearBottom] = useState(true);
+  const handleScroll = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const threshold = 100;
+    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    setIsNearBottom(nearBottom);
+  };
+  useEffect(() => {
+    if (isNearBottom) {
+      endRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, isThinking, isNearBottom]);
+  if (messages.length === 0 && emptyState) {
+    return /* @__PURE__ */ jsx2("div", { className: cn("flex-1 flex items-center justify-center p-8", className), children: emptyState });
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      onScroll: handleScroll,
+      className: cn("flex-1 overflow-y-auto", className),
+      children: /* @__PURE__ */ jsxs2("div", { className: "max-w-3xl mx-auto py-4", children: [
+        messages.map((msg, i) => /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2(
+            ChatMessage,
+            {
+              role: msg.role,
+              content: msg.content,
+              toolCalls: msg.toolCalls,
+              isStreaming: msg.isStreaming,
+              timestamp: msg.timestamp
+            }
+          ),
+          renderAfter?.(msg, i)
+        ] }, msg.id)),
+        isThinking && /* @__PURE__ */ jsx2(ThinkingIndicator, {}),
+        /* @__PURE__ */ jsx2("div", { ref: endRef })
+      ] })
+    }
+  );
+}
+function ThinkingIndicator({ className }) {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => setElapsed((e) => e + 1), 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex gap-3 px-4 py-3", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "w-7 h-7 rounded-lg shrink-0 flex items-center justify-center mt-0.5 bg-[var(--brand-glow)]/15 text-[var(--brand-glow)]", children: /* @__PURE__ */ jsxs2("div", { className: "flex gap-0.5", children: [
+      /* @__PURE__ */ jsx2("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce", style: { animationDelay: "0ms" } }),
+      /* @__PURE__ */ jsx2("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce", style: { animationDelay: "150ms" } }),
+      /* @__PURE__ */ jsx2("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce", style: { animationDelay: "300ms" } })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-sm text-[var(--text-muted)]", children: elapsed < 10 ? "Thinking..." : elapsed < 60 ? "Thinking deeply..." : "Still working..." }),
+      elapsed > 5 && /* @__PURE__ */ jsxs2("span", { className: "text-xs text-[var(--text-muted)] tabular-nums", children: [
+        elapsed,
+        "s"
+      ] })
+    ] })
+  ] });
+}
+
+// src/chat/chat-input.tsx
+import { useState as useState2, useRef as useRef2, useCallback } from "react";
+import { Send, Square, Paperclip, X } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ChatInput({
+  onSend,
+  onCancel,
+  isStreaming,
+  disabled,
+  placeholder = "Ask about your taxes, build a model, or give instructions...",
+  modelLabel,
+  onModelClick,
+  pendingFiles = [],
+  onRemoveFile,
+  onAttach,
+  className
+}) {
+  const [value, setValue] = useState2("");
+  const textareaRef = useRef2(null);
+  const fileInputRef = useRef2(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 handleFileChange = (e) => {
+    if (e.target.files?.length) {
+      onAttach?.(e.target.files);
+      e.target.value = "";
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: cn("px-4 py-3", className), children: [
+    pendingFiles.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-1.5 mb-2", children: pendingFiles.map((f) => /* @__PURE__ */ jsxs3(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-[var(--radius-full)] text-xs",
+          "bg-[var(--bg-input)] border border-[var(--border-subtle)]",
+          f.status === "error" && "border-[var(--code-error)]/30 text-[var(--code-error)]",
+          f.status !== "error" && "text-[var(--text-secondary)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "truncate max-w-[150px]", children: f.name }),
+          f.status === "uploading" && /* @__PURE__ */ jsx3("span", { className: "w-3 h-3 border-2 border-[var(--brand-cool)] border-t-transparent rounded-full animate-spin" }),
+          onRemoveFile && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => onRemoveFile(f.id),
+              className: "hover:text-[var(--text-primary)] transition-colors",
+              children: /* @__PURE__ */ jsx3(X, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      f.id
+    )) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-2 bg-[var(--bg-card)] border border-[var(--border-default)] rounded-[var(--radius-lg)] px-3 py-2 focus-within:border-[var(--border-accent)] transition-colors", children: [
+      onAttach && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: handleAttachClick,
+            disabled: isStreaming,
+            className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors disabled:opacity-50 shrink-0 mb-0.5",
+            children: /* @__PURE__ */ jsx3(Paperclip, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            className: "hidden",
+            onChange: handleFileChange,
+            accept: ".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png,.gif,.txt,.json,.yaml,.yml"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          ref: textareaRef,
+          value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled: isStreaming || disabled,
+          rows: 1,
+          className: "flex-1 bg-transparent text-[var(--text-primary)] text-sm placeholder:text-[var(--text-muted)] resize-none outline-none min-h-[24px] max-h-[160px] leading-relaxed disabled:opacity-50"
+        }
+      ),
+      isStreaming ? /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: onCancel,
+          className: "p-1.5 rounded-[var(--radius-sm)] bg-[var(--code-error)]/15 hover:bg-[var(--code-error)]/25 text-[var(--code-error)] transition-colors shrink-0 mb-0.5",
+          children: /* @__PURE__ */ jsx3(Square, { className: "h-4 w-4" })
+        }
+      ) : /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: handleSend,
+          disabled: !value.trim() || disabled,
+          className: "p-1.5 rounded-[var(--radius-sm)] bg-[var(--brand-cool)]/15 hover:bg-[var(--brand-cool)]/25 text-[var(--brand-cool)] transition-colors disabled:opacity-30 shrink-0 mb-0.5",
+          children: /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mt-1.5 px-1", children: [
+      /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: modelLabel && /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: onModelClick,
+          className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] text-xs text-[var(--text-muted)] hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] transition-colors",
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--code-success)]" }),
+            modelLabel
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs3("span", { className: "text-xs text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx3("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px]", children: "Cmd" }),
+        /* @__PURE__ */ jsx3("kbd", { className: "px-1 py-0.5 bg-[var(--bg-input)] rounded border border-[var(--border-subtle)] text-[10px] ml-0.5", children: "L" }),
+        /* @__PURE__ */ jsx3("span", { className: "ml-1", children: "to focus" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/chat/user-message.tsx
+import { memo } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var UserMessage = memo(({ message, parts }) => {
+  const textContent = parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
+  if (!textContent.trim()) return null;
+  return /* @__PURE__ */ jsx4("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx4("div", { className: "max-w-[85%] rounded-2xl rounded-br-md px-4 py-2.5 bg-blue-600/10 dark:bg-blue-600/20 border border-blue-500/15 dark:border-blue-500/20", children: /* @__PURE__ */ jsx4("div", { className: "text-sm text-neutral-900 dark:text-neutral-100", children: /* @__PURE__ */ jsx4(Markdown, { children: textContent }) }) }) });
+});
+UserMessage.displayName = "UserMessage";
+
+// src/chat/message-list.tsx
+import { memo as memo2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MessageList = memo2(
+  ({
+    groups,
+    partMap,
+    isCollapsed,
+    onToggleCollapse,
+    branding,
+    renderToolDetail
+  }) => {
+    return /* @__PURE__ */ jsx5("div", { className: "space-y-3", children: groups.map((group) => {
+      if (group.type === "user") {
+        return /* @__PURE__ */ jsx5(
+          UserMessage,
+          {
+            message: group.message,
+            parts: partMap[group.message.id] ?? []
+          },
+          group.message.id
+        );
+      }
+      return /* @__PURE__ */ jsx5(
+        RunGroup,
+        {
+          run: group.run,
+          partMap,
+          collapsed: isCollapsed(group.run.id),
+          onToggle: () => onToggleCollapse(group.run.id),
+          branding,
+          renderToolDetail
+        },
+        group.run.id
+      );
+    }) });
+  }
+);
+MessageList.displayName = "MessageList";
+
+// src/chat/chat-container.tsx
+import {
+  memo as memo3,
+  useCallback as useCallback2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import { ArrowDown, SendHorizonal } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatContainer = memo3(
+  ({
+    messages,
+    partMap,
+    isStreaming,
+    onSend,
+    branding,
+    placeholder = "Type a message...",
+    className,
+    hideInput = false,
+    renderToolDetail
+  }) => {
+    const [inputValue, setInputValue] = useState3("");
+    const scrollRef = useRef3(null);
+    const inputRef = useRef3(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 handleSubmit = useCallback2(
+      (e) => {
+        e?.preventDefault();
+        const text = inputValue.trim();
+        if (!text || !onSend) return;
+        onSend(text);
+        setInputValue("");
+        inputRef.current?.focus();
+      },
+      [inputValue, onSend]
+    );
+    const handleKeyDown = useCallback2(
+      (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          handleSubmit();
+        }
+      },
+      [handleSubmit]
+    );
+    return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col h-full", className), children: [
+      /* @__PURE__ */ jsx6("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-4 py-4", children: messages.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center h-full text-sm text-neutral-400 dark:text-neutral-500", children: "No messages yet" }) : /* @__PURE__ */ jsx6(
+        MessageList,
+        {
+          groups,
+          partMap,
+          isCollapsed,
+          onToggleCollapse: toggleCollapse,
+          branding,
+          renderToolDetail
+        }
+      ) }),
+      !isAtBottom && /* @__PURE__ */ jsx6("div", { className: "flex justify-center -mt-10 relative z-10", children: /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          onClick: scrollToBottom,
+          className: cn(
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
+            "bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 shadow-lg",
+            "text-xs text-neutral-600 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
+          ),
+          children: [
+            /* @__PURE__ */ jsx6(ArrowDown, { className: "w-3 h-3" }),
+            "Scroll to bottom"
+          ]
+        }
+      ) }),
+      !hideInput && onSend && /* @__PURE__ */ jsx6(
+        "form",
+        {
+          onSubmit: handleSubmit,
+          className: "shrink-0 border-t border-neutral-200/50 dark:border-neutral-700/50 p-3",
+          children: /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
+            /* @__PURE__ */ jsx6(
+              "textarea",
+              {
+                ref: inputRef,
+                value: inputValue,
+                onChange: (e) => setInputValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder,
+                rows: 1,
+                disabled: isStreaming,
+                className: cn(
+                  "flex-1 resize-none rounded-lg px-3 py-2",
+                  "bg-neutral-50/60 dark:bg-neutral-800/60 border border-neutral-200/50 dark:border-neutral-700/50",
+                  "text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500",
+                  "focus:outline-none focus:border-blue-500/50",
+                  "disabled:opacity-50 disabled:cursor-not-allowed",
+                  "max-h-32"
+                ),
+                style: { minHeight: "2.5rem" }
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "submit",
+                disabled: isStreaming || !inputValue.trim(),
+                className: cn(
+                  "flex items-center justify-center w-9 h-9 rounded-lg",
+                  "bg-blue-600 hover:bg-blue-500 transition-colors",
+                  "disabled:opacity-30 disabled:cursor-not-allowed"
+                ),
+                children: /* @__PURE__ */ jsx6(SendHorizonal, { className: "w-4 h-4 text-white" })
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+);
+ChatContainer.displayName = "ChatContainer";
+
+export {
+  ChatMessage,
+  ChatMessageList,
+  ThinkingIndicator,
+  ChatInput,
+  UserMessage,
+  MessageList,
+  ChatContainer
+};