@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/ChatHistoryDrawer/__snapshots__/ChatHistory.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ChatHistoryDrawer closed unchanged 1`] = `<div />`;
+
+exports[`renders ChatHistoryDrawer unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders ChatHistoryDrawer with chat logs unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders ChatHistoryDrawer with selected chat log unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -227,6 +227,11 @@ ContinuousSpeechListening.args = {
   microphoneMode: 'CONTINUOUS',
 };
 
+export const WithUploadButton = Template.bind({});
+WithUploadButton.args = {
+  showUpload: true,
+};
+
 export const WithoutMicrophone = Template.bind({});
 WithoutMicrophone.args = {
   dialogState,

package/src/components/ChatInputs/ChatInputs.test.tsx

@@ -10,7 +10,6 @@ it('renders ChatInputs unchanged', () => {
       userMessage=""
       onChangeUserMessage={jest.fn()}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -33,7 +32,6 @@ it('renders ChatInputs with user message unchanged', () => {
       onChangeUserMessage={jest.fn()}
       dialogState={dialogState}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -59,7 +57,6 @@ it('renders ChatInputs on instruct unchanged', () => {
         acceptsMedia: true,
       }}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -83,7 +80,6 @@ it('renders ChatInputs listening unchanged', () => {
       onChangeUserMessage={jest.fn()}
       dialogState={dialogState}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -106,7 +102,6 @@ it('renders ChatInputs without microphone button unchanged', () => {
       onChangeUserMessage={jest.fn()}
       dialogState={dialogState}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -132,7 +127,6 @@ it('renders ChatInputs disabled unchanged', () => {
         state: 'X3',
       }}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { DialogState } from '@memori.ai/memori-api-client/dist/types';
-import SendOnEnterMenu from '../SendOnEnterMenu/SendOnEnterMenu';
+import React, { useState } from 'react';
+import { DialogState, Medium } from '@memori.ai/memori-api-client/dist/types';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
 import Button from '../ui/Button';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +7,9 @@ import Send from '../icons/Send';
 import MicrophoneButton from '../MicrophoneButton/MicrophoneButton';
 import cx from 'classnames';
 import Microphone from '../icons/Microphone';
-
+import UploadButton from '../UploadButton/UploadButton';
+import FilePreview from '../FilePreview/FilePreview';
+import memoriApiClient from '@memori.ai/memori-api-client';
 export interface Props {
   dialogState?: DialogState;
   instruct?: boolean;
@@ -18,10 +19,9 @@ export interface Props {
   setAttachmentsMenuOpen: (attachmentsMenuOpen: 'link' | 'media') => void;
   userMessage?: string;
   onChangeUserMessage: (userMessage: string) => void;
-  sendMessage: (msg: string) => void;
+  sendMessage: (msg: string, media?: (Medium & { type: string })[]) => void;
   onTextareaFocus: () => void;
   onTextareaBlur: () => void;
-  onTextareaPressEnter: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
   listening?: boolean;
   isPlayingAudio?: boolean;
   stopAudio: () => void;
@@ -30,45 +30,139 @@ export interface Props {
   showMicrophone?: boolean;
   microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   authToken?: string;
+  showUpload?: boolean;
+  sessionID?: string;
+  memoriID?: string;
+  client?: ReturnType<typeof memoriApiClient>;
 }
 
 const ChatInputs: React.FC<Props> = ({
   dialogState,
-  sendOnEnter = 'click',
-  setSendOnEnter,
   userMessage = '',
+  sendOnEnter,
   onChangeUserMessage,
   sendMessage,
   onTextareaFocus,
   onTextareaBlur,
-  onTextareaPressEnter,
   showMicrophone = false,
   microphoneMode = 'HOLD_TO_TALK',
   listening = false,
   stopAudio,
   startListening,
   stopListening,
+  showUpload = false,
+  sessionID,
+  authToken,
+  memoriID,
+  client,
 }) => {
   const { t } = useTranslation();
 
+  // State for document preview files
+  const [documentPreviewFiles, setDocumentPreviewFiles] = useState<
+    {
+      name: string;
+      id: string;
+      content: string;
+      mediumID: string | undefined;
+      mimeType: string;
+      url?: string;
+      type: string;
+    }[]
+  >([]);
+
+  // Client
+  const { dialog } = client || {
+    dialog: { postMediumDeselectedEvent: null },
+  };
+
+  /**
+   * Handles sending a message, including any attached files
+   */
+  const onSendMessage = (
+    files: {
+      name: string;
+      id: string;
+      content: string;
+      mediumID: string | undefined;
+      mimeType: string;
+      type: string;
+      url?: string;
+    }[]
+  ) => {
+    sendMessage(
+      userMessage,
+      files.map(file => ({
+        mediumID: file.mediumID || '',
+        mimeType: file.mimeType,
+        content: file.content,
+        title: file.name,
+        properties: { isAttachedFile: true },
+        type: file.type,
+        url: file.url,
+      }))
+    );
+
+    // Reset states after sending
+    setDocumentPreviewFiles([]);
+    stopAudio();
+    speechSynthesis.speak(new SpeechSynthesisUtterance(''));
+  };
+
+  /**
+   * Handles enter key press in textarea
+   */
+  const onTextareaPressEnter = () => {
+    if (sendOnEnter === 'keypress' && userMessage?.length > 0) {
+      stopListening();
+      sendMessage(
+        userMessage,
+        documentPreviewFiles.map(file => ({
+          mediumID: file.mediumID || '',
+          mimeType: file.mimeType,
+          content: file.content,
+          title: file.name,
+          properties: { isAttachedFile: true },
+          type: file.type,
+          url: file.url,
+        }))
+      );
+
+      setDocumentPreviewFiles([]);
+      onChangeUserMessage('');
+    }
+  };
+
+  /**
+   * Removes a file from the preview list
+   */
+  const removeFile = async (fileId: string, mediumID: string | undefined) => {
+    console.log('removeFile', fileId);
+    // Call the MediumDeselected event if dialog API is available
+    if (dialog.postMediumDeselectedEvent && sessionID && mediumID) {
+      await dialog.postMediumDeselectedEvent(sessionID, mediumID);
+    }
+    setDocumentPreviewFiles(
+      (
+        prev: {
+          name: string;
+          id: string;
+          content: string;
+          mediumID: string | undefined;
+          mimeType: string;
+          type: string;
+          url?: string;
+        }[]
+      ) => prev.filter((file: { id: string }) => file.id !== fileId)
+    );
+  };
+
   return (
     <fieldset
       id="chat-fieldset"
       className="memori-chat-inputs"
       disabled={dialogState?.state === 'X2a' || dialogState?.state === 'X3'}
     >
-      {/*(instruct || dialogState?.acceptsMedia) && (
-        <UploadMenu
-          attachmentsMenuOpen={attachmentsMenuOpen}
-          setAttachmentsMenuOpen={setAttachmentsMenuOpen}
-          authToken={authToken}
-          disabled={!dialogState?.acceptsMedia}
-        />
-      )*/}
-      <SendOnEnterMenu
-        sendOnEnter={sendOnEnter}
-        setSendOnEnter={setSendOnEnter}
-      />
       <ChatTextArea
         value={userMessage}
         onChange={onChangeUserMessage}
@@ -79,15 +173,33 @@ const ChatInputs: React.FC<Props> = ({
           dialogState?.state || ''
         )}
       />
+      {/* Preview for document files */}
+      {showUpload && (
+        <>
+          <FilePreview
+            previewFiles={documentPreviewFiles}
+            removeFile={removeFile}
+          />
+
+          {/* Replace the individual buttons with our unified upload component */}
+          <UploadButton
+            authToken={authToken}
+            client={client}
+            sessionID={sessionID}
+            isMediaAccepted={dialogState?.acceptsMedia || false}
+            setDocumentPreviewFiles={setDocumentPreviewFiles}
+            documentPreviewFiles={documentPreviewFiles}
+            memoriID={memoriID}
+          />
+        </>
+      )}
       <Button
         shape="circle"
         primary={!!userMessage?.length}
         disabled={!userMessage || userMessage.length === 0}
         className="memori-chat-inputs--send"
         onClick={() => {
-          sendMessage(userMessage);
-          stopAudio();
-          speechSynthesis.speak(new SpeechSynthesisUtterance(''));
+          onSendMessage(documentPreviewFiles);
         }}
         title={t('send') || 'Send'}
         icon={<Send />}
@@ -98,7 +210,6 @@ const ChatInputs: React.FC<Props> = ({
           startListening={startListening}
           stopListening={() => {
             stopListening();
-
             if (!!userMessage?.length) {
               sendMessage(userMessage);
             }

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

@@ -7,29 +7,6 @@ exports[`renders ChatInputs disabled unchanged 1`] = `
     disabled=""
     id="chat-fieldset"
   >
-    <div
-      class="memori-send-on-enter-menu"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:ra:"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <span
-            style="display: block; width: 1rem; height: 1rem;"
-          >
-            …
-          </span>
-        </div>
-      </button>
-    </div>
     <div
       class="memori-chat-textarea memori-chat-textarea--disabled"
       data-testid="chat-textarea"
@@ -40,6 +17,7 @@ exports[`renders ChatInputs disabled unchanged 1`] = `
         <textarea
           class="memori-chat-textarea--input"
           disabled=""
+          maxlength="100000"
         >
           Lorem ipsum
         </textarea>
@@ -134,29 +112,6 @@ exports[`renders ChatInputs listening unchanged 1`] = `
     class="memori-chat-inputs"
     id="chat-fieldset"
   >
-    <div
-      class="memori-send-on-enter-menu"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:r6:"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <span
-            style="display: block; width: 1rem; height: 1rem;"
-          >
-            …
-          </span>
-        </div>
-      </button>
-    </div>
     <div
       class="memori-chat-textarea"
       data-testid="chat-textarea"
@@ -166,6 +121,7 @@ exports[`renders ChatInputs listening unchanged 1`] = `
       >
         <textarea
           class="memori-chat-textarea--input"
+          maxlength="100000"
         >
           Lorem ipsum
         </textarea>
@@ -260,29 +216,6 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
     class="memori-chat-inputs"
     id="chat-fieldset"
   >
-    <div
-      class="memori-send-on-enter-menu"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:r4:"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <span
-            style="display: block; width: 1rem; height: 1rem;"
-          >
-            …
-          </span>
-        </div>
-      </button>
-    </div>
     <div
       class="memori-chat-textarea"
       data-testid="chat-textarea"
@@ -292,6 +225,7 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
       >
         <textarea
           class="memori-chat-textarea--input"
+          maxlength="100000"
         >
           Lorem ipsum
         </textarea>
@@ -386,29 +320,6 @@ exports[`renders ChatInputs unchanged 1`] = `
     class="memori-chat-inputs"
     id="chat-fieldset"
   >
-    <div
-      class="memori-send-on-enter-menu"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:r0:"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <span
-            style="display: block; width: 1rem; height: 1rem;"
-          >
-            …
-          </span>
-        </div>
-      </button>
-    </div>
     <div
       class="memori-chat-textarea"
       data-testid="chat-textarea"
@@ -418,6 +329,7 @@ exports[`renders ChatInputs unchanged 1`] = `
       >
         <textarea
           class="memori-chat-textarea--input"
+          maxlength="100000"
         />
         <div
           class="memori-chat-textarea--expand"
@@ -511,29 +423,6 @@ exports[`renders ChatInputs with user message unchanged 1`] = `
     class="memori-chat-inputs"
     id="chat-fieldset"
   >
-    <div
-      class="memori-send-on-enter-menu"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:r2:"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <span
-            style="display: block; width: 1rem; height: 1rem;"
-          >
-            …
-          </span>
-        </div>
-      </button>
-    </div>
     <div
       class="memori-chat-textarea"
       data-testid="chat-textarea"
@@ -543,6 +432,7 @@ exports[`renders ChatInputs with user message unchanged 1`] = `
       >
         <textarea
           class="memori-chat-textarea--input"
+          maxlength="100000"
         >
           Lorem ipsum
         </textarea>
@@ -637,29 +527,6 @@ exports[`renders ChatInputs without microphone button unchanged 1`] = `
     class="memori-chat-inputs"
     id="chat-fieldset"
   >
-    <div
-      class="memori-send-on-enter-menu"
-      data-headlessui-state=""
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
-        data-headlessui-state=""
-        id="headlessui-menu-button-:r8:"
-        type="button"
-      >
-        <div
-          class="memori-button--icon"
-        >
-          <span
-            style="display: block; width: 1rem; height: 1rem;"
-          >
-            …
-          </span>
-        </div>
-      </button>
-    </div>
     <div
       class="memori-chat-textarea"
       data-testid="chat-textarea"
@@ -669,6 +536,7 @@ exports[`renders ChatInputs without microphone button unchanged 1`] = `
       >
         <textarea
           class="memori-chat-textarea--input"
+          maxlength="100000"
         >
           Lorem ipsum
         </textarea>

package/src/components/ChatTextArea/ChatTextArea.css

@@ -4,7 +4,7 @@
     box-sizing: border-box;
     flex: 1 0 auto;
     margin-right: 0.5rem;
-    margin-left: 0.5rem;
+    /* margin-left: 0.5rem; */
 }
 
 .memori-chat-textarea--inner {
@@ -24,7 +24,7 @@
 }
 
 .memori-chat-textarea--expanded .memori-chat-textarea--inner {
-    max-height: 200px;
+    max-height: 300px;
 }
 
 .memori-chat-textarea--disabled .memori-chat-textarea--inner {
@@ -78,11 +78,15 @@ button.memori-chat-textarea--expand-button:focus {
     outline: none;
 }
 
-.memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus .memori-chat-textarea--expand-button,
-.memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea--inner:focus-within .memori-chat-textarea--expand-button {
+.memori-chat-textarea:not(.memori-chat-textarea--disabled)
+    .memori-chat-textarea--inner:focus
+    .memori-chat-textarea--expand-button,
+.memori-chat-textarea:not(.memori-chat-textarea--disabled)
+    .memori-chat-textarea--inner:focus-within
+    .memori-chat-textarea--expand-button {
     opacity: 1;
 }
 
 .memori-chat-textarea:not(.memori-chat-textarea--disabled) .memori-chat-textarea-inner:focus-within {
     box-shadow: 0 0.2rem 0.33rem #b5b6c4;
-}
+}

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -48,6 +48,7 @@ const ChatTextArea: React.FC<Props> = ({
           }}
           onFocus={onFocus}
           onBlur={onBlur}
+          maxLength={100000}
         />
         <div className="memori-chat-textarea--expand">
           <Button

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

@@ -11,6 +11,7 @@ exports[`renders ChatTextArea unchanged 1`] = `
     >
       <textarea
         class="memori-chat-textarea--input"
+        maxlength="100000"
       />
       <div
         class="memori-chat-textarea--expand"
@@ -52,6 +53,7 @@ exports[`renders ChatTextArea with long text unchanged 1`] = `
     >
       <textarea
         class="memori-chat-textarea--input"
+        maxlength="100000"
       >
         Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur.
       </textarea>
@@ -95,6 +97,7 @@ exports[`renders ChatTextArea with value unchanged 1`] = `
     >
       <textarea
         class="memori-chat-textarea--input"
+        maxlength="100000"
       >
         Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
       </textarea>

package/src/components/CompletionProviderStatus/CompletionProviderStatus.css

@@ -1,18 +1,36 @@
 .memori--completion-provider-status--icon {
-    width: 1em;
-    height: 1em;
-    fill: var(--memori-error-color, red);
-}
-
-.memori--completion-provider-status--tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
-.memori--completion-provider-status--tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
-    transform: translateY(calc(-100% - 2em)) translateX(3em);
-}
-
-.memori--completion-provider-status--tooltip.memori-tooltip .memori-tooltip--content p {
-    margin: 0.5em auto;
-}
-
-.memori--completion-provider-status--tooltip.memori-tooltip .memori-tooltip--content p+p {
-    margin-top: 1em;
-}
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  
+  .memori--completion-provider-status--loading {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .memori--completion-provider-status--icon-error {
+    color: #f5222d;
+  }
+  
+  .memori--completion-provider-status--icon-warning {
+    color: #faad14;
+  }
+  
+  .memori--completion-provider-status--icon-info {
+    color: #1890ff;
+  }
+  
+  .memori--completion-provider-status--tooltip {
+    max-width: 300px;
+  }
+  
+  .memori--completion-provider-status--tooltip p {
+    margin-bottom: 8px;
+  }
+  
+  .memori--completion-provider-status--tooltip p:last-child {
+    margin-bottom: 0;
+  }