@tangle-network/ui 11.10.0 → 11.11.0

package/dist/chat.d.ts

@@ -1,201 +1,2 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SessionMessage } from './message-BHWbxBtT.js';
-import { S as SessionPart, a as ToolPart } from './parts-dj7AcUg0.js';
-import { AgentBranding } from './types.js';
-import { C as CustomToolRenderer } from './tool-display-z4JcDmMQ.js';
-import { R as Run, G as GroupedMessage } from './run-PfLmDAox.js';
-import { OpenUIAction } from './openui.js';
-import { T as ToolCallData } from './tool-call-feed-D9iofJgW.js';
-
-/**
- * Transcript-only container: message list + auto-scroll. Composers are
- * composed BELOW this by the app (the canonical one is `AgentComposer` in
- * `@tangle-network/sandbox-ui`) — this component never renders an input.
- */
-interface ChatContainerProps {
-    messages: SessionMessage[];
-    partMap: Record<string, SessionPart[]>;
-    isStreaming: boolean;
-    branding?: AgentBranding;
-    className?: string;
-    /** Custom renderer for tool details. Return ReactNode to override, null to use default. */
-    renderToolDetail?: CustomToolRenderer;
-    /** Presentation mode for the session view. */
-    presentation?: "runs" | "timeline";
-    /** Callback when an OpenUI action button is pressed within inline OpenUI blocks. */
-    onOpenUIAction?: (action: OpenUIAction) => void;
-    /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
-    enableOpenUI?: boolean;
-    /** Optional actions rendered beside each grouped assistant run. */
-    renderRunActions?: (run: Run) => ReactNode;
-    /** Optional actions rendered below each user message bubble. */
-    renderUserMessageActions?: (message: SessionMessage, parts: SessionPart[]) => ReactNode;
-    /** Optional actions rendered beside individual tool items in the run-grouped
-     *  (`runs`) presentation. */
-    renderToolActions?: (part: ToolPart, options: {
-        run: Run;
-        messageId: string;
-        partIndex: number;
-    }) => ReactNode;
-    /** Optional actions rendered beside individual tool items in the `timeline`
-     *  presentation, which has no run/message grouping (hence part-only). */
-    renderTimelineToolActions?: (part: ToolPart) => ReactNode;
-    /** In the `timeline` presentation, collapse to the first N spine rows behind
-     *  a "Show N more steps" toggle. Omit to always show every row. */
-    collapseTimelineAfter?: number;
-}
-/**
- * Chat transcript container: message list + auto-scroll.
- * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
- */
-declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation, onOpenUIAction, enableOpenUI, renderRunActions, renderUserMessageActions, renderToolActions, renderTimelineToolActions, collapseTimelineAfter, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
-
-interface MessageListProps {
-    groups: GroupedMessage[];
-    partMap: Record<string, SessionPart[]>;
-    isCollapsed: (runId: string) => boolean;
-    onToggleCollapse: (runId: string) => void;
-    branding?: AgentBranding;
-    renderToolDetail?: CustomToolRenderer;
-    renderRunActions?: (group: Extract<GroupedMessage, {
-        type: "run";
-    }>["run"]) => ReactNode;
-    renderUserMessageActions?: (message: SessionMessage, parts: SessionPart[]) => ReactNode;
-    renderToolActions?: (part: ToolPart, options: {
-        run: Extract<GroupedMessage, {
-            type: "run";
-        }>["run"];
-        messageId: string;
-        partIndex: number;
-    }) => ReactNode;
-}
-/**
- * Maps GroupedMessage[] to UserMessage and RunGroup components.
- * This is the main render list for the chat view.
- */
-declare const MessageList: React.MemoExoticComponent<({ groups, partMap, isCollapsed, onToggleCollapse, branding, renderToolDetail, renderRunActions, renderUserMessageActions, renderToolActions, }: MessageListProps) => react_jsx_runtime.JSX.Element>;
-
-interface UserMessageProps {
-    /** Session-model input: text is derived from these parts. */
-    message?: SessionMessage;
-    parts?: SessionPart[];
-    /** Direct-content input (e.g. AgentTimeline): explicit text + timestamp. */
-    content?: string;
-    timestamp?: Date;
-    actions?: ReactNode;
-}
-/**
- * The single user message bubble — a quiet, right-aligned fill on the muted
- * surface (no border, no loud fill, no uppercase label). The timestamp sits
- * beside the bubble and appears on hover, so it costs no height. Used by both
- * the run/message list (session-model `parts`) and AgentTimeline (direct
- * `content`/`timestamp`).
- */
-declare const UserMessage: React.MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
-
-type MessageRole = "user" | "assistant" | "system";
-interface ChatMessageProps {
-    role: MessageRole;
-    content: string;
-    /** Inline tool call activity rendered between text chunks */
-    toolCalls?: ReactNode;
-    /** Whether the message is still streaming */
-    isStreaming?: boolean;
-    /** Timestamp */
-    timestamp?: Date;
-    className?: string;
-    /** Custom user label. Default: "You" */
-    userLabel?: string;
-    /** Custom assistant label. Default: "Agent" */
-    assistantLabel?: string;
-    /** Hide the role label row entirely */
-    hideRoleLabel?: boolean;
-}
-declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
-
-interface ThinkingIndicatorProps {
-    className?: string;
-}
-declare function ThinkingIndicator({ className }: ThinkingIndicatorProps): react_jsx_runtime.JSX.Element;
-
-type AgentTimelineTone = "default" | "info" | "success" | "warning" | "error";
-interface AgentTimelineMessageItem {
-    id: string;
-    kind: "message";
-    role: MessageRole;
-    content: string;
-    toolCalls?: ReactNode;
-    isStreaming?: boolean;
-    /** Shown beside a user bubble on hover. Assistant prose carries no
-     *  timestamp of its own — the turn's user message dates the exchange. */
-    timestamp?: Date;
-    after?: ReactNode;
-}
-interface AgentTimelineToolItem {
-    id: string;
-    kind: "tool";
-    call: ToolCallData;
-    /** Source tool part, so a consumer's `renderToolActions` gets the real
-     *  input/output (the flat `call` is display-only). */
-    part?: ToolPart;
-}
-interface AgentTimelineToolGroupItem {
-    id: string;
-    kind: "tool_group";
-    /** Accessible name of the group. Not drawn — the rows are the label. */
-    title?: string;
-    calls: ToolCallData[];
-    /** Source tool parts, parallel to `calls`. */
-    parts?: ToolPart[];
-}
-interface AgentTimelineStatusItem {
-    id: string;
-    kind: "status";
-    label: string;
-    detail?: string;
-    tone?: AgentTimelineTone;
-}
-interface AgentTimelineArtifactItem {
-    id: string;
-    kind: "artifact";
-    title: string;
-    description?: string;
-    meta?: ReactNode;
-    icon?: ReactNode;
-    tone?: AgentTimelineTone;
-    action?: ReactNode;
-    onClick?: () => void;
-}
-interface AgentTimelineCustomItem {
-    id: string;
-    kind: "custom";
-    /** Laid out as a run row: it takes the same horizontal bleed as tool rows,
-     *  so a `RunRowShell`-based row (reasoning) aligns its glyph with the prose
-     *  edge. */
-    content: ReactNode;
-}
-type AgentTimelineItem = AgentTimelineMessageItem | AgentTimelineToolItem | AgentTimelineToolGroupItem | AgentTimelineStatusItem | AgentTimelineArtifactItem | AgentTimelineCustomItem;
-interface AgentTimelineProps {
-    items: AgentTimelineItem[];
-    isThinking?: boolean;
-    emptyState?: ReactNode;
-    className?: string;
-    /** Optional actions rendered beside each tool item (e.g. "open in artifacts").
-     *  Receives the source tool part carried on the item. */
-    renderToolActions?: (part: ToolPart) => ReactNode;
-    /** When set, collapse the timeline to the first N step rows (every item
-     *  except user messages) behind a "Show N more steps" toggle. Omit to always
-     *  show every row. */
-    collapseAfter?: number;
-}
-/**
- * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
- * sessions. Renders messages, tool rows, status cards, and artifact handoffs
- * as one plain column: prose at the reading size, tool calls as quiet
- * one-liners between the paragraphs, no connector chrome.
- */
-declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
-
-export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };
+import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-CUhfHT_V.js";
+export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };

