@zenify-omni/chat-ui-react-js 0.1.0

package/components/chat-route/chat-list/assign-agent-dialog.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { AlertCircle, Check, Search } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../../ui/dialog.js";
+import { Button } from "../../custom/button.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { allUser as searchAllUser } from "@zenify-omni/chat-js/api/user.js";
+import { UserRole, UserRoleContext } from "@zenify-omni/chat-js/constants/user.js";
+import useDebounce from "../../../hooks/use-debounce.js";
+import { colorForName, nameInitials } from "@zenify-omni/chat-js/lib/user-avatar.js";
+import { cn } from "../../../lib/utils.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+const AGENT_LIST_QUERY_KEY = "assign-agent-dialog-list";
+const ASSIGNABLE_ROLES = [
+  UserRole.ADMINISTRATOR,
+  UserRole.SUPERVISOR,
+  UserRole.AGENT,
+  UserRole.SALE,
+  UserRole.SALE_TEAM_LEADER,
+  UserRole.TEAM_LEADER
+];
+function UserAvatar({ name = "", className }) {
+  const color = colorForName(name);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold",
+        color.bg,
+        color.text,
+        className
+      ),
+      children: nameInitials(name)
+    }
+  );
+}
+function AssignAgentDialog({
+  open,
+  onOpenChange,
+  isSubmitting = false,
+  onConfirm
+}) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  useEffect(() => {
+    if (!open) return;
+    setSearch("");
+    setSelectedAgent(null);
+  }, [open]);
+  const debouncedSearch = useDebounce(search, 500);
+  const keyword = debouncedSearch.trim();
+  const { data: agentList = [], isLoading } = useQuery({
+    queryKey: [AGENT_LIST_QUERY_KEY, keyword],
+    queryFn: async () => {
+      const params = {
+        roles: ASSIGNABLE_ROLES,
+        ...keyword.length > 0 ? { keyword } : {}
+      };
+      const response = await searchAllUser(params);
+      return response.data?.list?.map((u) => ({
+        value: u._id,
+        label: u.name,
+        role: u.role
+      })) ?? [];
+    },
+    enabled: open
+  });
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0 sm:max-w-[420px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "space-y-1 p-5 pb-3", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: t("common:placeholder.selectAssignee", {
+        defaultValue: "Ch\u1ECDn ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+      }) }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "text-xs", children: t("chat:dialog.quickAssignForConversations", {
+        defaultValue: "Chuy\u1EC3n nhanh ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch cho c\xE1c h\u1ED9i tho\u1EA1i \u0111\xE3 ch\u1ECDn"
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-5 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-warning/40 bg-[--label-orange] p-3 text-xs leading-5 text-[--label-orange-foreground]", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { size: 16, className: "mt-px shrink-0" }),
+      /* @__PURE__ */ jsx("p", { children: t("chat:message.zaloPersonalSkippedOnAssign", {
+        defaultValue: "H\u1ED9i tho\u1EA1i t\u1EEB t\xE0i kho\u1EA3n Zalo c\xE1 nh\xE2n s\u1EBD \u0111\u01B0\u1EE3c b\u1ECF qua. H\u1ED9i tho\u1EA1i t\u1EEB t\xE0i kho\u1EA3n Zalo t\u1ED5 ch\u1EE9c v\u1EABn h\u1ED7 tr\u1EE3 chuy\u1EC3n ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch."
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full bg-muted px-3 py-2", children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: t("chat:action.findAgent", {
+            defaultValue: "T\xECm chuy\xEAn vi\xEAn"
+          }),
+          className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "max-h-[300px] min-h-[200px] min-w-0 overflow-y-auto overflow-x-hidden px-3 py-2", children: [
+      isLoading && Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 py-2.5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-1/2" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/4" })
+        ] })
+      ] }, index)),
+      !isLoading && agentList.length === 0 && /* @__PURE__ */ jsx("p", { className: "py-10 text-center text-sm text-muted-foreground", children: t("common:empty.noResults", {
+        defaultValue: "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3"
+      }) }),
+      !isLoading && agentList.map((agent) => {
+        const isSelected = agent.value === selectedAgent?.value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setSelectedAgent(agent),
+            className: cn(
+              "flex w-full min-w-0 cursor-pointer items-center gap-3 rounded-lg px-2 py-2.5 text-left transition-colors",
+              isSelected ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-muted"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(UserAvatar, { name: maskData(agent.label) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: maskData(agent.label) }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: UserRoleContext[agent.role] || agent.role })
+              ] }),
+              isSelected && /* @__PURE__ */ jsx(Check, { size: 16, className: "shrink-0 text-primary" })
+            ]
+          },
+          agent.value
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3 border-t p-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-xs text-muted-foreground", children: selectedAgent ? /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: maskData(selectedAgent.label) }) : t("chat:message.selectAgentToContinue", {
+        defaultValue: "Ch\u1ECDn m\u1ED9t chuy\xEAn vi\xEAn \u0111\u1EC3 ti\u1EBFp t\u1EE5c"
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: () => onOpenChange?.(false),
+            children: t("common:action.cancel", { defaultValue: "H\u1EE7y" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            loading: isSubmitting,
+            disabled: !selectedAgent,
+            onClick: () => onConfirm?.(selectedAgent),
+            children: t("common:action.confirm", { defaultValue: "X\xE1c nh\u1EADn" })
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  AssignAgentDialog as default
+};

package/components/chat-route/chat-list/assign-tag-dialog.js

@@ -0,0 +1,242 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { LoaderCircle, Search, Tag, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../../ui/dialog.js";
+import { Button } from "../../custom/button.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { getProductTags } from "@zenify-omni/chat-js/api/tag.js";
+import { ChatRoomTagBatchAction } from "@zenify-omni/chat-js/constants/chat-room-tag.js";
+import { SettingTags } from "@zenify-omni/chat-js/constants/setting.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import useDebounce from "../../../hooks/use-debounce.js";
+import { cn } from "../../../lib/utils.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+const PAGE_SIZE = 20;
+const TAG_LIST_QUERY_KEY = `assign-tag-dialog_${QUERY_KEY.GET_LIST_TAGS}`;
+const withAlpha = (color, alpha) => color ? color + Math.round(255 * alpha).toString(16).padStart(2, "0") : void 0;
+function AssignTagDialog({
+  open,
+  onOpenChange,
+  isSubmitting = false,
+  action = ChatRoomTagBatchAction.Add,
+  onConfirm
+}) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search, 400);
+  const [selectedTags, setSelectedTags] = useState([]);
+  const isRemove = action === ChatRoomTagBatchAction.Remove;
+  const copy = isRemove ? {
+    title: t("chat:dialog.unassignTagTitle", {
+      defaultValue: "B\u1ECF g\xE1n tag"
+    }),
+    description: t("chat:dialog.quickUnassignTagForConversations", {
+      defaultValue: "G\u1EE1 nhanh tag kh\u1ECFi c\xE1c h\u1ED9i tho\u1EA1i \u0111\xE3 ch\u1ECDn"
+    }),
+    confirm: t("chat:action.unassignTagCount", {
+      count: selectedTags.length,
+      defaultValue: "B\u1ECF g\xE1n {count} tag"
+    })
+  } : {
+    title: t("chat:dialog.assignTagTitle", { defaultValue: "G\xE1n tag" }),
+    description: t("chat:dialog.quickAssignTagForConversations", {
+      defaultValue: "G\xE1n tag nhanh cho c\xE1c h\u1ED9i tho\u1EA1i \u0111\xE3 ch\u1ECDn"
+    }),
+    confirm: t("chat:action.assignTagCount", {
+      count: selectedTags.length,
+      defaultValue: "G\xE1n {count} tag"
+    })
+  };
+  useEffect(() => {
+    if (!open) return;
+    setSearch("");
+    setSelectedTags([]);
+  }, [open, action]);
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: [TAG_LIST_QUERY_KEY, { search: debouncedSearch.trim() }],
+    queryFn: async ({ pageParam = 1 }) => {
+      const params = {
+        limit: PAGE_SIZE,
+        offset: (pageParam - 1) * PAGE_SIZE,
+        where: JSON.stringify({ type: SettingTags.Chat }),
+        include_personal: true,
+        ...debouncedSearch.trim() ? { search: debouncedSearch.trim() } : {}
+      };
+      const { data: response } = await getProductTags(params);
+      const tags = response?.tags ?? [];
+      return {
+        data: tags,
+        page: pageParam,
+        hasMore: tags.length === PAGE_SIZE
+      };
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.page + 1 : void 0,
+    enabled: open
+  });
+  const tagGroups = data?.pages.flatMap((page) => page.data) ?? [];
+  const isEmpty = !isLoading && tagGroups.every((g) => !g.sub_tags?.length);
+  const isTagSelected = (tag) => selectedTags.some((x) => x._id === tag._id);
+  const toggleTag = (tag) => {
+    setSelectedTags(
+      (prev) => prev.some((x) => x._id === tag._id) ? prev.filter((x) => x._id !== tag._id) : [
+        ...prev,
+        {
+          _id: tag._id,
+          name: tag.name,
+          color: tag.color,
+          ...tag.user_id ? { user_id: tag.user_id } : {}
+        }
+      ]
+    );
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0 sm:max-w-[420px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "flex-row items-start gap-3 space-y-0 p-5 pb-3", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+            isRemove ? "bg-destructive/10 text-destructive" : "bg-primary/10 text-primary"
+          ),
+          children: /* @__PURE__ */ jsx(Tag, { size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: copy.title }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "text-xs", children: copy.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full bg-muted px-3 py-2", children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: t("common:placeholder.typeToSearch", {
+            defaultValue: "Nh\u1EADp \u0111\u1EC3 t\xECm ki\u1EBFm"
+          }),
+          className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+        }
+      )
+    ] }) }),
+    selectedTags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 px-5 pt-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: t("common:status.selected", { defaultValue: "\u0110\xE3 ch\u1ECDn" }) }),
+      selectedTags.map((tag) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs",
+          style: {
+            backgroundColor: withAlpha(tag.color, 0.2),
+            color: tag.color
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "max-w-[140px] truncate", children: maskData(tag.name) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleTag(tag),
+                className: "shrink-0 opacity-60 hover:opacity-100",
+                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              }
+            )
+          ]
+        },
+        tag._id
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "max-h-[300px] min-h-[200px] overflow-y-auto overflow-x-hidden px-3 py-2", children: [
+      isLoading && Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-2.5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 shrink-0 rounded-sm" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-1/2" })
+      ] }, index)),
+      isEmpty && /* @__PURE__ */ jsx("p", { className: "py-10 text-center text-sm text-muted-foreground", children: t("common:empty.noData", { defaultValue: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u" }) }),
+      !isLoading && tagGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: group.name }),
+        (group.sub_tags ?? []).map((tag) => {
+          const checked = isTagSelected(tag);
+          return (
+            // Bọc bằng label để bấm cả dòng là tick, tránh lồng button
+            // trong button (Checkbox của Radix vốn là một button).
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: cn(
+                  "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-lg px-2 py-2.5 text-left transition-colors",
+                  checked ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-muted"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked,
+                      onCheckedChange: () => toggleTag(tag),
+                      className: "shrink-0"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "h-2 w-2 shrink-0 rounded-full",
+                      style: { backgroundColor: tag.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm", children: tag.name })
+                ]
+              },
+              tag._id
+            )
+          );
+        })
+      ] }, group._id ?? group.name)),
+      hasNextPage && !isFetchingNextPage && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "link",
+          size: "sm",
+          className: "w-full",
+          onClick: () => fetchNextPage(),
+          children: t("common:action.loadMore", { defaultValue: "Xem th\xEAm" })
+        }
+      ),
+      isFetchingNextPage && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-3 border-t p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: () => onOpenChange?.(false),
+          children: t("common:action.cancel", { defaultValue: "H\u1EE7y" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: isRemove ? "destructive" : "default",
+          loading: isSubmitting,
+          disabled: selectedTags.length === 0,
+          onClick: () => onConfirm?.(selectedTags, action),
+          children: copy.confirm
+        }
+      )
+    ] }) })
+  ] }) });
+}
+export {
+  AssignTagDialog as default
+};

