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

package/public/images/ticket_sources/whatsapp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 360 362"><path fill="#25D366" fill-rule="evenodd" d="M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z" clip-rule="evenodd"/></svg>

package/public/placeholder.svg

@@ -0,0 +1,13 @@
+<!-- Ảnh thay thế khi `url`/`preview` của một mục rỗng. Xem
+     components/custom/field-file-upload/preview-images-modal.jsx và
+     preview-list-image.jsx (`src={image.url || '/placeholder.svg'}`).
+
+     File này KHÔNG có trong contact-center-web — tức là ở repo gốc nhánh
+     fallback đó cũng hỏng ảnh, chỉ là hiếm khi chạy tới. Dựng ở đây cho đủ. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"
+     role="img" aria-label="Không có ảnh">
+  <rect width="96" height="96" rx="8" fill="#F1F3F5"/>
+  <path d="M24 64l14-18 10 12 8-9 16 15z" fill="#CED4DA"/>
+  <circle cx="35" cy="34" r="6" fill="#CED4DA"/>
+  <rect x="0.5" y="0.5" width="95" height="95" rx="7.5" fill="none" stroke="#DEE2E6"/>
+</svg>

package/store/app-status-store.js

@@ -0,0 +1,17 @@
+import { create } from "./index.js";
+import { devtools } from "./devtools.js";
+const useAppStatusStore = create(
+  devtools(
+    (set) => ({
+      isVisible: true,
+      isInternetConnected: true,
+      setIsVisible: (status) => set({ isVisible: status }),
+      setIsInternetConnected: (status) => set({ isInternetConnected: status })
+    }),
+    { name: "app-status-store" }
+  )
+);
+var app_status_store_default = useAppStatusStore;
+export {
+  app_status_store_default as default
+};

package/store/chat-display-config-store.js

