@copilotz/chat-ui 0.9.2 → 0.9.4

package/dist/index.cjs

@@ -2466,14 +2466,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 +2497,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 +3082,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
               )) })
@@ -6169,6 +6242,9 @@ var ChatUI = ({
     );
   }) });
   const isMultiAgentMode = config.agentSelector?.mode === "multi";
+  const customPanelWidth = config.customComponent?.panelWidth ?? 320;
+  const customPanelMinWidth = Math.min(customPanelWidth, 320);
+  const customPanelResponsiveWidth = `clamp(${customPanelMinWidth}px, 30vw, ${customPanelWidth}px)`;
   const messageProps = (0, import_react10.useMemo)(
     () => ({
       userAvatar: user?.avatar,
@@ -6249,7 +6325,7 @@ var ChatUI = ({
             userMenuAdditionalItems
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SidebarInset, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col h-full min-h-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SidebarInset, { className: "min-w-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col h-full min-h-0 min-w-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             ChatHeader,
             {
@@ -6268,8 +6344,8 @@ var ChatUI = ({
               onParticipantsChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-1 flex-row min-h-0 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex-1 flex flex-col min-h-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-1 flex-row min-h-0 min-w-0 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex-1 flex flex-col min-h-0 min-w-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 ScrollArea,
                 {
@@ -6389,17 +6465,14 @@ var ChatUI = ({
             config?.customComponent?.component && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "div",
               {
-                className: "h-full transition-all duration-300 ease-in-out overflow-hidden",
+                className: "h-full shrink-0 transition-all duration-300 ease-in-out overflow-hidden",
                 style: {
-                  width: state.showSidebar ? config.customComponent.panelWidth ?? 320 : 0
+                  width: state.showSidebar ? customPanelResponsiveWidth : 0
                 },
                 children: state.showSidebar && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   "div",
                   {
                     className: "h-full overflow-hidden border-l bg-background animate-in slide-in-from-right-4 duration-300",
-                    style: {
-                      width: config.customComponent.panelWidth ?? 320
-                    },
                     children: renderCustomComponent()
                   }
                 )