@memori.ai/memori-react 7.0.3 → 7.0.5

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DialogState } from '@memori.ai/memori-api-client/dist/types';
-import SendOnEnterMenu from '../SendOnEnterMenu/SendOnEnterMenu';
+// import SendOnEnterMenu from '../SendOnEnterMenu/SendOnEnterMenu';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
 import Button from '../ui/Button';
 import { useTranslation } from 'react-i18next';
@@ -34,8 +34,6 @@ export interface Props {
 
 const ChatInputs: React.FC<Props> = ({
   dialogState,
-  sendOnEnter = 'click',
-  setSendOnEnter,
   userMessage = '',
   onChangeUserMessage,
   sendMessage,
@@ -65,10 +63,10 @@ const ChatInputs: React.FC<Props> = ({
           disabled={!dialogState?.acceptsMedia}
         />
       )*/}
-      <SendOnEnterMenu
+      {/*<SendOnEnterMenu
         sendOnEnter={sendOnEnter}
         setSendOnEnter={setSendOnEnter}
-      />
+      />*/}
       <ChatTextArea
         value={userMessage}
         onChange={onChangeUserMessage}

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"
@@ -134,29 +111,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"
@@ -260,29 +214,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"
@@ -386,29 +317,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"
@@ -511,29 +419,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"
@@ -637,29 +522,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"

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 {
@@ -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/MemoriWidget/MemoriWidget.tsx

@@ -2176,16 +2176,9 @@ const MemoriWidget = ({
     'keypress'
   );
   useEffect(() => {
-    const stored = getLocalConfig<'keypress' | 'click'>(
-      'sendOnEnter',
-      'keypress'
-    );
-    if (window.innerWidth <= 768) setSendOnEnter('click');
-    else setSendOnEnter(stored);
+    if (window.innerWidth <= 768 && hasTouchscreen()) setSendOnEnter('click');
+    else setSendOnEnter('keypress');
   }, []);
-  useEffect(() => {
-    setLocalConfig('sendOnEnter', sendOnEnter);
-  }, [sendOnEnter]);
 
   /**
    * Attachments

package/src/helpers/configuration.ts

@@ -2,7 +2,6 @@ export const keys: { [key: string]: string } = {
   muteSpeaker: '@memori:muteSpeaker',
   microphoneMode: '@memori:microphoneMode',
   continuousSpeechTimeout: '@memori:continuousSpeechTimeout',
-  sendOnEnter: '@memori:sendOnEnter',
   birthDate: '@memori:birthDate',
   controlsPosition: '@memori:controlsPosition',
   hideEmissions: '@memori:hideEmissions',

package/src/helpers/utils.ts

@@ -239,3 +239,60 @@ export function cleanUrl(href: string) {
   }
   return href;
 }
+
+export const mathJaxConfig = {
+  startup: {
+    elements: ['.memori-chat--bubble-content'],
+  },
+  options: {
+    processHtmlClass: 'memori-chat--bubble-content',
+  },
+  tex: {
+    inlineMath: [
+      ['$', '$'],
+      ['\\$', '\\$'],
+      ['(', '\\)'],
+      ['\\(', ')'],
+      ['[', '\\]'],
+      ['\\(', '\\)'],
+      ['\\[', '\\]'],
+      ['\\\\[', '\\\\]'],
+      ['\\\\\\[', '\\\\\\]'],
+      ['((', '))'],
+    ],
+    displayMath: [
+      ['$$', '$$'],
+      ['\\[[', '\\]]'],
+      ['\\\\[[', '\\\\]]'],
+      ['\\\\\\[[', '\\\\\\]]'],
+    ],
+    processEscapes: false,
+  },
+  asciimath: {
+    fixphi: true,
+    displaystyle: true,
+    decimalsign: '.',
+  },
+  skipStartupTypeset: true,
+  chtml: {
+    displayAlign: 'left',
+  },
+  svg: {
+    fontCache: 'global',
+  },
+};
+
+export const installMathJaxScript = () => {
+  const script = document.createElement('script');
+  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
+  script.async = true;
+  script.id = 'mathjax-script';
+  document.head.appendChild(script);
+};
+
+export const installMathJax = () => {
+  // @ts-ignore
+  window.MathJax = mathJaxConfig;
+
+  installMathJaxScript();
+};

package/src/index.tsx

@@ -11,6 +11,7 @@ import MemoriWidget, {
 } from './components/MemoriWidget/MemoriWidget';
 import { Toaster } from 'react-hot-toast';
 import { getTenant } from './helpers/tenant';
+import { installMathJax } from './helpers/utils';
 
 import i18n from './i18n';
 import { I18nextProvider, useTranslation } from 'react-i18next';
@@ -210,56 +211,7 @@ const Memori: React.FC<Props> = ({
   }, [uiLang]);
 
   useEffect(() => {
-    // @ts-ignore
-    window.MathJax = {
-      startup: {
-        elements: ['.memori-chat--bubble-content'],
-      },
-      options: {
-        processHtmlClass: 'memori-chat--bubble-content',
-      },
-      tex: {
-        inlineMath: [
-          ['$', '$'],
-          ['\\$', '\\$'],
-          ['(', '\\)'],
-          ['\\(', ')'],
-          ['(', ')'],
-          ['[', '\\]'],
-          ['[', ']'],
-          ['\\(', '\\)'],
-          ['\\[', '\\]'],
-          ['\\\\[', '\\\\]'],
-          ['\\\\\\[', '\\\\\\]'],
-          ['((', '))'],
-        ],
-        displayMath: [
-          ['$$', '$$'],
-          ['\\[[', '\\]]'],
-          ['\\\\[[', '\\\\]]'],
-          ['\\\\\\[[', '\\\\\\]]'],
-        ],
-        processEscapes: false,
-      },
-      asciimath: {
-        fixphi: true,
-        displaystyle: true,
-        decimalsign: '.',
-      },
-      skipStartupTypeset: true,
-      chtml: {
-        displayAlign: 'left',
-      },
-      svg: {
-        fontCache: 'global',
-      },
-    };
-
-    const script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
-    script.async = true;
-    script.id = 'mathjax-script';
-    document.head.appendChild(script);
+    installMathJax();
   }, []);
 
   const renderer = memori ? (