@@ -0,0 +1,182 @@
+import { create } from "./index.js";
+import { devtools } from "./devtools.js";
+import { settingUserConfig } from "@zenify-omni/chat-js/api/settings/common.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { toFieldOverride } from "@zenify-omni/chat-js/utils/field-layout.js";
+import {
+  DEFAULT_PIN_COUNT,
+  MENU_SOURCES
+} from "../components/chat-route/chat-list/filter-chat-sources.js";
+import {
+  API_USER_CONFIG_KEYS,
+  CHAT_AD_INFO_FIELD_KEYS,
+  CHAT_CUSTOMER_MAIN_FIELD_KEYS,
+  CHAT_TAB_CONFIGS,
+  CHAT_TAG_FIELD_KEYS,
+  DEFAULT_INFO_GROUP_CONFIGS,
+  INFO_PANEL_GROUP,
+  INFO_PANEL_TAB_KEYS,
+  PREDEFINED_FILTER_CHIPS
+} from "../components/settings-route/chat-layout/detail/constants.js";
+import {
+  resolveInfoFields,
+  resolveInfoGroupOrder,
+  resolvePinnedFilterIds,
+  resolveSources,
+  resolveStatusTabs
+} from "./chat-display-config.resolvers.js";
+const LOCAL_STORAGE_KEYS = {
+  sources: "pinned-sources",
+  predefinedChips: "visible-predefined-chip-ids"
+};
+const PREDEFINED_FILTER_IDS = PREDEFINED_FILTER_CHIPS.map((chip) => chip.id);
+const DEFAULT_CONFIG = {
+  // Chỉ gồm kênh thật; nút "Tất cả" là mặc định của dải icon nên nơi render tự
+  // đặt ở đầu, không nằm trong cấu hình.
+  sources: MENU_SOURCES.slice(0, DEFAULT_PIN_COUNT),
+  predefinedFilterIds: PREDEFINED_FILTER_IDS,
+  statusTabs: CHAT_TAB_CONFIGS.map((tab) => tab.value),
+  infoTabs: INFO_PANEL_TAB_KEYS,
+  // Cùng hình dạng với `info_group_configs` của bố cục ({key, is_hidden}) để
+  // resolver đọc chung một kiểu dữ liệu cho cả hai lớp.
+  infoGroups: DEFAULT_INFO_GROUP_CONFIGS,
+  infoFields: {
+    [INFO_PANEL_GROUP.CONTACT_MAIN]: CHAT_CUSTOMER_MAIN_FIELD_KEYS,
+    [INFO_PANEL_GROUP.CONTACT_EXTRA]: [],
+    [INFO_PANEL_GROUP.INFO_ADS]: CHAT_AD_INFO_FIELD_KEYS,
+    [INFO_PANEL_GROUP.TAGS]: CHAT_TAG_FIELD_KEYS
+  },
+  // Bố cục lưu key nhóm trường động kèm tiền tố nguồn. Nguồn không có mặc định:
+  // luôn suy từ `customer.crm_type`, nạp qua `setDynamicDefaultFields`.
+  extraFieldGroupKey: INFO_PANEL_GROUP.CONTACT_EXTRA
+};
+const persistLocal = (storageKey, value) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(value));
+  } catch {
+  }
+};
+const persistUserConfig = async (configKey, value) => {
+  const user = getUser();
+  if (!user?._id || !configKey) return;
+  await settingUserConfig({
+    data: { user_id: user._id, [configKey]: JSON.stringify(value) }
+  });
+};
+const useChatDisplayConfigStore = create(
+  devtools(
+    (set, get) => ({
+      defaultConfig: DEFAULT_CONFIG,
+      // null = workspace/tenant chưa dựng bố cục -> rơi về defaultConfig.
+      layoutConfig: null,
+      // { sources, predefinedChips, infoTabs, infoGroups, infoFields: {} }
+      // mỗi mảnh dạng { items, hiddenKeys }; thiếu khoá = người dùng chưa chỉnh.
+      overrideConfig: { infoFields: {} },
+      isReady: false,
+      setLayoutConfig: (layoutConfig) => set({ layoutConfig }),
+      setOverrideConfig: (overrideConfig) => set({
+        overrideConfig: { infoFields: {}, ...overrideConfig },
+        isReady: true
+      }),
+      // Nhóm mở rộng lấy field theo cấu hình field động của tenant, và tuỳ loại
+      // khách đang mở mà đọc nhánh `contact:` hay `lead:` trong bố cục — cả hai
+      // chỉ biết được lúc chạy.
+      setDynamicDefaultFields: (groupKey, fieldKeys, extraFieldSource) => set((state) => {
+        const { defaultConfig } = state;
+        const nextFields = fieldKeys ?? [];
+        const current = defaultConfig.infoFields[groupKey] ?? [];
+        const isSameFields = current.length === nextFields.length && current.every((key, index) => key === nextFields[index]);
+        if (groupKey !== defaultConfig.extraFieldGroupKey) {
+          if (isSameFields) return state;
+          return {
+            defaultConfig: {
+              ...defaultConfig,
+              infoFields: {
+                ...defaultConfig.infoFields,
+                [groupKey]: nextFields
+              }
+            }
+          };
+        }
+        if (isSameFields && extraFieldSource === defaultConfig.extraFieldSource)
+          return state;
+        return {
+          defaultConfig: {
+            ...defaultConfig,
+            extraFieldSource,
+            infoFields: {
+              ...defaultConfig.infoFields,
+              [groupKey]: nextFields
+            }
+          }
+        };
+      }),
+      applySources: (nextShown, nextHiddenByKey) => {
+        const value = toFieldOverride(nextShown, nextHiddenByKey);
+        set((state) => ({
+          overrideConfig: { ...state.overrideConfig, sources: value }
+        }));
+        persistLocal(LOCAL_STORAGE_KEYS.sources, value);
+      },
+      applyChips: (nextShown, nextHiddenByKey) => {
+        const value = toFieldOverride(nextShown, nextHiddenByKey);
+        set((state) => ({
+          overrideConfig: { ...state.overrideConfig, predefinedChips: value }
+        }));
+        persistLocal(LOCAL_STORAGE_KEYS.predefinedChips, value);
+      },
+      applyInfoTabs: (nextShown, nextHiddenByKey) => {
+        const value = toFieldOverride(nextShown, nextHiddenByKey);
+        set((state) => ({
+          overrideConfig: { ...state.overrideConfig, infoTabs: value }
+        }));
+        persistUserConfig(API_USER_CONFIG_KEYS.infoTabs, value);
+      },
+      applyInfoGroups: (nextShown, nextHiddenByKey) => {
+        const value = toFieldOverride(nextShown, nextHiddenByKey);
+        set((state) => ({
+          overrideConfig: { ...state.overrideConfig, infoGroups: value }
+        }));
+        persistUserConfig(API_USER_CONFIG_KEYS.infoGroups, value);
+      },
+      applyInfoFields: (groupKey, nextShown, nextHiddenByKey) => {
+        const value = toFieldOverride(nextShown, nextHiddenByKey);
+        set((state) => ({
+          overrideConfig: {
+            ...state.overrideConfig,
+            infoFields: {
+              ...state.overrideConfig.infoFields,
+              [groupKey]: value
+            }
+          }
+        }));
+        persistUserConfig(API_USER_CONFIG_KEYS.infoFields[groupKey], value);
+      },
+      getSnapshot: () => {
+        const { defaultConfig, layoutConfig, overrideConfig } = get();
+        return { defaultConfig, layoutConfig, overrideConfig };
+      }
+    }),
+    { name: "chat-display-config-store" }
+  )
+);
+const pickLayers = (state) => ({
+  defaultConfig: state.defaultConfig,
+  layoutConfig: state.layoutConfig,
+  overrideConfig: state.overrideConfig
+});
+const selectSources = (state) => resolveSources(pickLayers(state));
+const selectPinnedFilterIds = (state) => resolvePinnedFilterIds(pickLayers(state));
+const selectStatusTabs = (state) => resolveStatusTabs(pickLayers(state));
+const selectInfoGroupOrder = (state) => resolveInfoGroupOrder(pickLayers(state));
+const selectInfoFields = (groupKey) => (state) => resolveInfoFields({ ...pickLayers(state), groupKey });
+var chat_display_config_store_default = useChatDisplayConfigStore;
+export {
+  LOCAL_STORAGE_KEYS,
+  chat_display_config_store_default as default,
+  selectInfoFields,
+  selectInfoGroupOrder,
+  selectPinnedFilterIds,
+  selectSources,
+  selectStatusTabs
+};

