@agentxjs/ui 0.0.9 → 0.1.2

package/dist/api/index.d.ts

@@ -1,8 +1,7 @@
 export * from '../hooks';
-export * from '../components/container';
 export * from '../components/studio';
-export * from '../components/message';
-export * from '../components/input';
+export * from '../components/container';
+export * from '../components/pane';
 export * from '../components/layout';
 export * from '../components/element';
 export * from '../components/typography';

package/dist/browser-Bab_T5G7.js

@@ -0,0 +1,39 @@
+function _mergeNamespaces(n, m) {
+  for (var i = 0; i < m.length; i++) {
+    const e = m[i];
+    if (typeof e !== "string" && !Array.isArray(e)) {
+      for (const k in e) {
+        if (k !== "default" && !(k in n)) {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          if (d) {
+            Object.defineProperty(n, k, d.get ? d : {
+              enumerable: true,
+              get: () => e[k]
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
+}
+var browser$1;
+var hasRequiredBrowser;
+function requireBrowser() {
+  if (hasRequiredBrowser) return browser$1;
+  hasRequiredBrowser = 1;
+  browser$1 = function() {
+    throw new Error(
+      "ws does not work in the browser. Browser clients must use the native WebSocket object"
+    );
+  };
+  return browser$1;
+}
+var browserExports = requireBrowser();
+const browser = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null
+}, [browserExports]);
+export {
+  browser as b
+};
+//# sourceMappingURL=browser-Bab_T5G7.js.map

package/dist/browser-Bab_T5G7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-Bab_T5G7.js","sources":["../../../node_modules/.pnpm/ws@8.18.3/node_modules/ws/browser.js"],"sourcesContent":["'use strict';\n\nmodule.exports = function () {\n  throw new Error(\n    'ws does not work in the browser. Browser clients must use the native ' +\n      'WebSocket object'\n  );\n};\n"],"names":["browser"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAEAA,cAAiB,WAAY;AAC3B,UAAM,IAAI;AAAA,MACR;AAAA;EAGJ;;;;;;;","x_google_ignoreList":[0]}

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

@@ -0,0 +1,45 @@
+import { AgentX } from 'agentxjs';
+export interface AgentListProps {
+    /**
+     * AgentX instance
+     */
+    agentx: AgentX | null;
+    /**
+     * Container ID for creating new images
+     * @default "default"
+     */
+    containerId?: string;
+    /**
+     * Currently selected image ID
+     */
+    selectedId?: string | null;
+    /**
+     * Callback when a conversation is selected
+     * @param imageId - The selected image ID
+     * @param agentId - The agent ID (if online)
+     */
+    onSelect?: (imageId: string, agentId: string | null) => void;
+    /**
+     * Callback when a new conversation is created
+     * @param imageId - The new image ID
+     */
+    onNew?: (imageId: string) => void;
+    /**
+     * Title displayed in header
+     * @default "Conversations"
+     */
+    title?: string;
+    /**
+     * Enable search functionality
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * AgentList component
+ */
+export declare function AgentList({ agentx, containerId, selectedId, onSelect, onNew, title, searchable, className, }: AgentListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { AgentX } from 'agentxjs';
+export interface ChatProps {
+    /**
+     * AgentX instance
+     */
+    agentx: AgentX | null;
+    /**
+     * Image ID for the conversation (preferred in Image-First model)
+     */
+    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
+     */
+    showSaveButton?: boolean;
+    /**
+     * Input placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Height ratio for input pane (0-1)
+     * @default 0.25
+     */
+    inputHeightRatio?: number;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Chat component
+ */
+export declare function Chat({ agentx, imageId, agentId: legacyAgentId, agentName, onSave, showSaveButton, placeholder, inputHeightRatio, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+/**
+ * ChatHeader - Header component for Chat interface
+ *
+ * Displays current agent information, status, and actions.
+ *
+ * @example
+ * ```tsx
+ * <ChatHeader
+ *   agentName="Assistant"
+ *   status="thinking"
+ *   messageCount={5}
+ * />
+ * ```
+ */
+import * as React from "react";
+export interface ChatHeaderProps {
+    /**
+     * Agent name to display
+     */
+    agentName?: string;
+    /**
+     * Current agent status
+     */
+    status?: "idle" | "queued" | "thinking" | "responding" | "tool_executing" | "error";
+    /**
+     * Number of messages in conversation
+     */
+    messageCount?: number;
+    /**
+     * Additional actions on the right side
+     */
+    actions?: React.ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ChatHeader component
+ */
+export declare function ChatHeader({ agentName, status, messageCount, actions, className, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+/**
+ * ToolCard - Collapsible tool call/result card
+ *
+ * Displays tool execution with status indicators:
+ * - Executing: blue with spinner
+ * - Success: green with checkmark
+ * - Error: red with X
+ *
+ * Features:
+ * - Collapsible content
+ * - Status-based styling
+ * - Duration display
+ * - Input/Output sections
+ *
+ * @example
+ * ```tsx
+ * <ToolCard
+ *   name="Bash"
+ *   status="success"
+ *   input={{ command: "ls -la" }}
+ *   output="file1.txt\nfile2.txt"
+ *   duration={1.23}
+ * />
+ * ```
+ */
+export type ToolStatus = "executing" | "success" | "error";
+export interface ToolCardProps {
+    /**
+     * Tool name
+     */
+    name: string;
+    /**
+     * Tool call ID
+     */
+    id?: string;
+    /**
+     * Current status
+     */
+    status: ToolStatus;
+    /**
+     * Tool input parameters
+     */
+    input?: Record<string, unknown>;
+    /**
+     * Tool output (string or object)
+     */
+    output?: unknown;
+    /**
+     * Execution duration in seconds
+     */
+    duration?: number;
+    /**
+     * Whether output is an error
+     */
+    isError?: boolean;
+    /**
+     * Default expanded state
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ToolCard component
+ */
+export declare function ToolCard({ name, id, status, input, output, duration, isError, defaultExpanded, className, }: ToolCardProps): import("react/jsx-runtime").JSX.Element;
+export default ToolCard;

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

@@ -1,22 +1,27 @@
 /**
- * Container Components - Pure UI Panes
+ * Container Components - Business Logic Layer
  *
- * Part of UI-Backend API Consistency design (see index.ts ADR #5):
- * - These are pure UI components (presentational)
- * - For integration, use Studio from ~/components/studio
+ * Integration layer that combines Pane (UI) with Hooks (logic).
+ * These components:
+ * - Use AgentX hooks (useImages, useAgent)
+ * - Map hook data to pane props
+ * - Handle events and callbacks
+ * - Manage business state
+ *
+ * Architecture:
+ * ```
+ * pane/ (pure UI) + hooks/ (logic) = container/ (business components)
+ * ```
+ *
+ * Components:
+ * - AgentList: Conversation list with CRUD operations
+ * - Chat: Chat interface with messages and input
  */
-export { ContainerView } from './ContainerView';
-export type { ContainerViewProps, ContainerViewRenderProps } from './ContainerView';
-export { DefinitionPane } from './DefinitionPane';
-export type { DefinitionPaneProps } from './DefinitionPane';
-export { SessionPane } from './SessionPane';
-export type { SessionPaneProps } from './SessionPane';
-export { AgentPane } from './AgentPane';
-export type { AgentPaneProps } from './AgentPane';
-export { MessagePane } from './MessagePane';
-export type { MessagePaneProps } from './MessagePane';
-export { InputPane } from './InputPane';
-export type { InputPaneProps } from './InputPane';
-export { InputToolBar } from './InputToolBar';
-export type { InputToolBarProps } from './InputToolBar';
-export type { SessionItem, AgentDefinitionItem } from './types';
+export { AgentList } from './AgentList';
+export type { AgentListProps } from './AgentList';
+export { Chat } from './Chat';
+export type { ChatProps } from './Chat';
+export { ChatHeader } from './ChatHeader';
+export type { ChatHeaderProps } from './ChatHeader';
+export { ToolCard } from './ToolCard';
+export type { ToolCardProps, ToolStatus } from './ToolCard';

package/dist/components/{message → container/message}/MessageList.d.ts

@@ -1,4 +1,4 @@
-import { Message } from '@agentxjs/types';
+import { Message } from 'agentxjs';
 export interface MessageListProps {
     /**
      * Array of messages to display

package/dist/components/{message → container/message}/index.d.ts

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

package/dist/components/{message → container/message}/items/AssistantMessage.d.ts

@@ -1,4 +1,4 @@
-import { AssistantMessage as AssistantMessageType } from '@agentxjs/types';
+import { AssistantMessage as AssistantMessageType } from 'agentxjs';
 export interface AssistantMessageProps {
     /**
      * Assistant message data

package/dist/components/{message → container/message}/items/ErrorAlert.d.ts

@@ -1,4 +1,4 @@
-import { AgentError } from '@agentxjs/types';
+import { AgentError } from 'agentxjs';
 export interface ErrorAlertProps {
     /**
      * The AgentError to display

package/dist/components/{message → container/message}/items/ToolCallMessage.d.ts

@@ -1,4 +1,4 @@
-import { ToolCallMessage as ToolCallMessageType } from '@agentxjs/types';
+import { ToolCallMessage as ToolCallMessageType } from 'agentxjs';
 export interface ToolCallMessageProps {
     /**
      * Tool call message data

package/dist/components/{message → container/message}/items/ToolResultMessage.d.ts

@@ -1,4 +1,4 @@
-import { ToolResultMessage as ToolResultMessageType } from '@agentxjs/types';
+import { ToolResultMessage as ToolResultMessageType } from 'agentxjs';
 export interface ToolResultMessageProps {
     /**
      * Tool result message data

package/dist/components/{message → container/message}/items/ToolUseMessage.d.ts

@@ -1,4 +1,4 @@
-import { ToolCallMessage, ToolResultMessage } from '@agentxjs/types';
+import { ToolCallMessage, ToolResultMessage } from 'agentxjs';
 export interface ToolUseMessageProps {
     /**
      * Tool call message

package/dist/components/{message → container/message}/items/UserMessage.d.ts

@@ -1,4 +1,4 @@
-import { UserMessage as UserMessageType } from '@agentxjs/types';
+import { UserMessage as UserMessageType } from 'agentxjs';
 export interface UserMessageProps {
     /**
      * User message data

package/dist/components/{message → container/message}/items/index.d.ts

@@ -1,6 +1,5 @@
 export { UserMessage, type UserMessageProps } from './UserMessage';
 export { AssistantMessage, type AssistantMessageProps } from './AssistantMessage';
-export { SystemMessage, type SystemMessageProps } from './SystemMessage';
 export { ToolCallMessage } from './ToolCallMessage';
 export { ToolResultMessage } from './ToolResultMessage';
 export { ToolUseMessage, type ToolUseMessageProps } from './ToolUseMessage';

package/dist/components/{message → container/message}/parts/ToolResultContent.d.ts

@@ -1,4 +1,4 @@
-import { ToolResultOutput } from '@agentxjs/types';
+import { ToolResultOutput } from 'agentxjs';
 export interface ToolResultContentProps {
     /**
      * Tool call ID this result corresponds to

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" | "outline" | "primary" | "secondary" | "success" | "warning" | "info" | "destructive" | null | undefined;
+    variant?: "default" | "success" | "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/Button.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "outline" | "secondary" | "destructive" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

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

@@ -0,0 +1,64 @@
+/**
+ * EmojiPicker - Emoji selection component using emoji-mart
+ *
+ * A wrapper component around emoji-mart picker with theme support.
+ *
+ * @example
+ * ```tsx
+ * <EmojiPicker onEmojiSelect={(emoji) => console.log(emoji)} />
+ * ```
+ */
+import * as React from "react";
+export interface Emoji {
+    id: string;
+    name: string;
+    native: string;
+    unified: string;
+    keywords: string[];
+    shortcodes: string;
+}
+export interface EmojiPickerProps {
+    /**
+     * Callback when an emoji is selected
+     */
+    onEmojiSelect?: (emoji: Emoji) => void;
+    /**
+     * Theme mode
+     * @default 'auto'
+     */
+    theme?: "auto" | "light" | "dark";
+    /**
+     * Locale for emoji names
+     * @default 'en'
+     */
+    locale?: string;
+    /**
+     * Number of emojis per row
+     * @default 9
+     */
+    perLine?: number;
+    /**
+     * Show preview of selected emoji
+     * @default false
+     */
+    preview?: boolean;
+    /**
+     * Show search input
+     * @default true
+     */
+    searchPosition?: "sticky" | "static" | "none";
+    /**
+     * Show skin tone selector
+     * @default true
+     */
+    skinTonePosition?: "preview" | "search" | "none";
+    /**
+     * Maximum frequently used emojis
+     * @default 16
+     */
+    maxFrequentRows?: number;
+}
+/**
+ * EmojiPicker component
+ */
+export declare const EmojiPicker: React.FC<EmojiPickerProps>;

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" | "primary" | "secondary" | "success" | "warning" | "info" | "neutral" | null | undefined;
+    variant?: "error" | "success" | "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/element/Toast.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Toast - Notification component
+ *
+ * Displays temporary notifications to users.
+ * Supports different severity levels and auto-dismiss.
+ */
+import * as React from "react";
+export type ToastSeverity = "info" | "warn" | "error" | "fatal";
+export interface ToastProps {
+    /**
+     * Unique identifier for the toast
+     */
+    id: string;
+    /**
+     * Toast message
+     */
+    message: string;
+    /**
+     * Severity level
+     * @default "info"
+     */
+    severity?: ToastSeverity;
+    /**
+     * Auto dismiss duration in milliseconds
+     * Set to 0 to disable auto dismiss
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Callback when toast is dismissed
+     */
+    onDismiss?: (id: string) => void;
+}
+/**
+ * Toast component - Single toast notification
+ */
+export declare const Toast: React.FC<ToastProps>;
+/**
+ * ToastContainer - Container for managing multiple toasts
+ */
+export interface ToastContainerProps {
+    /**
+     * Array of toasts to display
+     */
+    toasts: ToastProps[];
+    /**
+     * Position of the toast container
+     * @default "top-right"
+     */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center";
+    /**
+     * Maximum number of toasts to display
+     * @default 3
+     */
+    maxToasts?: number;
+    /**
+     * Callback when toast is dismissed
+     */
+    onDismiss?: (id: string) => void;
+}
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+/**
+ * useToast hook - Manage toasts state
+ */
+export interface UseToastReturn {
+    toasts: ToastProps[];
+    showToast: (message: string, severity?: ToastSeverity, duration?: number) => void;
+    dismissToast: (id: string) => void;
+    clearToasts: () => void;
+}
+export declare const useToast: () => UseToastReturn;

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

@@ -3,6 +3,8 @@ export { AgentLogo } from './AgentLogo';
 export { AppHeader } from './AppHeader';
 export { Badge } from './Badge';
 export { Button } from './Button';
+export { EmojiPicker } from './EmojiPicker';
+export type { Emoji, EmojiPickerProps } from './EmojiPicker';
 export { EmptyState } from './EmptyState';
 export { ImageAttachment } from './ImageAttachment';
 export { Input } from './Input';
@@ -16,3 +18,5 @@ export { SearchInput } from './SearchInput';
 export { TabNavigation } from './TabNavigation';
 export { TimeAgo } from './TimeAgo';
 export { TokenUsagePie } from './TokenUsagePie';
+export { Toast, ToastContainer, useToast } from './Toast';
+export type { ToastProps, ToastSeverity, ToastContainerProps, UseToastReturn } from './Toast';

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

@@ -0,0 +1,74 @@
+import { ToolBarItem } from './InputToolBar';
+/**
+ * InputPane - Full-height input area (WeChat style)
+ *
+ * A pure UI component where the entire pane is an input area:
+ * - Toolbar at the top
+ * - Full-height textarea filling the space
+ * - Send button at bottom right corner
+ *
+ * @example
+ * ```tsx
+ * <InputPane
+ *   onSend={(text) => handleSend(text)}
+ *   placeholder="Type a message..."
+ *   toolbarItems={[
+ *     { id: 'emoji', icon: <Smile />, label: 'Emoji' },
+ *     { id: 'attach', icon: <Paperclip />, label: 'Attach' },
+ *   ]}
+ * />
+ * ```
+ */
+import * as React from "react";
+export interface InputPaneProps {
+    /**
+     * Callback when user sends a message
+     */
+    onSend?: (text: string) => void;
+    /**
+     * Callback when stop button is clicked (during loading)
+     */
+    onStop?: () => void;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether currently loading/processing
+     */
+    isLoading?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Toolbar items (left side)
+     */
+    toolbarItems?: ToolBarItem[];
+    /**
+     * Toolbar items (right side)
+     */
+    toolbarRightItems?: ToolBarItem[];
+    /**
+     * Callback when a toolbar item is clicked
+     */
+    onToolbarItemClick?: (id: string) => void;
+    /**
+     * Show toolbar
+     * @default true when toolbarItems provided
+     */
+    showToolbar?: boolean;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Enable built-in emoji picker for toolbar item with id='emoji'
+     * @default true
+     */
+    enableEmojiPicker?: boolean;
+}
+/**
+ * InputPane component - WeChat style full-height input
+ */
+export declare const InputPane: React.ForwardRefExoticComponent<InputPaneProps & React.RefAttributes<HTMLDivElement>>;