@tangle-network/ui 7.0.0 → 8.0.0

package/dist/index.d.ts

@@ -2,9 +2,9 @@ export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQ
 export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
-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 './chat.js';
+export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from './run.js';
-export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.js';
+export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallStatus, d as ToolCallType, p as parseToolEvent } from './tool-call-feed-D9iofJgW.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from './openui.js';
 export { FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage } from './files.js';
 export { Markdown, MarkdownProps } from './markdown.js';

package/dist/index.js

@@ -133,18 +133,17 @@ import {
 import {
   AgentTimeline,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-5CS3I7Y3.js";
+} from "./chunk-UOLL2YHG.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-LQS34IGP.js";
+import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
@@ -156,9 +155,7 @@ import {
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration,
-  ToolCallGroup,
-  ToolCallStep
+  LiveDuration
 } from "./chunk-RKQDBRTC.js";
 import {
   TOOL_CATEGORY_ICONS,
@@ -354,7 +351,6 @@ export {
   CardHeader,
   CardTitle,
   ChatContainer,
-  ChatInput,
   ChatMessage,
   CodeBlock,
   CommandPreview,
@@ -453,8 +449,6 @@ export {
   ToastContainer,
   ToastProvider,
   ToolCallFeed,
-  ToolCallGroup,
-  ToolCallStep,
   UploadProgress,
   UserMenu,
   UserMessage,

package/dist/run.d.ts

@@ -5,7 +5,7 @@ import { R as Run } from './run-PfLmDAox.js';
 import { S as SessionPart, a as ToolPart, R as ReasoningPart } from './parts-dj7AcUg0.js';
 import { AgentBranding } from './types.js';
 import { C as CustomToolRenderer } from './tool-display-z4JcDmMQ.js';
-export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.js';
+export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallStatus, d as ToolCallType, p as parseToolEvent } from './tool-call-feed-D9iofJgW.js';
 import './message-BHWbxBtT.js';
 
 interface RunGroupProps {

package/dist/run.js

@@ -1,4 +1,4 @@
-import "./chunk-LQS34IGP.js";
+import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
@@ -10,9 +10,7 @@ import {
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration,
-  ToolCallGroup,
-  ToolCallStep
+  LiveDuration
 } from "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
@@ -30,7 +28,5 @@ export {
   LiveDuration,
   RunGroup,
   ToolCallFeed,
-  ToolCallGroup,
-  ToolCallStep,
   parseToolEvent
 };

package/dist/sdk-hooks.d.ts

@@ -4,7 +4,7 @@ import { R as Run, G as GroupedMessage } from './run-PfLmDAox.js';
 import { S as SessionMessage } from './message-BHWbxBtT.js';
 import { S as SessionPart } from './parts-dj7AcUg0.js';
 import { R as RegisterActiveSessionOptions, g as ActiveSessionTransportMode, c as ActiveSessionConnectionState } from './active-sessions-store-CeOmXgv5.js';
-import { F as FeedSegment } from './tool-call-feed-Bs3MyQMT.js';
+import { F as FeedSegment } from './tool-call-feed-D9iofJgW.js';
 import 'nanostores';
 import 'react/jsx-runtime';
 

package/dist/{tool-call-feed-Bs3MyQMT.d.ts → tool-call-feed-D9iofJgW.d.ts}

@@ -1,29 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
 
 type ToolCallType = "bash" | "read" | "write" | "edit" | "glob" | "grep" | "list" | "download" | "inspect" | "audit" | "unknown";
 type ToolCallStatus = "running" | "success" | "error";
-interface ToolCallStepProps {
-    type: ToolCallType;
-    label: string;
-    status: ToolCallStatus;
-    detail?: string;
-    output?: string;
-    /** Override syntax highlighting language; inferred from detail path if omitted */
-    language?: string;
-    duration?: number;
-    className?: string;
-}
-declare function ToolCallStep({ type, label, status, detail, output, language, duration, className, }: ToolCallStepProps): react_jsx_runtime.JSX.Element;
-/**
- * ToolCallGroup — groups multiple tool calls under a heading.
- */
-interface ToolCallGroupProps {
-    title?: string;
-    children: ReactNode;
-    className?: string;
-}
-declare function ToolCallGroup({ title, children, className }: ToolCallGroupProps): react_jsx_runtime.JSX.Element;
 
 interface ToolCallData {
     id: string;
@@ -65,4 +43,4 @@ declare function parseToolEvent(event: {
     data: Record<string, unknown>;
 }): ToolCallData | null;
 
-export { type FeedSegment as F, type ToolCallData as T, ToolCallFeed as a, type ToolCallFeedProps as b, ToolCallGroup as c, type ToolCallGroupProps as d, type ToolCallStatus as e, ToolCallStep as f, type ToolCallStepProps as g, type ToolCallType as h, parseToolEvent as p };
+export { type FeedSegment as F, type ToolCallData as T, ToolCallFeed as a, type ToolCallFeedProps as b, type ToolCallStatus as c, type ToolCallType as d, parseToolEvent as p };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/chat-container.tsx

@@ -1,7 +1,6 @@
 import {
   memo,
   type ReactNode,
-  useCallback,
   useMemo,
   useRef,
 } from "react";
@@ -20,7 +19,6 @@ import {
   AgentTimeline,
   type AgentTimelineItem,
 } from "./agent-timeline";
-import { ChatInput, type PendingFile } from "./chat-input";
 import { InlineThinkingItem } from "../run/inline-thinking-item";
 import { getToolDisplayMetadata } from "../utils/tool-display";
 import {
@@ -29,27 +27,21 @@ import {
   type OpenUIComponentNode,
 } from "../openui/openui-artifact-renderer";
 
+/**
+ * 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.
+ */
 export interface ChatContainerProps {
   messages: SessionMessage[];
   partMap: Record<string, SessionPart[]>;
   isStreaming: boolean;
-  onSend?: (text: string) => void;
-  onCancel?: () => void;
   branding?: AgentBranding;
-  placeholder?: string;
   className?: string;
-  /** Hide the input area (useful for read-only views). */
-  hideInput?: boolean;
   /** Custom renderer for tool details. Return ReactNode to override, null to use default. */
   renderToolDetail?: CustomToolRenderer;
   /** Presentation mode for the session view. */
   presentation?: "runs" | "timeline";
-  modelLabel?: string;
-  onModelClick?: () => void;
-  pendingFiles?: PendingFile[];
-  onRemoveFile?: (id: string) => void;
-  onAttach?: (files: FileList) => void;
-  disabled?: boolean;
   /** 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. */
@@ -355,7 +347,7 @@ function buildTimelineItems(
 }
 
 /**
- * Full chat container: message list + auto-scroll + input area.
+ * Chat transcript container: message list + auto-scroll.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
 export const ChatContainer = memo(
@@ -363,20 +355,10 @@ export const ChatContainer = memo(
     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,
@@ -404,13 +386,6 @@ export const ChatContainer = memo(
       [messages, partMap, isStreaming, onOpenUIAction, enableOpenUI],
     );
 
-    const handleSend = useCallback(
-      (text: string) => {
-        onSend?.(text);
-      },
-      [onSend],
-    );
-
     return (
       <div className={cn("flex h-full flex-col", className)}>
         {/* Message area */}
@@ -462,23 +437,6 @@ export const ChatContainer = memo(
             </button>
           </div>
         )}
-
-        {/* Input area */}
-        {!hideInput && onSend && (
-          <ChatInput
-            onSend={handleSend}
-            onCancel={onCancel}
-            isStreaming={isStreaming}
-            placeholder={placeholder}
-            modelLabel={modelLabel}
-            onModelClick={onModelClick}
-            pendingFiles={pendingFiles}
-            onRemoveFile={onRemoveFile}
-            onAttach={onAttach}
-            disabled={disabled}
-            className="shrink-0 border-t border-border bg-background"
-          />
-        )}
       </div>
     );
   },

package/src/chat/chat-message.tsx

@@ -27,10 +27,6 @@ export interface ChatMessageProps {
   assistantLabel?: string;
   /** Hide the role label row entirely */
   hideRoleLabel?: boolean;
-  /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
-  hideAvatar?: boolean;
-  /** @deprecated Avatars were removed from the bubble design; this prop is ignored. */
-  avatar?: ReactNode;
 }
 
 export function ChatMessage({

package/src/chat/index.ts

@@ -2,7 +2,6 @@ export { ChatContainer, type ChatContainerProps } from "./chat-container";
 export { MessageList, type MessageListProps } from "./message-list";
 export { UserMessage, type UserMessageProps } from "./user-message";
 export { ChatMessage, type ChatMessageProps, type MessageRole } from "./chat-message";
-export { ChatInput, type ChatInputProps, type PendingFile } from "./chat-input";
 export { ThinkingIndicator, type ThinkingIndicatorProps } from "./thinking-indicator";
 export {
   AgentTimeline,

package/src/markdown/markdown.stories.tsx

@@ -39,7 +39,7 @@ pnpm add @tangle/sandbox-ui
 Import the components you need:
 
 \`\`\`tsx
-import { ChatInput, DropZone, UploadProgress } from '@tangle/sandbox-ui'
+import { AgentComposer, DropZone, UploadProgress } from '@tangle-network/sandbox-ui'
 \`\`\`
 
 > **Note:** Components assume a Tailwind CSS v4 setup with the design tokens

package/src/run/index.ts

@@ -9,5 +9,8 @@ export {
   type ExpandedToolDetailProps,
 } from "./expanded-tool-detail";
 export { LiveDuration } from "./run-item-primitives";
-export { ToolCallStep, ToolCallGroup, type ToolCallStepProps, type ToolCallGroupProps, type ToolCallType, type ToolCallStatus } from "./tool-call-step";
+// ToolCallStep/ToolCallGroup are internal adapters over InlineToolItem (used by
+// AgentTimeline + ToolCallFeed); only their status/type vocabulary is public
+// because ToolCallData references it.
+export { type ToolCallType, type ToolCallStatus } from "./tool-call-step";
 export { ToolCallFeed, parseToolEvent, type ToolCallFeedProps, type ToolCallData, type FeedSegment } from "./tool-call-feed";

package/src/run/tool-call-step.tsx

@@ -1,11 +1,9 @@
 /**
- * ToolCallStep — a single agent tool invocation as a collapsible activity step.
- *
- * Now a thin adapter over the canonical `InlineToolItem`: it maps the flat
- * `ToolCallData`-style props (label / status / detail / output / duration) onto
- * a `ToolPart` and delegates rendering, so the timeline feed (`AgentTimeline`,
- * `ToolCallFeed`) and the run group share ONE row implementation and one look.
- * The bespoke row markup is gone; only the prop adapter remains.
+ * ToolCallStep — internal adapter over the canonical `InlineToolItem` row.
+ * Maps flat `ToolCallData`-style props (label / status / detail / output /
+ * duration) onto a `ToolPart` so `AgentTimeline` and `ToolCallFeed` share the
+ * one row implementation. Not exported publicly; only the `ToolCallType` /
+ * `ToolCallStatus` vocabulary is (via `ToolCallData`).
  */
 
 import { type ReactNode } from "react";

package/src/chat/chat-input.stories.tsx

@@ -1,142 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { ChatInput, type PendingFile } from './chat-input'
-
-const meta: Meta<typeof ChatInput> = {
-  title: 'Chat/ChatInput',
-  component: ChatInput,
-  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
-  decorators: [
-    (Story) => (
-      <div className="w-[680px]">
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    onSend: (msg, files) => console.log('send', msg, files),
-    onCancel: () => console.log('cancel'),
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ChatInput>
-
-export const Empty: Story = {
-  name: 'Empty — ready',
-}
-
-export const WithModelSelector: Story = {
-  name: 'With model selector',
-  args: {
-    modelLabel: 'claude-sonnet-4-6',
-    onModelClick: () => console.log('model click'),
-  },
-}
-
-export const WithAttachButtons: Story = {
-  name: 'With attach buttons',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    onAttachFolder: (files) => console.log('attach folder', files),
-    modelLabel: 'claude-sonnet-4-6',
-    onModelClick: () => console.log('model click'),
-  },
-}
-
-export const Streaming: Story = {
-  name: 'Streaming — stop button active',
-  args: {
-    isStreaming: true,
-    onCancel: () => console.log('cancel'),
-    onAttach: (files) => console.log('attach', files),
-    modelLabel: 'claude-sonnet-4-6',
-  },
-}
-
-export const Disabled: Story = {
-  name: 'Disabled',
-  args: {
-    disabled: true,
-    onAttach: (files) => console.log('attach', files),
-    modelLabel: 'claude-sonnet-4-6',
-  },
-}
-
-const sampleFiles: PendingFile[] = [
-  { id: 'f1', name: 'dataset.csv', size: 204800, type: 'file', status: 'ready' },
-  { id: 'f2', name: 'report.pdf', size: 1572864, type: 'file', status: 'uploading' },
-]
-
-export const WithFilesAttached: Story = {
-  name: 'With file attachments',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    pendingFiles: sampleFiles,
-    onRemoveFile: (id) => console.log('remove', id),
-    modelLabel: 'claude-sonnet-4-6',
-    onModelClick: () => console.log('model click'),
-  },
-}
-
-const folderFiles: PendingFile[] = [
-  { id: 'd1', name: 'my-project', size: 0, type: 'folder', fileCount: 42, status: 'ready' },
-  { id: 'f3', name: 'notes.txt', size: 1024, type: 'file', status: 'ready' },
-]
-
-export const WithFolderAttached: Story = {
-  name: 'With folder + file',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    onAttachFolder: (files) => console.log('attach folder', files),
-    pendingFiles: folderFiles,
-    onRemoveFile: (id) => console.log('remove', id),
-    modelLabel: 'claude-sonnet-4-6',
-  },
-}
-
-export const WithErrorFile: Story = {
-  name: 'With error attachment',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    pendingFiles: [
-      { id: 'e1', name: 'too-large.zip', size: 524288000, type: 'file', status: 'error' },
-      { id: 'f4', name: 'config.json', size: 2048, type: 'file', status: 'ready' },
-    ],
-    onRemoveFile: (id) => console.log('remove', id),
-  },
-}
-
-export const CustomPlaceholder: Story = {
-  name: 'Custom placeholder',
-  args: {
-    placeholder: 'Describe the data transformation you need…',
-    onAttach: (files) => console.log('attach', files),
-    modelLabel: 'gpt-4o',
-  },
-}
-
-/** Static drag-over overlay preview */
-export const DragOverPreview: Story = {
-  name: 'Drag-over overlay (static preview)',
-  render: (args) => (
-    <div className="w-[680px] px-4 py-3 relative">
-      {/* Drag overlay replica */}
-      <div className="absolute inset-0 z-10 flex items-center justify-center rounded-[28px] border-2 border-dashed border-blue-400 bg-blue-500/8 backdrop-blur-sm pointer-events-none mx-4 my-3">
-        <div className="text-center">
-          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-500/15">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="17 8 12 3 7 8" />
-              <line x1="12" y1="3" x2="12" y2="15" />
-            </svg>
-          </div>
-          <p className="text-sm font-semibold text-white">Drop files to add context</p>
-          <p className="mt-1 text-xs text-zinc-400">Files will be attached to your next message.</p>
-        </div>
-      </div>
-      {/* Underlying input (blurred) */}
-      <ChatInput {...args} onAttach={() => {}} />
-    </div>
-  ),
-  args: {},
-}