@tangle-network/sandbox-ui 0.17.0 → 0.18.0

package/dist/chat.d.ts

@@ -1 +1,112 @@
+import { MessageRole } from '@tangle-network/ui/chat';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ReasoningLevel = "auto" | "low" | "medium" | "high";
+interface ReasoningLevelOption {
+    value: ReasoningLevel;
+    label: string;
+    description: string;
+}
+interface ReasoningLevelPickerProps {
+    value: ReasoningLevel;
+    onChange: (value: ReasoningLevel) => void;
+    disabled?: boolean;
+    className?: string;
+    triggerClassName?: string;
+    options?: ReadonlyArray<ReasoningLevelOption>;
+}
+declare const DEFAULT_REASONING_LEVEL_OPTIONS: ReadonlyArray<ReasoningLevelOption>;
+declare function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options, }: ReasoningLevelPickerProps): react_jsx_runtime.JSX.Element;
+
+type ArtifactKind = string;
+interface ArtifactScope {
+    kind: ArtifactKind;
+    key: string;
+    /** Short label shown in the dock header. Defaults to a generated one from kind/key. */
+    label?: string;
+}
+interface ArtifactDockMessage {
+    id: string;
+    role: MessageRole;
+    content: string;
+    createdAt?: Date;
+}
+type ArtifactDockStreamEvent = {
+    type: "delta";
+    text: string;
+} | {
+    type: "error";
+    message: string;
+};
+/**
+ * Consumer-supplied adapter. Keeps the dock decoupled from any specific app's
+ * API surface — every consumer wires its own thread-ensure, message-load, and
+ * NDJSON stream-send.
+ */
+interface ArtifactAgentDockTransport {
+    /** Get-or-create the canonical thread for this scope. */
+    ensureThread(scope: ArtifactScope): Promise<{
+        id: string;
+    }>;
+    /** Load prior messages, in chronological order. Optional — returns []. */
+    loadMessages?(threadId: string): Promise<ArtifactDockMessage[]>;
+    /** Stream a user turn. Yield delta events; the dock concatenates them. */
+    sendStream(args: {
+        threadId: string;
+        content: string;
+        signal: AbortSignal;
+    }): AsyncIterable<ArtifactDockStreamEvent>;
+}
+interface ArtifactAgentDockProps {
+    scope: ArtifactScope;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    transport: ArtifactAgentDockTransport;
+    defaultPrompt?: string;
+    /** Toast handler for non-fatal errors. Falls back to console.error. */
+    onError?: (message: string) => void;
+    className?: string;
+}
+/**
+ * ArtifactAgentDock — slide-in right-rail chat scoped to a single artifact.
+ *
+ * Renders a persistent, per-artifact conversation surface that streams via a
+ * consumer-supplied transport. Mount alongside any artifact view (file editor,
+ * sequence editor, asset preview) to give every artifact its own dedicated
+ * agent conversation without forking the chat UI per app.
+ *
+ * Behavior:
+ * - On open, calls `transport.ensureThread(scope)` to get the canonical thread
+ *   id and `transport.loadMessages(threadId)` to populate prior turns.
+ * - On submit, calls `transport.sendStream(...)` and concatenates delta events
+ *   into a single streaming assistant message; renders inline.
+ * - Composer: Enter sends, Shift+Enter newline, Cancel during stream supported.
+ * - Accessibility: scope `aria-label` on the panel, `aria-pressed` is the
+ *   consumer's job on whatever button toggles `open`.
+ */
+declare function ArtifactAgentDock({ scope, open, onOpenChange, transport, defaultPrompt, onError, className, }: ArtifactAgentDockProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Build a transport that hits the Tangle product convention: POST
+ * /api/threads with body.scope = ArtifactScope to ensure the canonical
+ * thread; GET /api/threads/:id/messages to load history; POST /api/chat
+ * with body = {workspaceId, threadId, content} and an NDJSON event stream
+ * to send. Most consumers can use this as-is; advanced ones can supply
+ * their own transport object.
+ *
+ * The expected NDJSON event shape:
+ *   { type: "message.part.delta", data: { text: string } }   // assistant chunk
+ *   { type: "error", data: { message: string, ... } }        // surface error
+ *
+ * Other event types are ignored — consumers that need tool-call rendering
+ * or other event semantics should ship a richer transport.
+ */
+declare function createFetchTransport(opts: {
+    workspaceId: string;
+    threadsUrl?: string;
+    chatUrl?: string;
+    /** Optional fetch override (auth headers, baseURL, etc.). */
+    fetchImpl?: typeof fetch;
+}): ArtifactAgentDockTransport;
+
+export { ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport };

package/dist/chat.js

@@ -1,18 +1,27 @@
 import {
   AgentTimeline,
+  ArtifactAgentDock,
   ChatContainer,
   ChatInput,
   ChatMessage,
+  DEFAULT_REASONING_LEVEL_OPTIONS,
   MessageList,
+  ReasoningLevelPicker,
   ThinkingIndicator,
-  UserMessage
-} from "./chunk-QPAJR74X.js";
+  UserMessage,
+  createFetchTransport
+} from "./chunk-CNVE6KOM.js";
+import "./chunk-EI44GEQ5.js";
 export {
   AgentTimeline,
+  ArtifactAgentDock,
   ChatContainer,
   ChatInput,
   ChatMessage,
+  DEFAULT_REASONING_LEVEL_OPTIONS,
   MessageList,
+  ReasoningLevelPicker,
   ThinkingIndicator,
-  UserMessage
+  UserMessage,
+  createFetchTransport
 };

