@memori.ai/memori-react 9.0.0-alpha.18 → 9.0.0-alpha.19

package/src/components/ChatBubble/ChatBubble.css

@@ -287,9 +287,9 @@
 .memori-chat--bubble-addon {
     position: absolute;
     z-index: 2147483647;
-    top: auto;
+    top: 100%;
     right: auto;
-    bottom: 0;
+    bottom: auto;
     left: 0;
     display: flex;
     width: max-content;
@@ -307,7 +307,7 @@
     gap: calc(var(--memori-spacing-xs) * 0.5);
     opacity: 0;
     pointer-events: none;
-    transform: translate3d(0, calc(100% - 2px), 0) scale(0.98);
+    transform: translate3d(0, -6px, 0) scale(0.98);
     transition:
         opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
         transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
@@ -318,24 +318,28 @@
     padding-left: var(--memori-spacing-sm);
 }
 
-/* Stack the addon on the bubble cell so it sits just under the message
-   (not under artifacts/media further down the shell). */
-.memori-chat--bubble-shell--has-addon {
-    display: grid;
-    align-items: start;
-    grid-template-columns: minmax(0, 1fr);
+/* Anchor bubble + addon so the action row sits directly under the message,
+   not under artifacts/media rendered below in the shell. */
+.memori-chat--bubble-anchor {
+    position: relative;
+    display: inline-flex;
+    max-width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
-.memori-chat--bubble-shell--from-user .memori-chat--bubble-addon {
-    right: 0;
-    left: auto;
-    justify-self: end;
+.memori-chat--bubble-anchor--from-user {
+    align-items: flex-end;
 }
 
-.memori-chat--bubble-shell--has-addon > .memori-chat--bubble,
-.memori-chat--bubble-shell--has-addon > .memori-chat--bubble-addon {
-    grid-column: 1;
-    grid-row: 1;
+.memori-chat--bubble-anchor--has-addon {
+    /* Keep the translated addon inside the hover hit area on desktop. */
+    padding-bottom: calc(var(--memori-spacing-md) + var(--memori-spacing-xs));
+}
+
+.memori-chat--bubble-anchor--from-user .memori-chat--bubble-addon {
+    right: 0;
+    left: auto;
 }
 
 .memori-chat--artifact-block {
@@ -347,18 +351,18 @@
     max-width: 100%;
 }
 
-.memori-chat--bubble-shell--has-addon:focus-within .memori-chat--bubble-addon,
+.memori-chat--bubble-anchor--has-addon:focus-within .memori-chat--bubble-addon,
 .memori-chat--bubble-container.memori-chat--addon-open .memori-chat--bubble-addon {
     opacity: 1;
     pointer-events: auto;
-    transform: translate3d(0, calc(100% + 4px), 0) scale(1);
+    transform: translate3d(0, -8px, 0) scale(1);
 }
 
 .memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
     min-width: fit-content;
 }
 
-.memori-chat--bubble-shell--has-addon:focus-within .memori-chat--bubble,
+.memori-chat--bubble-anchor--has-addon:focus-within .memori-chat--bubble,
 .memori-chat--bubble-container.memori-chat--addon-open .memori-chat--bubble {
     box-shadow: var(--memori-chat-addon-elevation);
 }
@@ -373,14 +377,14 @@
 .memori-chat--bubble-container.memori-chat--with-addon:focus-within .memori-chat--bubble-addon {
     opacity: 1;
     pointer-events: auto;
-    transform: translate3d(0, calc(100% + 4px), 0) scale(1);
+    transform: translate3d(0, -8px, 0) scale(1);
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .memori-chat--bubble-container.memori-chat--with-addon:hover .memori-chat--bubble-addon {
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble-addon {
         opacity: 1;
         pointer-events: auto;
-        transform: translate3d(0, calc(100% + 4px), 0) scale(1);
+        transform: translate3d(0, -8px, 0) scale(1);
     }
 }
 
@@ -397,11 +401,11 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .memori-chat--bubble-container.memori-chat--with-addon:hover .memori-chat--bubble {
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble {
         box-shadow: var(--memori-chat-addon-elevation);
     }
 
-    .memori-chat--bubble-container.memori-chat--with-addon:hover .memori-chat--bubble.memori-chat--user-bubble {
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble.memori-chat--user-bubble {
         box-shadow: var(--memori-chat-addon-elevation);
     }
 }
@@ -410,6 +414,11 @@
     display: inline-flex;
 }
 
+/* Portal to widget surface so tooltip anchoring is not thrown off by the addon transform. */
+.memori-chat--bubble-addon-tooltip-positioner {
+    z-index: 2147483647;
+}
+
 .memori-chat--bubble-addon button {
     transition: all 0.3s ease-in-out;
 }

package/src/components/ChatBubble/ChatBubble.tsx

@@ -446,7 +446,15 @@ const ChatBubble: React.FC<Props> = ({
   }
 
   const shouldShowTimestampInAddon =
-    !!formattedTimestamp && (!message.fromUser || isChatlogPanel);
+    !!formattedTimestamp && !message.fromUser && !isChatlogPanel;
+  const bubbleAddonTooltipProps = {
+    container: surfaceEl ?? undefined,
+    slotProps: {
+      positioner: {
+        className: 'memori-chat--bubble-addon-tooltip-positioner',
+      },
+    },
+  } as const;
   const shouldShowBubbleAddon =
     shouldShowTimestampInAddon ||
     shouldShowCopyButtons ||
@@ -558,7 +566,12 @@ const ChatBubble: React.FC<Props> = ({
           <div
             className={cx('memori-chat--bubble-shell', {
               'memori-chat--bubble-shell--from-user': !!message.fromUser,
-              'memori-chat--bubble-shell--has-addon': shouldShowBubbleAddon,
+            })}
+          >
+          <div
+            className={cx('memori-chat--bubble-anchor', {
+              'memori-chat--bubble-anchor--from-user': !!message.fromUser,
+              'memori-chat--bubble-anchor--has-addon': shouldShowBubbleAddon,
             })}
           >
           <div
@@ -597,30 +610,6 @@ const ChatBubble: React.FC<Props> = ({
             )}
           </div>
 
-          {!message.fromUser && (
-            <div
-              className={cx('memori-chat--artifact-block', {
-                'memori-chat--artifact-block--chatlog': isChatlogPanel,
-              })}
-            >
-              <ArtifactHandler
-                isChatlogPanel={isChatlogPanel}
-                message={message}
-              />
-            </div>
-          )}
-
-          <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 && (
@@ -637,6 +626,7 @@ const ChatBubble: React.FC<Props> = ({
               )}
               {shouldShowCopyButtons && (
                 <Tooltip
+                  {...bubbleAddonTooltipProps}
                   placement="bottom"
                   content={
                     copyStatus.plain === 'success'
@@ -690,6 +680,7 @@ const ChatBubble: React.FC<Props> = ({
 
               {shouldShowCopyRawButton && (
                 <Tooltip
+                  {...bubbleAddonTooltipProps}
                   placement="bottom"
                   content={
                     copyStatus.raw === 'success'
@@ -749,6 +740,7 @@ const ChatBubble: React.FC<Props> = ({
                     m.properties?.functionCache === 'true'
                 ) && (
                   <Tooltip
+                    {...bubbleAddonTooltipProps}
                     placement="bottom"
                     content={t('functionCache') || 'Function cache'}
                     className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
@@ -782,6 +774,7 @@ const ChatBubble: React.FC<Props> = ({
 
               {message.generatedByAI && showAIicon && (
                 <Tooltip
+                  {...bubbleAddonTooltipProps}
                   placement="bottom"
                   content={t('generatedByAI')}
                   className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
@@ -805,6 +798,7 @@ const ChatBubble: React.FC<Props> = ({
                 message.translatedText &&
                 message.translatedText !== message.text && (
                   <Tooltip
+                    {...bubbleAddonTooltipProps}
                     placement="bottom"
                     content={`${
                       lang === 'it' ? 'Testo originale' : 'Original text'
@@ -831,6 +825,7 @@ const ChatBubble: React.FC<Props> = ({
                 apiUrl &&
                 showWhyThisAnswer && (
                   <Tooltip
+                    {...bubbleAddonTooltipProps}
                     placement="bottom"
                     content={t('whyThisAnswer') || 'Why this answer?'}
                   >
@@ -851,6 +846,31 @@ const ChatBubble: React.FC<Props> = ({
           )}
           </div>
 
+          {!message.fromUser && (
+            <div
+              className={cx('memori-chat--artifact-block', {
+                'memori-chat--artifact-block--chatlog': isChatlogPanel,
+              })}
+            >
+              <ArtifactHandler
+                isChatlogPanel={isChatlogPanel}
+                message={message}
+              />
+            </div>
+          )}
+
+          <MediaWidget
+            simulateUserPrompt={simulateUserPrompt}
+            media={codeMediaWidgetMedia}
+            sessionID={sessionID}
+            baseUrl={baseUrl}
+            apiUrl={apiUrl}
+            translateTo={translateTo}
+            customMediaRenderer={customMediaRenderer}
+            fromUser={message.fromUser}
+          />
+          </div>
+
           {message.fromUser && renderUserAvatar()}
         </div>
       </div>