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

package/components/chat-route/chat-box/right-side/chat-tag-selector.js

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Bookmark, X } from "lucide-react";
+import { Badge } from "../../../ui/badge.js";
+import { cn } from "../../../../lib/utils.js";
+import MultipleSelectSettingTags from "../../../custom/multiple-select-setting-tags.js";
+import CreatePersonalTagModal from "./create-personal-tag-modal.js";
+import { SettingTags } from "@zenify-omni/chat-js/constants/setting.js";
+import { updateTagChatRoomV2 } from "@zenify-omni/chat-js/api/chatroom.js";
+import { getProductTags } from "@zenify-omni/chat-js/api/tag.js";
+import { throwException } from "../../../../exceptions/throw-exception.js";
+import useChatStore from "../../../../store/chat-store.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { useTranslation } from "react-i18next";
+function ChatTagSelector({
+  chatRoomId,
+  selected = [],
+  personalSelected = [],
+  showSuggestions = false,
+  placeholder = "Nh\u1EADp tags",
+  disabled = false,
+  size
+}) {
+  const { t } = useTranslation();
+  const [createPersonalTagOpen, setCreatePersonalTagOpen] = useState(false);
+  const queryClient = useQueryClient();
+  const updateChatDetail = useChatStore((state) => state.updateChatDetail);
+  const updatePersonalTagInAllChats = useChatStore(
+    (state) => state.updatePersonalTagInAllChats
+  );
+  const removePersonalTagFromAllChats = useChatStore(
+    (state) => state.removePersonalTagFromAllChats
+  );
+  const selectedTags = useMemo(
+    () => [...selected, ...personalSelected],
+    [selected, personalSelected]
+  );
+  const { mutateAsync: handleUpdateTags } = useMutation({
+    mutationFn: updateTagChatRoomV2,
+    onError: throwException
+  });
+  const handleSelectTags = async (tags) => {
+    const personalTags = (tags || []).filter((tag) => tag.user_id);
+    const globalTags = (tags || []).filter((tag) => !tag.user_id);
+    const prevGlobal = new Set(selected.map((t2) => t2._id));
+    const nextGlobal = new Set(globalTags.map((t2) => t2._id));
+    const prevPersonal = new Set(personalSelected.map((t2) => t2._id));
+    const nextPersonal = new Set(personalTags.map((t2) => t2._id));
+    const globalAdd = globalTags.filter((t2) => !prevGlobal.has(t2._id)).map((t2) => t2._id);
+    const globalRemove = selected.filter((t2) => !nextGlobal.has(t2._id)).map((t2) => t2._id);
+    const personalAdd = personalTags.filter((t2) => !prevPersonal.has(t2._id)).map((t2) => t2._id);
+    const personalRemove = personalSelected.filter((t2) => !nextPersonal.has(t2._id)).map((t2) => t2._id);
+    const calls = [];
+    if (globalAdd.length || globalRemove.length) {
+      calls.push({ chatRoomId, data: { add: globalAdd, remove: globalRemove } });
+    }
+    if (personalAdd.length || personalRemove.length) {
+      calls.push({
+        chatRoomId,
+        data: {
+          is_personal_tag: true,
+          add: personalAdd,
+          remove: personalRemove
+        }
+      });
+    }
+    if (!calls.length) return;
+    try {
+      await Promise.all(calls.map((payload) => handleUpdateTags(payload)));
+      toast.success(
+        globalRemove.length || personalRemove.length ? t("chat:toast.unassignLabelSuccess", {
+          defaultValue: "B\u1ECF g\xE1n nh\xE3n th\xE0nh c\xF4ng"
+        }) : t("chat:toast.assignLabelSuccess", {
+          defaultValue: "G\xE1n nh\xE3n th\xE0nh c\xF4ng"
+        })
+      );
+      updateChatDetail(chatRoomId, {
+        tags: globalTags,
+        personal_tags: personalTags
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL, { chatRoomId }]
+      });
+    } catch {
+    }
+  };
+  const removeTag = (tag) => {
+    const newGlobalTags = selected.filter((t2) => t2._id !== tag._id);
+    const newPersonalTags = personalSelected.filter((t2) => t2._id !== tag._id);
+    handleSelectTags([...newGlobalTags, ...newPersonalTags]);
+  };
+  const { data: pinnedTagsData } = useQuery({
+    queryKey: ["pinned_chat_tags"],
+    queryFn: async () => {
+      const { data } = await getProductTags({
+        limit: 20,
+        offset: 0,
+        where: JSON.stringify({
+          type: SettingTags.Chat,
+          is_pined: true
+        })
+      });
+      const tags = data?.tags ?? [];
+      return tags.flatMap((group) => group.sub_tags ?? []);
+    },
+    enabled: showSuggestions
+  });
+  const pinnedTags = pinnedTagsData ?? [];
+  const toggleSuggestionTag = (tag) => {
+    const isSelected = selected.some((t2) => t2._id === tag._id);
+    const newGlobalTags = isSelected ? selected.filter((t2) => t2._id !== tag._id) : [...selected, tag];
+    handleSelectTags([...newGlobalTags, ...personalSelected]);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "my-1 space-y-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start font-medium", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "text-xs text-primary hover:underline",
+        onClick: () => setCreatePersonalTagOpen(true),
+        children: t("chat:action.createPersonalTag", {
+          defaultValue: "T\u1EA1o tag c\xE1 nh\xE2n"
+        })
+      }
+    ) }),
+    selectedTags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-1 flex flex-wrap gap-1.5", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: "chip",
+        className: "flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium",
+        style: {
+          backgroundColor: tag.color ? tag.color + Math.round(255 * 0.2).toString(16).padStart(2, "0") : "",
+          color: tag.color || "inherit"
+        },
+        children: [
+          tag.name,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => removeTag(tag),
+              className: "ml-0.5 inline-flex items-center justify-center rounded-full transition-colors hover:bg-warning",
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3", style: { color: "hsl(var(--warning))" } })
+            }
+          )
+        ]
+      },
+      tag._id
+    )) }),
+    /* @__PURE__ */ jsx(
+      MultipleSelectSettingTags,
+      {
+        target: SettingTags.Chat,
+        selected: [...selected, ...personalSelected],
+        onChange: handleSelectTags,
+        placeholder,
+        size,
+        disabled,
+        includePersonal: true,
+        hideSelectedBadges: true,
+        showTagIcon: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreatePersonalTagModal,
+      {
+        open: createPersonalTagOpen,
+        onClose: () => setCreatePersonalTagOpen(false),
+        onTagUpdated: (updatedTag) => {
+          updatePersonalTagInAllChats(updatedTag);
+          queryClient.setQueriesData(
+            { queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL, { chatRoomId }] },
+            (old) => old ? {
+              ...old,
+              personal_tags: (old.personal_tags ?? []).map(
+                (t2) => t2._id === updatedTag._id ? { ...t2, ...updatedTag } : t2
+              )
+            } : old
+          );
+        },
+        onTagDeleted: (deletedId) => {
+          removePersonalTagFromAllChats(deletedId);
+          queryClient.setQueriesData(
+            { queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL, { chatRoomId }] },
+            (old) => old ? {
+              ...old,
+              personal_tags: (old.personal_tags ?? []).filter(
+                (t2) => t2._id !== deletedId
+              )
+            } : old
+          );
+        }
+      }
+    ),
+    showSuggestions && pinnedTags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "mb-1 block text-xs text-muted-foreground", children: t("chat:label.suggested", { defaultValue: "\u0110\u1EC1 xu\u1EA5t" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: pinnedTags.map((tag) => {
+        const isActive = selected.some((t2) => t2._id === tag._id);
+        return /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "chip",
+            className: cn(
+              "cursor-pointer",
+              isActive && "ring-1 ring-primary"
+            ),
+            style: {
+              backgroundColor: tag.color ? tag.color + Math.round(255 * 0.2).toString(16).padStart(2, "0") : ""
+            },
+            onClick: () => toggleSuggestionTag(tag),
+            children: [
+              /* @__PURE__ */ jsx(
+                Bookmark,
+                {
+                  className: "mr-1 h-3 w-3",
+                  style: { fill: tag.color, stroke: tag.color }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { color: tag.color }, children: tag.name })
+            ]
+          },
+          tag._id
+        );
+      }) })
+    ] })
+  ] });
+}
+export {
+  ChatTagSelector as default
+};

