@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -18,7 +18,11 @@ import {
 } from '@memori.ai/memori-api-client/src/types';
 import { ArtifactData } from '../MemoriArtifactSystem/types/artifact.types';
 import { ArtifactAPIBridge } from '../MemoriArtifactSystem/utils/ArtifactAPI';
-import type { LayoutName, PiiDetectionConfig } from '../../types/layout';
+import type {
+  LayoutName,
+  LayoutProp,
+  PiiDetectionConfig,
+} from '../../types/layout';
 import { checkPii } from '../../helpers/piiDetection'; // PII check when integrationConfig.layout has piiDetection.enabled
 
 // Libraries
@@ -35,10 +39,9 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import { IAudioContext } from 'standardized-audio-context';
 import cx from 'classnames';
 import { DateTime } from 'luxon';
-import toast from 'react-hot-toast';
+import { useAlertManager, createAlertOptions } from '@memori.ai/ui';
 
 // Components
-import PositionDrawer from '../PositionDrawer/PositionDrawer';
 import MemoriAuth from '../Auth/Auth';
 import Chat, { Props as ChatProps } from '../Chat/Chat';
 import StartPanel, { Props as StartPanelProps } from '../StartPanel/StartPanel';
@@ -50,14 +53,14 @@ import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 import KnownFacts from '../KnownFacts/KnownFacts';
 import ExpertsDrawer from '../ExpertsDrawer/ExpertsDrawer';
 import LoginDrawer from '../LoginDrawer/LoginDrawer';
-import Button from '../ui/Button';
-import CloseIcon from '../icons/Close';
+import { Button } from '@memori.ai/ui';
+import { X } from 'lucide-react';
 
 // Layout
 import FullPageLayout from '../layouts/FullPage';
 import TotemLayout from '../layouts/Totem';
 import ChatLayout from '../layouts/Chat';
-import WebsiteAssistantLayout from '../layouts/WebsiteAssistant';
+import WebsiteAssistantLayout from '../layouts/WebsiteAssistant/WebsiteAssistant';
 import HiddenChatLayout from '../layouts/HiddenChat';
 import ZoomedFullBodyLayout from '../layouts/ZoomedFullBody';
 
@@ -343,6 +346,7 @@ declare global {
         currentArtifact: ArtifactData | null;
         isDrawerOpen: boolean;
         isFullscreen: boolean;
+        isChatLogPanelPresentation: boolean;
       };
     };
   }
