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

package/assets/icons/tiktok.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+const TikTokIcon = ({ size = 24, color = "currentColor", className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: color,
+    className,
+    viewBox: "0 0 640 640",
+    children: /* @__PURE__ */ jsx("path", { d: "M544.5 273.9C500.5 274 457.5 260.3 421.7 234.7L421.7 413.4C421.7 446.5 411.6 478.8 392.7 506C373.8 533.2 347.1 554 316.1 565.6C285.1 577.2 251.3 579.1 219.2 570.9C187.1 562.7 158.3 545 136.5 520.1C114.7 495.2 101.2 464.1 97.5 431.2C93.8 398.3 100.4 365.1 116.1 336C131.8 306.9 156.1 283.3 185.7 268.3C215.3 253.3 248.6 247.8 281.4 252.3L281.4 342.2C266.4 337.5 250.3 337.6 235.4 342.6C220.5 347.6 207.5 357.2 198.4 369.9C189.3 382.6 184.4 398 184.5 413.8C184.6 429.6 189.7 444.8 199 457.5C208.3 470.2 221.4 479.6 236.4 484.4C251.4 489.2 267.5 489.2 282.4 484.3C297.3 479.4 310.4 469.9 319.6 457.2C328.8 444.5 333.8 429.1 333.8 413.4L333.8 64L421.8 64C421.7 71.4 422.4 78.9 423.7 86.2C426.8 102.5 433.1 118.1 442.4 131.9C451.7 145.7 463.7 157.5 477.6 166.5C497.5 179.6 520.8 186.6 544.6 186.6L544.6 274z" })
+  }
+);
+var tiktok_default = TikTokIcon;
+export {
+  tiktok_default as default
+};

package/assets/icons/whatsapp.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+const DEFAULT_WHATSAPP_COLOR = "#72757E";
+const WhatsappIcon = ({
+  size = 24,
+  color = DEFAULT_WHATSAPP_COLOR,
+  className = ""
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: color,
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M13.6013 2.32644C12.1074 0.824899 10.1154 0 7.99428 0C3.62651 0 0.0684247 3.55809 0.0646233 7.92587C0.0646233 9.32478 0.429555 10.6857 1.1214 11.8907L0 16L4.20432 14.8976C5.36373 15.5286 6.6676 15.8632 7.99428 15.8632H7.99808C12.3659 15.8632 15.9239 12.3051 15.9277 7.93348C15.9239 5.81611 15.099 3.82419 13.6013 2.32644ZM7.99428 14.5213C6.80826 14.5213 5.64884 14.2019 4.63767 13.6013L4.39819 13.4569L1.90449 14.1107L2.56973 11.6778L2.41387 11.4269C1.75243 10.3778 1.40651 9.16512 1.40651 7.92207C1.40651 4.29556 4.36397 1.33809 7.99808 1.33809C9.75812 1.33809 11.4117 2.02613 12.6586 3.26919C13.9016 4.51604 14.5859 6.16964 14.5859 7.92968C14.5821 11.5676 11.6246 14.5213 7.99428 14.5213ZM11.6094 9.58708C11.4117 9.48824 10.4386 9.00927 10.2561 8.94084C10.0736 8.87622 9.94059 8.84201 9.81134 9.03968C9.67829 9.23735 9.29815 9.68591 9.18411 9.81516C9.07007 9.94821 8.95223 9.96341 8.75456 9.86458C8.55689 9.76574 7.91825 9.55667 7.16178 8.88002C6.57257 8.35543 6.17723 7.70539 6.05938 7.50772C5.94534 7.31005 6.04798 7.20361 6.14682 7.10478C6.23425 7.01734 6.34449 6.87289 6.44332 6.75885C6.54216 6.64481 6.57637 6.56118 6.64099 6.42813C6.70562 6.29508 6.67521 6.18104 6.62579 6.08221C6.57637 5.98337 6.18103 5.00642 6.01377 4.61107C5.85411 4.22333 5.69065 4.27655 5.56901 4.27275C5.45497 4.26515 5.32192 4.26515 5.18887 4.26515C5.05582 4.26515 4.84295 4.31456 4.66048 4.51224C4.47801 4.70991 3.96863 5.18888 3.96863 6.16584C3.96863 7.14279 4.67949 8.08173 4.77832 8.21478C4.87716 8.34783 6.17343 10.3474 8.16154 11.2065C8.63291 11.4117 9.00165 11.5334 9.29055 11.6246C9.76572 11.7767 10.1953 11.7539 10.5374 11.7044C10.9175 11.6474 11.7082 11.2255 11.8755 10.7617C12.0389 10.2979 12.0389 9.90259 11.9895 9.81896C11.9401 9.73533 11.8071 9.68591 11.6094 9.58708Z",
+        fill: color
+      }
+    )
+  }
+);
+var whatsapp_default = WhatsappIcon;
+export {
+  whatsapp_default as default
+};

