@agentxjs/ui 1.0.2 → 1.1.0

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

@@ -0,0 +1,30 @@
+import { UserConversationStatus } from '../../hooks/useAgent';
+/**
+ * UserMessage - User message component
+ *
+ * Displays user message with right-aligned layout and status indicator.
+ */
+import * as React from "react";
+/**
+ * @deprecated Use UserEntry from ~/components/entry instead
+ */
+type UserMessageStatus = UserConversationStatus;
+export interface UserMessageProps {
+    /**
+     * Message content
+     */
+    content: string;
+    /**
+     * Message status
+     */
+    status: UserMessageStatus;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * UserMessage Component
+ */
+export declare const UserMessage: React.FC<UserMessageProps>;
+export {};

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

@@ -0,0 +1,39 @@
+/**
+ * Message Components
+ *
+ * Simple, direct message rendering without handler chains.
+ * Each component renders a specific message type.
+ *
+ * ## Components
+ *
+ * - UserMessage: User messages with status indicator
+ * - AssistantMessage: Assistant messages with 4-state lifecycle
+ * - ToolMessage: Tool calls with embedded results
+ * - ErrorMessage: Error display
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { AssistantMessage, UserMessage, ToolMessage } from "~/components/message";
+ *
+ * // User message
+ * <UserMessage content="Hello" status="success" />
+ *
+ * // Assistant message with 4-state lifecycle
+ * <AssistantMessage status="completed" content="Hi there!" />
+ * <AssistantMessage status="responding" streaming="I'm thinking..." />
+ *
+ * // Tool message with embedded result
+ * <ToolMessage
+ *   toolCall={{ id: "1", name: "search", input: { query: "test" } }}
+ *   toolResult={{ output: "results", duration: 1.2 }}
+ *   timestamp={Date.now()}
+ * />
+ * ```
+ */
+export { UserMessage, type UserMessageProps } from './UserMessage';
+export { AssistantMessage, type AssistantMessageProps, type AssistantMessageStatus, } from './AssistantMessage';
+export { ToolMessage, type ToolMessageProps } from './ToolMessage';
+export { ErrorMessage, type ErrorMessageProps } from './ErrorMessage';
+export { MessageAvatar, type MessageAvatarProps } from './MessageAvatar';
+export { MessageContent, type MessageContentProps } from './MessageContent';

package/dist/components/mobile/MobileAgentList.d.ts

@@ -0,0 +1,51 @@
+import { AgentX } from 'agentxjs';
+/**
+ * MobileAgentList - Mobile agent/conversation list
+ *
+ * A mobile-optimized list following Claude App's design:
+ * - Clean list items with good touch targets
+ * - Swipe to delete (optional)
+ * - Search at top
+ * - New conversation button
+ */
+import * as React from "react";
+export interface MobileAgentListProps {
+    /**
+     * AgentX instance
+     */
+    agentx: AgentX | null;
+    /**
+     * Container ID
+     */
+    containerId?: string;
+    /**
+     * Selected image ID
+     */
+    selectedId?: string | null;
+    /**
+     * Callback when selecting a conversation
+     */
+    onSelect?: (imageId: string, agentId: string | null) => void;
+    /**
+     * Callback when creating new conversation
+     */
+    onNew?: (imageId: string) => void;
+    /**
+     * Callback when drawer should close
+     */
+    onClose?: () => void;
+    /**
+     * Show search
+     */
+    searchable?: boolean;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MobileAgentList Component
+ *
+ * A mobile-optimized conversation list for the drawer.
+ */
+export declare const MobileAgentList: React.FC<MobileAgentListProps>;

package/dist/components/mobile/MobileChat.d.ts

@@ -0,0 +1,47 @@
+import { AgentX } from 'agentxjs';
+/**
+ * MobileChat - Mobile chat interface
+ *
+ * A mobile-optimized chat component following Claude App's design:
+ * - Full-screen layout
+ * - Clean header with hamburger menu
+ * - Scrollable message area
+ * - Bottom input with rounded design
+ */
+import * as React from "react";
+export interface MobileChatProps {
+    /**
+     * AgentX instance
+     */
+    agentx: AgentX | null;
+    /**
+     * Image ID for the conversation
+     */
+    imageId?: string | null;
+    /**
+     * Agent name to display in header
+     */
+    agentName?: string;
+    /**
+     * Callback when menu button is clicked
+     */
+    onMenuClick?: () => void;
+    /**
+     * Callback when new conversation button is clicked
+     */
+    onNewConversation?: () => void;
+    /**
+     * Input placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MobileChat Component
+ *
+ * A full-screen mobile chat interface.
+ */
+export declare const MobileChat: React.FC<MobileChatProps>;

package/dist/components/mobile/MobileDrawer.d.ts

@@ -0,0 +1,32 @@
+/**
+ * MobileDrawer - Mobile drawer component using vaul
+ *
+ * A slide-out drawer for mobile navigation, following Claude App's minimalist design.
+ * Supports swipe gestures and provides smooth animations.
+ */
+import * as React from "react";
+export interface MobileDrawerProps {
+    /**
+     * Whether the drawer is open
+     */
+    open: boolean;
+    /**
+     * Callback when drawer open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Drawer content
+     */
+    children: React.ReactNode;
+    /**
+     * Additional class name for drawer content
+     */
+    className?: string;
+}
+/**
+ * MobileDrawer Component
+ *
+ * A left-side drawer for mobile navigation using vaul library.
+ * Provides gesture support and smooth animations.
+ */
+export declare const MobileDrawer: React.FC<MobileDrawerProps>;

package/dist/components/mobile/MobileHeader.d.ts

@@ -0,0 +1,41 @@
+/**
+ * MobileHeader - Mobile header component
+ *
+ * A minimalist header following Claude App's design:
+ * - Hamburger menu on left
+ * - Title in center
+ * - Optional action on right
+ */
+import * as React from "react";
+export interface MobileHeaderProps {
+    /**
+     * Header title
+     */
+    title?: string;
+    /**
+     * Callback when menu button is clicked
+     */
+    onMenuClick?: () => void;
+    /**
+     * Callback when action button is clicked
+     */
+    onActionClick?: () => void;
+    /**
+     * Custom action icon
+     */
+    actionIcon?: React.ReactNode;
+    /**
+     * Whether to show action button
+     */
+    showAction?: boolean;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MobileHeader Component
+ *
+ * A simple, minimalist header with hamburger menu and optional action.
+ */
+export declare const MobileHeader: React.FC<MobileHeaderProps>;

package/dist/components/mobile/MobileInputPane.d.ts

@@ -0,0 +1,41 @@
+/**
+ * MobileInputPane - Mobile input area
+ *
+ * A minimalist input area following Claude App's design:
+ * - Rounded corners
+ * - Clean appearance
+ * - Mobile keyboard handling
+ */
+import * as React from "react";
+export interface MobileInputPaneProps {
+    /**
+     * Callback when user sends a message
+     */
+    onSend?: (text: string) => void;
+    /**
+     * Callback when stop button is clicked
+     */
+    onStop?: () => void;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether currently loading
+     */
+    isLoading?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MobileInputPane Component
+ *
+ * A mobile-optimized input area with clean, minimal design.
+ */
+export declare const MobileInputPane: React.ForwardRefExoticComponent<MobileInputPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mobile/MobileMessagePane.d.ts

@@ -0,0 +1,33 @@
+/**
+ * MobileMessagePane - Mobile message display area
+ *
+ * A scrollable container for messages following Claude App's design:
+ * - Large whitespace
+ * - Hidden scrollbar
+ * - Clean empty state
+ */
+import * as React from "react";
+export interface MobileMessagePaneProps {
+    /**
+     * Message content (children)
+     */
+    children?: React.ReactNode;
+    /**
+     * Empty state configuration
+     */
+    emptyState?: {
+        icon?: React.ReactNode;
+        title: string;
+        description?: string;
+    };
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MobileMessagePane Component
+ *
+ * A mobile-optimized message container with auto-scroll and hidden scrollbar.
+ */
+export declare const MobileMessagePane: React.ForwardRefExoticComponent<MobileMessagePaneProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+export { MobileDrawer, type MobileDrawerProps } from './MobileDrawer';
+export { MobileHeader, type MobileHeaderProps } from './MobileHeader';
+export { MobileMessagePane, type MobileMessagePaneProps } from './MobileMessagePane';
+export { MobileInputPane, type MobileInputPaneProps } from './MobileInputPane';
+export { MobileChat, type MobileChatProps } from './MobileChat';
+export { MobileAgentList, type MobileAgentListProps } from './MobileAgentList';

package/dist/components/pane/MessagePane.d.ts

@@ -1,99 +1,45 @@
-import { ToolStatus } from '../container/ToolCard';
 /**
- * MessagePane - Message display area component
+ * MessagePane - Pure UI scrollable container for messages
  *
- * A pure UI component for displaying messages with:
- * - User and assistant message bubbles
- * - Streaming text indicator
- * - Auto-scroll to bottom
- * - Empty state
- * - Markdown rendering support
+ * A pure UI component that provides:
+ * - Scrollable container with auto-scroll
+ * - Empty state display
+ * - Flexible content (accepts any React children)
  *
- * This component knows nothing about business concepts.
- * It only deals with generic "messages" with role and content.
+ * This component knows NOTHING about:
+ * - Message types or structure
+ * - Business logic
+ * - Rendering logic for specific message types
+ *
+ * It's purely a layout/container component.
  *
  * @example
  * ```tsx
- * <MessagePane
- *   items={messages}
- *   streamingText="Currently typing..."
- *   renderContent={(content) => <Markdown>{content}</Markdown>}
- * />
+ * <MessagePane>
+ *   {messages.map(msg => (
+ *     msg.role === 'assistant' ? (
+ *       <AssistantMessage
+ *         key={msg.id}
+ *         message={msg}
+ *         status={msg.metadata?.status}
+ *         streamingText={streaming}
+ *       />
+ *     ) : (
+ *       <MessageRenderer key={msg.id} message={msg} />
+ *     )
+ *   ))}
+ * </MessagePane>
  * ```
  */
 import * as React from "react";
-/**
- * Tool metadata for ToolCard rendering
- */
-export interface ToolMetadata {
-    /** Tool name (e.g., "Bash", "Read") */
-    toolName: string;
-    /** Tool call ID */
-    toolId?: string;
-    /** Tool status */
-    status: ToolStatus;
-    /** Tool input parameters */
-    input?: Record<string, unknown>;
-    /** Tool output */
-    output?: unknown;
-    /** Whether output is an error */
-    isError?: boolean;
-    /** Execution duration in seconds */
-    duration?: number;
-}
-/**
- * Message item data
- */
-export interface MessagePaneItem {
-    /**
-     * Unique identifier
-     */
-    id: string;
-    /**
-     * Message role
-     */
-    role: "user" | "assistant" | "system" | "tool" | "error";
-    /**
-     * Message content (string for text, any for structured content)
-     */
-    content: string | unknown;
-    /**
-     * Timestamp
-     */
-    timestamp?: number;
-    /**
-     * Optional metadata (tool info for role="tool", errorCode for role="error")
-     */
-    metadata?: Record<string, unknown>;
-    /**
-     * Tool-specific metadata (for role="tool")
-     */
-    toolMetadata?: ToolMetadata;
-}
 export interface MessagePaneProps {
     /**
-     * Messages to display
-     */
-    items: MessagePaneItem[];
-    /**
-     * Current streaming text (displays with typing indicator)
+     * Content to display (messages, indicators, etc.)
      */
-    streamingText?: string;
-    /**
-     * Whether currently loading/thinking
-     */
-    isLoading?: boolean;
-    /**
-     * Custom content renderer
-     * @default Uses MarkdownText for strings
-     */
-    renderContent?: (content: unknown, item: MessagePaneItem) => React.ReactNode;
-    /**
-     * Custom avatar renderer
-     */
-    renderAvatar?: (role: MessagePaneItem["role"]) => React.ReactNode;
+    children?: React.ReactNode;
     /**
      * Empty state configuration
+     * Shows when children is empty
      */
     emptyState?: {
         icon?: React.ReactNode;
@@ -106,6 +52,8 @@ export interface MessagePaneProps {
     className?: string;
 }
 /**
- * MessagePane component
+ * MessagePane Component
+ *
+ * Pure UI container with auto-scroll functionality.
  */
 export declare const MessagePane: React.ForwardRefExoticComponent<MessagePaneProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -25,7 +25,7 @@ export type { NavBarProps, NavBarItem } from './NavBar';
 export { ListPane } from './ListPane';
 export type { ListPaneProps, ListPaneItem } from './ListPane';
 export { MessagePane } from './MessagePane';
-export type { MessagePaneProps, MessagePaneItem, ToolMetadata } from './MessagePane';
+export type { MessagePaneProps } from './MessagePane';
 export { InputPane } from './InputPane';
 export type { InputPaneProps } from './InputPane';
 export { InputToolBar } from './InputToolBar';

package/dist/components/studio/MobileStudio.d.ts

@@ -0,0 +1,31 @@
+import { AgentX } from 'agentxjs';
+export interface MobileStudioProps {
+    /**
+     * AgentX instance
+     */
+    agentx: AgentX | null;
+    /**
+     * Container ID for user isolation
+     * @default "default"
+     */
+    containerId?: string;
+    /**
+     * Enable search in drawer
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MobileStudio Component
+ *
+ * A full-screen mobile chat workspace with drawer navigation.
+ */
+export declare function MobileStudio({ agentx, containerId, searchable, placeholder, className, }: MobileStudioProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/studio/ResponsiveStudio.d.ts

@@ -0,0 +1,46 @@
+import { AgentX } from 'agentxjs';
+export interface ResponsiveStudioProps {
+    /**
+     * AgentX instance
+     */
+    agentx: AgentX | null;
+    /**
+     * Container ID for user isolation
+     * @default "default"
+     */
+    containerId?: string;
+    /**
+     * Breakpoint for mobile/desktop switch
+     * @default 768
+     */
+    breakpoint?: number;
+    /**
+     * Desktop: Width of the sidebar
+     * @default 280
+     */
+    sidebarWidth?: number;
+    /**
+     * Desktop: Enable search in AgentList
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Desktop: Input height ratio
+     * @default 0.25
+     */
+    inputHeightRatio?: number;
+    /**
+     * Mobile: Input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ResponsiveStudio Component
+ *
+ * Automatically renders Studio or MobileStudio based on viewport width.
+ */
+export declare function ResponsiveStudio({ agentx, containerId, breakpoint, sidebarWidth, searchable, inputHeightRatio, placeholder, className, }: ResponsiveStudioProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,3 +14,7 @@
  */
 export { Studio } from './Studio';
 export type { StudioProps } from './Studio';
+export { MobileStudio } from './MobileStudio';
+export type { MobileStudioProps } from './MobileStudio';
+export { ResponsiveStudio } from './ResponsiveStudio';
+export type { ResponsiveStudioProps } from './ResponsiveStudio';