@copilotz/chat-ui 0.3.0 → 0.3.2

package/dist/index.d.cts

@@ -488,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>;
 
@@ -693,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;
@@ -757,4 +717,4 @@ declare function assignAgentColors(agents: AgentOption[]): (AgentOption & {
     color: string;
 })[];
 
-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, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, getAgentColor, getAgentInitials, 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

@@ -488,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>;
 
@@ -693,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;
@@ -757,4 +717,4 @@ declare function assignAgentColors(agents: AgentOption[]): (AgentOption & {
     color: string;
 })[];
 
-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, chatConfigPresets, chatUtils, cn, configUtils, createObjectUrlFromDataUrl, defaultChatConfig, featureFlags, formatDate, getAgentColor, getAgentInitials, 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.js

@@ -168,127 +168,6 @@ function mergeConfig(_baseConfig, userConfig) {
     headerActions: userConfig.headerActions || defaultChatConfig.headerActions
   };
 }
-var chatConfigPresets = {
-  minimal: {
-    features: {
-      enableThreads: false,
-      enableFileUpload: false,
-      enableAudioRecording: false,
-      enableMessageEditing: false,
-      enableMessageCopy: true,
-      enableRegeneration: true,
-      enableToolCallsDisplay: false
-    },
-    ui: {
-      compactMode: true,
-      showTimestamps: false,
-      showAvatars: false
-    }
-  },
-  full: {
-    features: {
-      enableThreads: true,
-      enableFileUpload: true,
-      enableAudioRecording: true,
-      enableMessageEditing: true,
-      enableMessageCopy: true,
-      enableRegeneration: true,
-      enableToolCallsDisplay: true
-    },
-    ui: {
-      showTimestamps: true,
-      showAvatars: true,
-      compactMode: false,
-      showWordCount: true
-    }
-  },
-  developer: {
-    features: {
-      enableThreads: true,
-      enableFileUpload: true,
-      enableAudioRecording: false,
-      enableMessageEditing: true,
-      enableMessageCopy: true,
-      enableRegeneration: true,
-      enableToolCallsDisplay: true
-    },
-    ui: {
-      showTimestamps: true,
-      showAvatars: true,
-      compactMode: false,
-      showWordCount: true
-    }
-  },
-  customer_support: {
-    branding: {
-      title: "Customer Support",
-      subtitle: "How can I help you today?"
-    },
-    features: {
-      enableThreads: true,
-      enableFileUpload: true,
-      enableAudioRecording: false,
-      enableMessageEditing: false,
-      enableMessageCopy: true,
-      enableRegeneration: false,
-      enableToolCallsDisplay: false
-    },
-    ui: {
-      showTimestamps: true,
-      showAvatars: true,
-      compactMode: false
-    }
-  }
-};
-function validateConfig(config) {
-  const errors = [];
-  if (config.features?.maxAttachments && config.features.maxAttachments < 1) {
-    errors.push("maxAttachments must be at least 1");
-  }
-  if (config.features?.maxFileSize && config.features.maxFileSize < 1024) {
-    errors.push("maxFileSize must be at least 1024 bytes (1KB)");
-  }
-  if (config.branding?.title && typeof config.branding.title !== "string") {
-    errors.push("branding.title must be a string");
-  }
-  return errors;
-}
-var themeUtils = {
-  getSystemTheme: () => {
-    if (typeof globalThis.matchMedia === "undefined") return "light";
-    return globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  },
-  resolveTheme: (theme) => {
-    return theme === "auto" ? themeUtils.getSystemTheme() : theme;
-  },
-  applyTheme: (theme) => {
-    if (typeof document === "undefined") return;
-    const resolvedTheme = themeUtils.resolveTheme(theme);
-    document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
-  }
-};
-var featureFlags = {
-  isEnabled: (config, feature) => {
-    return config.features[feature] === true;
-  },
-  getEnabledFeatures: (config) => {
-    return Object.entries(config.features).filter(([_, enabled]) => enabled === true).map(([feature]) => feature);
-  },
-  hasAnyFeature: (config, features) => {
-    return features.some((feature) => featureFlags.isEnabled(config, feature));
-  }
-};
-var configUtils = {
-  createConfigHook: (config) => {
-    return {
-      config,
-      isFeatureEnabled: (feature) => featureFlags.isEnabled(config, feature),
-      getLabel: (key) => config.labels[key],
-      getBranding: () => config.branding,
-      getUI: () => config.ui
-    };
-  }
-};
 
 // src/components/chat/Message.tsx
 import React, { useState, useMemo, useEffect, memo } from "react";
