@agentxjs/ui 0.0.1

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

@@ -0,0 +1,27 @@
+import { UserMessage as UserMessageType } from '@agentxjs/types';
+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/message/items/index.d.ts

@@ -0,0 +1,7 @@
+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';
+export { ErrorAlert, type ErrorAlertProps } from './ErrorAlert';

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

@@ -0,0 +1,24 @@
+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/message/parts/ImageContent.d.ts

@@ -0,0 +1,32 @@
+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/message/parts/TextContent.d.ts

@@ -0,0 +1,20 @@
+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/message/parts/ThinkingContent.d.ts

@@ -0,0 +1,28 @@
+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/message/parts/ToolCallContent.d.ts

@@ -0,0 +1,31 @@
+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/message/parts/ToolResultContent.d.ts

@@ -0,0 +1,32 @@
+import { ToolResultOutput } from '@agentxjs/types';
+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/message/parts/index.d.ts

@@ -0,0 +1,6 @@
+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/components/studio/Studio.d.ts

@@ -0,0 +1,47 @@
+import { AgentX } from '@agentxjs/types';
+import { SessionItem } from '../../hooks/useSession';
+import { AgentDefinitionItem } from '../container/types';
+/**
+ * Props for Studio component
+ */
+export interface StudioProps {
+    /**
+     * AgentX instance for backend communication
+     */
+    agentx: AgentX;
+    /**
+     * Current user ID
+     */
+    userId: string;
+    /**
+     * User's dedicated Container ID
+     * All agent operations will use this container
+     */
+    containerId: string;
+    /**
+     * Available agent definitions
+     */
+    definitions: AgentDefinitionItem[];
+    /**
+     * Optional callback when session changes
+     */
+    onSessionChange?: (session: SessionItem | null) => void;
+    /**
+     * Optional callback when definition changes
+     */
+    onDefinitionChange?: (definition: AgentDefinitionItem | null) => void;
+    /**
+     * Optional custom className
+     */
+    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
+ */
+export declare function Studio({ agentx, userId, containerId, definitions, onSessionChange, onDefinitionChange, className, }: StudioProps): import("react/jsx-runtime").JSX.Element;
+export default Studio;

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

@@ -0,0 +1,9 @@
+/**
+ * Studio - Integration layer for multi-agent chat UI
+ *
+ * Studio is the frontend-specific concept that integrates:
+ * - useSession (maps to agentx.sessions)
+ * - useAgent (maps to agentx.agents)
+ * - ContainerView (pure UI layout)
+ */
+export { Studio, type StudioProps } from './Studio';

package/dist/components/typography/DiffViewer.d.ts

@@ -0,0 +1,41 @@
+export interface DiffViewerProps {
+    /**
+     * Diff content in unified diff format
+     */
+    diff: string;
+    /**
+     * Optional file name (currently unused, for future enhancement)
+     */
+    fileName?: string;
+    /**
+     * Enable mobile-friendly text wrapping
+     */
+    isMobile?: boolean;
+    /**
+     * Force text wrapping
+     */
+    wrapText?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * DiffViewer - Display code diff with syntax highlighting
+ *
+ * Single Responsibility: Render diff content with color-coded additions/deletions
+ *
+ * Color coding:
+ * - Green: Additions (+)
+ * - Red: Deletions (-)
+ * - Blue: Headers (@@)
+ * - Gray: Context lines
+ *
+ * @example
+ * ```tsx
+ * <DiffViewer
+ *   diff="+  console.log('added');\n-  console.log('removed');"
+ * />
+ * ```
+ */
+export declare function DiffViewer({ diff, fileName: _fileName, isMobile, wrapText, className, }: DiffViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/typography/JSONRenderer.d.ts

@@ -0,0 +1,23 @@
+export interface JSONRendererProps {
+    /**
+     * JSON string to parse and display
+     */
+    content: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * JSONRenderer - Format and display JSON content
+ *
+ * Single Responsibility: Parse JSON string and render formatted output
+ *
+ * Returns null if content is not valid JSON
+ *
+ * @example
+ * ```tsx
+ * <JSONRenderer content='{"name": "Agent", "version": "1.0"}' />
+ * ```
+ */
+export declare function JSONRenderer({ content, className }: JSONRendererProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/typography/MarkdownText.d.ts

@@ -0,0 +1,25 @@
+export interface MarkdownTextProps {
+    /**
+     * Markdown content to render
+     */
+    children: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * MarkdownText - Renders markdown content with syntax highlighting and custom styling
+ *
+ * @example
+ * ```tsx
+ * <MarkdownText>
+ *   # Hello World
+ *   This is **bold** and this is `code`
+ * </MarkdownText>
+ * ```
+ */
+export declare const MarkdownText: {
+    ({ children, className }: MarkdownTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,3 @@
+export { DiffViewer } from './DiffViewer';
+export { JSONRenderer } from './JSONRenderer';
+export { MarkdownText } from './MarkdownText';