@memori.ai/memori-react 8.11.0 → 8.13.0

package/src/components/ChatInputs/ChatInputs.css

@@ -1,40 +1,320 @@
+.memori-chat-inputs-wrapper {
+    position: sticky;
+    z-index: 10;
+    bottom: 0;
+    width: 100%;
+    padding: 0;
+    padding-bottom: 1.5rem;
+    margin: 0;
+    /* background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); */
+}
+
 .memori-chat-inputs {
     position: relative;
     display: flex;
     width: 100%;
+    min-width: 97%;
+    max-width: 97%;
     box-sizing: border-box;
+    flex-flow: column;
     flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
     padding: 0;
+    padding: 8px 12px !important;
     border: none;
+    border-radius: 12px;
     margin: 0;
-    transition: all 0.2s ease-in-out;
+    margin: auto;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.memori-chat-inputs:disabled {
+    opacity: 0.5;
+    pointer-events: none;
 }
 
-.memori-chat-inputs--expanded {
-    /* Additional padding when expanded to prevent overlap with file preview */
-    padding-top: 0.5rem;
+.memori-chat-inputs--container {
+    position: relative;
+    display: grid;
+    width: 100%;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+    min-height: 56px;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 0 1rem;
+    padding: 12px;
+    border-radius: var(--memori-border-radius);
+    /* max-width: 48rem; */
+    margin: 0 auto;
+    background: #fff;
+    gap: 0;
+    grid-template-areas: 'leading primary trailing';
+    grid-template-columns: auto 1fr auto;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    .memori-chat-inputs {
+    .memori-chat-inputs--container {
+        padding: 0 0.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-chat-inputs--container {
         padding: 0 0.25rem;
     }
+}
+
+.memori-chat-inputs--leading {
+    display: flex;
+    align-items: center;
+    padding-right: 6px;
+    grid-area: leading;
+}
+
+.memori-chat-inputs--primary {
+    display: flex;
+    overflow: hidden;
+    min-height: 36px;
+    align-items: center;
+    grid-area: primary;
+}
+
+.memori-chat-inputs--trailing {
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    grid-area: trailing;
+}
+
+.memori-chat-inputs--trailing-inner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Plus button styling */
+.memori-chat-inputs--upload-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.memori-chat-inputs--upload-wrapper .memori--unified-upload-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button {
+    display: flex;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: #000 !important;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button:hover {
+    background: transparent !important;
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+/* Icon class styling */
+.memori-chat-inputs--container .icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    fill: currentColor;
+}
+
+/* Microphone button styling */
+.memori-chat-inputs--mic-btn {
+    display: flex;
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+}
 
-    .memori-chat-inputs--expanded {
-        padding-top: 0.25rem;
+.memori-chat-inputs--mic-btn:hover {
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--mic-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+.memori-chat-inputs--mic-btn svg,
+.memori-chat-inputs--mic-btn .icon {
+    width: 20px;
+    height: 20px;
+    fill: #000;
+}
+
+/* Ensure icons are black on white background */
+.memori-chat-inputs--leading .icon {
+    fill: #000;
+}
+
+.memori-chat-inputs--send-btn svg {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
+}
+
+.memori-chat-inputs--send-btn .icon {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
+}
+
+.memori-chat-inputs--upload-wrapper .memori-button svg,
+.memori-chat-inputs--upload-wrapper .memori-button .icon {
+    width: 20px;
+    height: 20px;
+    /* fill: #000; */
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic-btn .icon {
+    fill: #000;
+}
+
+.memori-chat-inputs--mic-btn--listening {
+    color: #10a37f;
+}
+
+.memori-chat-inputs--mic {
+    font-size: 125%;
+}
+
+/* Style MicrophoneButton component when used in trailing area */
+.memori-chat-inputs--trailing .memori-chat-inputs--mic {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic .memori-button {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: #000;
+}
+
+/* Send button styling - ChatGPT style */
+.memori-chat-inputs--send-btn {
+    display: flex;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    padding: 1.2rem !important;
+    border: none;
+    border-radius: var(--memori-border-radius);
+    background: #000;
+    background: var(--memori-chat-user-bubble-bg);
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.memori-chat-inputs--send-btn:disabled {
+    /* background: #f4f4f4; */
+    color: #f4f4f4;
+    cursor: not-allowed;
+    opacity: 0.3;
+}
+
+.memori-chat-inputs--send-btn:hover:not(:disabled) {
+    opacity: 0.7;
+}
+
+.memori-chat-inputs--trailing .memori-chat-inputs--mic svg {
+    width: 20px;
+    height: 20px;
+}
+
+.memori-chat-inputs--send-btn--active {
+    /* background: #000; */
+    color: #fff;
+}
+
+.memori-chat-inputs--send-btn--loading {
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-radius: var(--memori-border-radius);
+    border-top-color: transparent;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
     }
 }
 
-@media (max-width: 480px) {
-    .memori-chat-inputs {
-        flex-wrap: wrap;
+/* Disclaimer styling */
+.memori-chat-inputs--disclaimer {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 60px;
+    margin-top: -4px;
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 12px;
+    line-height: 1.5;
+    text-align: center;
+}
+
+.memori-chat-inputs--disclaimer a {
+    color: rgba(0, 0, 0, 0.8);
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.memori-chat-inputs--disclaimer a:hover {
+    opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+    .memori-chat-inputs--disclaimer {
+        padding: 8px 16px;
     }
 }
 
-.memori-chat-inputs .memori-upload-menu+.memori-send-on-enter-menu {
+/* Legacy support for old button classes */
+.memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
     margin-left: 0.33rem;
 }
 
@@ -42,7 +322,3 @@
     background: #fff;
     color: #000;
 }
-
-.memori-chat-inputs--mic {
-    font-size: 125%;
-}

package/src/components/ChatInputs/ChatInputs.tsx

@@ -10,6 +10,7 @@ import Microphone from '../icons/Microphone';
 import UploadButton from '../UploadButton/UploadButton';
 import FilePreview from '../FilePreview/FilePreview';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import Plus from '../icons/Plus';
 export interface Props {
   dialogState?: DialogState;
   instruct?: boolean;
@@ -31,6 +32,7 @@ export interface Props {
   microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   authToken?: string;
   showUpload?: boolean;
+  isTyping?: boolean;
   sessionID?: string;
   memoriID?: string;
   client?: ReturnType<typeof memoriApiClient>;
@@ -52,6 +54,7 @@ const ChatInputs: React.FC<Props> = ({
   startListening,
   stopListening,
   showUpload = false,
+  isTyping = false,
   sessionID,
   authToken,
   memoriID,
@@ -95,8 +98,14 @@ const ChatInputs: React.FC<Props> = ({
       url?: string;
     }[]
   ) => {
+    if (isTyping) return;
+
     const mediaWithIds = files.map((file, index) => {
-      const generatedMediumID = file.mediumID || `file_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
+      const generatedMediumID =
+        file.mediumID ||
+        `file_${Date.now()}_${index}_${Math.random()
+          .toString(36)
+          .substr(2, 9)}`;
       return {
         mediumID: generatedMediumID,
         mimeType: file.mimeType,
@@ -107,7 +116,7 @@ const ChatInputs: React.FC<Props> = ({
         url: file.url,
       };
     });
-    
+
     sendMessage(userMessage, mediaWithIds);
 
     // Reset states after sending
@@ -119,11 +128,23 @@ const ChatInputs: React.FC<Props> = ({
   /**
    * Handles enter key press in textarea
    */
-  const onTextareaPressEnter = () => {
+  const onTextareaPressEnter = (
+    e: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    // Prevent default newline on Enter to keep behavior consistent
+    e.preventDefault();
+
+    // While the agent is typing, ignore Enter (no send, no newline)
+    if (isTyping) return;
+
     if (sendOnEnter === 'keypress' && userMessage?.length > 0) {
       stopListening();
       const mediaWithIds = documentPreviewFiles.map((file, index) => {
-        const generatedMediumID = file.mediumID || `file_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
+        const generatedMediumID =
+          file.mediumID ||
+          `file_${Date.now()}_${index}_${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
         return {
           mediumID: generatedMediumID,
           mimeType: file.mimeType,
@@ -134,7 +155,7 @@ const ChatInputs: React.FC<Props> = ({
           url: file.url,
         };
       });
-      
+
       sendMessage(userMessage, mediaWithIds);
 
       setDocumentPreviewFiles([]);
@@ -175,93 +196,142 @@ const ChatInputs: React.FC<Props> = ({
     }
   };
 
+  const isDisabled =
+    dialogState?.state === 'X2a' || dialogState?.state === 'X3';
+  const textareaDisabled = ['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes(
+    dialogState?.state || ''
+  );
+
   return (
-    <fieldset
-      id="chat-fieldset"
-      className={cx('memori-chat-inputs', {
-        'memori-chat-inputs--expanded': isExpanded,
-      })}
-      disabled={dialogState?.state === 'X2a' || dialogState?.state === 'X3'}
-    >
-      <ChatTextArea
-        value={userMessage}
-        onChange={onChangeUserMessage}
-        onPressEnter={onTextareaPressEnter}
-        onFocus={onTextareaFocus}
-        onBlur={onTextareaBlur}
-        onExpandedChange={handleTextareaExpanded}
-        disabled={['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes(
-          dialogState?.state || ''
-        )}
-      />
-      {/* Preview for document files */}
-      {showUpload && (
-        <>
+    <div className="memori-chat-inputs-wrapper">
+      <fieldset
+        id="chat-fieldset"
+        className={cx('memori-chat-inputs', {
+          'memori-chat-inputs--expanded': isExpanded,
+        })}
+        disabled={isDisabled}
+      >
+        {/* Preview for document files */}
+        {showUpload && (
           <FilePreview
             previewFiles={documentPreviewFiles}
             removeFile={removeFile}
           />
+        )}
+        <div className="memori-chat-inputs--container">
+          {/* Leading area - Plus button */}
+          <div className="memori-chat-inputs--leading">
+            {showUpload && (
+              <div className="memori-chat-inputs--upload-wrapper">
+                <UploadButton
+                  authToken={authToken}
+                  client={client}
+                  sessionID={sessionID}
+                  isMediaAccepted={dialogState?.acceptsMedia || false}
+                  setDocumentPreviewFiles={setDocumentPreviewFiles}
+                  documentPreviewFiles={documentPreviewFiles}
+                  memoriID={memoriID}
+                />
+              </div>
+            )}
+          </div>
 
-          {/* 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={() => {
-          onSendMessage(documentPreviewFiles);
-        }}
-        title={t('send') || 'Send'}
-        icon={<Send />}
-      />
-      {showMicrophone && microphoneMode === 'HOLD_TO_TALK' && (
-        <MicrophoneButton
-          listening={listening}
-          startListening={startListening}
-          stopListening={() => {
-            stopListening();
-            if (listening && !!userMessage?.length) {
-              sendMessage(userMessage);
-            }
-          }}
-          stopAudio={stopAudio}
-        />
-      )}
-      {showMicrophone && microphoneMode === 'CONTINUOUS' && (
-        <Button
-          primary
-          className={cx('memori-chat-inputs--mic', {
-            'memori-chat-inputs--mic--listening': listening,
-          })}
-          title={
-            listening
-              ? t('write_and_speak.micButtonPopoverListening') || 'Listening'
-              : t('write_and_speak.micButtonPopover') || 'Start listening'
-          }
-          onClick={() => {
-            if (listening) {
-              stopListening();
-            } else {
-              stopAudio();
-              startListening();
-            }
-          }}
-          shape="circle"
-          icon={<Microphone />}
-        />
-      )}
-    </fieldset>
+          {/* Primary area - Textarea */}
+          <div className="memori-chat-inputs--primary">
+            <ChatTextArea
+              value={userMessage}
+              onChange={onChangeUserMessage}
+              onPressEnter={onTextareaPressEnter}
+              onFocus={onTextareaFocus}
+              onBlur={onTextareaBlur}
+              onExpandedChange={handleTextareaExpanded}
+              disabled={textareaDisabled}
+            />
+          </div>
+
+          {/* Trailing area - Microphone and Send button */}
+          <div className="memori-chat-inputs--trailing">
+            <div className="memori-chat-inputs--trailing-inner">
+              {showMicrophone && microphoneMode === 'CONTINUOUS' && (
+                <button
+                  type="button"
+                  className={cx('memori-chat-inputs--mic-btn', {
+                    'memori-chat-inputs--mic-btn--listening': listening,
+                  })}
+                  title={
+                    listening
+                      ? t('write_and_speak.micButtonPopoverListening') ||
+                        'Listening'
+                      : t('write_and_speak.micButtonPopover') ||
+                        'Start listening'
+                  }
+                  onClick={() => {
+                    if (listening) {
+                      stopListening();
+                    } else {
+                      stopAudio();
+                      startListening();
+                    }
+                  }}
+                  disabled={isDisabled}
+                  aria-label={
+                    listening
+                      ? t('write_and_speak.micButtonPopoverListening') ||
+                        'Listening'
+                      : t('write_and_speak.micButtonPopover') ||
+                        'Start listening'
+                  }
+                >
+                  <Microphone className="icon" />
+                </button>
+              )}
+              {showMicrophone && microphoneMode === 'HOLD_TO_TALK' && (
+                <MicrophoneButton
+                  listening={listening}
+                  startListening={startListening}
+                  stopListening={() => {
+                    stopListening();
+                    if (listening && !!userMessage?.length) {
+                      sendMessage(userMessage);
+                    }
+                  }}
+                  stopAudio={stopAudio}
+                />
+              )}
+              <button
+                type="button"
+                className={cx('memori-chat-inputs--send-btn', {
+                  'memori-chat-inputs--send-btn--active': !!userMessage?.length,
+                  'memori-chat-inputs--send-btn--disabled':
+                    !userMessage || userMessage.length === 0,
+                })}
+                onClick={() => {
+                  onSendMessage(documentPreviewFiles);
+                }}
+                disabled={!userMessage || userMessage.length === 0 || isTyping}
+                title={t('send') || 'Send'}
+                aria-label={t('send') || 'Send'}
+              >
+                {isTyping ? (
+                  <div className="memori-chat-inputs--send-btn--loading" />
+                ) : (
+                  <Send className="icon" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+      {/* Disclaimer */}
+      {/* <div className="memori-chat-inputs--disclaimer">
+        <div>
+          {t(
+            'chat.disclaimer',
+            'AIsuru può commettere errori. Assicurati di verificare le informazioni importanti.'
+          )}
+        </div>
+      </div> */}
+    </div>
   );
 };