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

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>
@@ -99,6 +110,17 @@ FromUser.args = {
   },
 };
 
+export const FromUserWithNewlines = Template.bind({});
+FromUserWithNewlines.args = {
+  memori,
+  tenant,
+  message: {
+    fromUser: true,
+    text: 'Proin libero ante, dignissim sit amet.\nTurpis a, pretium condimentum dolor.\n\n[Vedi altro](https://memori.ai)',
+    initial: false,
+  },
+};
+
 export const FromUserWithLink = Template.bind({});
 FromUserWithLink.args = {
   memori,

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';
 
@@ -62,6 +62,22 @@ it('renders ChatBubble with user msg unchanged', () => {
   expect(container).toMatchSnapshot();
 });
 
+it('renders ChatBubble with user msg with newlines unchanged', () => {
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: true,
+        text: 'Proin libero ante, dignissim sit amet.\nTurpis a, pretium condimentum dolor.\n\n[Vedi altro](https://memori.ai)',
+        initial: false,
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
 it('shows copy button for user messages', () => {
   const { container } = render(
     <ChatBubble
@@ -114,6 +130,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