@memori.ai/memori-react 9.0.0-alpha.0 → 9.0.0-alpha.10

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.tsx

@@ -35,6 +35,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 +123,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 +249,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 +283,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) {
@@ -736,6 +753,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 +763,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 +836,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}