package/assets/icons/zalo.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+const ZaloIcon = ({ size = 24, color = "currentColor", className = "" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 50 50",
+    fill: color,
+    className,
+    children: /* @__PURE__ */ jsx("path", { d: "M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 15.580078 6 C 12.00899 9.7156859 10 14.518083 10 19.5 C 10 24.66 12.110156 29.599844 15.910156 33.339844 C 16.030156 33.549844 16.129922 34.579531 15.669922 35.769531 C 15.379922 36.519531 14.799687 37.499141 13.679688 37.869141 C 13.249688 38.009141 12.97 38.430859 13 38.880859 C 13.03 39.330859 13.360781 39.710781 13.800781 39.800781 C 16.670781 40.370781 18.529297 39.510078 20.029297 38.830078 C 21.379297 38.210078 22.270625 37.789609 23.640625 38.349609 C 26.440625 39.439609 29.42 40 32.5 40 C 36.593685 40 40.531459 39.000731 44 37.113281 L 44 41 C 44 42.668484 42.668484 44 41 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 33 15 C 33.55 15 34 15.45 34 16 L 34 25 C 34 25.55 33.55 26 33 26 C 32.45 26 32 25.55 32 25 L 32 16 C 32 15.45 32.45 15 33 15 z M 18 16 L 23 16 C 23.36 16 23.700859 16.199531 23.880859 16.519531 C 24.050859 16.829531 24.039609 17.219297 23.849609 17.529297 L 19.800781 24 L 23 24 C 23.55 24 24 24.45 24 25 C 24 25.55 23.55 26 23 26 L 18 26 C 17.64 26 17.299141 25.800469 17.119141 25.480469 C 16.949141 25.170469 16.960391 24.780703 17.150391 24.470703 L 21.199219 18 L 18 18 C 17.45 18 17 17.55 17 17 C 17 16.45 17.45 16 18 16 z M 27.5 19 C 28.11 19 28.679453 19.169219 29.189453 19.449219 C 29.369453 19.189219 29.65 19 30 19 C 30.55 19 31 19.45 31 20 L 31 25 C 31 25.55 30.55 26 30 26 C 29.65 26 29.369453 25.810781 29.189453 25.550781 C 28.679453 25.830781 28.11 26 27.5 26 C 25.57 26 24 24.43 24 22.5 C 24 20.57 25.57 19 27.5 19 z M 38.5 19 C 40.43 19 42 20.57 42 22.5 C 42 24.43 40.43 26 38.5 26 C 36.57 26 35 24.43 35 22.5 C 35 20.57 36.57 19 38.5 19 z M 27.5 21 C 27.39625 21 27.29502 21.011309 27.197266 21.03125 C 27.001758 21.071133 26.819727 21.148164 26.660156 21.255859 C 26.500586 21.363555 26.363555 21.500586 26.255859 21.660156 C 26.148164 21.819727 26.071133 22.001758 26.03125 22.197266 C 26.011309 22.29502 26 22.39625 26 22.5 C 26 22.60375 26.011309 22.70498 26.03125 22.802734 C 26.051191 22.900488 26.079297 22.994219 26.117188 23.083984 C 26.155078 23.17375 26.202012 23.260059 26.255859 23.339844 C 26.309707 23.419629 26.371641 23.492734 26.439453 23.560547 C 26.507266 23.628359 26.580371 23.690293 26.660156 23.744141 C 26.819727 23.851836 27.001758 23.928867 27.197266 23.96875 C 27.29502 23.988691 27.39625 24 27.5 24 C 27.60375 24 27.70498 23.988691 27.802734 23.96875 C 28.487012 23.82916 29 23.22625 29 22.5 C 29 21.67 28.33 21 27.5 21 z M 38.5 21 C 38.39625 21 38.29502 21.011309 38.197266 21.03125 C 38.099512 21.051191 38.005781 21.079297 37.916016 21.117188 C 37.82625 21.155078 37.739941 21.202012 37.660156 21.255859 C 37.580371 21.309707 37.507266 21.371641 37.439453 21.439453 C 37.303828 21.575078 37.192969 21.736484 37.117188 21.916016 C 37.079297 22.005781 37.051191 22.099512 37.03125 22.197266 C 37.011309 22.29502 37 22.39625 37 22.5 C 37 22.60375 37.011309 22.70498 37.03125 22.802734 C 37.051191 22.900488 37.079297 22.994219 37.117188 23.083984 C 37.155078 23.17375 37.202012 23.260059 37.255859 23.339844 C 37.309707 23.419629 37.371641 23.492734 37.439453 23.560547 C 37.507266 23.628359 37.580371 23.690293 37.660156 23.744141 C 37.739941 23.797988 37.82625 23.844922 37.916016 23.882812 C 38.005781 23.920703 38.099512 23.948809 38.197266 23.96875 C 38.29502 23.988691 38.39625 24 38.5 24 C 38.60375 24 38.70498 23.988691 38.802734 23.96875 C 39.487012 23.82916 40 23.22625 40 22.5 C 40 21.67 39.33 21 38.5 21 z" })
+  }
+);
+var zalo_default = ZaloIcon;
+export {
+  zalo_default as default
+};

