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

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-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)}}();
+!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)}}();
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React__default, { useRef, useState, useCallback, useEffect } from "react";
 import { getAssetUrl } from "../../../../utils/assetBase.js";
@@ -7,6 +7,7 @@ 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";
@@ -62,8 +63,13 @@ 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("");
@@ -156,6 +162,12 @@ const TableChatRightSection = ({
       setEnableInfiniteScroll(false);
     }
   }, [chatId]);
+  useEffect(() => {
+    setReplyingToMessage(null);
+    setIsEditMode(false);
+    setEditingMessage(null);
+    setInputValue("");
+  }, [chatId]);
   useEffect(() => {
     const trigger = messageConfig.messagesClearedTrigger;
     if (trigger && trigger > 0 && chatId) {
@@ -411,69 +423,96 @@ const TableChatRightSection = ({
     }
   }, [realTimeMessages, chatId, currentTopicId, autoScroll]);
   const handleSend = async (payload) => {
-    if (isEditMode && editingMessage) {
-      await handleUpdateMessage(payload);
-    } else if (inputChatConfig.onSend) {
+    var _a2;
+    if (inputChatConfig.onSend) {
       try {
-        const response = await inputChatConfig.onSend(payload, chatId);
+        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);
         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 response = await messageConfig.onMessageUpdate(editingMessage.id, updatedContent);
+        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 : {}
+        });
         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) => {
-              return prevMessages.map((msg) => {
-                if (msg.id === editingMessage.id) {
-                  return response;
-                }
-                return msg;
-              });
-            });
-          }
+        } 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
+            )
+          );
         }
       } 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);
-    setInputValue("");
+  };
+  const handleInlineSaveEdit = async (content) => {
+    await handleUpdateMessage({ content });
+  };
+  const exitReplyMode = () => {
+    setReplyingToMessage(null);
   };
   const handleReply = async (messageId) => {
-    if (inputChatConfig.onMessageReply) {
-      await inputChatConfig.onMessageReply(messageId, chatId);
+    exitEditMode();
+    const message = messages.find((msg) => msg.id === messageId) || (isSearchActive ? searchResults.find((msg) => msg.id === messageId) : null);
+    if (message) {
+      setReplyingToMessage(message);
     }
-  };
-  const handleBookmark = async (messageId) => {
-    if (inputChatConfig.onMessageBookmark) {
-      await inputChatConfig.onMessageBookmark(messageId, chatId);
+    if (inputChatConfig.onMessageReply) {
+      await inputChatConfig.onMessageReply(messageId, chatId, message);
     }
+    onMessageReply == null ? void 0 : onMessageReply(messageId, chatId);
   };
   const handlePin = async (messageId, pinned, chatId2, item) => {
     var _a2;
@@ -484,11 +523,6 @@ 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) => {
@@ -694,6 +728,60 @@ 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,
@@ -710,10 +798,9 @@ const TableChatRightSection = ({
         title
       }
     ) : null,
-    messages.length > 0 && /* @__PURE__ */ jsx("div", { className: "clear-chat-button-container", children: /* @__PURE__ */ jsx(
+    messages.length > 0 ? /* @__PURE__ */ jsx("div", { className: "clear-chat-bar", children: /* @__PURE__ */ jsx(
       Button,
       {
-        className: "clear-chat-button",
         size: "small",
         variant: "text",
         onClick: (event) => {
@@ -722,216 +809,241 @@ const TableChatRightSection = ({
         },
         children: t("tableChat.right.clearChat")
       }
-    ) }),
-    /* @__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(
+    ) }) : 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(
               EmptyContainer,
               {
-                subTitle: t("tableChat.right.noConversationSubtitle"),
-                title: t("tableChat.right.noConversationTitle")
+                subTitle: t("tableChat.right.tryDifferentKeyword"),
+                title: t("tableChat.right.noMessagesFound", {
+                  query: searchQuery
+                })
               }
-            ),
-            /* @__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")
+            ) : /* @__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
+                );
               }
-            )
-          ] }) }) : 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);
-                },
-                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);
-                },
-                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);
-                },
-                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"
+              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);
               }
-            ) }, 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"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { children: user.label })
-                    ]
+              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);
                   },
-                  user.id || index
-                )) }) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      textAlign: "center",
-                      padding: "20px",
-                      color: "#666",
-                      fontSize: "14px"
-                    },
-                    children: t("tableChat.right.noMembersFound", {
-                      query: memberSearchQuery
-                    })
+                  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);
                   }
-                ) : t("common.loading")
-              ] }, ".0")
-            }
-          ),
-          infiniteScrollError && /* @__PURE__ */ jsxs("div", { className: "infinite-scroll-error", children: [
-            /* @__PURE__ */ jsx("p", { children: t("tableChat.right.loadOlderFailed") }),
+                }
+              ) }, item.id);
+            }),
             /* @__PURE__ */ jsx(
-              Button,
+              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",
-                variant: "text",
-                onClick: () => {
-                  window.location.reload();
+                title: t("tableChat.right.addMembers"),
+                onClose: () => {
+                  setShowAddMembers(false);
+                },
+                onPrimaryButtonClick: saveMembersInChat,
+                onSecondaryButtonClick: () => {
+                  setShowAddMembers(false);
                 },
-                children: t("tableChat.right.retry")
+                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"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { children: user.label })
+                      ]
+                    },
+                    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")
               }
-            )
-          ] })
-        ]
-      }
-    ),
+            ),
+            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,
-        editingMessage,
-        isEditMode,
+        isReplyMode: Boolean(replyingToMessage),
         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,
-        onCancelEdit: exitEditMode,
+        onCancelReply: exitReplyMode,
         onChange: setInputValue,
         onEmojiClick,
         onImageUpload,
+        onQuickAction: inputChatConfig == null ? void 0 : inputChatConfig.onQuickAction,
         onSend: handleSend
       }
     ) : null,