@memori.ai/memori-react 6.8.2 → 6.8.4

package/src/components/Chat/Chat.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, memo } from 'react';
+import React, { useEffect, memo, useState } from 'react';
 import cx from 'classnames';
 import {
   DialogState,
   ExpertReference,
+  Medium,
   Memori,
   Message,
   Tenant,
@@ -14,13 +15,12 @@ import ChatBubble from '../ChatBubble/ChatBubble';
 import MediaWidget, {
   Props as MediaWidgetProps,
 } from '../MediaWidget/MediaWidget';
-import Button from '../ui/Button';
 import { Props as MemoriProps } from '../MemoriWidget/MemoriWidget';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import ChatInputs from '../ChatInputs/ChatInputs';
 import Typing from '../Typing/Typing';
 import { boardOfExpertsLoadingSentences } from '../../helpers/constants';
-
+import ArtifactHandler from '../MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler';
 export interface Props {
   memori: Memori;
   tenant?: Tenant;
@@ -34,15 +34,16 @@ export interface Props {
   history: Message[];
   authToken?: string;
   dialogState?: DialogState;
-  setDialogState: (dialogState: DialogState) => void;
   pushMessage: (message: Message) => void;
   simulateUserPrompt: (text: string, translatedText?: string) => void;
   showDates?: boolean;
+  showUpload?: boolean;
   showContextPerLine?: boolean;
   showAIicon?: boolean;
+  showTranslationOriginal?: boolean;
   showWhyThisAnswer?: boolean;
-  client: ReturnType<typeof memoriApiClient>;
-  selectReceiverTag: (tag: string) => Promise<void>;
+  showReasoning?: boolean;
+  client?: ReturnType<typeof memoriApiClient>;
   preview?: boolean;
   microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   sendOnEnter?: 'keypress' | 'click';
@@ -50,22 +51,27 @@ export interface Props {
   attachmentsMenuOpen?: 'link' | 'media';
   setAttachmentsMenuOpen: (attachmentsMenuOpen: 'link' | 'media') => void;
   instruct?: boolean;
+  showCopyButton?: boolean;
   showInputs?: boolean;
   showMicrophone?: boolean;
   userMessage?: string;
   onChangeUserMessage: (userMessage: string) => void;
-  sendMessage: (msg: string) => void;
+  sendMessage: (msg: string, media?: (Medium & { type: string })[]) => void;
   listening?: boolean;
+  setEnableFocusChatInput: (enableFocusChatInput: boolean) => void;
   isPlayingAudio?: boolean;
   stopAudio: () => void;
   startListening: () => void;
   stopListening: () => void;
-  resetTranscript: () => void;
   customMediaRenderer?: MediaWidgetProps['customMediaRenderer'];
-  layout: MemoriProps['layout'];
+  layout?: MemoriProps['layout'];
   userAvatar?: MemoriProps['userAvatar'];
   user?: User;
   experts?: ExpertReference[];
+  useMathFormatting?: boolean;
+  isHistoryView?: boolean;
+  isChatlogPanel?: boolean;
+  showFunctionCache?: boolean;
 }
 
 const Chat: React.FC<Props> = ({
@@ -74,6 +80,7 @@ const Chat: React.FC<Props> = ({
   sessionID,
   baseUrl,
   apiUrl,
+  client,
   translateTo,
   memoriTyping,
   typingText,
@@ -86,7 +93,9 @@ const Chat: React.FC<Props> = ({
   showContextPerLine = false,
   showAIicon = true,
   showWhyThisAnswer = true,
-  selectReceiverTag,
+  showCopyButton = true,
+  showTranslationOriginal = false,
+  showReasoning = false,
   preview = false,
   instruct = false,
   showInputs = true,
@@ -100,34 +109,43 @@ const Chat: React.FC<Props> = ({
   onChangeUserMessage,
   sendMessage,
   listening,
+  setEnableFocusChatInput,
   isPlayingAudio,
   stopAudio,
   startListening,
   stopListening,
-  resetTranscript,
   customMediaRenderer,
   user,
   userAvatar,
+  showUpload = false,
   experts,
+  useMathFormatting = false,
+  isHistoryView = false,
+  isChatlogPanel = false,
+  showFunctionCache = false,
 }) => {
   const scrollToBottom = () => {
+    if (isHistoryView) return;
     setTimeout(() => {
-      document
-        .querySelector('.memori-chat--content')
-        ?.scrollTo(
-          0,
-          document.querySelector('.memori-chat--content')?.scrollHeight ?? 0
-        );
+      let userMsgs = document.querySelectorAll(
+        '.memori-chat--bubble-container.memori-chat--bubble-from-user'
+      );
+      userMsgs[userMsgs.length - 1]?.scrollIntoView?.();
     }, 200);
   };
   useEffect(() => {
-    !preview && scrollToBottom();
-  }, [history, preview]);
+    !preview && !isHistoryView && scrollToBottom();
+  }, [history, preview, isHistoryView]);
 
   const onTextareaFocus = () => {
     stopListening();
-    if (hasTouchscreen() && window.innerWidth <= 768) {
+    const hasTouch = hasTouchscreen();
+
+    if (hasTouch) setEnableFocusChatInput(true);
+    // if the user is on mobile and had not recorded audio, add the chat-focused class to the chat wrapper
+    if (hasTouch && window.innerWidth <= 768) {
       document.getElementById('chat-wrapper')?.classList?.add('chat-focused');
+      // add the chat-focused class to the memori widget
       document
         .querySelector('.memori.memori-widget')
         ?.classList?.add('chat-focused');
@@ -149,14 +167,6 @@ const Chat: React.FC<Props> = ({
       scrollToBottom();
     }
   };
-  const onTextareaPressEnter = () => {
-    if (sendOnEnter === 'keypress' && userMessage?.length > 0) {
-      stopListening();
-      sendMessage(userMessage);
-      onChangeUserMessage('');
-      resetTranscript();
-    }
-  };
 
   return (
     <div
@@ -182,13 +192,13 @@ const Chat: React.FC<Props> = ({
             style={{
               backgroundImage: `url("${getResourceUrl({
                 type: 'cover',
-                tenantID: tenant?.id,
+                tenantID: tenant?.name,
                 resourceURI: memori.coverURL,
                 baseURL: baseUrl,
                 apiURL: apiUrl,
               })}"), url("${getResourceUrl({
                 type: 'cover',
-                tenantID: tenant?.id,
+                tenantID: tenant?.name,
                 baseURL: baseUrl || 'https://www.aisuru.com',
                 apiURL: apiUrl,
               })}")`,
@@ -196,18 +206,31 @@ const Chat: React.FC<Props> = ({
           />
 
           {history.map((message, index) => (
-            <React.Fragment key={index}>
+            <React.Fragment
+              key={`${index}-${
+                message.text?.includes('<document_attachment')
+                  ? 'has-attachments'
+                  : 'no-attachments'
+              }-${message.timestamp}`}
+            >
               <ChatBubble
+                key={`chatbubble-${index}-${
+                  message.text?.includes('<document_attachment')
+                    ? 'has-attachments'
+                    : 'no-attachments'
+                }-${message.timestamp}`}
                 isFirst={index === 0}
                 message={message}
                 memori={memori}
                 tenant={tenant}
+                client={client}
                 baseUrl={baseUrl}
                 apiUrl={apiUrl}
                 sessionID={sessionID}
                 simulateUserPrompt={simulateUserPrompt}
                 showAIicon={showAIicon}
                 showWhyThisAnswer={showWhyThisAnswer}
+                showTranslationOriginal={showTranslationOriginal}
                 showFeedback={
                   index === history.length - 1 &&
                   !message.fromUser &&
@@ -216,7 +239,12 @@ const Chat: React.FC<Props> = ({
                 user={user}
                 userAvatar={userAvatar}
                 experts={experts}
+                showCopyButton={showCopyButton}
+                useMathFormatting={useMathFormatting}
+                showFunctionCache={showFunctionCache}
+                showReasoning={showReasoning}
               />
+
               {showDates && !!message.timestamp && (
                 <small
                   className={`memori-chat--timestamp ${
@@ -236,6 +264,7 @@ const Chat: React.FC<Props> = ({
                   )}
                 </small>
               )}
+
               {showContextPerLine &&
                 !!Object.keys(message.contextVars ?? {}).length && (
                   <div className="memori-chat--context-vars">
@@ -268,16 +297,69 @@ const Chat: React.FC<Props> = ({
 
               <MediaWidget
                 simulateUserPrompt={simulateUserPrompt}
-                media={message?.media?.filter(
-                  m => m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
-                )}
+                media={[
+                  // Filter out HTML and plain text media items from the message
+                  ...(message?.media?.filter(
+                    m =>
+                      m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
+                  ) || []),
+
+                  // Extract document attachments that are embedded in the message text
+                  ...(() => {
+                    // Get the translated or original message text
+                    const text = message.translatedText || message.text;
+
+                    // Regex to match document attachments in format:
+                    // <document_attachment filename="name.ext" type="mime/type">content</document_attachment>
+                    const documentAttachmentRegex =
+                      /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
+
+                    const attachments: (Medium & { type?: string })[] = [];
+                    let match;
+
+                    // Find all document attachments in the text
+                    while (
+                      (match = documentAttachmentRegex.exec(text)) !== null
+                    ) {
+                      const [, filename, type, content] = match;
+
+                      // Create a Medium object for each attachment with:
+                      // - Unique ID using timestamp and random string
+                      // - Empty URL since content is embedded
+                      // - Original mime type and filename
+                      // - Trimmed content from the attachment
+                      // - Properties to mark it as a document attachment
+                      attachments.push({
+                        mediumID: `doc_${Date.now()}_${Math.random()
+                          .toString(36)
+                          .substr(2, 9)}`,
+                        url: '',
+                        mimeType: type,
+                        title: filename,
+                        content: content.trim(),
+                        properties: { isDocumentAttachment: true },
+                        type: 'document',
+                      });
+                    }
+
+                    return attachments;
+                  })(),
+                ]}
                 links={message?.media?.filter(m => m.mimeType === 'text/html')}
                 sessionID={sessionID}
                 baseUrl={baseUrl}
                 apiUrl={apiUrl}
                 translateTo={translateTo}
                 customMediaRenderer={customMediaRenderer}
+                fromUser={message.fromUser}
               />
+
+              {!isHistoryView && (
+                <ArtifactHandler
+                  isChatlogPanel={isChatlogPanel}
+                  message={message}
+                />
+              )}
             </React.Fragment>
           ))}
 
@@ -322,29 +404,6 @@ const Chat: React.FC<Props> = ({
         </div>
       </div>
 
-      {/*
-       * TODO: X2a emoji picker
-       */}
-
-      {dialogState?.state === 'X3' && sessionID && (
-        <div className="memori-chat--known-tags">
-          {Object.keys(dialogState.knownTags ?? {})
-            .filter(t => t !== memori.giverTag)
-            .map(tag => (
-              <Button
-                key={tag}
-                icon={
-                  <span className="memori-chat--known-tag-icon">{tag}</span>
-                }
-                className="memori-chat--known-tag"
-                onClick={() => selectReceiverTag(tag)}
-              >
-                {dialogState.knownTags?.[tag]}
-              </Button>
-            ))}
-        </div>
-      )}
-
       {showInputs && (
         <ChatInputs
           userMessage={userMessage}
@@ -356,9 +415,11 @@ const Chat: React.FC<Props> = ({
           microphoneMode={microphoneMode}
           sendOnEnter={sendOnEnter}
           setSendOnEnter={setSendOnEnter}
+          client={client}
+          sessionID={sessionID}
+          showUpload={showUpload}
           attachmentsMenuOpen={attachmentsMenuOpen}
           setAttachmentsMenuOpen={setAttachmentsMenuOpen}
-          onTextareaPressEnter={onTextareaPressEnter}
           onTextareaFocus={onTextareaFocus}
           onTextareaBlur={onTextareaBlur}
           startListening={startListening}
@@ -367,6 +428,7 @@ const Chat: React.FC<Props> = ({
           listening={listening}
           isPlayingAudio={isPlayingAudio}
           showMicrophone={showMicrophone}
+          memoriID={memori?.memoriID}
         />
       )}
     </div>