@agentxjs/ui 0.0.9 → 0.1.2

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

@@ -0,0 +1,74 @@
+/**
+ * InputToolBar - Toolbar buttons for input area
+ *
+ * A pure UI component for displaying toolbar buttons above or below
+ * an input area. Supports icon buttons, toggles, and dropdowns.
+ *
+ * @example
+ * ```tsx
+ * <InputToolBar
+ *   items={[
+ *     { id: 'attach', icon: <Paperclip />, label: 'Attach file' },
+ *     { id: 'emoji', icon: <Smile />, label: 'Add emoji' },
+ *   ]}
+ *   onItemClick={(id) => handleAction(id)}
+ * />
+ * ```
+ */
+import * as React from "react";
+/**
+ * Toolbar item data
+ */
+export interface ToolBarItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Icon element
+     */
+    icon: React.ReactNode;
+    /**
+     * Tooltip label
+     */
+    label: string;
+    /**
+     * Whether the item is currently active/toggled
+     */
+    active?: boolean;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Visual variant
+     */
+    variant?: "default" | "primary" | "danger";
+}
+export interface InputToolBarProps {
+    /**
+     * Toolbar items to display
+     */
+    items: ToolBarItem[];
+    /**
+     * Items to display on the right side
+     */
+    rightItems?: ToolBarItem[];
+    /**
+     * Callback when an item is clicked
+     */
+    onItemClick?: (id: string) => void;
+    /**
+     * Size of the toolbar buttons
+     * @default 'sm'
+     */
+    size?: "xs" | "sm" | "md";
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * InputToolBar component
+ */
+export declare const InputToolBar: React.ForwardRefExoticComponent<InputToolBarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,128 @@
+/**
+ * ListPane - Generic list panel component
+ *
+ * A pure UI component for displaying lists with:
+ * - Header with title and action button
+ * - Optional search input
+ * - Scrollable list of items
+ * - Empty state handling
+ * - Loading state
+ *
+ * This component knows nothing about business concepts like
+ * "Agent", "Image", "Session", etc. It only deals with generic
+ * "items" that have id, title, subtitle, etc.
+ *
+ * @example
+ * ```tsx
+ * <ListPane
+ *   title="Conversations"
+ *   items={items}
+ *   selectedId={selectedId}
+ *   onSelect={(id) => setSelectedId(id)}
+ *   onDelete={(id) => handleDelete(id)}
+ *   onNew={() => handleNew()}
+ *   searchable
+ * />
+ * ```
+ */
+import * as React from "react";
+/**
+ * Item data for ListPane
+ */
+export interface ListPaneItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Main title
+     */
+    title: string;
+    /**
+     * Optional subtitle or description
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Optional leading content (icon, avatar, etc.)
+     */
+    leading?: React.ReactNode;
+    /**
+     * Optional trailing content (badge, status, etc.)
+     */
+    trailing?: React.ReactNode;
+    /**
+     * Whether this item is currently active
+     */
+    active?: boolean;
+    /**
+     * Timestamp for display
+     */
+    timestamp?: number;
+}
+export interface ListPaneProps {
+    /**
+     * Panel title displayed in header
+     */
+    title?: string;
+    /**
+     * List of items to display
+     */
+    items: ListPaneItem[];
+    /**
+     * Currently selected item ID
+     */
+    selectedId?: string | null;
+    /**
+     * Whether the list is loading
+     */
+    isLoading?: boolean;
+    /**
+     * Enable search functionality
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder for search input
+     */
+    searchPlaceholder?: string;
+    /**
+     * Show new item button in header
+     */
+    showNewButton?: boolean;
+    /**
+     * Label for new button (tooltip)
+     */
+    newButtonLabel?: string;
+    /**
+     * Empty state configuration
+     */
+    emptyState?: {
+        icon?: React.ReactNode;
+        title: string;
+        description?: string;
+        actionLabel?: string;
+    };
+    /**
+     * Callback when an item is selected
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * Callback when delete is clicked on an item
+     */
+    onDelete?: (id: string) => void;
+    /**
+     * Callback when new button is clicked
+     */
+    onNew?: () => void;
+    /**
+     * Custom render function for item actions
+     */
+    renderItemActions?: (item: ListPaneItem) => React.ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ListPane component
+ */
+export declare const ListPane: React.ForwardRefExoticComponent<ListPaneProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,111 @@
+import { ToolStatus } from '../container/ToolCard';
+/**
+ * MessagePane - Message display area component
+ *
+ * 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
+ *
+ * This component knows nothing about business concepts.
+ * It only deals with generic "messages" with role and content.
+ *
+ * @example
+ * ```tsx
+ * <MessagePane
+ *   items={messages}
+ *   streamingText="Currently typing..."
+ *   renderContent={(content) => <Markdown>{content}</Markdown>}
+ * />
+ * ```
+ */
+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)
+     */
+    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;
+    /**
+     * Empty state configuration
+     */
+    emptyState?: {
+        icon?: React.ReactNode;
+        title: string;
+        description?: string;
+    };
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * MessagePane component
+ */
+export declare const MessagePane: React.ForwardRefExoticComponent<MessagePaneProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,71 @@
+/**
+ * NavBar - Icon navigation bar component
+ *
+ * A simplified wrapper around ActivityBar for common navigation patterns.
+ * Pure UI component with no business logic.
+ *
+ * @example
+ * ```tsx
+ * <NavBar
+ *   items={[
+ *     { id: 'chat', icon: <MessageSquare />, label: 'Chat' },
+ *     { id: 'settings', icon: <Settings />, label: 'Settings' },
+ *   ]}
+ *   activeId="chat"
+ *   onSelect={(id) => setActiveId(id)}
+ * />
+ * ```
+ */
+import * as React from "react";
+/**
+ * Item data for NavBar
+ */
+export interface NavBarItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Icon element
+     */
+    icon: React.ReactNode;
+    /**
+     * Tooltip label
+     */
+    label: string;
+    /**
+     * Optional badge (notification count, etc.)
+     */
+    badge?: string | number;
+}
+export interface NavBarProps {
+    /**
+     * Main navigation items (top section)
+     */
+    items: NavBarItem[];
+    /**
+     * Bottom navigation items (settings, account, etc.)
+     */
+    bottomItems?: NavBarItem[];
+    /**
+     * Currently active item ID
+     */
+    activeId?: string;
+    /**
+     * Callback when an item is selected
+     */
+    onSelect?: (id: string) => void;
+    /**
+     * Position of the nav bar
+     * @default 'left'
+     */
+    position?: "left" | "right";
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * NavBar component
+ */
+export declare const NavBar: React.ForwardRefExoticComponent<NavBarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,32 @@
+/**
+ * Pane Components - Pure UI Layer
+ *
+ * Pure presentation components with NO business logic. They:
+ * - Accept data via props
+ * - Emit user actions via callbacks
+ * - Use layout and element components internally
+ * - Know nothing about AgentX, Image, Agent, etc.
+ *
+ * Architecture:
+ * ```
+ * layout/ → element/ → pane/ → container/ → studio/
+ *                      (HERE)
+ * ```
+ *
+ * Components:
+ * - NavBar: Icon navigation bar (wraps ActivityBar)
+ * - ListPane: Generic list panel with search and actions
+ * - MessagePane: Message display area
+ * - InputPane: Input area with toolbar
+ * - InputToolBar: Toolbar buttons for input
+ */
+export { NavBar } from './NavBar';
+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 { InputPane } from './InputPane';
+export type { InputPaneProps } from './InputPane';
+export { InputToolBar } from './InputToolBar';
+export type { InputToolBarProps, ToolBarItem } from './InputToolBar';

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

@@ -1,47 +1,42 @@
-import { AgentX } from '@agentxjs/types';
-import { SessionItem } from '../../hooks/useSession';
-import { AgentDefinitionItem } from '../container/types';
-/**
- * Props for Studio component
- */
+import { AgentX } from 'agentxjs';
 export interface StudioProps {
     /**
-     * AgentX instance for backend communication
+     * AgentX instance
      */
-    agentx: AgentX;
+    agentx: AgentX | null;
     /**
-     * Current user ID
+     * Container ID for user isolation
+     * Each user should have their own container to isolate their conversations
+     * @default "default"
      */
-    userId: string;
+    containerId?: string;
     /**
-     * User's dedicated Container ID
-     * All agent operations will use this container
+     * Width of the sidebar (AgentList)
+     * @default 280
      */
-    containerId: string;
+    sidebarWidth?: number;
     /**
-     * Available agent definitions
+     * Enable search in AgentList
+     * @default true
      */
-    definitions: AgentDefinitionItem[];
+    searchable?: boolean;
     /**
-     * Optional callback when session changes
+     * Show save button in Chat (not needed in Image-First model)
+     * @default false
      */
-    onSessionChange?: (session: SessionItem | null) => void;
+    showSaveButton?: boolean;
     /**
-     * Optional callback when definition changes
+     * Input height ratio for Chat
+     * @default 0.25
      */
-    onDefinitionChange?: (definition: AgentDefinitionItem | null) => void;
+    inputHeightRatio?: number;
     /**
-     * Optional custom className
+     * Additional class name
      */
     className?: string;
 }
 /**
- * Studio - Integration layer component
- *
- * Integrates:
- * - useSession for session management (maps to agentx.sessions)
- * - useAgent for agent state (maps to agentx.agents)
- * - ContainerView layout components
+ * Studio component
  */
-export declare function Studio({ agentx, userId, containerId, definitions, onSessionChange, onDefinitionChange, className, }: StudioProps): import("react/jsx-runtime").JSX.Element;
-export default Studio;
+export declare function Studio({ agentx, containerId, sidebarWidth, searchable, showSaveButton, // Default to false in Image-First model
+inputHeightRatio, className, }: StudioProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,16 @@
 /**
- * Studio - Integration layer for multi-agent chat UI
+ * Studio Components - Top-level Workspace
  *
- * Studio is the frontend-specific concept that integrates:
- * - useSession (maps to agentx.sessions)
- * - useAgent (maps to agentx.agents)
- * - ContainerView (pure UI layout)
+ * Orchestration layer that:
+ * - Manages AgentX connection
+ * - Coordinates between containers
+ * - Handles global state (current agent, current image)
+ * - Provides ready-to-use interface
+ *
+ * Architecture:
+ * ```
+ * container/ (AgentList + Chat) = studio/ (complete workspace)
+ * ```
  */
-export { Studio, type StudioProps } from './Studio';
+export { Studio } from './Studio';
+export type { StudioProps } from './Studio';