@copilotz/chat-ui 0.2.1 → 0.3.1

package/dist/index.d.cts

@@ -85,6 +85,10 @@ interface ChatMessage {
     reasoning?: string;
     /** Whether reasoning tokens are still being streamed */
     isReasoningStreaming?: boolean;
+    /** Agent/sender identity for multi-agent conversations */
+    senderName?: string;
+    /** Agent ID of the sender (for multi-agent conversations) */
+    senderAgentId?: string;
 }
 interface ChatThread {
     id: string;
@@ -111,6 +115,8 @@ interface ChatConfig {
         enabled?: boolean;
         label?: string;
         hideIfSingle?: boolean;
+        /** 'single' = classic single-agent dropdown (default). 'multi' = participants + target selectors. */
+        mode?: 'single' | 'multi';
     };
     labels?: {
         inputPlaceholder?: string;
@@ -279,6 +285,12 @@ interface ChatV2Props {
     agentOptions?: AgentOption[];
     selectedAgentId?: string | null;
     onSelectAgent?: (agentId: string) => void;
+    /** IDs of agents participating in this conversation */
+    participantIds?: string[];
+    onParticipantsChange?: (ids: string[]) => void;
+    /** ID of the agent this message is directed at */
+    targetAgentId?: string | null;
+    onTargetAgentChange?: (agentId: string | null) => void;
     suggestions?: string[];
     messageSuggestions?: Record<string, string[]>;
     enabledFeatures?: string[];
@@ -314,6 +326,8 @@ interface AgentOption {
     name: string;
     description?: string;
     avatarUrl?: string;
+    /** Custom color for multi-agent display. Auto-assigned if not provided. */
+    color?: string;
 }
 type MessageAction = 'copy' | 'edit' | 'delete' | 'regenerate' | 'retry';
 interface MessageActionEvent {
@@ -400,13 +414,63 @@ interface ChatHeaderProps {
     showCustomComponentButton?: boolean;
     isMobile?: boolean;
     showAgentSelector?: boolean;
+    isMultiAgentMode?: boolean;
     agentOptions?: AgentOption[];
     selectedAgentId?: string | null;
     onSelectAgent?: (agentId: string) => void;
+    participantIds?: string[];
+    onParticipantsChange?: (ids: string[]) => void;
     className?: string;
 }
 declare const ChatHeader: React__default.FC<ChatHeaderProps>;
 
+interface ParticipantsSelectorProps {
+    /** All available agents */
+    agents: AgentOption[];
+    /** Currently selected participant IDs */
+    participantIds: string[];
+    /** Callback when participants change */
+    onParticipantsChange: (ids: string[]) => void;
+    /** Label for the selector */
+    label?: string;
+    /** Maximum participants to show in collapsed view */
+    maxVisible?: number;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Multi-select dropdown for choosing which agents participate in the conversation.
+ */
+declare const ParticipantsSelector: React__default.FC<ParticipantsSelectorProps>;
+interface TargetAgentSelectorProps {
+    /** Available agents (should be filtered to participants only) */
+    agents: AgentOption[];
+    /** Currently targeted agent ID */
+    targetAgentId: string | null;
+    /** Callback when target changes */
+    onTargetChange: (agentId: string | null) => void;
+    /** Label for the selector */
+    label?: string;
+    /** Placeholder when no target is selected */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Single-select dropdown for choosing which agent to address with @mention.
+ */
+declare const TargetAgentSelector: React__default.FC<TargetAgentSelectorProps>;
+interface AgentBadgeProps {
+    agent: AgentOption;
+    onRemove?: () => void;
+    showRemove?: boolean;
+    size?: 'sm' | 'md';
+}
+/**
+ * Badge displaying an agent with optional remove button.
+ */
+declare const AgentBadge: React__default.FC<AgentBadgeProps>;
+
 interface ChatInputProps {
     value: string;
     onChange: (value: string) => void;
@@ -424,6 +488,8 @@ interface ChatInputProps {
     acceptedFileTypes?: string[];
     className?: string;
     config?: ChatConfig;
+    mentionAgents?: AgentOption[];
+    onTargetAgentChange?: (agentId: string | null) => void;
 }
 declare const ChatInput: React__default.FC<ChatInputProps>;
 
@@ -457,6 +523,8 @@ interface MessageProps {
     onToggleExpanded?: (messageId: string) => void;
     /** When true, hides the avatar and name (for grouped consecutive messages from same sender) */
     isGrouped?: boolean;
+    /** Available agents for resolving multi-agent display (colors, avatars) */
+    agentOptions?: AgentOption[];
 }
 declare const Message: React__default.FC<MessageProps>;
 
@@ -627,48 +695,6 @@ declare const UserProfile: React__default.FC<UserProfileProps>;
 
 declare const defaultChatConfig: Required<ChatConfig>;
 declare function mergeConfig(_baseConfig: ChatConfig, userConfig?: Partial<ChatConfig>): Required<ChatConfig>;
-declare const chatConfigPresets: {
-    readonly minimal: Partial<ChatConfig>;
-    readonly full: Partial<ChatConfig>;
-    readonly developer: Partial<ChatConfig>;
-    readonly customer_support: Partial<ChatConfig>;
-};
-declare function validateConfig(config: ChatConfig): string[];
-declare const themeUtils: {
-    getSystemTheme: () => "light" | "dark";
-    resolveTheme: (theme: "light" | "dark" | "auto") => "light" | "dark";
-    applyTheme: (theme: "light" | "dark" | "auto") => void;
-};
-declare const featureFlags: {
-    isEnabled: (config: Required<ChatConfig>, feature: keyof Required<ChatConfig>["features"]) => boolean;
-    getEnabledFeatures: (config: Required<ChatConfig>) => string[];
-    hasAnyFeature: (config: Required<ChatConfig>, features: (keyof Required<ChatConfig>["features"])[]) => boolean;
-};
-declare const configUtils: {
-    createConfigHook: (config: Required<ChatConfig>) => {
-        config: Required<ChatConfig>;
-        isFeatureEnabled: (feature: keyof Required<ChatConfig>["features"]) => boolean;
-        getLabel: (key: keyof Required<ChatConfig>["labels"]) => string | undefined;
-        getBranding: () => {
-            logo?: React.ReactNode;
-            title?: string;
-            subtitle?: string;
-            avatar?: React.ReactNode;
-        };
-        getUI: () => {
-            theme?: "light" | "dark" | "auto";
-            showTimestamps?: boolean;
-            showAvatars?: boolean;
-            compactMode?: boolean;
-            showWordCount?: boolean;
-            collapseLongMessages?: boolean;
-            collapseLongMessagesForUserOnly?: boolean;
-            longMessagePreviewChars?: number;
-            longMessageChunkChars?: number;
-            renderUserMarkdown?: boolean;
-        };
-    };
-};
 
 declare function cn(...inputs: ClassValue[]): string;
 declare const formatDate: (timestamp: number, labels?: ChatConfig["labels"]) => string;
@@ -682,5 +708,13 @@ declare const chatUtils: {
     createThread: (title: string) => ChatThread;
     generateThreadTitle: (firstMessage: string) => string;
 };
+/** Deterministic color for an agent based on its ID. */
+declare function getAgentColor(agentId: string): string;
+/** Up to 2-letter initials from an agent name. */
+declare function getAgentInitials(name: string): string;
+/** Assign colors to agents that don't have a custom color. Returns a new array. */
+declare function assignAgentColors(agents: AgentOption[]): (AgentOption & {
+    color: string;
+})[];
 
-export { type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMarkdownConfig, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };
+export { AgentBadge, type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMarkdownConfig, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, ParticipantsSelector, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, TargetAgentSelector, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, assignAgentColors, chatUtils, cn, createObjectUrlFromDataUrl, defaultChatConfig, formatDate, getAgentColor, getAgentInitials, mergeConfig, useChatUserContext };

package/dist/index.d.ts

@@ -85,6 +85,10 @@ interface ChatMessage {
     reasoning?: string;
     /** Whether reasoning tokens are still being streamed */
     isReasoningStreaming?: boolean;
+    /** Agent/sender identity for multi-agent conversations */
+    senderName?: string;
+    /** Agent ID of the sender (for multi-agent conversations) */
+    senderAgentId?: string;
 }
 interface ChatThread {
     id: string;
@@ -111,6 +115,8 @@ interface ChatConfig {
         enabled?: boolean;
         label?: string;
         hideIfSingle?: boolean;
+        /** 'single' = classic single-agent dropdown (default). 'multi' = participants + target selectors. */
+        mode?: 'single' | 'multi';
     };
     labels?: {
         inputPlaceholder?: string;
@@ -279,6 +285,12 @@ interface ChatV2Props {
     agentOptions?: AgentOption[];
     selectedAgentId?: string | null;
     onSelectAgent?: (agentId: string) => void;
+    /** IDs of agents participating in this conversation */
+    participantIds?: string[];
+    onParticipantsChange?: (ids: string[]) => void;
+    /** ID of the agent this message is directed at */
+    targetAgentId?: string | null;
+    onTargetAgentChange?: (agentId: string | null) => void;
     suggestions?: string[];
     messageSuggestions?: Record<string, string[]>;
     enabledFeatures?: string[];
@@ -314,6 +326,8 @@ interface AgentOption {
     name: string;
     description?: string;
     avatarUrl?: string;
+    /** Custom color for multi-agent display. Auto-assigned if not provided. */
+    color?: string;
 }
 type MessageAction = 'copy' | 'edit' | 'delete' | 'regenerate' | 'retry';
 interface MessageActionEvent {
@@ -400,13 +414,63 @@ interface ChatHeaderProps {
     showCustomComponentButton?: boolean;
     isMobile?: boolean;
     showAgentSelector?: boolean;
+    isMultiAgentMode?: boolean;
     agentOptions?: AgentOption[];
     selectedAgentId?: string | null;
     onSelectAgent?: (agentId: string) => void;
+    participantIds?: string[];
+    onParticipantsChange?: (ids: string[]) => void;
     className?: string;
 }
 declare const ChatHeader: React__default.FC<ChatHeaderProps>;
 
+interface ParticipantsSelectorProps {
+    /** All available agents */
+    agents: AgentOption[];
+    /** Currently selected participant IDs */
+    participantIds: string[];
+    /** Callback when participants change */
+    onParticipantsChange: (ids: string[]) => void;
+    /** Label for the selector */
+    label?: string;
+    /** Maximum participants to show in collapsed view */
+    maxVisible?: number;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Multi-select dropdown for choosing which agents participate in the conversation.
+ */
+declare const ParticipantsSelector: React__default.FC<ParticipantsSelectorProps>;
+interface TargetAgentSelectorProps {
+    /** Available agents (should be filtered to participants only) */
+    agents: AgentOption[];
+    /** Currently targeted agent ID */
+    targetAgentId: string | null;
+    /** Callback when target changes */
+    onTargetChange: (agentId: string | null) => void;
+    /** Label for the selector */
+    label?: string;
+    /** Placeholder when no target is selected */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * Single-select dropdown for choosing which agent to address with @mention.
+ */
+declare const TargetAgentSelector: React__default.FC<TargetAgentSelectorProps>;
+interface AgentBadgeProps {
+    agent: AgentOption;
+    onRemove?: () => void;
+    showRemove?: boolean;
+    size?: 'sm' | 'md';
+}
+/**
+ * Badge displaying an agent with optional remove button.
+ */
+declare const AgentBadge: React__default.FC<AgentBadgeProps>;
+
 interface ChatInputProps {
     value: string;
     onChange: (value: string) => void;
@@ -424,6 +488,8 @@ interface ChatInputProps {
     acceptedFileTypes?: string[];
     className?: string;
     config?: ChatConfig;
+    mentionAgents?: AgentOption[];
+    onTargetAgentChange?: (agentId: string | null) => void;
 }
 declare const ChatInput: React__default.FC<ChatInputProps>;
 
@@ -457,6 +523,8 @@ interface MessageProps {
     onToggleExpanded?: (messageId: string) => void;
     /** When true, hides the avatar and name (for grouped consecutive messages from same sender) */
     isGrouped?: boolean;
+    /** Available agents for resolving multi-agent display (colors, avatars) */
+    agentOptions?: AgentOption[];
 }
 declare const Message: React__default.FC<MessageProps>;
 
@@ -627,48 +695,6 @@ declare const UserProfile: React__default.FC<UserProfileProps>;
 
 declare const defaultChatConfig: Required<ChatConfig>;
 declare function mergeConfig(_baseConfig: ChatConfig, userConfig?: Partial<ChatConfig>): Required<ChatConfig>;
-declare const chatConfigPresets: {
-    readonly minimal: Partial<ChatConfig>;
-    readonly full: Partial<ChatConfig>;
-    readonly developer: Partial<ChatConfig>;
-    readonly customer_support: Partial<ChatConfig>;
-};
-declare function validateConfig(config: ChatConfig): string[];
-declare const themeUtils: {
-    getSystemTheme: () => "light" | "dark";
-    resolveTheme: (theme: "light" | "dark" | "auto") => "light" | "dark";
-    applyTheme: (theme: "light" | "dark" | "auto") => void;
-};
-declare const featureFlags: {
-    isEnabled: (config: Required<ChatConfig>, feature: keyof Required<ChatConfig>["features"]) => boolean;
-    getEnabledFeatures: (config: Required<ChatConfig>) => string[];
-    hasAnyFeature: (config: Required<ChatConfig>, features: (keyof Required<ChatConfig>["features"])[]) => boolean;
-};
-declare const configUtils: {
-    createConfigHook: (config: Required<ChatConfig>) => {
-        config: Required<ChatConfig>;
-        isFeatureEnabled: (feature: keyof Required<ChatConfig>["features"]) => boolean;
-        getLabel: (key: keyof Required<ChatConfig>["labels"]) => string | undefined;
-        getBranding: () => {
-            logo?: React.ReactNode;
-            title?: string;
-            subtitle?: string;
-            avatar?: React.ReactNode;
-        };
-        getUI: () => {
-            theme?: "light" | "dark" | "auto";
-            showTimestamps?: boolean;
-            showAvatars?: boolean;
-            compactMode?: boolean;
-            showWordCount?: boolean;
-            collapseLongMessages?: boolean;
-            collapseLongMessagesForUserOnly?: boolean;
-            longMessagePreviewChars?: number;
-            longMessageChunkChars?: number;
-            renderUserMarkdown?: boolean;
-        };
-    };
-};
 
 declare function cn(...inputs: ClassValue[]): string;
 declare const formatDate: (timestamp: number, labels?: ChatConfig["labels"]) => string;
@@ -682,5 +708,13 @@ declare const chatUtils: {
     createThread: (title: string) => ChatThread;
     generateThreadTitle: (firstMessage: string) => string;
 };
+/** Deterministic color for an agent based on its ID. */
+declare function getAgentColor(agentId: string): string;
+/** Up to 2-letter initials from an agent name. */
+declare function getAgentInitials(name: string): string;
+/** Assign colors to agents that don't have a custom color. Returns a new array. */
+declare function assignAgentColors(agents: AgentOption[]): (AgentOption & {
+    color: string;
+})[];
 
-export { type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMarkdownConfig, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, mergeConfig, themeUtils, useChatUserContext, validateConfig };
+export { AgentBadge, type AgentOption, type AudioAttachment, type ChatCallbacks, type ChatConfig, ChatHeader, type ChatHeaderConfig, type ChatHeaderProps, ChatInput, type ChatMarkdownConfig, type ChatMessage, type ChatState, type ChatThread, ChatUI, type ChatUserContext, ChatUserContextProvider, type ChatV2Props, type CreateVoiceProvider, type CustomField, type FileUploadProgress, type MediaAttachment, type MemoryItem, Message, type MessageAction, type MessageActionEvent, ParticipantsSelector, Sidebar, type SidebarConfig, type SidebarProps, type StateCallback, type StreamingUpdate, TargetAgentSelector, ThreadManager, type ToolCall, type UserCustomField, UserMenu, type UserMenuCallbacks, type UserMenuConfig, type UserMenuProps, type UserMenuUser, UserProfile, type UserProfileConfig, type UserProfileProps, type UserProfileUser, type VoiceComposerState, type VoiceProvider, type VoiceProviderHandlers, type VoiceProviderOptions, type VoiceReviewMode, type VoiceSegment, type VoiceTranscript, type VoiceTranscriptMode, assignAgentColors, chatUtils, cn, createObjectUrlFromDataUrl, defaultChatConfig, formatDate, getAgentColor, getAgentInitials, mergeConfig, useChatUserContext };