package/assets/public-urls.js

@@ -0,0 +1,78 @@
+import apiPng__asset from "../public/images/ticket_sources/api.png";
+import emailPng__asset from "../public/images/ticket_sources/email.png";
+import facebookPng__asset from "../public/images/ticket_sources/facebook.png";
+import handPng__asset from "../public/images/ticket_sources/hand.png";
+import instagramPng__asset from "../public/images/ticket_sources/instagram.png";
+import livechatPng__asset from "../public/images/ticket_sources/livechat.png";
+import shopeeSvg__asset from "../public/images/ticket_sources/shopee.svg";
+import smsPng__asset from "../public/images/ticket_sources/sms.png";
+import telephoneCallInPng__asset from "../public/images/ticket_sources/telephone-call-in.png";
+import telephoneCallOutPng__asset from "../public/images/ticket_sources/telephone-call-out.png";
+import tiktokPng__asset from "../public/images/ticket_sources/tiktok.png";
+import tiktokShopPng__asset from "../public/images/ticket_sources/tiktok_shop.png";
+import whatsappPng__asset from "../public/images/ticket_sources/whatsapp.png";
+import whatsappSvg__asset from "../public/images/ticket_sources/whatsapp.svg";
+import zaloPng__asset from "../public/images/ticket_sources/zalo.png";
+import iconFacebookSvg__asset from "../public/images/icons/facebook.svg";
+import iconInstagramSvg__asset from "../public/images/icons/instagram.svg";
+import iconShopeeSvg__asset from "../public/images/icons/shopee.svg";
+import iconWhatsappSvg__asset from "../public/images/icons/whatsapp.svg";
+import iconZaloPng__asset from "../public/images/icons/zalo.png";
+import contactCardUserSvg__asset from "../public/contact-card-user.svg";
+import placeholderSvg__asset from "../public/placeholder.svg";
+import imagesFallbackJpg__asset from "../public/images/images.jpg";
+import { assetUrl } from "./asset-url.js";
+const apiPng = assetUrl(apiPng__asset);
+const emailPng = assetUrl(emailPng__asset);
+const facebookPng = assetUrl(facebookPng__asset);
+const handPng = assetUrl(handPng__asset);
+const instagramPng = assetUrl(instagramPng__asset);
+const livechatPng = assetUrl(livechatPng__asset);
+const shopeeSvg = assetUrl(shopeeSvg__asset);
+const smsPng = assetUrl(smsPng__asset);
+const telephoneCallInPng = assetUrl(telephoneCallInPng__asset);
+const telephoneCallOutPng = assetUrl(telephoneCallOutPng__asset);
+const tiktokPng = assetUrl(tiktokPng__asset);
+const tiktokShopPng = assetUrl(tiktokShopPng__asset);
+const whatsappPng = assetUrl(whatsappPng__asset);
+const whatsappSvg = assetUrl(whatsappSvg__asset);
+const zaloPng = assetUrl(zaloPng__asset);
+const iconFacebookSvg = assetUrl(iconFacebookSvg__asset);
+const iconInstagramSvg = assetUrl(iconInstagramSvg__asset);
+const iconShopeeSvg = assetUrl(iconShopeeSvg__asset);
+const iconWhatsappSvg = assetUrl(iconWhatsappSvg__asset);
+const iconZaloPng = assetUrl(iconZaloPng__asset);
+const contactCardUserSvg = assetUrl(contactCardUserSvg__asset);
+const placeholderSvg = assetUrl(placeholderSvg__asset);
+const imagesFallbackJpg = assetUrl(imagesFallbackJpg__asset);
+const TicketSourceIconUrl = Object.freeze({
+  "api.png": apiPng,
+  "email.png": emailPng,
+  "facebook.png": facebookPng,
+  "hand.png": handPng,
+  "instagram.png": instagramPng,
+  "livechat.png": livechatPng,
+  "shopee.svg": shopeeSvg,
+  "sms.png": smsPng,
+  "telephone-call-in.png": telephoneCallInPng,
+  "telephone-call-out.png": telephoneCallOutPng,
+  "tiktok.png": tiktokPng,
+  "tiktok_shop.png": tiktokShopPng,
+  "whatsapp.png": whatsappPng,
+  "whatsapp.svg": whatsappSvg,
+  "zalo.png": zaloPng
+});
+const ChannelIconUrl = Object.freeze({
+  facebook: iconFacebookSvg,
+  instagram: iconInstagramSvg,
+  shopee: iconShopeeSvg,
+  whatsapp: iconWhatsappSvg,
+  zalo: iconZaloPng
+});
+export {
+  ChannelIconUrl,
+  TicketSourceIconUrl,
+  contactCardUserSvg,
+  imagesFallbackJpg,
+  placeholderSvg
+};

