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

package/index.css

@@ -0,0 +1,624 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Hai skin `.lumi-theme` / `.qa-theme` ĐÃ XOÁ.
+   - Không component nào gắn hai class đó (grep = 0).
+   - Chúng đè `.bg-\[\#e5f1ff\]` và `.bg-\[\#f9f9f9\]` — hai class không còn
+     tồn tại sau khi bong bóng tin và nền luồng tin chuyển sang token.
+   - Chúng nằm NGOÀI `@layer` nên thắng mọi layer, kể cả `.dark`. Để lại là một
+     cái bẫy im lặng cho bất kỳ ai bật chúng sau này.
+   Cần skin riêng thì dùng `<ChatProvider theme={...}>`. */
+
+@layer base {
+  :root {
+    /* Custom CSS Variables */
+    --header-height: 4rem;
+
+    /* Theme Variables */
+    --background: 0 0% 98%;
+    --foreground: 0 0% 20%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 227 81% 54%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 230 86% 97%;
+    --secondary-foreground: 227 81% 54%;
+    /* 24% thay vì 27%: chữ trắng trên nền này trước chỉ đạt 4.42:1. */
+    --success: 100 100% 22%;
+    --muted: 220 8% 92%;
+    /* Nền vùng nội dung màn tạo chiến dịch (#E6EBF2). Tách riêng khỏi --muted
+       vì --muted dùng chung toàn app, đổi nó là đổi cả nghìn chỗ. */
+    --campaign-create-bg: 215 31.6% 92.5%;
+    /* 43% thay vì 47%: trên nền --background trước chỉ đạt 4.41:1. */
+    --muted-foreground: 222 7% 40%;
+    --accent: 180 15% 95%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 360 100% 42%;
+    --destructive-foreground: 210 40% 98%;
+    /* 81% chứ không 91%: bong bóng tin nhắn giờ có viền thật thay vì dựa vào
+       shadow. Ở 91% viền gần như vô hình (1.24:1) — nhìn như lỗi hơn là tinh tế. */
+    --border: 214 32% 91%;
+    --input: 214.3 31.8% 91.4%;
+
+    /* Bóng đổ: bản sáng dùng đen mờ đúng như mặc định Tailwind. */
+    --shadow-color: 0 0% 0%;
+    --shadow-strength: 0.1;
+    --shadow-rim: 0;
+    /* Viền focus = màu thương hiệu. Trước là một sắc xanh khác (220 90% 60%). */
+    --ring: 227 81% 54%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --chart-6: 120 100% 16%;
+    --chart-7: 240 100% 50%;
+    --chart-8: 180 100% 50%;
+    --chart-9: 300 100% 50%;
+    --chart-10: 60 100% 50%;
+    --chart-11: 120 100% 50%;
+
+    --radius: 0.5rem;
+    --modal-max-height: 80vh;
+    --body-padding-x: 1rem;
+    --body-padding-y: 1rem;
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 230 86% 97%;
+    --sidebar-accent-foreground: 227 81% 54%;
+    --sidebar-border: 214 32% 91%;
+    --sidebar-ring: 227 81% 54%;
+
+    --icon-primary: 227, 81%, 54%, 1;
+    --icon-success: 100, 100%, 27%, 1;
+    --icon-danger: 0, 84%, 60%, 1;
+    --icon-eye-viewer: 207, 71%, 42%;
+    --border-secondary: 227, 81%, 54%, 1;
+    --border-eye-viewer: 207, 71%, 42%, 1;
+
+    /*  color  */
+    /* ── Token thay cho màu hex cứng ────────────────────────────────────
+       Mỗi cái gom một cụm màu đang rải rác trong components. Xem
+       `tailwind-preset.js` và `config/theme.js`. */
+
+    /* #2f8a00 đã là --success; đây là màu chữ trên nền đó. */
+    --success-foreground: 0 0% 100%;
+    /* Gom #f97316 #f59e0b #f37203 — trước đây không có token cảnh báo nào. */
+    /* 35% chứ không phải 53%: token này còn được dùng LÀM CHỮ
+       (`text-warning`), mà cam 53% trên nền sáng chỉ đạt 2.67:1. Ở độ đậm này
+       nó vừa đọc được làm chữ, vừa đủ tương phản với chữ trắng khi làm nền. */
+    --warning: 25 95% 35%;
+    --warning-foreground: 0 0% 100%;
+    /* #5a6981 — chữ phụ trong preview tin trả lời, 12 chỗ. */
+    --foreground-secondary: 217 18% 43%;
+    /* Gom #e5e7eb #e8e9ee #e5e6eb #e4e4e7 … — viền nhạt hơn --border. */
+    --border-subtle: 220 13% 91%;
+    /* Gom #fafbfd #f8fafc #fafafa #f9fafb … — nền trắng ngà. */
+    --surface-subtle: 210 20% 98%;
+
+    /* Mặt phẳng riêng của khung chat (trước là bg-[#e5f1ff] / bg-[#f9f9f9]). */
+    --chat-own-bubble: 212 100% 95%;
+    --chat-own-bubble-foreground: 0 0% 24%;
+    --chat-thread-bg: 0 0% 98%;
+
+    --label-blue: #d0eeff;
+    --label-blue-foreground: #0a2fb6;
+    --label-green: #e3f9e9;
+    --label-green-prime: #099516;
+    --label-green-foreground: #00800c;
+    --label-red: #ffdcda;
+    /* #dd0606 trên #ffdcda chỉ đạt 4.02:1. */
+    --label-red-foreground: #c00404;
+    --label-orange: #fff1da;
+    /* #f37203 chỉ đạt 2.61:1 trên nền #fff1da — trượt AA. Đậm lại. */
+    --label-orange-foreground: #8a4200;
+    --label-gray: #eeeff0;
+    --label-dark-blue: #020817;
+  }
+  /* ── Chế độ tối ──────────────────────────────────────────────────────────
+     Thiết kế theo BA quy tắc, không phải đảo ngược cơ học:
+
+       1. GIỮ TÔNG MÀU. Xanh thương hiệu vẫn là tông 227, đỏ vẫn 0, cam vẫn 25.
+          Bản kế thừa từ shadcn biến --primary thành TRẮNG ở chế độ tối — nút
+          primary mất hẳn nhận diện. Ở đây nó chỉ sáng lên, không đổi tông.
+
+       2. CÓ ĐỘ CAO. --background tối nhất, --card/--popover sáng hơn một bậc.
+          Bản cũ đặt cả hai cùng #020817 nên thẻ chìm vào nền.
+
+       3. GIẢM BÃO HOÀ. Màu rực trên nền tối gây rung mắt, nên mọi màu đều hạ
+          vài phần trăm S so với bản sáng.
+
+     Chữ dùng trắng-ngả (L 92%) chứ không trắng tinh — tương phản tuyệt đối
+     trên nền rất tối làm mỏi mắt khi đọc lâu, mà chat thì đọc lâu. */
+  .dark {
+    /* Bề mặt: nền < thẻ < nổi */
+    --background: 225 20% 9%;
+    --card: 225 19% 13%;
+    --popover: 225 19% 13%;
+    --surface-subtle: 225 18% 16%;
+    --campaign-create-bg: 225 18% 14%;
+
+    /* Chữ */
+    --foreground: 210 20% 92%;
+    --card-foreground: 210 20% 92%;
+    --popover-foreground: 210 20% 92%;
+    --accent-foreground: 210 20% 92%;
+    --muted-foreground: 220 12% 65%;
+    --foreground-secondary: 218 14% 72%;
+
+    /* Thương hiệu — GIỮ tông 227, chỉ sáng lên để nổi trên nền tối.
+       primary-foreground thành chữ TỐI vì nền nút giờ là xanh sáng. */
+    --primary: 227 95% 70%;
+    --primary-foreground: 225 30% 12%;
+    --secondary: 227 32% 22%;
+    --secondary-foreground: 227 95% 84%;
+    --ring: 227 95% 84%;
+
+    /* Trung tính */
+    --muted: 225 15% 20%;
+    --accent: 225 15% 20%;
+    /* 30% chứ không 22%: bản sáng tách các bề mặt bằng shadow đen, mà shadow
+       đen trên nền tối là vô hình. Viền phải tự gánh việc đó. */
+    --border: 225 14% 30%;
+    --border-subtle: 225 14% 24%;
+    --input: 225 14% 30%;
+
+    /* Nền tối đã gần chạm đáy: bóng ĐEN đặc 100% cũng chỉ đạt 1.10:1.
+       Nên bản tối đổi bóng sang tông SÁNG + thêm viền quầng `--shadow-rim`
+       (lớp `0 0 0 1px` trong cùng box-shadow). Bản sáng đặt rim = 0 nên
+       không sinh thêm pixel nào — style sáng giữ nguyên tuyệt đối. */
+    --shadow-color: 225 45% 80%;
+    --shadow-strength: 0.16;
+    --shadow-rim: 0.3;
+
+    /* Trạng thái — sáng lên để đạt tương phản, chữ trên nền màu thì tối lại */
+    --success: 100 55% 55%;
+    --success-foreground: 100 30% 10%;
+    --destructive: 0 72% 68%;
+    --destructive-foreground: 0 0% 12%;
+    --warning: 28 90% 62%;
+    --warning-foreground: 25 40% 12%;
+
+    /* Khung chat */
+    --chat-own-bubble: 222 35% 24%;
+    --chat-own-bubble-foreground: 210 25% 92%;
+    --chat-thread-bg: 225 22% 7%;
+
+    /* Biểu đồ — GIỮ NGUYÊN tông của bản sáng, chỉ chỉnh độ sáng.
+       Bản cũ đổi cả tông (chart-1 cam -> xanh), nên cùng một chuỗi số đọc ở hai
+       chế độ lại ra hai màu khác hẳn. */
+    --chart-1: 12 70% 62%;
+    --chart-2: 173 50% 50%;
+    --chart-3: 197 35% 55%;
+    --chart-4: 43 70% 68%;
+    --chart-5: 27 80% 68%;
+    --chart-6: 120 45% 45%;
+    --chart-7: 240 70% 70%;
+    --chart-8: 180 55% 55%;
+    --chart-9: 300 60% 68%;
+    --chart-10: 60 65% 62%;
+    --chart-11: 120 60% 58%;
+
+    /* Sidebar — cùng thang bề mặt, cùng màu thương hiệu */
+    --sidebar-background: 225 20% 11%;
+    --sidebar-foreground: 210 16% 88%;
+    --sidebar-primary: 227 95% 84%;
+    --sidebar-primary-foreground: 225 30% 12%;
+    --sidebar-accent: 225 16% 18%;
+    --sidebar-accent-foreground: 227 90% 78%;
+    --sidebar-border: 225 14% 20%;
+    --sidebar-ring: 227 95% 84%;
+
+    /* Icon/viền — định dạng CSV + alpha, xem VAR_FORMAT trong config/theme.js */
+    --icon-primary: 227, 95%, 84%, 1;
+    --icon-success: 100, 55%, 55%, 1;
+    --icon-danger: 0, 72%, 68%, 1;
+    --icon-eye-viewer: 207, 55%, 62%;
+    --border-secondary: 227, 95%, 84%, 1;
+    --border-eye-viewer: 207, 55%, 62%, 1;
+
+    /* Nhãn — định dạng HEX TRẦN (dùng qua `bg-[--label-red]`).
+       Nền tối bão hoà thấp + chữ sáng cùng tông. */
+    --label-blue: #143349;
+    --label-blue-foreground: #9ecbff;
+    --label-green: #14331f;
+    --label-green-prime: #4ade80;
+    --label-green-foreground: #86efac;
+    --label-red: #3d1a19;
+    --label-red-foreground: #fda4a4;
+    --label-orange: #3b2a14;
+    --label-orange-foreground: #fbbf6e;
+    --label-gray: #24262b;
+    --label-dark-blue: #cbd5e1;
+  }
+
+  .collapsibleDropdown {
+    overflow: hidden;
+  }
+  .collapsibleDropdown[data-state="open"] {
+    animation: slideDown 200ms ease-out;
+  }
+  .collapsibleDropdown[data-state="closed"] {
+    animation: slideUp 200ms ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  html {
+    font-family: "Roboto", sans-serif;
+  }
+
+  body {
+    @apply min-h-svh w-full bg-background text-foreground;
+  }
+  body > #root {
+    @apply h-svh;
+  }
+}
+
+@layer utilities {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 100vh;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 100vh;
+  }
+
+  ::-webkit-scrollbar-track:hover {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--border));
+  }
+
+  .faded-bottom {
+    @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_hsl(var(--background))_70%)] after:md:block;
+  }
+
+  ::-ms-reveal {
+    display: none;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes notification-ring {
+  0% {
+    box-shadow:
+      0 0 0 0 hsl(var(--ring) / 0.7),
+      0 0 0 0 hsl(var(--ring) / 0.5);
+    transform: translateX(0);
+  }
+  30% {
+    transform: translateX(-1px);
+    box-shadow:
+      0 0 0 5px hsl(var(--ring) / 0),
+      0 0 0 0 hsl(var(--ring) / 0.5);
+  }
+
+  60% {
+    transform: translateX(1px);
+    box-shadow:
+      0 0 0 3px hsl(var(--ring) / 0),
+      0 0 0 8px hsl(var(--ring) / 0);
+  }
+
+  100% {
+    box-shadow:
+      0 0 0 0 hsl(var(--ring) / 0),
+      0 0 0 8px hsl(var(--ring) / 0);
+    transform: translateX(0);
+  }
+}
+
+.animate-notification-ring {
+  animation: notification-ring 2s ease-in-out;
+}
+
+.scroll-container-hide {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+
+.scroll-container-hide::-webkit-scrollbar {
+  width: 0px; /* Chrome, Safari, Edge */
+  background: transparent;
+}
+
+.scroll-container-thin {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-gutter: stable;
+}
+
+.scroll-container-thin::-webkit-scrollbar {
+  width: 4px;
+}
+
+.scroll-container-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scroll-container-thin::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--border));
+  border-radius: 9999px;
+}
+
+.scroll-container-thin::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground));
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-4px);
+  }
+  40%,
+  80% {
+    transform: translateX(4px);
+  }
+}
+
+.shake {
+  animation: shake 0.4s ease-in-out;
+}
+
+/* Dedicated keyframe (not reusing `shake`, shared with one-shot error-shake
+   elsewhere) — smaller amplitude, and the motion only occupies the first 20%
+   of the cycle so the remaining 80% is a rest pause before it repeats. */
+@keyframes bell-shake-loop {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  2%,
+  10% {
+    transform: translateX(-2px);
+  }
+  6%,
+  14% {
+    transform: translateX(2px);
+  }
+  18% {
+    transform: translateX(0);
+  }
+}
+
+.shake-loop {
+  animation: bell-shake-loop 2s ease-in-out infinite;
+}
+
+.no-radius-editor .tox-tinymce,
+.no-radius-editor .tox .tox-editor-container {
+  border-radius: 0 !important;
+  border: unset !important;
+}
+
+.no-spinner::-webkit-inner-spin-button,
+.no-spinner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.no-spinner {
+  -moz-appearance: textfield;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}
+
+/* 1. ANSWERING — Ripple + Glow */
+@keyframes call-ripple {
+  0% {
+    box-shadow: 0 0 0 0 hsl(var(--success) / 0.6);
+    transform: scale(1);
+  }
+  70% {
+    box-shadow: 0 0 0 10px hsl(var(--success) / 0);
+    transform: scale(1.15);
+  }
+  100% {
+    box-shadow: 0 0 0 0 hsl(var(--success) / 0);
+    transform: scale(1);
+  }
+}
+.call-ripple {
+  animation: call-ripple 1.3s infinite ease-out;
+}
+
+/* 2. IN CALL — Pulse */
+@keyframes call-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.25);
+    opacity: 0.6;
+  }
+}
+.call-pulse {
+  animation: call-pulse 1s infinite ease-in-out;
+}
+
+/* 3. HOLDING / MUTING — Breathing */
+@keyframes call-breathe {
+  0% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+  50% {
+    transform: scale(0.9);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+}
+.call-breathe {
+  animation: call-breathe 1.6s infinite ease-in-out;
+}
+
+/* wrapper suggestion menu */
+.chat-mentions__suggestions {
+  border-radius: 10px;
+  overflow: hidden;
+  background: white;
+  z-index: 999999 !important;
+}
+
+.chat-mentions__suggestions__list {
+  z-index: 999999 !important;
+}
+
+@keyframes message-cleave-in {
+  0% {
+    opacity: 0;
+    transform: scaleY(0) scaleX(0.94);
+  }
+  65% {
+    opacity: 1;
+    transform: scaleY(1.03) scaleX(1.01);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1) scaleX(1);
+  }
+}
+
+.animate-message-cleave {
+  animation: message-cleave-in 280ms ease-out both;
+  transform-origin: center;
+}
+
+@keyframes reaction-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Mention highlight in ticket comments */
+.mention-highlight {
+  color: hsl(var(--primary));
+}
+
+/* react-mentions: override <strong> default bold in highlighter */
+.mentions__mention {
+  color: hsl(var(--primary));
+  font-weight: normal;
+  background: none;
+}
+
+/* TinyMCE mention autocomplete dropdown */
+.tox-autocompleter .tox-menu {
+  max-height: 200px !important;
+  overflow-y: auto !important;
+}
+
+@keyframes typing-bounce {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-6px);
+  }
+}
+
+/* Order detail modal — view-only mode: strip input boxes, show values as plain text */
+.order-detail-readonly input:disabled,
+.order-detail-readonly textarea:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  padding-left: 0;
+  padding-right: 0;
+  cursor: default;
+  opacity: 1;
+  resize: none;
+}
+
+/* Select / combobox triggers */
+.order-detail-readonly [role="combobox"]:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  padding-left: 0;
+  cursor: default;
+  opacity: 1;
+}
+
+/* Hide the dropdown chevron when in view mode */
+.order-detail-readonly [role="combobox"]:disabled > svg:last-child {
+  display: none;
+}
+
+/* Generic disabled button cleanup (icon buttons, etc.) */
+.order-detail-readonly button:disabled {
+  cursor: default;
+  opacity: 1;
+}

