impact-ui 5.0.1-chart.1 → 5.0.2-alpha.1

package/dist/components/TableChat/TableChatSidePanel.js

@@ -1,6 +1,8 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}:root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px;--ia-modal-backdrop:#0d152ccc}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}#table-chat-side-panel .impact_drawer_container{background:#fff}#table-chat-side-panel .impact_drawer_header{background:#eceefd;border-bottom:1px solid #d9dde7}#table-chat-side-panel .impact_drawer_body{padding:0}.table-chat-container{box-sizing:border-box;display:flex;flex-direction:row;gap:10px;height:100%;overflow:hidden;width:100%}.table-chat-container .table-left-panel-container{flex:0 0 350px;flex-shrink:0;max-width:350px;width:350px}.table-chat-container .table-chat-right-section-container{flex:1 1 0;max-width:100%;min-width:0;width:auto}.empty-container{align-items:center;display:flex;justify-content:center}.empty-container img{height:197px;width:190px}.empty-container p:first-of-type{color:#1f2b4d;font-size:20px;font-style:normal;font-weight:800;line-height:30px}.empty-container p:nth-of-type(2){color:#7a8294;font-size:16px;font-style:normal;font-weight:500;line-height:125%;text-align:center}.loader-padding{padding:16px;width:100%}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}:root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px;--ia-modal-backdrop:#0d152ccc}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.table-chat-panel .impact_drawer_container{background:#f8f9fb}.table-chat-panel .impact_drawer_header{background:#fff;border-bottom:1px solid #d9dde7;box-sizing:border-box;height:auto;padding:12px 16px}.table-chat-panel .impact_drawer_header .impact_drawer_heading{color:#1f2b4d;font-size:20px;font-weight:800;line-height:30px}.table-chat-panel .impact_drawer_header .table-chat-panel-close{height:26px;min-width:26px;padding:0;width:26px}.table-chat-panel .impact_drawer_body{height:calc(100% - 56px)!important;padding:6px}.table-chat-container{box-sizing:border-box;display:flex;flex-direction:row;gap:10px;height:100%;overflow:hidden;padding:4px;width:100%}.table-chat-container .table-left-panel-container{flex:0 0 350px;flex-shrink:0;max-width:350px;width:350px;z-index:2}.empty-container{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;justify-content:center;max-width:100%;padding:16px;text-align:center;width:100%}.empty-container img{height:197px;object-fit:contain;width:190px}.empty-container__title{color:#1f2b4d;font-size:20px;font-style:normal;font-weight:800;line-height:30px}.empty-container__subtitle{color:#7a8294;font-size:16px;font-style:normal;font-weight:500;line-height:1.25;text-align:center}.loader-padding{padding:16px;width:100%}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useMemo, useEffect } from "react";
+import default_1 from "../../node_modules/@mui/icons-material/Close.js";
+import { Button } from "../Button/index.js";
 import { Panel } from "../Panel/index.js";
 import { Prompt } from "../Prompt/index.js";
 import { Toast } from "../Toast/index.js";
@@ -13,8 +15,8 @@ import { EmptyContainer } from "./EmptyContainer.js";
 import { formatChatHeaderTimestamp } from "./utils/formatChatTimestamp.js";
 
 import { useTranslation } from "../../i18n/useTranslation.js";
-const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
+const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration, entryContext = null }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R;
   const { t } = useTranslation();
   const [selectedChannelId, setSelectedChannelId] = useState(null);
   const [selectedChannelInfo, setSelectedChannelInfo] = useState(null);
@@ -171,9 +173,14 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
       setToastVariant("info");
     }
   };
-  const handleChatClick = async (chatId, selectedChatData) => {
+  const handleChatClick = async (chatId, selectedChatData, options = {}) => {
     var _a2;
-    setCurrentSelectedScreen("chats");
+    const { screen, keepScreen = false } = options;
+    if (screen) {
+      setCurrentSelectedScreen(screen);
+    } else if (!keepScreen) {
+      setCurrentSelectedScreen("chats");
+    }
     setLoadingMessages(true);
     setSelectedChatId(chatId);
     setSelectedChatInfo(selectedChatData);
@@ -189,7 +196,7 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
       setLoadingMessages(false);
     }
   };