package/components/chat-route/chat-list/chat-item-tags.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import {
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent
+} from "../../ui/tooltip.js";
+import { useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { findUser } from "@zenify-omni/chat-js/api/user.js";
+const DEFAULT_TAG_COLOR = "#f97316";
+function ChatItemTags({ tags = [], _id, assignName }) {
+  const visibleTags = tags.slice(0, 3);
+  const remainingTagCount = tags.length - 3;
+  const { data: fetchedAgent } = useQuery({
+    queryKey: [QUERY_KEY.GET_CHAT_ASSIGN_AGENT, { assign_agent_id: _id }],
+    queryFn: async () => {
+      const { data } = await findUser({ _id });
+      return data || null;
+    },
+    enabled: !!_id && !assignName,
+    staleTime: 5 * 60 * 1e3
+  });
+  const displayName = fetchedAgent?.name ?? assignName;
+  if (tags.length === 0 && !displayName) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-end gap-1.5 px-1", children: [
+    visibleTags.map((tag, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        title: tag.name,
+        className: "block max-w-[80px] truncate rounded px-1.5 py-0.5 text-[10px] font-medium leading-tight",
+        style: {
+          // KHÔNG token hoá được: `${tag.color}4D` ghép alpha vào hex, nên
+          // giá trị dự phòng cũng buộc phải là hex 6 ký tự. `hsl(var(--x))`
+          // ghép chuỗi kiểu này sẽ ra CSS vô nghĩa.
+          backgroundColor: tag.color ? `${tag.color}4D` : `${DEFAULT_TAG_COLOR}4D`,
+          color: tag.color || DEFAULT_TAG_COLOR
+        },
+        children: tag.name
+      },
+      tag._id || i
+    )),
+    remainingTagCount > 0 && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "shrink-0 cursor-default rounded px-1.5 py-0.5 text-[10px] font-medium leading-tight text-muted-foreground",
+          style: { backgroundColor: "hsl(var(--border-subtle))" },
+          children: [
+            "+",
+            remainingTagCount
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: tags.slice(3).map((tag, i) => /* @__PURE__ */ jsx("span", { className: "text-xs", children: tag.name }, tag._id || i)) }) })
+    ] }) }),
+    displayName && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex shrink-0 items-center gap-1 text-[10px] text-muted-foreground",
+            visibleTags.length > 0 && "ml-auto"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M8.25 4.5C8.25 5.74264 7.24264 6.75 6 6.75C4.75736 6.75 3.75 5.74264 3.75 4.5C3.75 3.25736 4.75736 2.25 6 2.25C7.24264 2.25 8.25 3.25736 8.25 4.5Z",
+                      fill: "hsl(var(--muted-foreground))"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      clipRule: "evenodd",
+                      d: "M0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6ZM6 0.75C3.1005 0.75 0.75 3.1005 0.75 6C0.75 7.24007 1.17994 8.37972 1.8989 9.27802C2.4322 8.41893 3.60348 7.5 6 7.5C8.39653 7.5 9.56781 8.41894 10.1011 9.27803C10.8201 8.37972 11.25 7.24007 11.25 6C11.25 3.1005 8.8995 0.75 6 0.75Z",
+                      fill: "hsl(var(--muted-foreground))"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "max-w-[80px] truncate", children: displayName })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: displayName })
+    ] }) })
+  ] });
+}
+export {
+  ChatItemTags
+};