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

package/components/chat-route/chat-list/edit-filter-modal.js

@@ -0,0 +1,468 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { CirclePlus, X } from "lucide-react";
+import { getQuickFilterById, updateQuickFilter } from "@zenify-omni/chat-js/api/chatroom.js";
+import {
+  baseFilterSchema,
+  buildFilterConditions,
+  DEFAULT_FILTER_STATE,
+  filterToFormValues,
+  getVisibilityToOptions,
+  validateRangeDate
+} from "./util.js";
+import FilterCriteriaRows, {
+  buildCriteriaFields,
+  getActiveCriteriaKeys
+} from "./filter-criteria-rows.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { getUser, isRoleTeamLeader, isRoleTeamLeaderSale } from "@zenify-omni/chat-js/utils/auth.js";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetFooter
+} from "../../ui/sheet.js";
+import { Button } from "../../custom/button.js";
+import { Label } from "../../custom/label.js";
+import { Input } from "../../ui/input.js";
+import { Form, FormControl, FormField, FormItem } from "../../ui/form.js";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import { searchUser } from "@zenify-omni/chat-js/api/user.js";
+import { useGetListSocialPage } from "../../../hooks/use-setting-common.js";
+import { useInvalidateQuickFilters } from "../../../hooks/use-quick-filters.js";
+import { ChatFilterSourceOptions } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { useSettings } from "../../../hooks/use-settings.js";
+import { CustomSelect } from "../../custom/custom-select.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../ui/dropdown-menu.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const formSchema = baseFilterSchema.extend({
+  name: z.string().nonempty({
+    get message() {
+      return i18n.t("common:message.filterNameRequired", {
+        defaultValue: "T\xEAn b\u1ED9 l\u1ECDc kh\xF4ng \u0111\u01B0\u1EE3c b\u1ECF tr\u1ED1ng"
+      });
+    }
+  }),
+  visibility_agents: z.array(z.any()).optional(),
+  visibility_groups: z.array(z.any()).optional(),
+  visibility_to: z.string().optional()
+}).superRefine((data, ctx) => {
+  if (data.visibility_to === "selected_agents" && (!data.visibility_agents || data.visibility_agents.length === 0)) {
+    ctx.addIssue({
+      path: ["visibility_agents"],
+      code: z.ZodIssueCode.custom,
+      get message() {
+        return i18n.t("chat:toast.selectAtLeastOneAgent", {
+          defaultValue: "Vui l\xF2ng ch\u1ECDn \xEDt nh\u1EA5t 1 chuy\xEAn vi\xEAn"
+        });
+      }
+    });
+  }
+  if (data.visibility_to === "department_agents" && (!data.visibility_groups || data.visibility_groups.length === 0)) {
+    ctx.addIssue({
+      path: ["visibility_groups"],
+      code: z.ZodIssueCode.custom,
+      get message() {
+        return i18n.t("chat:toast.selectAtLeastOneDepartment", {
+          defaultValue: "Vui l\xF2ng ch\u1ECDn \xEDt nh\u1EA5t 1 b\u1ED9 ph\u1EADn"
+        });
+      }
+    });
+  }
+  validateRangeDate(data, ctx);
+});
+const DEFAULT_FORM_VALUES = {
+  name: "",
+  visibility_to: getVisibilityToOptions()[0]?.value,
+  visibility_groups: [],
+  visibility_agents: [],
+  ...DEFAULT_FILTER_STATE
+};
+function EditFilterModal({
+  open,
+  onOpenChange,
+  filterId,
+  onUpdated
+}) {
+  const { t } = useTranslation();
+  const user = getUser();
+  const formRef = useRef(null);
+  const { groups: groupOptions } = useSettings();
+  const { data: socialPageList } = useGetListSocialPage();
+  const sourceOptions = ChatFilterSourceOptions;
+  const [activeCriteriaKeys, setActiveCriteriaKeys] = useState([]);
+  const { data: filterDetail } = useQuery({
+    queryKey: ["quick-filter-detail", filterId],
+    queryFn: async () => {
+      const response = await getQuickFilterById({ id: filterId });
+      return response?.data;
+    },
+    enabled: open && !!filterId
+  });
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    mode: "onSubmit",
+    defaultValues: DEFAULT_FORM_VALUES
+  });
+  const defaultGroupsForTBP = useMemo(() => {
+    if (!(isRoleTeamLeader() || isRoleTeamLeaderSale()) || !user?.group_id) {
+      return [];
+    }
+    const group = groupOptions?.find((g) => g.id === user.group_id);
+    if (!group) return [];
+    return [{ label: group.name, value: user.group_id.toString() }];
+  }, [groupOptions, user?.group_id]);
+  useEffect(() => {
+    if (!open) {
+      form.reset(DEFAULT_FORM_VALUES);
+      setActiveCriteriaKeys([]);
+      return;
+    }
+    if (!filterDetail) return;
+    const formValues = filterToFormValues(
+      filterDetail.filter || {},
+      socialPageList ?? []
+    );
+    form.reset({
+      name: filterDetail.name || "",
+      visibility_to: filterDetail.visibility || getVisibilityToOptions()[0]?.value,
+      visibility_groups: (filterDetail.group_ids || []).map((id) => {
+        const group = groupOptions?.find(
+          (x) => x.id.toString() === id.toString()
+        );
+        return { label: group?.name || id, value: id.toString() };
+      }),
+      visibility_agents: (filterDetail.agents || []).map((agent) => ({
+        label: agent.name,
+        value: agent._id
+      })),
+      ...formValues
+    });
+  }, [open, filterDetail, socialPageList, groupOptions]);
+  const filterSources = useWatch({
+    control: form.control,
+    name: "sources"
+  });
+  const filterSocialPageList = useMemo(() => {
+    const toOption = (option) => ({
+      label: maskData(option.page_name),
+      value: option.page_id,
+      source: option.source
+    });
+    if (filterSources.includes("all")) {
+      return (socialPageList ?? []).map(toOption);
+    }
+    return (socialPageList ?? []).filter((option) => filterSources.includes(option.source)).map(toOption);
+  }, [filterSources, socialPageList]);
+  const criteriaFieldDefs = useMemo(
+    () => buildCriteriaFields({
+      form,
+      sourceOptions,
+      filterSocialPageList,
+      includePersonal: true
+    }),
+    [form, sourceOptions, filterSocialPageList]
+  );
+  const criteriaFieldMap = useMemo(() => {
+    const map = {};
+    criteriaFieldDefs.forEach((f) => {
+      map[f.key] = f;
+    });
+    return map;
+  }, [criteriaFieldDefs]);
+  useEffect(() => {
+    if (!open || !filterDetail) return;
+    setActiveCriteriaKeys(
+      getActiveCriteriaKeys(criteriaFieldDefs, form.getValues())
+    );
+  }, [open, filterDetail]);
+  const remainingCriteriaFieldDefs = criteriaFieldDefs.filter(
+    (f) => !activeCriteriaKeys.includes(f.key)
+  );
+  const handleAddCriteria = (key) => {
+    if (!key || activeCriteriaKeys.includes(key)) return;
+    setActiveCriteriaKeys((prev) => [...prev, key]);
+  };
+  const handleRemoveCriteria = (key) => {
+    criteriaFieldMap[key]?.reset();
+    setActiveCriteriaKeys((prev) => prev.filter((k) => k !== key));
+  };
+  const handleChangeCriteriaType = (oldKey, newKey) => {
+    if (oldKey === newKey) return;
+    criteriaFieldMap[oldKey]?.reset();
+    setActiveCriteriaKeys(
+      (prev) => prev.map((k) => k === oldKey ? newKey : k)
+    );
+  };
+  const visibilityTo = form.watch("visibility_to");
+  const visibilityToOptions = useMemo(() => getVisibilityToOptions(), []);
+  const groupSelectOptions = useMemo(() => {
+    const base = groupOptions || [];
+    const filtered = isRoleTeamLeader() || isRoleTeamLeaderSale() ? base.filter((option) => option.id === user.group_id) : base;
+    return filtered.map((option) => ({
+      label: option.name,
+      value: option.id.toString()
+    }));
+  }, [groupOptions, user?.group_id]);
+  const invalidateQuickFilters = useInvalidateQuickFilters();
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }) => updateQuickFilter({ id, data }),
+    onSuccess: (_, variables) => {
+      toast.success(
+        i18n.t("common:toast.updateFilterSuccess", {
+          defaultValue: "C\u1EADp nh\u1EADt b\u1ED9 l\u1ECDc th\xE0nh c\xF4ng"
+        })
+      );
+      onOpenChange(false);
+      invalidateQuickFilters();
+      onUpdated?.(variables.id);
+    },
+    onError: throwException
+  });
+  const onSubmit = (values) => {
+    const filter = buildFilterConditions(values);
+    updateMutation.mutate({
+      id: filterId,
+      data: {
+        name: values.name,
+        visibility: values.visibility_to,
+        group_ids: (values.visibility_groups || []).map((x) => Number(x.value)),
+        agent_ids: (values.visibility_agents || []).map((x) => x.value),
+        filter
+      }
+    });
+  };
+  const handleClose = () => onOpenChange(false);
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: "right",
+      className: "flex h-screen w-full flex-col gap-0 overflow-hidden rounded-none border-l-0 bg-card p-0 [&>button]:hidden",
+      style: { maxWidth: "700px" },
+      children: [
+        /* @__PURE__ */ jsxs(SheetHeader, { className: "h-12 shrink-0 flex-row items-center justify-between space-y-0 border-b border-border-subtle px-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[18px] font-bold tracking-[-0.45px] text-foreground", children: t("chat:action.editFilter", { defaultValue: "Ch\u1EC9nh s\u1EEDa b\u1ED9 l\u1ECDc" }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClose,
+              className: "shrink-0 text-foreground opacity-70 hover:opacity-100",
+              children: /* @__PURE__ */ jsx(X, { className: "h-[18px] w-[18px]" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "scroll-container-thin flex-1 overflow-auto px-4 py-3", children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            ref: formRef,
+            onSubmit: form.handleSubmit(onSubmit),
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsx(
+                FormField,
+                {
+                  control: form.control,
+                  name: "name",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsx(
+                      Label,
+                      {
+                        isRequired: true,
+                        className: "text-[14px] font-semibold text-foreground",
+                        children: t("common:label.filterName", {
+                          defaultValue: "T\xEAn b\u1ED9 l\u1ECDc"
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        ...field,
+                        placeholder: t("common:placeholder.enterFilterName", {
+                          defaultValue: "Nh\u1EADp t\xEAn b\u1ED9 l\u1ECDc"
+                        }),
+                        className: "h-[42px] rounded-[6px] border-border shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] placeholder:text-muted-foreground"
+                      }
+                    ) }),
+                    form.formState.errors?.name && /* @__PURE__ */ jsx("span", { className: "text-sm text-[--label-red-foreground]", children: form.formState.errors.name.message })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FormField,
+                {
+                  control: form.control,
+                  name: "visibility_to",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsx(Label, { className: "text-[14px] font-semibold text-foreground", children: t("common:label.usageTarget", {
+                      defaultValue: "\u0110\u1ED1i t\u01B0\u1EE3ng s\u1EED d\u1EE5ng"
+                    }) }),
+                    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                      CustomSelect,
+                      {
+                        ...field,
+                        placeholder: t("common:placeholder.selectUsageTarget", {
+                          defaultValue: "Ch\u1ECDn \u0111\u1ED1i t\u01B0\u1EE3ng s\u1EED d\u1EE5ng"
+                        }),
+                        options: visibilityToOptions,
+                        triggerClassName: "h-[42px] rounded-[6px] border-border shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)]",
+                        onChange: (value) => {
+                          field.onChange(value);
+                          form.setValue("visibility_agents", []);
+                          form.setValue(
+                            "visibility_groups",
+                            value === "department_agents" ? defaultGroupsForTBP : []
+                          );
+                        }
+                      }
+                    ) })
+                  ] })
+                }
+              ),
+              visibilityTo === "selected_agents" && /* @__PURE__ */ jsx(
+                FormField,
+                {
+                  control: form.control,
+                  name: "visibility_agents",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsx(
+                      MultipleSelector,
+                      {
+                        ...field,
+                        placeholder: t("chat:field.selectApplicableAgent", {
+                          defaultValue: "Ch\u1ECDn chuy\xEAn vi\xEAn \xE1p d\u1EE5ng"
+                        }),
+                        onSearch: (value) => searchUser({
+                          searchText: value,
+                          ...isRoleTeamLeader() || isRoleTeamLeaderSale() ? { group_id: user.group_id } : {}
+                        }),
+                        buildOption: (u) => ({
+                          label: u.name,
+                          value: u._id
+                        })
+                      }
+                    ),
+                    form.formState.errors?.visibility_agents && /* @__PURE__ */ jsx("span", { className: "text-sm text-[--label-red-foreground]", children: form.formState.errors.visibility_agents.message })
+                  ] })
+                }
+              ),
+              visibilityTo === "department_agents" && /* @__PURE__ */ jsx(
+                FormField,
+                {
+                  control: form.control,
+                  name: "visibility_groups",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsx(
+                      MultipleSelector,
+                      {
+                        ...field,
+                        placeholder: t(
+                          "chat:field.selectApplicableDepartment",
+                          { defaultValue: "Ch\u1ECDn ph\xF2ng ban \xE1p d\u1EE5ng" }
+                        ),
+                        options: groupSelectOptions,
+                        commandProps: {
+                          filter: (value, search, keywords) => keywords[0].toLowerCase().includes(search.trim().toLowerCase())
+                        }
+                      }
+                    ),
+                    form.formState.errors?.visibility_groups && /* @__PURE__ */ jsx("span", { className: "text-sm text-[--label-red-foreground]", children: form.formState.errors.visibility_groups.message })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsx(
+                  Label,
+                  {
+                    isRequired: true,
+                    className: "text-[14px] font-semibold text-foreground",
+                    children: t("chat:field.filterCriteria", {
+                      defaultValue: "Ti\xEAu ch\xED l\u1ECDc"
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  FilterCriteriaRows,
+                  {
+                    form,
+                    sourceOptions,
+                    filterSocialPageList,
+                    includePersonal: true,
+                    activeKeys: activeCriteriaKeys,
+                    onRemoveCriteria: handleRemoveCriteria,
+                    onChangeCriteriaType: handleChangeCriteriaType
+                  }
+                )
+              ] }),
+              remainingCriteriaFieldDefs.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "link",
+                    className: "h-auto gap-1 p-0 text-[14px] font-normal tracking-[-0.154px] text-primary no-underline hover:no-underline",
+                    children: [
+                      /* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }),
+                      t("common:action.addFilterCriteria", {
+                        defaultValue: "Th\xEAm ti\xEAu ch\xED l\u1ECDc"
+                      })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: remainingCriteriaFieldDefs.map((option) => /* @__PURE__ */ jsx(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => handleAddCriteria(option.key),
+                    children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                      option.icon,
+                      option.label
+                    ] })
+                  },
+                  option.key
+                )) })
+              ] })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs(SheetFooter, { className: "shrink-0 flex-row justify-end gap-2 space-x-0 border-t border-border-subtle px-4 py-3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              className: "h-8 rounded-[6px] border-transparent bg-muted px-[13px] text-[14px] tracking-[-0.154px] text-muted-foreground shadow-none hover:bg-border-subtle",
+              onClick: handleClose,
+              children: t("common:action.cancelAlt", { defaultValue: "Hu\u1EF7" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              className: "!ml-0 h-8 rounded-[6px] bg-primary px-[13px] text-[14px] tracking-[-0.154px] text-white shadow-none hover:bg-primary/90",
+              onClick: () => formRef.current.requestSubmit(),
+              disabled: updateMutation.isPending,
+              children: t("common:action.save", { defaultValue: "L\u01B0u" })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  EditFilterModal as default
+};

package/components/chat-route/chat-list/filter-chat-sources.js

@@ -0,0 +1,222 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ChannelIconUrl,
+  TicketSourceIconUrl
+} from "../../../assets/public-urls.js";
+import { useMemo } from "react";
+import { ChevronLeft, ChevronRight, Ellipsis, LayoutGrid } from "lucide-react";
+import { Pin, PinOff } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import {
+  ChatFilterSource,
+  ChatFilterSourceOptions
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import useHorizontalScroll from "../../../hooks/use-horizontal-scroll.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const DEFAULT_PIN_COUNT = 4;
+const MENU_SOURCES = [
+  ChatFilterSource.Facebook,
+  ChatFilterSource.ZaloPersonal,
+  ChatFilterSource.Zalo,
+  ChatFilterSource.Whatsapp,
+  ChatFilterSource.Instagram,
+  ChatFilterSource.Tiktok,
+  ChatFilterSource.TiktokShop,
+  ChatFilterSource.Shopee,
+  ChatFilterSource.Chat
+];
+const SOURCE_ICON = {
+  [ChatFilterSource.Facebook]: {
+    src: ChannelIconUrl.facebook,
+    alt: "Facebook"
+  },
+  [ChatFilterSource.Zalo]: { src: ChannelIconUrl.zalo, alt: "Zalo" },
+  [ChatFilterSource.ZaloPersonal]: {
+    src: ChannelIconUrl.zalo,
+    alt: "Zalo"
+  },
+  [ChatFilterSource.Whatsapp]: {
+    src: ChannelIconUrl.whatsapp,
+    alt: "WhatsApp"
+  },
+  [ChatFilterSource.Instagram]: {
+    src: ChannelIconUrl.instagram,
+    alt: "Instagram"
+  },
+  [ChatFilterSource.Tiktok]: {
+    src: TicketSourceIconUrl["tiktok.png"],
+    alt: "TikTok Business"
+  },
+  [ChatFilterSource.TiktokShop]: {
+    src: TicketSourceIconUrl["tiktok_shop.png"],
+    alt: "TikTok Shop"
+  },
+  [ChatFilterSource.Shopee]: {
+    src: ChannelIconUrl.shopee,
+    alt: "Shopee"
+  },
+  [ChatFilterSource.Chat]: {
+    src: TicketSourceIconUrl["livechat.png"],
+    alt: "LiveChat"
+  }
+};
+function renderChatSourceIcon(source, size = 24) {
+  const icon = SOURCE_ICON[source];
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx("img", { src: icon.src, alt: icon.alt, width: size, height: size });
+}
+function getChatSourceBadgeLabel(source) {
+  if (source === ChatFilterSource.Zalo) return "OA";
+  if (source === ChatFilterSource.ZaloPersonal) return "CN";
+  return null;
+}
+function FilterChatSources({
+  className,
+  displaySources = [],
+  menuSources = MENU_SOURCES,
+  isSourceActive = () => true,
+  onSelectSource,
+  isPinned,
+  onTogglePin,
+  canUnpinAll,
+  onUnpinAll,
+  iconSize = 24
+}) {
+  const { t } = useTranslation();
+  const boxStyle = { width: iconSize + 16, height: iconSize + 16 };
+  const {
+    scrollRef,
+    canScrollLeft,
+    canScrollRight,
+    scrollToLeft,
+    scrollToRight
+  } = useHorizontalScroll([displaySources.length]);
+  const sourceLabelMap = useMemo(() => {
+    const map = {};
+    ChatFilterSourceOptions.forEach((option) => {
+      map[option.value] = option.label;
+    });
+    return map;
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    canScrollLeft && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-0 top-0 z-10 h-full w-12 bg-gradient-to-r from-card to-transparent" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: scrollToLeft,
+          className: "absolute left-1 top-1/2 z-20 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border border-border-subtle bg-card shadow-sm hover:bg-surface-subtle",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 text-muted-foreground" })
+        }
+      )
+    ] }),
+    canScrollRight && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 top-0 z-10 h-full w-12 bg-gradient-to-l from-card to-transparent" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: scrollToRight,
+          className: "absolute right-1 top-1/2 z-20 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border border-border-subtle bg-card shadow-sm hover:bg-surface-subtle",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: scrollRef,
+        className: "scroll-container-hide flex items-center gap-2 overflow-x-auto",
+        children: [
+          displaySources.map((source) => {
+            const isActive = isSourceActive(source);
+            const badgeLabel = getChatSourceBadgeLabel(source);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                title: sourceLabelMap[source],
+                onClick: () => onSelectSource?.(source),
+                style: boxStyle,
+                className: cn(
+                  "relative flex shrink-0 items-center justify-center rounded-xl border-2 transition-colors",
+                  isActive ? "border-primary/30 bg-secondary" : "border-border-subtle bg-card hover:bg-surface-subtle"
+                ),
+                children: [
+                  source === ChatFilterSource.All ? /* @__PURE__ */ jsx(
+                    LayoutGrid,
+                    {
+                      size: iconSize - 4,
+                      className: isActive ? "text-primary" : "text-muted-foreground"
+                    }
+                  ) : renderChatSourceIcon(source, iconSize),
+                  badgeLabel && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 rounded-bl-md rounded-tr-xl bg-muted px-1 text-[9px] font-semibold leading-[14px] text-muted-foreground", children: badgeLabel })
+                ]
+              },
+              source
+            );
+          }),
+          menuSources.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                style: boxStyle,
+                className: "flex shrink-0 items-center justify-center rounded-xl border-2 border-dashed border-border bg-card transition-colors hover:bg-surface-subtle",
+                children: /* @__PURE__ */ jsx(Ellipsis, { size: iconSize - 4, className: "text-muted-foreground" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", align: "start", className: "w-56 p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "scroll-container-hide max-h-80 overflow-y-auto", children: [
+              menuSources.map((source) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onTogglePin?.(source),
+                  className: "flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-surface-subtle",
+                  children: [
+                    source === ChatFilterSource.All ? /* @__PURE__ */ jsx(LayoutGrid, { size: 20, className: "text-muted-foreground" }) : renderChatSourceIcon(source, 20),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: sourceLabelMap[source] || source }),
+                    isPinned?.(source) ? /* @__PURE__ */ jsx(
+                      Pin,
+                      {
+                        className: "shrink-0",
+                        size: 16,
+                        fill: "hsl(var(--primary))",
+                        stroke: "hsl(var(--primary))"
+                      }
+                    ) : /* @__PURE__ */ jsx(PinOff, { className: "shrink-0", size: 16, stroke: "hsl(var(--muted-foreground))" })
+                  ]
+                },
+                source
+              )),
+              canUnpinAll && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onUnpinAll,
+                  className: "mt-1 w-full rounded-lg px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-surface-subtle",
+                  children: t("chat:action.unpinAll", {
+                    defaultValue: "B\u1ECF ghim t\u1EA5t c\u1EA3"
+                  })
+                }
+              )
+            ] }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DEFAULT_PIN_COUNT,
+  MENU_SOURCES,
+  FilterChatSources as default,
+  getChatSourceBadgeLabel,
+  renderChatSourceIcon
+};