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

package/esm/components/ChatBubble/ChatBubble.css

@@ -73,24 +73,25 @@
     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;
+    transition: box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
     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;
+    flex-shrink: 0;
     align-items: center;
     gap: 8px;
+    white-space: nowrap;
 }
 
 .memori-chat--bubble-timestamp-separator {
@@ -114,10 +115,6 @@
     align-items: flex-end;
 }
 
-.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
-    min-width: fit-content;
-}
-
 .memori-chat--bubble-avatar svg {
     fill: #000;
     font-size: var(--memori-text-size-heading-large);
@@ -187,6 +184,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;
@@ -214,11 +221,6 @@
 }
 
 @media (max-width: 600px) {
-    .memori-chat--bubble p {
-        font-size: 12px;
-        line-height: 1.25;
-    }
-
     .memori-chat--bubble-shell {
         gap: 4px;
     }
@@ -230,17 +232,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 {
@@ -262,6 +268,7 @@
     font-size: 0.8em;
     font-weight: var(--memori-text-weight-medium);
     line-height: 1;
+    white-space: nowrap;
 }
 
 .memori-chat--bubble-avatar-img {
@@ -270,21 +277,73 @@
     object-fit: cover;
 }
 
+/* Shared elevation for the floating addon and the highlighted message bubble. */
+.memori-chat--bubble-container.memori-chat--with-addon {
+    --memori-chat-addon-elevation:
+        0 4px 16px color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent),
+        0 1px 3px color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
+}
+
+/* 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 {
+    position: absolute;
+    z-index: 2147483647;
+    top: 100%;
+    right: auto;
+    bottom: auto;
+    left: 0;
     display: flex;
-    flex-wrap: wrap;
+    width: max-content;
+    max-width: none;
+    flex-wrap: nowrap;
     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);
+    box-shadow: var(--memori-chat-addon-elevation);
+    color: var(--memori-text-color);
     gap: calc(var(--memori-spacing-xs) * 0.5);
     opacity: 0;
     pointer-events: none;
-    transform: translateY(-4px);
-    transition: opacity 0.2s ease, transform 0.2s ease;
+    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);
+    white-space: nowrap;
+    will-change: opacity, transform;
+}
+
+.memori-chat--bubble-addon:has(.memori-chat--bubble-timestamp-container) {
+    padding-left: var(--memori-spacing-sm);
+}
+
+/* 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-anchor--from-user {
+    align-items: flex-end;
 }
 
-.memori-chat--bubble-shell--from-user .memori-chat--bubble-addon {
-    align-self: flex-end;
+.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 {
@@ -296,19 +355,77 @@
     max-width: 100%;
 }
 
-.memori-chat--bubble-shell--has-addon:focus-within .memori-chat--bubble-addon,
-.memori-chat--bubble-container.memori-chat--with-addon:hover .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, -8px, 0) scale(1);
+}
+
+.memori-chat--bubble-container.memori-chat--with-addon .memori-chat--bubble {
+    min-width: fit-content;
+}
+
+.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);
+}
+
+/* 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-container.memori-chat--with-addon:focus-within .memori-chat--bubble-addon {
     opacity: 1;
     pointer-events: auto;
-    transform: translateY(-10px);
+    transform: translate3d(0, -8px, 0) scale(1);
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble-addon {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translate3d(0, -8px, 0) scale(1);
+    }
+}
+
+.memori-chat--bubble-container.memori-chat--addon-open .memori-chat--bubble.memori-chat--user-bubble {
+    box-shadow: var(--memori-chat-addon-elevation);
+}
+
+.memori-chat--bubble-container.memori-chat--with-addon:focus-within .memori-chat--bubble {
+    box-shadow: var(--memori-chat-addon-elevation);
+}
+
+.memori-chat--bubble-container.memori-chat--with-addon:focus-within .memori-chat--bubble.memori-chat--user-bubble {
+    box-shadow: var(--memori-chat-addon-elevation);
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble {
+        box-shadow: var(--memori-chat-addon-elevation);
+    }
+
+    .memori-chat--bubble-anchor--has-addon:hover .memori-chat--bubble.memori-chat--user-bubble {
+        box-shadow: var(--memori-chat-addon-elevation);
+    }
 }
 
 .memori-chat--bubble-addon-tooltip-trigger {
     display: inline-flex;
+    flex-shrink: 0;
+}
+
+/* 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 {
+    flex-shrink: 0;
     transition: all 0.3s ease-in-out;
 }
 
@@ -365,6 +482,7 @@
 
 .memori-chat--bubble-addon .memori-chat--feedback {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     padding: 0;
     margin: 0;

package/esm/components/ChatBubble/ChatBubble.d.ts

@@ -33,6 +33,7 @@ export interface Props {
     showReasoning?: boolean;
     usageHtml?: string;
     isChatlogPanel?: boolean;
+    showDates?: boolean;
     codeMimeTypes?: string[];
     translateTo?: string;
     customMediaRenderer?: MediaWidgetProps['customMediaRenderer'];

package/esm/components/ChatBubble/ChatBubble.js

@@ -8,9 +8,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, stripAttachmentTags, stripAllInternalTags, truncateMessage, } from '../../helpers/message';
 import { Expandable, Modal } from '@memori.ai/ui';
+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) => sanitizeMsg(stripAttachmentTags(text)
     .replace(/<\/?documents?\b[^>]*>/gi, '')
@@ -23,17 +25,35 @@ import ArtifactHandler from '../MemoriArtifactSystem/components/ArtifactHandler/
 const COPY_FEEDBACK_MS = 2500;
 import { installMathJax } from '../../helpers/utils';
 import MediaWidget from '../MediaWidget/MediaWidget';
-const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionID, showFeedback, showWhyThisAnswer = true, showCopyButton = true, showTranslationOriginal = false, simulateUserPrompt, showAIicon = true, useMathFormatting = false, user, userAvatar, experts, showFunctionCache = false, showReasoning = false, usageHtml = '', isChatlogPanel = false, codeMimeTypes = [], translateTo, customMediaRenderer, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionID, showFeedback, showWhyThisAnswer = true, showCopyButton = true, showTranslationOriginal = false, simulateUserPrompt, showAIicon = true, useMathFormatting = false, user, userAvatar, experts, showFunctionCache = false, showReasoning = false, usageHtml = '', isChatlogPanel = false, showDates = false, codeMimeTypes = [], translateTo, customMediaRenderer, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     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', raw: 'idle' });
+    const [copyStatus, setCopyStatus] = useState({ plain: 'idle', raw: 'idle', functionCache: 'idle' });
     const copyResetTimers = useRef({
         plain: null,
         raw: null,
+        functionCache: null,
     });
+    const [addonOpen, setAddonOpen] = useState(false);
+    const bubbleContainerRef = useRef(null);
+    useEffect(() => {
+        if (!addonOpen)
+            return;
+        const onPointerDown = (event) => {
+            var _a;
+            const target = event.target;
+            if (target && ((_a = bubbleContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)))
+                return;
+            setAddonOpen(false);
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => document.removeEventListener('pointerdown', onPointerDown);
+    }, [addonOpen]);
     useEffect(() => {
         if (typeof window !== 'undefined' && !window.MathJax) {
             installMathJax();
@@ -53,23 +73,15 @@ const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionI
         ? message.text || ''
         : (message.text || '').replaceAll(/<think.*?>(.*?)<\/think>/gs, '')));
     const copiedLabel = t('copied') || 'Copied';
-    const formattedTimestamp = message.timestamp
+    const formattedTimestamp = showDates && message.timestamp
         ? (() => {
             const date = new Date(message.timestamp.endsWith('Z')
                 ? message.timestamp
                 : `${message.timestamp}Z`);
-            const now = new Date();
-            const isToday = date.getFullYear() === now.getFullYear() &&
-                date.getMonth() === now.getMonth() &&
-                date.getDate() === now.getDate();
             return new Intl.DateTimeFormat(i18n.language || 'it', {
-                ...(isToday
-                    ? {}
-                    : {
-                        day: '2-digit',
-                        month: '2-digit',
-                        year: 'numeric',
-                    }),
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
                 hour: '2-digit',
                 minute: '2-digit',
             }).format(date);
@@ -117,6 +129,7 @@ const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionI
             });
         };
     }, []);
+    const functionCacheCopyText = (_d = functionCacheData === null || functionCacheData === void 0 ? void 0 : functionCacheData.map(f => `${f.title}\n\n${f.content}`).join('\n\n---\n\n')) !== null && _d !== void 0 ? _d : '';
     const clearCopyReset = (type) => {
         if (copyResetTimers.current[type]) {
             clearTimeout(copyResetTimers.current[type]);
@@ -212,7 +225,15 @@ const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionI
                 'memori-chat--bubble-from-user': false,
             }), children: [renderAssistantAvatar(), _jsx("div", { className: "memori-chat--bubble memori-chat--bubble-status-message-error", children: _jsx("div", { className: "memori-chat--bubble-message ", children: sanitizeMsg(cleanText) }) })] }));
     }
-    const shouldShowTimestampInAddon = !!formattedTimestamp && (!message.fromUser || isChatlogPanel);
+    const shouldShowTimestampInAddon = showDates && !!formattedTimestamp && !message.fromUser && !isChatlogPanel;
+    const bubbleAddonTooltipProps = {
+        container: surfaceEl !== null && surfaceEl !== void 0 ? surfaceEl : undefined,
+        slotProps: {
+            positioner: {
+                className: 'memori-chat--bubble-addon-tooltip-positioner',
+            },
+        },
+    };
     const shouldShowBubbleAddon = shouldShowTimestampInAddon ||
         shouldShowCopyButtons ||
         (message.generatedByAI && showAIicon) ||
@@ -224,35 +245,36 @@ const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionI
             message.questionAnswered &&
             apiUrl &&
             showWhyThisAnswer);
-    const topMediaWidgetLinks = (((_e = (_d = message === null || message === void 0 ? void 0 : message.media) === null || _d === void 0 ? void 0 : _d.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _e === void 0 ? void 0 : _e.filter(m => m.mimeType === 'text/html' && !!m.url)) || []);
+    const handleBubbleContainerClick = (event) => {
+        var _a, _b;
+        if (!shouldShowBubbleAddon)
+            return;
+        if (typeof window !== 'undefined' &&
+            window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+            return;
+        }
+        if ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.memori-chat--bubble-addon, button, a, input, textarea, [role="button"]')) {
+            return;
+        }
+        setAddonOpen(open => !open);
+    };
+    const topMediaWidgetLinks = (((_f = (_e = message === null || message === void 0 ? void 0 : message.media) === null || _e === void 0 ? void 0 : _e.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _f === void 0 ? void 0 : _f.filter(m => m.mimeType === 'text/html' && !!m.url)) || []);
     const topMediaWidgetMedia = [
-        ...(((_g = (_f = message === null || message === void 0 ? void 0 : message.media) === null || _f === void 0 ? void 0 : _f.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _g === void 0 ? void 0 : _g.filter(m => !(codeMimeTypes.includes(m.mimeType) ||
+        ...(((_h = (_g = message === null || message === void 0 ? void 0 : message.media) === null || _g === void 0 ? void 0 : _g.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _h === void 0 ? void 0 : _h.filter(m => !(codeMimeTypes.includes(m.mimeType) ||
             (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 = [];
-            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) => ({
+            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 = ((_j = (_h = message === null || message === void 0 ? void 0 : message.media) === null || _h === void 0 ? void 0 : _h.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _j === void 0 ? void 0 : _j.filter(m => codeMimeTypes.includes(m.mimeType))) || [];
+    const codeMediaWidgetMedia = ((_k = (_j = message === null || message === void 0 ? void 0 : message.media) === null || _j === void 0 ? void 0 : _j.filter(m => { var _a; return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionSignature); })) === null || _k === void 0 ? void 0 : _k.filter(m => codeMimeTypes.includes(m.mimeType))) || [];
     const hasAddonAfterTimestamp = shouldShowCopyButtons ||
         (message.generatedByAI && showAIicon) ||
         (showFeedback && simulateUserPrompt) ||
@@ -263,64 +285,69 @@ const ChatBubble = ({ message, memori, tenant, baseUrl, apiUrl, client, sessionI
             message.questionAnswered &&
             apiUrl &&
             showWhyThisAnswer);
-    return (_jsxs(_Fragment, { children: [showInitialDivider && _jsx("div", { className: "memori-chat--bubble-initial" }), _jsxs("div", { className: cx('memori-chat--bubble-container memori-chat-scroll-item', {
+    return (_jsxs(_Fragment, { children: [showInitialDivider && _jsx("div", { className: "memori-chat--bubble-initial" }), _jsxs("div", { ref: bubbleContainerRef, className: cx('memori-chat--bubble-container memori-chat-scroll-item', {
                     'memori-chat--bubble-from-user': !!message.fromUser,
                     'memori-chat--with-addon': shouldShowBubbleAddon,
-                }), children: [_jsx(MediaWidget, { simulateUserPrompt: simulateUserPrompt, links: topMediaWidgetLinks, media: topMediaWidgetMedia, sessionID: sessionID, baseUrl: baseUrl, apiUrl: apiUrl, translateTo: translateTo, customMediaRenderer: customMediaRenderer, fromUser: message.fromUser }), _jsxs("div", { className: "memori-chat--bubble-message-row", children: [!message.fromUser && renderAssistantAvatar(), _jsxs("div", { className: cx('memori-chat--bubble-shell', {
+                    'memori-chat--addon-open': shouldShowBubbleAddon && addonOpen,
+                }), onClick: handleBubbleContainerClick, children: [_jsx(MediaWidget, { simulateUserPrompt: simulateUserPrompt, links: topMediaWidgetLinks, media: topMediaWidgetMedia, sessionID: sessionID, baseUrl: baseUrl, apiUrl: apiUrl, translateTo: translateTo, customMediaRenderer: customMediaRenderer, fromUser: message.fromUser }), _jsxs("div", { className: "memori-chat--bubble-message-row", children: [!message.fromUser && renderAssistantAvatar(), _jsxs("div", { className: cx('memori-chat--bubble-shell', {
                                     'memori-chat--bubble-shell--from-user': !!message.fromUser,
-                                    'memori-chat--bubble-shell--has-addon': shouldShowBubbleAddon,
-                                }), children: [_jsxs("div", { className: cx('memori-chat--bubble', {
-                                            'memori-chat--user-bubble': !!message.fromUser,
-                                            'memori-chat--with-addon': shouldShowCopyButtons || (showFeedback && simulateUserPrompt),
-                                            'memori-chat--ai-generated': message.generatedByAI,
-                                            'memori-chat--with-feedback': showFeedback,
-                                        }), children: [message.fromUser ? (_jsx(Expandable, { className: "memori-chat--bubble-content", mode: "characters", children: _jsx("div", { dir: "auto", className: "memori-chat--bubble-content", dangerouslySetInnerHTML: { __html: sanitizeMsg(cleanText) } }) })) : (_jsx("div", { dir: "auto", className: "memori-chat--bubble-content", dangerouslySetInnerHTML: { __html: renderedText } })), !!usageHtml && (_jsx("div", { className: "memori-chat--usage-inside-bubble", dangerouslySetInnerHTML: { __html: usageHtml } }))] }), !message.fromUser && (_jsx("div", { className: cx('memori-chat--artifact-block', {
-                                            'memori-chat--artifact-block--chatlog': isChatlogPanel,
-                                        }), children: _jsx(ArtifactHandler, { isChatlogPanel: isChatlogPanel, message: message }) })), _jsx(MediaWidget, { simulateUserPrompt: simulateUserPrompt, media: codeMediaWidgetMedia, sessionID: sessionID, baseUrl: baseUrl, apiUrl: apiUrl, translateTo: translateTo, customMediaRenderer: customMediaRenderer, fromUser: message.fromUser }), shouldShowBubbleAddon && (_jsxs("div", { className: "memori-chat--bubble-addon", children: [shouldShowTimestampInAddon && (_jsxs("div", { className: "memori-chat--bubble-timestamp-container", children: [_jsx("p", { className: "memori-chat--bubble-timestamp", children: formattedTimestamp }), hasAddonAfterTimestamp && (_jsx("span", { className: "memori-chat--bubble-timestamp-separator", children: "\u2022" }))] })), shouldShowCopyButtons && (_jsx(Tooltip, { placement: "bottom", content: copyStatus.plain === 'success'
-                                                    ? copiedLabel
-                                                    : copyStatus.plain === 'error'
-                                                        ? t('copyFailed')
-                                                        : t('copy') || 'Copy', children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", "aria-label": copyStatus.plain === 'success'
-                                                            ? String(copiedLabel)
+                                }), children: [_jsxs("div", { className: cx('memori-chat--bubble-anchor', {
+                                            'memori-chat--bubble-anchor--from-user': !!message.fromUser,
+                                            'memori-chat--bubble-anchor--has-addon': shouldShowBubbleAddon,
+                                        }), children: [_jsxs("div", { className: cx('memori-chat--bubble', {
+                                                    'memori-chat--user-bubble': !!message.fromUser,
+                                                    'memori-chat--with-addon': shouldShowCopyButtons || (showFeedback && simulateUserPrompt),
+                                                    'memori-chat--ai-generated': message.generatedByAI,
+                                                    'memori-chat--with-feedback': showFeedback,
+                                                }), children: [message.fromUser ? (_jsx(Expandable, { className: "memori-chat--bubble-content", mode: "characters", children: _jsx("div", { dir: "auto", className: "memori-chat--bubble-content", dangerouslySetInnerHTML: { __html: sanitizeMsg(cleanText) } }) })) : (_jsx("div", { dir: "auto", className: "memori-chat--bubble-content", dangerouslySetInnerHTML: { __html: renderedText } })), !!usageHtml && (_jsx("div", { className: "memori-chat--usage-inside-bubble", dangerouslySetInnerHTML: { __html: usageHtml } }))] }), shouldShowBubbleAddon && (_jsxs("div", { className: "memori-chat--bubble-addon", children: [shouldShowTimestampInAddon && (_jsxs("div", { className: "memori-chat--bubble-timestamp-container", children: [_jsx("p", { className: "memori-chat--bubble-timestamp", children: formattedTimestamp }), hasAddonAfterTimestamp && (_jsx("span", { className: "memori-chat--bubble-timestamp-separator", children: "\u2022" }))] })), shouldShowCopyButtons && (_jsx(Tooltip, { ...bubbleAddonTooltipProps, placement: "bottom", content: copyStatus.plain === 'success'
+                                                            ? copiedLabel
                                                             : copyStatus.plain === 'error'
-                                                                ? String(t('copyFailed'))
-                                                                : String(t('copy') || 'Copy'), className: cx('memori-chat--bubble-action-button', 'memori-share-button--copy-item', {
-                                                            'memori-share-button--copy-item--success': copyStatus.plain === 'success',
-                                                            'memori-share-button--copy-item--error': copyStatus.plain === 'error',
-                                                        }), icon: copyStatus.plain === 'success' ? (_jsx(Check, { className: "memori-share-button--copy-icon", "aria-hidden": true, strokeWidth: 2.5 })) : (_jsx(Copy, { className: "memori-share-button--copy-icon", "aria-hidden": true })), onClick: () => handleCopyClick('plain', copyText) }) }) })), shouldShowCopyRawButton && (_jsx(Tooltip, { placement: "bottom", content: copyStatus.raw === 'success'
-                                                    ? copiedLabel
-                                                    : copyStatus.raw === 'error'
-                                                        ? t('copyFailed')
-                                                        : t('copyRawCode') || 'Copy raw code', children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", "aria-label": copyStatus.raw === 'success'
-                                                            ? String(copiedLabel)
+                                                                ? t('copyFailed')
+                                                                : t('copy') || 'Copy', children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", "aria-label": copyStatus.plain === 'success'
+                                                                    ? String(copiedLabel)
+                                                                    : copyStatus.plain === 'error'
+                                                                        ? String(t('copyFailed'))
+                                                                        : String(t('copy') || 'Copy'), className: cx('memori-chat--bubble-action-button', 'memori-share-button--copy-item', {
+                                                                    'memori-share-button--copy-item--success': copyStatus.plain === 'success',
+                                                                    'memori-share-button--copy-item--error': copyStatus.plain === 'error',
+                                                                }), icon: copyStatus.plain === 'success' ? (_jsx(Check, { className: "memori-share-button--copy-icon", "aria-hidden": true, strokeWidth: 2.5 })) : (_jsx(Copy, { className: "memori-share-button--copy-icon", "aria-hidden": true })), onClick: () => handleCopyClick('plain', copyText) }) }) })), shouldShowCopyRawButton && (_jsx(Tooltip, { ...bubbleAddonTooltipProps, placement: "bottom", content: copyStatus.raw === 'success'
+                                                            ? copiedLabel
                                                             : copyStatus.raw === 'error'
-                                                                ? String(t('copyFailed'))
-                                                                : String(t('copyRawCode') || 'Copy raw code'), className: cx('memori-chat--bubble-action-button', 'memori-share-button--copy-item', {
-                                                            'memori-share-button--copy-item--success': copyStatus.raw === 'success',
-                                                            'memori-share-button--copy-item--error': copyStatus.raw === 'error',
-                                                        }), icon: copyStatus.raw === 'success' ? (_jsx(Check, { className: "memori-share-button--copy-icon", "aria-hidden": true, strokeWidth: 2.5 })) : (_jsx(Code, { className: "memori-share-button--copy-icon", "aria-hidden": true })), onClick: () => handleCopyClick('raw', rawMessageText) }) }) })), !message.fromUser &&
-                                                showFunctionCache &&
-                                                ((_k = message.media) === null || _k === void 0 ? void 0 : _k.some(m => {
-                                                    var _a, _b;
-                                                    return Boolean((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionCache) ||
-                                                        ((_b = m.properties) === null || _b === void 0 ? void 0 : _b.functionCache) === 'true';
-                                                })) && (_jsx(Tooltip, { placement: "bottom", content: t('functionCache') || 'Function cache', className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug", children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", className: "memori-chat--bubble-action-button", icon: _jsx(Bug, { "aria-label": t('functionCache') || 'Function cache' }), onClick: () => setOpenFunctionCache(true) }) }) })), showFeedback && !!simulateUserPrompt && (_jsx(FeedbackButtons, { memori: memori, className: "memori-chat--bubble-feedback", dropdown: true, onNegativeClick: msg => {
-                                                    if (msg)
-                                                        simulateUserPrompt(msg);
-                                                } })), message.generatedByAI && showAIicon && (_jsx(Tooltip, { placement: "bottom", content: t('generatedByAI'), className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai", children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", className: "memori-chat--bubble-action-button", "aria-label": String(t('generatedByAI')), icon: _jsx(Bot, { "aria-hidden": true }) }) }) })), showTranslationOriginal &&
-                                                message.translatedText &&
-                                                message.translatedText !== message.text && (_jsx(Tooltip, { placement: "bottom", content: `${lang === 'it' ? 'Testo originale' : 'Original text'}: ${stripAllInternalTags(message.text)}`, className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai", children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", className: "memori-chat--bubble-action-button", "aria-label": lang === 'it' ? 'Testo originale' : 'Original text', icon: _jsx(Languages, { "aria-hidden": true }) }) }) })), !message.fromUser &&
-                                                message.questionAnswered &&
-                                                apiUrl &&
-                                                showWhyThisAnswer && (_jsx(Tooltip, { placement: "bottom", content: t('whyThisAnswer') || 'Why this answer?', children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", className: "memori-chat--bubble-action-button", onClick: () => setShowingWhyThisAnswer(true), disabled: showingWhyThisAnswer, "aria-label": t('whyThisAnswer') || 'Why this answer?', icon: _jsx(HelpCircle, { "aria-hidden": true }) }) }) }))] }))] }), message.fromUser && renderUserAvatar()] })] }), showingWhyThisAnswer && client && (_jsx(WhyThisAnswer, { client: client, visible: showingWhyThisAnswer, message: message, closeDrawer: () => setShowingWhyThisAnswer(false), sessionID: sessionID })), _jsx(Modal, { open: openFunctionCache, className: "memori-chat--function-cache-modal", title: t('functionCache') || 'Function Cache', closable: true, onOpenChange: setOpenFunctionCache, children: functionCacheData === null || functionCacheData === void 0 ? void 0 : functionCacheData.map((f, i) => (_jsxs("div", { style: i > 0
-                        ? {
-                            marginTop: '1.5rem',
-                            paddingTop: '1.5rem',
-                            borderTop: '1px solid #e0e0e0',
-                        }
-                        : {
-                            paddingTop: '1.5rem',
-                        }, children: [_jsx("h3", { style: { marginTop: 0 }, children: f.title }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordWrap: 'break-word' }, children: f.content }, f.mediumID)] }, f.mediumID))) })] }));
+                                                                ? t('copyFailed')
+                                                                : t('copyRawCode') || 'Copy raw code', children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", "aria-label": copyStatus.raw === 'success'
+                                                                    ? String(copiedLabel)
+                                                                    : copyStatus.raw === 'error'
+                                                                        ? String(t('copyFailed'))
+                                                                        : String(t('copyRawCode') || 'Copy raw code'), className: cx('memori-chat--bubble-action-button', 'memori-share-button--copy-item', {
+                                                                    'memori-share-button--copy-item--success': copyStatus.raw === 'success',
+                                                                    'memori-share-button--copy-item--error': copyStatus.raw === 'error',
+                                                                }), icon: copyStatus.raw === 'success' ? (_jsx(Check, { className: "memori-share-button--copy-icon", "aria-hidden": true, strokeWidth: 2.5 })) : (_jsx(Code, { className: "memori-share-button--copy-icon", "aria-hidden": true })), onClick: () => handleCopyClick('raw', rawMessageText) }) }) })), !message.fromUser &&
+                                                        showFunctionCache &&
+                                                        ((_l = message.media) === null || _l === void 0 ? void 0 : _l.some(m => {
+                                                            var _a, _b;
+                                                            return Boolean((_a = m.properties) === null || _a === void 0 ? void 0 : _a.functionCache) ||
+                                                                ((_b = m.properties) === null || _b === void 0 ? void 0 : _b.functionCache) === 'true';
+                                                        })) && (_jsx(Tooltip, { ...bubbleAddonTooltipProps, placement: "bottom", content: t('functionCache') || 'Function cache', className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug", children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", className: "memori-chat--bubble-action-button", icon: _jsx(Bug, { "aria-label": t('functionCache') || 'Function cache' }), onClick: () => setOpenFunctionCache(true) }) }) })), showFeedback && !!simulateUserPrompt && (_jsx(FeedbackButtons, { memori: memori, className: "memori-chat--bubble-feedback", dropdown: true, onNegativeClick: msg => {
+                                                            if (msg)
+                                                                simulateUserPrompt(msg);
+                                                        } })), message.generatedByAI && showAIicon && (_jsx(Tooltip, { ...bubbleAddonTooltipProps, placement: "bottom", content: t('generatedByAI'), className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai", ...generatedByAiTooltip.tooltipProps, children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", className: "memori-chat--bubble-action-button", "aria-label": String(t('generatedByAI')), icon: _jsx(Bot, { "aria-hidden": true }), ...generatedByAiTooltip.pressTriggerProps }) }) })), showTranslationOriginal &&
+                                                        message.translatedText &&
+                                                        message.translatedText !== message.text && (_jsx(Tooltip, { ...bubbleAddonTooltipProps, placement: "bottom", content: `${lang === 'it' ? 'Testo originale' : 'Original text'}: ${stripAllInternalTags(message.text)}`, className: "memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai", children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", type: "button", className: "memori-chat--bubble-action-button", "aria-label": lang === 'it' ? 'Testo originale' : 'Original text', icon: _jsx(Languages, { "aria-hidden": true }) }) }) })), !message.fromUser &&
+                                                        message.questionAnswered &&
+                                                        apiUrl &&
+                                                        showWhyThisAnswer && (_jsx(Tooltip, { ...bubbleAddonTooltipProps, placement: "bottom", content: t('whyThisAnswer') || 'Why this answer?', children: _jsx("span", { className: "memori-chat--bubble-addon-tooltip-trigger", children: _jsx(Button, { variant: "ghost", shape: "circle", className: "memori-chat--bubble-action-button", onClick: () => setShowingWhyThisAnswer(true), disabled: showingWhyThisAnswer, "aria-label": t('whyThisAnswer') || 'Why this answer?', icon: _jsx(HelpCircle, { "aria-hidden": true }) }) }) }))] }))] }), !message.fromUser && (_jsx("div", { className: cx('memori-chat--artifact-block', {
+                                            'memori-chat--artifact-block--chatlog': isChatlogPanel,
+                                        }), children: _jsx(ArtifactHandler, { isChatlogPanel: isChatlogPanel, message: message }) })), _jsx(MediaWidget, { simulateUserPrompt: simulateUserPrompt, media: codeMediaWidgetMedia, sessionID: sessionID, baseUrl: baseUrl, apiUrl: apiUrl, translateTo: translateTo, customMediaRenderer: customMediaRenderer, fromUser: message.fromUser })] }), message.fromUser && renderUserAvatar()] })] }), showingWhyThisAnswer && client && (_jsx(WhyThisAnswer, { client: client, visible: showingWhyThisAnswer, message: message, closeDrawer: () => setShowingWhyThisAnswer(false), sessionID: sessionID })), _jsxs(Modal, { container: surfaceEl !== null && surfaceEl !== void 0 ? surfaceEl : undefined, open: openFunctionCache, className: "memori-chat--function-cache-modal", title: t('functionCache') || 'Function Cache', closable: true, onOpenChange: setOpenFunctionCache, children: [_jsx("div", { style: { marginBottom: '1rem' }, children: _jsx(Button, { icon: _jsx(Copy, { "aria-hidden": true }), onClick: () => handleCopyClick('functionCache', functionCacheCopyText), children: copyStatus.functionCache === 'success'
+                                ? copiedLabel
+                                : t('copy') || 'Copy' }) }), functionCacheData === null || functionCacheData === void 0 ? void 0 : functionCacheData.map((f, i) => (_jsxs("div", { style: i > 0
+                            ? {
+                                marginTop: '1.5rem',
+                                paddingTop: '1.5rem',
+                                borderTop: '1px solid #e0e0e0',
+                            }
+                            : {
+                                paddingTop: '1.5rem',
+                            }, children: [_jsx("h3", { style: { marginTop: 0 }, children: f.title }), _jsx("pre", { style: { whiteSpace: 'pre-wrap', wordWrap: 'break-word' }, children: f.content }, f.mediumID)] }, f.mediumID)))] })] }));
 };
 export default ChatBubble;
 //# sourceMappingURL=ChatBubble.js.map