@memori.ai/memori-react 8.12.0 → 8.13.1

package/src/components/ChatBubble/ChatBubble.css

@@ -43,13 +43,20 @@
     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);
@@ -60,9 +67,6 @@
 }
 
 
-.memori-chat--bubble-from-user {
-    z-index: -1;
-}
 
 .memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
     min-width: 9rem;
@@ -171,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;

package/src/components/ChatBubble/ChatBubble.tsx

@@ -126,7 +126,8 @@ const ChatBubble: React.FC<Props> = ({
     showCopyButton && (!!plainText?.length || !!message.text?.length);
   const shouldShowCopyRawButton =
     shouldShowCopyButtons &&
-    !!message.text?.length && plainText !== message.text;
+    !!message.text?.length &&
+    plainText !== message.text;
   const rawMessageText = message.fromUser
     ? message.text || ''
     : (message.text || '').replaceAll(/<think.*?>(.*?)<\/think>/gs, '');
@@ -180,15 +181,15 @@ 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(copyFeedbackTimers.current) as Array<'plain' | 'raw'>
+      ).forEach(key => {
+        const timer = copyFeedbackTimers.current[key];
+        if (timer) {
+          clearTimeout(timer);
+          copyFeedbackTimers.current[key] = null;
         }
-      );
+      });
     };
   }, []);
 