package/components/campaign-detail-route/select/group.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { getAllGroups } from "@zenify-omni/chat-js/api/group.js";
+import { useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { CustomSelect } from "../../custom/custom-select.js";
+const SelectGroup = React.forwardRef(
+  ({ target, onChange, placeholder, value, ...props }, ref) => {
+    const { isLoading, data: groups } = useQuery({
+      queryKey: [QUERY_KEY.GET_ALL_GROUPS, { target }],
+      queryFn: async () => {
+        const { data } = await getAllGroups({ target });
+        return data;
+      }
+    });
+    const groupOptions = (groups ?? [])?.map((option) => ({
+      label: option.name,
+      value: option.id.toString()
+    }));
+    return /* @__PURE__ */ jsx(
+      CustomSelect,
+      {
+        ref,
+        isLoading,
+        value,
+        onChange,
+        options: groupOptions,
+        placeholder: placeholder ?? "Ch\u1ECDn b\u1ED9 ph\u1EADn",
+        ...props
+      }
+    );
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+var group_default = SelectGroup;
+export {
+  group_default as default
+};

package/components/campaign-detail-route/select/multi-groups.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import MultipleSelector from "../../custom/multiple-selector.js";
+import { getAllGroups } from "@zenify-omni/chat-js/api/group.js";
+import { useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { useTranslation } from "react-i18next";
+const MultiSelectGroups = React.forwardRef(
+  ({ target, onChange, ...props }, ref) => {
+    const { t } = useTranslation();
+    const { data: groupOptions } = useQuery({
+      queryKey: [QUERY_KEY.GET_ALL_GROUPS, { target }],
+      queryFn: async () => {
+        const params = {};
+        if (target) {
+          params.target = target;
+        }
+        const { data } = await getAllGroups(params);
+        return data?.map((g) => ({
+          label: g.name,
+          value: g.id.toString()
+        }));
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      MultipleSelector,
+      {
+        ref,
+        ...props,
+        placeholder: t("common:placeholder.selectDepartment", {
+          defaultValue: "Ch\u1ECDn b\u1ED9 ph\u1EADn"
+        }),
+        options: groupOptions || [],
+        onChange: (options) => onChange(options)
+      }
+    );
+  }
+);
+MultiSelectGroups.displayName = "SelectGroups";
+var multi_groups_default = MultiSelectGroups;
+export {
+  multi_groups_default as default
+};

package/components/chat-route/chat-box/ads-context-card.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const MetaIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 14",
+    fill: "none",
+    className,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M14.3525 0C17.449 0 19.9988 3.94106 20 8.63379C20 11.4967 18.7676 13.29 16.5537 13.29C14.6247 13.29 13.5606 12.2062 11.6504 9.00977L10.8154 7.60645L10.668 7.35938C10.5987 7.24274 10.5291 7.12941 10.4619 7.01758C10.355 6.83963 10.2513 6.66717 10.1494 6.50098C10.1002 6.4207 10.051 6.34221 10.0029 6.26465C9.40333 7.3251 8.5332 8.86328 8.5332 8.86328C6.44171 12.5187 5.26529 13.2899 3.62988 13.29C1.35734 13.29 0 11.5205 0 8.71582C0.000140673 4.23482 2.49235 0.00129581 5.74512 0H5.74805C5.83407 3.29673e-05 5.91933 0.00222981 6.00391 0.00683594C6.03364 0.00845225 6.06321 0.0114778 6.09277 0.0136719C6.16252 0.0188544 6.23188 0.0247442 6.30078 0.0332031C6.31381 0.0348017 6.32684 0.0363683 6.33984 0.0380859C6.42641 0.0495301 6.51224 0.064235 6.59766 0.0810547C6.61363 0.0841985 6.62957 0.0874849 6.64551 0.0908203C6.71745 0.105884 6.78908 0.122571 6.86035 0.141602C6.88056 0.146994 6.90074 0.152487 6.9209 0.158203C7.00034 0.180742 7.07942 0.205735 7.1582 0.233398C7.18138 0.241533 7.20441 0.250202 7.22754 0.258789C7.28633 0.280623 7.34479 0.304308 7.40332 0.329102C7.42929 0.3401 7.45552 0.350715 7.48145 0.362305C7.55844 0.39673 7.63519 0.4339 7.71191 0.473633C7.73254 0.48431 7.75283 0.495769 7.77344 0.506836C7.83914 0.542126 7.90506 0.578856 7.9707 0.618164C7.99254 0.631241 8.01429 0.644674 8.03613 0.658203C8.11221 0.705339 8.18848 0.754917 8.26465 0.807617C8.29115 0.825953 8.31722 0.845238 8.34375 0.864258C8.39511 0.901088 8.44657 0.939087 8.49805 0.978516C8.53183 1.00438 8.56576 1.03062 8.59961 1.05762C8.67575 1.11837 8.75252 1.18146 8.8291 1.24805C8.83639 1.25438 8.84329 1.26119 8.85059 1.26758C8.92876 1.33608 9.00713 1.4077 9.08594 1.48242C9.10422 1.49976 9.1223 1.51748 9.14062 1.53516C9.30087 1.68975 9.46204 1.85783 9.62598 2.03906C9.83631 2.27157 10.0517 2.52513 10.2705 2.80371C11.4307 1.2349 12.7129 0.000183961 14.3525 0ZM5.71875 2.17188C3.78512 2.17228 2.16309 5.4994 2.16309 8.75293C2.1631 10.2738 2.74047 11.1269 3.71191 11.127C4.65588 11.127 5.24284 10.531 6.93848 7.87305C6.9457 7.86158 7.71447 6.6401 8.98047 4.69824C8.7922 4.42871 8.61405 4.18451 8.44238 3.96484C7.39143 2.62013 6.61915 2.17188 5.71875 2.17188ZM14.2158 1.71484C13.179 1.71484 12.3068 2.52702 11.25 4.1582C11.5425 4.59219 11.8477 5.06709 12.165 5.58301L13.3379 7.53809C15.1716 10.4885 15.6327 11.1266 16.5986 11.127C17.606 11.1269 18.0927 10.2656 18.0928 8.78125C18.0928 4.88623 16.3694 1.71517 14.2158 1.71484Z",
+        fill: "hsl(var(--primary))"
+      }
+    )
+  }
+);
+const HASHTAG_RE = /(#[\p{L}\p{N}_]+)/gu;
+function renderWithHashtags(text) {
+  if (!text) return null;
+  return text.split(HASHTAG_RE).map(
+    (part, i) => part.startsWith("#") ? /* @__PURE__ */ jsx("span", { style: { color: "rgb(33, 111, 219)" }, children: part }, i) : part
+  );
+}
+function AdsContextCard({ payload, postLinkUrl }) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+  const [footerOpen, setFooterOpen] = useState(false);
+  const [imgError, setImgError] = useState(false);
+  if (!payload) return null;
+  const { ad_id, ad_name, image_url, title, body, footer } = payload;
+  const openPostLink = () => {
+    if (!postLinkUrl) return;
+    window.open(postLinkUrl, "_blank", "noopener,noreferrer");
+  };
+  const showSeeMore = !expanded && body && body.length > 120;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-2xl border border-muted bg-muted shadow-sm",
+        postLinkUrl && "cursor-pointer"
+      ),
+      onClick: openPostLink,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-start justify-between gap-2 px-4 pt-3",
+              (!image_url || imgError) && "pb-3"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
+                /* @__PURE__ */ jsx(MetaIcon, { className: "mt-1.5 h-3.5 w-5 shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate text-[15px] font-semibold text-foreground", children: ad_name || "Facebook Ads" }),
+                  ad_id && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: [
+                    "Ad ID: ",
+                    ad_id
+                  ] })
+                ] })
+              ] }),
+              postLinkUrl && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "shrink-0 rounded p-1 text-muted-foreground hover:bg-black/5 hover:text-foreground",
+                  "aria-label": t("chat:action.openAd", {
+                    defaultValue: "M\u1EDF qu\u1EA3ng c\xE1o"
+                  }),
+                  children: /* @__PURE__ */ jsx(ExternalLink, { size: 18 })
+                }
+              )
+            ]
+          }
+        ),
+        image_url && !imgError && /* @__PURE__ */ jsx("div", { className: cn("mt-3 px-2", !title && !body && "pb-2"), children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image_url,
+            alt: ad_name || "ad image",
+            className: "h-[200px] w-full rounded-md object-cover",
+            onError: () => setImgError(true)
+          }
+        ) }),
+        (title || body) && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-3 pt-3", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "text-[14px] font-semibold leading-snug text-foreground", children: title }),
+          body && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "whitespace-pre-wrap text-[14px] leading-snug text-foreground",
+                title && "mt-1",
+                !expanded && "line-clamp-3"
+              ),
+              children: renderWithHashtags(body)
+            }
+          ),
+          showSeeMore && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setExpanded(true);
+              },
+              className: "mt-1 text-[13px] font-medium text-primary hover:underline",
+              children: t("chat:action.viewMore", { defaultValue: "Xem th\xEAm" })
+            }
+          )
+        ] }),
+        footer && /* @__PURE__ */ jsxs("div", { className: "border-t border-muted bg-muted px-4 py-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setFooterOpen((o) => !o);
+              },
+              className: "text-xs text-muted-foreground hover:underline",
+              children: footerOpen ? t("chat:action.hideDetails", {
+                defaultValue: "\u1EA8n th\xF4ng tin chi ti\u1EBFt"
+              }) : t("chat:action.viewDetail", {
+                defaultValue: "Xem th\xF4ng tin chi ti\u1EBFt"
+              })
+            }
+          ),
+          footerOpen && /* @__PURE__ */ jsx("p", { className: "mt-2 whitespace-pre-wrap text-xs leading-snug text-muted-foreground", children: footer })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AdsContextCard as default
+};