-  const fetchChatList = async (currentActiveChannelInfo) => {
+  const fetchChatList = async (currentActiveChannelInfo, { autoOpenFirst = true } = {}) => {
     var _a2;
     setCurrentSelectedScreen("chats");
     setSelectedChat([]);
@@ -199,6 +206,10 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
         const chatList2 = await chatConfiguration.leftPanel.loadChatList(currentActiveChannelInfo);
         setChatList(chatList2);
         setOriginalChatList(chatList2);
+        if (autoOpenFirst && (chatList2 == null ? void 0 : chatList2.length) > 0) {
+          const firstChat = chatList2[0];
+          await handleChatClick(firstChat.id, firstChat, { keepScreen: true });
+        }
         return chatList2;
       } catch (err) {
         console.error("[TableChatSidePanel] [fetchChatList] [error]:", err);
@@ -225,7 +236,7 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
             title: t("tableChat.sidePanel.chatList"),
             objectType: (_e2 = newChat == null ? void 0 : newChat.otherProps) == null ? void 0 : _e2.object_type
           };
-          await fetchChatList(newChannelInfo);
+          await fetchChatList(newChannelInfo, { autoOpenFirst: false });
           setSelectedChannelInfo(newChannelInfo);
           setSelectedChannelId((_g2 = (_f2 = newChat == null ? void 0 : newChat.otherProps) == null ? void 0 : _f2.object_ids) == null ? void 0 : _g2[0]);
           await handleChatClick(newChat.id, newChat);
@@ -241,6 +252,12 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
   };
   const fetchChannelList = async () => {
     setCurrentSelectedScreen("channels");
+    setSelectedChannelId(null);
+    setSelectedChannelInfo(null);
+    setSelectedChatId(null);
+    setSelectedChatInfo(null);
+    setChatList([]);
+    setOriginalChatList([]);
     setLoadingChannelsOrChats(true);
     try {
       const channelList = await chatConfiguration.leftPanel.loadChannelsList();
@@ -296,11 +313,90 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
       setLoadingChannelsOrChats(false);
     }
   };