package/dist/chat.js

@@ -1,31 +1,2 @@
-import {
-  AgentTimeline,
-  ChatContainer,
-  ChatMessage,
-  MessageList,
-  ThinkingIndicator,
-  UserMessage
-} from "./chunk-C5WF4WMV.js";
-import "./chunk-565EATZZ.js";
-import "./chunk-YU4E5J2N.js";
-import "./chunk-R7B3UWPF.js";
-import "./chunk-ND3ZFXQK.js";
-import "./chunk-HMAPIH7L.js";
-import "./chunk-L57WRIND.js";
-import "./chunk-BEBXZPHW.js";
-import "./chunk-M3QZK62R.js";
-import "./chunk-4CLN43XT.js";
-import "./chunk-XU3HB5QL.js";
-import "./chunk-42PAH5D2.js";
-import "./chunk-OL5GYLHV.js";
-import "./chunk-3XXBZL53.js";
-import "./chunk-WKWBTL2V.js";
-import "./chunk-RQHJBTEU.js";
-export {
-  AgentTimeline,
-  ChatContainer,
-  ChatMessage,
-  MessageList,
-  ThinkingIndicator,
-  UserMessage
-};
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-CPLL0Fd9.js";
+export { AgentTimeline, ChatContainer, ChatMessage, MessageList, ThinkingIndicator, UserMessage };