package/components/chat-route/chat-box/chat-drop-file.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "../../../lib/utils.js";
+const ChatDropFile = forwardRef(function ChatDropFile2({ className, children, dropZoneProps, showDragBlur, overlay, label, ...rest }, ref) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), ...dropZoneProps, ...rest, children: [
+    showDragBlur && (overlay ?? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-50 flex items-center justify-center border-4 border-dashed border-primary/40 bg-primary/20", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-card/90 p-8 text-center text-lg font-medium text-foreground", children: label ?? t("chat:message.dropFileToUpload", {
+      defaultValue: "Th\u1EA3 t\u1EC7p v\xE0o \u0111\xE2y \u0111\u1EC3 t\u1EA3i l\xEAn"
+    }) }) })),
+    children
+  ] });
+});
+var chat_drop_file_default = ChatDropFile;
+export {
+  ChatDropFile,
+  chat_drop_file_default as default
+};

package/components/chat-route/chat-box/chat-feedback/chat-insight.js

@@ -0,0 +1,214 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useMemo, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from "../../../ui/dialog.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const MAX_VISIBLE_ITEMS = 3;
+const getItemLabel = (item, fallback = "-") => {
+  if (typeof item === "string") return item;
+  if (!item || typeof item !== "object") return fallback;
+  return item.title || item.name || item.question || item.label || fallback;
+};
+const SECTIONS = [
+  {
+    key: "documents",
+    get label() {
+      return i18n.t("chat:label.knowledgeUsed", {
+        defaultValue: "Tri th\u1EE9c s\u1EED d\u1EE5ng"
+      });
+    }
+  },
+  {
+    key: "instructions",
+    get label() {
+      return i18n.t("lumi:field.answerInstructions", {
+        defaultValue: "H\u01B0\u1EDBng d\u1EABn tr\u1EA3 l\u1EDDi"
+      });
+    }
+  },
+  {
+    key: "goals",
+    get label() {
+      return i18n.t("common:label.goal", {
+        defaultValue: "M\u1EE5c ti\xEAu"
+      });
+    }
+  },
+  {
+    key: "skills",
+    get label() {
+      return i18n.t("common:label.skill", {
+        defaultValue: "K\u1EF9 n\u0103ng"
+      });
+    }
+  }
+];
+const getMessageInsightData = (message) => {
+  const reference = message?.extra_data?.reference || message || {};
+  const documents = reference?.reference_documents || [];
+  const instructions = reference?.reference_instructions || [];
+  const goals = reference?.reference_goals || [];
+  const skills = reference?.reference_skills || [];
+  const intentCandidates = reference?.intent_candidates || message?.extra_data?.intent_candidates || [];
+  return {
+    documents,
+    instructions,
+    goals,
+    skills,
+    intentCandidates,
+    hasAny: documents.length > 0 || instructions.length > 0 || goals.length > 0 || skills.length > 0 || intentCandidates.length > 0
+  };
+};
+const InsightItem = ({ label }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border px-3 py-2", children: [
+  /* @__PURE__ */ jsx("span", { className: "text-foreground", children: label }),
+  /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+] });
+const ChatInsight = ({ open, onOpenChange, message }) => {
+  const { t } = useTranslation();
+  const [expandedSection, setExpandedSection] = useState(null);
+  const insightDetails = useMemo(
+    () => getMessageInsightData(message),
+    [message]
+  );
+  const messageText = message?.content?.text || "";
+  const handleOpenChange = (value) => {
+    if (!value) setExpandedSection(null);
+    onOpenChange(value);
+  };
+  if (expandedSection) {
+    const section = SECTIONS.find((s) => s.key === expandedSection);
+    const items = insightDetails[expandedSection] || [];
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-auto md:max-w-2xl", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:title.messageInsight", {
+        defaultValue: "Insight tin nh\u1EAFn"
+      }) }) }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground",
+          onClick: () => setExpandedSection(null),
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+            section?.label
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: items.map((item, idx) => /* @__PURE__ */ jsx(
+        InsightItem,
+        {
+          label: getItemLabel(item)
+        },
+        `${expandedSection}_${idx}`
+      )) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-auto md:max-w-2xl", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:title.messageInsight", {
+      defaultValue: "Insight tin nh\u1EAFn"
+    }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 font-semibold text-foreground", children: t("common:label.message", { defaultValue: "Tin nh\u1EAFn" }) }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-3 text-foreground", children: messageText })
+    ] }),
+    insightDetails.intentCandidates.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: t("chat:label.intentDetected", {
+        defaultValue: "Ph\xE1t hi\u1EC7n \xFD \u0111\u1ECBnh"
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: insightDetails.intentCandidates.map((candidate, idx) => {
+        const intent = candidate?.intent || {};
+        const name = intent?.name || intent?.code || candidate?.intent_name || "-";
+        const confidence = Number(candidate?.confidence) || 0;
+        const isSelected = candidate?.is_selected;
+        const widthPercent = Math.max(0, Math.min(confidence, 100));
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-3",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-40 truncate text-sm",
+                    isSelected ? "font-semibold text-foreground" : "text-foreground"
+                  ),
+                  title: name,
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "relative h-2 flex-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-full rounded-full",
+                    isSelected ? "bg-primary" : "bg-muted"
+                  ),
+                  style: { width: `${widthPercent}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "min-w-[40px] text-right text-sm tabular-nums",
+                    isSelected ? "text-foreground" : "text-muted-foreground"
+                  ),
+                  children: [
+                    confidence.toFixed(0),
+                    "%"
+                  ]
+                }
+              )
+            ]
+          },
+          candidate?.intent_id || intent?._id || idx
+        );
+      }) })
+    ] }),
+    SECTIONS.map(({ key, label }) => {
+      const items = insightDetails[key] || [];
+      const count = items.length;
+      const visibleItems = items.slice(0, MAX_VISIBLE_ITEMS);
+      return /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("p", { className: "font-semibold text-foreground", children: [
+            label,
+            " (",
+            count,
+            ")"
+          ] }),
+          count > MAX_VISIBLE_ITEMS && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-sm text-primary hover:text-primary",
+              onClick: () => setExpandedSection(key),
+              children: t("chat:action.viewMore", { defaultValue: "Xem th\xEAm" })
+            }
+          )
+        ] }),
+        count > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibleItems.map((item, idx) => /* @__PURE__ */ jsx(
+          InsightItem,
+          {
+            label: getItemLabel(item)
+          },
+          `${key}_${idx}`
+        )) }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: t("common:empty.noData", {
+          defaultValue: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u"
+        }) })
+      ] }, key);
+    })
+  ] }) });
+};
+export {
+  ChatInsight,
+  getMessageInsightData
+};