@copilotz/chat-ui 0.9.6 → 0.9.8

package/dist/index.cjs

@@ -3363,7 +3363,8 @@ var TargetAgentSelector = (0, import_react5.memo)(({
   onTargetChange,
   label = "Target",
   placeholder = "Select agent",
-  disabled = false
+  disabled = false,
+  compact = false
 }) => {
   const agentsWithColors = (0, import_react5.useMemo)(() => assignAgentColors(agents), [agents]);
   const selectedAgent = (0, import_react5.useMemo)(
@@ -3375,7 +3376,7 @@ var TargetAgentSelector = (0, import_react5.memo)(({
       Button,
       {
         variant: "ghost",
-        className: "h-9 px-3 gap-1.5 font-medium text-base hover:bg-accent/50",
+        className: `gap-1.5 font-medium hover:bg-accent/50 ${compact ? "h-9 rounded-full px-2 text-sm text-muted-foreground hover:text-foreground" : "h-9 px-3 text-base"}`,
         disabled,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.AtSign, { className: "h-4 w-4 text-muted-foreground" }),
@@ -4538,6 +4539,9 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   className = "",
   config,
   mentionAgents = [],
+  targetAgentId = null,
+  showTargetAgentSelector = false,
+  targetAgentSelectorPlaceholder,
   onTargetAgentChange
 }) {
   const voiceDefaultMode = config?.voiceCompose?.defaultMode ?? "text";
@@ -4586,6 +4590,18 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
     }).slice(0, 6);
   }, [activeMention, mentionAgents]);
   const isMentionMenuOpen = filteredMentionAgents.length > 0;
+  const resizeTextarea = (0, import_react8.useCallback)(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth;
+    const maxHeight = viewportWidth > 768 ? 240 : 190;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    resizeTextarea();
+  }, [resizeTextarea, value]);
   const syncMentionState = (0, import_react8.useCallback)((nextValue, nextCaret) => {
     const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
     const nextMatch = getActiveMentionMatch(nextValue, caret);
@@ -5056,7 +5072,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
   };
   const canAddMoreAttachments = attachments.length < maxAttachments;
   const showVoiceComposer = enableAudioRecording && isVoiceComposerOpen;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `border-t py-0 bg-transparent ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "px-0 md:p-2 pb-1 space-y-4 bg-transparent", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `bg-transparent py-0 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mx-auto w-full max-w-3xl space-y-3 px-3 md:px-2", children: [
     uploadProgress.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-2", children: Array.from(uploadProgress.entries()).map(([id, progress]) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       FileUploadItem,
       {
@@ -5120,46 +5136,14 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
           void closeVoiceComposer();
         }
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("form", { onSubmit: handleSubmit, className: "mb-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("form", { onSubmit: handleSubmit, className: "mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
-        className: "flex  items-end gap-2 p-3 border rounded-lg bg-background w-full md:min-w-3xl max-w-3xl",
+        className: "group/composer flex w-full flex-col gap-2 rounded-3xl border border-border/80 bg-card/95 p-2.5 shadow-sm transition-[border-color,box-shadow,background-color] focus-within:border-ring/60 focus-within:bg-card focus-within:shadow-md focus-within:ring-2 focus-within:ring-ring/15",
         onDrop: handleDrop,
         onDragOver: handleDragOver,
         children: [
-          enableFileUpload && canAddMoreAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                multiple: true,
-                accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
-                onChange: handleFileSelect,
-                className: "hidden"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                Button,
-                {
-                  type: "button",
-                  variant: "outline",
-                  size: "icon",
-                  className: "h-10 w-10",
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    fileInputRef.current?.click();
-                  },
-                  disabled,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Paperclip, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.attachFileTooltip })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Textarea,
               {
@@ -5168,6 +5152,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
                 onChange: (e) => {
                   onChange(e.target.value);
                   syncMentionState(e.target.value, e.target.selectionStart ?? e.target.value.length);
+                  requestAnimationFrame(resizeTextarea);
                 },
                 onSelect: (e) => {
                   const target = e.target;
@@ -5180,7 +5165,7 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
                 onKeyDown: handleKeyDown,
                 placeholder,
                 disabled,
-                className: "max-h-[120px] resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0",
+                className: "min-h-11 resize-none overflow-hidden rounded-2xl border-0 bg-transparent px-3 py-2.5 text-base leading-6 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 md:text-sm",
                 rows: 1
               }
             ),
@@ -5201,48 +5186,97 @@ var ChatInput = (0, import_react8.memo)(function ChatInput2({
               agent.id
             )) }) })
           ] }),
