@memori.ai/memori-react 8.10.1 → 8.12.0

package/src/components/ChatBubble/ChatBubble.css

@@ -14,6 +14,35 @@
     background: #c5c6d1;
 }
 
+.memori-chat--bubble-status-message {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
+    margin: 1.5rem auto;
+}
+
+.memori-chat--bubble-status-message-content {
+    display: inline-flex;
+    max-width: 90%;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border: 1px solid rgba(76, 111, 255, 0.2);
+    border-radius: 20px;
+    backdrop-filter: blur(10px);
+    background: linear-gradient(135deg, rgba(76, 111, 255, 0.1) 0%, rgba(76, 111, 255, 0.05) 100%);
+    box-shadow: 0 2px 8px rgba(76, 111, 255, 0.1);
+    color: var(--memori-primary, #4c6fff);
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    line-height: 1.4;
+    text-align: center;
+    word-wrap: break-word;
+}
+
 .memori-chat--bubble {
     display: inline-flex;
     max-width: 90%;
@@ -30,10 +59,33 @@
     line-height: 1.33;
 }
 
+
+.memori-chat--bubble-from-user {
+    z-index: -1;
+}
+
 .memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
     min-width: 9rem;
 }
 
+
+.memori-chat--bubble-avatar svg {
+    width: 40px;
+    height: 40px;
+    padding: 0.33rem;
+    fill: #666;
+    font-size: 1.5rem;
+}
+
+
+.memori-chat--bubble-action-icon--from-user > span > svg {
+    color: #fff !important;
+}
+
+.memori-chat--bubble-action-icon--from-user:focus {
+    border-color: #fff !important;
+}
+
 .memori-chat--bubble #wave {
     position: relative;
     width: 50px;
@@ -145,14 +197,6 @@
     object-fit: cover;
 }
 
