@copilotz/chat-ui 0.9.3 → 0.9.5

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,8 +1272,8 @@ 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 ? "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,
               {
@@ -1323,49 +1326,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 && (showActions || actionsFocused || copied) && (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"}`,
+              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" })
+                ] })
+              ]
+            }
+          )
+        ] })
       ]
     }
   );
@@ -2466,14 +2464,6 @@ var ThreadInitialsIcon = ({ title }) => {
   const initials = title?.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase() || "?";
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-[10px] font-medium text-muted-foreground", children: initials });
 };
-var TAG_COLOR_CLASSES = [
-  "bg-sky-500",
-  "bg-emerald-500",
-  "bg-violet-500",
-  "bg-amber-500",
-  "bg-rose-500",
-  "bg-cyan-500"
-];
 function slugTagName(name) {
   const slug = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 48);
   return slug || "tag";
@@ -2505,31 +2495,125 @@ function collectThreadTags(threads) {
   }
   return tags.sort((a, b) => a.name.localeCompare(b.name));
 }
-function tagColorIndex(tag) {
+function normalizeTagColorKey(tag) {
+  return (tag.name || tag.id || "tag").trim().toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
+}
+function hashTagColorKey(value) {
   let hash = 0;
-  for (const char of tag.id || tag.name) {
+  for (const char of value) {
     hash = hash * 31 + char.charCodeAt(0) >>> 0;
   }
-  return hash % TAG_COLOR_CLASSES.length;
+  return hash;
 }
-var TagDot = ({ tag }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  "span",
-  {
-    "aria-hidden": "true",
-    className: `h-2 w-2 shrink-0 rounded-full ${TAG_COLOR_CLASSES[tagColorIndex(tag)]}`
+function hslToRgb(hue, saturation, lightness) {
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  const x = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+  const match = lightness - chroma / 2;
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (hue < 60) {
+    red = chroma;
+    green = x;
+  } else if (hue < 120) {
+    red = x;
+    green = chroma;
+  } else if (hue < 180) {
+    green = chroma;
+    blue = x;
+  } else if (hue < 240) {
+    green = x;
+    blue = chroma;
+  } else if (hue < 300) {
+    red = x;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = x;
   }
-);
-var ThreadTagBadge = ({ tag }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-  Badge,
-  {
-    variant: "secondary",
-    className: "h-4 max-w-24 gap-1 rounded px-1.5 py-0 text-[10px] font-normal text-muted-foreground",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TagDot, { tag }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate", children: tag.name })
-    ]
+  return {
+    red: Math.round((red + match) * 255),
+    green: Math.round((green + match) * 255),
+    blue: Math.round((blue + match) * 255)
+  };
+}
+function tagColor(tag) {
+  if (tag.color) {
+    return {
+      accent: tag.color,
+      background: `color-mix(in srgb, ${tag.color} 12%, transparent)`,
+      border: `color-mix(in srgb, ${tag.color} 24%, transparent)`
+    };
   }
-);
+  const hue = hashTagColorKey(normalizeTagColorKey(tag)) % 360;
+  const { red, green, blue } = hslToRgb(hue, 0.68, 0.48);
+  return {
+    accent: `rgb(${red} ${green} ${blue})`,
+    background: `rgb(${red} ${green} ${blue} / 0.12)`,
+    border: `rgb(${red} ${green} ${blue} / 0.24)`
+  };
+}
+var TagDot = ({ tag }) => {
+  const color = tagColor(tag);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "h-2 w-2 shrink-0 rounded-full",
+      style: { backgroundColor: color.accent }
+    }
+  );
+};
+var ThreadTagBadge = ({ tag }) => {
+  const color = tagColor(tag);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    Badge,
+    {
+      variant: "secondary",
+      className: "h-4 max-w-24 gap-1 rounded border px-1.5 py-0 text-[10px] font-normal text-muted-foreground",
+      style: {
+        backgroundColor: color.background,
+        borderColor: color.border
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TagDot, { tag }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate", children: tag.name })
+      ]
+    }
+  );
+};
+var ThreadTagEditorBadge = ({
+  tag,
+  removeLabel,
+  onRemove
+}) => {
+  const color = tagColor(tag);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    Badge,
+    {
+      variant: "secondary",
+      className: "gap-1 rounded-md border py-1 text-sm font-normal",
+      style: {
+        backgroundColor: color.background,
+        borderColor: color.border
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TagDot, { tag }),
+        tag.name,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded-sm hover:bg-background/80",
+            onClick: onRemove,
+            "aria-label": removeLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
+          }
+        )
+      ]
+    }
+  );
+};
 var Sidebar2 = ({
   threads,
   currentThreadId,
@@ -2996,25 +3080,12 @@ var Sidebar2 = ({
           /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm font-medium", children: config.labels?.tags || "Tags" }),
-              (tagDialogThread.tags ?? []).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground", children: config.labels?.untagged || "Untagged" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-2", children: (tagDialogThread.tags ?? []).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                Badge,
+              (tagDialogThread.tags ?? []).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground", children: config.labels?.untagged || "Untagged" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-wrap gap-2", children: (tagDialogThread.tags ?? []).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                ThreadTagEditorBadge,
                 {
-                  variant: "secondary",
-                  className: "gap-1 rounded-md py-1 text-sm font-normal",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TagDot, { tag }),
-                    tag.name,
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "rounded-sm hover:bg-background/80",
-                        onClick: () => removeTagFromThread(tagDialogThread, tag.id),
-                        "aria-label": config.labels?.removeTag || "Remove tag",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.X, { className: "h-3 w-3" })
-                      }
-                    )
-                  ]
+                  tag,
+                  removeLabel: config.labels?.removeTag || "Remove tag",
+                  onRemove: () => removeTagFromThread(tagDialogThread, tag.id)
                 },
                 tag.id
               )) })