@copilotz/chat-ui 0.9.4 → 0.9.6

package/dist/index.cjs

@@ -1179,6 +1179,7 @@ var Message = (0, import_react2.memo)(({
   const [isEditing, setIsEditing] = (0, import_react2.useState)(false);
   const [editContent, setEditContent] = (0, import_react2.useState)(message.content);
   const [showActions, setShowActions] = (0, import_react2.useState)(false);
+  const [actionsFocused, setActionsFocused] = (0, import_react2.useState)(false);
   const [copied, setCopied] = (0, import_react2.useState)(false);
   const messageIsUser = isUser ?? message.role === "user";
   if (!hasRenderableAssistantBody(message)) {
@@ -1192,7 +1193,6 @@ var Message = (0, import_react2.memo)(({
     compactMode
   });
   const canEdit = enableEdit && messageIsUser;
-  const canRegenerate = enableRegenerate && !messageIsUser;
   const normalizedPreviewChars = Math.max(longMessagePreviewChars, 1);
   const normalizedChunkChars = Math.max(longMessageChunkChars, 1);
   const previewOverride = typeof message.metadata?.previewContent === "string" ? message.metadata.previewContent : void 0;
@@ -1226,9 +1226,6 @@ var Message = (0, import_react2.memo)(({
     setEditContent(message.content);
     setIsEditing(false);
   };
-  const handleRegenerate = () => {
-    onAction?.({ action: "regenerate", messageId: message.id });
-  };
   const handleToggleExpanded = () => {
     onToggleExpanded?.(message.id);
   };
@@ -1244,6 +1241,12 @@ var Message = (0, import_react2.memo)(({
       className: `flex w-full flex-col ${className} max-w-[800px] mx-auto`,
       onMouseEnter: () => setShowActions(true),
       onMouseLeave: () => setShowActions(false),
+      onFocusCapture: () => setActionsFocused(true),
+      onBlurCapture: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setActionsFocused(false);
+        }
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex gap-3 ${messageIsUser ? "flex-row-reverse" : "flex-row"} w-full mb-1`, children: [
           showAvatar && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex-shrink-0 ${compactMode ? "mt-1" : "mt-0"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1269,26 +1272,46 @@ var Message = (0, import_react2.memo)(({
             message.isEdited && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Badge, { variant: "outline", className: "text-xs", children: "editado" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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.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 ? 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)(
@@ -1323,49 +1346,44 @@ 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 || copied) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `absolute -top-2 flex gap-1 ${messageIsUser ? "-left-2" : "-right-2"}`, children: [
-            enableCopy && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "icon",
-                  className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-                  onClick: handleCopy,
-                  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Copy, { className: "h-3 w-3" })
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: copied ? "Copiado!" : "Copiar" })
-            ] }),
-            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)(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "icon",
-                  className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-                  onClick: handleEdit,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Edit, { className: "h-3 w-3" })
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: "Editar" })
-            ] }),
-            canRegenerate && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "icon",
-                  className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-                  onClick: handleRegenerate,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.RotateCcw, { className: "h-3 w-3" })
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: "Regenerar" })
-            ] })
-          ] })
-        ] }) })
+          ] }) }),
+          !isEditing && (enableCopy || canEdit) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            {
+              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)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-7 w-7",
+                      onClick: handleEdit,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Edit, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: labels?.editMessage || "Edit" })
+                ] }),
+                enableCopy && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-7 w-7",
+                      onClick: handleCopy,
+                      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Copy, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipContent, { children: copied ? "Copied" : labels?.copyMessage || "Copy" })
+                ] })
+              ]
+            }
+          )
+        ] })
       ]
     }
   );
@@ -2616,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,
@@ -3099,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
                 );