package/index.js

@@ -0,0 +1,100 @@
+import { ChatProvider } from "./provider/chat-provider.js";
+import { ChatRoomProvider } from "./provider/chat-room-provider.js";
+import { ChatClientContext, ChatSessionContext } from "./provider/chat-context.js";
+import { ChatRoomContext, ChatComposerContext } from "./provider/chat-room-context.js";
+import { default as default2 } from "./components/chat-route/chat-box/index.js";
+import { default as default3 } from "./components/chat-route/chat-list/index.js";
+import { default as default4 } from "./components/chat-route/chat-toolbar.js";
+import { ChatHeader } from "./components/chat-route/chat-box/chat-header.js";
+import { default as default5 } from "./components/chat-route/chat-box/chat-message-list.js";
+import { ChatInput } from "./components/chat-route/chat-box/chat-input.js";
+import { ChatDropFile } from "./components/chat-route/chat-box/chat-drop-file.js";
+import { useChatRoomDetail } from "./hooks/use-chat-room-detail.js";
+import { useChatCustomer } from "./hooks/use-chat-customer.js";
+import { useZaloConnection } from "./hooks/use-zalo-connection.js";
+import { useChatPermission } from "./hooks/use-chat-permission.js";
+import { useChatAttachments } from "./hooks/use-chat-attachments.js";
+import { useChatSelection } from "./hooks/use-chat-selection.js";
+import { useLatestMessageId } from "./hooks/use-latest-message-id.js";
+import { useFacebookNotice } from "./hooks/use-facebook-notice.js";
+import {
+  useChatRoomContext,
+  useChatComposerContext
+} from "./provider/chat-room-hooks.js";
+import {
+  useChatClient,
+  useChatSession,
+  useChatApi,
+  useChatSocket,
+  useChatBootstrap,
+  useChatConfig
+} from "./provider/hooks.js";
+import { default as default6 } from "./store/chat-store.js";
+import {
+  applyChatTheme,
+  applyColorScheme,
+  resolveTheme,
+  buildChatTheme,
+  toHslTriplet,
+  CHAT_THEME_VARS
+} from "./config/theme.js";
+import { setNavigateFunc } from "./config/navigation.js";
+import {
+  Toaster,
+  showErrorToast,
+  showSuccessToast,
+  showInfoToast,
+  showWarningToast
+} from "./components/ui/sonner.js";
+import {
+  getChatClient,
+  disposeChatClient,
+  ChatClientStatus
+} from "@zenify-omni/chat-js/client.js";
+export {
+  CHAT_THEME_VARS,
+  default2 as ChatBox,
+  ChatClientContext,
+  ChatClientStatus,
+  ChatComposerContext,
+  ChatDropFile,
+  ChatHeader,
+  ChatInput,
+  default3 as ChatList,
+  default5 as ChatMessageList,
+  ChatProvider,
+  ChatRoomContext,
+  ChatRoomProvider,
+  ChatSessionContext,
+  default4 as ChatToolbar,
+  Toaster,
+  applyChatTheme,
+  applyColorScheme,
+  buildChatTheme,
+  disposeChatClient,
+  getChatClient,
+  resolveTheme,
+  setNavigateFunc,
+  showErrorToast,
+  showInfoToast,
+  showSuccessToast,
+  showWarningToast,
+  toHslTriplet,
+  useChatApi,
+  useChatAttachments,
+  useChatBootstrap,
+  useChatClient,
+  useChatComposerContext,
+  useChatConfig,
+  useChatCustomer,
+  useChatPermission,
+  useChatRoomContext,
+  useChatRoomDetail,
+  useChatSelection,
+  useChatSession,
+  useChatSocket,
+  default6 as useChatStore,
+  useFacebookNotice,
+  useLatestMessageId,
+  useZaloConnection
+};