@@ -218,11 +219,15 @@ const ChatBubble: React.FC<Props> = ({
   };
 
   // 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 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) {
+  if (initialStatus) {
     return (
       <div className="memori-chat--bubble-status-message">
         <div className="memori-chat--bubble-status-message-content">
@@ -232,11 +237,94 @@ const ChatBubble: React.FC<Props> = ({
     );
   }
 
+  // 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 (
     <>
-      {showInitialDivider && (
-        <div className="memori-chat--bubble-initial" />
-      )}
+      {showInitialDivider && <div className="memori-chat--bubble-initial" />}
       <Transition
         show
         appear
@@ -374,8 +462,10 @@ const ChatBubble: React.FC<Props> = ({
                   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,
+                    'memori-chat--bubble-action-icon--from-user':
+                      message.fromUser,
+                    'memori-chat--bubble-action-icon--copied':
+                      copyFeedback.plain,
                   })}
                   icon={
                     <Copy
@@ -410,7 +500,8 @@ const ChatBubble: React.FC<Props> = ({
                       : 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--from-user':
+                      message.fromUser,
                     'memori-chat--bubble-action-icon--copied': copyFeedback.raw,
                   })}
                   icon={
@@ -468,7 +559,7 @@ const ChatBubble: React.FC<Props> = ({
 
               {message.generatedByAI && showAIicon && (
                 <Tooltip
-                  align="bottomLeft"
+                  align="right"
                   content={
                     t('generatedByAI') ||
                     (lang === 'it'
@@ -494,7 +585,7 @@ const ChatBubble: React.FC<Props> = ({
                 message.translatedText &&
                 message.translatedText !== message.text && (
                   <Tooltip
-                    align="bottomLeft"
+                    align="right"
                     content={`${
                       lang === 'it' ? 'Testo originale' : 'Original text'
                     }: ${message.text}`}

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

@@ -6867,7 +6867,7 @@ exports[`renders ChatBubble with debug button unchanged 1`] = `
           </span>
         </button>
         <div
-          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-right memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -7807,7 +7807,7 @@ exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
           </span>
         </button>
         <div
-          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-right memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -7934,7 +7934,7 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
           </span>
         </button>
         <div
-          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-right memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"
@@ -8569,7 +8569,7 @@ exports[`renders ChatBubble with translation and original unchanged 1`] = `
           </span>
         </button>
         <div
-          class="memori-tooltip memori-tooltip--align-bottomLeft memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+          class="memori-tooltip memori-tooltip--align-right memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
         >
           <div
             class="memori-tooltip--content"

package/src/components/ChatInputs/ChatInputs.css

@@ -1,40 +1,320 @@
+.memori-chat-inputs-wrapper {
+    position: sticky;
+    z-index: 10;
+    bottom: 0;
+    width: 100%;
+    padding: 0;
+    padding-bottom: 1.5rem;
+    margin: 0;
+    /* background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); */
+}
+
 .memori-chat-inputs {
     position: relative;
     display: flex;
     width: 100%;
+    min-width: 97%;
+    max-width: 97%;
     box-sizing: border-box;
+    flex-flow: column;
     flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
     padding: 0;
+    padding: 8px 12px !important;
     border: none;
+    border-radius: 12px;
     margin: 0;
-    transition: all 0.2s ease-in-out;
+    margin: auto;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.memori-chat-inputs:disabled {
+    opacity: 0.5;
+    pointer-events: none;
 }
 
-.memori-chat-inputs--expanded {
-    /* Additional padding when expanded to prevent overlap with file preview */
-    padding-top: 0.5rem;
+.memori-chat-inputs--container {
+    position: relative;
+    display: grid;
+    width: 100%;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+    min-height: 56px;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 0 1rem;
+    padding: 12px;
+    border-radius: var(--memori-border-radius);
+    /* max-width: 48rem; */
+    margin: 0 auto;
+    background: #fff;
+    gap: 0;
+    grid-template-areas: 'leading primary trailing';
+    grid-template-columns: auto 1fr auto;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    .memori-chat-inputs {
+    .memori-chat-inputs--container {
+        padding: 0 0.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-chat-inputs--container {
         padding: 0 0.25rem;
     }
+}
+
+.memori-chat-inputs--leading {
+    display: flex;
+    align-items: center;
+    padding-right: 6px;
+    grid-area: leading;
+}
+
+.memori-chat-inputs--primary {
+    display: flex;
+    overflow: hidden;
+    min-height: 36px;
+    align-items: center;
+    grid-area: primary;
+}
+
+.memori-chat-inputs--trailing {
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    grid-area: trailing;
+}
+
+.memori-chat-inputs--trailing-inner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Plus button styling */
+.memori-chat-inputs--upload-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.memori-chat-inputs--upload-wrapper .memori--unified-upload-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button {
+    display: flex;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: #000 !important;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button:hover {
+    background: transparent !important;
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+/* Icon class styling */
+.memori-chat-inputs--container .icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    fill: currentColor;
+}
+
+/* Microphone button styling */
+.memori-chat-inputs--mic-btn {
+    display: flex;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+}
 
-    .memori-chat-inputs--expanded {
-        padding-top: 0.25rem;
+.memori-chat-inputs--mic-btn:hover {
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--mic-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+.memori-chat-inputs--mic-btn svg,
+.memori-chat-inputs--mic-btn .icon {
+    width: 20px;
+    height: 20px;
+    fill: #000;
+}
+
+/* Ensure icons are black on white background */
+.memori-chat-inputs--leading .icon {
+    fill: #000;
+}
+
+.memori-chat-inputs--send-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
+}
+
+.memori-chat-inputs--send-btn .icon {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button svg,
+.memori-chat-inputs--upload-wrapper .memori-button .icon {
+    width: 20px;
+    height: 20px;
+    /* fill: #000; */
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic-btn .icon {
+    fill: #000;
+}
+
+.memori-chat-inputs--mic-btn--listening {
+    color: #10a37f;
+}
+
+.memori-chat-inputs--mic {
+    font-size: 125%;
+}
+
+/* Style MicrophoneButton component when used in trailing area */
+.memori-chat-inputs--trailing .memori-chat-inputs--mic {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic .memori-button {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+}
+
+/* Send button styling - ChatGPT style */
+.memori-chat-inputs--send-btn {
+    display: flex;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    padding: 1.2rem !important;
+    border: none;
+    border-radius: var(--memori-border-radius);
+    background: #000;
+    background: var(--memori-chat-user-bubble-bg);
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.memori-chat-inputs--send-btn:disabled {
+    /* background: #f4f4f4; */
+    color: #f4f4f4;
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+.memori-chat-inputs--send-btn:hover:not(:disabled) {
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic svg {
+    width: 20px;
+    height: 20px;
+}
+
+.memori-chat-inputs--send-btn--active {
+    /* background: #000; */
+    color: #fff;
+}
+
+.memori-chat-inputs--send-btn--loading {
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-radius: var(--memori-border-radius);
+    border-top-color: transparent;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
     }
 }
 
-@media (max-width: 480px) {
-    .memori-chat-inputs {
-        flex-wrap: wrap;
+/* Disclaimer styling */
+.memori-chat-inputs--disclaimer {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 60px;
+    margin-top: -4px;
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 12px;
+    line-height: 1.5;
+    text-align: center;
+}
+
+.memori-chat-inputs--disclaimer a {
+    color: rgba(0, 0, 0, 0.8);
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.memori-chat-inputs--disclaimer a:hover {
+    opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+    .memori-chat-inputs--disclaimer {
+        padding: 8px 16px;
     }
 }
 
-.memori-chat-inputs .memori-upload-menu+.memori-send-on-enter-menu {
+/* Legacy support for old button classes */
+.memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
     margin-left: 0.33rem;
 }
 
@@ -42,7 +322,3 @@
     background: #fff;
     color: #000;
 }
-
-.memori-chat-inputs--mic {
-    font-size: 125%;
-}