@memori.ai/memori-react 8.11.0 → 8.13.0

package/src/components/ChatBubble/ChatBubble.css

@@ -14,13 +14,49 @@
     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-status-message-error {
+    border: 1px solid rgba(239, 68, 68, 0.3) !important;
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
+    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
+    color: rgb(239, 68, 68) !important;
+}
+
 .memori-chat--bubble {
     display: inline-flex;
     max-width: 90%;
     flex-direction: column;
     align-items: flex-start;
     padding: 10px 16px;
-    border-radius: 16px 16px 16px 0;
+    border-radius: 12px 12px 12px 0;
     margin: 10px auto 5px 10px;
     margin-bottom: 5px;
     background: var(--memori-chat-bubble-bg, #ffffff60);
@@ -30,10 +66,30 @@
     line-height: 1.33;
 }
 
+
+
 .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;
@@ -119,7 +175,7 @@
 }
 
 .memori-chat--bubble.memori-chat--user-bubble {
-    border-radius: 16px 16px 0 16px;
+    border-radius: 12px 12px 0 12px;
     margin: 10px 10px 5px auto;
     background: var(--memori-chat-user-bubble-bg);
     box-shadow: 0 1px 6px 0 #d1d3de, 0 1px 3px 0 #c5c6d1;
@@ -145,14 +201,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 +212,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 +223,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 +271,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,17 @@ 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,11 +179,152 @@ 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;
+
+  // Check if this is a system error message
+  const isSystemError = message.emitter === 'system';
+
+  if (initialStatus) {
+    return (
+      <div className="memori-chat--bubble-status-message">
+        <div className="memori-chat--bubble-status-message-content">
+          {initialStatus}
+        </div>
+      </div>
+    );
+  }
+
+  // Render system error messages as red warning messages
+  if (isSystemError) {
+    return (
+      <Transition
+        show
+        appear
+        as="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>
+        <div className="memori-chat--bubble memori-chat--bubble-status-message-error">
+          <div className="memori-chat--bubble-message ">{cleanText}</div>
+        </div>
+      </Transition>
+    );
+  }
+
   return (
     <>
-      {(message.initial || isFirst) && (
-        <div className="memori-chat--bubble-initial" />
-      )}
+      {showInitialDivider && <div className="memori-chat--bubble-initial" />}
       <Transition
         show
         appear
@@ -252,7 +415,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 +451,83 @@ 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 +559,7 @@ const ChatBubble: React.FC<Props> = ({
 
               {message.generatedByAI && showAIicon && (
                 <Tooltip
-                  align="left"
+                  align="right"
                   content={
                     t('generatedByAI') ||
                     (lang === 'it'
@@ -381,7 +585,7 @@ const ChatBubble: React.FC<Props> = ({
                 message.translatedText &&
                 message.translatedText !== message.text && (
                   <Tooltip
-                    align="left"
+                    align="right"
                     content={`${
                       lang === 'it' ? 'Testo originale' : 'Original text'
                     }: ${message.text}`}