@memori.ai/memori-react 9.0.0-alpha.1 → 9.0.0-alpha.12

package/src/components/ChatBubble/ChatBubble.css

@@ -73,20 +73,18 @@
     flex-direction: column;
     align-items: flex-start;
     padding: 12px 14px;
-    /* border: 0.5px solid var(--color-border-tertiary, var(--memori-border-color, #e5e7eb)); */
-    border-radius: 4px 14px 14px 14px;
+    border: none;
+    border-radius: 13px;
     /* margin-top: 1.5rem; */
     background: var(--memori-main-background);
-    color: var(--color-text-primary, var(--memori-text-color));
+    border-top-left-radius: 4px;
+    box-shadow: none;
+    color: var(--memori-text-color);
     font-size: 14px;
     line-height: 1.4;
     white-space: pre-wrap;
 }
 
-[data-theme='dark'] .memori-chat--bubble:not(.memori-chat--user-bubble) {
-    border-color: #fff;
-}
-
 .memori-chat--bubble-timestamp-container {
     display: flex;
     align-items: center;
@@ -118,6 +116,13 @@
     min-width: fit-content;
 }
 
+/* fit-content outranks the bubble max-width, so a wide markdown code block or table
+   would stretch the bubble past the messages viewport and make the whole chat scroll
+   sideways. Those blocks are kept scrollable on their own instead. */
+.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble:has(pre, table) {
+    min-width: 0;
+}
+
 .memori-chat--bubble-avatar svg {
     fill: #000;
     font-size: var(--memori-text-size-heading-large);
@@ -187,6 +192,16 @@
     display: none;
 }
 
