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

package/components/chat-route/chat-box/zalo-reminder/create-zalo-reminder.js

@@ -0,0 +1,868 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useRef
+} from "react";
+import { cn } from "../../../../lib/utils.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../../../ui/dialog.js";
+import { Button } from "../../../ui/button.js";
+import { Label } from "../../../custom/label.js";
+import { Tabs, TabsList, TabsTrigger } from "../../../ui/tabs.js";
+import FieldGenerator from "../../../custom/field-generator.js";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { FormField, FormItem } from "../../../ui/form.js";
+import { MentionsInput, Mention } from "react-mentions";
+import { CalendarDaysIcon, X } from "lucide-react";
+import {
+  useAllFieldContact,
+  useAllFieldTicket,
+  useAllFieldUser
+} from "../../../../hooks/use-setting-common.js";
+import { CrmType } from "@zenify-omni/chat-js/constants/user.js";
+import { debounce } from "lodash-es";
+import { toast } from "sonner";
+import { Card } from "../../../ui/card.js";
+import { MessageType } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { throwException } from "../../../../exceptions/throw-exception.js";
+import { getZaloReminderList } from "@zenify-omni/chat-js/api/chat.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../ui/select.js";
+import { Skeleton } from "../../../ui/skeleton.js";
+import PopupConfirm from "../../../custom/popup-confirm.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const DEBOUNCE_DELAY = 300;
+const USER_DEFAULT_FIELDS = [
+  { id: "user.name", display: "H\u1ECD v\xE0 t\xEAn" },
+  { id: "user.email", display: "Email" },
+  { id: "user.phone", display: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i" },
+  { id: "user.customer_type", display: "H\u1EA1ng kh\xE1ch h\xE0ng" }
+];
+const TAB_VALUES = {
+  CREATED: "created",
+  UPCOMING: "upcoming",
+  DELETED: "deleted"
+};
+const FORM_MODE = {
+  CREATE: MessageType.CREATE_REMINDER,
+  UPDATE: MessageType.UPDATE_REMINDER
+};
+const REMINDER_REPEAT_MODE = {
+  None: 0,
+  Daily: 1,
+  Weekly: 2,
+  Monthly: 3
+};
+const REMINDER_REPEAT_MODE_CONTEXT = {
+  [REMINDER_REPEAT_MODE.None]: "Kh\xF4ng l\u1EB7p l\u1EA1i",
+  [REMINDER_REPEAT_MODE.Daily]: "H\xE0ng ng\xE0y",
+  [REMINDER_REPEAT_MODE.Weekly]: "H\xE0ng tu\u1EA7n",
+  [REMINDER_REPEAT_MODE.Monthly]: "H\xE0ng th\xE1ng"
+};
+const REMINDER_REPEAT_OPTIONS = Object.values(REMINDER_REPEAT_MODE).map(
+  (v) => ({
+    value: String(v),
+    label: REMINDER_REPEAT_MODE_CONTEXT[v]
+  })
+);
+const GROUP_LABELS = {
+  ticket: "Ticket",
+  [CrmType.Lead]: "Ti\u1EC1m n\u0103ng",
+  [CrmType.Contact]: "Kh\xE1ch h\xE0ng"
+};
+const MENTION_INPUT_STYLE = {
+  control: {
+    backgroundColor: "hsl(var(--card))",
+    fontSize: 14,
+    fontWeight: "normal",
+    borderRadius: "8px",
+    transition: "all 0.2s ease"
+  },
+  input: {
+    margin: 0,
+    padding: "10px 14px",
+    borderRadius: "8px",
+    border: "1.5px solid hsl(var(--border))",
+    width: "100%",
+    overflow: "hidden",
+    height: "auto",
+    minHeight: "120px",
+    transition: "all 0.2s ease",
+    boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
+    outline: "none !important"
+  },
+  "&singleLine": {
+    input: {
+      height: "36px",
+      padding: "4px 12px",
+      borderWidth: "1px",
+      "--borderColor": "214.3 31.8% 91.4%",
+      borderColor: "hsl(var(--borderColor))",
+      "--backgroundColor": "0 0% 100%",
+      backgroundColor: "hsl(var(--backgroundColor))",
+      borderRadius: "6px",
+      outline: "none"
+    }
+  },
+  "&multiLine": {
+    input: {
+      padding: "4px 12px",
+      borderWidth: "1px",
+      "--borderColor": "214.3 31.8% 91.4%",
+      borderColor: "hsl(var(--borderColor))",
+      "--backgroundColor": "0 0% 100%",
+      backgroundColor: "hsl(var(--backgroundColor))",
+      borderRadius: "6px",
+      outline: "none"
+    }
+  },
+  highlighter: {
+    padding: "10px 14px",
+    minHeight: "120px"
+  },
+  suggestions: {
+    list: {
+      backgroundColor: "white",
+      border: "1px solid rgba(0,0,0,0.15)",
+      borderRadius: "10px",
+      fontSize: 14,
+      maxHeight: "350px",
+      overflow: "auto",
+      margin: "0",
+      position: "absolute",
+      left: 0,
+      zIndex: 10,
+      boxShadow: "0 0 10px rgba(0,0,0,0.1)",
+      width: "auto",
+      minWidth: "180px",
+      maxWidth: "300px",
+      transition: "all 0.2s ease"
+    },
+    item: {
+      padding: "8px 12px",
+      borderBottom: "1px solid rgba(0,0,0,0.15)",
+      cursor: "pointer",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      transition: "background-color 0.2s ease",
+      "&focused": {
+        backgroundColor: "hsl(var(--secondary))"
+      },
+      "&hover": {
+        backgroundColor: "hsl(var(--secondary))"
+      }
+    }
+  }
+};
+function LoadingContainer() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative flex cursor-pointer flex-col gap-2 truncate px-2 py-1.5 text-sm outline-none transition-colors"
+      ),
+      children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-6" }, index))
+    }
+  );
+}
+const createFormSchema = (isUpdate = false) => {
+  return z.object({
+    id: z.string().optional(),
+    title: z.string().min(1, {
+      message: i18n.t("chat:label.reminderContentCannotBeEmpty", {
+        defaultValue: "N\u1ED9i dung l\u1EDDi nh\u1EAFc kh\xF4ng \u0111\u01B0\u1EE3c b\u1ECF tr\u1ED1ng"
+      })
+    }),
+    start_time: z.any().refine(
+      (v) => v,
+      i18n.t("chat:message.timeCannotBeEmpty", {
+        defaultValue: "Th\u1EDDi gian kh\xF4ng \u0111\u01B0\u1EE3c \u0111\u1EC3 tr\u1ED1ng"
+      })
+    ),
+    repeat: z.string().refine(
+      (v) => v !== void 0 && v !== "",
+      i18n.t("chat:message.repeatMethodCannotBeEmpty", {
+        defaultValue: "Ph\u01B0\u01A1ng th\u1EE9c l\u1EB7p l\u1EA1i kh\xF4ng \u0111\u01B0\u1EE3c \u0111\u1EC3 tr\u1ED1ng"
+      })
+    )
+  }).superRefine((data, ctx) => {
+    const { start_time, repeat } = data;
+    if (repeat !== "0") {
+      return;
+    }
+    const now = /* @__PURE__ */ new Date();
+    const selectedTime = new Date(start_time);
+    if (!isUpdate) {
+      if (selectedTime <= now) {
+        ctx.addIssue({
+          path: ["start_time"],
+          message: i18n.t("chat:label.theTimeMustBeLater", {
+            defaultValue: "Th\u1EDDi gian ph\u1EA3i l\u1EDBn h\u01A1n th\u1EDDi \u0111i\u1EC3m hi\u1EC7n t\u1EA1i"
+          })
+        });
+      }
+    }
+  });
+};
+const getDataFromMention = (id, ticket, requester) => {
+  if (!id) return null;
+  const [type, fieldKey] = id?.split(".") || [];
+  if (!type || !fieldKey) return null;
+  if (type === "ticket") {
+    return ticket?.[fieldKey] || null;
+  }
+  if (type === "user") {
+    return requester?.[fieldKey] || null;
+  }
+  return null;
+};
+const filterMentionSuggestions = (searchTerm, suggestions) => {
+  if (!searchTerm) return suggestions;
+  const lowerCaseSearch = searchTerm.toLowerCase();
+  return suggestions.filter((suggestion) => {
+    if (suggestion.disabled) return true;
+    return suggestion.display.toLowerCase().includes(lowerCaseSearch);
+  });
+};
+const categorizeReminders = (reminders) => {
+  const now = /* @__PURE__ */ new Date();
+  const oldReminders = [];
+  const futureReminders = [];
+  reminders.forEach((reminder) => {
+    const reminderTime = new Date(reminder.start_time);
+    if (reminderTime > now) {
+      futureReminders.push(reminder);
+    } else {
+      oldReminders.push(reminder);
+    }
+  });
+  oldReminders.sort((a, b) => new Date(b.start_time) - new Date(a.start_time));
+  futureReminders.sort(
+    (a, b) => new Date(a.start_time) - new Date(b.start_time)
+  );
+  return { oldReminders, futureReminders };
+};
+const DeletedReminderState = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-[--label-red]", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "h-8 w-8 text-destructive",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-foreground", children: t("chat:message.appointmentDeleted", {
+        defaultValue: "L\u1ECBch h\u1EB9n n\xE0y \u0111\xE3 b\u1ECB x\xF3a"
+      }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: t("chat:message.appointmentContentUnavailable", {
+        defaultValue: "N\u1ED9i dung l\u1ECBch h\u1EB9n kh\xF4ng c\xF2n kh\u1EA3 d\u1EE5ng"
+      }) })
+    ] })
+  ] }) });
+};
+const ReminderItem = ({ reminder, onClick, isActive, onRemove }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => onClick(reminder),
+      className: cn(
+        "relative flex w-full cursor-pointer gap-3 rounded-lg border p-3 transition-colors hover:bg-surface-subtle",
+        isActive && "border-primary bg-secondary"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          PopupConfirm,
+          {
+            trigger: /* @__PURE__ */ jsx(X, { className: "absolute right-1 top-1 h-4 w-4 text-[--label-red-foreground] hover:opacity-70" }),
+            title: t("chat:dialog.confirmDeleteReminder", {
+              defaultValue: "B\u1EA1n c\xF3 x\xF3a nh\u1EAFc h\u1EB9n n\xE0y?"
+            }),
+            description: "",
+            onConfirm: () => onRemove(reminder)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 text-2xl", children: reminder.icon || /* @__PURE__ */ jsx(CalendarDaysIcon, { className: "h-6 w-6" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-1 flex items-start justify-between gap-2", children: /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "min-w-0 flex-1 truncate text-sm font-medium",
+              style: {
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+                wordBreak: "break-word",
+                overflowWrap: "break-word"
+              },
+              children: reminder.title
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 whitespace-nowrap text-xs text-muted-foreground", children: formatDayWithTime(reminder.start_time) })
+        ] })
+      ]
+    }
+  );
+};
+const ReminderList = ({
+  reminders,
+  emptyMessage,
+  onReminderClick,
+  isLoading,
+  selectedReminderId,
+  onRemove
+}) => {
+  const { t } = useTranslation();
+  const handleReminderClick = useCallback(
+    (reminder) => {
+      if (reminder?.id === selectedReminderId) {
+        onReminderClick?.({
+          id: "",
+          title: "",
+          start_time: "",
+          repeat: "0"
+        });
+      } else {
+        onReminderClick?.(reminder);
+      }
+    },
+    [onReminderClick, selectedReminderId]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: t("common:status.loading", { defaultValue: "\u0110ang t\u1EA3i..." }) });
+  }
+  if (!reminders?.length) {
+    return /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-full space-y-3 overflow-hidden pr-4", children: reminders.map((reminder) => /* @__PURE__ */ jsx(
+    ReminderItem,
+    {
+      reminder,
+      onClick: handleReminderClick,
+      isActive: reminder.id === selectedReminderId,
+      onRemove
+    },
+    reminder.id
+  )) });
+};
+const renderMentionSuggestion = (suggestion, search, highlightedDisplay, index, focused) => {
+  const isDisabled = suggestion.disabled;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "user-suggestion",
+        focused && !isDisabled && "focused",
+        isDisabled && "cursor-not-allowed opacity-80"
+      ),
+      style: {
+        color: isDisabled ? "hsl(var(--muted-foreground))" : "inherit",
+        pointerEvents: isDisabled ? "none" : "auto"
+      },
+      children: highlightedDisplay
+    }
+  );
+};
+const MentionSuggestionsContainer = ({ children, isLoading }) => {
+  const childrenByGroupName = useMemo(() => {
+    const groups = {};
+    children.props.children.forEach((element) => {
+      if (element && element.props && element.props.suggestion) {
+        const group = element.props.suggestion.group ?? "";
+        groups[group] = [...groups[group] ?? [], element];
+      }
+    });
+    return groups;
+  }, [children]);
+  return /* @__PURE__ */ jsxs("div", { className: "absolute z-20 mt-1 max-h-[380px] w-[250px] overflow-auto rounded-md border bg-card shadow-lg", children: [
+    isLoading && /* @__PURE__ */ jsx(LoadingContainer, {}),
+    !isLoading && /* @__PURE__ */ jsx("div", { className: "h-[200px]", children: Object.keys(childrenByGroupName).map((groupName) => {
+      const groupLabel = GROUP_LABELS[groupName] || "";
+      return /* @__PURE__ */ jsxs("div", { children: [
+        groupLabel && /* @__PURE__ */ jsx("p", { className: "border-b px-2 py-1 font-bold", children: groupLabel }),
+        childrenByGroupName[groupName]
+      ] }, groupName);
+    }) })
+  ] });
+};
+const FormError = ({ error }) => {
+  if (!error) return null;
+  return /* @__PURE__ */ jsx("span", { className: "text-sm text-[--label-red-foreground]", children: error.message });
+};
+const ReminderListPanel = ({
+  title,
+  reminders,
+  emptyMessage,
+  onReminderClick,
+  selectedReminderId,
+  isLoading,
+  onRemove
+}) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+  /* @__PURE__ */ jsx("h3", { className: "mx-4 mt-4 text-lg font-semibold", children: title }),
+  /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-6 py-3", children: /* @__PURE__ */ jsx(
+    ReminderList,
+    {
+      reminders,
+      emptyMessage,
+      onReminderClick,
+      selectedReminderId,
+      isLoading,
+      onRemove
+    }
+  ) })
+] });
+function CreateZaloReminder({
+  trigger,
+  open,
+  onOpenChange,
+  onSubmit,
+  ticket = {},
+  requester = {},
+  reminderData
+}) {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState(TAB_VALUES.CREATED);
+  const [formMode, setFormMode] = useState(FORM_MODE.CREATE);
+  const [selectedReminder, setSelectedReminder] = useState(null);
+  const debounceRef = useRef(null);
+  const ottUserId = ticket?.source_room_id || "";
+  const ticketId = ticket?._id || "";
+  const formSchema = useMemo(() => {
+    return createFormSchema(formMode === FORM_MODE.UPDATE);
+  }, [formMode, selectedReminder?.start_time]);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    mode: "onSubmit",
+    defaultValues: {
+      id: "",
+      repeat: "0",
+      title: "",
+      start_time: ""
+    }
+  });
+  const currentReminderId = form.watch("id");
+  useEffect(() => {
+    if (reminderData) {
+      setFormMode(FORM_MODE.UPDATE);
+      setSelectedReminder(reminderData);
+      form.reset({
+        id: String(reminderData.id) || "",
+        repeat: String(reminderData.repeat) || "0",
+        title: reminderData.title || "",
+        start_time: reminderData.start_time || Date.now()
+      });
+    }
+  }, [reminderData, form]);
+  const {
+    data: remindersData,
+    isLoading,
+    refetch: _refetchListReminder
+  } = useQuery({
+    queryKey: [QUERY_KEY.GET_ALL_LIST_ZALO_REMINDER, { ottUserId, ticketId }],
+    queryFn: async () => {
+      if (!ottUserId || !ticketId) return { data: [] };
+      try {
+        const { data } = await getZaloReminderList({
+          ticketId,
+          thread_id: ottUserId
+        });
+        return { data: data || [] };
+      } catch {
+        throwException("B\u1EA1n ch\u01B0a li\xEAn k\u1EBFt Zalo c\xE1 nh\xE2n");
+        return { data: [] };
+      }
+    },
+    enabled: !!ottUserId && !!ticketId && open,
+    onError: throwException,
+    refetchOnMount: true
+  });
+  const { oldReminders, futureReminders } = useMemo(() => {
+    return categorizeReminders(remindersData?.data || []);
+  }, [remindersData?.data]);
+  useEffect(() => {
+    if (currentReminderId) {
+      if (futureReminders.find((r) => r.id === currentReminderId)) {
+        setActiveTab(TAB_VALUES.UPCOMING);
+      } else if (oldReminders.find((r) => r.id === currentReminderId)) {
+        setActiveTab(TAB_VALUES.CREATED);
+      } else {
+        setActiveTab(TAB_VALUES.DELETED);
+      }
+    }
+  }, [currentReminderId, futureReminders, oldReminders]);
+  const crmType = requester.crm_type || CrmType.Lead;
+  const ticketDynamicFields = useAllFieldTicket();
+  const contactDynamicFields = useAllFieldContact();
+  const leadDynamicFields = useAllFieldUser();
+  const userDynamicFields = useMemo(() => {
+    return crmType === CrmType.Contact ? contactDynamicFields : leadDynamicFields;
+  }, [crmType, contactDynamicFields, leadDynamicFields]);
+  const mentionSuggestions = useMemo(() => {
+    return [
+      ...ticketDynamicFields.map((field) => ({
+        id: `ticket.${field.key}`,
+        display: field.title,
+        group: "ticket"
+      })),
+      ...USER_DEFAULT_FIELDS.map((t2) => ({ ...t2, group: crmType })),
+      ...userDynamicFields.map((field) => ({
+        id: `user.${field.key}`,
+        display: field.title,
+        group: crmType
+      }))
+    ];
+  }, [crmType, ticketDynamicFields, userDynamicFields]);
+  const handleOpenChange = useCallback(
+    (newOpen) => {
+      if (!newOpen) {
+        form.reset();
+        setFormMode(FORM_MODE.CREATE);
+        setSelectedReminder(null);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [form, onOpenChange]
+  );
+  const handleSubmit = useCallback(
+    (data) => {
+      const submitData = {
+        data,
+        type: formMode
+      };
+      onSubmit?.(submitData);
+      handleOpenChange(false);
+    },
+    [formMode, onSubmit, handleOpenChange]
+  );
+  const handleDeleteConfirm = useCallback(
+    (reminder) => {
+      onSubmit?.({
+        data: reminder,
+        type: MessageType.DELETE_REMINDER
+      });
+      _refetchListReminder();
+      if (reminder.id === currentReminderId) {
+        form.reset();
+        setSelectedReminder(null);
+      }
+    },
+    [_refetchListReminder, currentReminderId, form, onSubmit]
+  );
+  const handleReminderClick = useCallback(
+    (reminder) => {
+      setSelectedReminder(reminder);
+      form.setValue("id", reminder.id || "");
+      form.setValue("repeat", String(reminder.repeat ?? "0"));
+      form.setValue("title", reminder.title || "");
+      form.setValue("start_time", reminder.start_time || "");
+      setFormMode(reminder.id ? FORM_MODE.UPDATE : FORM_MODE.CREATE);
+    },
+    [form]
+  );
+  const handleMentionAdd = useCallback(
+    (id, display) => {
+      if (!id || !display) return;
+      if (debounceRef.current) {
+        debounceRef.current.cancel();
+      }
+      debounceRef.current = debounce(() => {
+        const currentValue = form.getValues("title") || "";
+        const dataValue = getDataFromMention(id, ticket, requester) || "";
+        if (!dataValue) {
+          toast.warning(
+            i18n.t("chat:message.infoEmptyPleaseCheck", {
+              defaultValue: "Th\xF4ng tin \u0111ang tr\u1ED1ng, vui l\xF2ng ki\u1EC3m tra l\u1EA1i!"
+            })
+          );
+        }
+        const mentionPattern = `@\\[${display.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\]\\(${id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\)`;
+        const regex = new RegExp(mentionPattern, "g");
+        const newValue = currentValue.replace(regex, dataValue);
+        form.setValue("title", newValue, {
+          shouldValidate: true,
+          shouldDirty: true
+        });
+      }, DEBOUNCE_DELAY);
+      debounceRef.current();
+    },
+    [form, ticket, requester]
+  );
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        debounceRef.current.cancel();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        className: cn(
+          "flex max-h-[70vh] flex-col gap-0 p-0",
+          activeTab !== TAB_VALUES.DELETED ? "max-w-4xl" : "max-w-md"
+        ),
+        children: activeTab === TAB_VALUES.DELETED ? /* @__PURE__ */ jsx(DeletedReminderState, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: "px-6 pb-4 pt-6", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl font-semibold", children: t("chat:action.createAppointmentReminder", {
+            defaultValue: "T\u1EA1o nh\u1EAFc l\u1ECBch h\u1EB9n"
+          }) }) }),
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              value: activeTab,
+              onValueChange: setActiveTab,
+              className: "w-[30%] px-6",
+              children: /* @__PURE__ */ jsxs(TabsList, { className: "mb-2 grid w-full grid-cols-2 gap-2 bg-transparent p-0", children: [
+                /* @__PURE__ */ jsx(
+                  TabsTrigger,
+                  {
+                    value: TAB_VALUES.CREATED,
+                    className: "relative w-1/2 truncate rounded-none px-4 pb-2 !text-sm font-normal text-foreground data-[state=active]:mb-[-1px] data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none",
+                    children: t("chat:status.reminded", { defaultValue: "\u0110\xE3 nh\u1EAFc" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TabsTrigger,
+                  {
+                    value: TAB_VALUES.UPCOMING,
+                    className: "relative w-1/2 truncate rounded-none px-4 pb-2 !text-sm font-normal text-foreground data-[state=active]:mb-[-1px] data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none",
+                    children: t("chat:label.upcoming", { defaultValue: "S\u1EAFp t\u1EDBi" })
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[400px_1fr] gap-6 overflow-hidden px-4 pb-8", children: [
+            /* @__PURE__ */ jsxs(Card, { className: "flex min-h-0 flex-col overflow-hidden", children: [
+              activeTab === TAB_VALUES.CREATED && /* @__PURE__ */ jsx(
+                ReminderListPanel,
+                {
+                  title: t("chat:list.appointmentList", {
+                    defaultValue: "Danh s\xE1ch l\u1ECBch h\u1EB9n"
+                  }),
+                  reminders: oldReminders,
+                  emptyMessage: "Ch\u01B0a c\xF3 l\u1ECBch h\u1EB9n",
+                  onReminderClick: handleReminderClick,
+                  selectedReminderId: currentReminderId,
+                  isLoading,
+                  onRemove: handleDeleteConfirm
+                }
+              ),
+              activeTab === TAB_VALUES.UPCOMING && /* @__PURE__ */ jsx(
+                ReminderListPanel,
+                {
+                  title: t("chat:list.appointmentList", {
+                    defaultValue: "Danh s\xE1ch l\u1ECBch h\u1EB9n"
+                  }),
+                  reminders: futureReminders,
+                  emptyMessage: "Ch\u01B0a c\xF3 l\u1ECBch h\u1EB9n s\u1EAFp t\u1EDBi",
+                  onReminderClick: handleReminderClick,
+                  selectedReminderId: currentReminderId,
+                  isLoading,
+                  onRemove: handleDeleteConfirm
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Card, { className: "flex min-h-0 flex-col overflow-hidden p-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold", children: formMode === FORM_MODE.CREATE ? t("chat:action.createNewAppointment", {
+                defaultValue: "T\u1EA1o l\u1ECBch h\u1EB9n m\u1EDBi"
+              }) : t("chat:action.updateAppointment", {
+                defaultValue: "C\u1EADp nh\u1EADt l\u1ECBch h\u1EB9n"
+              }) }),
+              /* @__PURE__ */ jsx(
+                "form",
+                {
+                  onSubmit: form.handleSubmit(handleSubmit),
+                  className: "min-h-0 flex-1 overflow-y-auto pb-4",
+                  children: /* @__PURE__ */ jsxs("div", { className: "space-y-2 px-2", children: [
+                    /* @__PURE__ */ jsx(
+                      FormField,
+                      {
+                        control: form.control,
+                        name: "title",
+                        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-2", children: [
+                          /* @__PURE__ */ jsx(Label, { isRequired: true, className: "text-sm font-semibold", children: t("chat:label.reminder", {
+                            defaultValue: "L\u1EDDi nh\u1EAFc"
+                          }) }),
+                          /* @__PURE__ */ jsx("div", { className: "mention-input-wrapper rounded-lg border-[1.5px] border-border-subtle transition-all duration-200 focus-within:border-primary", children: /* @__PURE__ */ jsx(
+                            MentionsInput,
+                            {
+                              value: field.value || "",
+                              onChange: (e) => field.onChange(e.target.value),
+                              style: MENTION_INPUT_STYLE,
+                              placeholder: t(
+                                "chat:placeholder.reminderContent",
+                                {
+                                  defaultValue: "Nh\u1EADp n\u1ED9i dung l\u1EDDi nh\u1EAFc, s\u1EED d\u1EE5ng @ \u0111\u1EC3 l\u1EA5y th\xF4ng tin."
+                                }
+                              ),
+                              className: "w-full rounded-lg border-none bg-card focus-within:border-primary focus:outline-none focus:ring-2 focus:ring-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                              allowSuggestionsAboveCursor: true,
+                              allowSpaceInQuery: true,
+                              forceSuggestionsAboveCursor: true,
+                              customSuggestionsContainer: (children) => /* @__PURE__ */ jsx(
+                                MentionSuggestionsContainer,
+                                {
+                                  isLoading,
+                                  children
+                                }
+                              ),
+                              children: /* @__PURE__ */ jsx(
+                                Mention,
+                                {
+                                  trigger: "@",
+                                  data: (search) => filterMentionSuggestions(
+                                    search,
+                                    mentionSuggestions
+                                  ),
+                                  displayTransform: (id, display) => `@${display}`,
+                                  onAdd: handleMentionAdd,
+                                  markup: "@[__display__](__id__)",
+                                  allowSpaceInQuery: true,
+                                  appendSpaceOnAdd: true,
+                                  renderSuggestion: renderMentionSuggestion,
+                                  style: {
+                                    backgroundColor: "hsl(var(--secondary))"
+                                  }
+                                }
+                              )
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(FormError, { error: form.formState.errors.title })
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FormField,
+                      {
+                        control: form.control,
+                        name: "start_time",
+                        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-2", children: [
+                          /* @__PURE__ */ jsx(Label, { isRequired: true, className: "text-sm font-semibold", children: t("common:label.time", {
+                            defaultValue: "Th\u1EDDi gian"
+                          }) }),
+                          /* @__PURE__ */ jsx(FieldGenerator, { type: "date-time", ...field }),
+                          /* @__PURE__ */ jsx(FormError, { error: form.formState.errors.start_time })
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      FormField,
+                      {
+                        control: form.control,
+                        name: "repeat",
+                        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-2", children: [
+                          /* @__PURE__ */ jsx(Label, { isRequired: true, className: "text-sm font-semibold", children: t("chat:field.repeatMethod", {
+                            defaultValue: "Ph\u01B0\u01A1ng th\u1EE9c l\u1EB7p l\u1EA1i"
+                          }) }),
+                          /* @__PURE__ */ jsxs(
+                            Select,
+                            {
+                              value: field.value,
+                              onValueChange: field.onChange,
+                              defaultValue: "0",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  SelectTrigger,
+                                  {
+                                    className: cn(
+                                      !field.value && "text-muted-foreground"
+                                    ),
+                                    children: /* @__PURE__ */ jsx(
+                                      SelectValue,
+                                      {
+                                        placeholder: t(
+                                          "chat:field.selectRepeatMethod",
+                                          { defaultValue: "Ch\u1ECDn ph\u01B0\u01A1ng th\u1EE9c l\u1EB7p l\u1EA1i" }
+                                        )
+                                      }
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(SelectContent, { children: REMINDER_REPEAT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+                                  SelectItem,
+                                  {
+                                    value: option.value,
+                                    children: option.label
+                                  },
+                                  option.value
+                                )) })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(FormError, { error: form.formState.errors.repeat })
+                        ] })
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3 pt-4", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    onClick: () => handleOpenChange(false),
+                    children: t("common:action.cancel", { defaultValue: "H\u1EE7y" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: form.handleSubmit(handleSubmit),
+                    children: formMode === FORM_MODE.CREATE ? t("chat:action.createAppointment", {
+                      defaultValue: "T\u1EA1o l\u1ECBch h\u1EB9n"
+                    }) : t("common:action.update", { defaultValue: "C\u1EADp nh\u1EADt" })
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  CreateZaloReminder
+};