@agentxjs/ui 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentxjs/ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "AgentX UI Components - React component library for building AI agent interfaces",
   "license": "MIT",
   "repository": {
@@ -28,9 +28,22 @@
     "dist",
     "README.md"
   ],
+  "scripts": {
+    "dev": "vite",
+    "dev:server": "tsx --watch dev-tools/server/dev-server.ts",
+    "dev:full": "concurrently \"pnpm dev:server\" \"storybook dev -p 6007\"",
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "dependencies": {
+    "@agentxjs/common": "workspace:*",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
+    "agentxjs": "workspace:*",
     "allotment": "^1.20.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -42,10 +55,11 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.5.5",
-    "zustand": "^5.0.2",
-    "agentxjs": "1.0.2"
+    "vaul": "^1.1.2",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
+    "@agentxjs/runtime": "workspace:*",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
@@ -69,9 +83,7 @@
     "typescript": "^5.9.3",
     "vite": "^6.0.5",
     "vite-plugin-dts": "^4.3.0",
-    "ws": "^8.18.0",
-    "@agentxjs/runtime": "1.0.2",
-    "@agentxjs/common": "0.1.1"
+    "ws": "^8.18.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -79,16 +91,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "dev": "vite",
-    "dev:server": "tsx --watch dev-tools/server/dev-server.ts",
-    "dev:full": "concurrently \"pnpm dev:server\" \"storybook dev -p 6007\"",
-    "build": "tsc && vite build",
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Deepractice
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/components/container/message/MessageList.d.ts

@@ -1,16 +0,0 @@
-import { Message } from 'agentxjs';
-export interface MessageListProps {
-    /**
-     * Array of messages to display
-     */
-    messages: Message[];
-    /**
-     * Current streaming text (if any)
-     */
-    streamingText?: string;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export declare function MessageList({ messages, streamingText, className }: MessageListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/index.d.ts

@@ -1,3 +0,0 @@
-export { MessageList, type MessageListProps } from './MessageList';
-export * from './items';
-export * from './parts';

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

@@ -1,33 +0,0 @@
-import { AssistantMessage as AssistantMessageType } from 'agentxjs';
-export interface AssistantMessageProps {
-    /**
-     * Assistant message data
-     */
-    message: AssistantMessageType;
-    /**
-     * Whether this message is currently streaming
-     */
-    isStreaming?: boolean;
-}
-/**
- * AssistantMessage - Display an AI assistant message
- *
- * Features:
- * - AI avatar (blue color)
- * - Text content rendering
- * - Thinking process (collapsible)
- * - Tool calls display
- * - File attachments
- * - Streaming support
- *
- * @example
- * ```tsx
- * <AssistantMessage message={{
- *   id: '2',
- *   role: 'assistant',
- *   content: 'Here is the answer...',
- *   timestamp: Date.now()
- * }} />
- * ```
- */
-export declare function AssistantMessage({ message, isStreaming }: AssistantMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/items/ErrorAlert.d.ts

@@ -1,33 +0,0 @@
-import { AgentError } from 'agentxjs';
-export interface ErrorAlertProps {
-    /**
-     * The AgentError to display
-     */
-    error: AgentError;
-    /**
-     * Whether to show detailed error information
-     * @default false
-     */
-    showDetails?: boolean;
-}
-/**
- * ErrorAlert - Display an agent error
- *
- * Features:
- * - Error severity visualization (fatal/error/warning)
- * - Error category badge (driver/llm/network/validation/system)
- * - Error code and message
- * - Optional details expansion
- *
- * @example
- * ```tsx
- * <ErrorAlert error={{
- *   category: 'llm',
- *   code: 'RATE_LIMITED',
- *   message: 'Rate limit exceeded',
- *   severity: 'error',
- *   recoverable: true,
- * }} />
- * ```
- */
-export declare function ErrorAlert({ error, showDetails }: ErrorAlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/items/ToolCallMessage.d.ts

@@ -1,31 +0,0 @@
-import { ToolCallMessage as ToolCallMessageType } from 'agentxjs';
-export interface ToolCallMessageProps {
-    /**
-     * Tool call message data
-     */
-    message: ToolCallMessageType;
-}
-/**
- * ToolCallMessage - Display AI's request to call a tool
- *
- * Features:
- * - Tool avatar (info blue)
- * - Tool call display (collapsible)
- *
- * @example
- * ```tsx
- * <ToolCallMessage message={{
- *   id: '3',
- *   role: 'assistant',
- *   subtype: 'tool-call',
- *   toolCall: {
- *     type: 'tool-call',
- *     id: 'call_123',
- *     name: 'get_weather',
- *     input: { location: 'San Francisco' }
- *   },
- *   timestamp: Date.now()
- * }} />
- * ```
- */
-export declare function ToolCallMessage({ message }: ToolCallMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/items/ToolResultMessage.d.ts

@@ -1,33 +0,0 @@
-import { ToolResultMessage as ToolResultMessageType } from 'agentxjs';
-export interface ToolResultMessageProps {
-    /**
-     * Tool result message data
-     */
-    message: ToolResultMessageType;
-}
-/**
- * ToolResultMessage - Display tool execution result
- *
- * Features:
- * - Tool result avatar (success green)
- * - Tool result display (collapsible)
- * - Rich output formatting
- *
- * @example
- * ```tsx
- * <ToolResultMessage message={{
- *   id: '4',
- *   role: 'tool',
- *   subtype: 'tool-result',
- *   toolResult: {
- *     type: 'tool-result',
- *     id: 'call_123',
- *     name: 'get_weather',
- *     output: { type: 'text', value: 'Temperature: 72°F' }
- *   },
- *   toolCallId: 'call_123',
- *   timestamp: Date.now()
- * }} />
- * ```
- */
-export declare function ToolResultMessage({ message }: ToolResultMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/items/ToolUseMessage.d.ts

@@ -1,30 +0,0 @@
-import { ToolCallMessage, ToolResultMessage } from 'agentxjs';
-export interface ToolUseMessageProps {
-    /**
-     * Tool call message
-     */
-    toolCall: ToolCallMessage;
-    /**
-     * Tool result message (optional - may not have arrived yet)
-     */
-    toolResult?: ToolResultMessage;
-    /**
-     * Whether to show expanded by default
-     */
-    defaultExpanded?: boolean;
-}
-/**
- * ToolUseMessage - Unified display of tool call + result
- *
- * Combines ToolCallMessage and ToolResultMessage into a single visual unit.
- * Supports streaming: shows "executing" state when result hasn't arrived yet.
- *
- * @example
- * ```tsx
- * <ToolUseMessage
- *   toolCall={toolCallMsg}
- *   toolResult={toolResultMsg}
- * />
- * ```
- */
-export declare function ToolUseMessage({ toolCall, toolResult, defaultExpanded, }: ToolUseMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/items/UserMessage.d.ts

@@ -1,27 +0,0 @@
-import { UserMessage as UserMessageType } from 'agentxjs';
-export interface UserMessageProps {
-    /**
-     * User message data
-     */
-    message: UserMessageType;
-}
-/**
- * UserMessage - Display a user message
- *
- * Features:
- * - User avatar (amber color)
- * - Text content rendering
- * - Image parts support
- * - File parts support
- *
- * @example
- * ```tsx
- * <UserMessage message={{
- *   id: '1',
- *   role: 'user',
- *   content: 'Hello, how are you?',
- *   timestamp: Date.now()
- * }} />
- * ```
- */
-export declare function UserMessage({ message }: UserMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/items/index.d.ts

@@ -1,6 +0,0 @@
-export { UserMessage, type UserMessageProps } from './UserMessage';
-export { AssistantMessage, type AssistantMessageProps } from './AssistantMessage';
-export { ToolCallMessage } from './ToolCallMessage';
-export { ToolResultMessage } from './ToolResultMessage';
-export { ToolUseMessage, type ToolUseMessageProps } from './ToolUseMessage';
-export { ErrorAlert, type ErrorAlertProps } from './ErrorAlert';

package/dist/components/container/message/parts/FileContent.d.ts

@@ -1,24 +0,0 @@
-export interface FileContentProps {
-    /**
-     * File data (base64-encoded string or URL)
-     */
-    data: string;
-    /**
-     * File MIME type (IANA media type)
-     */
-    mediaType: string;
-    /**
-     * Optional filename
-     */
-    filename?: string;
-}
-/**
- * FileContent - Render file attachment with download
- *
- * @example
- * ```tsx
- * <FileContent data="data:application/pdf;base64,..." mediaType="application/pdf" filename="document.pdf" />
- * <FileContent data="https://example.com/file.xlsx" mediaType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" filename="data.xlsx" />
- * ```
- */
-export declare function FileContent({ data, mediaType, filename }: FileContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/parts/ImageContent.d.ts

@@ -1,32 +0,0 @@
-export interface ImageContentProps {
-    /**
-     * Image data (base64-encoded string or URL)
-     */
-    data: string;
-    /**
-     * Image MIME type
-     */
-    mediaType: "image/png" | "image/jpeg" | "image/gif" | "image/webp";
-    /**
-     * Optional image name/filename
-     */
-    name?: string;
-    /**
-     * Optional max width (CSS value)
-     */
-    maxWidth?: string;
-    /**
-     * Optional max height (CSS value)
-     */
-    maxHeight?: string;
-}
-/**
- * ImageContent - Render image with preview and modal
- *
- * @example
- * ```tsx
- * <ImageContent data="data:image/png;base64,..." mediaType="image/png" />
- * <ImageContent data="https://example.com/image.jpg" mediaType="image/jpeg" name="screenshot.jpg" />
- * ```
- */
-export declare function ImageContent({ data, mediaType: _mediaType, name, maxWidth, maxHeight, }: ImageContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/parts/TextContent.d.ts

@@ -1,20 +0,0 @@
-export interface TextContentProps {
-    /**
-     * Text content (supports Markdown)
-     */
-    text: string;
-    /**
-     * Whether this text is currently streaming
-     */
-    isStreaming?: boolean;
-}
-/**
- * TextContent - Render text with Markdown support
- *
- * @example
- * ```tsx
- * <TextContent text="Hello **world**" />
- * <TextContent text="Streaming..." isStreaming />
- * ```
- */
-export declare function TextContent({ text, isStreaming }: TextContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/parts/ThinkingContent.d.ts

@@ -1,28 +0,0 @@
-export interface ThinkingContentProps {
-    /**
-     * AI reasoning text
-     */
-    reasoning: string;
-    /**
-     * Token count for thinking (optional)
-     */
-    tokenCount?: number;
-    /**
-     * Whether this thinking is currently streaming
-     */
-    isStreaming?: boolean;
-    /**
-     * Whether to show collapsed by default
-     */
-    defaultCollapsed?: boolean;
-}
-/**
- * ThinkingContent - Render AI's extended thinking/reasoning process
- *
- * @example
- * ```tsx
- * <ThinkingContent reasoning="Let me analyze this..." tokenCount={150} />
- * <ThinkingContent reasoning="Thinking..." isStreaming />
- * ```
- */
-export declare function ThinkingContent({ reasoning, tokenCount, isStreaming, defaultCollapsed, }: ThinkingContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/parts/ToolCallContent.d.ts

@@ -1,31 +0,0 @@
-export interface ToolCallContentProps {
-    /**
-     * Unique identifier for this tool call
-     */
-    id: string;
-    /**
-     * Tool name
-     */
-    name: string;
-    /**
-     * Tool input parameters
-     */
-    input: Record<string, unknown>;
-    /**
-     * Whether to show collapsed by default
-     */
-    defaultCollapsed?: boolean;
-}
-/**
- * ToolCallContent - Render AI's tool invocation request
- *
- * @example
- * ```tsx
- * <ToolCallContent
- *   id="call_123"
- *   name="get_weather"
- *   input={{ location: "San Francisco", unit: "celsius" }}
- * />
- * ```
- */
-export declare function ToolCallContent({ id, name, input, defaultCollapsed, }: ToolCallContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/parts/ToolResultContent.d.ts

@@ -1,32 +0,0 @@
-import { ToolResultOutput } from 'agentxjs';
-export interface ToolResultContentProps {
-    /**
-     * Tool call ID this result corresponds to
-     */
-    id: string;
-    /**
-     * Tool name
-     */
-    name: string;
-    /**
-     * Tool execution output
-     */
-    output: ToolResultOutput;
-    /**
-     * Whether to show collapsed by default
-     */
-    defaultCollapsed?: boolean;
-}
-/**
- * ToolResultContent - Render tool execution result
- *
- * @example
- * ```tsx
- * <ToolResultContent
- *   id="call_123"
- *   name="get_weather"
- *   output={{ type: "text", value: "Temperature: 72°F" }}
- * />
- * ```
- */
-export declare function ToolResultContent({ id, name, output, defaultCollapsed, }: ToolResultContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/container/message/parts/index.d.ts

@@ -1,6 +0,0 @@
-export { TextContent, type TextContentProps } from './TextContent';
-export { ImageContent, type ImageContentProps } from './ImageContent';
-export { FileContent, type FileContentProps } from './FileContent';
-export { ThinkingContent, type ThinkingContentProps } from './ThinkingContent';
-export { ToolCallContent, type ToolCallContentProps } from './ToolCallContent';
-export { ToolResultContent, type ToolResultContentProps } from './ToolResultContent';

package/dist/hooks/useAgent.d.ts

@@ -1,102 +0,0 @@
-import { AgentX } from 'agentxjs';
-/**
- * Agent state for UI
- */
-export type AgentStatus = "idle" | "queued" | "thinking" | "responding" | "tool_executing" | "error";
-/**
- * Message for UI display
- */
-export interface UIMessage {
-    id: string;
-    role: "user" | "assistant" | "tool_call" | "tool_result" | "error";
-    content: string | unknown;
-    timestamp: number;
-    /** Optional metadata (e.g., errorCode for error messages) */
-    metadata?: Record<string, unknown>;
-}
-/**
- * Error info for UI
- */
-export interface UIError {
-    code: string;
-    message: string;
-    recoverable: boolean;
-}
-/**
- * Return type of useAgent hook
- */
-export interface UseAgentResult {
-    /**
-     * All messages in the conversation
-     */
-    messages: UIMessage[];
-    /**
-     * Current streaming text (accumulates during response)
-     */
-    streaming: string;
-    /**
-     * Current agent status
-     */
-    status: AgentStatus;
-    /**
-     * Errors received
-     */
-    errors: UIError[];
-    /**
-     * Send a message to the agent
-     */
-    send: (text: string) => void;
-    /**
-     * Interrupt the current response
-     */
-    interrupt: () => void;
-    /**
-     * Whether the agent is currently processing
-     */
-    isLoading: boolean;
-    /**
-     * Clear all messages
-     */
-    clearMessages: () => void;
-    /**
-     * Clear all errors
-     */
-    clearErrors: () => void;
-    /**
-     * Current agent ID (if running)
-     */
-    agentId: string | null;
-}
-/**
- * Options for useAgent hook
- */
-export interface UseAgentOptions {
-    /**
-     * Initial messages to display
-     */
-    initialMessages?: UIMessage[];
-    /**
-     * Callback when a message is sent
-     */
-    onSend?: (text: string) => void;
-    /**
-     * Callback when an error occurs
-     */
-    onError?: (error: UIError) => void;
-    /**
-     * Callback when status changes
-     */
-    onStatusChange?: (status: AgentStatus) => void;
-}
-/**
- * React hook for binding to Agent events via AgentX
- *
- * @param agentx - The AgentX instance
- * @param imageId - The image ID for the conversation
- * @param options - Optional configuration
- * @returns Reactive state and control functions
- */
-export declare function useAgent(agentx: AgentX | null, imageId: string | null, options?: UseAgentOptions): UseAgentResult;
-export type AgentIdentifier = {
-    imageId?: string;
-};