@copilotz/chat-ui 0.9.6 → 0.9.7

package/dist/index.js

@@ -4604,6 +4604,18 @@ var ChatInput = memo4(function ChatInput2({
     }).slice(0, 6);
   }, [activeMention, mentionAgents]);
   const isMentionMenuOpen = filteredMentionAgents.length > 0;
+  const resizeTextarea = useCallback3(() => {
+    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";
+  }, []);
+  useEffect9(() => {
+    resizeTextarea();
+  }, [resizeTextarea, value]);
   const syncMentionState = useCallback3((nextValue, nextCaret) => {
     const caret = typeof nextCaret === "number" ? nextCaret : textareaRef.current?.selectionStart ?? nextValue.length;
     const nextMatch = getActiveMentionMatch(nextValue, caret);
@@ -5074,7 +5086,7 @@ var ChatInput = memo4(function ChatInput2({
   };
   const canAddMoreAttachments = attachments.length < maxAttachments;
   const showVoiceComposer = enableAudioRecording && isVoiceComposerOpen;
-  return /* @__PURE__ */ jsx25(TooltipProvider, { children: /* @__PURE__ */ jsx25("div", { className: `border-t py-0 bg-transparent ${className}`, children: /* @__PURE__ */ jsxs15("div", { className: "px-0 md:p-2 pb-1 space-y-4 bg-transparent", children: [
+  return /* @__PURE__ */ jsx25(TooltipProvider, { children: /* @__PURE__ */ jsx25("div", { className: `border-t bg-background/95 py-2 ${className}`, children: /* @__PURE__ */ jsxs15("div", { className: "mx-auto w-full max-w-3xl space-y-3 px-3 md:px-2", children: [
     uploadProgress.size > 0 && /* @__PURE__ */ jsx25("div", { className: "space-y-2", children: Array.from(uploadProgress.entries()).map(([id, progress]) => /* @__PURE__ */ jsx25(
       FileUploadItem,
       {
@@ -5138,46 +5150,14 @@ var ChatInput = memo4(function ChatInput2({
           void closeVoiceComposer();
         }
       }
-    ) }) : /* @__PURE__ */ jsx25("form", { onSubmit: handleSubmit, className: "mb-1 flex justify-center", children: /* @__PURE__ */ jsxs15(
+    ) }) : /* @__PURE__ */ jsx25("form", { onSubmit: handleSubmit, className: "mb-1", children: /* @__PURE__ */ jsxs15(
       "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__ */ jsxs15(Fragment6, { children: [
-            /* @__PURE__ */ jsx25(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                multiple: true,
-                accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
-                onChange: handleFileSelect,
-                className: "hidden"
-              }
-            ),
-            /* @__PURE__ */ jsxs15(Tooltip, { children: [
-              /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
-                Button,
-                {
-                  type: "button",
-                  variant: "outline",
-                  size: "icon",
-                  className: "h-10 w-10",
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    fileInputRef.current?.click();
-                  },
-                  disabled,
-                  children: /* @__PURE__ */ jsx25(Paperclip, { className: "h-4 w-4" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.attachFileTooltip })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs15("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "relative min-w-0", children: [
             /* @__PURE__ */ jsx25(
               Textarea,
               {
@@ -5186,6 +5166,7 @@ var ChatInput = memo4(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;
@@ -5198,7 +5179,7 @@ var ChatInput = memo4(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
               }
             ),
@@ -5219,48 +5200,84 @@ var ChatInput = memo4(function ChatInput2({
               agent.id
             )) }) })
           ] }),
-          enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ jsxs15(Tooltip, { children: [
-            /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                size: "icon",
-                className: "h-10 w-10",
-                onClick: () => {
-                  void startVoiceCapture();
-                },
-                disabled: disabled || isGenerating,
-                children: /* @__PURE__ */ jsx25(Mic2, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.voiceEnter })
-          ] }),
-          isGenerating ? /* @__PURE__ */ jsxs15(Tooltip, { children: [
-            /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                size: "icon",
-                className: "h-10 w-10",
-                onClick: onStopGeneration,
-                children: /* @__PURE__ */ jsx25(Square2, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
-          ] }) : /* @__PURE__ */ jsxs15(Tooltip, { children: [
-            /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
-              Button,
-              {
-                type: "submit",
-                size: "icon",
-                className: "h-10 w-10",
-                disabled: disabled || !value.trim() && attachments.length === 0,
-                children: disabled ? /* @__PURE__ */ jsx25(Loader22, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx25(Send2, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+          /* @__PURE__ */ jsxs15("div", { className: "flex min-h-10 items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx25("div", { className: "flex min-w-0 items-center gap-1", children: enableFileUpload && canAddMoreAttachments && /* @__PURE__ */ jsxs15(Fragment6, { children: [
+              /* @__PURE__ */ jsx25(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  accept: acceptedFileTypes.length > 0 ? acceptedFileTypes.join(",") : void 0,
+                  onChange: handleFileSelect,
+                  className: "hidden"
+                }
+              ),
+              /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                  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__ */ jsx25(Paperclip, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.attachFileTooltip })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center gap-1", children: [
+              enableAudioRecording && canAddMoreAttachments && !value.trim() && /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                  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__ */ jsx25(Mic2, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.voiceEnter })
+              ] }),
+              isGenerating ? /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    size: "icon",
+                    className: "h-9 w-9 rounded-full",
+                    onClick: onStopGeneration,
+                    children: /* @__PURE__ */ jsx25(Square2, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.stopGenerationTooltip })
+              ] }) : /* @__PURE__ */ jsxs15(Tooltip, { children: [
+                /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(
+                  Button,
+                  {
+                    type: "submit",
+                    size: "icon",
+                    className: "h-9 w-9 rounded-full",
+                    disabled: disabled || !value.trim() && attachments.length === 0,
+                    children: disabled ? /* @__PURE__ */ jsx25(Loader22, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx25(Send2, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx25(TooltipContent, { children: config?.labels?.sendMessageTooltip })
+              ] })
+            ] })
           ] })
         ]
       }