impact-ui 5.0.2-alpha.1 → 5.0.2-alpha.2

package/dist/components/TableChat/components/TableChatRightSection/TableChatRightSection.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}.table-chat-right-section-container{background:#fff;border-radius:10px;box-shadow:0 0 4px #0000001f;box-sizing:border-box;display:flex;flex:1 1 0;flex-direction:column;height:100%;overflow:hidden;width:100%}.table-chat-right-section-container-empty{background:#fff;border-radius:10px;display:flex;flex-direction:column;height:100%;max-width:640px;position:relative;width:100%}.clear-chat-bar{align-items:center;display:flex;flex-shrink:0;justify-content:flex-end;padding:24px 32px}.chat-messages-area{display:flex;flex:1;flex-direction:column;min-height:0;position:relative}.floating-date-badge{left:50%;opacity:0;pointer-events:none;position:absolute;top:8px;transform:translate(-50%);transition:opacity .3s ease;z-index:4}.floating-date-badge--visible{opacity:1;transition:none}.table-chat-messages{background:#fff;box-sizing:border-box;display:flex;flex:1;flex-direction:column;gap:16px;justify-content:flex-start;margin-bottom:10px;min-width:0;overflow-x:hidden;overflow-y:auto;padding:16px 32px}.system-info-row{align-items:center;display:flex;padding:4px 0;width:100%}.empty-state-container,.system-info-row{justify-content:center}.message-wrapper{box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;width:100%}.table-chat-empty-state{align-items:center;color:#7a8294;display:flex;flex-direction:column;font-size:14px;gap:20px;justify-content:center;max-width:641px;padding:0 60px;text-align:center}.table-chat-empty-state p{margin:0}.infinite-scroll-trigger{min-height:60px;padding:16px}.infinite-scroll-loading,.infinite-scroll-trigger{align-items:center;display:flex;justify-content:center}.infinite-scroll-loading{width:100%}.infinite-scroll-placeholder{height:1px;width:100%}.infinite-scroll-error{align-items:center;background:#e155541a;border-radius:8px;color:#e15554;display:flex;flex-direction:column;justify-content:center;margin:8px 0;padding:16px;text-align:center}.infinite-scroll-error p{font-size:12px;margin:0 0 8px}.add_member_btn{border-radius:25px!important;margin:0 auto;width:200px}.add_members_modal{width:320px!important}.modal-header-search-input-container{align-items:center;display:flex;margin-bottom:16px;width:100%}.modal-header-search-input-container .menu-header-search-icon{margin-top:4px;width:20px}')),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-right-section-container{background:#fff;border-radius:10px;box-sizing:border-box;display:flex;flex:1 1 0;flex-direction:column;height:100%;max-width:100%;min-width:0;overflow:hidden;position:relative;width:100%}.table-chat-right-section-container .clear-chat-button-container{background:#fff;box-sizing:border-box;cursor:pointer;display:flex;justify-content:flex-end;padding:8px 16px;position:absolute;top:64px;width:100%;z-index:999}.table-chat-right-section-container-empty{background:#fff;border-radius:10px;display:flex;flex-direction:column;height:100%;max-width:640px;position:relative;width:100%}.table-chat-messages{background:#fff;box-sizing:border-box;display:flex;flex:1;flex-direction:column;gap:10px;justify-content:flex-start;margin-bottom:10px;min-width:0;overflow-x:hidden;overflow-y:auto;padding:16px 20px}.empty-state-container{justify-content:center}.message-wrapper{box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;width:100%}.table-chat-empty-state{align-items:center;color:#7a8294;display:flex;flex-direction:column;font-size:14px;gap:20px;justify-content:center;max-width:641px;padding:0 60px;text-align:center}.table-chat-empty-state p{margin:0}.infinite-scroll-trigger{min-height:60px;padding:16px}.infinite-scroll-loading,.infinite-scroll-trigger{align-items:center;display:flex;justify-content:center}.infinite-scroll-loading{width:100%}.infinite-scroll-placeholder{height:1px;width:100%}.infinite-scroll-error{align-items:center;background:#e155541a;border-radius:8px;color:#e15554;display:flex;flex-direction:column;justify-content:center;margin:8px 0;padding:16px;text-align:center}.infinite-scroll-error p{font-size:12px;margin:0 0 8px}.add_member_btn{border-radius:25px!important;margin:0 auto;width:200px}.add_members_modal{width:320px!important}.modal-header-search-input-container{align-items:center;display:flex;margin-bottom:16px;width:100%}.modal-header-search-input-container .menu-header-search-icon{margin-top:4px;width:20px}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useRef, useState, useCallback, useEffect } from "react";
 import { getAssetUrl } from "../../../../utils/assetBase.js";
@@ -7,7 +7,6 @@ import { ChatInput } from "./ChatInput/ChatInput.js";
 import { ChatMessage } from "./ChatMessages/ChatMessage.js";
 import { DateSeparator } from "./DateSeparator/DateSeparator.js";
 import { Avatar } from "../../../Avatar/index.js";
-import { Badge } from "../../../Badge/index.js";
 import { Button } from "../../../Button/index.js";
 import { Checkbox } from "../../../Checkbox/index.js";
 import { Input } from "../../../Input/index.js";
@@ -63,13 +62,8 @@ const TableChatRightSection = ({
   const [inputValue, setInputValue] = useState("");
   const [messages, setMessages] = useState(propMessages);
   const [showClearChat, setShowClearChat] = useState(false);
-  const [floatingDateLabel, setFloatingDateLabel] = useState("");
-  const [floatingDateVisible, setFloatingDateVisible] = useState(false);
-  const floatingDateTimerRef = useRef(null);
-  const scrollRafRef = useRef(null);
   const [isEditMode, setIsEditMode] = useState(false);
   const [editingMessage, setEditingMessage] = useState(null);
-  const [replyingToMessage, setReplyingToMessage] = useState(null);
   const [searchResults, setSearchResults] = useState([]);
   const [isSearchActive, setIsSearchActive] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -162,12 +156,6 @@ const TableChatRightSection = ({
       setEnableInfiniteScroll(false);
     }
   }, [chatId]);
-  useEffect(() => {
-    setReplyingToMessage(null);
-    setIsEditMode(false);
-    setEditingMessage(null);
-    setInputValue("");
-  }, [chatId]);
   useEffect(() => {
     const trigger = messageConfig.messagesClearedTrigger;
     if (trigger && trigger > 0 && chatId) {
@@ -423,96 +411,69 @@ const TableChatRightSection = ({
     }
   }, [realTimeMessages, chatId, currentTopicId, autoScroll]);
   const handleSend = async (payload) => {
-    var _a2;
-    if (inputChatConfig.onSend) {
+    if (isEditMode && editingMessage) {
+      await handleUpdateMessage(payload);
+    } else if (inputChatConfig.onSend) {
       try {
-        const sendPayload = replyingToMessage ? {
-          ...payload,
-          replyToMessageId: replyingToMessage.id,
-          quote: {
-            authorLabel: replyingToMessage.authorName || ((_a2 = replyingToMessage.otherProps) == null ? void 0 : _a2.sender_name) || (replyingToMessage.author === "user" ? t("tableChat.message.you") : void 0),
-            authorName: replyingToMessage.authorName,
-            content: replyingToMessage.content,
-            messageId: replyingToMessage.id
-          }
-        } : payload;
-        const response = await inputChatConfig.onSend(sendPayload, chatId);
+        const response = await inputChatConfig.onSend(payload, chatId);
         if (onRealTimeMessageUpdate && response) {
           onRealTimeMessageUpdate(response);
         }
         setInputValue("");
-        exitReplyMode();
       } catch (error) {
         console.error("Error sending message:", error);
       }
     } else {
       setInputValue("");
-      exitReplyMode();
     }
   };
   const handleUpdateMessage = async (updatedContent) => {
     var _a2;
     if (messageConfig.onMessageUpdate && editingMessage) {
       try {
-        const content = typeof updatedContent === "string" ? updatedContent : updatedContent == null ? void 0 : updatedContent.content;
-        const response = await messageConfig.onMessageUpdate(editingMessage.id, {
-          content,
-          ...typeof updatedContent === "object" && updatedContent !== null ? updatedContent : {}
-        });
+        const response = await messageConfig.onMessageUpdate(editingMessage.id, updatedContent);
         exitEditMode();
         const isRealTimeMessage = editingMessage.isRealTime || ((_a2 = editingMessage.otherProps) == null ? void 0 : _a2.isRealTime);
         if (isRealTimeMessage) {
           if (onRealTimeMessageUpdate && response) {
             onRealTimeMessageUpdate(response);
           }
-        } else if (response) {
-          setMessages(
-            (prevMessages) => prevMessages.map((msg) => {
-              if (msg.id !== editingMessage.id) return msg;
-              if (response.content != null || response.author != null) {
-                return { ...msg, ...response, edited: true, content: response.content ?? content };
-              }
-              return { ...msg, content, edited: true };
-            })
-          );
-        } else if (content) {
-          setMessages(
-            (prevMessages) => prevMessages.map(
-              (msg) => msg.id === editingMessage.id ? { ...msg, content, edited: true } : msg
-            )
-          );
+        } else {
+          if (response) {
+            setMessages((prevMessages) => {
+              return prevMessages.map((msg) => {
+                if (msg.id === editingMessage.id) {
+                  return response;
+                }
+                return msg;
+              });
+            });
+          }
         }
       } catch (error) {
         console.error("Error updating message:", error);
-        throw error;
       }
     }
   };
   const handleEditMessage = (message) => {
-    exitReplyMode();
     setIsEditMode(true);
     setEditingMessage(message);
+    setInputValue(message.content || "");
   };
   const exitEditMode = () => {
     setIsEditMode(false);
     setEditingMessage(null);
-  };
-  const handleInlineSaveEdit = async (content) => {
-    await handleUpdateMessage({ content });
-  };
-  const exitReplyMode = () => {
-    setReplyingToMessage(null);
+    setInputValue("");
   };
   const handleReply = async (messageId) => {
-    exitEditMode();
-    const message = messages.find((msg) => msg.id === messageId) || (isSearchActive ? searchResults.find((msg) => msg.id === messageId) : null);
-    if (message) {
-      setReplyingToMessage(message);
-    }
     if (inputChatConfig.onMessageReply) {
-      await inputChatConfig.onMessageReply(messageId, chatId, message);
+      await inputChatConfig.onMessageReply(messageId, chatId);
+    }
+  };
+  const handleBookmark = async (messageId) => {
+    if (inputChatConfig.onMessageBookmark) {
+      await inputChatConfig.onMessageBookmark(messageId, chatId);
     }
-    onMessageReply == null ? void 0 : onMessageReply(messageId, chatId);
   };
   const handlePin = async (messageId, pinned, chatId2, item) => {
     var _a2;
@@ -523,6 +484,11 @@ const TableChatRightSection = ({
       console.error("Error pinning message:", error);
     }
   };
+  const handleMore = async (messageId) => {
+    if (inputChatConfig.onMessageMore) {
+      await inputChatConfig.onMessageMore(messageId, chatId);
+    }
+  };
   const markMessageAsDeleted = (messageId) => {
     setMessages((prevMessages) => {
       return prevMessages.map((msg) => {
@@ -728,60 +694,6 @@ const TableChatRightSection = ({
       }
     }
   };
-  const { locale } = useTranslation();
-  const formatFloatingDate = useCallback(
-    (rawDate) => {
-      if (!rawDate) return "";
-      const today = /* @__PURE__ */ new Date();
-      const msgDate = new Date(rawDate);
-      if (isNaN(msgDate.getTime())) return "";
-      const diffDays = (new Date(today.getFullYear(), today.getMonth(), today.getDate()) - new Date(msgDate.getFullYear(), msgDate.getMonth(), msgDate.getDate())) / (1e3 * 60 * 60 * 24);
-      if (diffDays === 0) return t("tableChat.dateSeparator.today");
-      if (diffDays === 1) return t("tableChat.dateSeparator.yesterday");
-      if (diffDays > 1 && diffDays < 7)
-        return msgDate.toLocaleDateString(locale, { weekday: "long" });
-      return msgDate.toLocaleDateString(locale, {
-        year: "numeric",
-        month: "short",
-        day: "numeric"
-      });
-    },
-    [t, locale]
-  );
-  useEffect(() => {
-    const container = messagesRef.current;
-    if (!container) return;
-    const handleScroll = () => {
-      if (scrollRafRef.current) return;
-      scrollRafRef.current = requestAnimationFrame(() => {
-        scrollRafRef.current = null;
-        const separators = container.querySelectorAll("[data-date-iso]");
-        const containerTop = container.getBoundingClientRect().top;
-        let activeLabel = "";
-        for (const el of separators) {
-          if (el.getBoundingClientRect().bottom <= containerTop + 8) {
-            activeLabel = el.getAttribute("data-date-label") || "";
-          } else {
-            break;
-          }
-        }
-        if (activeLabel) {
-          setFloatingDateLabel(activeLabel);
-          setFloatingDateVisible(true);
-          clearTimeout(floatingDateTimerRef.current);
-          floatingDateTimerRef.current = setTimeout(() => {
-            setFloatingDateVisible(false);
-          }, 2e3);
-        }
-      });
-    };
-    container.addEventListener("scroll", handleScroll, { passive: true });
-    return () => {
-      container.removeEventListener("scroll", handleScroll);
-      cancelAnimationFrame(scrollRafRef.current);
-      clearTimeout(floatingDateTimerRef.current);
-    };
-  }, []);
   return /* @__PURE__ */ jsxs("div", { className: `table-chat-right-section-container ${className}`, children: [
     chatId ? /* @__PURE__ */ jsx(
       ChatHeader,
@@ -798,9 +710,10 @@ const TableChatRightSection = ({
         title
       }
     ) : null,
-    messages.length > 0 ? /* @__PURE__ */ jsx("div", { className: "clear-chat-bar", children: /* @__PURE__ */ jsx(
+    messages.length > 0 && /* @__PURE__ */ jsx("div", { className: "clear-chat-button-container", children: /* @__PURE__ */ jsx(
       Button,
       {
+        className: "clear-chat-button",
         size: "small",
         variant: "text",
         onClick: (event) => {
@@ -809,241 +722,216 @@ const TableChatRightSection = ({
         },
         children: t("tableChat.right.clearChat")
       }
-    ) }) : null,
-    /* @__PURE__ */ jsxs("div", { className: "chat-messages-area", children: [
-      floatingDateLabel ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-live": "polite",
-          className: `floating-date-badge date-separator ${floatingDateVisible ? "floating-date-badge--visible" : ""}`,
-          children: /* @__PURE__ */ jsx(Badge, { color: "default", label: floatingDateLabel, size: "small", variant: "stroke" })
-        }
-      ) : null,
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: messagesRef,
-          className: `table-chat-messages ${groupedItems.length === 0 && !hasMore ? "empty-state-container" : ""}`,
-          children: [
-            hasMore && /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "infinite-scroll-trigger", children: isLoadingMore ? /* @__PURE__ */ jsx("div", { className: "infinite-scroll-loading", children: /* @__PURE__ */ jsx(Loader, { size: "medium" }) }) : /* @__PURE__ */ jsx("div", { className: "infinite-scroll-placeholder" }) }),
-            isSearchLoading ? /* @__PURE__ */ jsx("div", { className: "table-chat-loading-state", children: /* @__PURE__ */ jsx(ChatMessageListSkeleton, { messageCount: 4 }) }) : groupedItems.length === 0 && !hasMore ? /* @__PURE__ */ jsx("div", { className: "table-chat-empty-state", children: isSearchActive ? /* @__PURE__ */ jsx(
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: messagesRef,
+        className: `table-chat-messages ${groupedItems.length === 0 && !hasMore ? "empty-state-container" : ""}`,
+        children: [
+          hasMore && /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "infinite-scroll-trigger", children: isLoadingMore ? /* @__PURE__ */ jsx("div", { className: "infinite-scroll-loading", children: /* @__PURE__ */ jsx(Loader, { size: "medium" }) }) : /* @__PURE__ */ jsx("div", { className: "infinite-scroll-placeholder" }) }),
+          isSearchLoading ? /* @__PURE__ */ jsx("div", { className: "table-chat-loading-state", children: /* @__PURE__ */ jsx(ChatMessageListSkeleton, { messageCount: 4 }) }) : groupedItems.length === 0 && !hasMore ? /* @__PURE__ */ jsx("div", { className: "table-chat-empty-state", children: isSearchActive ? /* @__PURE__ */ jsx(
+            EmptyContainer,
+            {
+              subTitle: t("tableChat.right.tryDifferentKeyword"),
+              title: t("tableChat.right.noMessagesFound", {
+                query: searchQuery
+              })
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
               EmptyContainer,
               {
-                subTitle: t("tableChat.right.tryDifferentKeyword"),
-                title: t("tableChat.right.noMessagesFound", {
-                  query: searchQuery
-                })
+                subTitle: t("tableChat.right.noConversationSubtitle"),
+                title: t("tableChat.right.noConversationTitle")
               }
-            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                EmptyContainer,
-                {
-                  subTitle: t("tableChat.right.noConversationSubtitle"),
-                  title: t("tableChat.right.noConversationTitle")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  disabled: showAddMembersLoading,
-                  size: "large",
-                  type: "default",
-                  variant: "secondary",
-                  onClick: () => setShowAddMembers(true),
-                  className: "add_member_btn",
-                  iconPlacement: "right",
-                  children: showAddMembersLoading ? t("tableChat.right.adding") : t("tableChat.right.addMembers")
-                }
-              )
-            ] }) }) : groupedItems.map((item, index) => {
-              var _a2, _b2, _c;
-              if (item.type === "date-separator") {
-                const dateLabel = formatFloatingDate(item.date);
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-date-iso": new Date(item.date).toISOString(),
-                    "data-date-label": dateLabel,
-                    children: /* @__PURE__ */ jsx(DateSeparator, { date: item.date })
-                  },
-                  item.id
-                );
-              }
-              if (item.type === "system" || item.type === "info") {
-                const label = typeof item.content === "string" ? item.content.replace(/<[^>]*>/g, "").trim() : item.text || item.label || "";
-                if (!label) return null;
-                return /* @__PURE__ */ jsx("div", { className: "system-info-row", "data-message-id": item.id, children: /* @__PURE__ */ jsx(Badge, { color: "info", label, size: "small", variant: "subtle" }) }, item.id);
-              }
-              const isUserMessage = currentUserId ? item.senderId === currentUserId || ((_a2 = item.otherProps) == null ? void 0 : _a2.sender_id) === currentUserId || item.senderId === String(currentUserId) || ((_b2 = item.otherProps) == null ? void 0 : _b2.sender_id) === String(currentUserId) || item.author === "user" : item.author === "user";
-              return /* @__PURE__ */ jsx("div", { className: "message-wrapper", "data-message-id": item.id, children: /* @__PURE__ */ jsx(
-                ChatMessage,
-                {
-                  authorAvatar: item.authorAvatar,
-                  authorName: item.authorName,
-                  content: item.content,
-                  deleted: item.deleted || ((_c = item.otherProps) == null ? void 0 : _c.deleted) || false,
-                  edited: item.edited || false,
-                  highlightColor,
-                  isEditing: isEditMode && (editingMessage == null ? void 0 : editingMessage.id) === item.id,
-                  isHighlighted: highlightedMessageId === item.id,
-                  isPinChatIconvisible: messageConfig == null ? void 0 : messageConfig.isPinChatIconVisible,
-                  isThreadIconVisible: messageConfig == null ? void 0 : messageConfig.isThreadIconVisible,
-                  isUser: isUserMessage,
-                  messageId: item.id,
-                  pinned: item.isPinned,
-                  priority: item.priority,
-                  quote: item.quote,
-                  moreOptions: typeof (messageConfig == null ? void 0 : messageConfig.moreOptions) === "function" ? messageConfig.moreOptions(item) : messageConfig == null ? void 0 : messageConfig.moreOptions,
-                  showDeleteOption: (messageConfig == null ? void 0 : messageConfig.showDeleteOption) !== false,
-                  showEditOption: (messageConfig == null ? void 0 : messageConfig.showEditOption) !== false,
-                  showFinalize: (messageConfig == null ? void 0 : messageConfig.showFinalize) !== false,
-                  showReplyActions: (messageConfig == null ? void 0 : messageConfig.showReplyActions) !== false && item.showReplyBadge !== false,
-                  timestamp: item.timestamp,
-                  type: item.type,
-                  onCancelEdit: exitEditMode,
-                  onEdit: () => handleEditMessage(item),
-                  onFinalize: () => {
-                    var _a3;
-                    (_a3 = messageConfig == null ? void 0 : messageConfig.onFinalize) == null ? void 0 : _a3.call(messageConfig, item.id, chatId, item);
-                  },
-                  onMessageDelete: handleMessageDelete,
-                  onPin: async (pinned) => {
-                    return await handlePin(item.id, pinned, chatId, item);
-                  },
-                  onReply: () => {
-                    handleReply(item.id);
-                  },
-                  onSaveEdit: handleInlineSaveEdit,
-                  onThreadClick: () => {
-                    var _a3;
-                    onThreadClick == null ? void 0 : onThreadClick(item.id, chatId);
-                    (_a3 = messageConfig == null ? void 0 : messageConfig.onThreadClick) == null ? void 0 : _a3.call(messageConfig, item.id, chatId);
-                  }
-                }
-              ) }, item.id);
-            }),
+            ),
             /* @__PURE__ */ jsx(
-              Modal,
+              Button,
               {
-                className: "test-modal add_members_modal",
-                loading: showAddMembersLoading,
-                open: showAddMembers,
-                primaryButtonLabel: showAddMembersLoading ? t("tableChat.right.adding") : t("tableChat.right.add"),
-                primaryButtonProps: {
-                  disabled: !addMembers.length > 0 || showAddMembersLoading
+                disabled: showAddMembersLoading,
+                size: "large",
+                type: "default",
+                variant: "secondary",
+                onClick: () => setShowAddMembers(true),
+                className: "add_member_btn",
+                iconPlacement: "right",
+                children: showAddMembersLoading ? t("tableChat.right.adding") : t("tableChat.right.addMembers")
+              }
+            )
+          ] }) }) : groupedItems.map((item) => {
+            var _a2, _b2, _c;
+            if (item.type === "date-separator") {
+              return /* @__PURE__ */ jsx(DateSeparator, { date: item.date, format: "relative" }, item.id);
+            }
+            return /* @__PURE__ */ jsx("div", { className: "message-wrapper", "data-message-id": item.id, children: /* @__PURE__ */ jsx(
+              ChatMessage,
+              {
+                author: item.author,
+                authorAvatar: item.authorAvatar,
+                authorName: item.authorName,
+                content: item.content,
+                deleted: item.deleted || ((_a2 = item.otherProps) == null ? void 0 : _a2.deleted) || false,
+                edited: item.edited || false,
+                isHighlighted: highlightedMessageId === item.id,
+                isPinChatIconvisible: messageConfig == null ? void 0 : messageConfig.isPinChatIconVisible,
+                isThreadIconVisible: messageConfig == null ? void 0 : messageConfig.isThreadIconVisible,
+                messageId: item.id,
+                pinned: item.isPinned,
+                priority: item.priority,
+                showActions: messageConfig.showActions ?? item.showActions !== false,
+                timestamp: item.timestamp,
+                type: item.type,
+                onBookmark: () => {
+                  handleBookmark(item.id);
+                  onMessageBookmark == null ? void 0 : onMessageBookmark(item.id, chatId);
                 },
-                secondaryButtonLabel: t("common.cancel"),
-                size: "small",
-                title: t("tableChat.right.addMembers"),
-                onClose: () => {
-                  setShowAddMembers(false);
+                onEdit: () => handleEditMessage(item),
+                onMessageDelete: handleMessageDelete,
+                onMore: () => {
+                  handleMore(item.id);
+                  onMessageMore == null ? void 0 : onMessageMore(item.id, chatId);
+                },
+                onPin: async (pinned) => {
+                  return await handlePin(item.id, pinned, chatId, item);
+                },
+                onRefetchMessages: async () => {
+                  return messages;
+                },
+                onReply: () => {
+                  handleReply(item.id);
+                  onMessageReply == null ? void 0 : onMessageReply(item.id, chatId);
                 },
-                onPrimaryButtonClick: saveMembersInChat,
-                onSecondaryButtonClick: () => {
-                  setShowAddMembers(false);
+                onThreadClick: () => {
+                  var _a3;
+                  onThreadClick == null ? void 0 : onThreadClick(item.id, chatId);
+                  (_a3 = messageConfig == null ? void 0 : messageConfig.onThreadClick) == null ? void 0 : _a3.call(messageConfig, item.id, chatId);
                 },
-                children: /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { className: "modal-header-search-input-container", children: /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      className: "modal-header-search-input",
-                      leftIcon: /* @__PURE__ */ jsx("img", { alt: "search", className: "menu-header-search-icon", src: SearchIcon }),
-                      placeholder: t("tableChat.right.searchMembers"),
-                      value: memberSearchQuery,
-                      onChange: (e) => {
-                        handleMemberSearch(e.target.value);
-                      }
+                highlightColor,
+                isUser: currentUserId ? item.senderId === currentUserId || ((_b2 = item.otherProps) == null ? void 0 : _b2.sender_id) === currentUserId || item.senderId === String(currentUserId) || ((_c = item.otherProps) == null ? void 0 : _c.sender_id) === String(currentUserId) || item.author === "user" : item.author === "user"
+              }
+            ) }, item.id);
+          }),
+          /* @__PURE__ */ jsx(
+            Modal,
+            {
+              className: "test-modal add_members_modal",
+              loading: showAddMembersLoading,
+              open: showAddMembers,
+              primaryButtonLabel: showAddMembersLoading ? t("tableChat.right.adding") : t("tableChat.right.add"),
+              primaryButtonProps: {
+                disabled: !addMembers.length > 0 || showAddMembersLoading
+              },
+              secondaryButtonLabel: t("common.cancel"),
+              size: "small",
+              title: t("tableChat.right.addMembers"),
+              onClose: () => {
+                setShowAddMembers(false);
+              },
+              onPrimaryButtonClick: saveMembersInChat,
+              onSecondaryButtonClick: () => {
+                setShowAddMembers(false);
+              },
+              children: /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "modal-header-search-input-container", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: "modal-header-search-input",
+                    leftIcon: /* @__PURE__ */ jsx("img", { alt: "search", className: "menu-header-search-icon", src: SearchIcon }),
+                    placeholder: t("tableChat.right.searchMembers"),
+                    value: memberSearchQuery,
+                    onChange: (e) => {
+                      handleMemberSearch(e.target.value);
                     }
-                  ) }),
-                  memberList.length > 0 ? filteredMemberList.length > 0 ? /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: filteredMemberList.map((user, index) => /* @__PURE__ */ jsxs(
-                    "li",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "10px",
-                        marginBottom: "8px"
-                        //
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          Checkbox,
-                          {
-                            defaultChecked: true,
-                            checked: addMembers.includes(user.value),
-                            variant: "default",
-                            onChange: () => {
-                              addInChat(user.value);
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Avatar,
-                          {
-                            label: user.label,
-                            size: "small",
-                            src: "static/media/avatar_sample.b13b667a.jpeg",
-                            type: "withoutPicture"
+                  }
+                ) }),
+                memberList.length > 0 ? filteredMemberList.length > 0 ? /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: filteredMemberList.map((user, index) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "10px",
+                      marginBottom: "8px"
+                      //
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          defaultChecked: true,
+                          checked: addMembers.includes(user.value),
+                          variant: "default",
+                          onChange: () => {
+                            addInChat(user.value);
                           }
-                        ),
-                        /* @__PURE__ */ jsx("span", { children: user.label })
-                      ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          label: user.label,
+                          size: "small",
+                          src: "static/media/avatar_sample.b13b667a.jpeg",
+                          type: "withoutPicture"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: user.label })
+                    ]
+                  },
+                  user.id || index
+                )) }) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      textAlign: "center",
+                      padding: "20px",
+                      color: "#666",
+                      fontSize: "14px"
                     },
-                    user.id || index
-                  )) }) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        textAlign: "center",
-                        padding: "20px",
-                        color: "#666",
-                        fontSize: "14px"
-                      },
-                      children: t("tableChat.right.noMembersFound", {
-                        query: memberSearchQuery
-                      })
-                    }
-                  ) : t("common.loading")
-                ] }, ".0")
+                    children: t("tableChat.right.noMembersFound", {
+                      query: memberSearchQuery
+                    })
+                  }
+                ) : t("common.loading")
+              ] }, ".0")
+            }
+          ),
+          infiniteScrollError && /* @__PURE__ */ jsxs("div", { className: "infinite-scroll-error", children: [
+            /* @__PURE__ */ jsx("p", { children: t("tableChat.right.loadOlderFailed") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "text",
+                onClick: () => {
+                  window.location.reload();
+                },
+                children: t("tableChat.right.retry")
               }
-            ),
-            infiniteScrollError && /* @__PURE__ */ jsxs("div", { className: "infinite-scroll-error", children: [
-              /* @__PURE__ */ jsx("p", { children: t("tableChat.right.loadOlderFailed") }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  size: "small",
-                  variant: "text",
-                  onClick: () => {
-                    window.location.reload();
-                  },
-                  children: t("tableChat.right.retry")
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    ] }),
+            )
+          ] })
+        ]
+      }
+    ),
     chatId ? /* @__PURE__ */ jsx(
       ChatInput,
       {
         chatId,
-        isReplyMode: Boolean(replyingToMessage),
+        editingMessage,
+        isEditMode,
         maxLength,
         messageConfig,
         placeholder: resolvedPlaceholder,
         quickActionLabel: (_a = inputChatConfig.inputConfig) == null ? void 0 : _a.quickActionLabel,
-        replyingToMessage,
         showFormatting,
         showQuickAction: (_b = inputChatConfig.inputConfig) == null ? void 0 : _b.showQuickAction,
         value: inputValue,
         onAttach: onAttachFile,
-        onCancelReply: exitReplyMode,
+        onCancelEdit: exitEditMode,
         onChange: setInputValue,
         onEmojiClick,
         onImageUpload,
-        onQuickAction: inputChatConfig == null ? void 0 : inputChatConfig.onQuickAction,
         onSend: handleSend
       }
     ) : null,