@agentxjs/ui 0.0.9 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentxjs/ui",
-  "version": "0.0.9",
+  "version": "0.1.2",
   "description": "AgentX UI Components - React component library for building AI agent interfaces",
   "license": "MIT",
   "repository": {
@@ -29,6 +29,8 @@
     "README.md"
   ],
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "allotment": "^1.20.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -41,8 +43,7 @@
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.5.5",
     "zustand": "^5.0.2",
-    "agentxjs": "0.0.9",
-    "@agentxjs/types": "0.0.9"
+    "agentxjs": "0.1.2"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^8.4.7",
@@ -69,8 +70,8 @@
     "vite": "^6.0.5",
     "vite-plugin-dts": "^4.3.0",
     "ws": "^8.18.0",
-    "@agentxjs/common": "0.0.9",
-    "@agentxjs/node-runtime": "0.0.9"
+    "@agentxjs/common": "0.1.0",
+    "@agentxjs/runtime": "0.1.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",

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

@@ -1,56 +0,0 @@
-import { AgentError, AgentState, Message } from '@agentxjs/types';
-import { AgentDefinitionItem, SessionItem } from './types';
-export interface AgentPaneProps {
-    /**
-     * Current agent definition (for display)
-     */
-    definition: AgentDefinitionItem | null;
-    /**
-     * Current session (for display)
-     */
-    session: SessionItem | null;
-    /**
-     * Current agent ID (for display)
-     */
-    agentId?: string | null;
-    /**
-     * Messages to display
-     */
-    messages?: Message[];
-    /**
-     * Streaming message content
-     */
-    streaming?: string;
-    /**
-     * Error messages
-     */
-    errors?: AgentError[];
-    /**
-     * Agent status
-     */
-    status?: AgentState;
-    /**
-     * Loading state
-     */
-    isLoading?: boolean;
-    /**
-     * Callback to abort current request
-     */
-    onAbort?: () => void;
-    /**
-     * Callback to create a new session
-     */
-    onCreateSession?: () => void;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-/**
- * AgentPane - Agent message display area (pure presentation)
- *
- * States:
- * 1. isLoading + no messages → Connecting/Loading
- * 2. Ready → Show MessagePane (may be empty)
- */
-export declare function AgentPane({ definition, session, agentId, messages, streaming, errors, status, isLoading, onAbort, className, }: AgentPaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,119 +0,0 @@
-import { ReactNode } from 'react';
-import { Message, AgentError } from '@agentxjs/types';
-import { AgentDefinitionItem } from './types';
-import { SessionItem } from '../../hooks/useSession';
-/**
- * Props for ContainerView component
- *
- * All data is passed in, no internal state management.
- */
-export interface ContainerViewProps {
-    /**
-     * Available agent definitions
-     */
-    definitions: AgentDefinitionItem[];
-    /**
-     * User's sessions
-     */
-    sessions: SessionItem[];
-    /**
-     * Currently selected definition
-     */
-    currentDefinition: AgentDefinitionItem | null;
-    /**
-     * Currently selected session
-     */
-    currentSession: SessionItem | null;
-    /**
-     * Messages in current conversation
-     */
-    messages: Message[];
-    /**
-     * Current streaming text (assistant response in progress)
-     */
-    streaming?: string;
-    /**
-     * Errors from agent
-     */
-    errors?: AgentError[];
-    /**
-     * Whether agent is processing
-     */
-    isLoading: boolean;
-    /**
-     * Called when user selects a definition
-     */
-    onSelectDefinition: (definition: AgentDefinitionItem) => void;
-    /**
-     * Called when user selects a session
-     */
-    onSelectSession: (session: SessionItem) => void;
-    /**
-     * Called when user wants to create a new session
-     */
-    onCreateSession: () => void;
-    /**
-     * Called when user sends a message
-     */
-    onSend: (text: string) => void;
-    /**
-     * Called when user wants to abort current response
-     */
-    onAbort?: () => void;
-    /**
-     * Called when user wants to add a definition
-     */
-    onAddDefinition?: () => void;
-    /**
-     * Called when user wants to delete a session
-     */
-    onDeleteSession?: (sessionId: string) => void;
-    /**
-     * Custom render for the entire layout
-     * If provided, takes full control of rendering
-     */
-    children?: (props: ContainerViewRenderProps) => ReactNode;
-    /**
-     * Custom className for container
-     */
-    className?: string;
-}
-/**
- * Props passed to custom render function
- */
-export interface ContainerViewRenderProps {
-    definitions: AgentDefinitionItem[];
-    sessions: SessionItem[];
-    currentDefinition: AgentDefinitionItem | null;
-    currentSession: SessionItem | null;
-    messages: Message[];
-    streaming?: string;
-    errors?: AgentError[];
-    isLoading: boolean;
-    onSelectDefinition: (definition: AgentDefinitionItem) => void;
-    onSelectSession: (session: SessionItem) => void;
-    onCreateSession: () => void;
-    onSend: (text: string) => void;
-    onAbort?: () => void;
-    onAddDefinition?: () => void;
-    onDeleteSession?: (sessionId: string) => void;
-}
-/**
- * ContainerView - Pure UI layout component
- *
- * Default layout (3-column):
- * ```
- * ┌──────────┬────────────┬──────────────────────────┐
- * │          │            │                          │
- * │ Def.Pane │ Sess.Pane  │      AgentPane           │
- * │  (60px)  │  (240px)   │                          │
- * │          │            ├──────────────────────────┤
- * │          │            │      InputPane           │
- * └──────────┴────────────┴──────────────────────────┘
- * ```
- *
- * When `children` is provided, it acts as a render props container.
- */
-export declare function ContainerView({ definitions, sessions, currentDefinition, currentSession, messages, streaming, errors, isLoading, onSelectDefinition, onSelectSession, onCreateSession, onSend, onAbort, onAddDefinition, onDeleteSession, children, className, }: ContainerViewProps): import("react/jsx-runtime").JSX.Element;
-export type { AgentDefinitionItem } from './types';
-export type { SessionItem } from '../../hooks/useSession';

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

@@ -1,27 +0,0 @@
-import { AgentDefinitionItem } from './types';
-export interface DefinitionPaneProps {
-    /**
-     * Available agent definitions
-     */
-    definitions: AgentDefinitionItem[];
-    /**
-     * Currently selected definition
-     */
-    current: AgentDefinitionItem | null;
-    /**
-     * Callback when an agent is selected
-     */
-    onSelect: (definition: AgentDefinitionItem) => void;
-    /**
-     * Callback when settings button is clicked
-     */
-    onSettings?: () => void;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-/**
- * DefinitionPane - Agent selection for ActivityBar
- */
-export declare function DefinitionPane({ definitions, current, onSelect, onSettings, className, }: DefinitionPaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,44 +0,0 @@
-/**
- * InputPane - Business container for user input
- *
- * Expanded input area with toolbar and full-width input box.
- * Designed to be used inside a resizable Panel.
- *
- * @example
- * ```tsx
- * <Allotment.Pane minSize={120} maxSize={600}>
- *   <InputPane
- *     onSend={send}
- *     onFileAttach={handleFiles}
- *     disabled={isLoading}
- *   />
- * </Allotment.Pane>
- * ```
- */
-export interface InputPaneProps {
-    /**
-     * Callback when user sends a message
-     */
-    onSend: (text: string) => void;
-    /**
-     * Whether input is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Callback when user uploads files via toolbar
-     */
-    onFileAttach?: (files: File[]) => void;
-    /**
-     * Show toolbar
-     */
-    showToolbar?: boolean;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export declare function InputPane({ onSend, disabled, placeholder, onFileAttach, showToolbar, className, }: InputPaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +0,0 @@
-/**
- * InputToolBar - Toolbar for input area with file upload and other tools
- *
- * Provides utility buttons for the input pane:
- * - File upload (read files)
- * - Future: Model selector, settings, etc.
- */
-export interface InputToolBarProps {
-    /**
-     * Callback when user uploads files
-     */
-    onFileAttach?: (files: File[]) => void;
-    /**
-     * Whether the toolbar is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export declare function InputToolBar({ onFileAttach, disabled, className, }: InputToolBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,32 +0,0 @@
-import { Message, AgentError, AgentState } from '@agentxjs/types';
-export interface MessagePaneProps {
-    /**
-     * Messages to display
-     */
-    messages: Message[];
-    /**
-     * Current streaming text
-     */
-    streaming?: string;
-    /**
-     * Errors to display
-     */
-    errors?: AgentError[];
-    /**
-     * Current agent state
-     */
-    status?: AgentState;
-    /**
-     * Whether agent is loading
-     */
-    isLoading?: boolean;
-    /**
-     * Callback to abort current operation
-     */
-    onAbort?: () => void;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export declare function MessagePane({ messages, streaming, errors, status, isLoading, onAbort, className, }: MessagePaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,35 +0,0 @@
-import { SessionItem } from './types';
-export interface SessionPaneProps {
-    /**
-     * Sessions to display
-     */
-    sessions: SessionItem[];
-    /**
-     * Currently selected session
-     */
-    current: SessionItem | null;
-    /**
-     * Agent name for header display
-     */
-    agentName?: string;
-    /**
-     * Callback when a session is selected
-     */
-    onSelect: (session: SessionItem) => void;
-    /**
-     * Callback when create button is clicked
-     */
-    onCreate?: () => void;
-    /**
-     * Callback when delete is requested
-     */
-    onDelete?: (sessionId: string) => void;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-/**
- * SessionPane - Session list for Sidebar
- */
-export declare function SessionPane({ sessions, current, agentName: _agentName, onSelect, onCreate, onDelete, className, }: SessionPaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,67 +0,0 @@
-import { AgentDefinition } from '@agentxjs/types';
-/**
- * Session item for UI display (pure data, no methods)
- *
- * Core fields come from Session interface (Docker-style architecture).
- * Additional fields (preview, unreadCount) are computed/derived by UI.
- *
- * Part of Docker-style layered architecture:
- * Definition → build → Image → run → Agent
- *                        ↓
- *                    Session (userId + imageId)
- */
-export interface SessionItem {
-    /**
-     * Unique session identifier
-     */
-    sessionId: string;
-    /**
-     * Owner user ID
-     */
-    userId: string;
-    /**
-     * Associated image ID (frozen runtime snapshot)
-     */
-    imageId: string;
-    /**
-     * Display title (can be AI-generated summary)
-     */
-    title: string | null;
-    /**
-     * Session creation timestamp (Unix ms)
-     */
-    createdAt: number;
-    /**
-     * Last update timestamp (Unix ms)
-     */
-    updatedAt: number;
-    /**
-     * Preview text (last message snippet) - computed from messages
-     */
-    preview?: string;
-    /**
-     * Unread message count - computed by UI
-     */
-    unreadCount?: number;
-}
-/**
- * Extended AgentDefinition with UI metadata
- */
-export interface AgentDefinitionItem extends AgentDefinition {
-    /**
-     * Icon identifier or emoji
-     */
-    icon?: string;
-    /**
-     * Badge color for visual distinction
-     */
-    color?: string;
-    /**
-     * Whether this agent is online/available
-     */
-    isOnline?: boolean;
-    /**
-     * Number of active sessions
-     */
-    activeSessionCount?: number;
-}

package/dist/components/input/InputBox.d.ts

@@ -1,43 +0,0 @@
-/**
- * InputBox - Full-height textarea with send button
- *
- * Pure UI component for text input that fills available space.
- *
- * Features:
- * - Full-height textarea (fills container)
- * - Enter to send, Shift+Enter for new line
- * - Send button at bottom right
- * - Minimal design, no borders or decorations
- *
- * @example
- * ```tsx
- * <InputBox
- *   onSend={(text) => console.log('Send:', text)}
- *   disabled={isLoading}
- *   placeholder="Type a message..."
- * />
- * ```
- */
-export interface InputBoxProps {
-    /**
-     * Callback when user sends a message
-     */
-    onSend: (text: string) => void;
-    /**
-     * Whether the input is disabled (e.g., while AI is responding)
-     */
-    disabled?: boolean;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Initial value
-     */
-    defaultValue?: string;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-export declare function InputBox({ onSend, disabled, placeholder, defaultValue, className, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +0,0 @@
-export { InputBox, type InputBoxProps } from './InputBox';

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

@@ -1,28 +0,0 @@
-import { AgentState } from '@agentxjs/types';
-export interface StatusIndicatorProps {
-    /**
-     * Current agent state
-     */
-    status: AgentState;
-    /**
-     * Whether the agent is currently processing
-     */
-    isLoading: boolean;
-    /**
-     * Callback to abort/interrupt the current operation
-     */
-    onAbort?: () => void;
-    /**
-     * Whether to show the abort button
-     * @default true
-     */
-    showAbortButton?: boolean;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-/**
- * StatusIndicator - Displays status with animations
- */
-export declare function StatusIndicator({ status, isLoading, onAbort, showAbortButton, className, }: StatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/message/items/SystemMessage.d.ts

@@ -1,25 +0,0 @@
-import { SystemMessage as SystemMessageType } from '@agentxjs/types';
-export interface SystemMessageProps {
-    /**
-     * System message data
-     */
-    message: SystemMessageType;
-}
-/**
- * SystemMessage - Display a system message
- *
- * Features:
- * - System avatar (neutral gray)
- * - System prompt or notification display
- *
- * @example
- * ```tsx
- * <SystemMessage message={{
- *   id: '0',
- *   role: 'system',
- *   content: 'You are a helpful assistant',
- *   timestamp: Date.now()
- * }} />
- * ```
- */
-export declare function SystemMessage({ message }: SystemMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useSession.d.ts

@@ -1,79 +0,0 @@
-import { AgentX } from '@agentxjs/types';
-import { SessionItem } from '../components/container/types';
-export type { SessionItem } from '../components/container/types';
-/**
- * Return type of useSession hook
- */
-export interface UseSessionResult {
-    /**
-     * All sessions for the current user
-     */
-    sessions: SessionItem[];
-    /**
-     * Currently selected session
-     */
-    currentSession: SessionItem | null;
-    /**
-     * Select a session
-     */
-    selectSession: (session: SessionItem | null) => void;
-    /**
-     * Create a new session (does NOT auto-select)
-     *
-     * After creating, caller should explicitly handle agent creation
-     * and then call selectSession() when ready.
-     *
-     * @param imageId - Image to create session from
-     * @param title - Optional session title
-     */
-    createSession: (imageId: string, title?: string) => Promise<SessionItem>;
-    /**
-     * Delete a session
-     */
-    deleteSession: (sessionId: string) => Promise<void>;
-    /**
-     * Update session title
-     */
-    setSessionTitle: (sessionId: string, title: string) => Promise<void>;
-    /**
-     * Refresh sessions from server
-     */
-    refresh: () => Promise<void>;
-    /**
-     * Loading state
-     */
-    isLoading: boolean;
-    /**
-     * Error state
-     */
-    error: Error | null;
-}
-/**
- * Options for useSession hook
- */
-export interface UseSessionOptions {
-    /**
-     * Auto-load sessions on mount
-     * @default true
-     */
-    autoLoad?: boolean;
-    /**
-     * Callback when session selection changes
-     */
-    onSessionChange?: (session: SessionItem | null) => void;
-    /**
-     * Callback when sessions list changes
-     */
-    onSessionsChange?: (sessions: SessionItem[]) => void;
-}
-/**
- * React hook for session management
- *
- * Maps to agentx.sessions API.
- *
- * @param agentx - AgentX instance
- * @param userId - Current user ID
- * @param options - Optional configuration
- * @returns Session state and operations
- */
-export declare function useSession(agentx: AgentX | null, userId: string, options?: UseSessionOptions): UseSessionResult;