+  const openChatFromSelection = async (selectedRows = []) => {
+    var _a2;
+    setLoadingChannelsOrChats(true);
+    setLoadingMessages(true);
+    setIsCreateNewChatOpen(false);
+    try {
+      const onStartNewChat = (_a2 = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _a2.onStartNewChat;
+      if (typeof onStartNewChat !== "function") {
+        await fetchChannelList();
+        return;
+      }
+      const result = await onStartNewChat(selectedRows);
+      const channel = result == null ? void 0 : result.channel;
+      const chatToOpen = (result == null ? void 0 : result.openChat) || (result == null ? void 0 : result.formattedChat);
+      if (!(result == null ? void 0 : result.success) || !channel || !(chatToOpen == null ? void 0 : chatToOpen.id)) {
+        await fetchChannelList();
+        return;
+      }
+      const nextChannels = Array.isArray(result.channelsList) ? result.channelsList : [channel];
+      const nextScreen = result.screen === "channels" ? "channels" : "chats";
+      const nextChatList = Array.isArray(result.chatList) ? result.chatList : [chatToOpen];
+      setChannelsList(nextChannels);
+      setOriginalChanelList(nextChannels);
+      setSelectedChannelId(channel.id);
+      setSelectedChannelInfo(channel);
+      setChatList(nextChatList);
+      setOriginalChatList(nextChatList);
+      setCurrentSelectedScreen(nextScreen);
+      await handleChatClick(chatToOpen.id, chatToOpen, { screen: nextScreen });
+    } catch (error) {
+      console.error("[TableChatSidePanel] [openChatFromSelection] [error]:", error);
+      handleToast(true, t("tableChat.sidePanel.errorLoadingChat"), "error");
+      await fetchChannelList();
+    } finally {
+      setLoadingChannelsOrChats(false);
+      setLoadingMessages(false);
+    }
+  };
+  const openChannelFromRow = async (selectedRows = []) => {
+    var _a2, _b2;
+    setLoadingChannelsOrChats(true);
+    setIsCreateNewChatOpen(false);
+    setSelectedChatId(null);
+    setSelectedChatInfo(null);
+    try {
+      const onOpenChannelFromRow = (_a2 = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _a2.onOpenChannelFromRow;
+      if (typeof onOpenChannelFromRow !== "function") {
+        await fetchChannelList();
+        return;
+      }
+      const result = await onOpenChannelFromRow(selectedRows);
+      if (!(result == null ? void 0 : result.success) || !(result == null ? void 0 : result.channel)) {
+        await fetchChannelList();
+        return;
+      }
+      const nextChannels = Array.isArray(result.channelsList) ? result.channelsList : [result.channel];
+      const nextChatList = Array.isArray(result.chatList) ? result.chatList : [];
+      const nextScreen = result.screen === "channels" ? "channels" : "chats";
+      setChannelsList(nextChannels);
+      setOriginalChanelList(nextChannels);
+      setSelectedChannelId(result.channel.id);
+      setSelectedChannelInfo(result.channel);
+      setChatList(nextChatList);
+      setOriginalChatList(nextChatList);
+      setCurrentSelectedScreen(nextScreen);
+      const chatToOpen = ((_b2 = result.openChat) == null ? void 0 : _b2.id) != null ? result.openChat : nextChatList.length > 0 ? nextChatList[0] : null;
+      if (chatToOpen == null ? void 0 : chatToOpen.id) {
+        await handleChatClick(chatToOpen.id, chatToOpen, { screen: nextScreen });
+      }
+    } catch (error) {
+      console.error("[TableChatSidePanel] [openChannelFromRow] [error]:", error);
+      handleToast(true, t("tableChat.sidePanel.errorLoadingChat"), "error");
+      await fetchChannelList();
+    } finally {
+      setLoadingChannelsOrChats(false);
+    }
+  };
   const clearnupLocalStates = () => {
     setSelectedChannelId(null);
     setSelectedChannelInfo(null);
     setSelectedChatInfo(null);
     setSelectedChatId(null);
+    setChannelsList([]);
+    setOriginalChanelList([]);
     setChatList([]);
     setOriginalChatList([]);
     setSelectedChat([]);
@@ -312,6 +408,7 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
     setIsMoreOpen(false);
     setHighlightMessageId(null);
     setIsCreateNewChatOpen(false);
+    setCurrentSelectedScreen("channels");
   };
   const handleBackToChannels = async () => {
     var _a2;
@@ -322,10 +419,17 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
     await fetchChannelList();
   };
   useEffect(() => {
-    if (isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    if ((entryContext == null ? void 0 : entryContext.mode) === "startNewChat") {
+      openChatFromSelection(entryContext.selectedRows);
+    } else if ((entryContext == null ? void 0 : entryContext.mode) === "openChannel") {
+      openChannelFromRow(entryContext.selectedRows);
+    } else {
       fetchChannelsOrChats();
     }
-  }, [isOpen]);
+  }, [isOpen, entryContext == null ? void 0 : entryContext.mode, entryContext == null ? void 0 : entryContext.openedAt]);
   useEffect(() => {
     var _a2;
     if (!isOpen) {
@@ -373,13 +477,42 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
     setHighlightTrigger((prev) => prev + 1);
   };
   const handleChannelClick = async (selectedChannelId2, selectedChannelInfo2) => {
+    var _a2, _b2, _c2;
     setSelectedChannelId(selectedChannelId2);
     setSelectedChannelInfo(selectedChannelInfo2);
-    const chatList2 = await fetchChatList(selectedChannelInfo2);
-    if (chatList2 && chatList2.length > 0) {
-      const firstChat = chatList2 == null ? void 0 : chatList2[0];
-      await handleChatClick(firstChat == null ? void 0 : firstChat.id, firstChat);
+    setSelectedChatId(null);
+    setSelectedChatInfo(null);
+    setSelectedChat([]);
+    const onChannelOpen = (_a2 = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _a2.onChannelOpen;
+    if (typeof onChannelOpen === "function") {
+      try {
+        const result = await onChannelOpen(selectedChannelInfo2);
+        if (Array.isArray(result == null ? void 0 : result.channelsList)) {
+          setChannelsList(result.channelsList);
+          setOriginalChanelList(result.channelsList);
+        }
+        if (Array.isArray(result == null ? void 0 : result.chatList)) {
+          setCurrentSelectedScreen(result.screen === "channels" ? "channels" : "chats");
+          setChatList(result.chatList);
+          setOriginalChatList(result.chatList);
+        } else {
+          await fetchChatList(selectedChannelInfo2);
+          return;
+        }
+        const chatToOpen = ((_b2 = result == null ? void 0 : result.openChat) == null ? void 0 : _b2.id) != null ? result.openChat : ((_c2 = result == null ? void 0 : result.chatList) == null ? void 0 : _c2.length) > 0 ? result.chatList[0] : null;
+        if (chatToOpen == null ? void 0 : chatToOpen.id) {
+          await handleChatClick(chatToOpen.id, chatToOpen, {
+            screen: result.screen === "channels" ? "channels" : "chats"
+          });
+        }
+        return;
+      } catch (error) {
+        console.error("[TableChatSidePanel] [onChannelOpen] [error]:", error);
+        handleToast(true, t("tableChat.sidePanel.errorLoadingChat"), "error");
+        return;
+      }
     }
+    await fetchChatList(selectedChannelInfo2);
   };
   const handleChatSelect = (selectedChatId2) => {
     setSelectedChat(
@@ -469,10 +602,22 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
       {
         anchor: "right",
         className: "table-chat-panel",
+        headerRightContent: /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": t("common.close"),
+            className: "table-chat-panel-close",
+            icon: /* @__PURE__ */ jsx(default_1, { fontSize: "small" }),
+            size: "medium",
+            variant: "text",
+            onClick: handleClose
+          }
+        ),
         open: isOpen,
         setIsOpen: () => {
           setIsChatOpen(!isChatOpen);
         },
+        showCloseButton: false,
         size: "medium",
         title: chatConfiguration == null ? void 0 : chatConfiguration.title,
         width: pinnedMsg || showThread ? 1450 : 985,
@@ -497,7 +642,7 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
               showAddChatBtn: (_u = (_t = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _t.leftHeaderPanel) == null ? void 0 : _u.showAddChat,
               showChannelList: isChannelsScreen,
               showCheckbox: (_w = (_v = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _v.leftChatPanel) == null ? void 0 : _w.showCheckbox,
-              title: isChannelsScreen ? t("tableChat.sidePanel.channelsList") : selectedChannelInfo == null ? void 0 : selectedChannelInfo.title,
+              title: isChannelsScreen ? ((_x = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _x.channelListTitle) ?? t("tableChat.sidePanel.channelsList") : selectedChannelInfo == null ? void 0 : selectedChannelInfo.title,
               onBack: handleBackToChannels,
               onChannelSelect: (id, selectedChannelOrChat) => {
                 if (isChannelsScreen) {
@@ -509,21 +654,67 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
               onDeleteTopics: handleDeletePromptOpen,
               onMenuClick: toggleMenu,
               onMoreClick: showMore,
-              onPinnedChatClick: (_x = chatConfiguration == null ? void 0 : chatConfiguration.headerChatConfig) == null ? void 0 : _x.onPinnedChatClick,
+              onPinnedChatClick: (_y = chatConfiguration == null ? void 0 : chatConfiguration.headerChatConfig) == null ? void 0 : _y.onPinnedChatClick,
               onSearchClick: openSearch
             }
           ),
           loadingMessages ? /* @__PURE__ */ jsx(ChatSkeleton, { text: t("tableChat.loadingMessages") }) : /* @__PURE__ */ jsx(Fragment, { children: !selectedChannelId || !selectedChatId ? /* @__PURE__ */ jsx(
             EmptyContainer,
             {
-              subTitle: !selectedChannelId ? (_y = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _y.emptyChannelStateSubTitle : !selectedChatId ? (_z = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _z.emptyChatStateSubTitle : "",
-              title: !selectedChannelId ? (_A = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _A.emptyChannelStateTitle : !selectedChatId ? (_B = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _B.emptyChatStateTitle : ""
+              subTitle: !selectedChannelId ? (_z = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _z.emptyChannelStateSubTitle : !selectedChatId ? (_A = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _A.emptyChatStateSubTitle : "",
+              title: !selectedChannelId ? (_B = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _B.emptyChannelStateTitle : !selectedChatId ? (_C = chatConfiguration == null ? void 0 : chatConfiguration.messageChatConfig) == null ? void 0 : _C.emptyChatStateTitle : ""
             }
           ) : /* @__PURE__ */ jsx(
             TableChatRightSection,
             {
               chatHeaderConfig: {
                 ...chatConfiguration == null ? void 0 : chatConfiguration.headerChatConfig,
+                isResolved: (selectedChatInfo == null ? void 0 : selectedChatInfo.isResolved) ?? ((_D = selectedChatInfo == null ? void 0 : selectedChatInfo.otherProps) == null ? void 0 : _D.is_resolved) ?? ((_E = chatConfiguration == null ? void 0 : chatConfiguration.headerChatConfig) == null ? void 0 : _E.isResolved),
+                chatDisplayId: (selectedChatInfo == null ? void 0 : selectedChatInfo.displayId) ?? ((_F = selectedChatInfo == null ? void 0 : selectedChatInfo.otherProps) == null ? void 0 : _F.reference_id) ?? ((_G = selectedChatInfo == null ? void 0 : selectedChatInfo.otherProps) == null ? void 0 : _G.display_id) ?? ((_H = chatConfiguration == null ? void 0 : chatConfiguration.headerChatConfig) == null ? void 0 : _H.chatDisplayId),
+                onResolve: async (resolvedChatId) => {
+                  var _a2, _b2;
+                  const result = await ((_b2 = (_a2 = chatConfiguration == null ? void 0 : chatConfiguration.headerChatConfig) == null ? void 0 : _a2.onResolve) == null ? void 0 : _b2.call(_a2, resolvedChatId));
+                  setSelectedChatInfo(
+                    (prev) => prev ? {
+                      ...prev,
+                      isResolved: true,
+                      otherProps: { ...prev.otherProps, is_resolved: true }
+                    } : prev
+                  );
+                  return result;
+                },
+                onTitleChange: async (renamedChatId, nextTitle) => {
+                  var _a2, _b2, _c2;
+                  const result = await ((_b2 = (_a2 = chatConfiguration == null ? void 0 : chatConfiguration.headerChatConfig) == null ? void 0 : _a2.onTitleChange) == null ? void 0 : _b2.call(
+                    _a2,
+                    renamedChatId,
+                    nextTitle
+                  ));
+                  const resolvedTitle = (result == null ? void 0 : result.title) ?? ((_c2 = result == null ? void 0 : result.formattedChat) == null ? void 0 : _c2.title) ?? nextTitle;
+                  setSelectedChatInfo(
+                    (prev) => prev ? {
+                      ...prev,
+                      title: resolvedTitle,
+                      otherProps: {
+                        ...prev.otherProps,
+                        name: resolvedTitle
+                      }
+                    } : prev
+                  );
+                  const patchChatTitle = (list = []) => list.map(
+                    (chat) => (chat == null ? void 0 : chat.id) === renamedChatId ? {
+                      ...chat,
+                      title: resolvedTitle,
+                      otherProps: {
+                        ...chat.otherProps,
+                        name: resolvedTitle
+                      }
+                    } : chat
+                  );
+                  setChatList((prev) => patchChatTitle(prev));
+                  setOriginalChatList((prev) => patchChatTitle(prev));
+                  return result;
+                },
                 onPinnedClick: (chatId) => {
                   setShowThread(false);
                   setShowPinnedMsg(true);
@@ -531,18 +722,18 @@ const TableChatSidePanel = ({ isOpen, handleClose, chatConfiguration }) => {
                 }
               },
               chatId: selectedChatId,
-              CreatedBy: (selectedChatInfo == null ? void 0 : selectedChatInfo.createdBy) || (selectedChatInfo == null ? void 0 : selectedChatInfo.user) || ((_C = selectedChatInfo == null ? void 0 : selectedChatInfo.otherProps) == null ? void 0 : _C.created_by_user),
+              CreatedBy: (selectedChatInfo == null ? void 0 : selectedChatInfo.createdBy) || (selectedChatInfo == null ? void 0 : selectedChatInfo.user) || ((_I = selectedChatInfo == null ? void 0 : selectedChatInfo.otherProps) == null ? void 0 : _I.created_by_user),
               handleToast,
               inputChatConfig: {
                 ...chatConfiguration.inputChatConfig
               },
               messageConfig: memoizedMessageConfig,
               setPinnedMessages,
-              showActionBtn: (_E = (_D = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _D.rightHeaderPanel) == null ? void 0 : _E.showActionBtn,
-              showParticipantsList: (_G = (_F = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _F.rightHeaderPanel) == null ? void 0 : _G.showParticipants,
-              showPinnedChat: (_I = (_H = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _H.rightHeaderPanel) == null ? void 0 : _I.showPinnedChat,
-              showSearch: (_K = (_J = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _J.rightHeaderPanel) == null ? void 0 : _K.showChatSearch,
-              createdAt: (selectedChatInfo == null ? void 0 : selectedChatInfo.createdAt) || formatChatHeaderTimestamp((_L = selectedChatInfo == null ? void 0 : selectedChatInfo.otherProps) == null ? void 0 : _L.created_at),
+              showActionBtn: (_K = (_J = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _J.rightHeaderPanel) == null ? void 0 : _K.showActionBtn,
+              showParticipantsList: (_M = (_L = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _L.rightHeaderPanel) == null ? void 0 : _M.showParticipants,
+              showPinnedChat: (_O = (_N = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _N.rightHeaderPanel) == null ? void 0 : _O.showPinnedChat,
+              showSearch: (_Q = (_P = chatConfiguration == null ? void 0 : chatConfiguration.leftPanel) == null ? void 0 : _P.rightHeaderPanel) == null ? void 0 : _Q.showChatSearch,
+              createdAt: (selectedChatInfo == null ? void 0 : selectedChatInfo.createdAt) || formatChatHeaderTimestamp((_R = selectedChatInfo == null ? void 0 : selectedChatInfo.otherProps) == null ? void 0 : _R.created_at),
               title: selectedChatInfo == null ? void 0 : selectedChatInfo.title
             }
           ) }),

package/dist/components/TableChat/components/TableChatLeftSection/AddChatContainer/AddChatContainer.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}:root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px;--ia-modal-backdrop:#0d152ccc}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.chatcontainer{background:#fff;border-radius:10px;box-shadow:0 0 4px #0000001f;display:grid;grid-auto-flow:row;padding:10px;position:fixed;row-gap:10px;top:120px;width:231px;z-index:9999}.chatcontainer .chat-header-navigation .nav-right button{background-color:#4259ee!important;border:1px solid #c3c8d4}.chatcontainer .MuiInputBase-root input.MuiInputBase-input{min-width:210px!important}.chatFooterContainer{display:flex;gap:8px;justify-content:flex-end}.addChat_container{position:absolute}.chat_save_btn{background-color:#4259ee!important}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@keyframes ia-shimmer-horizontal{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ia-shimmer-vertical{0%{background-position:0 100%}to{background-position:0 0}}@property --ia-shimmer-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes ia-shimmer-circular{0%{--ia-shimmer-angle:0deg}to{--ia-shimmer-angle:360deg}}.ia-shimmer{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ltr{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(90deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ltr{animation:none;background-image:linear-gradient(90deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--rtl{animation:ia-shimmer-horizontal 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(270deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:300% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--rtl{animation:none;background-image:linear-gradient(270deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--btt{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:reverse;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--btt{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--ttb{animation:ia-shimmer-vertical 1.6s ease-in-out infinite;animation-direction:normal;background-color:#e8edf5;background-image:linear-gradient(0deg,#e8edf5,#eceef4 22%,#e8edf5 48%,#d5dbe8 62%,#e8edf5);background-repeat:no-repeat;background-size:100% 300%}@media (prefers-reduced-motion:reduce){.ia-shimmer--ttb{animation:none;background-image:linear-gradient(0deg,#e8edf5,#eceef4 40%,#d5dbe8);background-size:100% 100%}}.ia-shimmer--circular{background-color:#e8edf5;background-repeat:no-repeat;--ia-shimmer-angle:0deg;animation:ia-shimmer-circular 1.6s linear infinite;background-image:conic-gradient(from var(--ia-shimmer-angle),#eceef4 0deg,#e8edf5 80deg,#d5dbe8 160deg,#e8edf5 260deg,#eceef4 1turn);background-size:100% 100%}@media (prefers-reduced-motion:reduce){.ia-shimmer--circular{animation:none;background-image:conic-gradient(from 0deg,#eceef4,#e8edf5,#d5dbe8,#e8edf5 1turn)}}:root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px;--ia-modal-backdrop:#0d152ccc}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.chatcontainer{background:#fff;border-radius:10px;box-shadow:0 0 4px #0000001f;box-sizing:border-box;display:grid;grid-auto-flow:row;padding:10px;row-gap:10px;width:231px}.chatcontainer .MuiInputBase-root input.MuiInputBase-input{min-width:210px!important}.chatFooterContainer{display:flex;gap:8px;justify-content:flex-end}.addChat_container{position:absolute;right:0;top:calc(100% + 4px);z-index:10}.chat_save_btn{background-color:#4259ee!important}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
 import { useForm, Controller } from "react-hook-form";

package/dist/components/TableChat/components/TableChatLeftSection/ChatChannelItem.d.ts

@@ -1,10 +1,12 @@
-export declare const ChatChannelItem: ({ id, title, subtitle, timestamp, unreadCount, avatar, isSelected, isMuted, onClick, showChannelList, showCheckbox, handleChatSelect, selectedChat, onPinnedChatClick, onPinnedChange, handleToast, isPinned: isPinnedProp, ...rest }: {
+export declare const ChatChannelItem: ({ id, title, subtitle, timestamp, time, unreadCount, chatCount, avatar, isSelected, isMuted, onClick, showChannelList, showCheckbox, handleChatSelect, selectedChat, onPinnedChatClick, onPinnedChange, handleToast, isPinned: isPinnedProp, ...rest }: {
     [x: string]: any;
     id: any;
     title: any;
-    subtitle: any;
+    subtitle?: string | undefined;
     timestamp: any;
+    time: any;
     unreadCount: any;
+    chatCount: any;
     avatar: any;
     isSelected: any;
     isMuted: any;

package/dist/components/TableChat/components/TableChatLeftSection/ChatChannelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatChannelItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/ChatChannelItem.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe,GAAI;;;;;;;;;;;;;;;;;;;;;CAmB/B,4CAsFA,CAAC"}
+{"version":3,"file":"ChatChannelItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/ChatChannelItem.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,eAAe,GAAI;;;;;;;;;;;;;;;;;;;;;;;CAqB/B,4CAgHA,CAAC"}

package/dist/components/TableChat/components/TableChatLeftSection/ChatChannelItem.js

@@ -1,17 +1,24 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import default_1 from "../../../../node_modules/@mui/icons-material/NotificationsOff.js";
 import { getAssetUrl } from "../../../../utils/assetBase.js";
 import { ChannelCheckbox } from "./ChannelCheckbox/ChannelCheckbox.js";
 import { UnreadBadge } from "./UnreadBadge/UnreadBadge.js";
 import { Avatar } from "../../../Avatar/index.js";
+import { Badge } from "../../../Badge/index.js";
 import { useTranslation } from "../../../../i18n/useTranslation.js";
 const PinnedIcon = getAssetUrl("icons/pinedIcon.svg");
+const formatBadgeCountLabel = (count, maxCount = 99) => {
+  if (!count || count <= 0) return null;
+  return count > maxCount ? `${maxCount}+` : String(count);
+};
 const ChatChannelItem = ({
   id,
   title,
-  subtitle,
+  subtitle = "",
   timestamp,
+  time,
   unreadCount,
+  chatCount,
   avatar,
   isSelected,
   isMuted,
@@ -28,6 +35,8 @@ const ChatChannelItem = ({
 }) => {
   const { t } = useTranslation();
   const isPinned = Boolean(isPinnedProp ?? rest.isPinned);
+  const displayTime = timestamp ?? time;
+  const channelBadgeLabel = formatBadgeCountLabel(chatCount);
   const handlePinnedChatClick = async (chatId, newPinned) => {
     if (onPinnedChatClick) {
       onPinnedChange == null ? void 0 : onPinnedChange(chatId, newPinned);
@@ -41,31 +50,53 @@ const ChatChannelItem = ({
       }
     }
   };
+  const handleActivate = (e) => {
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick(id);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick == null ? void 0 : onClick(id);
+    }
+  };
+  if (showChannelList) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `channel-list-item${isSelected ? " channel-list-item--selected" : ""}${isMuted ? " channel-list-item--muted" : ""}`,
+        role: "button",
+        tabIndex: 0,
+        onClick: handleActivate,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "channel-list-item__content", children: [
+            /* @__PURE__ */ jsx("span", { className: "channel-list-item__title", children: title }),
+            displayTime ? /* @__PURE__ */ jsx("span", { className: "channel-list-item__time", children: displayTime }) : null
+          ] }),
+          channelBadgeLabel ? /* @__PURE__ */ jsx(Badge, { color: "info", label: channelBadgeLabel, size: "small", variant: "filled" }) : null
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${showChannelList ? "channel_list" : "chat_list"}  ${isSelected ? "selected" : ""} ${isMuted ? "muted" : ""}`,
+      className: `chat_list${isSelected ? " selected" : ""}${isMuted ? " muted" : ""}`,
       role: "button",
       tabIndex: 0,
-      onClick: (e) => {
-        e.stopPropagation();
-        onClick == null ? void 0 : onClick(id);
-      },
-      onKeyPress: (e) => {
-        if (e.key === "Enter" || e.key === " ") onClick == null ? void 0 : onClick(id);
-      },
+      onClick: handleActivate,
+      onKeyDown: handleKeyDown,
       children: [
-        !showChannelList && /* @__PURE__ */ jsxs(Fragment, { children: [
-          showCheckbox && /* @__PURE__ */ jsx(
-            ChannelCheckbox,
-            {
-              handleChatSelect,
-              id,
-              selectedChat
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "channel-avatar", children: /* @__PURE__ */ jsx(Avatar, { label: (avatar == null ? void 0 : avatar.label) || title, size: "medium", src: avatar == null ? void 0 : avatar.src }) })
-        ] }),
+        showCheckbox && /* @__PURE__ */ jsx(
+          ChannelCheckbox,
+          {
+            handleChatSelect,
+            id,
+            selectedChat
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "channel-avatar", children: /* @__PURE__ */ jsx(Avatar, { label: (avatar == null ? void 0 : avatar.label) || title, size: "medium", src: avatar == null ? void 0 : avatar.src }) }),
         /* @__PURE__ */ jsxs("div", { className: "channel-content", children: [
           /* @__PURE__ */ jsxs("div", { className: "channel-header", children: [
             /* @__PURE__ */ jsx("h3", { className: "channel-title", children: title }),
@@ -74,10 +105,10 @@ const ChatChannelItem = ({
               /* @__PURE__ */ jsx(UnreadBadge, { count: unreadCount })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "channel-subtitle", children: subtitle }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "channel-subtitle", children: subtitle }) : null,
           /* @__PURE__ */ jsxs("div", { className: "pinnedChat_container", children: [
-            /* @__PURE__ */ jsx("span", { className: "channel-time", children: timestamp }),
-            !showChannelList && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("span", { className: "channel-time", children: displayTime }),
+            /* @__PURE__ */ jsx(
               "img",
               {
                 alt: "",

package/dist/components/TableChat/components/TableChatLeftSection/ChatChannelList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatChannelList.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/ChatChannelList.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,GAAI;;;;;;;;;;CAU/B,4CAmFA,CAAC"}
+{"version":3,"file":"ChatChannelList.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/ChatChannelList.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,GAAI;;;;;;;;;;CAU/B,4CAqFA,CAAC"}

package/dist/components/TableChat/components/TableChatLeftSection/ChatChannelList.js

@@ -51,7 +51,8 @@ const ChatChannelList = ({
     if (aPinned === bPinned) return 0;
     return aPinned ? -1 : 1;
   }) : [];
-  return /* @__PURE__ */ jsx("div", { className: "chat-channel-list", children: sortedChannels.length > 0 ? sortedChannels.map((channel, index) => /* @__PURE__ */ jsx(
+  const listClassName = showChannelList ? "channel-list" : "chat-channel-list";
+  return /* @__PURE__ */ jsx("div", { className: listClassName, children: sortedChannels.length > 0 ? sortedChannels.map((channel, index) => /* @__PURE__ */ jsx(
     ChatChannelItem,
     {
       ...channel,
@@ -62,7 +63,7 @@ const ChatChannelList = ({
       selectedChat,
       showChannelList,
       showCheckbox,
-      onClick: (e) => onChannelSelect(channel == null ? void 0 : channel.id, channel),
+      onClick: () => onChannelSelect(channel == null ? void 0 : channel.id, channel),
       onPinnedChange: handlePinnedChange,
       onPinnedChatClick
     },

package/dist/components/TableChat/components/TableChatLeftSection/ChatFilterChips/ChatFilterChips.d.ts

@@ -0,0 +1,11 @@
+
+export declare const ChatFilterChips: ({ options, value, defaultValue, onChange, className, }: {
+    options: any;
+    value: any;
+    defaultValue?: string | undefined;
+    onChange: any;
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DEFAULT_CHAT_FILTER_VALUES: string[];
+export default ChatFilterChips;
+//# sourceMappingURL=ChatFilterChips.d.ts.map

package/dist/components/TableChat/components/TableChatLeftSection/ChatFilterChips/ChatFilterChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatFilterChips.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatLeftSection/ChatFilterChips/ChatFilterChips.tsx"],"names":[],"mappings":"AAIA,OAAO,+BAA+B,CAAC;AAIvC,eAAO,MAAM,eAAe,GAAI;;;;;;CAM/B,4CAmDA,CAAC;AAEF,eAAO,MAAM,0BAA0B,UAAwB,CAAC;AAEhE,eAAe,eAAe,CAAC"}