package/dist/code-block-B9miUPht.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/markdown/code-block.d.ts
+interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language?: string;
+  /**
+   * Header text. Defaults to `language`. Set this when the display name differs
+   * from the highlight.js language id — e.g. a file extension ("BASHRC") whose
+   * content highlights as a known language, or none.
+   */
+  label?: string;
+  showLineNumbers?: boolean;
+  /** Force light theme; defaults to dark */
+  light?: boolean;
+  children?: ReactNode;
+}
+declare const CodeBlock: import("react").MemoExoticComponent<({ code, language, label, showLineNumbers, light: lightProp, className, children, ...props }: CodeBlockProps) => import("react").JSX.Element>;
+/** Copy-to-clipboard button for use inside CodeBlock. */
+declare const CopyButton: import("react").MemoExoticComponent<({ text }: {
+  text: string;
+}) => import("react").JSX.Element>;
+//#endregion
+export { CodeBlockProps as n, CopyButton as r, CodeBlock as t };

package/dist/code-block-CngSn37j.js

@@ -0,0 +1,165 @@
+import { i as focusRing } from "./focus-Cw02pNSr.js";
+import { t as cn } from "./utils-C_uf36nf.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+//#region src/markdown/code-block.tsx
+function getSyntaxTheme() {
+	const el = typeof document !== "undefined" ? document.documentElement : null;
+	const v = (name, fallback) => el ? getComputedStyle(el).getPropertyValue(name).trim() || fallback : fallback;
+	const comment = v("--syntax-comment", "#6B7094");
+	const keyword = v("--syntax-keyword", "#A78FFF");
+	const string = v("--syntax-string", "#10b981");
+	const fn = v("--syntax-function", "#6D9FFF");
+	const number = v("--syntax-number", "#FFB347");
+	const meta = v("--syntax-meta", "#8263FF");
+	const error = v("--syntax-error", "#FF4D6D");
+	const variable = v("--syntax-variable", "#C4C0D8");
+	const fg = v("--syntax-foreground", "#E8E6F6");
+	return {
+		"hljs-comment": {
+			color: comment,
+			fontStyle: "italic"
+		},
+		"hljs-quote": {
+			color: comment,
+			fontStyle: "italic"
+		},
+		"hljs-doctag": { color: comment },
+		"hljs-keyword": { color: keyword },
+		"hljs-selector-tag": { color: keyword },
+		"hljs-literal": { color: keyword },
+		"hljs-type": { color: keyword },
+		"hljs-class": { color: keyword },
+		"hljs-string": { color: string },
+		"hljs-template-tag": { color: string },
+		"hljs-template-variable": { color: string },
+		"hljs-addition": { color: string },
+		"hljs-regexp": { color: string },
+		"hljs-title": { color: fn },
+		"hljs-section": { color: fn },
+		"hljs-built_in": { color: fn },
+		"hljs-name": { color: fn },
+		"hljs-function": { color: fn },
+		"hljs-selector-id": { color: fn },
+		"hljs-selector-class": { color: fn },
+		"hljs-attribute": { color: fn },
+		"hljs-number": { color: number },
+		"hljs-symbol": { color: number },
+		"hljs-bullet": { color: number },
+		"hljs-link": {
+			color: number,
+			textDecoration: "underline"
+		},
+		"hljs-meta": { color: meta },
+		"hljs-selector-pseudo": { color: meta },
+		"hljs-deletion": { color: error },
+		"hljs-params": { color: variable },
+		"hljs-variable": { color: variable },
+		"hljs-tag": { color: variable },
+		"hljs-attr": { color: variable },
+		"hljs-subst": { color: variable },
+		"hljs-strong": { fontWeight: "bold" },
+		"hljs-emphasis": { fontStyle: "italic" },
+		"hljs": {
+			color: fg,
+			background: "transparent"
+		}
+	};
+}
+const LIGHT_THEMES = /* @__PURE__ */ new Set(["vault", "dawn"]);
+function detectLightTheme() {
+	return typeof document !== "undefined" && LIGHT_THEMES.has(document.documentElement.getAttribute("data-sandbox-theme") ?? "");
+}
+function useIsLightTheme() {
+	const [isLight, setIsLight] = useState(detectLightTheme);
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		setIsLight(detectLightTheme());
+		const observer = new MutationObserver(() => setIsLight(detectLightTheme()));
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-sandbox-theme"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return isLight;
+}
+const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
+	const isLight = useIsLightTheme();
+	const light = lightProp ?? isLight;
+	const theme = getSyntaxTheme();
+	const bg = "bg-card border-border";
+	const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
+	const langColor = "text-muted-foreground";
+	const headerLabel = label ?? language;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative overflow-hidden rounded-lg border font-mono", bg, className),
+		...props,
+		children: [
+			headerLabel && /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center justify-between border-b px-3 py-1", headerBg),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor),
+					children: headerLabel
+				}), children]
+			}),
+			!headerLabel && children && /* @__PURE__ */ jsx("div", {
+				className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100",
+				children
+			}),
+			/* @__PURE__ */ jsx(SyntaxHighlighter, {
+				language: language ?? "text",
+				style: theme,
+				showLineNumbers,
+				lineNumberStyle: {
+					color: light ? "#8B92B8" : "#4A4D6A",
+					minWidth: "2.5em",
+					paddingRight: "1em"
+				},
+				customStyle: {
+					margin: 0,
+					padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+					background: "transparent",
+					fontSize: "var(--code-font-size, 0.8125rem)",
+					lineHeight: "var(--code-line-height, 1.5)",
+					overflowX: "auto"
+				},
+				codeTagProps: { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } },
+				wrapLines: false,
+				children: code
+			})
+		]
+	});
+});
+CodeBlock.displayName = "CodeBlock";
+/** Copy-to-clipboard button for use inside CodeBlock. */
+const CopyButton = memo(({ text }) => {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+	const handleCopy = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopied(true);
+			if (timerRef.current) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => setCopied(false), 2e3);
+		} catch (err) {
+			console.warn("Clipboard write failed:", err);
+		}
+	}, [text]);
+	return /* @__PURE__ */ jsx("button", {
+		onClick: handleCopy,
+		className: cn("flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors", focusRing),
+		title: "Copy to clipboard",
+		children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-muted-foreground" })
+	});
+});
+CopyButton.displayName = "CopyButton";
+//#endregion
+export { CopyButton as n, CodeBlock as t };