-          enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                size: "icon",
-                className: "h-10 w-10",
-                onClick: () => {
-                  void startVoiceCapture();
-                },
-                disabled: disabled || isGenerating,
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Mic, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.voiceEnter })
-          ] }),
-          isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                size: "icon",
-                className: "h-10 w-10",
-                onClick: onStopGeneration,
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Square, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-              Button,
-              {
-                type: "submit",
-                size: "icon",
-                className: "h-10 w-10",
-                disabled: disabled || !value.trim() && attachments.length === 0,
-                children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Send, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-h-10 items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
+              enableFileUpload && canAddMoreAttachments && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: true,
+                    accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
+                    onChange: handleFileSelect,
+                    className: "hidden"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-9 w-9 rounded-full text-muted-foreground hover:text-foreground",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        fileInputRef.current?.click();
+                      },
+                      disabled,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Paperclip, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.attachFileTooltip })
+                ] })
+              ] }),
+              showTargetAgentSelector && onTargetAgentChange && mentionAgents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                TargetAgentSelector,
+                {
+                  agents: mentionAgents,
+                  targetAgentId,
+                  onTargetChange: onTargetAgentChange,
+                  placeholder: targetAgentSelectorPlaceholder || "Select agent",
+                  disabled: disabled || isGenerating,
+                  compact: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+              enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-9 w-9 rounded-full text-muted-foreground hover:text-foreground",
+                    onClick: () => {
+                      void startVoiceCapture();
+                    },
+                    disabled: disabled || isGenerating,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Mic, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.voiceEnter })
+              ] }),
+              isGenerating ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "icon",
+                    className: "h-9 w-9 rounded-full",
+                    onClick: onStopGeneration,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Square, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  Button,
+                  {
+                    type: "submit",
+                    size: "icon",
+                    className: "h-9 w-9 rounded-full",
+                    disabled: disabled || !value.trim() && attachments.length === 0,
+                    children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Send, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+              ] })
+            ] })
           ] })
         ]
       }
@@ -6459,50 +6493,41 @@ var ChatUI = ({
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "bg-background pb-[env(safe-area-inset-bottom)]", children: [
-                isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-4 pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  TargetAgentSelector,
-                  {
-                    agents: participantIds && participantIds.length > 0 ? agentOptions.filter(
-                      (a) => participantIds.includes(a.id)
-                    ) : agentOptions,
-                    targetAgentId,
-                    onTargetChange: onTargetAgentChange,
-                    placeholder: config.agentSelector?.label || "Select agent",
-                    disabled: isGenerating
-                  }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  ChatInput,
-                  {
-                    value: inputValue,
-                    onChange: (value) => {
-                      setInputValue(value);
-                      if (initialInputApplied.current && !initialInputConsumedRef.current) {
-                        initialInputConsumedRef.current = true;
-                        onInitialInputConsumed?.();
-                      }
-                    },
-                    onSubmit: handleSendMessage,
-                    attachments,
-                    onAttachmentsChange: setAttachments,
-                    placeholder: config.labels.inputPlaceholder,
-                    disabled: false,
-                    isGenerating,
-                    onStopGeneration: callbacks.onStopGeneration,
-                    enableFileUpload: config.features.enableFileUpload,
-                    enableAudioRecording: config.features.enableAudioRecording,
-                    maxAttachments: config.features.maxAttachments,
-                    maxFileSize: config.features.maxFileSize,
-                    acceptedFileTypes: config.features.acceptedFileTypes,
-                    config,
-                    mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
-                      (a) => participantIds.includes(a.id)
-                    ) : agentOptions,
-                    onTargetAgentChange
-                  }
-                )
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "-mt-8 bg-gradient-to-t from-background via-background/95 to-transparent px-0 pb-[env(safe-area-inset-bottom)] pt-10", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                ChatInput,
+                {
+                  value: inputValue,
+                  onChange: (value) => {
+                    setInputValue(value);
+                    if (initialInputApplied.current && !initialInputConsumedRef.current) {
+                      initialInputConsumedRef.current = true;
+                      onInitialInputConsumed?.();
+                    }
+                  },
+                  onSubmit: handleSendMessage,
+                  attachments,
+                  onAttachmentsChange: setAttachments,
+                  placeholder: config.labels.inputPlaceholder,
+                  disabled: false,
+                  isGenerating,
+                  onStopGeneration: callbacks.onStopGeneration,
+                  enableFileUpload: config.features.enableFileUpload,
+                  enableAudioRecording: config.features.enableAudioRecording,
+                  maxAttachments: config.features.maxAttachments,
+                  maxFileSize: config.features.maxFileSize,
+                  acceptedFileTypes: config.features.acceptedFileTypes,
+                  config,
+                  mentionAgents: participantIds && participantIds.length > 0 ? agentOptions.filter(
+                    (a) => participantIds.includes(a.id)
+                  ) : agentOptions,
+                  targetAgentId,
+                  showTargetAgentSelector: Boolean(
+                    isMultiAgentMode && shouldShowAgentSelector && onTargetAgentChange
+                  ),
+                  targetAgentSelectorPlaceholder: config.agentSelector?.label || "Select agent",
+                  onTargetAgentChange
+                }
+              ) })
             ] }),
             config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",