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

package/components/chat-route/chat-box/forward-message-modal.js

@@ -0,0 +1,659 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useRef } from "react";
+import {
+  User,
+  CornerUpRight,
+  X,
+  Users,
+  ChevronDown,
+  ChevronUp,
+  SlidersHorizontal,
+  Bookmark
+} from "lucide-react";
+import { Dialog, DialogContent } from "../../ui/dialog.js";
+import { Button } from "../../custom/button.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../../custom/avatar.js";
+import { useQuery, useInfiniteQuery, useMutation } from "@tanstack/react-query";
+import { uniqBy } from "lodash-es";
+import { toast } from "sonner";
+import { cn } from "../../../lib/utils.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import useDebounce from "../../../hooks/use-debounce.js";
+import { getChatRoomWithCondition } from "@zenify-omni/chat-js/api/chatroom.js";
+import {
+  batchForwardZaloMessage,
+  getForwardList,
+  getZaloPersonalLabels
+} from "@zenify-omni/chat-js/api/chat.js";
+import { isZalo, isTiktok, isZaloGroup } from "../util.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import { SearchInput } from "../../custom/search-input.js";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import { Label } from "../../custom/label.js";
+import { MessageBubble } from "./chat-message.js";
+import ZaloIcon from "../../../assets/icons/zalo.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const MAX_NOTE_LENGTH = 500;
+const normalizeChatroom = (c) => ({
+  id: c.source_room_id,
+  name: c.name,
+  avatar: c.avatar,
+  isGroup: isZaloGroup(c),
+  last_msg: c.last_msg
+});
+const normalizeForwardItem = (f) => ({
+  id: f.id,
+  name: f.alias || f.name,
+  avatar: f.avatar,
+  isGroup: f.type === "group" || f.type === "community"
+});
+const MessagePreview = ({ message, ticket }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "max-h-[200px] min-h-[60px] overflow-y-auto rounded-lg border bg-card px-3 py-2.5", children: message ? /* @__PURE__ */ jsx(
+    MessageBubble,
+    {
+      msg: message,
+      ticket,
+      isZalo: isZalo(ticket),
+      isTiktok: isTiktok(ticket),
+      isChatAllowed: false
+    }
+  ) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("chat:message.messageBracket", { defaultValue: "[Tin nh\u1EAFn]" }) }) });
+};
+function ChatItem({ chat, checked, onToggle }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => onToggle(chat),
+      className: "flex cursor-pointer items-center gap-2 rounded-xl bg-card px-2 py-2 shadow transition-colors hover:bg-muted/40",
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked,
+            onCheckedChange: () => onToggle(chat),
+            onClick: (e) => e.stopPropagation()
+          }
+        ),
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: chat.avatar, alt: chat.name }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: /* @__PURE__ */ jsx(User, { className: "h-6 w-6 opacity-50" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: chat.name }),
+          chat.last_msg?.time && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatDayWithTime(chat.last_msg?.time) })
+        ] })
+      ]
+    }
+  );
+}
+function ForwardMessageModal({ open, data, onClose }) {
+  const { t } = useTranslation();
+  const ticket = data?.ticket;
+  const messages = useMemo(
+    () => data?.messages ?? (data?.message ? [data.message] : []),
+    [data]
+  );
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search, 300);
+  const [selectedChats, setSelectedChats] = useState([]);
+  const [note, setNote] = useState("");
+  const [activeTab, setActiveTab] = useState("all");
+  const [previewCollapsed, setPreviewCollapsed] = useState(false);
+  const [sendWithDelay, setSendWithDelay] = useState(false);
+  const [openFilter, setOpenFilter] = useState(false);
+  const [selectedTags, setSelectedTags] = useState([]);
+  const observerRef = useRef(null);
+  const zaloId = ticket?.source_id;
+  const sourceRoomId = ticket?.source_room_id;
+  const { data: zaloLabels } = useQuery({
+    enabled: open && !!zaloId,
+    queryKey: ["forward-zalo-personal-labels", zaloId],
+    queryFn: async () => {
+      const { data: data2 } = await getZaloPersonalLabels(zaloId);
+      return (data2?.label_data ?? []).map((label) => ({
+        label: label.text,
+        value: String(label.id),
+        color: label.color,
+        conversations: label.conversations ?? []
+      }));
+    }
+  });
+  const { data: forwardListData } = useQuery({
+    enabled: open && !!zaloId,
+    queryKey: ["forward-list", zaloId],
+    queryFn: async () => {
+      const { data: data2 } = await getForwardList(zaloId);
+      return (data2?.data ?? []).filter((i) => !sourceRoomId || i.id !== sourceRoomId).map(normalizeForwardItem);
+    }
+  });
+  const {
+    data: chatroomData,
+    isLoading: chatroomLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  } = useInfiniteQuery({
+    enabled: open && !!zaloId,
+    queryKey: ["forward-chatrooms", debouncedSearch, zaloId],
+    queryFn: async ({ pageParam }) => {
+      const params = {
+        where: JSON.stringify({
+          ...debouncedSearch.trim() ? { search: debouncedSearch } : {},
+          source_id: zaloId,
+          source: "pzalo",
+          is_received: true
+        }),
+        sort: "-last_msg.time",
+        type: "cursor",
+        limit: 15,
+        ...pageParam ? { cursor: pageParam } : {}
+      };
+      const { data: data2 } = await getChatRoomWithCondition({ params });
+      const nextToken = data2?.next_cursor || null;
+      return {
+        data: (data2?.items ?? []).filter((i) => !sourceRoomId || i.source_room_id !== sourceRoomId).map(normalizeChatroom),
+        hasMore: !!nextToken && nextToken !== pageParam,
+        nextToken
+      };
+    },
+    initialPageParam: null,
+    getNextPageParam: (last) => last.hasMore ? last.nextToken : void 0
+  });
+  const chatList = useMemo(() => {
+    const chatroomItems = uniqBy(
+      chatroomData?.pages.flatMap((p) => p.data) ?? [],
+      "id"
+    );
+    const chatroomIds = new Set(chatroomItems.map((c) => c.id));
+    const forwardOnly = (forwardListData ?? []).filter((f) => !chatroomIds.has(f.id)).sort((a, b) => (a.name ?? "").localeCompare(b.name ?? ""));
+    return [...chatroomItems, ...forwardOnly];
+  }, [chatroomData, forwardListData]);
+  const isLoading = chatroomLoading && chatList.length === 0;
+  const filteredChatList = useMemo(() => {
+    let list = chatList;
+    if (activeTab === "group") list = list.filter((c) => c.isGroup);
+    else if (activeTab === "user") list = list.filter((c) => !c.isGroup);
+    if (selectedTags.length > 0) {
+      const allConvIds = selectedTags.flatMap(
+        (tag) => (tag.conversations ?? []).map(String)
+      );
+      list = list.filter((c) => {
+        const id = String(c.id);
+        return allConvIds.some((convId) => {
+          if (convId.startsWith("g")) return c.isGroup && convId.slice(1) === id;
+          return !c.isGroup && convId === id;
+        });
+      });
+    }
+    if (debouncedSearch.trim()) {
+      const q = debouncedSearch.toLowerCase();
+      list = list.filter((c) => c.name?.toLowerCase().includes(q));
+    }
+    return list;
+  }, [chatList, activeTab, selectedTags, debouncedSearch]);
+  const selectedIds = useMemo(
+    () => selectedChats.map((c) => c.id),
+    [selectedChats]
+  );
+  const isAllSelected = filteredChatList.length > 0 && filteredChatList.every((c) => selectedIds.includes(c.id));
+  const lastItemRef = (node) => {
+    if (isFetchingNextPage) return;
+    if (observerRef.current) observerRef.current.disconnect();
+    observerRef.current = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && hasNextPage) fetchNextPage();
+    });
+    if (node) observerRef.current.observe(node);
+  };
+  useEffect(() => {
+    return () => {
+      if (observerRef.current) observerRef.current.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    if (!open) {
+      setSearch("");
+      setSelectedChats([]);
+      setNote("");
+      setActiveTab("all");
+      setPreviewCollapsed(false);
+      setSendWithDelay(false);
+      setSelectedTags([]);
+      setOpenFilter(false);
+    }
+  }, [open]);
+  const forwardMutation = useMutation({
+    mutationFn: async () => {
+      if (!zaloId)
+        throw new Error(
+          i18n.t("chat:empty.noPersonalZaloAccountFound", {
+            defaultValue: "Kh\xF4ng t\xECm th\u1EA5y t\xE0i kho\u1EA3n Zalo c\xE1 nh\xE2n"
+          })
+        );
+      if (messages.length === 0)
+        throw new Error(
+          i18n.t("chat:empty.noMessagesToForward", {
+            defaultValue: "Kh\xF4ng c\xF3 tin nh\u1EAFn \u0111\u1EC3 chuy\u1EC3n ti\u1EBFp"
+          })
+        );
+      const users = selectedChats.filter((c) => !c.isGroup);
+      const groups = selectedChats.filter((c) => c.isGroup);
+      const buildPayload = (msg, threadIds, threadType) => {
+        const msgId = msg?.content?.meta?.msgId;
+        const fromTs = msg?.content?.meta?.ts || msg?.content?.meta?.zalo_ts;
+        const contentType = msg?.content?.type;
+        const msgInfo = msg?.content?.meta?.content;
+        const msgType = msg?.content?.msgType || msg?.content?.meta?.msgType;
+        return {
+          ...sendWithDelay ? { delay_ms: 1e3 } : {},
+          to_thread_ids: threadIds,
+          to_thread_type: threadType,
+          ...msgId ? {
+            from_zalo_msg_id: msgId,
+            from_zalo_ts: fromTs,
+            fw_lvl: 0,
+            content_type: contentType,
+            msg_type: msgType,
+            msg_info: msgInfo
+          } : {}
+        };
+      };
+      const payloads = [];
+      for (const msg of messages) {
+        if (users.length > 0)
+          payloads.push(
+            buildPayload(
+              msg,
+              users.map((c) => c.id),
+              "user"
+            )
+          );
+        if (groups.length > 0)
+          payloads.push(
+            buildPayload(
+              msg,
+              groups.map((c) => c.id),
+              "group"
+            )
+          );
+      }
+      const noteText = note.trim();
+      const data2 = {
+        ...noteText ? { message_text: noteText } : {},
+        messages: payloads
+      };
+      await batchForwardZaloMessage({ zaloId, data: data2 });
+    },
+    onSuccess: () => {
+      toast.success(
+        i18n.t("chat:toast.forwardMessageSuccess", {
+          defaultValue: "\u0110\xE3 chuy\u1EC3n ti\u1EBFp tin nh\u1EAFn"
+        })
+      );
+      onClose();
+    },
+    onError: throwException
+  });
+  const handleToggle = (chat) => {
+    setSelectedChats(
+      (prev) => prev.some((c) => c.id === chat.id) ? prev.filter((c) => c.id !== chat.id) : [...prev, chat]
+    );
+  };
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      if (hasNextPage) fetchNextPage();
+      setSelectedChats((prev) => {
+        const notInTab = prev.filter(
+          (c) => !filteredChatList.some((f) => f.id === c.id)
+        );
+        return [...notInTab, ...filteredChatList];
+      });
+    } else {
+      setSelectedChats(
+        (prev) => prev.filter((c) => !filteredChatList.some((f) => f.id === c.id))
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[860px] md:max-w-[1260px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-3 border-b px-5 py-3.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(CornerUpRight, { className: "h-4 w-4 text-primary" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: t("chat:action.forwardMessage", {
+            defaultValue: "Chuy\u1EC3n ti\u1EBFp tin nh\u1EAFn"
+          }) }),
+          messages.length > 1 && /* @__PURE__ */ jsxs("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: [
+            "\u2192 ",
+            messages.length,
+            " ",
+            i18n.t("chat:label.tin", { defaultValue: "tin" })
+          ] })
+        ] }),
+        ticket?.source_name && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: t("chat:field.fromAccount", {
+            defaultValue: "T\u1EEB t\xE0i kho\u1EA3n"
+          }) }),
+          /* @__PURE__ */ jsx(ZaloIcon, { size: 14, color: "hsl(var(--primary))" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: ticket.source_name }),
+          /* @__PURE__ */ jsx("span", { children: t("chat:label.personalZaloBullet", {
+            defaultValue: "\xB7 Zalo c\xE1 nh\xE2n"
+          }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-col gap-2 overflow-hidden border-r p-3 sm:w-[340px] md:w-[480px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              placeholder: t("chat:placeholder.searchNamePhoneEmail", {
+                defaultValue: "T\xECm theo t\xEAn, S\u0110T, email..."
+              }),
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs(Popover, { open: openFilter, onOpenChange: setOpenFilter, modal: true, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              SlidersHorizontal,
+              {
+                className: cn(
+                  "h-4 w-4 cursor-pointer",
+                  openFilter && "text-primary"
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(PopoverContent, { className: "w-[400px] space-y-4 p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:label.filter", { defaultValue: "B\u1ED9 l\u1ECDc" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(Label, { children: t("chat:field.zaloLabel", {
+                  defaultValue: "Nh\xE3n Zalo"
+                }) }),
+                /* @__PURE__ */ jsx(
+                  MultipleSelector,
+                  {
+                    placeholder: t("chat:field.selectZaloLabel", {
+                      defaultValue: "Ch\u1ECDn nh\xE3n Zalo"
+                    }),
+                    inputProps: { tabIndex: -1 },
+                    autoHeight: true,
+                    value: selectedTags,
+                    renderBadgeLabel: (option) => /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx(
+                        Bookmark,
+                        {
+                          className: "h-3 w-3 flex-shrink-0",
+                          style: {
+                            fill: option.color,
+                            stroke: option.color
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium", children: option.label })
+                    ] }),
+                    getBadgeStyle: (option) => ({
+                      backgroundColor: `${option.color}18`,
+                      borderColor: `${option.color}40`,
+                      color: option.color
+                    }),
+                    renderOptionLabel: (option) => /* @__PURE__ */ jsxs("div", { className: "flex max-w-[400px] items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        Bookmark,
+                        {
+                          className: "h-4 w-4",
+                          style: {
+                            fill: option.color,
+                            stroke: option.color
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label })
+                    ] }),
+                    commandProps: {
+                      filter: (_value, search2, keywords) => keywords[0].toLowerCase().includes(search2.trim().toLowerCase())
+                    },
+                    options: zaloLabels ?? [],
+                    onChange: setSelectedTags
+                  }
+                )
+              ] })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [
+          {
+            key: "all",
+            label: i18n.t("common:filter.all", {
+              defaultValue: "T\u1EA5t c\u1EA3"
+            })
+          },
+          {
+            key: "group",
+            label: i18n.t("common:label.group", {
+              defaultValue: "Nh\xF3m"
+            }),
+            icon: /* @__PURE__ */ jsx(Users, { size: 12 })
+          },
+          {
+            key: "user",
+            label: i18n.t("common:label.user", {
+              defaultValue: "Ng\u01B0\u1EDDi d\xF9ng"
+            }),
+            icon: /* @__PURE__ */ jsx(User, { size: 12 })
+          }
+        ].map((tab) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab(tab.key),
+            className: `flex items-center gap-1 rounded-full px-3 py-1 text-xs transition-colors ${activeTab === tab.key ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-muted/50"}`,
+            children: [
+              tab.icon,
+              tab.label
+            ]
+          },
+          tab.key
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isAllSelected,
+              onCheckedChange: handleSelectAll
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+            t("common:action.selectAll", { defaultValue: "Ch\u1ECDn t\u1EA5t c\u1EA3" }),
+            filteredChatList.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              " ",
+              "\xB7 ",
+              filteredChatList.length,
+              " ",
+              t("chat:label.conversations", {
+                defaultValue: "cu\u1ED9c tr\xF2 chuy\u1EC7n"
+              })
+            ] })
+          ] }),
+          selectedChats.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-sm text-muted-foreground", children: t("chat:label.selectedCountOfTotal", {
+            length: selectedChats.length,
+            length2: chatList.length,
+            defaultValue: "\u0110\xE3 ch\u1ECDn {length}/{length2}"
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5 overflow-y-auto pr-1", children: [
+          isLoading && Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-14 w-full rounded-xl" }, i)),
+          !isLoading && filteredChatList.length === 0 && /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: t("chat:empty.noConversations", {
+            defaultValue: "Kh\xF4ng c\xF3 cu\u1ED9c tr\xF2 chuy\u1EC7n n\xE0o"
+          }) }),
+          filteredChatList.map((chat) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            ChatItem,
+            {
+              chat,
+              checked: selectedIds.includes(chat.id),
+              onToggle: handleToggle
+            }
+          ) }, chat.id)),
+          /* @__PURE__ */ jsx("div", { ref: lastItemRef }),
+          isFetchingNextPage && /* @__PURE__ */ jsx(Skeleton, { className: "h-14 w-full rounded-xl" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+              t("chat:label.forwardedMessage", {
+                defaultValue: "Tin nh\u1EAFn chuy\u1EC3n ti\u1EBFp"
+              }),
+              messages.length > 1 && /* @__PURE__ */ jsxs("span", { className: "ml-1 font-normal text-muted-foreground", children: [
+                "\xB7 ",
+                messages.length
+              ] })
+            ] }),
+            messages.length > 1 && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setPreviewCollapsed((v) => !v),
+                className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
+                children: [
+                  previewCollapsed ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronUp, { size: 14 }),
+                  previewCollapsed ? t("common:action.expand", { defaultValue: "M\u1EDF r\u1ED9ng" }) : t("common:action.collapse", {
+                    defaultValue: "Thu g\u1ECDn"
+                  })
+                ]
+              }
+            )
+          ] }),
+          previewCollapsed ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(MessagePreview, { message: messages[0], ticket }),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white/90 to-transparent pb-1 pt-6", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              "+",
+              messages.length - 1,
+              " ",
+              t("chat:label.otherMessages", {
+                defaultValue: "tin nh\u1EAFn kh\xE1c"
+              })
+            ] }) })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "max-h-[220px] space-y-2 overflow-y-auto", children: messages.map((msg, i) => /* @__PURE__ */ jsx(
+            MessagePreview,
+            {
+              message: msg,
+              ticket
+            },
+            msg?._id ?? i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+            t("common:label.recipient", { defaultValue: "Ng\u01B0\u1EDDi nh\u1EADn" }),
+            selectedChats.length > 0 && /* @__PURE__ */ jsxs("span", { className: "font-normal text-muted-foreground", children: [
+              " ",
+              "\xB7 ",
+              selectedChats.length,
+              "/",
+              chatList.length
+            ] })
+          ] }),
+          selectedChats.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex max-h-[100px] flex-wrap gap-1.5 overflow-y-auto rounded-lg border bg-muted/30 p-2", children: selectedChats.map((chat) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary",
+              children: [
+                /* @__PURE__ */ jsxs(Avatar, { className: "h-4 w-4", children: [
+                  /* @__PURE__ */ jsx(AvatarImage, { src: chat.avatar }),
+                  /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[8px]", children: chat.name?.[0] || "U" })
+                ] }),
+                chat.name,
+                /* @__PURE__ */ jsx(
+                  X,
+                  {
+                    className: "h-3 w-3 cursor-pointer opacity-70 hover:opacity-100",
+                    onClick: () => handleToggle(chat)
+                  }
+                )
+              ]
+            },
+            chat.id
+          )) }) : /* @__PURE__ */ jsx("div", { className: "flex h-10 items-center justify-center rounded-lg border border-dashed text-xs text-muted-foreground", children: t("chat:message.noRecipientSelected", {
+            defaultValue: "Ch\u01B0a ch\u1ECDn ng\u01B0\u1EDDi nh\u1EADn"
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: "send-with-delay",
+              checked: sendWithDelay,
+              onCheckedChange: (v) => setSendWithDelay(!!v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: "send-with-delay",
+              className: "cursor-pointer select-none text-sm text-muted-foreground",
+              children: t("chat:field.sendOneSecondApart", {
+                defaultValue: "G\u1EEDi l\u1EA7n l\u01B0\u1EE3t c\xE1ch 1 gi\xE2y (tr\xE1nh b\u1ECB \u0111\xE1nh d\u1EA5u spam)"
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col space-y-1.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:label.note", { defaultValue: "Ghi ch\xFA" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 flex-col rounded-lg border focus-within:ring-1 focus-within:ring-ring", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                className: "flex-1 resize-none rounded-lg p-3 text-sm outline-none placeholder:text-muted-foreground",
+                placeholder: t("chat:placeholder.noteOptional", {
+                  defaultValue: "Nh\u1EADp ghi ch\xFA (tu\u1EF3 ch\u1ECDn)..."
+                }),
+                value: note,
+                onChange: (e) => {
+                  if (e.target.value.length <= MAX_NOTE_LENGTH) {
+                    setNote(e.target.value);
+                  }
+                },
+                rows: 4
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-3 py-1.5", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              note.length,
+              "/",
+              MAX_NOTE_LENGTH
+            ] }) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-end border-t px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onClose, children: t("common:action.cancelAlt", { defaultValue: "Hu\u1EF7" }) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          disabled: selectedChats.length === 0 || forwardMutation.isPending,
+          onClick: () => forwardMutation.mutate(),
+          children: [
+            /* @__PURE__ */ jsx(CornerUpRight, { className: "mr-1.5 h-4 w-4" }),
+            forwardMutation.isPending ? t("chat:status.sending", { defaultValue: "\u0110ang g\u1EEDi..." }) : t("chat:action.forwardToTargets", {
+              defaultValue: "Chuy\u1EC3n ti\u1EBFp {count, plural, =1 {} other {# tin }}t\u1EDBi {targets}",
+              count: messages.length,
+              targets: selectedChats.length
+            })
+          ]
+        }
+      )
+    ] }) })
+  ] }) });
+}
+export {
+  ForwardMessageModal as default
+};