@copilotz/chat-ui 0.9.5 → 0.9.7

package/dist/index.cjs

@@ -1273,25 +1273,45 @@ var Message = (0, import_react2.memo)(({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `relative overflow-hidden text-left ${messageIsUser ? "ml-auto inline-flex max-w-[85%] flex-col rounded-lg bg-primary p-3 text-primary-foreground" : "flex w-full max-w-full flex-col"}`, children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `relative overflow-hidden text-left ${messageIsUser ? isEditing ? "ml-auto flex w-full max-w-[min(42rem,85%)] flex-col rounded-xl border bg-background p-2 text-foreground shadow-sm" : "ml-auto inline-flex max-w-[85%] flex-col rounded-lg bg-primary p-3 text-primary-foreground" : "flex w-full max-w-full flex-col"}`, children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Textarea,
               {
                 value: editContent,
                 onChange: (e) => setEditContent(e.target.value),
-                className: "min-h-[100px] resize-none",
+                className: "min-h-28 resize-y bg-muted/30 text-sm leading-6",
                 autoFocus: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 justify-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Button, { variant: "outline", size: "sm", onClick: handleCancelEdit, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.X, { className: "h-4 w-4 mr-1" }),
-                "Cancelar"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Button, { size: "sm", onClick: handleEdit, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "h-4 w-4 mr-1" }),
-                "Salvar"
-              ] })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-end gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-8",
+                  onClick: handleCancelEdit,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.X, { className: "h-4 w-4 mr-1" }),
+                    labels?.cancel || "Cancel"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  className: "h-8",
+                  onClick: handleEdit,
+                  disabled: !editContent.trim() || editContent.trim() === message.content,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "h-4 w-4 mr-1" }),
+                    "Save"
+                  ]
+                }
+              )
             ] })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
             !messageIsUser && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1327,10 +1347,10 @@ var Message = (0, import_react2.memo)(({
             ) }),
             message.attachments && message.attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-3 space-y-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MediaRenderer, { attachment }, index)) })
           ] }) }),
-          !isEditing && (showActions || actionsFocused || copied) && (enableCopy || canEdit) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          !isEditing && (enableCopy || canEdit) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
             {
-              className: `mt-1 flex items-center gap-1 text-muted-foreground transition-opacity ${messageIsUser ? "justify-end" : "justify-start"}`,
+              className: `mt-1 flex h-7 items-center gap-1 text-muted-foreground transition-opacity duration-150 ${messageIsUser ? "justify-end" : "justify-start"} ${showActions || actionsFocused || copied ? "opacity-100" : "pointer-events-none opacity-0"}`,
               children: [
                 canEdit && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -2614,6 +2634,33 @@ var ThreadTagEditorBadge = ({
     }
   );
 };
+var ThreadTagOptionButton = ({
+  tag,
+  assigned,
+  onClick
+}) => {
+  const color = tagColor(tag);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      disabled: assigned,
+      className: "gap-1.5 border font-medium disabled:opacity-70",
+      style: {
+        backgroundColor: color.background,
+        borderColor: color.border,
+        color: color.accent
+      },
+      onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TagDot, { tag }),
+        tag.name
+      ]
+    }
+  );
+};
 var Sidebar2 = ({
   threads,
   currentThreadId,
@@ -3097,14 +3144,11 @@ var Sidebar2 = ({
                   (threadTag) => threadTag.id === tag.id
                 );
                 return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  Button,
+                  ThreadTagOptionButton,
                   {
-                    type: "button",
-                    variant: assigned ? "secondary" : "outline",
-                    size: "sm",
-                    disabled: assigned,
-                    onClick: () => addTagToThread(tagDialogThread, tag),
-                    children: tag.name
+                    tag,
+                    assigned,
+                    onClick: () => addTagToThread(tagDialogThread, tag)
                   },
                   tag.id
                 );
@@ -4542,6 +4586,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);
@@ -5012,7 +5068,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: `border-t bg-background/95 py-2 ${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,
       {
@@ -5076,46 +5132,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,
               {
@@ -5124,6 +5148,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;
@@ -5136,7 +5161,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
               }
             ),
@@ -5157,48 +5182,84 @@ 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.jsx)("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 })
+              ] })
+            ] }) }),
+            /* @__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 })
+              ] })
+            ] })
           ] })
         ]
       }