@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/ChatBubble/ChatBubble.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import cx from 'classnames';
 import {
   ExpertReference,
@@ -12,19 +12,33 @@ import { Transition } from '@headlessui/react';
 import { getResourceUrl } from '../../helpers/media';
 import UserIcon from '../icons/User';
 import AI from '../icons/AI';
+import Translation from '../icons/Translation';
 import Tooltip from '../ui/Tooltip';
 import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
-import { marked } from 'marked';
-import { sanitize } from 'dompurify';
-import { cleanUrl } from '../../helpers/utils';
 import Button from '../ui/Button';
 import QuestionHelp from '../icons/QuestionHelp';
+import Copy from '../icons/Copy';
+import Code from '../icons/Code';
+import Bug from '../icons/Bug';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
+import { stripHTML, stripOutputTags } from '../../helpers/utils';
+import { renderMsg, truncateMessage } from '../../helpers/message';
+import Expandable from '../ui/Expandable';
+import Modal from '../ui/Modal';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
-import markedLinkifyIt from 'marked-linkify-it';
-import markedKatex from 'marked-katex-extension';
-import markedExtendedTables from '../../helpers/markedExtendedTables';
+// Always import and load MathJax
+import { installMathJax } from '../../helpers/utils';
+
+// Import MathJax types
+declare global {
+  interface Window {
+    MathJax?: {
+      typesetPromise?: (elements: string[]) => Promise<void>;
+    };
+  }
+}
 
 export interface Props {
   message: Message;
@@ -33,106 +47,115 @@ export interface Props {
   tenant?: Tenant;
   baseUrl?: string;
   apiUrl?: string;
+  client?: ReturnType<typeof memoriApiClient>;
   showFeedback?: boolean;
   showWhyThisAnswer?: boolean;
+  showCopyButton?: boolean;
+  showTranslationOriginal?: boolean;
   simulateUserPrompt?: (msg: string) => void;
   showAIicon?: boolean;
+  useMathFormatting?: boolean;
   isFirst?: boolean;
   userAvatar?: MemoriProps['userAvatar'];
   user?: User;
   experts?: ExpertReference[];
+  showFunctionCache?: boolean;
+  showReasoning?: boolean;
 }
 
-marked.use({
-  async: false,
-  gfm: true,
-  pedantic: true,
-  renderer: {
-    link(href: string, title: string | null | undefined, text: string) {
-      const cleanHref = cleanUrl(href);
-      if (cleanHref === null) {
-        return text;
-      }
-      href = cleanHref;
-      let out = '<a href="' + href + '"';
-      if (title) {
-        out += ' title="' + title + '"';
-      }
-      out += ' target="_blank" rel="noopener noreferrer">' + text + '</a>';
-      return out;
-    },
-  },
-});
-marked.use(markedLinkifyIt());
-marked.use(
-  markedKatex({
-    throwOnError: true,
-    output: 'htmlAndMathml',
-  })
-);
-marked.use(markedExtendedTables());
-
 const ChatBubble: React.FC<Props> = ({
   message,
   memori,
   tenant,
   baseUrl,
   apiUrl,
+  client,
   sessionID,
   showFeedback,
   showWhyThisAnswer = true,
+  showCopyButton = true,
+  showTranslationOriginal = false,
   simulateUserPrompt,
   showAIicon = true,
   isFirst = false,
+  useMathFormatting = false,
   user,
   userAvatar,
   experts,
+  showFunctionCache = false,
+  showReasoning = false,
 }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
+  const [openFunctionCache, setOpenFunctionCache] = useState(false);
+  // Initialize MathJax on component mount
+  useEffect(() => {
+    if (typeof window !== 'undefined' && !window.MathJax) {
+      installMathJax();
+    }
+  }, []);
 
-  const renderedText = message.fromUser
-    ? message.translatedText || message.text
-    : sanitize(
-        (
-          marked.parse(
-            (message.translatedText || message.text)
-              // remove markdown links
-              .replaceAll(
-                /\[([^\]]+)\]\([^)]+\)/g,
-                '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
-              )
-              .replaceAll('(', '\\(')
-              .replaceAll(')', '\\)')
-              .replaceAll(/(?<!\\)\(/g, '\\(')
-              .replaceAll(/(?<!\\)\)/g, '\\)')
-          ) as string
-        )
-          .trim()
-          .replace(/\n/g, '<br>')
-          // replace consecutive <br> with a <br>
-          .replace(/(<br>)+/g, '<br><br>'),
-        {
-          ADD_ATTR: ['target'],
-        }
-      )
-        .replaceAll(/(?<!\\)\[/g, '\\[')
-        .replaceAll(/(?<!\\)\]/g, '\\]')
-        // .replaceAll(/(?<!\\\\)\[/g, '\\\\[')
-        // .replaceAll(/(?<!\\\\)\]/g, '\\\\]')
-        // replace consecutive <br> with a single <br>
-        .replace(/(<br>)+/g, '<br>');
+  // Clean text by removing document_attachment tags before rendering
+  const cleanText = (message.translatedText || message.text).replace(
+    /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g,
+    ''
+  );
+  const { text: renderedText } = renderMsg(
+    cleanText,
+    useMathFormatting,
+    t('reasoning') || 'Reasoning...',
+    showReasoning
+  );
+  const plainText = message.fromUser
+    ? truncateMessage(cleanText)
+    : stripHTML(stripOutputTags(renderedText));
+
+  // Format function cache content
+  const functionCacheData = message.media?.filter(
+    m => m.properties?.functionCache === 'true'
+  );
 
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {
-      // @ts-ignore
-      // eslint-disable-next-line no-undef
-      if ('MathJax' in window && window.MathJax.typesetPromise)
-        // @ts-ignore
-        // eslint-disable-next-line no-undef
-        window.MathJax.typesetPromise(['.memori-chat--bubble-content']);
+      const timer = setTimeout(() => {
+        if (window.MathJax && window.MathJax.typesetPromise) {
+          try {
+            const elements = document.querySelectorAll(
+              '.memori-chat--bubble-content'
+            );
+            if (elements.length > 0) {
+              // Salva la posizione di scroll corrente
+              const scrollContainer = document.querySelector(
+                '.memori-chat--history'
+              );
+              const currentScrollTop = scrollContainer?.scrollTop || 0;
+              const currentScrollHeight = scrollContainer?.scrollHeight || 0;
+
+              window.MathJax.typesetPromise(['.memori-chat--bubble-content'])
+                .then(() => {
+                  // Ripristina la posizione di scroll dopo il rendering MathJax
+                  if (scrollContainer) {
+                    const newScrollHeight = scrollContainer.scrollHeight;
+                    const heightDifference =
+                      newScrollHeight - currentScrollHeight;
+                    scrollContainer.scrollTop =
+                      currentScrollTop + heightDifference;
+                  }
+                })
+                .catch(err =>
+                  console.error('MathJax typesetting failed:', err)
+                );
+            }
+          } catch (error) {
+            console.error('Error during MathJax typesetting:', error);
+          }
+        }
+      }, 100);
+
+      return () => clearTimeout(timer);
     }
-  }, [message.text, message.fromUser]);
+  }, [cleanText, message.fromUser, renderedText]);
 
   return (
     <>
@@ -181,36 +204,39 @@ const ChatBubble: React.FC<Props> = ({
                 !!message.emitter?.length &&
                 !!memori.enableBoardOfExperts &&
                 experts?.find(e => e.name === message.emitter)
-                  ? `${apiUrl}/api/v1/memoriai/memori/avatar/${
+                  ? `${
+                      new URL(apiUrl ?? '/').origin
+                    }/api/v1/memoriai/memori/avatar/${
                       experts.find(e => e.name === message.emitter)
                         ?.expertMemoriID
                     }`
                   : memori.avatarURL && memori.avatarURL.length > 0
                   ? getResourceUrl({
                       type: 'avatar',
-                      tenantID: tenant?.id,
+                      tenantID: tenant?.name,
                       resourceURI: memori.avatarURL,
                       baseURL: baseUrl,
                       apiURL: apiUrl,
                     })
                   : getResourceUrl({
-                      tenantID: tenant?.id,
+                      tenantID: tenant?.name,
                       type: 'avatar',
                       baseURL: baseUrl || 'https://www.aisuru.com',
                       apiURL: apiUrl,
                     })
               }
               onError={e => {
+                // Fallback image handling if primary source fails
                 e.currentTarget.src =
                   memori.avatarURL && memori.avatarURL.length > 0
                     ? getResourceUrl({
                         type: 'avatar',
-                        tenantID: tenant?.id,
+                        tenantID: tenant?.name,
                         resourceURI: memori.avatarURL,
                         baseURL: baseUrl,
                       })
                     : getResourceUrl({
-                        tenantID: tenant?.id,
+                        tenantID: tenant?.name,
                         type: 'avatar',
                         baseURL: baseUrl,
                       });
@@ -220,11 +246,13 @@ const ChatBubble: React.FC<Props> = ({
             />
           </Transition.Child>
         )}
+
         <Transition.Child
           as="div"
           className={cx('memori-chat--bubble', {
             'memori-chat--user-bubble': !!message.fromUser,
             'memori-chat--with-addon':
+              (!message.fromUser && showCopyButton) ||
               (message.generatedByAI && showAIicon) ||
               (showFeedback && simulateUserPrompt),
             'memori-chat--ai-generated': message.generatedByAI && showAIicon,
@@ -241,14 +269,73 @@ const ChatBubble: React.FC<Props> = ({
             message.fromUser ? '30' : '-30'
           }`}
         >
-          <div
-            dir="auto"
-            className="memori-chat--bubble-content"
-            dangerouslySetInnerHTML={{ __html: renderedText }}
-          />
-          {((message.generatedByAI && showAIicon) ||
+          {message.fromUser ? (
+            <Expandable
+              className="memori-chat--bubble-content"
+              mode="characters"
+            >
+              <div
+                dir="auto"
+                className="memori-chat--bubble-content"
+                dangerouslySetInnerHTML={{ __html: renderedText }}
+              />
+            </Expandable>
+          ) : (
+            <div
+              dir="auto"
+              className="memori-chat--bubble-content"
+              dangerouslySetInnerHTML={{ __html: renderedText }}
+            />
+          )}
+
+          {((!message.fromUser && showCopyButton) ||
+            (message.generatedByAI && showAIicon) ||
+            (message.generatedByAI && showFunctionCache) ||
             (showFeedback && simulateUserPrompt)) && (
             <div className="memori-chat--bubble-addon">
+              {!message.fromUser && showCopyButton && (
+                <Button
+                  ghost
+                  shape="circle"
+                  title={t('copy') || 'Copy'}
+                  className="memori-chat--bubble-action-icon"
+                  icon={<Copy aria-label={t('copy') || 'Copy'} />}
+                  onClick={() => navigator.clipboard.writeText(plainText)}
+                />
+              )}
+
+              {!message.fromUser &&
+                showCopyButton &&
+                plainText !== message.text && (
+                  <Button
+                    ghost
+                    shape="circle"
+                    title={t('copyRawCode') || 'Copy raw code'}
+                    className="memori-chat--bubble-action-icon"
+                    icon={
+                      <Code aria-label={t('copyRawCode') || 'Copy raw code'} />
+                    }
+                    onClick={() => navigator.clipboard.writeText(message.text)}
+                  />
+                )}
+
+              {!message.fromUser &&
+                showFunctionCache &&
+                message.media?.some(
+                  m =>
+                    Boolean(m.properties?.functionCache) ||
+                    m.properties?.functionCache === 'true'
+                ) && (
+                  <Button
+                    ghost
+                    shape="circle"
+                    title="Debug"
+                    className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--debug"
+                    icon={<Bug aria-label="Debug" />}
+                    onClick={() => setOpenFunctionCache(true)}
+                  />
+                )}
+
               {showFeedback && !!simulateUserPrompt && (
                 <FeedbackButtons
                   memori={memori}
@@ -263,15 +350,47 @@ const ChatBubble: React.FC<Props> = ({
               {message.generatedByAI && showAIicon && (
                 <Tooltip
                   align="left"
-                  content={t('generatedByAI')}
+                  content={
+                    t('generatedByAI') ||
+                    (lang === 'it'
+                      ? 'Risposta generata da IA, può talvolta generare informazioni non corrette'
+                      : 'Answer generated by AI, may occasionally generate incorrect informations')
+                  }
                   className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
                 >
                   <span>
-                    <AI title={t('generatedByAI') || undefined} />
+                    <AI
+                      title={
+                        t('generatedByAI') ||
+                        (lang === 'it'
+                          ? 'Risposta generata da IA, può talvolta generare informazioni non corrette'
+                          : 'Answer generated by AI, may occasionally generate incorrect informations')
+                      }
+                    />
                   </span>
                 </Tooltip>
               )}
 
+              {showTranslationOriginal &&
+                message.translatedText &&
+                message.translatedText !== message.text && (
+                  <Tooltip
+                    align="left"
+                    content={`${
+                      lang === 'it' ? 'Testo originale' : 'Original text'
+                    }: ${message.text}`}
+                    className="memori-chat--bubble-action-icon memori-chat--bubble-action-icon--ai"
+                  >
+                    <span>
+                      <Translation
+                        aria-label={
+                          lang === 'it' ? 'Testo originale' : 'Original text'
+                        }
+                      />
+                    </span>
+                  </Tooltip>
+                )}
+
               {!message.fromUser &&
                 message.questionAnswered &&
                 apiUrl &&
@@ -355,15 +474,48 @@ const ChatBubble: React.FC<Props> = ({
         )}
       </Transition>
 
-      {showingWhyThisAnswer && apiUrl && (
+      {/* Document attachments are extracted and passed to Chat.tsx for rendering */}
+
+      {showingWhyThisAnswer && client && (
         <WhyThisAnswer
+          client={client}
           visible={showingWhyThisAnswer}
           message={message}
           closeDrawer={() => setShowingWhyThisAnswer(false)}
-          apiURL={apiUrl}
           sessionID={sessionID}
         />
       )}
+
+      <Modal
+        open={openFunctionCache}
+        onClose={() => setOpenFunctionCache(false)}
+        className="memori-chat--function-cache-modal"
+      >
+        {functionCacheData?.map((f, i) => (
+          <div
+            key={f.mediumID}
+            style={
+              i > 0
+                ? {
+                    marginTop: '1.5rem',
+                    paddingTop: '1.5rem',
+                    borderTop: '1px solid #e0e0e0',
+                  }
+                : {
+                    paddingTop: '1.5rem',
+                  }
+            }
+          >
+            <h3 style={{ marginTop: 0 }}>{f.title}</h3>
+            <pre
+              key={f.mediumID}
+              style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}
+            >
+              {f.content}
+            </pre>
+          </div>
+        ))}
+      </Modal>
     </>
   );
 };