@memori.ai/memori-react 9.0.0-alpha.7 → 9.0.0-alpha.9

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -11,16 +11,22 @@
 
 .memori-chat-inputs--mic {
     z-index: 1;
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
     box-sizing: border-box;
+    flex-shrink: 0;
     padding: 0;
-    margin-left: 0.33rem;
-    color: var(--memori-primary);
+    border: none;
+    border-radius: 10px;
+    margin-left: 0;
+    background: transparent;
+    color: #888;
+    cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
     -webkit-touch-callout: none;
+    transition: background 0.15s ease, color 0.15s ease;
     -webkit-user-drag: none;
     -khtml-user-drag: none;
     -moz-user-drag: none;
@@ -30,21 +36,45 @@
 }
 
 .memori-chat-inputs--mic svg {
-    width: 20px;
-    height: 20px;
-    color: var(--memori-primary, #fff);
+    width: 18px;
+    height: 18px;
+    color: inherit;
     font-size: 1em;
     -webkit-user-select: none;
     user-select: none;
 }
 
 .memori-chat-inputs--mic:hover {
-    background-color: var(--memori-secondary-background) !important;
+    background-color: #f2eef5 !important;
+    color: #555 !important;
 }
 
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
-    box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
+    box-shadow: none !important;
+}
+
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
+.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
+    color: #555 !important;
+}
+
+/* Layout-scoped mic colors (FULL_PAGE / HIDDEN_CHAT / WEBSITE_ASSISTANT) */
+.memori-widget.memori-layout-fullpage .memori-chat-inputs--mic,
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic {
+    color: #9c98a4;
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-inputs--mic:hover {
+    background-color: #332f3a !important;
+    color: #d8d6de !important;
+}
+
+.memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic:hover,
+.memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic:hover {
+    background-color: transparent !important;
+    color: #d8d6de !important;
 }
 
 /* Enhanced touch feedback for mobile */
@@ -55,17 +85,10 @@
     }
 
     .memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: #f2eef5;
     }
 }
 
-/* Prevent double-tap zoom on mobile - already defined above */
-
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
-    color: var(--memori-primary) !important;
-}
-
 @keyframes micBtnActivePulse {
     0% {
         transform: scale(1.25);
@@ -160,3 +183,12 @@
 [data-theme='dark'] .memori-chat-inputs--mic .lucide-mic {
     color: #fff;
 }
+
+.memori-widget.memori-layout-fullpage[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage .memori-chat-inputs--mic .lucide-mic,
+.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic .lucide-mic,
+.memori-widget.memori-layout-website_assistant[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic .lucide-mic {
+    color: inherit;
+}

package/src/components/PoweredBy/PoweredBy.css

@@ -10,7 +10,7 @@
     /* border: 1px solid var(--memori-border-color); */
     border-radius: 9999px;
     /* background-color: var(--memori-secondary-background); */
-    color: var(--memori-text-color);
+    color: color-mix(in srgb, var(--memori-text-color) 45%, transparent);
     font-size: 0.75rem;
     font-weight: 500;
     gap: 0.5rem;
@@ -22,6 +22,7 @@
     width: 1.25rem;
     height: 1.25rem;
     flex-shrink: 0;
+    opacity: 0.55;
 }
 
 .memori--powered-by-label {
@@ -31,7 +32,7 @@
 }
 
 .memori--powered-by-label a {
-    color: var(--memori-text-color);
+    color: inherit;
     text-decoration: underline;
     text-underline-offset: 2px;
 }
@@ -46,4 +47,11 @@
     .memori-widget .memori--powered-by {
         display: none !important;
     }
+
+    /* Keep the footer strip visible under the input on compact chat layouts */
+    .memori-widget.memori-layout-chat .memori--powered-by,
+    .memori-widget.memori-layout-website_assistant .memori--powered-by,
+    .memori-widget.memori-layout-hidden_chat .memori--powered-by {
+        display: flex !important;
+    }
 }

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

@@ -499,7 +499,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               borderTop: '1px solid rgba(255, 255, 255, 0.2)',
             }}
           >
-            <Button onClick={handleCancelUpload} variant="outline">
+            <Button onClick={handleCancelUpload} variant="outline" danger>
               {t('cancel') ?? 'Cancel'}
             </Button>
             <Button

package/src/components/layouts/Chat.tsx

