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

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) =>
@@ -89,6 +95,7 @@ export interface Props {
   showReasoning?: boolean;
   usageHtml?: string;
   isChatlogPanel?: boolean;
+  showDates?: boolean;
   codeMimeTypes?: string[];
   translateTo?: string;
   customMediaRenderer?: MediaWidgetProps['customMediaRenderer'];
@@ -116,25 +123,47 @@ const ChatBubble: React.FC<Props> = ({
   showReasoning = false,
   usageHtml = '',
   isChatlogPanel = false,
+  showDates = false,
   codeMimeTypes = [],
   translateTo,
   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,
   });
+  const [addonOpen, setAddonOpen] = useState(false);
+  const bubbleContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!addonOpen) return;
+
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      if (target && bubbleContainerRef.current?.contains(target)) return;
+      setAddonOpen(false);
+    };
+
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [addonOpen]);
+
   // Initialize MathJax on component mount
   useEffect(() => {
     if (typeof window !== 'undefined' && !window.MathJax) {
@@ -168,31 +197,23 @@ const ChatBubble: React.FC<Props> = ({
     )
   );
   const copiedLabel = t('copied') || 'Copied';
-  const formattedTimestamp = 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',
-              }),
-          hour: '2-digit',
-          minute: '2-digit',
-        }).format(date);
-      })()
-    : null;
+  const formattedTimestamp =
+    showDates && message.timestamp
+      ? (() => {
+          const date = new Date(
+            message.timestamp.endsWith('Z')
+              ? message.timestamp
+              : `${message.timestamp}Z`
+          );
+          return new Intl.DateTimeFormat(i18n.language || 'it', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+          }).format(date);
+        })()
+      : null;
 
   // Format function cache content
   const functionCacheData = message.media?.filter(
@@ -242,26 +263,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 +297,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) {
@@ -409,7 +440,15 @@ const ChatBubble: React.FC<Props> = ({
   }
 
   const shouldShowTimestampInAddon =
-    !!formattedTimestamp && (!message.fromUser || isChatlogPanel);
+    showDates && !!formattedTimestamp && !message.fromUser && !isChatlogPanel;
+  const bubbleAddonTooltipProps = {
+    container: surfaceEl ?? undefined,
+    slotProps: {
+      positioner: {
+        className: 'memori-chat--bubble-addon-tooltip-positioner',
+      },
+    },
+  } as const;
   const shouldShowBubbleAddon =
     shouldShowTimestampInAddon ||
     shouldShowCopyButtons ||
@@ -423,6 +462,26 @@ const ChatBubble: React.FC<Props> = ({
       apiUrl &&
       showWhyThisAnswer);
 
+  const handleBubbleContainerClick = (
+    event: React.MouseEvent<HTMLDivElement>
+  ) => {
+    if (!shouldShowBubbleAddon) return;
+    if (
+      typeof window !== 'undefined' &&
+      window.matchMedia('(hover: hover) and (pointer: fine)').matches
+    ) {
+      return;
+    }
+    if (
+      (event.target as Element | null)?.closest?.(
+        '.memori-chat--bubble-addon, button, a, input, textarea, [role="button"]'
+      )
+    ) {
+      return;
+    }
+    setAddonOpen(open => !open);
+  };
+
   const topMediaWidgetLinks = (message?.media
     ?.filter(m => !m.properties?.functionSignature)
     ?.filter(m => m.mimeType === 'text/html' && !!m.url) || []) as Medium[];
@@ -437,32 +496,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 =
@@ -486,10 +534,13 @@ const ChatBubble: React.FC<Props> = ({
     <>
       {showInitialDivider && <div className="memori-chat--bubble-initial" />}
       <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,
+          'memori-chat--addon-open': shouldShowBubbleAddon && addonOpen,
         })}
+        onClick={handleBubbleContainerClick}
       >
         <MediaWidget
           simulateUserPrompt={simulateUserPrompt}
@@ -509,7 +560,12 @@ const ChatBubble: React.FC<Props> = ({
           <div
             className={cx('memori-chat--bubble-shell', {
               'memori-chat--bubble-shell--from-user': !!message.fromUser,
-              'memori-chat--bubble-shell--has-addon': shouldShowBubbleAddon,
+            })}
+          >
+          <div
+            className={cx('memori-chat--bubble-anchor', {
+              'memori-chat--bubble-anchor--from-user': !!message.fromUser,
+              'memori-chat--bubble-anchor--has-addon': shouldShowBubbleAddon,
             })}
           >
           <div
@@ -548,30 +604,6 @@ const ChatBubble: React.FC<Props> = ({
             )}
           </div>
 
-          {!message.fromUser && (
-            <div
-              className={cx('memori-chat--artifact-block', {
-                'memori-chat--artifact-block--chatlog': isChatlogPanel,
-              })}
-            >
-              <ArtifactHandler
-                isChatlogPanel={isChatlogPanel}
-                message={message}
-              />
-            </div>
-          )}
-
-          <MediaWidget
-            simulateUserPrompt={simulateUserPrompt}
-            media={codeMediaWidgetMedia}
-            sessionID={sessionID}
-            baseUrl={baseUrl}
-            apiUrl={apiUrl}
-            translateTo={translateTo}
-            customMediaRenderer={customMediaRenderer}
-            fromUser={message.fromUser}
-          />
-
           {shouldShowBubbleAddon && (
             <div className="memori-chat--bubble-addon">
               {shouldShowTimestampInAddon && (
@@ -588,6 +620,7 @@ const ChatBubble: React.FC<Props> = ({
               )}
               {shouldShowCopyButtons && (
                 <Tooltip
+                  {...bubbleAddonTooltipProps}
                   placement="bottom"
                   content={
                     copyStatus.plain === 'success'
@@ -641,6 +674,7 @@ const ChatBubble: React.FC<Props> = ({
 
               {shouldShowCopyRawButton && (
                 <Tooltip
+                  {...bubbleAddonTooltipProps}
                   placement="bottom"
                   content={
                     copyStatus.raw === 'success'
@@ -700,6 +734,7 @@ const ChatBubble: React.FC<Props> = ({
                     m.properties?.functionCache === 'true'
                 ) && (
                   <Tooltip
+                    {...bubbleAddonTooltipProps}
                     placement="bottom"
                     content={t('functionCache') || 'Function cache'}
                     className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
@@ -733,9 +768,11 @@ const ChatBubble: React.FC<Props> = ({
 
               {message.generatedByAI && showAIicon && (
                 <Tooltip
+                  {...bubbleAddonTooltipProps}
                   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 +782,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>
@@ -754,6 +792,7 @@ const ChatBubble: React.FC<Props> = ({
                 message.translatedText &&
                 message.translatedText !== message.text && (
                   <Tooltip
+                    {...bubbleAddonTooltipProps}
                     placement="bottom"
                     content={`${
                       lang === 'it' ? 'Testo originale' : 'Original text'
@@ -780,6 +819,7 @@ const ChatBubble: React.FC<Props> = ({
                 apiUrl &&
                 showWhyThisAnswer && (
                   <Tooltip
+                    {...bubbleAddonTooltipProps}
                     placement="bottom"
                     content={t('whyThisAnswer') || 'Why this answer?'}
                   >
@@ -800,6 +840,31 @@ const ChatBubble: React.FC<Props> = ({
           )}
           </div>
 
+          {!message.fromUser && (
+            <div
+              className={cx('memori-chat--artifact-block', {
+                'memori-chat--artifact-block--chatlog': isChatlogPanel,
+              })}
+            >
+              <ArtifactHandler
+                isChatlogPanel={isChatlogPanel}
+                message={message}
+              />
+            </div>
+          )}
+
+          <MediaWidget
+            simulateUserPrompt={simulateUserPrompt}
+            media={codeMediaWidgetMedia}
+            sessionID={sessionID}
+            baseUrl={baseUrl}
+            apiUrl={apiUrl}
+            translateTo={translateTo}
+            customMediaRenderer={customMediaRenderer}
+            fromUser={message.fromUser}
+          />
+          </div>
+
           {message.fromUser && renderUserAvatar()}
         </div>
       </div>
@@ -817,12 +882,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}