package/store/chat-display-config.resolvers.js

@@ -0,0 +1,88 @@
+import { normalizeFieldOverride } from "@zenify-omni/chat-js/utils/field-layout.js";
+function mergeWithOverride(base, override) {
+  const baseKeys = Array.isArray(base) ? base : [];
+  const normalized = normalizeFieldOverride(override);
+  if (!normalized) return baseKeys;
+  const known = /* @__PURE__ */ new Set([...normalized.items, ...normalized.hiddenKeys]);
+  return [...normalized.items, ...baseKeys.filter((key) => !known.has(key))];
+}
+const configuredKeys = (values, allowedKeys) => (values ?? []).filter((value) => allowedKeys.includes(value));
+function resolveSources({
+  defaultConfig,
+  layoutConfig,
+  overrideConfig
+}) {
+  const base = layoutConfig ? layoutConfig.sources ?? [] : defaultConfig.sources;
+  const finals = mergeWithOverride(base, overrideConfig?.sources);
+  return finals;
+}
+function resolvePinnedFilterIds({
+  defaultConfig,
+  layoutConfig,
+  overrideConfig
+}) {
+  const base = layoutConfig ? configuredKeys(
+    layoutConfig.pined_filter_ids,
+    defaultConfig.predefinedFilterIds
+  ) : defaultConfig.predefinedFilterIds;
+  const finals = mergeWithOverride(base, overrideConfig?.predefinedChips);
+  return finals;
+}
+function resolveStatusTabs({ defaultConfig, layoutConfig }) {
+  if (!layoutConfig) return defaultConfig.statusTabs;
+  return configuredKeys(layoutConfig.tag_configs, defaultConfig.statusTabs);
+}
+function resolveInfoTabs({
+  defaultConfig,
+  layoutConfig,
+  overrideConfig
+}) {
+  const base = layoutConfig ? configuredKeys(layoutConfig.info_tab_configs, defaultConfig.infoTabs) : defaultConfig.infoTabs;
+  const finals = mergeWithOverride(base, overrideConfig?.infoTabs);
+  return finals;
+}
+const infoGroupConfigs = ({ defaultConfig, layoutConfig }) => {
+  const allowedKeys = defaultConfig.infoGroups.map((config) => config.key);
+  const configs = layoutConfig ? layoutConfig.info_group_configs ?? [] : defaultConfig.infoGroups;
+  return configs.filter((config) => allowedKeys.includes(config?.key));
+};
+function resolveInfoGroupOrder(layers) {
+  return infoGroupConfigs(layers).map((config) => config.key);
+}
+function resolveInfoGroups({ overrideConfig, ...layers }) {
+  const base = infoGroupConfigs(layers).filter((config) => !config.is_hidden).map((config) => config.key);
+  const finals = mergeWithOverride(base, overrideConfig?.infoGroups);
+  return finals;
+}
+const stripExtraFieldSource = (values, source) => {
+  if (!source) return [];
+  return (values ?? []).filter((value) => value.startsWith(`${source}:`)).map((value) => value.slice(source.length + 1));
+};
+function resolveInfoFields({
+  defaultConfig,
+  layoutConfig,
+  overrideConfig,
+  groupKey
+}) {
+  const defaultFields = defaultConfig.infoFields?.[groupKey] ?? [];
+  const layoutFields = layoutConfig?.info_field_configs?.[groupKey];
+  const base = layoutConfig ? configuredKeys(
+    defaultConfig.extraFieldGroupKey === groupKey ? stripExtraFieldSource(layoutFields, defaultConfig.extraFieldSource) : layoutFields,
+    defaultFields
+  ) : defaultFields;
+  const finalFields = mergeWithOverride(
+    base,
+    overrideConfig?.infoFields?.[groupKey]
+  );
+  return finalFields;
+}
+export {
+  mergeWithOverride,
+  resolveInfoFields,
+  resolveInfoGroupOrder,
+  resolveInfoGroups,
+  resolveInfoTabs,
+  resolvePinnedFilterIds,
+  resolveSources,
+  resolveStatusTabs
+};