+.memori-chat--bubble pre,
+.memori-chat--bubble .memori--responsive-table-wrapper {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+.memori-chat--bubble table {
+    max-width: 100%;
+}
+
 .memori-chat--bubble a {
     color: var(--memori-primary, #000);
     overflow-wrap: break-word;
@@ -230,17 +245,21 @@
 
 .memori-chat--bubble.memori-chat--user-bubble {
     max-width: 100%;
-    border-radius: 14px 4px 14px 14px;
-    background: var(--memori-primary) !important;
-    color: #fff;
+    border: none;
+    border-radius: var(--memori-radius-box);
+    /* Prefer --memori-primary-color: dark theme remaps --memori-primary to
+       --memori-primary-hover, which circularly resolves and drops the fill. */
+    background: var(--memori-primary-color, var(--memori-primary)) !important;
+    border-top-right-radius: 4px;
+    box-shadow: none;
+    color: var(--memori-primary-content);
     font-size: 14px;
     font-weight: 400;
 }
 
-[data-theme='dark'] {
-    .memori-chat--bubble.memori-chat--user-bubble {
-        background: var(--memori-primary-hover);
-    }
+[data-theme='dark'] .memori-chat--bubble.memori-chat--user-bubble,
+.memori-widget[data-theme='dark'] .memori-chat--bubble.memori-chat--user-bubble {
+    background: var(--memori-primary-color, var(--memori-primary)) !important;
 }
 
 .memori-chat--bubble-avatar {
@@ -270,12 +289,21 @@
     object-fit: cover;
 }
 
+/* The addon row sits outside the bubble, directly over the chat background, which
+   can be a dark image or colour: it carries its own surface so the icons and the
+   timestamp keep contrast whatever is painted behind them. */
 .memori-chat--bubble-addon {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     align-self: flex-start;
     justify-content: flex-start;
+    padding: calc(var(--memori-spacing-xs) * 0.5) var(--memori-spacing-xs);
+    border-radius: 999px;
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    background: color-mix(in srgb, var(--memori-main-background) 92%, transparent);
+    color: var(--memori-text-color);
     gap: calc(var(--memori-spacing-xs) * 0.5);
     opacity: 0;
     pointer-events: none;

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

@@ -483,4 +483,28 @@ it('renders ChatBubble with reasoning and output and markdown unchanged', () =>
     />
   );
   expect(container).toMatchSnapshot();
-});
+});
+
+it('uses the adjacent attachment link for document media', () => {
+  const attachmentUrl = 'https://assets.example.com/report.docx';
+  const { container } = render(
+    <ChatBubble
+      memori={memori}
+      tenant={tenant}
+      sessionID={sessionID}
+      message={{
+        fromUser: false,
+        initial: false,
+        text: [
+          '<document_attachment filename="report.docx" type="application/vnd.openxmlformats-officedocument.wordprocessingml.document">',
+          '</document_attachment>',
+          `<attachment_link>${attachmentUrl}</attachment_link>`,
+        ].join('\n'),
+      }}
+    />
+  );
+
+  expect(
+    container.querySelector(`a[href="${attachmentUrl}"]`)
+  ).toBeInTheDocument();
+});

package/src/components/ChatBubble/ChatBubble.tsx

@@ -25,7 +25,11 @@ import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@memori.ai/ui';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
-import { stripHTML, stripOutputTags } from '../../helpers/utils';
+import {
+  parseDocumentAttachmentsFromMessage,
+  stripHTML,
+  stripOutputTags,
+} from '../../helpers/utils';
 import {
   renderMsg,
   sanitizeMsg,
@@ -35,6 +39,8 @@ 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;
 
 const sanitizeRawCopyText = (text: string) =>
@@ -121,19 +127,24 @@ const ChatBubble: React.FC<Props> = ({
   customMediaRenderer,
 }) => {
   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<{
     plain: 'idle' | 'success' | 'error';
     raw: 'idle' | 'success' | 'error';
-  }>({ plain: 'idle', raw: 'idle' });
+    functionCache: 'idle' | 'success' | 'error';
+  }>({ plain: 'idle', raw: 'idle', functionCache: 'idle' });
   const copyResetTimers = useRef<{
     plain: ReturnType<typeof setTimeout> | null;
     raw: ReturnType<typeof setTimeout> | null;
+    functionCache: ReturnType<typeof setTimeout> | null;
   }>({
     plain: null,
     raw: null,
+    functionCache: null,
   });
   // Initialize MathJax on component mount
   useEffect(() => {
@@ -242,26 +253,33 @@ const ChatBubble: React.FC<Props> = ({
 
   useEffect(() => {
     return () => {
-      (Object.keys(copyResetTimers.current) as Array<'plain' | 'raw'>).forEach(
-        key => {
-          const timer = copyResetTimers.current[key];
-          if (timer) {
-            clearTimeout(timer);
-            copyResetTimers.current[key] = null;
-          }
+      (
+        Object.keys(copyResetTimers.current) as Array<
+          'plain' | 'raw' | 'functionCache'
+        >
+      ).forEach(key => {
+        const timer = copyResetTimers.current[key];
+        if (timer) {
+          clearTimeout(timer);
+          copyResetTimers.current[key] = null;
         }
-      );
+      });
     };
   }, []);
 
-  const clearCopyReset = (type: 'plain' | 'raw') => {
+  const functionCacheCopyText =
+    functionCacheData
+      ?.map(f => `${f.title}\n\n${f.content}`)
+      .join('\n\n---\n\n') ?? '';
+
+  const clearCopyReset = (type: 'plain' | 'raw' | 'functionCache') => {
     if (copyResetTimers.current[type]) {
       clearTimeout(copyResetTimers.current[type]!);
       copyResetTimers.current[type] = null;
     }
   };
 
-  const scheduleCopyReset = (type: 'plain' | 'raw') => {
+  const scheduleCopyReset = (type: 'plain' | 'raw' | 'functionCache') => {
     clearCopyReset(type);
     copyResetTimers.current[type] = setTimeout(() => {
       setCopyStatus(prev => ({ ...prev, [type]: 'idle' }));
@@ -269,7 +287,10 @@ const ChatBubble: React.FC<Props> = ({
     }, COPY_FEEDBACK_MS);
   };
 
-  const handleCopyClick = async (type: 'plain' | 'raw', text: string) => {
+  const handleCopyClick = async (
+    type: 'plain' | 'raw' | 'functionCache',
+    text: string
+  ) => {
     if (!text?.length) return;
     try {
       if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
@@ -437,32 +458,21 @@ const ChatBubble: React.FC<Props> = ({
             (m.mimeType === 'text/html' && !!m.url)
           )
       ) || []),
-    ...(() => {
-      const text = message.translatedText || message.text;
-      const documentAttachmentRegex =
-        /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
-      const attachments: (Medium & { type?: string })[] = [];
-      let match;
-      let attachmentIndex = 0;
-
-      while ((match = documentAttachmentRegex.exec(text)) !== null) {
-        const [, filename, type, content] = match;
-        attachments.push({
-          mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
-            .toString(36)
-            .substr(2, 9)}`,
-          url: '',
-          mimeType: type,
-          title: filename,
-          content: content.trim(),
-          properties: { isDocumentAttachment: true },
-          type: 'document',
-        });
-        attachmentIndex++;
-      }
-
-      return attachments;
-    })(),
+    ...parseDocumentAttachmentsFromMessage(
+      message.translatedText || message.text
+    ).map(
+      (attachment, attachmentIndex): Medium & { type?: string } => ({
+        mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
+          .toString(36)
+          .substr(2, 9)}`,
+        url: attachment.url,
+        mimeType: attachment.type,
+        title: attachment.filename,
+        content: attachment.content,
+        properties: { isDocumentAttachment: true },
+        type: 'document',
+      })
+    ),
   ];
 
   const codeMediaWidgetMedia =
@@ -736,6 +746,7 @@ 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
@@ -745,6 +756,7 @@ const ChatBubble: React.FC<Props> = ({
                       className="memori-chat--bubble-action-button"
                       aria-label={String(t('generatedByAI'))}
                       icon={<Bot aria-hidden />}
+                      {...generatedByAiTooltip.pressTriggerProps}
                     />
                   </span>
                 </Tooltip>
@@ -817,12 +829,25 @@ const ChatBubble: React.FC<Props> = ({
       )}
 
       <Modal
+        container={surfaceEl ?? undefined}
         open={openFunctionCache}
         className="memori-chat--function-cache-modal"
         title={t('functionCache') || 'Function Cache'}
         closable={true}
         onOpenChange={setOpenFunctionCache}
       >
+        <div style={{ marginBottom: '1rem' }}>
+          <Button
+            icon={<Copy aria-hidden />}
+            onClick={() =>
+              handleCopyClick('functionCache', functionCacheCopyText)
+            }
+          >
+            {copyStatus.functionCache === 'success'
+              ? copiedLabel
+              : t('copy') || 'Copy'}
+          </Button>
+        </div>
         {functionCacheData?.map((f, i) => (
           <div
             key={f.mediumID}