@@ -392,7 +396,8 @@ export interface Props {
   spokenLang?: string;
   multilingual?: boolean;
   integration?: Integration;
-  layout?: LayoutName;
+  /** Layout name, or object when PII is configured (e.g. from integration customData). */
+  layout?: LayoutProp;
   customLayout?: React.FC<LayoutProps>;
   showShare?: boolean;
   showCopyButton?: boolean;
@@ -449,6 +454,56 @@ export interface Props {
   maxTextareaCharacters?: number;
 }
 
+/** Config shape for chat styling (integration customData). */
+type ChatStylesConfig = {
+  buttonBgColor?: string;
+  buttonTextColor?: string;
+};
+
+/**
+ * Returns CSS custom properties for the chat container when a brand primary is set.
+ * Maps buttonBgColor → --memori-primary-color / --memori-primary and injects derived
+ * tokens (hover, active, borders, etc.) in the same scope.
+ * If buttonBgColor is missing, returns {} so global CSS defaults are used.
+ */
+export function getChatStyles(
+  config: ChatStylesConfig | null | undefined
+): CSSProperties {
+  const primary = config?.buttonBgColor;
+  if (!primary) return {};
+
+  const primaryContent = config?.buttonTextColor ?? '#ffffff';
+
+  return {
+    '--memori-primary-color': primary,
+    '--memori-primary': primary,
+    '--memori-primary-content': primaryContent,
+    '--memori-primary-hover':
+      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, black) 15%)',
+    '--memori-primary-active':
+      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, black) 25%)',
+    '--memori-primary-disabled':
+      'color-mix(in oklch, var(--memori-primary), transparent 60%)',
+    '--memori-primary-subtle':
+      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 60%)',
+    '--memori-primary-subtle-hover':
+      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 50%)',
+    '--memori-border-primary':
+      'color-mix(in oklch, var(--memori-primary), transparent 70%)',
+    '--memori-border-primary-hover':
+      'color-mix(in oklch, var(--memori-primary), transparent 50%)',
+    '--memori-focus-ring-color':
+      'color-mix(in oklch, var(--memori-primary), transparent 80%)',
+    '--memori-focus-ring': '0 0 0 3px var(--memori-focus-ring-color)',
+    '--memori-shadow-primary':
+      '0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%)',
+    '--memori-skeleton-base':
+      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 85%)',
+    '--memori-skeleton-highlight':
+      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, white) 75%)',
+  } as CSSProperties;
+}
+
 const MemoriWidget = ({
   memori,
   memoriConfigs,
@@ -510,7 +565,7 @@ const MemoriWidget = ({
   maxTextareaCharacters,
 }: Props) => {
   const { t, i18n } = useTranslation();
-
+  const { add, close } = useAlertManager();
   const [isClient, setIsClient] = useState(false);
   useEffect(() => {
     setIsClient(true);
@@ -533,6 +588,25 @@ const MemoriWidget = ({
   const [instruct, setInstruct] = useState(false);
   const [enableFocusChatInput, setEnableFocusChatInput] = useState(true);
 
+  const widgetRootRef = useRef<HTMLDivElement>(null);
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  useEffect(() => {
+    const el = widgetRootRef.current;
+    if (!el) return;
+    const check = () => {
+      setIsDarkTheme(!!el.closest('[data-theme="dark"]'));
+    };
+    check();
+    const observer = new MutationObserver(check);
+    const parent = el.parentElement ?? document.body;
+    observer.observe(parent, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+      subtree: true,
+    });
+    return () => observer.disconnect();
+  }, []);
+
   const [loginToken, setLoginToken] = useState<string | undefined>(
     additionalInfo?.loginToken ?? authToken
   );
@@ -627,18 +701,47 @@ const MemoriWidget = ({
   const [memoriTyping, setMemoriTyping] = useState<boolean>(false);
   const [typingText, setTypingText] = useState<string>();
 
-  // Layout: from prop (string only) or integrationConfig. PII detection is only from integrationConfig (customData.layout as object with piiDetection).
+  // Layout: prop can be string or object { name, piiDetection } (e.g. from integration customData when PII is enabled).
   const layoutName =
     typeof layout === 'string'
       ? layout
+      : layout &&
+        typeof layout === 'object' &&
+        layout !== null &&
+        'name' in layout &&
+        typeof (layout as { name: string }).name === 'string'
+      ? (layout as { name: string }).name
       : typeof integrationConfig?.layout === 'string'
       ? integrationConfig.layout
       : integrationConfig?.layout?.name;
-  const selectedLayout = layoutName || 'DEFAULT';
+  // Normalize to LayoutName: platform may pass number, "fullpage", "fullscreen", etc.
+  const selectedLayout = ((): LayoutName => {
+    if (typeof layoutName === 'string') {
+      const lower = layoutName.toLowerCase();
+      if (lower === 'fullpage' || lower === 'fullscreen' || lower === '2')
+        return 'FULLPAGE';
+      if (lower === 'totem') return 'TOTEM';
+      if (lower === 'chat') return 'CHAT';
+      if (lower === 'website_assistant') return 'WEBSITE_ASSISTANT';
+      if (lower === 'hidden_chat') return 'HIDDEN_CHAT';
+      if (lower === 'zoomed_full_body') return 'ZOOMED_FULL_BODY';
+      if (lower === 'default') return 'DEFAULT';
+      return layoutName as LayoutName;
+    }
+    if (layoutName === 2 || layoutName === '2') return 'FULLPAGE';
+    return 'DEFAULT';
+  })();
+  // PII: from layout prop when object with piiDetection, or from integrationConfig.layout
   const piiDetection: PiiDetectionConfig | undefined =
-    typeof integrationConfig?.layout === 'object' &&
-    integrationConfig?.layout !== null &&
-    integrationConfig?.layout?.piiDetection?.enabled
+    layout &&
+    typeof layout === 'object' &&
+    layout !== null &&
+    'piiDetection' in layout &&
+    layout.piiDetection?.enabled
+      ? layout.piiDetection
+      : typeof integrationConfig?.layout === 'object' &&
+        integrationConfig?.layout !== null &&
+        integrationConfig?.layout?.piiDetection?.enabled
       ? integrationConfig.layout.piiDetection
       : undefined;
 
@@ -648,7 +751,7 @@ const MemoriWidget = ({
   const [hasUserActivatedListening, setHasUserActivatedListening] =
     useState(false);
   const [hasUserTypedMessage, setHasUserTypedMessage] = useState(false);
-  const [showPositionDrawer, setShowPositionDrawer] = useState(false);
+  const [positionPopoverOpen, setPositionPopoverOpenState] = useState(false);
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
   const [showChatHistoryDrawer, setShowChatHistoryDrawer] = useState(false);
   const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
@@ -707,7 +810,9 @@ const MemoriWidget = ({
     setRuntimeShowMessageConsumption(
       getLocalConfig(
         'showMessageConsumption',
-        showMessageConsumption ?? integrationConfig?.showMessageConsumption ?? false
+        showMessageConsumption ??
+          integrationConfig?.showMessageConsumption ??
+          false
       )
     );
 
@@ -751,10 +856,16 @@ const MemoriWidget = ({
   /** True when the user has set a real position; false when position is missing or "I don't want to provide my position". */
   const hasUserProvidedPosition = useCallback((venue: Venue | undefined) => {
     if (!venue) return false;
+    const hasOptOutCoordinates =
+      Number(venue.latitude) === 0 && Number(venue.longitude) === 0;
+    const hasEmptyPlaceName = !venue.placeName?.trim();
+    const isLegacyOptOutPlaceName = venue.placeName === 'Position';
+    const hasNoUncertainty = Number(venue.uncertainty ?? 0) === 0;
+
     if (
-      venue.placeName === 'Position' &&
-      venue.latitude === 0 &&
-      venue.longitude === 0
+      hasOptOutCoordinates &&
+      (hasEmptyPlaceName || isLegacyOptOutPlaceName) &&
+      hasNoUncertainty
     ) {
       return false;
     }
@@ -770,17 +881,11 @@ const MemoriWidget = ({
       longitude?: number;
       uncertaintyKm?: number;
     } = {};
-    if (
-      venue.latitude != null &&
-      venue.longitude != null
-    ) {
+    if (venue.latitude != null && venue.longitude != null) {
       place.latitude = venue.latitude;
       place.longitude = venue.longitude;
       if (venue.placeName) place.placeName = venue.placeName;
-      if (
-        venue.uncertainty != null &&
-        venue.uncertainty > 0
-      )
+      if (venue.uncertainty != null && venue.uncertainty > 0)
         place.uncertaintyKm = venue.uncertainty;
     } else if (venue.placeName) {
       place.placeName = venue.placeName;
@@ -1468,7 +1573,12 @@ const MemoriWidget = ({
         session?.resultMessage.startsWith('This Memori is aged restricted')
       ) {
         console.warn(session);
-        toast.error(t('underageTwinSession', { age: minAge }));
+        add(
+          createAlertOptions({
+            description: t('underageTwinSession', { age: minAge }),
+            severity: 'error',
+          })
+        );
         setGotErrorInOpening(true);
       }
       // Handle authentication error
@@ -1480,23 +1590,22 @@ const MemoriWidget = ({
       // Handle other errors
       else {
         console.warn(session);
-        toast.error(
-          tst => (
-            <div>
-              <p>{t(getErrori18nKey(session?.resultCode))}</p>
-              <Button
-                outlined
-                padded={false}
-                onClick={() => toast.dismiss(tst.id)}
-                icon={<CloseIcon />}
-              >
-                {t('close')}
-              </Button>
-            </div>
-          ),
-          {
-            duration: Infinity,
-          }
+        const toastId = add(
+          createAlertOptions({
+            description: (
+              <div>
+                <p>{t(getErrori18nKey(session?.resultCode))}</p>
+                <Button
+                  variant="outline"
+                  onClick={() => close(toastId)}
+                  aria-label={String(t('close', { defaultValue: 'Close' }))}
+                  icon={<X aria-hidden />}
+                />
+              </div>
+            ),
+            severity: 'error',
+            duration: 0,
+          })
         );
         setGotErrorInOpening(true);
         return session;
@@ -1691,7 +1800,12 @@ const MemoriWidget = ({
         response?.resultMessage.startsWith('This Memori is aged restricted')
       ) {
         console.error('[REOPEN_SESSION] Age restriction error:', response);
-        toast.error(t('underageTwinSession', { age: minAge }));
+        add(
+          createAlertOptions({
+            description: t('underageTwinSession', { age: minAge }),
+            severity: 'error',
+          })
+        );
         setGotErrorInOpening(true);
       }
       // Handle authentication error
@@ -1703,7 +1817,12 @@ const MemoriWidget = ({
       // Handle other errors
       else {
         console.error('[REOPEN_SESSION] Other error:', response);
-        toast.error(t(getErrori18nKey(response.resultCode)));
+        add(
+          createAlertOptions({
+            description: t(getErrori18nKey(response.resultCode)),
+            severity: 'error',
+          })
+        );
         setGotErrorInOpening(true);
       }
     } catch (err) {
@@ -1957,9 +2076,6 @@ const MemoriWidget = ({
     processSpeechAndSendMessage,
     {
       apiUrl: `${baseUrl}/api/stt`,
-      // continuousRecording: continuousSpeech,
-      // silenceTimeout: continuousSpeechTimeout,
-      // autoStart: autoStart,
     },
     defaultEnableAudio
   );
@@ -2134,61 +2250,53 @@ const MemoriWidget = ({
     : null;
 
   const integrationProperties = (
-    integration
-      ? {
-          '--memori-chat-bubble-bg': '#fff',
-          ...(integrationConfig && !instruct
-            ? { '--memori-text-color': integrationConfig.textColor ?? '#000' }
-            : {}),
-          ...(integrationConfig?.buttonBgColor
-            ? {
-                '--memori-button-bg': integrationConfig.buttonBgColor,
-                '--memori-primary': integrationConfig.buttonBgColor,
-              }
-            : {}),
-          ...(integrationConfig?.buttonTextColor
-            ? {
-                '--memori-button-text': integrationConfig.buttonTextColor,
-              }
-            : {}),
-          ...(integrationConfig?.blurBackground
-            ? {
-                '--memori-blur-background': '5px',
-              }
-            : {
-                '--memori-blur-background': '0px',
-              }),
-          ...(integrationConfig?.innerBgColor
-            ? {
-                '--memori-inner-bg': `rgba(${
-                  integrationConfig.innerBgColor === 'dark'
-                    ? '0, 0, 0'
-                    : '255, 255, 255'
-                }, ${integrationConfig.innerBgAlpha ?? 0.4})`,
-                '--memori-inner-content-pad': '1.5rem',
-                '--memori-nav-bg-image': 'none',
-                '--memori-nav-bg': `rgba(${
-                  integrationConfig.innerBgColor === 'dark'
-                    ? '0, 0, 0'
-                    : '255, 255, 255'
-                }, ${integrationConfig?.innerBgAlpha ?? 0.4})`,
-              }
-            : {
-                '--memori-inner-content-pad': '0px',
-              }),
-        }
-      : {}
+    integration ? getChatStyles(integrationConfig) : {}
   ) as CSSProperties;
 
-  const integrationStylesheet = `
-    ${
-      preview ? '#preview, ' : applyVarsToRoot ? ':root, ' : ''
-    }memori-client, .memori-widget, .memori-drawer, .memori-modal {
-      ${Object.entries(integrationProperties)
-        .map(([key, value]) => `${key}: ${value};`)
-        .join('\n')}
-    }
-  `;
+  const integrationSelectors = [
+    preview ? '#preview' : null,
+    applyVarsToRoot ? ':root' : null,
+    integration ? 'body' : null,
+    '.memori-client',
+    '.memori-widget',
+    '.memori-drawer',
+    '.memori-modal',
+    '.memori-header',
+    '.memori-dropdown',
+    '.memori-select',
+  ]
+    .filter(Boolean)
+    .join(', ');
+
+  const integrationCssBlock = Object.entries(integrationProperties)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join('\n    ');
+
+  const integrationStylesheetParts: string[] = [];
+  if (integrationCssBlock) {
+    integrationStylesheetParts.push(
+      `${integrationSelectors} {
+    ${integrationCssBlock}
+  }`
+    );
+    integrationStylesheetParts.push(
+      `[data-theme="dark"] .memori-widget,
+  .memori-widget[data-theme="dark"],
+  [data-theme="dark"] memori-client .memori-widget,
+  memori-client[data-theme="dark"] .memori-widget {
+    ${integrationCssBlock}
+  }`
+    );
+  }
+  if (integrationConfig?.blurBackground) {
+    integrationStylesheetParts.push(
+      '.memori-widget .memori--global-background { filter: blur(5px); }'
+    );
+  }
+  const integrationStylesheet = `@layer integration {
+  ${integrationStylesheetParts.join('\n  ')}
+}
+`;
 
   const showAIicon =
     integrationConfig?.showAIicon === undefined
@@ -2366,7 +2474,7 @@ const MemoriWidget = ({
       );
       // Only check for position requirement if memori.needsPosition is true
       if (autoStart && !localPosition && memori.needsPosition) {
-        setShowPositionDrawer(true);
+        setPositionPopoverOpenState(true);
         return;
       }
 
@@ -2722,7 +2830,6 @@ const MemoriWidget = ({
             );
           }
         }
-
       }
       // Default case - just translate and activate
       else {
@@ -2736,6 +2843,16 @@ const MemoriWidget = ({
     [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]
   );
 
+  const setPositionPopoverOpen = useCallback(
+    (open: boolean) => {
+      setPositionPopoverOpenState(open);
+      if (!open && autoStart) {
+        onClickStart();
+      }
+    },
+    [autoStart, onClickStart]
+  );
+
   useEffect(() => {
     if (!clickedStart && autoStart && selectedLayout !== 'HIDDEN_CHAT') {
       onClickStart();
@@ -2886,7 +3003,9 @@ const MemoriWidget = ({
     position,
     layout: selectedLayout,
     additionalSettings,
-    setShowPositionDrawer,
+    setVenue: setPosition,
+    positionPopoverOpen,
+    setPositionPopoverOpen,
     setShowSettingsDrawer,
     setShowKnownFactsDrawer,
     setShowExpertsDrawer,
@@ -2953,7 +3072,8 @@ const MemoriWidget = ({
     baseUrl: baseUrl,
     apiUrl: client.constants.BACKEND_URL,
     position: position,
-    openPositionDrawer: () => setShowPositionDrawer(true),
+    setVenue: setPosition,
+    openPositionPopover: () => setPositionPopoverOpen(true),
     integrationConfig: integrationConfig,
     instruct: instruct,
     sessionId: sessionId,
@@ -2965,6 +3085,9 @@ const MemoriWidget = ({
     notEnoughCredits: needsCredits && !hasEnoughCredits,
     showLogin: canShowLoginButton,
     setShowLoginDrawer,
+    showChatHistory:
+      showChatHistory ?? integrationConfig?.showChatHistory ?? true,
+    setShowChatHistoryDrawer,
     user,
   };
 
@@ -3044,6 +3167,9 @@ const MemoriWidget = ({
     useMathFormatting: applyMathFormatting,
     maxTotalMessagePayload,
     maxTextareaCharacters,
+    isChatlogPanel:
+      (integrationConfig as { artifactChatLogPanel?: boolean } | undefined)
+        ?.artifactChatLogPanel === true,
   };
 
   const integrationBackground =
@@ -3058,9 +3184,12 @@ const MemoriWidget = ({
       <div className="memori--global-background no-background-image" />
     );
 
-  const integrationStyle = integration ? (
-    <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
-  ) : null;
+  const integrationStyle =
+    integration &&
+    (Object.keys(integrationProperties).length > 0 ||
+      integrationConfig?.blurBackground) ? (
+      <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
+    ) : null;
 
   const poweredBy = (
     <PoweredBy
@@ -3089,11 +3218,12 @@ const MemoriWidget = ({
 
   return (
     <div
+      ref={widgetRootRef}
       className={cx(
         'memori',
         'memori-widget',
-        `memori-layout-${selectedLayout.toLowerCase()}`,
-        `memori-controls-${controlsPosition.toLowerCase()}`,
+        `memori-layout-${String(selectedLayout).toLowerCase()}`,
+        `memori-controls-${String(controlsPosition).toLowerCase()}`,
         `memori--avatar-${integrationConfig?.avatar || 'default'}`,
         {
           'memori--auto-start': autoStart,
@@ -3106,6 +3236,12 @@ const MemoriWidget = ({
           'memori--has-active-session': !!sessionId,
         }
       )}
+      data-theme={
+        integrationConfig?.theme === 'light' ||
+        integrationConfig?.theme === 'dark'
+          ? integrationConfig.theme
+          : undefined
+      }
       data-memori-name={memori?.name}
       data-memori-id={memori?.engineMemoriID}
       data-memori-secondary-id={memori?.memoriID}
@@ -3309,26 +3445,6 @@ const MemoriWidget = ({
         />
       )}
 
-      {showPositionDrawer && (
-        <PositionDrawer
-          memori={memori}
-          open={!!showPositionDrawer}
-          venue={position}
-          setVenue={setPosition}
-          onClose={() => {
-            setShowPositionDrawer(false);
-            if (autoStart) {
-              onClickStart();
-            }
-          }}
-          drawerClassName={
-            selectedLayout === 'WEBSITE_ASSISTANT'
-              ? 'memori-drawer--above-website-assistant'
-              : undefined
-          }
-        />
-      )}
-
       {showKnownFactsDrawer && sessionId && (
         <KnownFacts
           apiClient={client}

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -1,6 +1,23 @@
+/* Hold-to-talk: tooltip uses align=topLeft so the bubble stays in view (mic sits on the trailing edge). */
+.memori-chat-inputs--mic-tooltip.memori-tooltip {
+    vertical-align: middle;
+}
+
+/* Library default is overflow: hidden auto + max-height — avoid scrollbars on short hint text */
+.memori-chat-inputs--mic-tooltip .memori-tooltip--content {
+    overflow: visible;
+    max-height: none;
+}
+
 .memori-chat-inputs--mic {
     z-index: 1;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    box-sizing: border-box;
+    padding: 0;
     margin-left: 0.33rem;
+    color: var(--memori-primary);
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
     -webkit-touch-callout: none;
@@ -13,17 +30,16 @@
 }
 
 .memori-chat-inputs--mic svg {
+    width: 20px;
+    height: 20px;
     color: var(--memori-primary, #fff);
     font-size: 1em;
     -webkit-user-select: none;
     user-select: none;
 }
 
-.memori-chat-inputs--mic:hover,
-.memori-chat-inputs--mic:active,
-.memori-chat-inputs--mic:focus {
-    border-color: var(--memori-primary) !important;
-    color: var(--memori-primary, #fff);
+.memori-chat-inputs--mic:hover {
+    background-color: var(--memori-secondary-background) !important;
 }
 
 .memori-chat-inputs--mic:active,
@@ -140,3 +156,7 @@
         animation-duration: 1.5s;
     }
 }
+
+[data-theme='dark'] .memori-chat-inputs--mic .lucide-mic {
+    color: #fff;
+}