package/store/chat-store-helpers.js

@@ -0,0 +1,62 @@
+import { ChatFilterAssignStatus } from "@zenify-omni/chat-js/constants/chat-message.js";
+function isReceivedChatBySession(session) {
+  return session?.is_received === true;
+}
+const isReceivedChat = (chat) => {
+  return isReceivedChatBySession(chat?.session);
+};
+function isClosedChatBySession(session) {
+  return session?.status === "closed";
+}
+const isClosedChat = (chat) => {
+  return isClosedChatBySession(chat?.session);
+};
+const getReceivedSessionPayload = (isReceived = true) => {
+  return { session: { is_received: isReceived } };
+};
+const getClosedSessionPayload = () => {
+  return { session: { status: "closed" } };
+};
+const getFilteredChatsForDisplay = (chatList, currentTab) => {
+  if (currentTab === ChatFilterAssignStatus.Closed) {
+    return chatList.filter((chat) => isClosedChat(chat));
+  }
+  if (currentTab === ChatFilterAssignStatus.Received) {
+    return chatList.filter(
+      (chat) => isReceivedChat(chat) && !isClosedChat(chat)
+    );
+  }
+  return chatList.filter((chat) => !isReceivedChat(chat) && !isClosedChat(chat));
+};
+const isChatSelected = (chatId, { isSelectAll = false, selectedChatIds = [], excludeChatIds = [] } = {}) => isSelectAll ? !excludeChatIds.includes(chatId) : selectedChatIds.includes(chatId);
+const getTabKeyFromStatus = (tab) => {
+  if (tab === ChatFilterAssignStatus.Closed) return "closedTab";
+  return tab === ChatFilterAssignStatus.Received ? "unreadReceivedTab" : "notReceivedTab";
+};
+const getTabStatusFromChat = (chat) => {
+  if (isClosedChat(chat)) return ChatFilterAssignStatus.Closed;
+  if (isReceivedChat(chat)) return ChatFilterAssignStatus.Received;
+  return ChatFilterAssignStatus.NotReceived;
+};
+const getTabStatusFromFilterChat = (chat) => {
+  if (chat?.state === "closed") return ChatFilterAssignStatus.Closed;
+  if (chat?.is_received === true) return ChatFilterAssignStatus.Received;
+  return ChatFilterAssignStatus.NotReceived;
+};
+const shouldCountForTab = () => {
+  return true;
+};
+export {
+  getClosedSessionPayload,
+  getFilteredChatsForDisplay,
+  getReceivedSessionPayload,
+  getTabKeyFromStatus,
+  getTabStatusFromChat,
+  getTabStatusFromFilterChat,
+  isChatSelected,
+  isClosedChat,
+  isClosedChatBySession,
+  isReceivedChat,
+  isReceivedChatBySession,
+  shouldCountForTab
+};