package/components/chat-route/chat-box/right-side/create-personal-tag-modal.js

@@ -0,0 +1,458 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Bookmark, Check, Pencil, Search, Trash2, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose
+} from "../../../ui/dialog.js";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage
+} from "../../../ui/form.js";
+import { Input } from "../../../ui/input.js";
+import { Checkbox } from "../../../ui/checkbox.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../../ui/tooltip.js";
+import { Button } from "../../../custom/button.js";
+import PopupConfirm from "../../../custom/popup-confirm.js";
+import {
+  CustomColorPicker,
+  getRandomColor
+} from "../../../custom/color-picker.js";
+import {
+  createTagsSetting,
+  deletePersonalTag,
+  getTagsSetting,
+  updateTagSetting
+} from "@zenify-omni/chat-js/api/settings.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 { throwException } from "../../../../exceptions/throw-exception.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { UserRole } from "@zenify-omni/chat-js/constants/user.js";
+const PERSONAL_TAGS_QUERY_KEY = "personal_tags_list_chat";
+const formSchema = z.object({
+  name: z.string().refine((v) => v.trim() !== "", {
+    get message() {
+      return i18n.t("chat:label.labelNameCannotBeEmpty", {
+        defaultValue: "T\xEAn nh\xE3n kh\xF4ng \u0111\u01B0\u1EE3c b\u1ECF tr\u1ED1ng"
+      });
+    }
+  }),
+  color: z.string().optional(),
+  is_shared: z.boolean().optional()
+});
+const makeDefaultValues = () => ({
+  name: "",
+  color: getRandomColor(),
+  is_shared: false
+});
+const SCROLL_THRESHOLD = 5;
+function CreatePersonalTagModal({
+  open,
+  onClose,
+  onTagUpdated,
+  onTagDeleted
+}) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [search, setSearch] = useState("");
+  const [editingTag, setEditingTag] = useState(null);
+  const user = getUser();
+  const canShareTag = [UserRole.ADMINISTRATOR, UserRole.SUPERVISOR].includes(
+    user?.role
+  );
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: makeDefaultValues()
+  });
+  const { data: personalTagsData, isLoading: isLoadingTags } = useQuery({
+    queryKey: [PERSONAL_TAGS_QUERY_KEY],
+    queryFn: async () => {
+      const { data } = await getTagsSetting({
+        where: JSON.stringify({ type: SettingTags.Chat }),
+        is_personal: true
+      });
+      return (data?.tags ?? []).flatMap((group) => group.sub_tags ?? []);
+    },
+    enabled: open
+  });
+  const personalTags = personalTagsData ?? [];
+  const filteredTags = search.trim() ? personalTags.filter(
+    (tag) => tag.name.toLowerCase().includes(search.trim().toLowerCase())
+  ) : personalTags;
+  const { mutate, isPending } = useMutation({
+    mutationFn: (payload) => createTagsSetting(payload),
+    onSuccess: () => {
+      toast.success(
+        i18n.t("chat:toast.createPersonalTagSuccess", {
+          defaultValue: "T\u1EA1o nh\xE3n c\xE1 nh\xE2n th\xE0nh c\xF4ng"
+        })
+      );
+      queryClient.invalidateQueries({ queryKey: [PERSONAL_TAGS_QUERY_KEY] });
+      queryClient.invalidateQueries({
+        queryKey: [`select_${QUERY_KEY.GET_LIST_TAGS}_${SettingTags.Chat}`]
+      });
+      form.reset(makeDefaultValues());
+    },
+    onError: throwException
+  });
+  const { mutate: handleDelete } = useMutation({
+    mutationFn: deletePersonalTag,
+    onSuccess: (_, id) => {
+      toast.success(
+        i18n.t("chat:toast.deletePersonalTagSuccess", {
+          defaultValue: "X\xF3a nh\xE3n c\xE1 nh\xE2n th\xE0nh c\xF4ng"
+        })
+      );
+      queryClient.invalidateQueries({ queryKey: [PERSONAL_TAGS_QUERY_KEY] });
+      queryClient.invalidateQueries({
+        queryKey: [`select_${QUERY_KEY.GET_LIST_TAGS}_${SettingTags.Chat}`]
+      });
+      onTagDeleted?.(id);
+    },
+    onError: throwException
+  });
+  const { mutate: handleUpdate, isPending: isUpdating } = useMutation({
+    mutationFn: ({ id, payload }) => updateTagSetting(id, payload),
+    onSuccess: (_, { id, payload }) => {
+      toast.success(
+        i18n.t("chat:toast.updatePersonalTagSuccess", {
+          defaultValue: "C\u1EADp nh\u1EADt nh\xE3n c\xE1 nh\xE2n th\xE0nh c\xF4ng"
+        })
+      );
+      queryClient.invalidateQueries({ queryKey: [PERSONAL_TAGS_QUERY_KEY] });
+      queryClient.invalidateQueries({
+        queryKey: [`select_${QUERY_KEY.GET_LIST_TAGS}_${SettingTags.Chat}`]
+      });
+      onTagUpdated?.({ _id: id, ...payload });
+      setEditingTag(null);
+    },
+    onError: throwException
+  });
+  const startEdit = (tag) => {
+    setEditingTag({
+      id: tag._id,
+      name: tag.name,
+      color: tag.color,
+      is_shared: !!tag.is_shared
+    });
+  };
+  const cancelEdit = () => setEditingTag(null);
+  const shareTagDisabledReason = t("chat:message.shareTagRequiresRole", {
+    defaultValue: "Ch\u1EC9 Qu\u1EA3n tr\u1ECB vi\xEAn ho\u1EB7c Gi\xE1m s\xE1t vi\xEAn m\u1EDBi c\xF3 th\u1EC3 chia s\u1EBB nh\xE3n v\u1EDBi nh\xF3m"
+  });
+  const editDeleteDisabledReason = t(
+    "chat:message.editDeletePersonalTagRequiresRole",
+    {
+      defaultValue: "Ch\u1EC9 Qu\u1EA3n tr\u1ECB vi\xEAn ho\u1EB7c Gi\xE1m s\xE1t vi\xEAn m\u1EDBi c\xF3 th\u1EC3 s\u1EEDa ho\u1EB7c x\xF3a nh\xE3n \u0111\xE3 chia s\u1EBB"
+    }
+  );
+  const shareTagUpdateDisabledReason = t(
+    "chat:message.cannotShareUpdatedPersonalTag",
+    {
+      defaultValue: "Kh\xF4ng th\u1EC3 thay \u0111\u1ED5i tr\u1EA1ng th\xE1i chia s\u1EBB c\u1EE7a nh\xE3n sau khi \u0111\xE3 t\u1EA1o"
+    }
+  );
+  const buildUpdatePayload = ({ name, color }) => ({
+    name,
+    color,
+    is_personal: true
+  });
+  const saveEdit = () => {
+    const name = editingTag.name.trim();
+    if (!name) return;
+    handleUpdate({
+      id: editingTag.id,
+      payload: buildUpdatePayload({
+        name,
+        color: editingTag.color
+      })
+    });
+  };
+  const buildCreatePayload = (values) => ({
+    name: values.name.trim(),
+    type: SettingTags.Chat,
+    is_personal: true,
+    color: values.color,
+    is_shared: canShareTag ? values.is_shared : false
+  });
+  const handleSubmit = (values) => {
+    mutate(buildCreatePayload(values));
+  };
+  const handleOpenChange = (isOpen) => {
+    if (!isOpen) {
+      form.reset(makeDefaultValues());
+      setSearch("");
+      setEditingTag(null);
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-sm", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.createPersonalTag", {
+        defaultValue: "T\u1EA1o tag c\xE1 nh\xE2n"
+      }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("chat:message.useLabelsToDescribeSort", {
+        defaultValue: "S\u1EED d\u1EE5ng nh\xE3n \u0111\u1EC3 m\xF4 t\u1EA3 v\xE0 s\u1EAFp x\u1EBFp m\u1ECDi ng\u01B0\u1EDDi..."
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "color",
+            render: ({ field }) => /* @__PURE__ */ jsx(FormItem, { children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+              CustomColorPicker,
+              {
+                color: field.value,
+                setColor: field.onChange
+              }
+            ) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "name",
+            render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex-1", children: [
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: t("chat:placeholder.labelName", {
+                    defaultValue: "T\xEAn nh\xE3n..."
+                  }),
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "submit", isLoading: isPending, children: t("common:action.add", { defaultValue: "Th\xEAm" }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "is_shared",
+          render: ({ field }) => {
+            const checkboxEl = /* @__PURE__ */ jsxs(FormItem, { className: "mt-2 flex items-center gap-2 space-y-0", children: [
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: field.value,
+                  onCheckedChange: field.onChange,
+                  disabled: !canShareTag
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("chat:label.shareTagWithTeam", {
+                defaultValue: "Chia s\u1EBB nh\xE3n v\u1EDBi nh\xF3m"
+              }) })
+            ] });
+            if (canShareTag) return checkboxEl;
+            return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex cursor-not-allowed", children: checkboxEl }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: shareTagDisabledReason })
+            ] }) });
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: t("common:action.search", {
+            defaultValue: "T\xECm ki\u1EBFm"
+          }),
+          className: "pl-9",
+          value: search,
+          onChange: (e) => setSearch(e.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: filteredTags.length >= SCROLL_THRESHOLD ? "max-h-60 min-h-24 overflow-y-auto" : "min-h-24",
+        children: isLoadingTags ? /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: t("common:status.loading", { defaultValue: "\u0110ang t\u1EA3i..." }) }) : filteredTags.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: t("chat:empty.noLabelsFound", {
+          defaultValue: "Kh\xF4ng t\xECm th\u1EA5y nh\xE3n n\xE0o"
+        }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: filteredTags.map((tag) => {
+          const isEditing = editingTag?.id === tag._id;
+          const canEditDeleteTag = canShareTag || !tag.is_shared;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex items-center justify-between rounded-md px-2 py-1.5 hover:bg-muted",
+              children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      CustomColorPicker,
+                      {
+                        color: editingTag.color,
+                        setColor: (c) => setEditingTag((prev) => ({
+                          ...prev,
+                          color: c
+                        }))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        className: "h-7 flex-1 text-sm",
+                        value: editingTag.name,
+                        onChange: (e) => setEditingTag((prev) => ({
+                          ...prev,
+                          name: e.target.value
+                        })),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter") saveEdit();
+                          if (e.key === "Escape") cancelEdit();
+                        },
+                        autoFocus: true
+                      }
+                    )
+                  ] }),
+                  (() => {
+                    const labelEl = /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: editingTag.is_shared,
+                          disabled: true
+                        }
+                      ),
+                      t("chat:label.shareTagWithTeam", {
+                        defaultValue: "Chia s\u1EBB nh\xE3n v\u1EDBi nh\xF3m"
+                      })
+                    ] });
+                    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex cursor-not-allowed", children: labelEl }) }),
+                      /* @__PURE__ */ jsx(TooltipContent, { children: shareTagUpdateDisabledReason })
+                    ] }) });
+                  })()
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded p-1 text-success hover:bg-[--label-green] disabled:opacity-50",
+                      onClick: saveEdit,
+                      disabled: isUpdating,
+                      children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded p-1 text-destructive hover:bg-[--label-red]",
+                      onClick: cancelEdit,
+                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(
+                    Bookmark,
+                    {
+                      className: "h-3.5 w-3.5 flex-shrink-0",
+                      style: { fill: tag.color, stroke: tag.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-sm",
+                      style: { color: tag.color },
+                      children: tag.name
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-0.5", children: [
+                  canEditDeleteTag ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "p-0.5 text-muted-foreground hover:text-primary",
+                      onClick: () => startEdit(tag),
+                      children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
+                    }
+                  ) : /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "cursor-not-allowed p-0.5 text-muted-foreground opacity-50",
+                        disabled: true,
+                        children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(TooltipContent, { children: editDeleteDisabledReason })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(
+                    PopupConfirm,
+                    {
+                      trigger: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: canEditDeleteTag ? "p-0.5 text-muted-foreground hover:text-destructive" : "cursor-not-allowed p-0.5 text-muted-foreground opacity-50",
+                          disabled: !canEditDeleteTag,
+                          title: canEditDeleteTag ? void 0 : editDeleteDisabledReason,
+                          children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+                        }
+                      ),
+                      title: t("chat:action.deletePersonalTag", {
+                        defaultValue: "X\xF3a nh\xE3n c\xE1 nh\xE2n"
+                      }),
+                      description: t(
+                        "chat:dialog.confirmDeleteLabelNamed",
+                        {
+                          name: tag.name,
+                          defaultValue: 'B\u1EA1n c\xF3 ch\u1EAFc ch\u1EAFn mu\u1ED1n x\xF3a nh\xE3n "{name}" kh\xF4ng?'
+                        }
+                      ),
+                      onConfirm: () => handleDelete(tag._id)
+                    }
+                  )
+                ] })
+              ] })
+            },
+            tag._id
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", children: t("common:action.close", { defaultValue: "\u0110\xF3ng" }) }) }) })
+  ] }) });
+}
+export {
+  CreatePersonalTagModal as default
+};