@@ -226,8 +226,6 @@ const ChatLayout: React.FC<LayoutProps> = ({
       {integrationBackground}
 
       <Spin spinning={loading} className="memori-chat-layout">
-        {poweredBy}
-
         <div id="extension" />
 
         <div className="memori-chat-layout--main">
@@ -356,7 +354,7 @@ const ChatLayout: React.FC<LayoutProps> = ({
                 />
               )}
               {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
-                <Chat {...chatProps} />
+                <Chat {...chatProps} showInputs={false} />
               ) : startPanelProps ? (
                 <div
                   className="memori-chat-layout--start-shell"
@@ -365,50 +363,50 @@ const ChatLayout: React.FC<LayoutProps> = ({
                   <div className="memori-chat-layout--start-panel-wrap">
                     <StartPanel {...startPanelProps} />
                   </div>
-                  {Chat && chatProps && chatProps.showInputs !== false && (
-                    <div className="memori-chat-layout--prechat-inputs">
-                      <ChatInputs
-                        userMessage={chatProps.userMessage}
-                        onChangeUserMessage={chatProps.onChangeUserMessage}
-                        dialogState={chatProps.dialogState}
-                        instruct={chatProps.instruct}
-                        authToken={chatProps.authToken}
-                        sendMessage={chatProps.sendMessage}
-                        isTyping={chatProps.memoriTyping}
-                        microphoneMode={chatProps.microphoneMode}
-                        sendOnEnter={chatProps.sendOnEnter}
-                        setSendOnEnter={chatProps.setSendOnEnter}
-                        client={chatProps.client}
-                        sessionID={chatProps.sessionID}
-                        showUpload={chatProps.showUpload}
-                        attachmentsMenuOpen={chatProps.attachmentsMenuOpen}
-                        setAttachmentsMenuOpen={
-                          chatProps.setAttachmentsMenuOpen
-                        }
-                        onTextareaFocus={() => {
-                          chatProps.stopListening?.();
-                        }}
-                        onTextareaBlur={() => {}}
-                        onTextareaExpanded={() => {}}
-                        startListening={chatProps.startListening}
-                        stopListening={chatProps.stopListening}
-                        stopAudio={chatProps.stopAudio}
-                        listening={chatProps.listening}
-                        isPlayingAudio={chatProps.isPlayingAudio}
-                        showMicrophone={chatProps.showMicrophone}
-                        memoriID={chatProps.memori?.memoriID}
-                        maxTextareaCharacters={chatProps.maxTextareaCharacters}
-                        maxDocumentsPerMessage={maxDocumentsPerMessage}
-                        maxDocumentContentLength={maxDocumentContentLength}
-                        pasteAsCardLineThreshold={pasteAsCardLineThreshold}
-                        pasteAsCardCharThreshold={pasteAsCardCharThreshold}
-                        showAiGeneratedNote={false}
-                      />
-                    </div>
-                  )}
                 </div>
               ) : null}
             </div>
+
+            {/* Input bar sits outside body so it spans full width below the scroll area */}
+            {Chat && chatProps && chatProps.showInputs !== false && (
+              <ChatInputs
+                userMessage={chatProps.userMessage}
+                onChangeUserMessage={chatProps.onChangeUserMessage}
+                dialogState={chatProps.dialogState}
+                instruct={chatProps.instruct}
+                authToken={chatProps.authToken}
+                sendMessage={chatProps.sendMessage}
+                isTyping={chatProps.memoriTyping}
+                microphoneMode={chatProps.microphoneMode}
+                sendOnEnter={chatProps.sendOnEnter}
+                setSendOnEnter={chatProps.setSendOnEnter}
+                client={chatProps.client}
+                sessionID={chatProps.sessionID}
+                showUpload={chatProps.showUpload}
+                attachmentsMenuOpen={chatProps.attachmentsMenuOpen}
+                setAttachmentsMenuOpen={chatProps.setAttachmentsMenuOpen}
+                onTextareaFocus={() => {
+                  chatProps.stopListening?.();
+                }}
+                onTextareaBlur={() => {}}
+                onTextareaExpanded={() => {}}
+                startListening={chatProps.startListening}
+                stopListening={chatProps.stopListening}
+                stopAudio={chatProps.stopAudio}
+                listening={chatProps.listening}
+                isPlayingAudio={chatProps.isPlayingAudio}
+                showMicrophone={chatProps.showMicrophone}
+                memoriID={chatProps.memori?.memoriID}
+                maxTextareaCharacters={chatProps.maxTextareaCharacters}
+                maxTotalMessagePayload={chatProps.maxTotalMessagePayload}
+                maxDocumentsPerMessage={maxDocumentsPerMessage}
+                maxDocumentContentLength={maxDocumentContentLength}
+                pasteAsCardLineThreshold={pasteAsCardLineThreshold}
+                pasteAsCardCharThreshold={pasteAsCardCharThreshold}
+                showAiGeneratedNote={isSessionStarted}
+              />
+            )}
+            {poweredBy}
           </div>
 
           {/* Artifact column — width 0→480px with CSS transition */}