@memori.ai/memori-react 9.0.0-alpha.8 → 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 */}

package/src/components/layouts/HiddenChat.tsx

@@ -27,6 +27,7 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
   autoStart,
   StartPanel,
   onSidebarToggle,
+  poweredBy,
 }) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
@@ -168,11 +169,6 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
   const restoreFromFullscreen = () => {
     const sidebarElement = document.querySelector('.memori-sidebar');
     if (sidebarElement) {
-      //restore closing button
-      const closeButton = document.querySelector('.memori-close-label');
-      if (closeButton) {
-        (closeButton as HTMLElement).style.display = 'flex';
-      }
       // Restore original styles
       const sidebar = sidebarElement as HTMLElement;
       sidebar.style.right = originalSidebarStyles.current.right;
@@ -193,12 +189,6 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
       if (sidebarElement) {
         const sidebar = sidebarElement as HTMLElement;
 
-        //hide closing button
-        const closeButton = document.querySelector('.memori-close-label');
-        if (closeButton) {
-          (closeButton as HTMLElement).style.display = 'none';
-        }
-
         // Store original styles before modifying
         originalSidebarStyles.current = {
           right: sidebar.style.right,
@@ -206,10 +196,11 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
           backgroundColor: sidebar.style.backgroundColor,
         };
 
-        // Set styles for fullscreen
+        // Set styles for fullscreen — keep --memori-secondary-background via CSS, clear inline white
         sidebar.style.right = '0';
         sidebar.style.width = '100%';
-        sidebar.style.backgroundColor = '#FFFFFF';
+        sidebar.style.backgroundColor = '';
+        sidebar.classList.add('memori-sidebar-fullscreen');
 
         // Request fullscreen
         sidebar.requestFullscreen().catch(err => {
@@ -255,17 +246,6 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
             fullScreen ? 'memori-sidebar-fullscreen' : ''
           }`}
         >
-          <label
-            htmlFor="memori-sidebar-toggle"
-            className="memori-sidebar-toggle-label memori-close-label"
-          >
-            <span>
-              <X
-                className="memori-icon-close"
-                aria-label={t('collapse') ?? undefined}
-              />
-            </span>
-          </label>
           <div className="memori-hidden-chat-layout--controls memori-chat-layout--controls">
             <div className="memori-chat-layout--header">
               {Header && headerProps && (
@@ -303,6 +283,14 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
                         fullScreenHandler={handleFullscreenToggle}
                       />
                     )}
+                    <label
+                      htmlFor="memori-sidebar-toggle"
+                      className="memori-sidebar-toggle-label memori-close-label memori-hidden-chat-layout--header-close"
+                      aria-label={t('collapse') || 'Close'}
+                      title={t('collapse') || 'Close'}
+                    >
+                      <X className="memori-icon-close" aria-hidden />
+                    </label>
                   </div>
                 </div>
               )}
@@ -364,6 +352,7 @@ const HiddenChatLayout: React.FC<LayoutProps> = ({
               )}
               <div id="extension" />
             </div>
+            {poweredBy}
           </div>
         </aside>
       </div>

package/src/components/layouts/WebsiteAssistant/WebsiteAssistant.tsx

@@ -6,6 +6,7 @@ import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useArtifact } from '../../MemoriArtifactSystem/context/ArtifactContext';
 import ArtifactDrawer from '../../MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer';
+import { getResourceUrl } from '../../../helpers/media';
 
 const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
   Header,
@@ -32,6 +33,28 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
 
   const stopAudio = useMemo(() => chatProps?.stopAudio, [chatProps?.stopAudio]);
 
+  const memori = headerProps?.memori;
+  const tenant = headerProps?.tenant;
+  const baseUrl = headerProps?.baseUrl;
+  const isSessionStarted = Boolean(sessionId && hasUserActivatedSpeak);
+
+  const brandAvatarSrc = memori
+    ? memori.avatarURL && memori.avatarURL.length > 0
+      ? getResourceUrl({
+          type: 'avatar',
+          tenantID: tenant?.name,
+          resourceURI: memori.avatarURL,
+          baseURL: baseUrl,
+          apiURL: '',
+        })
+      : getResourceUrl({
+          type: 'avatar',
+          tenantID: tenant?.name,
+          baseURL: baseUrl,
+          apiURL: '',
+        })
+    : undefined;
+
   const setCollapsed = (collapsed: boolean) => {
     _setCollapsed(collapsed);
     setExpandedKey(collapsed ? undefined : new Date().toISOString());
@@ -76,25 +99,45 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
               spinning={loading}
               className="memori-website_assistant-layout"
             >
-              {poweredBy}
               <div className="memori-website_assistant-layout--header-row">
-                {Header && headerProps && (
-                  <Header
-                    buttonVariant="outline"
-                    {...headerProps}
-                    showSettings={false}
-                    showReload={false}
-                  />
+                {memori && brandAvatarSrc && (
+                  <div className="memori-chat-layout--brand">
+                    <img
+                      className="memori-chat-layout--brand-avatar"
+                      src={brandAvatarSrc}
+                      alt=""
+                      role="presentation"
+                    />
+                    <div className="memori-chat-layout--brand-text">
+                      {isSessionStarted && (
+                        <span
+                          className="memori-chat-layout--brand-name"
+                          title={memori.name}
+                        >
+                          {memori.name}
+                        </span>
+                      )}
+                    </div>
+                  </div>
                 )}
-                <div className="memori-website_assistant--close-button-wrapper">
-                  <Button
+                <div className="memori-website_assistant-layout--header-actions">
+                  {Header && headerProps && (
+                    <Header
+                      buttonVariant="outline"
+                      {...headerProps}
+                      showSettings={false}
+                      showReload={false}
+                    />
+                  )}
+                  <button
+                    type="button"
                     className="memori-website_assistant--close-button"
-                    variant="ghost"
                     onClick={() => setCollapsed(true)}
-                    aria-label={t('close') || 'Close'}
-                    icon={<X aria-hidden />}
-                    title={t('close') || 'Close'}
-                  />
+                    aria-label={t('collapse') || 'Close'}
+                    title={t('collapse') || 'Close'}
+                  >
+                    <X className="memori-icon-close" aria-hidden />
+                  </button>
                 </div>
               </div>
 
@@ -136,6 +179,7 @@ const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
                   />
                 ) : null}
               </div>
+              {poweredBy}
             </Spin>
           </>
         )}