@copilotz/chat-ui 0.3.0 → 0.3.1

package/README.md

@@ -31,7 +31,7 @@ Then you need to show tool calls — the library doesn't support that. Streaming
 | Input | File upload (drag & drop), audio recording, attachment previews |
 | Threads | Sidebar with search, archive, date grouping, rename, delete |
 | User Profile | Dynamic fields, memories (CRUD), agent vs user distinction |
-| Customization | 50+ labels (i18n-ready), feature toggles, 4 presets, theming |
+| Customization | 50+ labels (i18n-ready), feature toggles, theming |
 
 **One package. Backend-agnostic. Production-ready.**
 
@@ -142,26 +142,6 @@ const agents = [
 
 The configuration system lets you customize everything without touching the component internals.
 
-### Presets
-
-Start with a preset and override what you need:
-
-```tsx
-import { ChatUI, chatConfigPresets } from '@copilotz/chat-ui';
-
-// Minimal: no threads, no file upload, compact mode
-<ChatUI config={chatConfigPresets.minimal} />
-
-// Full: all features enabled, timestamps, word count
-<ChatUI config={chatConfigPresets.full} />
-
-// Developer: tool calls visible, timestamps, file upload
-<ChatUI config={chatConfigPresets.developer} />
-
-// Customer Support: threads, file upload, no message editing
-<ChatUI config={chatConfigPresets.customer_support} />
-```
-
 ### Custom Configuration
 
 ```tsx
@@ -437,8 +417,7 @@ export { UserMenu } from './components/chat/UserMenu';
 export { ChatUserContextProvider, useChatUserContext } from './components/chat/UserContext';
 
 // Configuration
-export { defaultChatConfig, mergeConfig, chatConfigPresets, validateConfig } from './config/chatConfig';
-export { themeUtils, featureFlags, configUtils } from './config/chatConfig';
+export { defaultChatConfig, mergeConfig } from './config/chatConfig';
 
 // Types
 export type { ChatMessage, ChatThread, ChatConfig, ChatCallbacks } from './types/chatTypes';
@@ -460,17 +439,7 @@ import '@copilotz/chat-ui/styles.css';
 
 ### Theming
 
-The component respects the `dark` class on your document root. Set theme programmatically:
-
-```tsx
-import { themeUtils } from '@copilotz/chat-ui';
-
-// Apply theme
-themeUtils.applyTheme('dark'); // or 'light' or 'auto'
-
-// Get system preference
-const systemTheme = themeUtils.getSystemTheme(); // 'light' | 'dark'
-```
+The component respects the `dark` class on your document root. Set `ui.theme` to `'light'`, `'dark'`, or `'auto'` (follows system preference).
 
 ### CSS Variables
 

package/dist/index.cjs

@@ -43,20 +43,15 @@ __export(index_exports, {
   UserMenu: () => UserMenu,
   UserProfile: () => UserProfile,
   assignAgentColors: () => assignAgentColors,
-  chatConfigPresets: () => chatConfigPresets,
   chatUtils: () => chatUtils,
   cn: () => cn,
-  configUtils: () => configUtils,
   createObjectUrlFromDataUrl: () => createObjectUrlFromDataUrl,
   defaultChatConfig: () => defaultChatConfig,
-  featureFlags: () => featureFlags,
   formatDate: () => formatDate,
   getAgentColor: () => getAgentColor,
   getAgentInitials: () => getAgentInitials,
   mergeConfig: () => mergeConfig,
-  themeUtils: () => themeUtils,
-  useChatUserContext: () => useChatUserContext,
-  validateConfig: () => validateConfig
+  useChatUserContext: () => useChatUserContext
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -230,127 +225,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
 var import_react = __toESM(require("react"), 1);
@@ -3181,7 +3055,7 @@ var ChatHeader = ({
 };
 
 // src/components/chat/ChatInput.tsx
-var import_react6 = require("react");
+var import_react6 = __toESM(require("react"), 1);
 
 // src/components/chat/UserContext.tsx
 var import_react5 = require("react");
@@ -3776,6 +3650,29 @@ var VoiceComposer = ({
 // src/components/chat/ChatInput.tsx
 var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime23 = require("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 = (0, import_react6.memo)(function FileUploadItem2({ file, progress, onCancel }) {
   const guessTypeFromName = (name) => {
     const ext = (name || "").split(".").pop()?.toLowerCase();
@@ -4036,7 +3933,9 @@ var ChatInput = (0, import_react6.memo)(function ChatInput2({
   // 10MB
   acceptedFileTypes = ["image/*", "video/*", "audio/*"],
   className = "",
-  config
+  config,
+  mentionAgents = [],
+  onTargetAgentChange
 }) {
   const voiceComposeEnabled = config?.voiceCompose?.enabled === true;
   const voiceDefaultMode = config?.voiceCompose?.defaultMode ?? "text";
@@ -4061,6 +3960,8 @@ var ChatInput = (0, import_react6.memo)(function ChatInput2({
   const [voiceCountdownMs, setVoiceCountdownMs] = (0, import_react6.useState)(0);
   const [isVoiceAutoSendActive, setIsVoiceAutoSendActive] = (0, import_react6.useState)(false);
   const [voiceError, setVoiceError] = (0, import_react6.useState)(null);
+  const [activeMention, setActiveMention] = (0, import_react6.useState)(null);
+  const [activeMentionIndex, setActiveMentionIndex] = (0, import_react6.useState)(0);
   const textareaRef = (0, import_react6.useRef)(null);
   const fileInputRef = (0, import_react6.useRef)(null);
   const mediaRecorderRef = (0, import_react6.useRef)(null);
@@ -4071,6 +3972,35 @@ var ChatInput = (0, import_react6.memo)(function ChatInput2({
   const voiceDraftRef = (0, import_react6.useRef)(null);
   const voiceAppendBaseRef = (0, import_react6.useRef)(null);
   const voiceAppendBaseDurationRef = (0, import_react6.useRef)(0);
+  const filteredMentionAgents = import_react6.default.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 = (0, import_react6.useCallback)((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);
+  }, []);
   (0, import_react6.useEffect)(() => {
     return () => {
       if (mediaStreamRef.current) {
@@ -4088,14 +4018,70 @@ var ChatInput = (0, import_react6.memo)(function ChatInput2({
   (0, import_react6.useEffect)(() => {
     voiceDraftRef.current = voiceDraft;
   }, [voiceDraft]);
+  (0, import_react6.useEffect)(() => {
+    if (!isMentionMenuOpen) {
+      setActiveMentionIndex(0);
+      return;
+    }
+    setActiveMentionIndex(
+      (prev) => prev >= filteredMentionAgents.length ? 0 : prev
+    );
+  }, [filteredMentionAgents.length, isMentionMenuOpen]);
+  const selectMentionAgent = (0, import_react6.useCallback)((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);
@@ -4661,19 +4647,48 @@ var ChatInput = (0, import_react6.memo)(function ChatInput2({
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipContent, { children: config?.labels?.attachFileTooltip })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              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__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-md border bg-popover shadow-md", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "p-1", children: filteredMentionAgents.map((agent, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              "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__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-medium", children: agent.name }),
+                  agent.description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: agent.description })
+                ]
+              },
+              agent.id
+            )) }) })
+          ] }),
           enableAudioRecording && !isRecording && canAddMoreAttachments && !value.trim() && (voiceComposeEnabled ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Tooltip, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               Button,
@@ -5700,7 +5715,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
               }
             )
           ] })
@@ -6038,19 +6055,14 @@ var ThreadManager = ({
   UserMenu,
   UserProfile,
   assignAgentColors,
-  chatConfigPresets,
   chatUtils,
   cn,
-  configUtils,
   createObjectUrlFromDataUrl,
   defaultChatConfig,
-  featureFlags,
   formatDate,
   getAgentColor,
   getAgentInitials,
   mergeConfig,
-  themeUtils,
-  useChatUserContext,
-  validateConfig
+  useChatUserContext
 });
 //# sourceMappingURL=index.cjs.map