-.memori-chat--bubble-avatar svg {
-    width: 40px;
-    height: 40px;
-    padding: 0.33rem;
-    fill: #666;
-    font-size: 1.5rem;
-}
-
 .memori-chat--bubble-addon {
     display: flex;
     align-items: center;
@@ -164,14 +208,10 @@
 .memori-chat--bubble .memori-chat--bubble-action-icon {
     display: flex;
     justify-content: flex-end;
-    padding: 0;
+    padding: 2px;
     text-align: right;
 }
 
-.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai {
-    padding: 3px;
-}
-
 .memori-chat--bubble .memori-chat--bubble-action-icon svg {
     overflow: visible;
     width: 1rem;
@@ -179,6 +219,21 @@
     color: #000;
 }
 
+.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--copied {
+    border-color: var(--memori-primary, #4c6fff) !important;
+    background-color: rgba(76, 111, 255, 0.08);
+}
+
+.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--copied svg {
+    color: var(--memori-primary, #4c6fff);
+}
+
+.memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--ai {
+    padding: 3px;
+}
+
+
+
 .memori-chat--bubble .memori-chat--bubble-action-icon.memori-chat--bubble-action-icon--debug {
     color: var(--memori-error-color);
 }
@@ -212,6 +267,19 @@
     padding: 2.5px;
 }
 
+.memori-chat--bubble-action-feedback {
+    margin-left: 0.35rem;
+    color: var(--memori-primary, #4c6fff);
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+}
+
+.memori-chat--bubble-action-feedback--from-user {
+    color: var(--memori-primary-text, #fff);
+}
+
 .memori-chat--bubble-addon .memori-chat--feedback button .memori-button--icon svg {
     width: 0.9rem;
     height: 0.9rem;

package/src/components/ChatBubble/ChatBubble.stories.tsx

@@ -201,10 +201,10 @@ WithAllAddonsContents.args = {
   tenant,
   message: {
     fromUser: false,
-    text: 'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+    text: 'Proin libero ante.',
     initial: false,
     translatedText:
-      'Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.',
+      'Proin libero ter.',
     generatedByAI: true,
   },
   showFeedback: true,
@@ -314,6 +314,20 @@ FromUserWithCustomAvatarElement.args = {
   },
 };
 
+export const FromUserWithCopyButtons = Template.bind({});
+FromUserWithCopyButtons.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: true,
+    text: '<p>Questo messaggio mostra i pulsanti di copia anche per gli utenti finali.</p>',
+    initial: false,
+    translatedText:
+      'Questo messaggio mostra i pulsanti di copia anche per gli utenti finali.',
+  },
+  showCopyButton: true,
+};
+
 export const FromUserWithAvatarAndCustomAvatar = Template.bind({});
 FromUserWithAvatarAndCustomAvatar.args = {
   memori,

package/src/components/ChatBubble/ChatBubble.test.tsx

@@ -57,6 +57,23 @@ it('renders ChatBubble with user msg unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('shows copy button for user messages', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: true,
+        text: 'Mostra i pulsanti copia sul messaggio utente.',
+        initial: false,
+      }}
+    />
+  );
+
+  expect(container).toMatchSnapshot();
+});
+
 it('renders ChatBubble with copy disabled unchanged', () => {
   const { container } = render(
     <ChatBubble

package/src/components/ChatBubble/ChatBubble.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import {
   ExpertReference,
@@ -89,6 +89,17 @@ const ChatBubble: React.FC<Props> = ({
   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<{
+    plain: ReturnType<typeof setTimeout> | null;
+    raw: ReturnType<typeof setTimeout> | null;
+  }>({
+    plain: null,
+    raw: null,
+  });
   // Initialize MathJax on component mount
   useEffect(() => {
     if (typeof window !== 'undefined' && !window.MathJax) {
@@ -110,6 +121,16 @@ const ChatBubble: React.FC<Props> = ({
   const plainText = message.fromUser
     ? truncateMessage(cleanText)
     : stripHTML(stripOutputTags(renderedText));
+  const copyText = message.fromUser ? cleanText : plainText;
+  const shouldShowCopyButtons =
+    showCopyButton && (!!plainText?.length || !!message.text?.length);
+  const shouldShowCopyRawButton =
+    shouldShowCopyButtons &&
+    !!message.text?.length && plainText !== message.text;
+  const rawMessageText = message.fromUser
+    ? message.text || ''
+    : (message.text || '').replaceAll(/<think.*?>(.*?)<\/think>/gs, '');
+  const copiedLabel = t('copied') || 'Copied';
 
   // Format function cache content
   const functionCacheData = message.media?.filter(
@@ -157,9 +178,63 @@ const ChatBubble: React.FC<Props> = ({
     }
   }, [cleanText, message.fromUser, renderedText]);
 
+  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;
+          }
+        }
+      );
+    };
+  }, []);
+
+  const triggerCopyFeedback = (type: 'plain' | 'raw') => {
+    setCopyFeedback(prev => ({ ...prev, [type]: true }));
+    if (copyFeedbackTimers.current[type]) {
+      clearTimeout(copyFeedbackTimers.current[type]!);
+    }
+    copyFeedbackTimers.current[type] = setTimeout(() => {
+      setCopyFeedback(prev => ({ ...prev, [type]: false }));
+      copyFeedbackTimers.current[type] = null;
+    }, 1500);
+  };
+
+  const handleCopyClick = (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);
+    }
+  };
+
+  // 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;
+
+
+  if(initialStatus) {
+    return (
+      <div className="memori-chat--bubble-status-message">
+        <div className="memori-chat--bubble-status-message-content">
+          {initialStatus}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
-      {(message.initial || isFirst) && (
+      {showInitialDivider && (
         <div className="memori-chat--bubble-initial" />
       )}
       <Transition
@@ -252,7 +327,7 @@ const ChatBubble: React.FC<Props> = ({
           className={cx('memori-chat--bubble', {
             'memori-chat--user-bubble': !!message.fromUser,
             'memori-chat--with-addon':
-              (!message.fromUser && showCopyButton) ||
+              shouldShowCopyButtons ||
               (message.generatedByAI && showAIicon) ||
               (showFeedback && simulateUserPrompt),
             'memori-chat--ai-generated': message.generatedByAI && showAIicon,
@@ -288,42 +363,80 @@ const ChatBubble: React.FC<Props> = ({
             />
           )}
 
-          {((!message.fromUser && showCopyButton) ||
+          {(shouldShowCopyButtons ||
             (message.generatedByAI && showAIicon) ||
             (message.generatedByAI && showFunctionCache) ||
             (showFeedback && simulateUserPrompt)) && (
             <div className="memori-chat--bubble-addon">
-              {!message.fromUser && showCopyButton && (
+              {shouldShowCopyButtons && (
                 <Button
                   ghost
                   shape="circle"
-                  title={t('copy') || 'Copy'}
-                  className="memori-chat--bubble-action-icon"
-                  icon={<Copy aria-label={t('copy') || 'Copy'} />}
-                  onClick={() => navigator.clipboard.writeText(plainText)}
+                  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
+                      aria-label={
+                        copyFeedback.plain ? copiedLabel : t('copy') || 'Copy'
+                      }
+                    />
+                  }
+                  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>
+              )}
 
-              {!message.fromUser &&
-                showCopyButton &&
-                plainText !== message.text && (
-                  <Button
-                    ghost
-                    shape="circle"
-                    title={t('copyRawCode') || 'Copy raw code'}
-                    className="memori-chat--bubble-action-icon"
-                    icon={
-                      <Code aria-label={t('copyRawCode') || 'Copy raw code'} />
-                    }
-                    onClick={() => {
-                      const text = message.text  .replaceAll(
-                        /<think.*?>(.*?)<\/think>/gs,
-                        ''
-                      )
-                      navigator.clipboard.writeText(text);
-                    }}
-                  />
-                )}
+              {shouldShowCopyRawButton && (
+                <Button
+                  ghost
+                  shape="circle"
+                  title={
+                    copyFeedback.raw
+                      ? copiedLabel
+                      : 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
+                      aria-label={
+                        copyFeedback.raw
+                          ? copiedLabel
+                          : t('copyRawCode') || 'Copy raw code'
+                      }
+                    />
+                  }
+                  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>
+              )}
 
               {!message.fromUser &&
                 showFunctionCache &&
@@ -355,7 +468,7 @@ const ChatBubble: React.FC<Props> = ({
 
               {message.generatedByAI && showAIicon && (
                 <Tooltip
-                  align="left"
+                  align="bottomLeft"
                   content={
                     t('generatedByAI') ||
                     (lang === 'it'
@@ -381,7 +494,7 @@ const ChatBubble: React.FC<Props> = ({
                 message.translatedText &&
                 message.translatedText !== message.text && (
                   <Tooltip
-                    align="left"
+                    align="bottomLeft"
                     content={`${
                       lang === 'it' ? 'Testo originale' : 'Original text'
                     }: ${message.text}`}