impact-ui 5.0.1 → 5.0.2-alpha.1

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

@@ -0,0 +1,57 @@
+!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}.chat-filter-chips{align-items:flex-start;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 0;width:100%}.chat-filter-chips .impact-chip-container{flex-shrink:0}.chat-filter-chips .impact-chip-container .MuiChip-filled{min-width:unset}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { Chips } from "../../../../Chips/index.js";
+
+import { useTranslation } from "../../../../../i18n/useTranslation.js";
+const ChatFilterChips = ({
+  options,
+  value,
+  defaultValue = "all",
+  onChange,
+  className = ""
+}) => {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState(value ?? defaultValue);
+  useEffect(() => {
+    if (value != null) {
+      setSelected(value);
+    }
+  }, [value]);
+  const chips = useMemo(() => {
+    if (Array.isArray(options) && options.length > 0) {
+      return options.map(
+        (opt) => typeof opt === "string" ? { value: opt, label: opt } : {
+          value: opt.value,
+          label: opt.label ?? opt.value
+        }
+      );
+    }
+    return [
+      { value: "all", label: t("tableChat.filterChips.all") },
+      { value: "starred", label: t("tableChat.filterChips.starred") },
+      { value: "resolved", label: t("tableChat.filterChips.resolved") }
+    ];
+  }, [options, t]);
+  const handleClick = (chip) => {
+    const next = chip.value;
+    if (value == null) {
+      setSelected(next);
+    }
+    onChange == null ? void 0 : onChange(next, chip);
+  };
+  return /* @__PURE__ */ jsx("div", { className: `chat-filter-chips ${className}`.trim(), role: "group", children: chips.map((chip) => /* @__PURE__ */ jsx(
+    Chips,
+    {
+      className: "chat-filter-chips__chip",
+      isActive: selected === chip.value,
+      label: chip.label,
+      type: "single",
+      onClick: () => handleClick(chip)
+    },
+    chip.value
+  )) });
+};
+export {
+  ChatFilterChips
+};

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeaderNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/ChatHeaderNavigation.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,oBAAoB,8CAoLhC,CAAC"}
+{"version":3,"file":"ChatHeaderNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/ChatHeaderNavigation.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,oBAAoB,8CAiJhC,CAAC"}

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

@@ -1,4 +1,4 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { memo, useState, useEffect } from "react";
 import default_1$2 from "../../../../node_modules/@mui/icons-material/ChevronLeft.js";
 import default_1 from "../../../../node_modules/@mui/icons-material/Close.js";
@@ -31,16 +31,17 @@ const ChatHeaderNavigation = memo(
     useEffect(() => {
       setShowAddChat(Boolean(isCreateNewChatOpen));
     }, [isCreateNewChatOpen]);
+    const closeSearch = () => {
+      onSearchClick == null ? void 0 : onSearchClick();
+      filterChannelsByTitle == null ? void 0 : filterChannelsByTitle("");
+    };
     const renderSearch = () => /* @__PURE__ */ jsx(
       Input,
       {
         leftIcon: /* @__PURE__ */ jsx(default_1$1, {}),
-        placeholder: t("tableChat.nav.searchChatPlaceholder"),
+        placeholder: showChannelList ? t("tableChat.nav.searchChannelPlaceholder") : t("tableChat.nav.searchChatPlaceholder"),
         rightIcon: /* @__PURE__ */ jsx(default_1, {}),
-        rightIconClick: () => {
-          onSearchClick(!onSearchClick);
-          filterChannelsByTitle("");
-        },
+        rightIconClick: closeSearch,
         type: "text",
         width: "100%",
         onChange: (e) => {
@@ -108,48 +109,24 @@ const ChatHeaderNavigation = memo(
         }
       )
     ] }) });
