@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/ChatBubble/ChatBubble.tsx

@@ -2,25 +2,28 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import {
   ExpertReference,
+  Medium,
   Memori,
   Message,
   Tenant,
   User,
 } from '@memori.ai/memori-api-client/dist/types';
 import { Props as MemoriProps } from '../MemoriWidget/MemoriWidget';
-import { Transition } from '@headlessui/react';
 import { getResourceUrl } from '../../helpers/media';
-import UserIcon from '../icons/User';
-import AI from '../icons/AI';
-import Translation from '../icons/Translation';
-import Tooltip from '../ui/Tooltip';
+import {
+  User as UserIcon,
+  Bot,
+  Languages,
+  HelpCircle,
+  Copy,
+  Code,
+  Bug,
+  Check,
+} from 'lucide-react';
+import { Tooltip } from '@memori.ai/ui';
 import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
-import Button from '../ui/Button';
-import QuestionHelp from '../icons/QuestionHelp';
-import Copy from '../icons/Copy';
-import Code from '../icons/Code';
-import Bug from '../icons/Bug';
+import { Button } from '@memori.ai/ui';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
 import { stripHTML, stripOutputTags } from '../../helpers/utils';
 import {
@@ -30,12 +33,29 @@ import {
   stripAllInternalTags,
   truncateMessage,
 } from '../../helpers/message';
-import Expandable from '../ui/Expandable';
-import Modal from '../ui/Modal';
+import { Expandable, Modal } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
+const ASSET_URL_PATTERN = /https?:\/\/\S*\/api\/v\d+\/asset\/\S+/gi;
+
+const sanitizeRawCopyText = (text: string) =>
+  sanitizeMsg(
+    stripAttachmentTags(text)
+      .replace(/<\/?documents?\b[^>]*>/gi, '')
+      .replace(/<documents?\b[^>]*\/>/gi, '')
+      .replace(/<\/?attachments?\b[^>]*>/gi, '')
+      .replace(/<attachments?\b[^>]*\/>/gi, '')
+      .replace(ASSET_URL_PATTERN, '')
+      .trim()
+  );
+import ArtifactHandler from '../MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler';
+
+/** Same reset window as ShareButton copy feedback */
+const COPY_FEEDBACK_MS = 2500;
 
 // Always import and load MathJax
 import { installMathJax } from '../../helpers/utils';
+import MediaWidget from '../MediaWidget/MediaWidget';
+import { Props as MediaWidgetProps } from '../MediaWidget/MediaWidget';
 
 // Import MathJax types
 declare global {
@@ -68,6 +88,10 @@ export interface Props {
   showFunctionCache?: boolean;
   showReasoning?: boolean;
   usageHtml?: string;
+  isChatlogPanel?: boolean;
+  codeMimeTypes?: string[];
+  translateTo?: string;
+  customMediaRenderer?: MediaWidgetProps['customMediaRenderer'];
 }
 
 const ChatBubble: React.FC<Props> = ({
@@ -84,7 +108,6 @@ const ChatBubble: React.FC<Props> = ({
   showTranslationOriginal = false,
   simulateUserPrompt,
   showAIicon = true,
-  isFirst = false,
   useMathFormatting = false,
   user,
   userAvatar,
@@ -92,16 +115,20 @@ const ChatBubble: React.FC<Props> = ({
   showFunctionCache = false,
   showReasoning = false,
   usageHtml = '',
+  isChatlogPanel = false,
+  codeMimeTypes = [],
+  translateTo,
+  customMediaRenderer,
 }) => {
   const { t, i18n } = useTranslation();
   const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
   const [openFunctionCache, setOpenFunctionCache] = useState(false);
-  const [copyFeedback, setCopyFeedback] = useState({
-    plain: false,
-    raw: false,
-  });
-  const copyFeedbackTimers = useRef<{
+  const [copyStatus, setCopyStatus] = useState<{
+    plain: 'idle' | 'success' | 'error';
+    raw: 'idle' | 'success' | 'error';
+  }>({ plain: 'idle', raw: 'idle' });
+  const copyResetTimers = useRef<{
     plain: ReturnType<typeof setTimeout> | null;
     raw: ReturnType<typeof setTimeout> | null;
   }>({
@@ -141,6 +168,31 @@ const ChatBubble: React.FC<Props> = ({
     )
   );
   const copiedLabel = t('copied') || 'Copied';
+  const formattedTimestamp = message.timestamp
+    ? (() => {
+        const date = new Date(
+          message.timestamp.endsWith('Z')
+            ? message.timestamp
+            : `${message.timestamp}Z`
+        );
+        const now = new Date();
+        const isToday =
+          date.getFullYear() === now.getFullYear() &&
+          date.getMonth() === now.getMonth() &&
+          date.getDate() === now.getDate();
+        return new Intl.DateTimeFormat(i18n.language || 'it', {
+          ...(isToday
+            ? {}
+            : {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+              }),
+          hour: '2-digit',
+          minute: '2-digit',
+        }).format(date);
+      })()
+    : null;
 
   // Format function cache content
   const functionCacheData = message.media?.filter(
@@ -190,52 +242,144 @@ const ChatBubble: React.FC<Props> = ({
 
   useEffect(() => {
     return () => {
-      (
-        Object.keys(copyFeedbackTimers.current) as Array<'plain' | 'raw'>
-      ).forEach(key => {
-        const timer = copyFeedbackTimers.current[key];
-        if (timer) {
-          clearTimeout(timer);
-          copyFeedbackTimers.current[key] = null;
+      (Object.keys(copyResetTimers.current) as Array<'plain' | 'raw'>).forEach(
+        key => {
+          const timer = copyResetTimers.current[key];
+          if (timer) {
+            clearTimeout(timer);
+            copyResetTimers.current[key] = null;
+          }
         }
-      });
+      );
     };
   }, []);
 
-  const triggerCopyFeedback = (type: 'plain' | 'raw') => {
-    setCopyFeedback(prev => ({ ...prev, [type]: true }));
-    if (copyFeedbackTimers.current[type]) {
-      clearTimeout(copyFeedbackTimers.current[type]!);
+  const clearCopyReset = (type: 'plain' | 'raw') => {
+    if (copyResetTimers.current[type]) {
+      clearTimeout(copyResetTimers.current[type]!);
+      copyResetTimers.current[type] = null;
     }
-    copyFeedbackTimers.current[type] = setTimeout(() => {
-      setCopyFeedback(prev => ({ ...prev, [type]: false }));
-      copyFeedbackTimers.current[type] = null;
-    }, 1500);
   };
 
-  const handleCopyClick = (type: 'plain' | 'raw', text: string) => {
+  const scheduleCopyReset = (type: 'plain' | 'raw') => {
+    clearCopyReset(type);
+    copyResetTimers.current[type] = setTimeout(() => {
+      setCopyStatus(prev => ({ ...prev, [type]: 'idle' }));
+      copyResetTimers.current[type] = null;
+    }, COPY_FEEDBACK_MS);
+  };
+
+  const handleCopyClick = async (type: 'plain' | 'raw', text: string) => {
     if (!text?.length) return;
-    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-      navigator.clipboard
-        .writeText(text)
-        .then(() => triggerCopyFeedback(type))
-        .catch(err => {
-          console.error('Copy failed', err);
-        });
-    } else {
-      triggerCopyFeedback(type);
+    try {
+      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        throw new Error('Clipboard unavailable');
+      }
+      setCopyStatus(prev => ({ ...prev, [type]: 'success' }));
+      scheduleCopyReset(type);
+    } catch (err) {
+      console.error('Copy failed', err);
+      setCopyStatus(prev => ({ ...prev, [type]: 'error' }));
+      scheduleCopyReset(type);
     }
   };
 
   // Check if initial is a string (status message) or boolean (legacy)
   const initialStatus =
     typeof message.initial === 'string' ? message.initial : null;
-  const showInitialDivider =
-    (message.initial === true || isFirst) && !initialStatus;
+  const showInitialDivider = message.initial === true && !initialStatus;
 
   // Check if this is a system error message
   const isSystemError = message.emitter === 'system';
 
+  const renderAssistantAvatar = () => (
+    <picture
+      className="memori-chat--bubble-avatar"
+      title={
+        !!message.emitter?.length && !!memori.enableBoardOfExperts
+          ? message.emitter
+          : memori.name
+      }
+    >
+      <img
+        className="memori-chat--bubble-avatar-img"
+        alt={
+          !!message.emitter?.length && !!memori.enableBoardOfExperts
+            ? message.emitter
+            : memori.name
+        }
+        src={
+          !!message.emitter?.length &&
+          !!memori.enableBoardOfExperts &&
+          experts?.find(e => e.name === message.emitter)
+            ? `${new URL(apiUrl ?? '/').origin}/api/v1/memoriai/memori/avatar/${
+                experts.find(e => e.name === message.emitter)?.expertMemoriID
+              }`
+            : memori.avatarURL && memori.avatarURL.length > 0
+            ? getResourceUrl({
+                type: 'avatar',
+                tenantID: tenant?.name,
+                resourceURI: memori.avatarURL,
+                baseURL: baseUrl,
+                apiURL: apiUrl,
+              })
+            : getResourceUrl({
+                tenantID: tenant?.name,
+                type: 'avatar',
+                baseURL: baseUrl || 'https://www.aisuru.com',
+                apiURL: apiUrl,
+              })
+        }
+        onError={e => {
+          e.currentTarget.src =
+            memori.avatarURL && memori.avatarURL.length > 0
+              ? getResourceUrl({
+                  type: 'avatar',
+                  tenantID: tenant?.name,
+                  resourceURI: memori.avatarURL,
+                  baseURL: baseUrl,
+                })
+              : getResourceUrl({
+                  tenantID: tenant?.name,
+                  type: 'avatar',
+                  baseURL: baseUrl,
+                });
+
+          e.currentTarget.onerror = null;
+        }}
+      />
+    </picture>
+  );
+
+  const renderUserAvatar = () => {
+    if (
+      (!!userAvatar && typeof userAvatar === 'string') ||
+      (!userAvatar && !!user?.avatarURL?.length)
+    ) {
+      return (
+        <picture className="memori-chat--bubble-avatar">
+          <img
+            className="memori-chat--bubble-avatar-img"
+            alt={user?.userName ?? 'User'}
+            src={userAvatar ?? user?.avatarURL}
+          />
+        </picture>
+      );
+    }
+
+    if (userAvatar) {
+      return <div className="memori-chat--bubble-avatar">{userAvatar}</div>;
+    }
+
+    return (
+      <div className="memori-chat--bubble-avatar">
+        <UserIcon />
+      </div>
+    );
+  };
+
   if (initialStatus) {
     return (
       <div className="memori-chat--bubble-status-message">
@@ -249,302 +393,303 @@ const ChatBubble: React.FC<Props> = ({
   // Render system error messages as red warning messages
   if (isSystemError) {
     return (
-      <Transition
-        show
-        appear
-        as="div"
+      <div
         className={cx('memori-chat--bubble-container memori-chat-scroll-item', {
           'memori-chat--bubble-from-user': false,
         })}
       >
-        <Transition.Child
-          as="picture"
-          className="memori-chat--bubble-avatar"
-          enter="transition ease-in-out duration-300"
-          enterFrom={`opacity-0 scale-075 translate-x--15`}
-          enterTo="opacity-1 scale-1 translate-x-0"
-          leave="transition ease-in-out duration-300"
-          leaveFrom="opacity-1 scale-1 translate-x-0"
-          leaveTo={`opacity-0 scale-075 translate-x--15`}
-          title={
-            !!message.emitter?.length && !!memori.enableBoardOfExperts
-              ? message.emitter
-              : memori.name
-          }
-        >
-          <img
-            className="memori-chat--bubble-avatar-img"
-            alt={
-              !!message.emitter?.length && !!memori.enableBoardOfExperts
-                ? message.emitter
-                : memori.name
-            }
-            src={
-              !!message.emitter?.length &&
-              !!memori.enableBoardOfExperts &&
-              experts?.find(e => e.name === message.emitter)
-                ? `${
-                    new URL(apiUrl ?? '/').origin
-                  }/api/v1/memoriai/memori/avatar/${
-                    experts.find(e => e.name === message.emitter)
-                      ?.expertMemoriID
-                  }`
-                : memori.avatarURL && memori.avatarURL.length > 0
-                ? getResourceUrl({
-                    type: 'avatar',
-                    tenantID: tenant?.name,
-                    resourceURI: memori.avatarURL,
-                    baseURL: baseUrl,
-                    apiURL: apiUrl,
-                  })
-                : getResourceUrl({
-                    tenantID: tenant?.name,
-                    type: 'avatar',
-                    baseURL: baseUrl || 'https://www.aisuru.com',
-                    apiURL: apiUrl,
-                  })
-            }
-            onError={e => {
-              // Fallback image handling if primary source fails
-              e.currentTarget.src =
-                memori.avatarURL && memori.avatarURL.length > 0
-                  ? getResourceUrl({
-                      type: 'avatar',
-                      tenantID: tenant?.name,
-                      resourceURI: memori.avatarURL,
-                      baseURL: baseUrl,
-                    })
-                  : getResourceUrl({
-                      tenantID: tenant?.name,
-                      type: 'avatar',
-                      baseURL: baseUrl,
-                    });
-
-              e.currentTarget.onerror = null;
-            }}
-          />
-        </Transition.Child>
+        {renderAssistantAvatar()}
         <div className="memori-chat--bubble memori-chat--bubble-status-message-error">
           <div className="memori-chat--bubble-message ">
             {sanitizeMsg(cleanText)}
           </div>
         </div>
-      </Transition>
+      </div>
     );
   }
 
+  const shouldShowTimestampInAddon =
+    !!formattedTimestamp && (!message.fromUser || isChatlogPanel);
+  const shouldShowBubbleAddon =
+    shouldShowTimestampInAddon ||
+    shouldShowCopyButtons ||
+    (message.generatedByAI && showAIicon) ||
+    (showFeedback && simulateUserPrompt) ||
+    (showTranslationOriginal &&
+      message.translatedText &&
+      message.translatedText !== message.text) ||
+    (!message.fromUser &&
+      message.questionAnswered &&
+      apiUrl &&
+      showWhyThisAnswer);
+
+  const topMediaWidgetLinks = (message?.media
+    ?.filter(m => !m.properties?.functionSignature)
+    ?.filter(m => m.mimeType === 'text/html' && !!m.url) || []) as Medium[];
+
+  const topMediaWidgetMedia = [
+    ...(message?.media
+      ?.filter(m => !m.properties?.functionSignature)
+      ?.filter(
+        m =>
+          !(
+            codeMimeTypes.includes(m.mimeType) ||
+            (m.mimeType === 'text/html' && !!m.url)
+          )
+      ) || []),
+    ...(() => {
+      const text = message.translatedText || message.text;
+      const documentAttachmentRegex =
+        /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
+      const attachments: (Medium & { type?: string })[] = [];
+      let match;
+      let attachmentIndex = 0;
+
+      while ((match = documentAttachmentRegex.exec(text)) !== null) {
+        const [, filename, type, content] = match;
+        attachments.push({
+          mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
+            .toString(36)
+            .substr(2, 9)}`,
+          url: '',
+          mimeType: type,
+          title: filename,
+          content: content.trim(),
+          properties: { isDocumentAttachment: true },
+          type: 'document',
+        });
+        attachmentIndex++;
+      }
+
+      return attachments;
+    })(),
+  ];
+
+  const codeMediaWidgetMedia =
+    message?.media
+      ?.filter(m => !m.properties?.functionSignature)
+      ?.filter(m => codeMimeTypes.includes(m.mimeType)) || [];
+
+  const hasAddonAfterTimestamp =
+    shouldShowCopyButtons ||
+    (message.generatedByAI && showAIicon) ||
+    (showFeedback && simulateUserPrompt) ||
+    (showTranslationOriginal &&
+      message.translatedText &&
+      message.translatedText !== message.text) ||
+    (!message.fromUser &&
+      message.questionAnswered &&
+      apiUrl &&
+      showWhyThisAnswer);
+
   return (
     <>
       {showInitialDivider && <div className="memori-chat--bubble-initial" />}
-      <Transition
-        show
-        appear
-        as="div"
+      <div
         className={cx('memori-chat--bubble-container memori-chat-scroll-item', {
           'memori-chat--bubble-from-user': !!message.fromUser,
-          'memori-chat--with-addon':
-            (message.generatedByAI && showAIicon) ||
-            (showFeedback && simulateUserPrompt),
+          'memori-chat--with-addon': shouldShowBubbleAddon,
         })}
       >
-        {!message.fromUser && (
-          <Transition.Child
-            as="picture"
-            className="memori-chat--bubble-avatar"
-            enter="transition ease-in-out duration-300"
-            enterFrom={`opacity-0 scale-075 ${
-              message.fromUser ? 'translate-x-15' : 'translate-x--15'
-            }`}
-            enterTo="opacity-1 scale-1 translate-x-0"
-            leave="transition ease-in-out duration-300"
-            leaveFrom="opacity-1 scale-1 translate-x-0"
-            leaveTo={`opacity-0 scale-075 ${
-              message.fromUser ? 'translate-x-15' : 'translate-x--15'
-            }`}
-            title={
-              !!message.emitter?.length && !!memori.enableBoardOfExperts
-                ? message.emitter
-                : memori.name
-            }
+        <MediaWidget
+          simulateUserPrompt={simulateUserPrompt}
+          links={topMediaWidgetLinks}
+          media={topMediaWidgetMedia}
+          sessionID={sessionID}
+          baseUrl={baseUrl}
+          apiUrl={apiUrl}
+          translateTo={translateTo}
+          customMediaRenderer={customMediaRenderer}
+          fromUser={message.fromUser}
+        />
+
+        <div className="memori-chat--bubble-message-row">
+          {!message.fromUser && renderAssistantAvatar()}
+
+          <div
+            className={cx('memori-chat--bubble-shell', {
+              'memori-chat--bubble-shell--from-user': !!message.fromUser,
+              'memori-chat--bubble-shell--has-addon': shouldShowBubbleAddon,
+            })}
           >
-            <img
-              className="memori-chat--bubble-avatar-img"
-              alt={
-                !!message.emitter?.length && !!memori.enableBoardOfExperts
-                  ? message.emitter
-                  : memori.name
-              }
-              src={
-                !!message.emitter?.length &&
-                !!memori.enableBoardOfExperts &&
-                experts?.find(e => e.name === message.emitter)
-                  ? `${
-                      new URL(apiUrl ?? '/').origin
-                    }/api/v1/memoriai/memori/avatar/${
-                      experts.find(e => e.name === message.emitter)
-                        ?.expertMemoriID
-                    }`
-                  : memori.avatarURL && memori.avatarURL.length > 0
-                  ? getResourceUrl({
-                      type: 'avatar',
-                      tenantID: tenant?.name,
-                      resourceURI: memori.avatarURL,
-                      baseURL: baseUrl,
-                      apiURL: apiUrl,
-                    })
-                  : getResourceUrl({
-                      tenantID: tenant?.name,
-                      type: 'avatar',
-                      baseURL: baseUrl || 'https://www.aisuru.com',
-                      apiURL: apiUrl,
-                    })
-              }
-              onError={e => {
-                // Fallback image handling if primary source fails
-                e.currentTarget.src =
-                  memori.avatarURL && memori.avatarURL.length > 0
-                    ? getResourceUrl({
-                        type: 'avatar',
-                        tenantID: tenant?.name,
-                        resourceURI: memori.avatarURL,
-                        baseURL: baseUrl,
-                      })
-                    : getResourceUrl({
-                        tenantID: tenant?.name,
-                        type: 'avatar',
-                        baseURL: baseUrl,
-                      });
-
-                e.currentTarget.onerror = null;
-              }}
-            />
-          </Transition.Child>
-        )}
-
-        <Transition.Child
-          as="div"
-          className={cx('memori-chat--bubble', {
-            'memori-chat--user-bubble': !!message.fromUser,
-            'memori-chat--with-addon':
-              shouldShowCopyButtons ||
-              (message.generatedByAI && showAIicon) ||
-              (showFeedback && simulateUserPrompt),
-            'memori-chat--ai-generated': message.generatedByAI && showAIicon,
-            'memori-chat--with-feedback': showFeedback,
-          })}
-          enter="transition ease-in-out duration-300"
-          enterFrom={`opacity-0 scale-09 translate-x-${
-            message.fromUser ? '30' : '-30'
-          }`}
-          enterTo="opacity-1 scale-1 translate-x-0"
-          leave="transition ease-in-out duration-300"
-          leaveFrom="opacity-1 scale-1 translate-x-0"
-          leaveTo={`opacity-0 scale-09  translate-x-${
-            message.fromUser ? '30' : '-30'
-          }`}
-        >
-          {message.fromUser ? (
-            <Expandable
-              className="memori-chat--bubble-content"
-              mode="characters"
-            >
+          <div
+            className={cx('memori-chat--bubble', {
+              'memori-chat--user-bubble': !!message.fromUser,
+              'memori-chat--with-addon':
+                shouldShowCopyButtons || (showFeedback && simulateUserPrompt),
+              'memori-chat--ai-generated': message.generatedByAI,
+              'memori-chat--with-feedback': showFeedback,
+            })}
+          >
+            {message.fromUser ? (
+              <Expandable
+                className="memori-chat--bubble-content"
+                mode="characters"
+              >
+                <div
+                  dir="auto"
+                  className="memori-chat--bubble-content"
+                  dangerouslySetInnerHTML={{ __html: sanitizeMsg(cleanText) }}
+                />
+              </Expandable>
+            ) : (
               <div
                 dir="auto"
                 className="memori-chat--bubble-content"
-                dangerouslySetInnerHTML={{ __html: sanitizeMsg(cleanText) }}
+                dangerouslySetInnerHTML={{ __html: renderedText }}
               />
-            </Expandable>
-          ) : (
-            <div
-              dir="auto"
-              className="memori-chat--bubble-content"
-              dangerouslySetInnerHTML={{ __html: renderedText }}
-            />
-          )}
+            )}
+
+            {!!usageHtml && (
+              <div
+                className="memori-chat--usage-inside-bubble"
+                dangerouslySetInnerHTML={{ __html: usageHtml }}
+              />
+            )}
+          </div>
 
-          {!!usageHtml && (
+          {!message.fromUser && (
             <div
-              className="memori-chat--usage-inside-bubble"
-              dangerouslySetInnerHTML={{ __html: usageHtml }}
-            />
+              className={cx('memori-chat--artifact-block', {
+                'memori-chat--artifact-block--chatlog': isChatlogPanel,
+              })}
+            >
+              <ArtifactHandler
+                isChatlogPanel={isChatlogPanel}
+                message={message}
+              />
+            </div>
           )}
 
-          {(shouldShowCopyButtons ||
-            (message.generatedByAI && showAIicon) ||
-            (message.generatedByAI && showFunctionCache) ||
-            (showFeedback && simulateUserPrompt)) && (
+          <MediaWidget
+            simulateUserPrompt={simulateUserPrompt}
+            media={codeMediaWidgetMedia}
+            sessionID={sessionID}
+            baseUrl={baseUrl}
+            apiUrl={apiUrl}
+            translateTo={translateTo}
+            customMediaRenderer={customMediaRenderer}
+            fromUser={message.fromUser}
+          />
+
+          {shouldShowBubbleAddon && (
             <div className="memori-chat--bubble-addon">
+              {shouldShowTimestampInAddon && (
+                <div className="memori-chat--bubble-timestamp-container">
+                  <p className="memori-chat--bubble-timestamp">
+                    {formattedTimestamp}
+                  </p>
+                  {hasAddonAfterTimestamp && (
+                    <span className="memori-chat--bubble-timestamp-separator">
+                      •
+                    </span>
+                  )}
+                </div>
+              )}
               {shouldShowCopyButtons && (
-                <Button
-                  ghost
-                  shape="circle"
-                  title={copyFeedback.plain ? copiedLabel : t('copy') || 'Copy'}
-                  className={cx('memori-chat--bubble-action-icon', {
-                    'memori-chat--bubble-action-icon--from-user':
-                      message.fromUser,
-                    'memori-chat--bubble-action-icon--copied':
-                      copyFeedback.plain,
-                  })}
-                  icon={
-                    <Copy
+                <Tooltip
+                  placement="bottom"
+                  content={
+                    copyStatus.plain === 'success'
+                      ? copiedLabel
+                      : copyStatus.plain === 'error'
+                      ? t('copyFailed')
+                      : t('copy') || 'Copy'
+                  }
+                >
+                  <span className="memori-chat--bubble-addon-tooltip-trigger">
+                    <Button
+                      variant="ghost"
+                      shape="circle"
+                      type="button"
                       aria-label={
-                        copyFeedback.plain ? copiedLabel : t('copy') || 'Copy'
+                        copyStatus.plain === 'success'
+                          ? String(copiedLabel)
+                          : copyStatus.plain === 'error'
+                          ? String(t('copyFailed'))
+                          : String(t('copy') || 'Copy')
+                      }
+                      className={cx(
+                        'memori-chat--bubble-action-button',
+                        'memori-share-button--copy-item',
+                        {
+                          'memori-share-button--copy-item--success':
+                            copyStatus.plain === 'success',
+                          'memori-share-button--copy-item--error':
+                            copyStatus.plain === 'error',
+                        }
+                      )}
+                      icon={
+                        copyStatus.plain === 'success' ? (
+                          <Check
+                            className="memori-share-button--copy-icon"
+                            aria-hidden
+                            strokeWidth={2.5}
+                          />
+                        ) : (
+                          <Copy
+                            className="memori-share-button--copy-icon"
+                            aria-hidden
+                          />
+                        )
                       }
+                      onClick={() => handleCopyClick('plain', copyText)}
                     />
-                  }
-                  onClick={() => handleCopyClick('plain', copyText)}
-                />
-              )}
-              {copyFeedback.plain && (
-                <span
-                  role="status"
-                  aria-live="polite"
-                  className={cx('memori-chat--bubble-action-feedback', {
-                    'memori-chat--bubble-action-feedback--from-user':
-                      message.fromUser,
-                  })}
-                >
-                  {copiedLabel}
-                </span>
+                  </span>
+                </Tooltip>
               )}
 
               {shouldShowCopyRawButton && (
-                <Button
-                  ghost
-                  shape="circle"
-                  title={
-                    copyFeedback.raw
+                <Tooltip
+                  placement="bottom"
+                  content={
+                    copyStatus.raw === 'success'
                       ? copiedLabel
+                      : copyStatus.raw === 'error'
+                      ? t('copyFailed')
                       : t('copyRawCode') || 'Copy raw code'
                   }
-                  className={cx('memori-chat--bubble-action-icon', {
-                    'memori-chat--bubble-action-icon--from-user':
-                      message.fromUser,
-                    'memori-chat--bubble-action-icon--copied': copyFeedback.raw,
-                  })}
-                  icon={
-                    <Code
+                >
+                  <span className="memori-chat--bubble-addon-tooltip-trigger">
+                    <Button
+                      variant="ghost"
+                      shape="circle"
+                      type="button"
                       aria-label={
-                        copyFeedback.raw
-                          ? copiedLabel
-                          : t('copyRawCode') || 'Copy raw code'
+                        copyStatus.raw === 'success'
+                          ? String(copiedLabel)
+                          : copyStatus.raw === 'error'
+                          ? String(t('copyFailed'))
+                          : String(t('copyRawCode') || 'Copy raw code')
+                      }
+                      className={cx(
+                        'memori-chat--bubble-action-button',
+                        'memori-share-button--copy-item',
+                        {
+                          'memori-share-button--copy-item--success':
+                            copyStatus.raw === 'success',
+                          'memori-share-button--copy-item--error':
+                            copyStatus.raw === 'error',
+                        }
+                      )}
+                      icon={
+                        copyStatus.raw === 'success' ? (
+                          <Check
+                            className="memori-share-button--copy-icon"
+                            aria-hidden
+                            strokeWidth={2.5}
+                          />
+                        ) : (
+                          <Code
+                            className="memori-share-button--copy-icon"
+                            aria-hidden
+                          />
+                        )
                       }
+                      onClick={() => handleCopyClick('raw', rawMessageText)}
                     />
-                  }
-                  onClick={() => handleCopyClick('raw', rawMessageText)}
-                />
-              )}
-              {copyFeedback.raw && (
-                <span
-                  role="status"
-                  aria-live="polite"
-                  className={cx('memori-chat--bubble-action-feedback', {
-                    'memori-chat--bubble-action-feedback--from-user':
-                      message.fromUser,
-                  })}
-                >
-                  {copiedLabel}
-                </span>
+                  </span>
+                </Tooltip>
               )}
 
               {!message.fromUser &&
@@ -554,14 +699,25 @@ const ChatBubble: React.FC<Props> = ({
                     Boolean(m.properties?.functionCache) ||
                     m.properties?.functionCache === 'true'
                 ) && (
-                  <Button
-                    ghost
-                    shape="circle"
-                    title="Debug"
+                  <Tooltip
+                    placement="bottom"
+                    content={t('functionCache') || 'Function cache'}
                     className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
-                    icon={<Bug aria-label="Debug" />}
-                    onClick={() => setOpenFunctionCache(true)}
-                  />
+                  >
+                    <span className="memori-chat--bubble-addon-tooltip-trigger">
+                      <Button
+                        variant="ghost"
+                        shape="circle"
+                        className="memori-chat--bubble-action-button"
+                        icon={
+                          <Bug
+                            aria-label={t('functionCache') || 'Function cache'}
+                          />
+                        }
+                        onClick={() => setOpenFunctionCache(true)}
+                      />
+                    </span>
+                  </Tooltip>
                 )}
 
               {showFeedback && !!simulateUserPrompt && (
@@ -577,23 +733,18 @@ const ChatBubble: React.FC<Props> = ({
 
               {message.generatedByAI && showAIicon && (
                 <Tooltip
-                  align="right"
-                  content={
-                    t('generatedByAI') ||
-                    (lang === 'it'
-                      ? 'Risposta generata da IA, può talvolta generare informazioni non corrette'
-                      : 'Answer generated by AI, may occasionally generate incorrect informations')
-                  }
+                  placement="bottom"
+                  content={t('generatedByAI')}
                   className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
                 >
-                  <span>
-                    <AI
-                      title={
-                        t('generatedByAI') ||
-                        (lang === 'it'
-                          ? 'Risposta generata da IA, può talvolta generare informazioni non corrette'
-                          : 'Answer generated by AI, may occasionally generate incorrect informations')
-                      }
+                  <span className="memori-chat--bubble-addon-tooltip-trigger">
+                    <Button
+                      variant="ghost"
+                      shape="circle"
+                      type="button"
+                      className="memori-chat--bubble-action-button"
+                      aria-label={String(t('generatedByAI'))}
+                      icon={<Bot aria-hidden />}
                     />
                   </span>
                 </Tooltip>
@@ -603,17 +754,22 @@ const ChatBubble: React.FC<Props> = ({
                 message.translatedText &&
                 message.translatedText !== message.text && (
                   <Tooltip
-                    align="right"
+                    placement="bottom"
                     content={`${
                       lang === 'it' ? 'Testo originale' : 'Original text'
                     }: ${stripAllInternalTags(message.text)}`}
                     className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
                   >
-                    <span>
-                      <Translation
+                    <span className="memori-chat--bubble-addon-tooltip-trigger">
+                      <Button
+                        variant="ghost"
+                        shape="circle"
+                        type="button"
+                        className="memori-chat--bubble-action-button"
                         aria-label={
                           lang === 'it' ? 'Testo originale' : 'Original text'
                         }
+                        icon={<Languages aria-hidden />}
                       />
                     </span>
                   </Tooltip>
@@ -623,84 +779,30 @@ const ChatBubble: React.FC<Props> = ({
                 message.questionAnswered &&
                 apiUrl &&
                 showWhyThisAnswer && (
-                  <Button
-                    ghost
-                    shape="circle"
-                    title={t('whyThisAnswer') || undefined}
-                    className="memori-chat--bubble-action-icon"
-                    onClick={() => setShowingWhyThisAnswer(true)}
-                    disabled={showingWhyThisAnswer}
-                    icon={
-                      <QuestionHelp title={t('whyThisAnswer') || undefined} />
-                    }
-                  />
+                  <Tooltip
+                    placement="bottom"
+                    content={t('whyThisAnswer') || 'Why this answer?'}
+                  >
+                    <span className="memori-chat--bubble-addon-tooltip-trigger">
+                      <Button
+                        variant="ghost"
+                        shape="circle"
+                        className="memori-chat--bubble-action-button"
+                        onClick={() => setShowingWhyThisAnswer(true)}
+                        disabled={showingWhyThisAnswer}
+                        aria-label={t('whyThisAnswer') || 'Why this answer?'}
+                        icon={<HelpCircle aria-hidden />}
+                      />
+                    </span>
+                  </Tooltip>
                 )}
             </div>
           )}
-        </Transition.Child>
-
-        {message.fromUser && (
-          <>
-            {(!!userAvatar && typeof userAvatar === 'string') ||
-            (!userAvatar && !!user?.avatarURL?.length) ? (
-              <Transition.Child
-                as="picture"
-                className="memori-chat--bubble-avatar"
-                enter="transition ease-in-out duration-300"
-                enterFrom={`opacity-0 scale-075 ${
-                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
-                }`}
-                enterTo="opacity-1 scale-1 translate-x-0"
-                leave="transition ease-in-out duration-300"
-                leaveFrom="opacity-1 scale-1 translate-x-0"
-                leaveTo={`opacity-0 scale-075 ${
-                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
-                }`}
-              >
-                <img
-                  className="memori-chat--bubble-avatar-img"
-                  alt={user?.userName ?? 'User'}
-                  src={userAvatar ?? user?.avatarURL}
-                />
-              </Transition.Child>
-            ) : !!userAvatar ? (
-              <Transition.Child
-                as="div"
-                className="memori-chat--bubble-avatar"
-                enter="transition ease-in-out duration-300"
-                enterFrom={`opacity-0 scale-075 ${
-                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
-                }`}
-                enterTo="opacity-1 scale-1 translate-x-0"
-                leave="transition ease-in-out duration-300"
-                leaveFrom="opacity-1 scale-1 translate-x-0"
-                leaveTo={`opacity-0 scale-075 ${
-                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
-                }`}
-              >
-                {userAvatar}
-              </Transition.Child>
-            ) : (
-              <Transition.Child
-                as="div"
-                className="memori-chat--bubble-avatar"
-                enter="transition ease-in-out duration-300"
-                enterFrom={`opacity-0 scale-075 ${
-                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
-                }`}
-                enterTo="opacity-1 scale-1 translate-x-0"
-                leave="transition ease-in-out duration-300"
-                leaveFrom="opacity-1 scale-1 translate-x-0"
-                leaveTo={`opacity-0 scale-075 ${
-                  message.fromUser ? 'translate-x-15' : 'translate-x--15'
-                }`}
-              >
-                <UserIcon />
-              </Transition.Child>
-            )}
-          </>
-        )}
-      </Transition>
+          </div>
+
+          {message.fromUser && renderUserAvatar()}
+        </div>
+      </div>
 
       {/* Document attachments are extracted and passed to Chat.tsx for rendering */}
 
@@ -716,8 +818,10 @@ const ChatBubble: React.FC<Props> = ({
 
       <Modal
         open={openFunctionCache}
-        onClose={() => setOpenFunctionCache(false)}
         className="memori-chat--function-cache-modal"
+        title={t('functionCache') || 'Function Cache'}
+        closable={true}
+        onOpenChange={setOpenFunctionCache}
       >
         {functionCacheData?.map((f, i) => (
           <div