@memori.ai/memori-react 9.0.0-alpha.16 → 9.0.0-alpha.18

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -1,9 +1,9 @@
-/* Hold-to-talk: tooltip uses align=topLeft so the bubble stays in view (mic sits on the trailing edge). */
+/* Hold-to-talk: tooltip chrome only — button look owned by IconButton */
+
 .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;
@@ -11,148 +11,15 @@
 
 .memori-chat-inputs--mic {
     z-index: 1;
-    width: 34px;
-    min-width: 34px;
-    height: 34px;
-    box-sizing: border-box;
     flex-shrink: 0;
-    padding: 0;
-    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;
-    -o-user-drag: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.memori-chat-inputs--mic svg {
-    width: 18px;
-    height: 18px;
-    color: inherit;
-    font-size: 1em;
-    -webkit-user-select: none;
     user-select: none;
 }
 
-.memori-chat-inputs--mic:hover {
-    background-color: #f2eef5 !important;
-    color: #555 !important;
-}
-
-.memori-chat-inputs--mic:active,
-.memori-chat-inputs--mic:focus {
-    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 */
-@media (hover: none) and (pointer: coarse) {
-    .memori-chat-inputs--mic:active {
-        transform: scale(0.95);
-        transition: transform 0.1s ease;
-    }
-
-    .memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active {
-        background-color: #f2eef5;
-    }
-}
-
-@keyframes micBtnActivePulse {
-    0% {
-        transform: scale(1.25);
-    }
-
-    25% {
-        transform: scale(1.4);
-    }
-
-    50% {
-        transform: scale(1.3);
-    }
-
-    75% {
-        transform: scale(1.4);
-    }
-
-    100% {
-        transform: scale(1.2);
-    }
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-    position: relative;
-    color: red !important;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-touch-callout: none;
-    transform: scale(1.5);
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::before,
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    animation: micBtnActivePulse 2s infinite;
-    background: var(--memori-primary);
-    content: '';
-    opacity: 0.2;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-    top: 5%;
-    left: 5%;
-    width: 90%;
-    height: 90%;
-    animation-delay: 0.3s;
-    opacity: 0.3;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:active,
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:focus {
-    border-color: red !important;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
-    color: red !important;
-}
-
 .memori-chat-inputs--mic-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content {
     top: -50%;
     right: 115%;
@@ -164,53 +31,5 @@
     font-size: 0.85em;
     opacity: 0;
     text-align: center;
-    /* left: 0; */
     transform: translateY(-100%);
 }
-
-/* Mobile-specific improvements for listening state */
-@media (hover: none) and (pointer: coarse) {
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-        transform: scale(1.3);
-    }
-
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening::before,
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-        animation-duration: 1.5s;
-    }
-}
-
-[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;
-}
-
-/* Light hover surface (#f2eef5) — keep the icon black in dark mode for contrast */
-.memori-widget[data-theme='dark'] .memori-chat-inputs--mic:hover,
-.memori-widget.memori-layout-fullpage[data-theme='dark'] .memori-chat-inputs--mic:hover,
-[data-theme='dark'] .memori-widget.memori-layout-fullpage .memori-chat-inputs--mic:hover,
-.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-chat-inputs--mic:hover,
-[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic:hover,
-.memori-widget.memori-layout-website_assistant[data-theme='dark'] .memori-chat-inputs--mic:hover,
-[data-theme='dark'] .memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic:hover,
-.memori-widget[data-theme='dark'] .memori-chat-inputs--trailing .memori-chat-inputs--mic:hover {
-    color: #000 !important;
-}
-
-.memori-widget[data-theme='dark'] .memori-chat-inputs--mic:hover .lucide-mic,
-.memori-widget.memori-layout-fullpage[data-theme='dark'] .memori-chat-inputs--mic:hover .lucide-mic,
-[data-theme='dark'] .memori-widget.memori-layout-fullpage .memori-chat-inputs--mic:hover .lucide-mic,
-.memori-widget.memori-layout-hidden_chat[data-theme='dark'] .memori-chat-inputs--mic:hover .lucide-mic,
-[data-theme='dark'] .memori-widget.memori-layout-hidden_chat .memori-chat-inputs--mic:hover .lucide-mic,
-.memori-widget.memori-layout-website_assistant[data-theme='dark'] .memori-chat-inputs--mic:hover .lucide-mic,
-[data-theme='dark'] .memori-widget.memori-layout-website_assistant .memori-chat-inputs--mic:hover .lucide-mic {
-    color: #000 !important;
-}

package/src/components/MicrophoneButton/MicrophoneButton.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Props as ChatInputProps } from '../ChatInputs/ChatInputs';
 import { Mic } from 'lucide-react';
-import { Button, Tooltip } from '@memori.ai/ui';
+import { Tooltip } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import { useTranslation } from 'react-i18next';
 
 export interface Props {
@@ -112,10 +113,10 @@ const MicrophoneButton = ({
       }}
     >
       <div onContextMenu={handleContextMenu}>
-        <Button
-          variant="ghost"
+        <IconButton
           size="sm"
-          className={`memori-chat-inputs--mic${listening ? ' memori-chat-inputs--mic--listening' : ''}`}
+          className="memori-chat-inputs--mic"
+          recording={!!listening}
           aria-label={listening ? listeningHint : idleHint}
           aria-pressed={!!listening}
           disabled={disabled}
@@ -124,7 +125,6 @@ const MicrophoneButton = ({
           onMouseUp={stopHold}
           onTouchEnd={handleTouchEnd}
           onMouseLeave={stopHold}
-          // shape="circle"
           icon={<Mic />}
         />
       </div>

package/src/components/MobileSessionPanel/MobileSessionPanel.css

@@ -197,8 +197,7 @@
     justify-content: center;
     border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
     border-radius: 12px;
-    /* background: var(--memori-main-background); */
-    color: var(--memori-primary);
+    color: var(--memori-icon-button-icon, color-mix(in oklch, var(--memori-text-color, #111827) 72%, transparent));
 }
 
 [data-theme='dark'] .memori-mobile-session-panel--action-icon {
@@ -206,13 +205,33 @@
     color: #fff;
 }
 
+.memori-mobile-session-panel--logout .memori-mobile-session-panel--action-icon {
+    color: #a53b45;
+}
+
+.memori-mobile-session-panel--action:focus-visible .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
+.memori-mobile-session-panel--action:hover:not(:disabled) .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
+[data-theme='dark'] .memori-mobile-session-panel--action:focus-visible .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
+[data-theme='dark'] .memori-mobile-session-panel--action:hover:not(:disabled) .memori-mobile-session-panel--action-icon {
+    color: var(--memori-primary);
+}
+
 .memori-mobile-session-panel--action-icon svg {
     width: 1rem;
     max-width: 1rem;
     height: 1rem;
     max-height: 1rem;
     flex-shrink: 0;
-    /* color: var(--memori-primary); */
+    color: inherit;
 }
 
 .memori-mobile-session-panel--action-copy {
@@ -272,10 +291,6 @@
     gap: 0.5rem;
 }
 
-.memori-mobile-session-panel--logout .memori-mobile-session-panel--action-icon {
-    color: #a53b45;
-}
-
 .memori-mobile-session-panel--logout-label {
     font-size: 1.02rem;
     font-weight: 500;

package/src/components/MobileSessionPanel/MobileSessionPanel.tsx

@@ -79,6 +79,8 @@ export interface MobileSessionPanelProps {
   history?: Message[];
   aiUsageTitle?: string;
   isLoggedIn?: boolean;
+  /** When false, hide profile / login / logout controls (authToken alone must not surface them). */
+  showLogin?: boolean;
   loginLabel?: string;
   onLogin?: () => void;
 }
@@ -179,11 +181,14 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
   history = [],
   aiUsageTitle,
   isLoggedIn = false,
+  showLogin = false,
   loginLabel = 'Log in',
   onLogin,
   venue,
   setVenue,
 }) => {
+  const showAuthControls = showLogin;
+  const showProfileControls = showAuthControls && isLoggedIn;
   const panelRef = useRef<HTMLElement>(null);
   const dialogRef = useRef<HTMLDivElement>(null);
   const panelTitleId = 'mobile-session-panel-title';
@@ -465,7 +470,7 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
         {!isPopover && <div className="memori-mobile-session-panel--handle" />}
         {activeView === 'session' ? (
           <>
-            {isLoggedIn && (
+            {showProfileControls && (
               <div className="memori-mobile-session-panel--user">
                 <div className="memori-dropdown--avatar-wrap">
                   {avatarURL ? (
@@ -582,9 +587,6 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                           {resolvedKnownFactsHint}
                         </span>
                       </span>
-                      <span className="memori-mobile-session-panel--action-trailing">
-                        <ChevronRight size={16} />
-                      </span>
                     </Button>
                   </li>
                 )}
@@ -671,7 +673,7 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                 </li>
               ))}
             </ul>
-            {isLoggedIn && (
+            {showProfileControls && (
               <Button
                 variant="toolbar"
                 size="sm"
@@ -687,7 +689,7 @@ const MobileSessionPanel: React.FC<MobileSessionPanelProps> = ({
                 </span>
               </Button>
             )}
-            {!isLoggedIn && (
+            {showAuthControls && !isLoggedIn && (
               <div className="memori-mobile-session-panel--login-cta-wrap">
                 <Button
                   variant="toolbar"

package/src/components/PositionPopover/PositionPopover.tsx

@@ -5,6 +5,7 @@ import {
   useAlertManager,
   createAlertOptions,
 } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import { MapPin, Pencil } from 'lucide-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,16 +32,21 @@ export interface PositionPopoverProps {
   triggerButtonVariant?: React.ComponentProps<typeof Button>['variant'];
   triggerAriaLabel: string;
   positionerClassName?: string;
+  /** When true, start browser geolocation as soon as the popover opens. */
+  autoStartGeolocation?: boolean;
 }
 
 export interface PositionPopoverContentProps {
   venue?: Venue;
   setVenue: (venue?: Venue) => void;
+  /** When true, start browser geolocation as soon as the panel mounts (e.g. StartPanel CTA). */
+  autoStartGeolocation?: boolean;
 }
 
 export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
   venue,
   setVenue,
+  autoStartGeolocation = false,
 }) => {
   const { t } = useTranslation();
   const { add } = useAlertManager();
@@ -55,6 +61,7 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
   const [suggestions, setSuggestions] = useState<NominatimItem[]>([]);
   const geoGenRef = useRef(0);
   const autocompleteInputRef = useRef<HTMLInputElement>(null);
+  const autoStartedRef = useRef(false);
 
   const sharingActive = geolocationLoading || hasShareableCoords(venue);
 
@@ -200,6 +207,17 @@ export const PositionPopoverContent: React.FC<PositionPopoverContentProps> = ({
     startGeolocation();
   }, [geolocationLoading, setVenue, sharingActive, startGeolocation]);
 
+  useEffect(() => {
+    if (!autoStartGeolocation) {
+      autoStartedRef.current = false;
+      return;
+    }
+    if (autoStartedRef.current) return;
+    if (hasShareableCoords(venue) || geolocationLoading) return;
+    autoStartedRef.current = true;
+    startGeolocation();
+  }, [autoStartGeolocation, geolocationLoading, startGeolocation, venue]);
+
   useEffect(() => {
     if (!editingLocation) return;
     const id = requestAnimationFrame(() => {
@@ -313,9 +331,10 @@ const PositionPopover: React.FC<PositionPopoverProps> = ({
   open,
   onOpenChange,
   triggerClassName,
-  triggerButtonVariant = 'primary',
+  triggerButtonVariant = 'toolbar',
   triggerAriaLabel,
   positionerClassName,
+  autoStartGeolocation = false,
 }) => {
   const sharingActive = hasShareableCoords(venue);
 
@@ -333,15 +352,16 @@ const PositionPopover: React.FC<PositionPopoverProps> = ({
           className: triggerClassName,
           render: (props: React.ComponentProps<typeof Button>) => {
             return (
-              <Button
+              <IconButton
                 {...props}
                 type="button"
                 variant={triggerButtonVariant}
+                active={open}
                 className={cx(
                   'memori-header--button',
                   'memori-header--button--position',
                   sharingActive && 'memori-header--button--position--active',
-                  open && 'memori-button--active'
+                  triggerClassName
                 )}
                 aria-label={triggerAriaLabel}
                 aria-expanded={open}
@@ -357,7 +377,13 @@ const PositionPopover: React.FC<PositionPopoverProps> = ({
           ),
         },
       }}
-      content={<PositionPopoverContent venue={venue} setVenue={setVenue} />}
+      content={
+        <PositionPopoverContent
+          venue={venue}
+          setVenue={setVenue}
+          autoStartGeolocation={open && autoStartGeolocation}
+        />
+      }
     >
       {null}
     </Popover>

package/src/components/ShareButton/ShareButton.css

@@ -23,8 +23,9 @@
     max-height: 1rem;
 }
 
-.memori-share-button .memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--memori-primary, #3b82f6) 40%, transparent);
+.memori-share-button .memori-icon-button.memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
+    /* Soft active owned by IconButton.css */
+    box-shadow: none;
 }
 
 .memori-share-button--trigger-menu-item {

package/src/components/ShareButton/ShareButton.tsx

@@ -16,6 +16,7 @@ import {
   createAlertOptions,
   Tooltip,
 } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import cx from 'classnames';
 import {
   Tenant,
@@ -549,28 +550,26 @@ const ShareButton: React.FC<Props> = ({
           showChevron={false}
           className="memori-share-button--trigger"
           render={(props: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
-            <Button
+            <IconButton
               {...props}
               variant={triggerVariant}
+              active={isShareMenuOpen}
               title={String(triggerLabel || t('widget.share') || 'Share')}
               aria-label={String(
                 triggerLabel || t('widget.share') || 'Share'
               )}
               icon={<Share2 aria-hidden />}
-              className={cx(
-                {
-                  'memori-share-button--trigger-menu-item':
-                    triggerMode === 'menu-item',
-                },
-                isShareMenuOpen && 'memori-button--active'
-              )}
+              className={cx({
+                'memori-share-button--trigger-menu-item':
+                  triggerMode === 'menu-item',
+              })}
             >
               {triggerMode === 'menu-item' || triggerLabel ? (
                 <span className="memori-header--action-label">
                   {triggerLabel || t('widget.share')}
                 </span>
               ) : undefined}
-            </Button>
+            </IconButton>
           )}
         />
       </Tooltip>

package/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`renders ShareButton aligned left unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r1e:"
           tabindex="0"
           title="widget.share"
@@ -99,7 +99,7 @@ exports[`renders ShareButton unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r6:"
           tabindex="0"
           title="widget.share"
@@ -182,7 +182,7 @@ exports[`renders ShareButton with button not primary unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:ru:"
           tabindex="0"
           title="widget.share"
@@ -265,7 +265,7 @@ exports[`renders ShareButton with other tenant img set unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r1u:"
           tabindex="0"
           title="widget.share"
@@ -348,7 +348,7 @@ exports[`renders ShareButton with share chat unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r26:"
           tabindex="0"
           title="widget.share"
@@ -431,7 +431,7 @@ exports[`renders ShareButton with tenant img set unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r1m:"
           tabindex="0"
           title="widget.share"
@@ -514,7 +514,7 @@ exports[`renders ShareButton with title unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:rm:"
           tabindex="0"
           title="widget.share"
@@ -597,7 +597,7 @@ exports[`renders ShareButton with url unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:re:"
           tabindex="0"
           title="widget.share"
@@ -680,7 +680,7 @@ exports[`renders ShareButton without qr code unchanged 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="widget.share"
-          class="memori-button memori-button--ghost memori-button--md memori-button--icon-only"
+          class="memori-button memori-button--toolbar memori-button--sm memori-button--icon-only memori-icon-button"
           id="base-ui-:r16:"
           tabindex="0"
           title="widget.share"

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -51,7 +51,7 @@ const integrationStylesheet =
 const dataTheme =
   integrationConfig?.theme === 'light' || integrationConfig?.theme === 'dark'
     ? integrationConfig.theme
-    : undefined;
+    : 'light';
 
 const Template: Story<Props> = args => (
   <I18nWrapper>

package/src/components/UploadButton/UploadButton.css

@@ -64,29 +64,11 @@
     display: inline-flex;
 }
 
-/* Main Upload Button */
-.memori--unified-upload-button {
+/* Main Upload Button — chrome from IconButton */
+.memori--unified-upload-button.memori-icon-button {
     position: relative;
-    display: flex;
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #e0e0e0;
-    border-radius: 50%;
-    background-color: #f5f5f5;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.memori--unified-upload-button:hover {
-    background-color: #efefef;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transform: translateY(-1px);
 }
 
-/* Document Button */
 .memori--document-upload-button {
     position: relative;
     display: flex;

package/src/components/UploadButton/UploadButton.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { Upload as UploadIcon } from 'lucide-react';
 import { Spin, Tooltip, useAlertManager } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import cx from 'classnames';
 import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
@@ -590,13 +591,10 @@ ${file.textAssetUrl || ''}
   const isUploadDisabled = disabled || isLoading || hasReachedMediaLimit;
 
   const uploadButton = (
-    <button
+    <IconButton
       ref={buttonRef}
       type="button"
       className={cx(
-        'memori-button',
-        'memori-button--circle',
-        'memori-button--icon-only',
         'memori-share-button--button',
         'memori--conversation-button',
         'memori--unified-upload-button'
@@ -611,7 +609,7 @@ ${file.textAssetUrl || ''}
       ) : (
         <UploadIcon className="memori--upload-icon" />
       )}
-    </button>
+    </IconButton>
   );
 
   return (