@agentxjs/ui 1.0.2 → 1.1.0

package/dist/api/index.d.ts

@@ -4,5 +4,6 @@ export * from '../components/container';
 export * from '../components/pane';
 export * from '../components/layout';
 export * from '../components/element';
+export * from '../components/mobile';
 export * from '../components/typography';
 export * from '../utils';

package/dist/components/container/Chat.d.ts

@@ -5,26 +5,20 @@ export interface ChatProps {
      */
     agentx: AgentX | null;
     /**
-     * Image ID for the conversation (preferred in Image-First model)
+     * Image ID for the conversation
      */
     imageId?: string | null;
-    /**
-     * Agent ID to chat with (legacy, use imageId instead)
-     * @deprecated Use imageId instead
-     */
-    agentId?: string | null;
     /**
      * Agent name to display in header
      */
     agentName?: string;
     /**
      * Callback when save button is clicked
-     * Note: In Image-First model, messages are auto-saved
      */
     onSave?: () => void;
     /**
      * Show save button in toolbar
-     * @default true
+     * @default false
      */
     showSaveButton?: boolean;
     /**
@@ -44,4 +38,4 @@ export interface ChatProps {
 /**
  * Chat component
  */
-export declare function Chat({ agentx, imageId, agentId: legacyAgentId, agentName, onSave, showSaveButton, placeholder, inputHeightRatio, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ agentx, imageId, agentName, onSave, showSaveButton, placeholder, inputHeightRatio, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/ChatHeader.d.ts

@@ -1,3 +1,4 @@
+import { AgentState } from 'agentxjs';
 /**
  * ChatHeader - Header component for Chat interface
  *
@@ -21,7 +22,7 @@ export interface ChatHeaderProps {
     /**
      * Current agent status
      */
-    status?: "idle" | "queued" | "thinking" | "responding" | "tool_executing" | "error";
+    status?: AgentState;
     /**
      * Number of messages in conversation
      */

package/dist/components/element/Badge.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "success" | "primary" | "info" | "secondary" | "warning" | "destructive" | "outline" | null | undefined;
+    variant?: "success" | "default" | "primary" | "info" | "secondary" | "warning" | "destructive" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/element/MessageAvatar.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const avatarVariants: (props?: ({
-    variant?: "error" | "success" | "primary" | "info" | "secondary" | "warning" | "neutral" | null | undefined;
+    variant?: "success" | "error" | "primary" | "info" | "secondary" | "warning" | "neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {

package/dist/components/entry/AssistantEntry.d.ts

@@ -0,0 +1,86 @@
+import { AssistantConversationData } from './types';
+/**
+ * AssistantEntry - AI assistant response entry
+ *
+ * Displays assistant's response with blocks (TextBlock, ToolBlock, etc.)
+ * rendered in order. Supports streaming and status indicators.
+ *
+ * @example
+ * ```tsx
+ * // Completed entry with text and tool blocks
+ * <AssistantEntry
+ *   entry={{
+ *     type: "assistant",
+ *     id: "conv_123",
+ *     messageIds: ["msg_1"],
+ *     timestamp: Date.now(),
+ *     status: "completed",
+ *     blocks: [
+ *       { type: "text", id: "t1", content: "Let me check...", status: "completed" },
+ *       { type: "tool", id: "t2", toolCallId: "tc1", name: "Bash", ... },
+ *       { type: "text", id: "t3", content: "Done!", status: "completed" },
+ *     ],
+ *   }}
+ * />
+ *
+ * // Streaming entry
+ * <AssistantEntry
+ *   entry={{
+ *     type: "assistant",
+ *     id: "conv_123",
+ *     messageIds: [],
+ *     timestamp: Date.now(),
+ *     status: "streaming",
+ *     blocks: [
+ *       { type: "text", id: "text_123", content: "", status: "streaming" },
+ *     ],
+ *   }}
+ *   streamingText="I'm thinking about..."
+ *   currentTextBlockId="text_123"
+ * />
+ * ```
+ */
+import * as React from "react";
+export interface AssistantEntryProps {
+    /**
+     * Assistant conversation data
+     */
+    entry: AssistantConversationData;
+    /**
+     * Streaming text (for streaming TextBlock)
+     */
+    streamingText?: string;
+    /**
+     * Current streaming text block id
+     */
+    currentTextBlockId?: string | null;
+    /**
+     * Callback when stop is triggered
+     */
+    onStop?: () => void;
+    /**
+     * Callback when copy button is clicked
+     */
+    onCopy?: () => void;
+    /**
+     * Callback when regenerate button is clicked
+     */
+    onRegenerate?: () => void;
+    /**
+     * Callback when like button is clicked
+     */
+    onLike?: () => void;
+    /**
+     * Callback when dislike button is clicked
+     */
+    onDislike?: () => void;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * AssistantEntry Component
+ */
+export declare const AssistantEntry: React.FC<AssistantEntryProps>;
+export default AssistantEntry;

package/dist/components/entry/AssistantToolbar.d.ts

@@ -0,0 +1,53 @@
+import { AssistantConversationStatus } from './types';
+/**
+ * AssistantToolbar - Toolbar for assistant message actions
+ *
+ * Displays action buttons below assistant messages:
+ * - Copy, regenerate, like, dislike for completed messages
+ * - "esc to stop" hint for streaming messages
+ *
+ * @example
+ * ```tsx
+ * <AssistantToolbar
+ *   status="completed"
+ *   onCopy={() => handleCopy()}
+ *   onRegenerate={() => handleRegenerate()}
+ * />
+ * ```
+ */
+import * as React from "react";
+export interface AssistantToolbarProps {
+    /**
+     * Current status of the conversation
+     */
+    status: AssistantConversationStatus;
+    /**
+     * Callback when copy button is clicked
+     */
+    onCopy?: () => void;
+    /**
+     * Callback when regenerate button is clicked
+     */
+    onRegenerate?: () => void;
+    /**
+     * Callback when like button is clicked
+     */
+    onLike?: () => void;
+    /**
+     * Callback when dislike button is clicked
+     */
+    onDislike?: () => void;
+    /**
+     * Callback when stop is triggered (click or ESC)
+     */
+    onStop?: () => void;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * AssistantToolbar Component
+ */
+export declare const AssistantToolbar: React.FC<AssistantToolbarProps>;
+export default AssistantToolbar;

package/dist/components/entry/ErrorEntry.d.ts

@@ -0,0 +1,35 @@
+import { ErrorConversationData } from './types';
+/**
+ * ErrorEntry - Error message entry
+ *
+ * Displays error message with red styling.
+ *
+ * @example
+ * ```tsx
+ * <ErrorEntryComponent
+ *   entry={{
+ *     type: "error",
+ *     id: "err_123",
+ *     content: "Failed to connect to server",
+ *     timestamp: Date.now(),
+ *     errorCode: "CONNECTION_ERROR",
+ *   }}
+ * />
+ * ```
+ */
+import * as React from "react";
+export interface ErrorEntryProps {
+    /**
+     * Error conversation data
+     */
+    entry: ErrorConversationData;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ErrorEntry Component
+ */
+export declare const ErrorEntry: React.FC<ErrorEntryProps>;
+export default ErrorEntry;

package/dist/components/entry/UserEntry.d.ts

@@ -0,0 +1,35 @@
+import { UserConversationData } from './types';
+/**
+ * UserEntry - User message entry
+ *
+ * Displays user's message with right-aligned layout and status indicator.
+ *
+ * @example
+ * ```tsx
+ * <UserEntryComponent
+ *   entry={{
+ *     type: "user",
+ *     id: "msg_123",
+ *     content: "Hello, can you help me?",
+ *     timestamp: Date.now(),
+ *     status: "success",
+ *   }}
+ * />
+ * ```
+ */
+import * as React from "react";
+export interface UserEntryProps {
+    /**
+     * User conversation data
+     */
+    entry: UserConversationData;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * UserEntry Component
+ */
+export declare const UserEntry: React.FC<UserEntryProps>;
+export default UserEntry;

package/dist/components/entry/blocks/TextBlock.d.ts

@@ -0,0 +1,21 @@
+import { TextBlockData } from '../types';
+export interface TextBlockProps {
+    /**
+     * Text block data
+     */
+    block: TextBlockData;
+    /**
+     * Streaming text (for streaming status)
+     * When provided and block.status is "streaming", shows this instead of block.content
+     */
+    streamingText?: string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * TextBlock component
+ */
+export declare function TextBlock({ block, streamingText, className }: TextBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export default TextBlock;

package/dist/components/entry/blocks/ToolBlock.d.ts

@@ -0,0 +1,20 @@
+import { ToolBlockData } from '../types';
+export interface ToolBlockProps {
+    /**
+     * Tool block data
+     */
+    block: ToolBlockData;
+    /**
+     * Default expanded state
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ToolBlock component
+ */
+export declare function ToolBlock({ block, defaultExpanded, className }: ToolBlockProps): import("react/jsx-runtime").JSX.Element;
+export default ToolBlock;

package/dist/components/entry/blocks/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Block components
+ *
+ * Sub-components used within AssistantEntry.
+ * Each block type has its own component.
+ */
+export { TextBlock, type TextBlockProps } from './TextBlock';
+export { ToolBlock, type ToolBlockProps } from './ToolBlock';

package/dist/components/entry/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Conversation Components
+ *
+ * Conversation-first design for chat UI rendering.
+ * Conversation = one party's complete utterance in a turn.
+ * Block = content unit within a Conversation (TextBlock, ToolBlock, etc.).
+ */
+export type { ConversationData, UserConversationData, AssistantConversationData, ErrorConversationData, UserConversationStatus, AssistantConversationStatus, } from './types';
+export type { BlockData, TextBlockData, ToolBlockData, ImageBlockData, TextBlockStatus, ToolBlockStatus, } from './types';
+export { isUserConversation, isAssistantConversation, isErrorConversation, isTextBlock, isToolBlock, isImageBlock, } from './types';
+export { UserEntry, type UserEntryProps } from './UserEntry';
+export { AssistantEntry, type AssistantEntryProps } from './AssistantEntry';
+export { ErrorEntry, type ErrorEntryProps } from './ErrorEntry';
+export { TextBlock, type TextBlockProps } from './blocks';
+export { ToolBlock, type ToolBlockProps } from './blocks';

package/dist/components/entry/types.d.ts

@@ -0,0 +1,152 @@
+/**
+ * Conversation Types
+ *
+ * Conversation-first design for chat UI rendering.
+ * Conversation = one party's complete utterance in a turn.
+ * Block = content unit within a Conversation (TextBlock, ToolBlock, ImageBlock, etc.).
+ *
+ * Data flow:
+ * Message (backend) → Conversation (UI layer) → Block (sub-components)
+ *
+ * Terminology:
+ * - Turn = UserConversation + AssistantConversation
+ * - AssistantConversation may contain multiple backend messages (due to tool calls)
+ * - Blocks are rendered in order: text, tool, text, tool, ...
+ */
+/**
+ * Block base interface
+ */
+interface BlockBase {
+    /** Block id */
+    id: string;
+    /** Timestamp when block was created */
+    timestamp: number;
+}
+/**
+ * Text block status
+ */
+export type TextBlockStatus = "streaming" | "completed";
+/**
+ * Text block data - text content in AssistantConversation
+ */
+export interface TextBlockData extends BlockBase {
+    type: "text";
+    /** Text content */
+    content: string;
+    /** Block status */
+    status: TextBlockStatus;
+}
+/**
+ * Tool block status
+ * - planning: AI is generating tool input (tool_use_start received, waiting for complete input)
+ * - executing: Tool input complete, tool is executing
+ * - success: Tool execution completed successfully
+ * - error: Tool execution failed
+ */
+export type ToolBlockStatus = "planning" | "executing" | "success" | "error";
+/**
+ * Tool block data - tool call in AssistantConversation
+ */
+export interface ToolBlockData extends BlockBase {
+    type: "tool";
+    /** Tool call id (for matching result) */
+    toolCallId: string;
+    /** Tool name */
+    name: string;
+    /** Tool input parameters */
+    input: unknown;
+    /** Execution status */
+    status: ToolBlockStatus;
+    /** Tool output (when completed) */
+    output?: unknown;
+    /** Start time in milliseconds (for duration calculation) */
+    startTime?: number;
+    /** Execution duration in seconds */
+    duration?: number;
+}
+/**
+ * Image block data - image content (future)
+ */
+export interface ImageBlockData extends BlockBase {
+    type: "image";
+    /** Image URL */
+    url: string;
+    /** Alt text */
+    alt?: string;
+}
+/**
+ * Union type for all block types
+ */
+export type BlockData = TextBlockData | ToolBlockData | ImageBlockData;
+export declare function isTextBlock(block: BlockData): block is TextBlockData;
+export declare function isToolBlock(block: BlockData): block is ToolBlockData;
+export declare function isImageBlock(block: BlockData): block is ImageBlockData;
+/**
+ * User conversation status
+ */
+export type UserConversationStatus = "pending" | "success" | "error" | "interrupted";
+/**
+ * User conversation data - user's message
+ */
+export interface UserConversationData {
+    type: "user";
+    /** Conversation id */
+    id: string;
+    /** Message content */
+    content: string;
+    /** Timestamp */
+    timestamp: number;
+    /** Send status */
+    status: UserConversationStatus;
+    /** Error code (if status is error) */
+    errorCode?: string;
+}
+/**
+ * Assistant conversation status (5-state lifecycle)
+ * - queued: user sent message, waiting for backend to receive
+ * - processing: backend received, preparing to process (conversation_start)
+ * - thinking: AI is thinking (conversation_thinking)
+ * - streaming: AI is outputting text (conversation_responding / text_delta)
+ * - completed: AI finished responding (conversation_end)
+ */
+export type AssistantConversationStatus = "queued" | "processing" | "thinking" | "streaming" | "completed";
+/**
+ * Assistant conversation data - AI's response with blocks
+ * One AssistantConversation may contain multiple backend messages (due to tool call loops)
+ * All content is stored in blocks array (TextBlock, ToolBlock, etc.)
+ */
+export interface AssistantConversationData {
+    type: "assistant";
+    /** Conversation id - frontend instance ID, never changes once created */
+    id: string;
+    /** Backend message ids - accumulated from multiple message_start events */
+    messageIds: string[];
+    /** Timestamp */
+    timestamp: number;
+    /** Response status */
+    status: AssistantConversationStatus;
+    /** Content blocks - text, tools, images, etc. rendered in order */
+    blocks: BlockData[];
+}
+/**
+ * Error conversation data - error message
+ */
+export interface ErrorConversationData {
+    type: "error";
+    /** Conversation id */
+    id: string;
+    /** Error message content */
+    content: string;
+    /** Timestamp */
+    timestamp: number;
+    /** Error code */
+    errorCode?: string;
+}
+/**
+ * Union type for all conversations
+ */
+export type ConversationData = UserConversationData | AssistantConversationData | ErrorConversationData;
+export declare function isUserConversation(conversation: ConversationData): conversation is UserConversationData;
+export declare function isAssistantConversation(conversation: ConversationData): conversation is AssistantConversationData;
+export declare function isErrorConversation(conversation: ConversationData): conversation is ErrorConversationData;
+export {};

package/dist/components/message/AssistantMessage.d.ts

@@ -0,0 +1,35 @@
+/**
+ * AssistantMessage - Assistant message component with 4-state lifecycle
+ *
+ * States:
+ * - queued: Waiting to start processing
+ * - thinking: AI is thinking (extended thinking block)
+ * - responding: AI is streaming response
+ * - completed: Message is complete
+ */
+import * as React from "react";
+export type AssistantMessageStatus = "queued" | "thinking" | "responding" | "completed";
+export interface AssistantMessageProps {
+    /**
+     * Message status (lifecycle state)
+     */
+    status: AssistantMessageStatus;
+    /**
+     * Message content (for completed status)
+     */
+    content?: string;
+    /**
+     * Streaming text (for responding status)
+     */
+    streaming?: string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * AssistantMessage Component
+ *
+ * Single component handling all 4 lifecycle states
+ */
+export declare const AssistantMessage: React.FC<AssistantMessageProps>;

package/dist/components/message/ErrorMessage.d.ts

@@ -0,0 +1,24 @@
+/**
+ * ErrorMessage - Error message component
+ *
+ * Displays error message with red styling.
+ */
+import * as React from "react";
+export interface ErrorMessageProps {
+    /**
+     * Error content
+     */
+    content: string;
+    /**
+     * Error code (optional)
+     */
+    errorCode?: string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ErrorMessage Component
+ */
+export declare const ErrorMessage: React.FC<ErrorMessageProps>;

package/dist/components/message/MessageAvatar.d.ts

@@ -0,0 +1,21 @@
+import { MessageRole } from 'agentxjs';
+/**
+ * MessageAvatar - Display avatar for different message roles
+ *
+ * Pure UI component that renders a circular avatar based on message role.
+ */
+import * as React from "react";
+export interface MessageAvatarProps {
+    /**
+     * Message role
+     */
+    role: MessageRole;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MessageAvatar Component
+ */
+export declare const MessageAvatar: React.FC<MessageAvatarProps>;

package/dist/components/message/MessageContent.d.ts

@@ -0,0 +1,25 @@
+import { ContentPart } from 'agentxjs';
+/**
+ * MessageContent - Render message content with Markdown support
+ *
+ * Pure UI component that handles:
+ * - String content (renders as Markdown)
+ * - ContentPart array (extracts text and renders)
+ * - Other content (renders as JSON)
+ */
+import * as React from "react";
+export interface MessageContentProps {
+    /**
+     * Content to render
+     * Can be string, ContentPart array, or any other structure
+     */
+    content: string | ContentPart[] | unknown;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MessageContent Component
+ */
+export declare const MessageContent: React.FC<MessageContentProps>;

package/dist/components/message/ToolMessage.d.ts

@@ -0,0 +1,41 @@
+/**
+ * ToolMessage - Tool call message component
+ *
+ * Displays tool call with embedded result using ToolCard.
+ * Result is directly embedded in props (not via metadata).
+ */
+import * as React from "react";
+/**
+ * @deprecated Use ToolBlock from ~/components/entry instead
+ */
+interface EmbeddedToolResult {
+    output: unknown;
+    duration?: number;
+}
+export interface ToolMessageProps {
+    /**
+     * Tool call info
+     */
+    toolCall: {
+        id: string;
+        name: string;
+        input: unknown;
+    };
+    /**
+     * Tool result (embedded, not separate message)
+     */
+    toolResult?: EmbeddedToolResult;
+    /**
+     * Timestamp for calculating duration
+     */
+    timestamp: number;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ToolMessage Component
+ */
+export declare const ToolMessage: React.FC<ToolMessageProps>;
+export {};