package/dist/chunk-CNVE6KOM.js

@@ -0,0 +1,417 @@
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/chat/index.ts
+import {
+  AgentTimeline,
+  ChatContainer,
+  ChatInput,
+  ChatMessage as ChatMessage2,
+  MessageList,
+  ThinkingIndicator,
+  UserMessage
+} from "@tangle-network/ui/chat";
+
+// src/chat/reasoning-level-picker.tsx
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Brain, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_REASONING_LEVEL_OPTIONS = [
+  { value: "auto", label: "Auto", description: "Let the agent pick the right depth." },
+  { value: "low", label: "Low", description: "Fast, direct answers." },
+  { value: "medium", label: "Medium", description: "Inspect context before acting." },
+  { value: "high", label: "High", description: "Deeper planning and edge-case checks." }
+];
+function ReasoningLevelPicker({
+  value,
+  onChange,
+  disabled,
+  className,
+  triggerClassName,
+  options = DEFAULT_REASONING_LEVEL_OPTIONS
+}) {
+  const selected = options.find((option) => option.value === value);
+  const label = selected?.label ?? "Auto";
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        className: cn(
+          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-2.5",
+          "text-xs font-medium text-foreground shadow-sm transition-colors",
+          "hover:border-primary/30 hover:bg-accent/30 focus:outline-none focus:border-primary/40",
+          "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/30",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+          triggerClassName
+        ),
+        "aria-label": "Reasoning level",
+        children: [
+          /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+      DropdownMenu.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: cn(
+          "z-50 w-64 overflow-hidden rounded-[var(--radius-md)] border border-border bg-card p-1",
+          "shadow-[var(--shadow-dropdown)]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsxs(
+          DropdownMenu.Item,
+          {
+            onSelect: (event) => {
+              event.preventDefault();
+              onChange(option.value);
+            },
+            className: cn(
+              "flex cursor-pointer flex-col gap-0.5 rounded-md px-2.5 py-2 outline-none",
+              "transition-colors hover:bg-accent/40 focus:bg-accent/40",
+              option.value === value && "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: option.label }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+            ]
+          },
+          option.value
+        ))
+      }
+    ) })
+  ] });
+}
+
+// src/chat/artifact-agent-dock.tsx
+import * as React from "react";
+import { Sparkles, Send, Square, X } from "lucide-react";
+import { ChatMessage } from "@tangle-network/ui/chat";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function defaultScopeLabel(scope) {
+  if (scope.label) return scope.label;
+  switch (scope.kind) {
+    case "vault-file":
+      return scope.key.split("/").pop() ?? scope.key;
+    case "sequence":
+      return `Sequence ${scope.key.slice(0, 8)}`;
+    case "content":
+      return `Content ${scope.key.slice(0, 8)}`;
+    case "image":
+      return `Image ${scope.key.slice(0, 8)}`;
+    case "video":
+      return `Video ${scope.key.slice(0, 8)}`;
+    case "project":
+      return "Project chat";
+    case "workspace":
+      return "Workspace chat";
+    default:
+      return scope.key;
+  }
+}
+function normalizeRole(role) {
+  return role === "assistant" || role === "system" ? role : "user";
+}
+function ArtifactAgentDock({
+  scope,
+  open,
+  onOpenChange,
+  transport,
+  defaultPrompt,
+  onError,
+  className
+}) {
+  const [threadId, setThreadId] = React.useState(null);
+  const [messages, setMessages] = React.useState([]);
+  const [composer, setComposer] = React.useState(defaultPrompt ?? "");
+  const [streamContent, setStreamContent] = React.useState("");
+  const [sending, setSending] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const abortRef = React.useRef(null);
+  const scrollRef = React.useRef(null);
+  const reportError = React.useCallback(
+    (message) => {
+      if (onError) onError(message);
+      else if (typeof console !== "undefined") console.error("[ArtifactAgentDock]", message);
+    },
+    [onError]
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    async function bootstrap() {
+      setLoading(true);
+      try {
+        const { id } = await transport.ensureThread(scope);
+        if (cancelled) return;
+        setThreadId(id);
+        if (transport.loadMessages) {
+          const prior = await transport.loadMessages(id);
+          if (cancelled) return;
+          setMessages(
+            prior.map((m) => ({
+              ...m,
+              role: normalizeRole(m.role),
+              createdAt: m.createdAt instanceof Date ? m.createdAt : m.createdAt ? new Date(m.createdAt) : void 0
+            }))
+          );
+        } else {
+          setMessages([]);
+        }
+      } catch (err) {
+        reportError(err instanceof Error ? err.message : "Failed to open artifact chat");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    void bootstrap();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, scope.kind, scope.key, transport, reportError]);
+  React.useEffect(() => {
+    if (!scrollRef.current) return;
+    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages.length, streamContent]);
+  const send = React.useCallback(async () => {
+    const text = composer.trim();
+    if (!text || !threadId || sending) return;
+    const userMsg = {
+      id: `local-${Date.now()}`,
+      role: "user",
+      content: text,
+      createdAt: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setComposer("");
+    setSending(true);
+    setStreamContent("");
+    const controller = new AbortController();
+    abortRef.current = controller;
+    let assistantContent = "";
+    let streamFailed = false;
+    try {
+      for await (const event of transport.sendStream({ threadId, content: text, signal: controller.signal })) {
+        if (event.type === "delta") {
+          assistantContent += event.text;
+          setStreamContent(assistantContent);
+        } else if (event.type === "error") {
+          streamFailed = true;
+          reportError(event.message);
+        }
+      }
+      if (assistantContent && !streamFailed) {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: `assist-${Date.now()}`,
+            role: "assistant",
+            content: assistantContent,
+            createdAt: /* @__PURE__ */ new Date()
+          }
+        ]);
+      }
+      setStreamContent("");
+    } catch (err) {
+      if (err?.name === "AbortError") return;
+      reportError(err instanceof Error ? err.message : "Send failed");
+    } finally {
+      setSending(false);
+      abortRef.current = null;
+    }
+  }, [composer, threadId, sending, transport, reportError]);
+  const cancel = React.useCallback(() => {
+    abortRef.current?.abort();
+    setSending(false);
+    setStreamContent("");
+  }, []);
+  if (!open) return null;
+  const heading = defaultScopeLabel(scope);
+  return /* @__PURE__ */ jsxs2(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-border bg-card/95 shadow-xl",
+        className
+      ),
+      "aria-label": `Agent chat about ${heading}`,
+      children: [
+        /* @__PURE__ */ jsxs2("header", { className: "flex items-center justify-between border-b border-border bg-background/60 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx2(Sparkles, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
+              /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenChange(false),
+              "aria-label": "Close artifact chat",
+              className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx2("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs2("div", { className: "px-3 py-12 text-center", children: [
+          /* @__PURE__ */ jsx2(Sparkles, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
+          /* @__PURE__ */ jsxs2("p", { className: "text-sm text-foreground", children: [
+            "Ask the agent about this ",
+            scope.kind === "vault-file" ? "document" : scope.kind,
+            "."
+          ] }),
+          /* @__PURE__ */ jsx2("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
+        ] }) : /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+          messages.map((m) => /* @__PURE__ */ jsx2(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
+          streamContent && /* @__PURE__ */ jsx2(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
+        ] }) }),
+        /* @__PURE__ */ jsx2(
+          "form",
+          {
+            className: "border-t border-border bg-background/60 p-3",
+            onSubmit: (e) => {
+              e.preventDefault();
+              void send();
+            },
+            children: /* @__PURE__ */ jsxs2("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx2(
+                "textarea",
+                {
+                  value: composer,
+                  onChange: (e) => setComposer(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && !e.shiftKey && !sending) {
+                      e.preventDefault();
+                      void send();
+                    }
+                  },
+                  placeholder: `Ask about ${heading}\u2026`,
+                  rows: 2,
+                  disabled: !threadId,
+                  className: "min-h-[44px] flex-1 resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
+                }
+              ),
+              sending ? /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: cancel,
+                  "aria-label": "Cancel",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                  children: /* @__PURE__ */ jsx2(Square, { className: "h-4 w-4" })
+                }
+              ) : /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "submit",
+                  disabled: !composer.trim() || !threadId,
+                  "aria-label": "Send",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
+                  children: /* @__PURE__ */ jsx2(Send, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function createFetchTransport(opts) {
+  const threadsUrl = opts.threadsUrl ?? "/api/threads";
+  const chatUrl = opts.chatUrl ?? "/api/chat";
+  const f = opts.fetchImpl ?? ((...args) => fetch(...args));
+  const workspaceId = opts.workspaceId;
+  return {
+    async ensureThread(scope) {
+      const url = threadsUrl.includes("?") ? `${threadsUrl}&workspaceId=${encodeURIComponent(workspaceId)}` : `${threadsUrl}?workspaceId=${encodeURIComponent(workspaceId)}`;
+      const res = await f(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ workspaceId, scope, ensureScoped: true })
+      });
+      if (!res.ok) throw new Error(`Thread ensure failed (${res.status})`);
+      const data = await res.json();
+      const id = data.thread?.id ?? data.id;
+      if (!id) throw new Error("Malformed ensure response");
+      return { id };
+    },
+    async loadMessages(threadId) {
+      const res = await f(`${threadsUrl}/${encodeURIComponent(threadId)}/messages`);
+      if (!res.ok) return [];
+      const data = await res.json();
+      return (data.messages ?? []).map((m) => ({
+        id: m.id,
+        role: normalizeRole(m.role),
+        content: m.content,
+        createdAt: new Date(m.createdAt)
+      }));
+    },
+    sendStream({ threadId, content, signal }) {
+      return (async function* () {
+        const res = await f(chatUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ workspaceId, threadId, content }),
+          signal
+        });
+        if (!res.ok || !res.body) {
+          const text = await res.text().catch(() => "");
+          yield { type: "error", message: text || `Send failed (${res.status})` };
+          return;
+        }
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (!line.trim()) continue;
+            try {
+              const event = JSON.parse(line);
+              if (event.type === "message.part.delta" && event.data) {
+                const text = event.data.text;
+                if (typeof text === "string" && text.length > 0) {
+                  yield { type: "delta", text };
+                }
+              } else if (event.type === "error" && event.data) {
+                const message = typeof event.data.message === "string" ? event.data.message : "Stream error";
+                yield { type: "error", message };
+              }
+            } catch {
+            }
+          }
+        }
+      })();
+    }
+  };
+}
+
+export {
+  DEFAULT_REASONING_LEVEL_OPTIONS,
+  ReasoningLevelPicker,
+  ArtifactAgentDock,
+  createFetchTransport,
+  AgentTimeline,
+  ChatContainer,
+  ChatInput,
+  ChatMessage2 as ChatMessage,
+  MessageList,
+  ThinkingIndicator,
+  UserMessage
+};