@memori.ai/memori-react 9.0.0-alpha.21 → 9.0.0-alpha.22

package/src/components/ChatBubble/ChatBubble.css

@@ -289,7 +289,7 @@
    timestamp keep contrast whatever is painted behind them. */
 .memori-chat--bubble-addon {
     position: absolute;
-    z-index: 2147483647;
+    z-index: 5;
     top: 100%;
     right: auto;
     bottom: auto;
@@ -419,9 +419,36 @@
     flex-shrink: 0;
 }
 
-/* Portal to widget surface so tooltip anchoring is not thrown off by the addon transform. */
+/* Portal to widget surface so tooltip anchoring is not thrown off by the addon transform.
+   Hide during enter/exit so the popup never flashes at 0,0 (top of the page) when
+   Floating UI hasn't applied coordinates yet, or when the trigger loses focus. */
 .memori-chat--bubble-addon-tooltip-positioner {
-    z-index: 2147483647;
+    z-index: 1300;
+}
+
+.memori-chat--bubble-addon-tooltip-positioner[data-starting-style],
+.memori-chat--bubble-addon-tooltip-positioner[data-ending-style] {
+    opacity: 0 !important;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.memori-chat--bubble-ai-icon {
+    display: inline-flex;
+    width: 1.75rem;
+    height: 1.75rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--memori-text-color);
+    cursor: default;
+    pointer-events: auto;
+}
+
+/* stylelint-disable-next-line no-descending-specificity -- icon size scoped after action-icon rules */
+.memori-chat--bubble-ai-icon svg {
+    width: 1rem;
+    height: 1rem;
 }
 
 .memori-chat--bubble-addon button {
@@ -642,13 +669,13 @@
     font-weight: var(--memori-text-weight-medium);
 }
 
+.memori-chat--function-cache-modal.memori-modal__viewport .memori-modal__popup,
 .memori-chat--function-cache-modal .memori-modal--panel {
     width: 80%;
     height: 100%;
-    /* padding: 20px; */
     max-height: 80vh;
     border-radius: var(--memori-radius-box);
-    background-color: #fff;
+    background-color: var(--memori-main-background, #fff);
     overflow-y: auto;
 }
 

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

@@ -11,7 +11,7 @@ import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContex
 import { AlertProvider } from '@memori.ai/ui';
 
 const meta: Meta = {
-  title: 'Widget/Chat bubble',
+  title: 'Internals/Chat bubble',
   component: ChatBubble,
   argTypes: {
     fromUser: {
@@ -53,7 +53,18 @@ const Template: Story<Props> = args => {
       <ArtifactProvider>
         <I18nWrapper>
           <AlertProvider defaultDuration={5000}>
-            <ChatBubble {...args} />
+            {/* Addons (copy, feedback, …) are hover-only in product UI.
+                Keep them visible here so Storybook can document them. */}
+            <div className="memori-storybook-chat-bubble">
+              <style>{`
+                .memori-storybook-chat-bubble .memori-chat--bubble-addon {
+                  opacity: 1;
+                  pointer-events: auto;
+                  transform: none;
+                }
+              `}</style>
+              <ChatBubble {...args} />
+            </div>
           </AlertProvider>
         </I18nWrapper>
       </ArtifactProvider>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import ChatBubble from './ChatBubble';
 import { memori, tenant, sessionID } from '../../mocks/data';
 
@@ -114,6 +114,26 @@ it('renders ChatBubble with msg generated by AI unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders the generatedByAI mark as a static icon, not a button', () => {
+  render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: false,
+        text: 'AI generated reply',
+        initial: false,
+        generatedByAI: true,
+      }}
+    />
+  );
+
+  const mark = screen.getByLabelText('generatedByAI');
+  expect(mark.tagName).not.toBe('BUTTON');
+  expect(mark.closest('button')).toBeNull();
+});
+
 it('renders ChatBubble with translation and original unchanged', () => {
   const { container } = render(
     <ChatBubble

package/src/components/ChatBubble/ChatBubble.tsx

@@ -39,7 +39,6 @@ import {
 } from '../../helpers/message';
 import { Expandable, Modal } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import { usePressTooltip } from '../../helpers/usePressTooltip';
 import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 const ASSET_URL_PATTERN = /https?:\/\/\S*\/api\/v\d+\/asset\/\S+/gi;
 
@@ -131,7 +130,6 @@ const ChatBubble: React.FC<Props> = ({
   const { t, i18n } = useTranslation();
   const surfaceEl = useWidgetSurfaceEl();
   const lang = i18n.language || 'en';
-  const generatedByAiTooltip = usePressTooltip();
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
   const [openFunctionCache, setOpenFunctionCache] = useState(false);
   const [copyStatus, setCopyStatus] = useState<{
@@ -772,18 +770,13 @@ const ChatBubble: React.FC<Props> = ({
                   placement="bottom"
                   content={t('generatedByAI')}
                   className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
-                  {...generatedByAiTooltip.tooltipProps}
                 >
-                  <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 />}
-                      {...generatedByAiTooltip.pressTriggerProps}
-                    />
+                  <span
+                    className="memori-chat--bubble-addon-tooltip-trigger memori-chat--bubble-ai-icon"
+                    role="img"
+                    aria-label={String(t('generatedByAI'))}
+                  >
+                    <Bot aria-hidden />
                   </span>
                 </Tooltip>
               )}
@@ -885,6 +878,7 @@ const ChatBubble: React.FC<Props> = ({
         container={surfaceEl ?? undefined}
         open={openFunctionCache}
         className="memori-chat--function-cache-modal"
+        stacking="stacked"
         title={t('functionCache') || 'Function Cache'}
         closable={true}
         onOpenChange={setOpenFunctionCache}