-    const renderChannelListHeader = () => /* @__PURE__ */ jsxs("div", { className: showChannelList && "channel-list-header", children: [
-      /* @__PURE__ */ jsx("h1", { className: "nav-title", style: { cursor: "pointer" }, onClick: onBack, children: title }),
-      isSearchOpen ? /* @__PURE__ */ jsx(
-        Input,
-        {
-          leftIcon: /* @__PURE__ */ jsx(default_1$1, {}),
-          placeholder: t("tableChat.nav.searchChannelPlaceholder"),
-          rightIcon: /* @__PURE__ */ jsx(default_1, {}),
-          rightIconClick: () => {
-            onSearchClick(!onSearchClick);
-            filterChannelsByTitle("");
-          },
-          type: "text",
-          width: "100%",
-          onChange: (e) => {
-            filterChannelsByTitle(e.target.value);
-          }
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "chanel_right_navigation", children: /* @__PURE__ */ jsx("div", { className: "chanel_search", children: /* @__PURE__ */ jsx(
-        "svg",
+    const renderChannelListHeader = () => /* @__PURE__ */ jsxs("div", { className: "channel-list-header", children: [
+      /* @__PURE__ */ jsx("h1", { className: "channel-list-header__title", children: title }),
+      onSearchClick ? /* @__PURE__ */ jsx(
+        Button,
         {
-          fill: "none",
-          height: "14",
-          viewBox: "0 0 14 14",
-          width: "14",
-          xmlns: "http://www.w3.org/2000/svg",
-          onClick: onSearchClick,
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M5.35163 10.7033C3.85592 10.7033 2.59005 10.1852 1.55403 9.14923C0.51801 8.11321 0 6.84734 0 5.35163C0 3.85592 0.51801 2.59005 1.55403 1.55403C2.59005 0.51801 3.85592 0 5.35163 0C6.84734 0 8.11321 0.51801 9.14923 1.55403C10.1852 2.59005 10.7033 3.85592 10.7033 5.35163C10.7033 5.9554 10.6072 6.52487 10.4151 7.06003C10.223 7.5952 9.96226 8.06861 9.63293 8.48027L13.7736 12.6209C13.9245 12.7719 14 12.964 14 13.1973C14 13.4305 13.9245 13.6226 13.7736 13.7736C13.6226 13.9245 13.4305 14 13.1973 14C12.964 14 12.7719 13.9245 12.6209 13.7736L8.48027 9.63293C8.06861 9.96226 7.5952 10.223 7.06003 10.4151C6.52487 10.6072 5.9554 10.7033 5.35163 10.7033ZM5.35163 9.0566C6.38079 9.0566 7.25557 8.6964 7.97599 7.97599C8.6964 7.25557 9.0566 6.38079 9.0566 5.35163C9.0566 4.32247 8.6964 3.44768 7.97599 2.72727C7.25557 2.00686 6.38079 1.64666 5.35163 1.64666C4.32247 1.64666 3.44768 2.00686 2.72727 2.72727C2.00686 3.44768 1.64666 4.32247 1.64666 5.35163C1.64666 6.38079 2.00686 7.25557 2.72727 7.97599C3.44768 8.6964 4.32247 9.0566 5.35163 9.0566Z",
-              fill: "#60697D"
-            }
-          )
+          className: "channel-list-header__search",
+          icon: /* @__PURE__ */ jsx(default_1$1, {}),
+          iconPlacement: "left",
+          type: "default",
+          variant: "tertiary",
+          onClick: onSearchClick
         }
-      ) }) })
+      ) : null
     ] });
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "chat-header-navigation", children: isSearchOpen ? renderSearch() : showChannelList ? renderChannelListHeader() : /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsx("div", { className: "chat-header-navigation", children: isSearchOpen ? renderSearch() : showChannelList ? renderChannelListHeader() : /* @__PURE__ */ jsxs(Fragment, { children: [
       renderNavLeft(),
-      " ",
       renderNavRight()
-    ] }) }) });
+    ] }) });
   }
 );
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"TableChatChannelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/TableChatChannelHeader.tsx"],"names":[],"mappings":"AAKA,OAAO,sCAAsC,CAAC;AAE9C,QAAA,MAAM,sBAAsB,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B/B,4CAoFA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"TableChatChannelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/TableChat/components/TableChatLeftSection/TableChatChannelHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,sCAAsC,CAAC;AAE9C,QAAA,MAAM,sBAAsB,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B/B,4CAyFA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/TableChat/components/TableChatLeftSection/TableChatChannelHeader.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-left-panel-container{background:#fff;border-radius:16px;box-shadow:12px 13px 45px -1px #0000001a;flex-shrink:0;max-width:350px;overflow:hidden;width:350px}.table-left-panel-container:before{background:linear-gradient(180deg,#4259ee99,#4259ee33,#4259ee00);border-radius:16px;content:"";top:0;right:0;bottom:0;left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;pointer-events:none;position:absolute}.table-left-panel-container .ia-styles.ia-btn.ia-btn-tertiary,.table-left-panel-container .ia-styles.ia-btn.ia-btn-tertiary:hover{background:none!important;box-shadow:none!important}.chat-header-navigation{align-items:center;background:#fff;border-bottom:1px solid #d9dde7;border-top-left-radius:10px;border-top-right-radius:10px;display:flex;justify-content:space-between;padding:12px 16px}.chat-header-navigation .nav-left{align-items:center;display:flex;gap:7px}.chat-header-navigation .nav-left button{background:none;border:none!important;box-shadow:none}.chat-header-navigation .nav-title{color:#0d152c;font-size:16px;font-weight:800;line-height:24px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:130px}.chat-header-navigation .nav-right{align-items:center;display:flex;gap:8px;position:relative}.chat-header-navigation .nav-right button{background:none;border:none!important;box-shadow:none}.chat-header-navigation .nav-icon-button{align-items:center;background:#0000;border:none;border-radius:6px;color:#7a8294;cursor:pointer;display:flex;height:20px;justify-content:center;transition:all .2s ease;width:20px}.chat-header-navigation .nav-icon-button:hover{color:#4259ee}.chat-header-navigation .nav-icon-button:focus{outline-offset:1px}.chat-header-navigation .chat-button{background:#4259ee!important;border-radius:8px!important;box-shadow:none!important;color:#fff!important;font-size:14px!important;font-weight:500!important;height:32px;padding:6px 12px!important;width:77px}.chat-header-navigation .chat-button:hover{background:#2b44ec!important}.chat-header-navigation .chat-button .ia-btn-icon{margin-right:4px}.chat-header-navigation .impact_inputbox_container_with_icons{width:100%}.channel_list{background:#f2f4fb}.channel_list,.chat-channel-item,.chat_list{align-items:baseline;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:12px 16px;transition:background-color .2s ease}.channel_list .ia-styles.ia-avatar,.chat-channel-item .ia-styles.ia-avatar,.chat_list .ia-styles.ia-avatar{background:#7a8294;border-radius:16px}.channel_list:hover,.chat-channel-item:hover,.chat_list:hover{background:#eceefd}.channel_list:hover .ia-styles.ia-avatar,.channel_list:hover .unread-badge,.chat-channel-item:hover .ia-styles.ia-avatar,.chat-channel-item:hover .unread-badge,.chat_list:hover .ia-styles.ia-avatar,.chat_list:hover .unread-badge{background:#4259ee}.channel_list.selected,.chat-channel-item.selected,.chat_list.selected{background:#eceefd}.channel_list.selected .ia-styles.ia-avatar,.channel_list.selected .unread-badge,.chat-channel-item.selected .ia-styles.ia-avatar,.chat-channel-item.selected .unread-badge,.chat_list.selected .ia-styles.ia-avatar,.chat_list.selected .unread-badge{background:#4259ee}.channel_list.muted,.chat-channel-item.muted,.chat_list.muted{opacity:.7}.channel_list:focus,.chat-channel-item:focus,.chat_list:focus{outline-offset:-2px}.channel_list:last-child,.chat-channel-item:last-child,.chat_list:last-child{border-bottom:none}.channel-checkbox{align-items:center;display:flex;padding-top:2px}.channel-checkbox input[type=checkbox]{accent-color:#4259ee;border:1px solid #d9dde7;border-radius:3px;cursor:pointer;height:16px;width:16px}.channel-checkbox input[type=checkbox]:checked{background:#4259ee;border-color:#4259ee}.channel-avatar{border-radius:16px;flex-shrink:0;margin-top:2px}.channel-avatar .ia-avatar{font-size:14px!important;font-weight:600!important;height:32px!important;width:32px!important}.channel-content{flex:1;min-width:0}.channel-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.channel-title{color:#0d152c;flex:1;font-size:16px;font-weight:600;height:24px;line-height:24px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-meta.selected{background:#eceefd}.muted-icon{color:#7a8294;font-size:16px!important}.unread-badge{align-items:center;background:#7a8294;border-radius:10px;color:#fff;display:flex;font-size:10px;font-weight:400;height:18px;justify-content:center;line-height:1;min-width:18px;padding:2px 6px}.channel-subtitle{color:#7a8294;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-subtitle,.channel-time{font-size:12px;font-weight:500;line-height:16px}.channel-time{color:#b4bac7}@media (max-width:768px){.chat-header-navigation .nav-title{font-size:15px}.chat-header-navigation .chat-button{font-size:13px!important;padding:4px 8px!important}.chat-channel-item{padding:10px 12px}.channel-title{font-size:13px}.channel-subtitle{font-size:12px}}.table-left-panel-container{background-image:url(https://impact-kit.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/tableChat_bg.svg);background-position:50%;background-repeat:repeat;background-size:cover;box-shadow:0 1px 3px #0000001a;position:relative}.chat-header-navigation{background:#0000;border-bottom-color:#d9dde7;box-shadow:0 1px 3px #0000001a;height:64px;overflow:hidden;padding-left:16px;position:relative}.nav-title{color:#fff}.chat-channel-list{display:flex;flex-direction:column;gap:12px;margin:8px;max-height:calc(100vh - 150px);overflow-y:auto}.chat-channel-list .no-channels-found-container{align-items:center;background:#f2f4fb;border-radius:8px;display:flex;flex-direction:column;gap:12px;justify-content:center;padding:12px}.chat-channel-list .no-channels-found-container .no-channels-found{color:#0d152c;font-size:16px;font-weight:600}.chat-channel-list .no-channels-found-container .no-channels-found-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-align:center}.chat-channel-item.selected,.chat-channel-item:hover{background:#eceefd}.channel-time{color:#60697d}.channel-list-header{align-items:center;display:flex;justify-content:space-between;width:100%}.chanel_icon{background:#fff;border:1px solid #c3c8d4;border-radius:8px;max-height:32px;padding:8px}.chanel_search{align-items:center;background:#f5f6fa;border-radius:8px;display:flex;height:32px;justify-content:center;width:32px}.chanel_search svg{cursor:pointer}.chanel_right_navigation{display:flex;gap:8px}.delete_chat_container{height:32px!important;width:32px}.pinnedChat_container{display:flex;justify-content:space-between}.pinnedChat_container .pinnedChat{opacity:0;transition:opacity .2s ease}.chat_list:hover .pinnedChat_container .pinnedChat{opacity:1}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
+!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-left-panel-container{background-color:#fff;border:1px solid #b3bdf8b3;border-radius:10px;box-shadow:12px 13px 45px #0000001a;flex-shrink:0;isolation:isolate;max-width:350px;overflow:hidden;position:relative;width:350px}.table-left-panel-container:before{background-image:linear-gradient(168.63deg,#ffffff8a 44.85%,#b3bdf81f 114.26%);border-radius:inherit;content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;z-index:0}.table-left-panel-container>*{position:relative;z-index:1}.table-left-panel-container>.chat-header-navigation{z-index:2}.table-left-panel-container .ia-styles.ia-btn.ia-btn-tertiary:not(.channel-list-header__search),.table-left-panel-container .ia-styles.ia-btn.ia-btn-tertiary:not(.channel-list-header__search):hover{background:none!important;box-shadow:none!important}.chat-header-navigation{align-items:center;background:#0000;border-bottom:1px solid #b3bdf8;box-sizing:border-box;display:flex;justify-content:space-between;padding:16px;position:relative}.chat-header-navigation .nav-left{align-items:center;display:flex;gap:7px}.chat-header-navigation .nav-left button{background:none;border:none!important;box-shadow:none}.chat-header-navigation .nav-title{color:#1f2b4d;font-size:16px;font-weight:800;line-height:24px;margin:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-header-navigation .nav-right{align-items:center;display:flex;gap:8px;position:relative}.chat-header-navigation .nav-right button{background:none;border:none!important;box-shadow:none}.chat-header-navigation .chat-button{background:#4259ee!important;border-radius:8px!important;box-shadow:none!important;color:#fff!important;font-size:14px!important;font-weight:500!important;height:32px;padding:6px 12px!important;width:77px}.chat-header-navigation .chat-button:hover{background:#2b44ec!important}.chat-header-navigation .chat-button .ia-btn-icon{margin-right:4px}.chat-header-navigation .impact_inputbox_container_with_icons{width:100%}.channel-list-header{align-items:center;display:flex;gap:12px;justify-content:space-between;width:100%}.channel-list-header__title{color:#1f2b4d;font-size:16px;font-weight:800;line-height:24px;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-list-header__search{background:#f5f6fa!important;border:none!important;border-radius:8px!important;box-shadow:none!important;color:#60697d!important;flex-shrink:0;max-height:32px}.channel-list-header__search:hover{background:#f5f6fa!important}.channel-list{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 150px);overflow-x:hidden;overflow-y:auto;padding:8px}.channel-list .no-channels-found-container{align-items:center;background:#f2f4fb;border-radius:8px;display:flex;flex-direction:column;gap:12px;justify-content:center;padding:12px}.channel-list .no-channels-found-container .no-channels-found{color:#0d152c;font-size:16px;font-weight:600}.channel-list .no-channels-found-container .no-channels-found-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-align:center}.channel-list-item{align-items:flex-start;background:#f2f4fb;border-radius:8px;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:12px 16px;width:100%}.channel-list-item--selected,.channel-list-item:hover{background:#eceefd}.channel-list-item--muted{opacity:.7}.channel-list-item__content{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.channel-list-item__title{color:#0d152c;font-size:16px;font-weight:600;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-list-item__time{color:#7a8294;font-size:12px;font-weight:500;line-height:16px}.channel-list-item .MuiChip-root,.channel-list-item .impact_badges_only_label_filled{flex-shrink:0}.chat-channel-list{display:flex;flex-direction:column;gap:12px;margin:8px;max-height:calc(100vh - 150px);overflow-y:auto}.chat-channel-list .no-channels-found-container{align-items:center;background:#f2f4fb;border-radius:8px;display:flex;flex-direction:column;gap:12px;justify-content:center;padding:12px}.chat-channel-list .no-channels-found-container .no-channels-found{color:#0d152c;font-size:16px;font-weight:600}.chat-channel-list .no-channels-found-container .no-channels-found-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-align:center}.chat_list{align-items:baseline;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:12px 16px;transition:background-color .2s ease}.chat_list .ia-styles.ia-avatar{background:#7a8294;border-radius:16px}.chat_list:hover{background:#eceefd}.chat_list:hover .ia-styles.ia-avatar,.chat_list:hover .unread-badge{background:#4259ee}.chat_list:hover .pinnedChat_container .pinnedChat{opacity:1}.chat_list.selected{background:#eceefd}.chat_list.selected .ia-styles.ia-avatar,.chat_list.selected .unread-badge{background:#4259ee}.chat_list.muted{opacity:.7}.chat_list:focus{outline-offset:-2px}.channel-checkbox{align-items:center;display:flex;padding-top:2px}.channel-checkbox input[type=checkbox]{accent-color:#4259ee;border:1px solid #d9dde7;border-radius:3px;cursor:pointer;height:16px;width:16px}.channel-checkbox input[type=checkbox]:checked{background:#4259ee;border-color:#4259ee}.channel-avatar{border-radius:16px;flex-shrink:0;margin-top:2px}.channel-avatar .ia-avatar{font-size:14px!important;font-weight:600!important;height:32px!important;width:32px!important}.channel-content{flex:1;min-width:0}.channel-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.channel-title{color:#0d152c;flex:1;font-size:16px;font-weight:600;height:24px;line-height:24px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muted-icon{color:#7a8294;font-size:16px!important}.unread-badge{align-items:center;background:#7a8294;border-radius:10px;color:#fff;display:flex;font-size:10px;font-weight:400;height:18px;justify-content:center;line-height:1;min-width:18px;padding:2px 6px}.channel-subtitle{margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-subtitle,.channel-time{color:#7a8294;font-size:12px;font-weight:500;line-height:16px}.delete_chat_container{height:32px!important;width:32px}.pinnedChat_container{display:flex;justify-content:space-between}.pinnedChat_container .pinnedChat{opacity:0;transition:opacity .2s ease}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
 import { ChatChannelList } from "./ChatChannelList.js";
+import { ChatFilterChips } from "./ChatFilterChips/ChatFilterChips.js";
 import { ChatHeaderNavigation } from "./ChatHeaderNavigation.js";
 import { SkeletonList } from "../SkeletonList.js";
 
@@ -38,7 +40,32 @@ const TableChatChannelHeader = ({
   };
   const { t } = useTranslation();
   const resolvedTitle = title ?? t("tableChat.channelHeader.createNewChat");
-  const channelsToShow = channels;
+  const showFilterChips = !showChannelList && !isSearchOpen && (headerConfig == null ? void 0 : headerConfig.showFilterChips) !== false;
+  const [filterValue, setFilterValue] = useState((headerConfig == null ? void 0 : headerConfig.selectedFilterChip) ?? "all");
+  const channelsToShow = useMemo(() => {
+    if (!showFilterChips) return channels;
+    const selected = (headerConfig == null ? void 0 : headerConfig.selectedFilterChip) ?? filterValue;
+    if (selected === "starred") {
+      return channels.filter((ch) => {
+        var _a;
+        return (ch == null ? void 0 : ch.isPinned) || ((_a = ch == null ? void 0 : ch.otherProps) == null ? void 0 : _a.is_pinned);
+      });
+    }
+    if (selected === "resolved") {
+      return channels.filter((ch) => {
+        var _a;
+        return (ch == null ? void 0 : ch.isResolved) || ((_a = ch == null ? void 0 : ch.otherProps) == null ? void 0 : _a.is_resolved);
+      });
+    }
+    return channels;
+  }, [channels, showFilterChips, headerConfig == null ? void 0 : headerConfig.selectedFilterChip, filterValue]);
+  const handleFilterChange = (nextValue, chip) => {
+    var _a;
+    if ((headerConfig == null ? void 0 : headerConfig.selectedFilterChip) == null) {
+      setFilterValue(nextValue);
+    }
+    (_a = headerConfig == null ? void 0 : headerConfig.onFilterChipChange) == null ? void 0 : _a.call(headerConfig, nextValue, chip);
+  };
   return /* @__PURE__ */ jsx("div", { className: "table-left-panel-container", children: loadingChannels ? /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsx(SkeletonList, { text: t("tableChat.loadingMessages") }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ChatHeaderNavigation,
@@ -65,6 +92,14 @@ const TableChatChannelHeader = ({
         onThreadClick
       }
     ),
+    showFilterChips ? /* @__PURE__ */ jsx(
+      ChatFilterChips,
+      {
+        options: headerConfig == null ? void 0 : headerConfig.filterChips,
+        value: (headerConfig == null ? void 0 : headerConfig.selectedFilterChip) ?? filterValue,
+        onChange: handleFilterChange
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       ChatChannelList,
       {

package/dist/components/TableChat/components/TableChatRightSection/AvatarGroup/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAC;AA4CnC,eAAO,MAAM,UAAU,GAAI;;;;CAAmB,4CA2B7C,CAAC;AAeF,QAAA,MAAM,WAAW,GAAI;;;;CAA6C,4CA8BjE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,2BAA2B,CAAC;AA4CnC,eAAO,MAAM,UAAU,GAAI;;;;CAAmB,4CA2B7C,CAAC;AAiBF,QAAA,MAAM,WAAW,GAAI;;;;CAA6C,4CAwDjE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/TableChat/components/TableChatRightSection/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,7 @@
-!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}.avatar-stack-container{align-items:center;background-color:#f0f0f0;display:flex;flex-direction:column;font-family:Inter,sans-serif;gap:2rem;justify-content:center;min-height:100vh}.avatar-stack{display:flex;gap:8px}.avatar-wrapper{position:relative}.avatar-wrapper:not(:first-child){margin-left:-20px}.avatar-wrapper--sm:not(:first-child){margin-left:-15px}.avatar-wrapper--md:not(:first-child){margin-left:-20px}.avatar-wrapper--lg:not(:first-child){margin-left:-30px}.avatar{align-items:center;background-color:#31935f;border-color:#fff;border-radius:50%;border-style:solid;color:#fff;display:flex;font-weight:600;justify-content:center;overflow:hidden;position:relative}.avatar img{height:100%;object-fit:cover;width:100%}.avatar__initials{text-transform:uppercase}.avatar--sm{font-size:12px;height:24px;width:24px}.avatar--md{font-size:16px;height:32px;width:32px}.avatar--lg{font-size:20px;height:36px;width:36px}.avatar--more{background-color:#f1f3fe;border-color:#b3bdf8;color:#4259ee;font-size:12px;font-weight:500}')),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}.avatar-stack{align-items:center;display:flex}.avatar-wrapper{position:relative}.avatar-wrapper--sm:not(:first-child),.avatar-wrapper:not(:first-child){margin-left:-13px}.avatar-wrapper--md:not(:first-child){margin-left:-16px}.avatar-wrapper--lg:not(:first-child){margin-left:-20px}.avatar{align-items:center;background-color:#31935f;border:1.5px solid #fff;border-radius:50%;box-sizing:border-box;color:#fff;display:flex;font-weight:600;justify-content:center;overflow:hidden;position:relative}.avatar img{height:100%;object-fit:cover;width:100%}.avatar__initials{text-transform:uppercase}.avatar--sm{font-size:10px;height:24px;line-height:1;width:24px}.avatar--md{font-size:12px;height:32px;width:32px}.avatar--lg{font-size:14px;height:36px;width:36px}.avatar--more{background-color:#eceefd;border-color:#4259ee;border-width:1px;color:#4259ee;cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;line-height:16px;margin:0;padding:0}.avatar-members-menu .MuiMenuItem-root.Mui-disabled{color:#1f2b4d;opacity:1}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { Menu } from "../../../../Menu/index.js";
 
 import { useTranslation } from "../../../../../i18n/useTranslation.js";
 const getInitials = (name = "") => {
@@ -56,6 +57,7 @@ const getAvatarColor = (name = "") => {
   const colorIndex = Math.abs(hash) % colors.length;
   return colors[colorIndex];
 };
+const memberName = (user) => (user == null ? void 0 : user.label) || (user == null ? void 0 : user.name) || "";
 const ChatAvatar = ({ src, name, size }) => {
   const [hasError, setHasError] = useState(false);
   useEffect(() => {
@@ -76,13 +78,16 @@ const ChatAvatar = ({ src, name, size }) => {
     }
   );
 };
-const MoreAvatar = ({ count, size }) => {
+const MoreAvatar = ({ count, size, onClick }) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsx(
-    "div",
+    "button",
     {
+      type: "button",
+      "aria-label": t("tableChat.avatar.more", { count }),
       className: `avatar avatar--${size} avatar--more`,
       title: t("tableChat.avatar.more", { count }),
+      onClick,
       children: /* @__PURE__ */ jsxs("span", { children: [
         "+",
         count
@@ -91,27 +96,58 @@ const MoreAvatar = ({ count, size }) => {
   );
 };
 const AvatarGroup = ({ avatars = [], maxAvatars = 3, size = "md" }) => {
-  const effectiveMaxAvatars = Math.min(Math.max(1, maxAvatars), avatars.length);
-  const visibleAvatars = avatars.slice(0, effectiveMaxAvatars);
-  const hiddenAvatarsCount = Math.max(0, avatars.length - effectiveMaxAvatars);
+  const [membersMenuAnchor, setMembersMenuAnchor] = useState(null);
+  const visibleAvatars = avatars.slice(0, Math.min(maxAvatars, avatars.length));
+  const hiddenAvatarsCount = Math.max(0, avatars.length - visibleAvatars.length);
+  const memberOptions = avatars.map((user, index) => ({
+    label: memberName(user) || `Member ${index + 1}`,
+    value: String(user.id ?? index),
+    disabled: true
+  }));
+  const handleOpenMembersMenu = (event) => {
+    event.stopPropagation();
+    setMembersMenuAnchor(event.currentTarget);
+  };
+  const handleCloseMembersMenu = () => {
+    setMembersMenuAnchor(null);
+  };
   return /* @__PURE__ */ jsxs("div", { className: "avatar-stack", children: [
-    visibleAvatars.map((user, index) => {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `avatar-wrapper avatar-wrapper--${size}`,
-          style: { zIndex: index },
-          children: /* @__PURE__ */ jsx(ChatAvatar, { name: user.label, size, src: user.url })
-        },
-        user.id || index
-      );
-    }),
+    visibleAvatars.map((user, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `avatar-wrapper avatar-wrapper--${size}`,
+        style: { zIndex: index + 1 },
+        children: /* @__PURE__ */ jsx(
+          ChatAvatar,
+          {
+            name: memberName(user),
+            size,
+            src: user.url || user.avatar || user.src
+          }
+        )
+      },
+      user.id || index
+    )),
     hiddenAvatarsCount > 0 && /* @__PURE__ */ jsx(
       "div",
       {
         className: `avatar-wrapper avatar-wrapper--${size}`,
         style: { zIndex: visibleAvatars.length + 1 },
-        children: /* @__PURE__ */ jsx(MoreAvatar, { count: hiddenAvatarsCount, size })
+        children: /* @__PURE__ */ jsx(MoreAvatar, { count: hiddenAvatarsCount, size, onClick: handleOpenMembersMenu })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl: membersMenuAnchor,
+        menuContainerClassName: "avatar-members-menu",
+        open: Boolean(membersMenuAnchor),
+        options: memberOptions,
+        MenuProps: {
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: "right" }
+        },
+        onClose: handleCloseMembersMenu
       }
     )
   ] });

package/dist/components/TableChat/components/TableChatRightSection/ChatDefaultMessageType/ChatDefaultMessageType.d.ts

@@ -1,5 +1,5 @@
 
-declare const ChatDefaultMessageType: ({ content, timestamp, handleClickOnMoreOptions, priority, edited, onThreadClick, pinned, visibility, onPin, isUser, isThreadIconVisible, isPinChatIconvisible, isHighlighted, highlightColor, }: {
+declare const ChatDefaultMessageType: ({ content, timestamp, handleClickOnMoreOptions, priority, edited, onThreadClick, pinned, visibility, onPin, isUser, isThreadIconVisible, isPinChatIconvisible, isHighlighted, highlightColor, authorName, quote, showMoreOptions, }: {
     content: any;
     timestamp: any;
     handleClickOnMoreOptions: any;
@@ -14,6 +14,9 @@ declare const ChatDefaultMessageType: ({ content, timestamp, handleClickOnMoreOp
     isPinChatIconvisible: any;
     isHighlighted?: boolean | undefined;
     highlightColor?: null | undefined;
+    authorName: any;
+    quote: any;
+    showMoreOptions?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ChatDefaultMessageType;
 //# sourceMappingURL=ChatDefaultMessageType.d.ts.map

package/dist/components/TableChat/components/TableChatRightSection/ChatDefaultMessageType/ChatDefaultMessageType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatDefaultMessageType.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatDefaultMessageType/ChatDefaultMessageType.tsx"],"names":[],"mappings":"AAMA,OAAO,sCAAsC,CAAC;AAW9C,QAAA,MAAM,sBAAsB,GAAI;;;;;;;;;;;;;;;CAe/B,4CAkLA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ChatDefaultMessageType.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TableChat/components/TableChatRightSection/ChatDefaultMessageType/ChatDefaultMessageType.tsx"],"names":[],"mappings":"AAMA,OAAO,sCAAsC,CAAC;AAgD9C,QAAA,MAAM,sBAAsB,GAAI;;;;;;;;;;;;;;;;;;CAkB/B,4CAuJA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}