@copilotz/chat-ui 0.9.4 → 0.9.5

package/dist/index.js

@@ -810,7 +810,6 @@ var MessageSenderAvatar = ({
 import {
   Copy,
   Edit,
-  RotateCcw,
   Check,
   X,
   Download,
@@ -1153,6 +1152,7 @@ var Message = memo2(({
   const [isEditing, setIsEditing] = useState2(false);
   const [editContent, setEditContent] = useState2(message.content);
   const [showActions, setShowActions] = useState2(false);
+  const [actionsFocused, setActionsFocused] = useState2(false);
   const [copied, setCopied] = useState2(false);
   const messageIsUser = isUser ?? message.role === "user";
   if (!hasRenderableAssistantBody(message)) {
@@ -1166,7 +1166,6 @@ var Message = memo2(({
     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;
@@ -1200,9 +1199,6 @@ var Message = memo2(({
     setEditContent(message.content);
     setIsEditing(false);
   };
-  const handleRegenerate = () => {
-    onAction?.({ action: "regenerate", messageId: message.id });
-  };
   const handleToggleExpanded = () => {
     onToggleExpanded?.(message.id);
   };
@@ -1218,6 +1214,12 @@ var Message = memo2(({
       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__ */ jsxs5("div", { className: `flex gap-3 ${messageIsUser ? "flex-row-reverse" : "flex-row"} w-full mb-1`, children: [
           showAvatar && /* @__PURE__ */ jsx9("div", { className: `flex-shrink-0 ${compactMode ? "mt-1" : "mt-0"}`, children: /* @__PURE__ */ jsx9(
@@ -1243,8 +1245,8 @@ var Message = memo2(({
             message.isEdited && /* @__PURE__ */ jsx9(Badge, { variant: "outline", className: "text-xs", children: "editado" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs5("div", { className: `flex-1 min-w-0 ${messageIsUser ? "text-right" : "text-left"} ${horizontalOffsetClass}`, children: [
+          /* @__PURE__ */ jsx9("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__ */ jsxs5("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx9(
               Textarea,
               {
@@ -1297,49 +1299,44 @@ var Message = memo2(({
               }
             ) }),
             message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx9("div", { className: "mt-3 space-y-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx9(MediaRenderer, { attachment }, index)) })
-          ] }),
-          !isEditing && (showActions || copied) && /* @__PURE__ */ jsxs5("div", { className: `absolute -top-2 flex gap-1 ${messageIsUser ? "-left-2" : "-right-2"}`, children: [
-            enableCopy && /* @__PURE__ */ jsxs5(Tooltip, { children: [
-              /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "icon",
-                  className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-                  onClick: handleCopy,
-                  children: copied ? /* @__PURE__ */ jsx9(Check, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ jsx9(Copy, { className: "h-3 w-3" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx9(TooltipContent, { children: copied ? "Copiado!" : "Copiar" })
-            ] }),
-            canEdit && /* @__PURE__ */ jsxs5(Tooltip, { children: [
-              /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "icon",
-                  className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-                  onClick: handleEdit,
-                  children: /* @__PURE__ */ jsx9(Edit, { className: "h-3 w-3" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx9(TooltipContent, { children: "Editar" })
-            ] }),
-            canRegenerate && /* @__PURE__ */ jsxs5(Tooltip, { children: [
-              /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
-                Button,
-                {
-                  variant: "secondary",
-                  size: "icon",
-                  className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
-                  onClick: handleRegenerate,
-                  children: /* @__PURE__ */ jsx9(RotateCcw, { className: "h-3 w-3" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx9(TooltipContent, { children: "Regenerar" })
-            ] })
-          ] })
-        ] }) })
+          ] }) }),
+          !isEditing && (showActions || actionsFocused || copied) && (enableCopy || canEdit) && /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: `mt-1 flex items-center gap-1 text-muted-foreground transition-opacity ${messageIsUser ? "justify-end" : "justify-start"}`,
+              children: [
+                canEdit && /* @__PURE__ */ jsxs5(Tooltip, { children: [
+                  /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-7 w-7",
+                      onClick: handleEdit,
+                      children: /* @__PURE__ */ jsx9(Edit, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx9(TooltipContent, { children: labels?.editMessage || "Edit" })
+                ] }),
+                enableCopy && /* @__PURE__ */ jsxs5(Tooltip, { children: [
+                  /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-7 w-7",
+                      onClick: handleCopy,
+                      children: copied ? /* @__PURE__ */ jsx9(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx9(Copy, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx9(TooltipContent, { children: copied ? "Copied" : labels?.copyMessage || "Copy" })
+                ] })
+              ]
+            }
+          )
+        ] })
       ]
     }
   );