@tangle-network/sandbox-ui 0.2.2 → 0.3.3

package/dist/chunk-U62G5TS7.js

@@ -1,472 +0,0 @@
-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
-};

package/src/styles/tokens.css

@@ -1,73 +0,0 @@
-/* Tangle Design System Tokens */
-
-:root {
-  /* Brand gradient */
-  --tangle-gradient: linear-gradient(135deg, #8E59FF, #6888F9);
-  --tangle-gradient-text: linear-gradient(45deg, #5f5bee, #465cd2);
-
-  /* Backgrounds */
-  --bg-root: #000000;
-  --bg-dark: #1f1d2b;
-  --bg-card: #161425;
-  --bg-elevated: #1e1c30;
-  --bg-section: #171528;
-  --bg-input: #141428;
-  --bg-hover: #1a1a30;
-
-  /* Text */
-  --text-primary: #ffffff;
-  --text-secondary: #aab0bc;
-  --text-muted: #6b7094;
-
-  /* Brand */
-  --brand-primary: #605dba;
-  --brand-strong: #6941c6;
-  --brand-cool: #6172f3;
-  --brand-glow: #9e77ed;
-  --brand-purple: #7f56d9;
-  --brand-vibrant: #4a3aff;
-
-  /* Borders */
-  --border-subtle: rgba(255, 255, 255, 0.06);
-  --border-default: rgba(255, 255, 255, 0.08);
-  --border-hover: rgba(255, 255, 255, 0.1);
-  --border-accent: rgba(142, 89, 255, 0.2);
-  --border-accent-hover: rgba(142, 89, 255, 0.4);
-
-  /* Buttons */
-  --btn-primary-bg: #1e116e;
-  --btn-primary-hover: #281ca5;
-  --btn-cta-bg: #ffffff;
-  --btn-cta-text: #1d1d1d;
-
-  /* Code syntax */
-  --code-keyword: #c084fc;
-  --code-string: #a78bfa;
-  --code-function: #60a5fa;
-  --code-number: #fcd34d;
-  --code-success: #4ade80;
-  --code-comment: rgba(255, 255, 255, 0.25);
-  --code-error: #f87171;
-
-  /* Shadows */
-  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(142, 89, 255, 0.1);
-  --shadow-dropdown: 0 20px 60px rgba(0, 0, 0, 0.5);
-  --shadow-glow: 0 0 40px rgba(130, 99, 255, 0.15);
-
-  /* Radii */
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 1.25rem;
-  --radius-xl: 1.5rem;
-  --radius-pill: 48px;
-  --radius-full: 62.5rem;
-
-  /* Transitions */
-  --transition-fast: 0.15s ease;
-  --transition-default: 0.2s ease;
-  --transition-medium: 0.3s ease;
-
-  /* Fonts */
-  --font-sans: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
-}