@@ -3159,7 +3038,7 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-import { useState as useState6, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect9, memo as memo3 } from "react";
+import React11, { useState as useState6, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect9, memo as memo3 } from "react";
 
 // src/components/chat/UserContext.tsx
 import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo4, useState as useState5 } from "react";
@@ -3766,6 +3645,29 @@ import {
   Loader2 as Loader22
 } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+function getActiveMentionMatch(value, caret) {
+  const prefix = value.slice(0, caret);
+  const match = /(^|\s)@([\w.-]*)$/.exec(prefix);
+  if (!match) return null;
+  const query = match[2] ?? "";
+  return {
+    start: prefix.length - query.length - 1,
+    end: caret,
+    query
+  };
+}
+function resolveTargetFromMentions(value, agents) {
+  const matches = value.matchAll(/(^|\s)@([\w.-]+)/g);
+  for (const match of matches) {
+    const mention = match[2]?.toLowerCase();
+    if (!mention) continue;
+    const agent = agents.find(
+      (candidate) => candidate.id.toLowerCase() === mention || candidate.name.toLowerCase() === mention
+    );
+    if (agent) return agent;
+  }
+  return null;
+}
 var FileUploadItem = memo3(function FileUploadItem2({ file, progress, onCancel }) {
   const guessTypeFromName = (name) => {
     const ext = (name || "").split(".").pop()?.toLowerCase();
@@ -4026,7 +3928,9 @@ var ChatInput = memo3(function ChatInput2({
   // 10MB
   acceptedFileTypes = ["image/*", "video/*", "audio/*"],
   className = "",
-  config
+  config,
+  mentionAgents = [],
+  onTargetAgentChange
 }) {
   const voiceComposeEnabled = config?.voiceCompose?.enabled === true;
   const voiceDefaultMode = config?.voiceCompose?.defaultMode ?? "text";
@@ -4051,6 +3955,8 @@ var ChatInput = memo3(function ChatInput2({
   const [voiceCountdownMs, setVoiceCountdownMs] = useState6(0);
   const [isVoiceAutoSendActive, setIsVoiceAutoSendActive] = useState6(false);
   const [voiceError, setVoiceError] = useState6(null);
+  const [activeMention, setActiveMention] = useState6(null);
+  const [activeMentionIndex, setActiveMentionIndex] = useState6(0);
   const textareaRef = useRef5(null);
   const fileInputRef = useRef5(null);
   const mediaRecorderRef = useRef5(null);
@@ -4061,6 +3967,35 @@ var ChatInput = memo3(function ChatInput2({
   const voiceDraftRef = useRef5(null);
   const voiceAppendBaseRef = useRef5(null);
   const voiceAppendBaseDurationRef = useRef5(0);
+  const filteredMentionAgents = React11.useMemo(() => {
+    if (!activeMention || mentionAgents.length === 0) return [];
+    const query = activeMention.query.trim().toLowerCase();
+    const rank = (agent) => {
+      const id = agent.id.toLowerCase();
+      const name = agent.name.toLowerCase();
+      if (!query) return 0;
+      if (name.startsWith(query) || id.startsWith(query)) return 0;
+      if (name.includes(query) || id.includes(query)) return 1;
+      return 2;
+    };
+    return mentionAgents.filter((agent) => rank(agent) < 2).sort((left, right) => {
+      const rankDiff = rank(left) - rank(right);
+      if (rankDiff !== 0) return rankDiff;
+      return left.name.localeCompare(right.name);
+    }).slice(0, 6);
+  }, [activeMention, mentionAgents]);
+  const isMentionMenuOpen = filteredMentionAgents.length > 0;
+  const syncMentionState = useCallback3((nextValue, nextCaret) => {
+    const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
+    const nextMatch = getActiveMentionMatch(nextValue, caret);
+    setActiveMention((prev) => {
+      if (prev?.start === nextMatch?.start && prev?.end === nextMatch?.end && prev?.query === nextMatch?.query) {
+        return prev;
+      }
+      return nextMatch;
+    });
+    setActiveMentionIndex(0);
+  }, []);
   useEffect9(() => {
     return () => {
       if (mediaStreamRef.current) {
@@ -4078,14 +4013,70 @@ var ChatInput = memo3(function ChatInput2({
   useEffect9(() => {
     voiceDraftRef.current = voiceDraft;
   }, [voiceDraft]);
+  useEffect9(() => {
+    if (!isMentionMenuOpen) {
+      setActiveMentionIndex(0);
+      return;
+    }
+    setActiveMentionIndex(
+      (prev) => prev >= filteredMentionAgents.length ? 0 : prev
+    );
+  }, [filteredMentionAgents.length, isMentionMenuOpen]);
+  const selectMentionAgent = useCallback3((agent) => {
+    if (!activeMention) return;
+    const replacement = `@${agent.name} `;
+    const nextValue = value.slice(0, activeMention.start) + replacement + value.slice(activeMention.end);
+    const nextCaret = activeMention.start + replacement.length;
+    onChange(nextValue);
+    onTargetAgentChange?.(agent.id);
+    setActiveMention(null);
+    setActiveMentionIndex(0);
+    requestAnimationFrame(() => {
+      textareaRef.current?.focus();
+      textareaRef.current?.setSelectionRange(nextCaret, nextCaret);
+    });
+  }, [activeMention, onChange, onTargetAgentChange, value]);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (!value.trim() && attachments.length === 0 || disabled || isGenerating) return;
+    const mentionedAgent = resolveTargetFromMentions(value, mentionAgents);
+    if (mentionedAgent) {
+      onTargetAgentChange?.(mentionedAgent.id);
+    }
     onSubmit(value.trim(), attachments);
     onChange("");
     onAttachmentsChange([]);
+    setActiveMention(null);
+    setActiveMentionIndex(0);
   };
   const handleKeyDown = (e) => {
+    if (isMentionMenuOpen) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveMentionIndex(
+          (prev) => prev >= filteredMentionAgents.length - 1 ? 0 : prev + 1
+        );
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveMentionIndex(
+          (prev) => prev <= 0 ? filteredMentionAgents.length - 1 : prev - 1
+        );
+        return;
+      }
+      if ((e.key === "Enter" || e.key === "Tab") && filteredMentionAgents[activeMentionIndex]) {
+        e.preventDefault();
+        selectMentionAgent(filteredMentionAgents[activeMentionIndex]);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setActiveMention(null);
+        setActiveMentionIndex(0);
+        return;
+      }
+    }
     if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && window.innerWidth > 768) {
       e.preventDefault();
       handleSubmit(e);
@@ -4651,19 +4642,48 @@ var ChatInput = memo3(function ChatInput2({
               /* @__PURE__ */ jsx23(TooltipContent, { children: config?.labels?.attachFileTooltip })
             ] })
           ] }),
-          /* @__PURE__ */ jsx23("div", { className: "flex-1", children: /* @__PURE__ */ jsx23(
-            Textarea,
-            {
-              ref: textareaRef,
-              value,
-              onChange: (e) => onChange(e.target.value),
-              onKeyDown: handleKeyDown,
-              placeholder,
-              disabled,
-              className: "max-h-[120px] resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0",
-              rows: 1
-            }
-          ) }),
+          /* @__PURE__ */ jsxs13("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsx23(
+              Textarea,
+              {
+                ref: textareaRef,
+                value,
+                onChange: (e) => {
+                  onChange(e.target.value);
+                  syncMentionState(e.target.value, e.target.selectionStart ?? e.target.value.length);
+                },
+                onSelect: (e) => {
+                  const target = e.target;
+                  syncMentionState(target.value, target.selectionStart ?? target.value.length);
+                },
+                onClick: (e) => {
+                  const target = e.target;
+                  syncMentionState(target.value, target.selectionStart ?? target.value.length);
+                },
+                onKeyDown: handleKeyDown,
+                placeholder,
+                disabled,
+                className: "max-h-[120px] resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0",
+                rows: 1
+              }
+            ),
+            isMentionMenuOpen && /* @__PURE__ */ jsx23("div", { className: "absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-md border bg-popover shadow-md", children: /* @__PURE__ */ jsx23("div", { className: "p-1", children: filteredMentionAgents.map((agent, index) => /* @__PURE__ */ jsxs13(
+              "button",
+              {
+                type: "button",
+                className: `flex w-full items-center gap-2 rounded-sm px-3 py-2 text-left text-sm ${index === activeMentionIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"}`,
+                onMouseDown: (mouseEvent) => {
+                  mouseEvent.preventDefault();
+                  selectMentionAgent(agent);
+                },
+                children: [
+                  /* @__PURE__ */ jsx23("span", { className: "font-medium", children: agent.name }),
+                  agent.description && /* @__PURE__ */ jsx23("span", { className: "truncate text-xs text-muted-foreground", children: agent.description })
+                ]
+              },
+              agent.id
+            )) }) })
+          ] }),
           enableAudioRecording && !isRecording && canAddMoreAttachments && !value.trim() && (voiceComposeEnabled ? /* @__PURE__ */ jsxs13(Tooltip, { children: [
             /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx23(
               Button,
@@ -5205,6 +5225,16 @@ var UserProfile = ({
 // src/components/chat/ChatUI.tsx
 import { Sparkles, ArrowRight, MessageSquare, Lightbulb as Lightbulb2, Zap, HelpCircle } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+function getMessageSpeakerKey(message) {
+  if (!message) return null;
+  if (message.role === "assistant") {
+    return message.senderAgentId ?? message.senderName ?? "assistant";
+  }
+  if (message.role === "user") {
+    return "user";
+  }
+  return message.role;
+}
 var ChatUI = ({
   messages = [],
   threads = [],
@@ -5650,7 +5680,7 @@ var ChatUI = ({
                   children: virtualizer.getVirtualItems().map((virtualRow) => {
                     const message = messages[virtualRow.index];
                     const prevMessage = virtualRow.index > 0 ? messages[virtualRow.index - 1] : null;
-                    const isGrouped = prevMessage !== null && prevMessage.role === message.role;
+                    const isGrouped = prevMessage !== null && prevMessage.role === message.role && getMessageSpeakerKey(prevMessage) === getMessageSpeakerKey(message);
                     return /* @__PURE__ */ jsx26(
                       "div",
                       {
@@ -5716,7 +5746,9 @@ var ChatUI = ({
                 enableAudioRecording: config.features.enableAudioRecording,
                 maxAttachments: config.features.maxAttachments,
                 maxFileSize: config.features.maxFileSize,
-                config
+                config,
+                mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter((a) => participantIds.includes(a.id)) : agentOptions,
+                onTargetAgentChange
               }
             )
           ] })
@@ -6066,19 +6098,14 @@ export {
   UserMenu,
   UserProfile,
   assignAgentColors,
-  chatConfigPresets,
   chatUtils,
   cn,
-  configUtils,
   createObjectUrlFromDataUrl,
   defaultChatConfig,
-  featureFlags,
   formatDate,
   getAgentColor,
   getAgentInitials,
   mergeConfig,
-  themeUtils,
-  useChatUserContext,
-  validateConfig
+  useChatUserContext
 };
 //# sourceMappingURL=index.js.map