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

package/components/chat-route/chat-list/util.js

@@ -0,0 +1,604 @@
+import { differenceInCalendarDays, format, isBefore } from "date-fns";
+import { z } from "zod";
+import {
+  ChatFilterAssignStatus,
+  ChatFilterReadStatus,
+  ChatSortValue
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import { CrmType } from "@zenify-omni/chat-js/constants/user.js";
+import {
+  isAdmin,
+  isRoleTeamLeader,
+  isRoleTeamLeaderSale,
+  isSupervisor
+} from "@zenify-omni/chat-js/utils/auth.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { tenantInstantFromWallClock } from "@zenify-omni/chat-js/utils/date.js";
+const CHAT_SEARCH_DEBOUNCE_MS = 1500;
+const DateFilterType = {
+  LastMsgTime: "last_msg_time",
+  CreatedAt: "created_at",
+  MessageTime: "message_time"
+};
+const DATE_FILTER_TYPE_OPTIONS = [
+  {
+    value: DateFilterType.LastMsgTime,
+    get label() {
+      return i18n.t("chat:label.thoiGianTinNhanCuoi", {
+        defaultValue: "Th\u1EDDi gian tin nh\u1EAFn cu\u1ED1i"
+      });
+    }
+  },
+  {
+    value: DateFilterType.CreatedAt,
+    get label() {
+      return i18n.t("common:label.initTime", {
+        defaultValue: "Th\u1EDDi gian kh\u1EDFi t\u1EA1o"
+      });
+    }
+  },
+  {
+    value: DateFilterType.MessageTime,
+    get label() {
+      return i18n.t("chat:label.thoiGianPhatSinhTin", {
+        defaultValue: "Th\u1EDDi gian ph\xE1t sinh tin nh\u1EAFn"
+      });
+    }
+  }
+];
+const MAX_DATE_RANGE_DAYS = 90;
+const TagMatchMode = {
+  Includes: "includes",
+  Equals: "equals"
+};
+const TAG_MATCH_MODE_OPTIONS = [
+  {
+    value: TagMatchMode.Includes,
+    get label() {
+      return i18n.t("chat:option.tagMatchIncludes", {
+        defaultValue: "C\xF3 ch\u1EE9a"
+      });
+    }
+  },
+  {
+    value: TagMatchMode.Equals,
+    get label() {
+      return i18n.t("chat:option.tagMatchEquals", {
+        defaultValue: "B\u1EB1ng"
+      });
+    }
+  }
+];
+const DEFAULT_FILTER_STATE = {
+  keyword: "",
+  read_statuses: [],
+  sources: ["all"],
+  page_ids: [],
+  agents_in_room: [],
+  assigned: null,
+  phone_status: "all",
+  is_sla_violated: "",
+  has_fb_ads: "all",
+  ad_id: "",
+  post_ids: [],
+  date_filter_type: DateFilterType.LastMsgTime,
+  range_date: { from: null, to: null },
+  tags: [],
+  tag_match_mode: TagMatchMode.Includes,
+  personal_tags: [],
+  has_chatbot: "all",
+  is_unanswered: "all",
+  is_group: "all",
+  is_unhandled: "",
+  group_ids: [],
+  crm_type: "",
+  // Không có UI chỉnh trực tiếp — chỉ được set khi mở /chat từ 1 dialog drilldown
+  // của báo cáo hiệu suất chat, giới hạn danh sách đúng các phòng báo cáo đã khớp.
+  room_ids: []
+};
+const getVisibilityToOptions = () => {
+  if (isAdmin() || isSupervisor()) {
+    return [
+      {
+        value: "all_agents",
+        label: i18n.t("common:filter.allAgents", {
+          defaultValue: "T\u1EA5t c\u1EA3 chuy\xEAn vi\xEAn"
+        })
+      },
+      {
+        value: "department_agents",
+        label: i18n.t("common:filter.allAgentsInDepartment", {
+          defaultValue: "T\u1EA5t c\u1EA3 chuy\xEAn vi\xEAn thu\u1ED9c b\u1ED9 ph\u1EADn"
+        })
+      },
+      {
+        value: "selected_agents",
+        label: i18n.t("common:filter.onlyAgents", {
+          defaultValue: "Ch\u1EC9 c\xE1c chuy\xEAn vi\xEAn"
+        })
+      },
+      {
+        value: "only_me",
+        label: i18n.t("common:filter.onlyMe", {
+          defaultValue: "Ch\u1EC9 m\xECnh t\xF4i"
+        })
+      }
+    ];
+  }
+  if (isRoleTeamLeader() || isRoleTeamLeaderSale()) {
+    return [
+      {
+        value: "department_agents",
+        label: i18n.t("common:filter.allAgentsInDepartment", {
+          defaultValue: "T\u1EA5t c\u1EA3 chuy\xEAn vi\xEAn thu\u1ED9c b\u1ED9 ph\u1EADn"
+        })
+      },
+      {
+        value: "selected_agents",
+        label: i18n.t("common:filter.onlyAgents", {
+          defaultValue: "Ch\u1EC9 c\xE1c chuy\xEAn vi\xEAn"
+        })
+      },
+      {
+        value: "only_me",
+        label: i18n.t("common:filter.onlyMe", {
+          defaultValue: "Ch\u1EC9 m\xECnh t\xF4i"
+        })
+      }
+    ];
+  }
+  return [
+    {
+      value: "only_me",
+      label: i18n.t("common:filter.onlyMe", {
+        defaultValue: "Ch\u1EC9 m\xECnh t\xF4i"
+      })
+    }
+  ];
+};
+const baseFilterSchema = z.object({
+  read_statuses: z.array(z.any()),
+  sources: z.array(z.string()),
+  page_ids: z.array(z.any()),
+  agents_in_room: z.array(z.any()),
+  phone_status: z.string(),
+  is_sla_violated: z.string(),
+  has_fb_ads: z.union([z.boolean(), z.literal("post"), z.literal("all")]),
+  tags: z.array(z.any()),
+  tag_match_mode: z.enum(["includes", "equals"]).optional(),
+  personal_tags: z.array(z.any()),
+  ad_id: z.string().optional(),
+  post_ids: z.array(z.any()).optional(),
+  assigned: z.any().optional(),
+  date_filter_type: z.string().optional(),
+  range_date: z.object({
+    from: z.date().nullable(),
+    to: z.date().nullable()
+  }),
+  has_chatbot: z.string().optional(),
+  is_unanswered: z.string().optional(),
+  is_group: z.string().optional(),
+  is_unhandled: z.string().optional(),
+  group_ids: z.array(z.any()).optional(),
+  crm_type: z.string().optional()
+});
+const validateRangeDate = (data, ctx) => {
+  const { from, to } = data.range_date;
+  if (data.date_filter_type === DateFilterType.MessageTime && (!from || !to)) {
+    ctx.addIssue({
+      path: ["range_date", "from"],
+      message: i18n.t("chat:label.vuiLongChonKhoangThoi", {
+        defaultValue: "Vui l\xF2ng ch\u1ECDn kho\u1EA3ng th\u1EDDi gian ph\xE1t sinh tin nh\u1EAFn"
+      })
+    });
+    return;
+  }
+  if (!from || !to) return;
+  if (format(from, "yyyy-MM-dd HH:mm") !== format(to, "yyyy-MM-dd HH:mm") && !isBefore(from, to)) {
+    ctx.addIssue({
+      path: ["range_date", "from"],
+      message: i18n.t("chat:message.startTimeBeforeEndTime", {
+        defaultValue: "Th\u1EDDi gian b\u1EAFt \u0111\u1EA7u ph\u1EA3i nh\u1ECF h\u01A1n th\u1EDDi gian k\u1EBFt th\xFAc"
+      })
+    });
+    return;
+  }
+  if (differenceInCalendarDays(to, from) > MAX_DATE_RANGE_DAYS) {
+    ctx.addIssue({
+      path: ["range_date", "from"],
+      message: i18n.t("chat:message.maxDateRangeDays", {
+        MAX_DATE_RANGE_DAYS,
+        defaultValue: "Kho\u1EA3ng th\u1EDDi gian t\u1ED1i \u0111a l\xE0 {MAX_DATE_RANGE_DAYS} ng\xE0y"
+      })
+    });
+  }
+};
+const HAS_FB_ADS_OPTIONS = [
+  {
+    value: "all",
+    get label() {
+      return i18n.t("common:filter.all", {
+        defaultValue: "T\u1EA5t c\u1EA3"
+      });
+    }
+  },
+  { value: false, label: "Inbox" },
+  { value: true, label: "Ads" },
+  {
+    value: "post",
+    get label() {
+      return i18n.t("chat:filter.post", {
+        defaultValue: "Post"
+      });
+    }
+  }
+];
+const PHONE_STATUS_OPTIONS = [
+  {
+    value: "all",
+    get label() {
+      return i18n.t("common:filter.all", {
+        defaultValue: "T\u1EA5t c\u1EA3"
+      });
+    }
+  },
+  {
+    value: "has_phone",
+    get label() {
+      return i18n.t("chat:label.hasPhoneNumber2", {
+        defaultValue: "C\xF3 s\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+      });
+    }
+  },
+  {
+    value: "no_phone",
+    get label() {
+      return i18n.t("chat:label.noPhoneNumber2", {
+        defaultValue: "Kh\xF4ng c\xF3 s\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+      });
+    }
+  }
+];
+const HAS_CHATBOT_OPTIONS = [
+  {
+    value: "true",
+    get label() {
+      return i18n.t("common:action.yes", {
+        defaultValue: "C\xF3"
+      });
+    }
+  },
+  {
+    value: "false",
+    get label() {
+      return i18n.t("common:action.no", {
+        defaultValue: "Kh\xF4ng"
+      });
+    }
+  }
+];
+const IS_GROUP_OPTIONS = [
+  {
+    value: "true",
+    get label() {
+      return i18n.t("common:action.yes", {
+        defaultValue: "C\xF3"
+      });
+    }
+  },
+  {
+    value: "false",
+    get label() {
+      return i18n.t("common:action.no", {
+        defaultValue: "Kh\xF4ng"
+      });
+    }
+  }
+];
+const CRM_TYPE_OPTIONS = [
+  {
+    value: CrmType.Lead,
+    get label() {
+      return i18n.t("common:label.potential", {
+        defaultValue: "Ti\u1EC1m n\u0103ng"
+      });
+    }
+  },
+  {
+    value: CrmType.Contact,
+    get label() {
+      return i18n.t("common:label.customer", {
+        defaultValue: "Kh\xE1ch h\xE0ng"
+      });
+    }
+  }
+];
+const IS_UNHANDLED_OPTIONS = [
+  {
+    value: "true",
+    get label() {
+      return i18n.t("chat:empty.noInteraction", {
+        defaultValue: "Kh\xF4ng c\xF3 t\u01B0\u01A1ng t\xE1c"
+      });
+    }
+  },
+  {
+    value: "false",
+    get label() {
+      return i18n.t("chat:label.interacting", {
+        defaultValue: "\u0110ang t\u01B0\u01A1ng t\xE1c"
+      });
+    }
+  }
+];
+const toArray = (value) => Array.isArray(value) ? value : typeof value === "string" && value.length > 0 ? value.split(",") : [];
+const filterToFormValues = (filter, socialPageList = []) => {
+  const mappedPageIds = toArray(filter.source_id).map((pageId) => {
+    const found = socialPageList.find((option) => option.page_id === pageId);
+    if (!found) return null;
+    return {
+      label: found.page_name,
+      value: pageId,
+      source: found.source
+    };
+  }).filter(Boolean);
+  const mappedPostIds = Array.isArray(filter.post_ids) ? filter.post_ids.map((post) => ({
+    label: post.message || post.id,
+    value: post.id
+  })) : [];
+  const mappedAgents = Array.isArray(filter.agents_in_room) ? filter.agents_in_room.map((option) => ({
+    value: option._id,
+    label: option.name
+  })) : [];
+  const mappedTags = Array.isArray(filter.tags) ? filter.tags.map((tag) => ({
+    _id: tag._id,
+    name: tag.name,
+    color: tag.color
+  })) : [];
+  const mappedPersonalTags = Array.isArray(filter.personal_tags) ? filter.personal_tags.map((tag) => ({
+    _id: tag._id,
+    name: tag.name,
+    color: tag.color,
+    user_id: tag.user_id
+  })) : [];
+  const assigned = filter.assigned ? { value: filter.assigned._id, label: filter.assigned.name } : null;
+  let readStatuses = [];
+  if (filter.unread === true) {
+    readStatuses = [
+      {
+        value: "unseen",
+        label: i18n.t("common:status.unseen", {
+          defaultValue: "Ch\u01B0a xem"
+        })
+      }
+    ];
+  } else if (filter.unread === false) {
+    readStatuses = [
+      {
+        value: "seen",
+        label: i18n.t("common:status.seen", {
+          defaultValue: "\u0110\xE3 xem"
+        })
+      }
+    ];
+  }
+  let phoneStatus = "all";
+  if (filter.has_phone === true) phoneStatus = "has_phone";
+  else if (filter.has_phone === false) phoneStatus = "no_phone";
+  let isSlaViolated = "";
+  if (filter.is_sla_violated === true) isSlaViolated = "true";
+  else if (filter.is_sla_violated === false) isSlaViolated = "false";
+  let hasChatbot = "all";
+  if (filter.has_chatbot === true) hasChatbot = "true";
+  else if (filter.has_chatbot === false) hasChatbot = "false";
+  let isGroup = "all";
+  if (filter.is_group === true) isGroup = "true";
+  else if (filter.is_group === false) isGroup = "false";
+  let isUnhandled = "";
+  if (filter.is_unhandled === true) isUnhandled = "true";
+  else if (filter.is_unhandled === false) isUnhandled = "false";
+  return {
+    read_statuses: readStatuses,
+    sources: toArray(filter.source).length > 0 ? toArray(filter.source) : ["all"],
+    page_ids: mappedPageIds,
+    agents_in_room: mappedAgents,
+    assigned,
+    phone_status: phoneStatus,
+    is_sla_violated: isSlaViolated,
+    has_fb_ads: filter.has_fb_ads ?? "all",
+    // Personal tags dùng chung ô "Tags" với tag thường (phân biệt bằng user_id),
+    // nên gộp vào `tags` để selector hiển thị đúng. `personal_tags` để rỗng,
+    // tránh buildFilterConditions cộng lại tag đã bị user bỏ chọn.
+    tags: [...mappedTags, ...mappedPersonalTags],
+    tag_match_mode: filter.filter_operation?.tag_ids === TagMatchMode.Equals ? TagMatchMode.Equals : TagMatchMode.Includes,
+    personal_tags: [],
+    ad_id: filter.ad_id || "",
+    post_ids: mappedPostIds,
+    date_filter_type: filter.date_filter_type || DateFilterType.LastMsgTime,
+    // Fallback đọc last_msg_time_from/to: bộ lọc đã lưu trước khi có
+    // date_filter_type/start_date/end_date vẫn cần hiển thị lại đúng khoảng ngày.
+    range_date: {
+      from: filter.start_date ? new Date(filter.start_date) : filter.last_msg_time_from ? new Date(filter.last_msg_time_from) : null,
+      to: filter.end_date ? new Date(filter.end_date) : filter.last_msg_time_to ? new Date(filter.last_msg_time_to) : null
+    },
+    has_chatbot: hasChatbot,
+    is_unanswered: filter.is_unanswered != null ? String(filter.is_unanswered) : "all",
+    is_group: isGroup,
+    is_unhandled: isUnhandled,
+    group_ids: toArray(filter.group_ids).map(String),
+    crm_type: filter.crm_type || ""
+  };
+};
+const buildFilterConditions = (values) => {
+  const filter = {};
+  if (values.read_statuses?.length > 0 && values.read_statuses?.length < 2) {
+    filter.unread = values.read_statuses.some(
+      (x) => x.value === ChatFilterReadStatus.Unread
+    );
+  }
+  if (!values.sources?.includes("all")) {
+    filter.source = values.sources?.join(",");
+  }
+  if (values.page_ids?.length > 0) {
+    filter.source_id = values.page_ids.map((option) => option.value)?.join(",");
+  }
+  if (values.ad_id && values.ad_id.trim().length > 0 && values.sources?.includes("facebook") && !values.sources?.includes("all")) {
+    filter.ad_id = values.ad_id.trim();
+  }
+  if (values.agents_in_room?.length > 0) {
+    filter.agent_ids_in_room = values.agents_in_room.map((agent) => agent.value)?.join(",");
+  }
+  if (values.range_date?.from || values.range_date?.to) {
+    const fromDate = values.range_date.from ? new Date(values.range_date.from) : null;
+    const toDate = values.range_date.to ? new Date(values.range_date.to) : null;
+    if (fromDate && toDate && format(fromDate, "yyyy-MM-dd HH:mm") === format(toDate, "yyyy-MM-dd HH:mm")) {
+      fromDate.setSeconds(0, 0);
+      toDate.setSeconds(59, 999);
+    }
+    filter.date_filter_type = values.date_filter_type || DateFilterType.LastMsgTime;
+    if (fromDate)
+      filter.start_date = tenantInstantFromWallClock(fromDate).toISOString();
+    if (toDate)
+      filter.end_date = tenantInstantFromWallClock(toDate).toISOString();
+  }
+  if (values.tags?.length > 0) {
+    const personal_tags = (values.tags || []).filter((tag) => tag?.user_id);
+    const normal_tags = (values.tags || []).filter((tag) => !tag?.user_id);
+    if (personal_tags.length > 0) {
+      filter.personal_tag_ids = personal_tags.map((tag) => tag._id).join(",");
+    }
+    if (normal_tags.length > 0) {
+      filter.tag_ids = normal_tags.map((tag) => tag._id).join(",");
+    }
+    if (values.tag_match_mode === TagMatchMode.Equals) {
+      filter.filter_operation = { tag_ids: TagMatchMode.Equals };
+    }
+  }
+  if (values.personal_tags?.length > 0) {
+    const fromSavedFilter = values.personal_tags.map((tag) => String(tag._id));
+    const alreadyIncluded = new Set(
+      filter.personal_tag_ids ? filter.personal_tag_ids.split(",") : []
+    );
+    const merged = [
+      ...Array.from(alreadyIncluded),
+      ...fromSavedFilter.filter((id) => !alreadyIncluded.has(id))
+    ];
+    if (merged.length > 0) filter.personal_tag_ids = merged.join(",");
+  }
+  if (values.assign_status === ChatFilterAssignStatus.Closed) {
+    filter.state = "closed";
+  } else if (values.assign_status) {
+    filter.is_received = values.assign_status === ChatFilterAssignStatus.Received;
+  }
+  if (values.phone_status === "has_phone") {
+    filter.has_phone = true;
+  } else if (values.phone_status === "no_phone") {
+    filter.has_phone = false;
+  }
+  if (values.is_sla_violated === "true") {
+    filter.is_sla_violated = true;
+  } else if (values.is_sla_violated === "false") {
+    filter.is_sla_violated = false;
+  }
+  if (values.assigned != null) {
+    filter.assigned_id = values.assigned.value;
+  }
+  if (values.has_fb_ads !== void 0 && values.has_fb_ads !== "all") {
+    filter.has_fb_ads = values.has_fb_ads;
+  }
+  if (values.has_fb_ads === "post" && values.post_ids?.length > 0) {
+    filter.post_ids = values.post_ids.map((post) => ({
+      id: post.value,
+      message: post.label
+    }));
+  }
+  if (values.has_chatbot && values.has_chatbot !== "all") {
+    filter.has_chatbot = values.has_chatbot === "true";
+  }
+  if (values.is_unanswered && values.is_unanswered !== "all") {
+    filter.is_unanswered = values.is_unanswered === "true";
+  }
+  if (values.is_group && values.is_group !== "all") {
+    filter.is_group = values.is_group === "true";
+  }
+  if (values.is_unhandled === "true") {
+    filter.is_unhandled = true;
+  } else if (values.is_unhandled === "false") {
+    filter.is_unhandled = false;
+  }
+  if (values.group_ids?.length > 0) {
+    filter.group_ids = values.group_ids.join(",");
+  }
+  if (values.crm_type) {
+    filter.crm_type = values.crm_type;
+  }
+  if (values.room_ids?.length > 0) {
+    filter.room_ids = values.room_ids.join(",");
+  }
+  return filter;
+};
+const buildQueryParams = (filterState) => {
+  const selectedSort = filterState.sort;
+  const isUnansweredFirst = selectedSort === ChatSortValue.UnansweredFirst;
+  const params = {
+    type: "cursor",
+    // "Chưa trả lời lên đầu" không phải một trường sort của BE mà là cờ
+    // sort_unanswered_first, sort vẫn đi theo tin nhắn cuối như mặc định.
+    sort: isUnansweredFirst ? ChatSortValue.LastMessageDesc : selectedSort,
+    ...buildFilterConditions(filterState)
+  };
+  if (params.filter_operation) {
+    params.filter_operation = JSON.stringify(params.filter_operation);
+  }
+  params.sort_unanswered_first = isUnansweredFirst;
+  if (filterState.keyword?.length > 0) {
+    params.search = filterState.keyword;
+  }
+  if (filterState.cursor) {
+    params.cursor = filterState.cursor;
+  }
+  return params;
+};
+const parseMentions = (text) => {
+  const regex = /@\[([^\]]+)\]\(([^)]+)\)/g;
+  let ids = [];
+  let mentionsDisplay = [];
+  const contentFormat = text.replace(regex, (match, display, id) => {
+    const cleanId = id.startsWith("@") ? id.slice(1) : id;
+    ids.push(`@${cleanId}`);
+    mentionsDisplay.push(`@${display}`);
+    return `@${cleanId}`;
+  });
+  const contentFormatOriginal = text.replace(regex, (match, display) => {
+    return `@${display}`;
+  });
+  const res = {
+    contentFormat,
+    contentFormatOriginal,
+    ids,
+    mentionsDisplay
+  };
+  return res;
+};
+export {
+  CHAT_SEARCH_DEBOUNCE_MS,
+  CRM_TYPE_OPTIONS,
+  DATE_FILTER_TYPE_OPTIONS,
+  DEFAULT_FILTER_STATE,
+  DateFilterType,
+  HAS_CHATBOT_OPTIONS,
+  HAS_FB_ADS_OPTIONS,
+  IS_GROUP_OPTIONS,
+  IS_UNHANDLED_OPTIONS,
+  MAX_DATE_RANGE_DAYS,
+  PHONE_STATUS_OPTIONS,
+  TAG_MATCH_MODE_OPTIONS,
+  TagMatchMode,
+  baseFilterSchema,
+  buildFilterConditions,
+  buildQueryParams,
+  filterToFormValues,
+  getVisibilityToOptions,
+  parseMentions,
+  validateRangeDate
+};

package/components/chat-route/chat-toolbar.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { MessagesSquare } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
+import useChatStore from "../../store/chat-store.js";
+import useChatDisplayConfigStore, {
+  selectSources
+} from "../../store/chat-display-config-store.js";
+import FilterChatSources, {
+  MENU_SOURCES
+} from "./chat-list/filter-chat-sources.js";
+import { ChatFilterSource } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { CHAT_TAB_CONFIGS } from "../settings-route/chat-layout/detail/constants.js";
+import { formatNumber } from "@zenify-omni/chat-js/utils/formatters.js";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+function ChatToolbar({ className }) {
+  const { t } = useTranslation();
+  const [
+    filterState,
+    setFilterState,
+    unreadReceivedTab,
+    notReceivedTab,
+    closedTab
+  ] = useChatStore(
+    useShallow((state) => [
+      state.filterState,
+      state.setFilterState,
+      state.unreadReceivedTab,
+      state.notReceivedTab,
+      state.closedTab
+    ])
+  );
+  const displaySources = useChatDisplayConfigStore(useShallow(selectSources));
+  const applySources = useChatDisplayConfigStore((state) => state.applySources);
+  const totalConversations = useMemo(() => {
+    const tabCounts = { unreadReceivedTab, notReceivedTab, closedTab };
+    return CHAT_TAB_CONFIGS.reduce(
+      (sum, tab) => sum + (tabCounts[tab.countKey]?.total ?? 0),
+      0
+    );
+  }, [unreadReceivedTab, notReceivedTab, closedTab]);
+  const stripSources = useMemo(
+    () => [ChatFilterSource.All, ...displaySources],
+    [displaySources]
+  );
+  const isSourceActive = (source) => {
+    if (source === ChatFilterSource.All)
+      return filterState.sources.includes("all");
+    return filterState.sources.length === 1 && filterState.sources[0] === source;
+  };
+  const handleSourceSelect = (source) => {
+    if (isSourceActive(source)) return;
+    const newSources = source === ChatFilterSource.All ? ["all"] : [source];
+    setFilterState({ ...filterState, sources: newSources });
+  };
+  const handleTogglePin = (source) => {
+    const nextShown = displaySources.includes(source) ? displaySources.filter((item) => item !== source) : [...displaySources, source];
+    applySources(
+      nextShown,
+      Object.fromEntries(
+        MENU_SOURCES.filter((item) => !nextShown.includes(item)).map((item) => [
+          item,
+          true
+        ])
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Không kẻ viền dưới: thanh này nằm ngoài Card nên viền trên của Card
+        // đã là đường ngăn, thêm nữa sẽ thành hai vạch. Không đệm ngang để mép
+        // trái/phải thẳng hàng với Card và hàng chip bên dưới.
+        "flex w-full shrink-0 items-center justify-between gap-3 py-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-2 rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-primary", children: [
+          /* @__PURE__ */ jsx(MessagesSquare, { className: "h-4 w-4" }),
+          t("common:label.conversation", { defaultValue: "H\u1ED9i tho\u1EA1i" }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex min-h-[18px] items-center justify-center rounded-full bg-secondary px-2 text-xs font-medium leading-none text-primary", children: formatNumber(totalConversations) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          FilterChatSources,
+          {
+            className: "min-w-0",
+            iconSize: 16,
+            displaySources: stripSources,
+            isSourceActive,
+            onSelectSource: handleSourceSelect,
+            isPinned: (source) => displaySources.includes(source),
+            onTogglePin: handleTogglePin,
+            canUnpinAll: displaySources.length > 0,
+            onUnpinAll: () => applySources(
+              [],
+              Object.fromEntries(MENU_SOURCES.map((source) => [source, true]))
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ChatToolbar as default
+};