@memori.ai/memori-react 7.32.5 → 7.32.7

package/src/components/ChatBubble/ChatBubble.tsx

@@ -28,6 +28,7 @@ import { renderMsg, truncateMessage } from '../../helpers/message';
 import Expandable from '../ui/Expandable';
 import Modal from '../ui/Modal';
 import MediaWidget from '../MediaWidget/MediaWidget';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 // Always import and load MathJax
 import { installMathJax } from '../../helpers/utils';
@@ -48,6 +49,7 @@ export interface Props {
   tenant?: Tenant;
   baseUrl?: string;
   apiUrl?: string;
+  client?: ReturnType<typeof memoriApiClient>;
   showFeedback?: boolean;
   showWhyThisAnswer?: boolean;
   showCopyButton?: boolean;
@@ -68,6 +70,7 @@ const ChatBubble: React.FC<Props> = ({
   tenant,
   baseUrl,
   apiUrl,
+  client,
   sessionID,
   showFeedback,
   showWhyThisAnswer = true,
@@ -86,7 +89,9 @@ const ChatBubble: React.FC<Props> = ({
   const lang = i18n.language || 'en';
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
   const [openFunctionCache, setOpenFunctionCache] = useState(false);
-  const [documentAttachments, setDocumentAttachments] = useState<(Medium & { type?: string })[]>([]);
+  const [documentAttachments, setDocumentAttachments] = useState<
+    (Medium & { type?: string })[]
+  >([]);
 
   // Initialize MathJax on component mount
   useEffect(() => {
@@ -98,14 +103,17 @@ const ChatBubble: React.FC<Props> = ({
   // Extract document attachments from text and convert them to media
   useEffect(() => {
     const text = message.translatedText || message.text;
-    const documentAttachmentRegex = /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
+    const documentAttachmentRegex =
+      /<document_attachment filename="([^"]+)" type="([^"]+)">([\s\S]*?)<\/document_attachment>/g;
     const attachments: (Medium & { type?: string })[] = [];
     let match;
 
     while ((match = documentAttachmentRegex.exec(text)) !== null) {
       const [, filename, type, content] = match;
       attachments.push({
-        mediumID: `doc_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        mediumID: `doc_${Date.now()}_${Math.random()
+          .toString(36)
+          .substr(2, 9)}`,
         url: '',
         mimeType: type,
         title: filename,
@@ -137,6 +145,24 @@ const ChatBubble: React.FC<Props> = ({
     m => m.properties?.functionCache === 'true'
   );
 
+  // Filter out media items that are already being rendered as document attachments
+  // to prevent duplicate rendering
+  const filteredMedia =
+    message.media?.filter(mediaItem => {
+      // If this is a document attachment (has isAttachedFile property),
+      // don't render it in the regular media widget
+      if (mediaItem.properties?.isAttachedFile) {
+        return false;
+      }
+      return true;
+    }) || [];
+
+  // Filter out HTML and plain text from regular media
+  const regularMedia = filteredMedia.filter(
+    m => m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
+  );
+  const links = filteredMedia.filter(m => m.mimeType === 'text/html');
+
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {
       const timer = setTimeout(() => {
@@ -178,8 +204,6 @@ const ChatBubble: React.FC<Props> = ({
     }
   }, [cleanText, message.fromUser, renderedText]);
 
-  console.log('media',message?.media);
-
   return (
     <>
       {(message.initial || isFirst) && (
@@ -509,12 +533,10 @@ const ChatBubble: React.FC<Props> = ({
       )}
 
       {/* Render existing media */}
-      {message.media && message.media.length > 0 && (
+      {regularMedia.length > 0 && (
         <MediaWidget
-          media={message.media.filter(
-            m => m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
-          )}
-          links={message.media.filter(m => m.mimeType === 'text/html')}
+          media={regularMedia}
+          links={links}
           sessionID={sessionID}
           baseUrl={baseUrl}
           apiUrl={apiUrl}
@@ -522,12 +544,12 @@ const ChatBubble: React.FC<Props> = ({
         />
       )}
 
-      {showingWhyThisAnswer && apiUrl && (
+      {showingWhyThisAnswer && client && (
         <WhyThisAnswer
+          client={client}
           visible={showingWhyThisAnswer}
           message={message}
           closeDrawer={() => setShowingWhyThisAnswer(false)}
-          apiURL={apiUrl}
           sessionID={sessionID}
         />
       )}

package/src/components/ChatBubble/__snapshots__/ChatBubble.test.tsx.snap

@@ -6803,9 +6803,6 @@ exports[`renders ChatBubble with debug button unchanged 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="memori-media-widget"
-  />
 </div>
 `;
 

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -378,7 +378,7 @@ const ChatHistoryDrawer = ({
   history,
 }: Props) => {
   const { t } = useTranslation();
-  const { getChatLogsByUser, getSessionChatLogs } = apiClient.chatLogs;
+  const { getChatLogsByUser } = apiClient.chatLogs;
 
   const textCurrentChat = `${t(
     'write_and_speak.conversationStartedLabel'

package/src/components/ChatInputs/ChatInputs.tsx

@@ -19,10 +19,7 @@ export interface Props {
   setAttachmentsMenuOpen: (attachmentsMenuOpen: 'link' | 'media') => void;
   userMessage?: string;
   onChangeUserMessage: (userMessage: string) => void;
-  sendMessage: (
-    msg: string,
-    media?: (Medium & { type: string })[]
-  ) => void;
+  sendMessage: (msg: string, media?: (Medium & { type: string })[]) => void;
   onTextareaFocus: () => void;
   onTextareaBlur: () => void;
   resetTranscript: () => void;
@@ -36,8 +33,8 @@ export interface Props {
   authToken?: string;
   showUpload?: boolean;
   sessionID?: string;
-  apiURL?: string;
   memoriID?: string;
+  client?: ReturnType<typeof memoriApiClient>;
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -58,8 +55,8 @@ const ChatInputs: React.FC<Props> = ({
   showUpload = false,
   sessionID,
   authToken,
-  apiURL,
   memoriID,
+  client,
 }) => {
   const { t } = useTranslation();
 
@@ -77,7 +74,6 @@ const ChatInputs: React.FC<Props> = ({
   >([]);
 
   // Client
-  const client = apiURL ? memoriApiClient(apiURL) : null;
   const { dialog } = client || {
     dialog: { postMediumDeselectedEvent: null },
   };
@@ -191,7 +187,7 @@ const ChatInputs: React.FC<Props> = ({
           {/* Replace the individual buttons with our unified upload component */}
           <UploadButton
             authToken={authToken}
-            apiUrl={apiURL}
+            client={client}
             sessionID={sessionID}
             isMediaAccepted={dialogState?.acceptsMedia || false}
             setDocumentPreviewFiles={setDocumentPreviewFiles}

package/src/components/UploadButton/UploadButton.tsx

@@ -8,6 +8,7 @@ import cx from 'classnames';
 import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 // Constants
 const MAX_IMAGES = 5;
@@ -16,7 +17,7 @@ const MAX_DOCUMENTS = 1;
 // Props interface
 interface UploadManagerProps {
   authToken?: string;
-  apiUrl?: string;
+  client?: ReturnType<typeof memoriApiClient>;
   sessionID?: string;
   isMediaAccepted?: boolean;
   setDocumentPreviewFiles: any;
@@ -32,7 +33,7 @@ interface UploadManagerProps {
 
 const UploadButton: React.FC<UploadManagerProps> = ({
   authToken = '',
-  apiUrl = '',
+  client,
   sessionID = '',
   isMediaAccepted = false,
   setDocumentPreviewFiles,
@@ -163,8 +164,6 @@ ${file.content}
 
   // When image option is clicked
   const handleImageClick = () => {
-
-
     if (!isMediaAccepted) {
       addError({
         message:
@@ -262,11 +261,11 @@ ${file.content}
           <div
             className={cx('memori--upload-menu-item', {
               'memori--upload-menu-item--disabled':
-                 !isMediaAccepted || hasReachedImageLimit,
+                !isMediaAccepted || hasReachedImageLimit,
             })}
             onClick={handleImageClick}
             title={
-                !isMediaAccepted
+              !isMediaAccepted
                 ? t('upload.mediaNotAccepted') ?? 'Media uploads not accepted'
                 : hasReachedImageLimit
                 ? t('upload.maxImagesReached', { max: MAX_IMAGES }) ??
@@ -307,7 +306,7 @@ ${file.content}
       <div className="memori--hidden-uploader" ref={imageRef}>
         <UploadImages
           authToken={authToken}
-          apiUrl={apiUrl}
+          client={client}
           setDocumentPreviewFiles={setDocumentPreviewFiles}
           sessionID={sessionID}
           documentPreviewFiles={documentPreviewFiles}

package/src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -34,7 +34,7 @@ const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
 // Props interface
 interface UploadImagesProps {
   authToken?: string;
-  apiUrl?: string;
+  client?: ReturnType<typeof memoriApiClient>;
   sessionID?: string;
   isMediaAccepted?: boolean;
   setDocumentPreviewFiles: any;
@@ -48,8 +48,8 @@ const ALLOWED_FILE_TYPES = ['.jpg', '.jpeg', '.png'];
 
 const UploadImages: React.FC<UploadImagesProps> = ({
   authToken = '',
-  apiUrl = '',
   sessionID = '',
+  client,
   isMediaAccepted = false,
   setDocumentPreviewFiles,
   documentPreviewFiles,
@@ -59,7 +59,6 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 }) => {
   const { t, i18n } = useTranslation();
   // Client
-  const client = apiUrl ? memoriApiClient(apiUrl) : null;
   const { backend, dialog } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
     dialog: { postMediumSelectedEvent: null, postMediumDeselectedEvent: null },
@@ -187,7 +186,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         const fileDataUrl = e.target?.result as string;
         const fileId = Math.random().toString(36).substr(2, 9);
 
-        if (apiUrl) {
+        if (client) {
           try {
             let asset: Asset;
             let response;

package/src/components/WhyThisAnswer/WhyThisAnswer.stories.tsx

@@ -4,6 +4,7 @@ import { sessionID } from '../../mocks/data';
 import I18nWrapper from '../../I18nWrapper';
 import WhyThisAnswer, { Props } from './WhyThisAnswer';
 import { SearchMatches } from '@memori.ai/memori-api-client/dist/types';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 import './WhyThisAnswer.css';
 
@@ -28,7 +29,7 @@ const Template: Story<Props> = args => (
   <I18nWrapper>
     <WhyThisAnswer
       {...args}
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       message={{
         questionAnswered: 'Test message',

package/src/components/WhyThisAnswer/WhyThisAnswer.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import WhyThisAnswer from './WhyThisAnswer';
 import { sessionID } from '../../mocks/data';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 beforeEach(() => {
   // @ts-ignore
@@ -16,7 +17,7 @@ beforeEach(() => {
 it('renders WhyThisAnswer hidden unchanged', () => {
   const { container } = render(
     <WhyThisAnswer
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       visible={false}
       message={{
@@ -40,7 +41,7 @@ it('renders WhyThisAnswer hidden unchanged', () => {
 it('renders WhyThisAnswer visible unchanged', () => {
   const { container } = render(
     <WhyThisAnswer
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       visible={true}
       message={{
@@ -64,7 +65,7 @@ it('renders WhyThisAnswer visible unchanged', () => {
 it('renders WhyThisAnswer loading unchanged', () => {
   const { container } = render(
     <WhyThisAnswer
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       visible={true}
       message={{
@@ -89,7 +90,7 @@ it('renders WhyThisAnswer loading unchanged', () => {
 it('renders WhyThisAnswer with data unchanged', () => {
   const { container } = render(
     <WhyThisAnswer
-      apiURL="https://backend.memori.ai"
+      client={memoriApiClient()}
       sessionID={sessionID}
       visible={true}
       message={{

package/src/components/WhyThisAnswer/WhyThisAnswer.tsx

@@ -15,12 +15,12 @@ import MediaWidget from '../MediaWidget/MediaWidget';
 import Card from '../ui/Card';
 
 export interface Props {
-  apiURL: string;
   sessionID: string;
   message: Message;
   initialMatches?: SearchMatches[];
   visible?: boolean;
   closeDrawer: () => void;
+  client?: ReturnType<typeof memoriApiClient>;
   _TEST_loading?: boolean;
 }
 
@@ -29,17 +29,16 @@ const addQuestionMark = (question: string) =>
 
 const WhyThisAnswer = ({
   message,
-  apiURL,
   sessionID,
   visible = true,
   initialMatches = [],
   closeDrawer,
+  client,
   _TEST_loading = false,
 }: Props) => {
   const { t } = useTranslation();
 
-  const client = memoriApiClient(apiURL);
-  const searchMemory = client.search.searchMemory;
+  const searchMemory = client?.search.searchMemory;
 
   const [matches, setMatches] = useState<SearchMatches[]>(initialMatches);
   const [loading, setLoading] = useState(_TEST_loading);
@@ -50,7 +49,7 @@ const WhyThisAnswer = ({
   const fetchMemories = useCallback(async () => {
     setLoading(true);
 
-    if (_TEST_loading) return;
+    if (_TEST_loading || !searchMemory) return;
 
     try {
       const { matches, ...response } = await searchMemory(sessionID, {
@@ -189,7 +188,9 @@ const WhyThisAnswer = ({
                 )}
                 {m.memory.answers?.map((a, i) => (
                   <p key={i} className="memori--whythisanswer-answer">
-                    <Expandable mode="rows" rows={3}>{a.text}</Expandable>
+                    <Expandable mode="rows" rows={3}>
+                      {a.text}
+                    </Expandable>
                   </p>
                 ))}