Attachments: by default use the Menu on desktop, not the inlines

src/apps/chat/components/composer/Composer.tsx

@@ -136,7 +136,8 @@ export function Composer(props: {
   // external state
   const { showPromisedOverlay } = useOverlayComponents();
   const { newChat: appChatNewChatIntent } = useRouterQuery<Partial<AppChatIntent>>();
-  const { labsShowCost, labsShowShortcutBar } = useUXLabsStore(useShallow(state => ({
+  const { labsComposerAttachmentsInline, labsShowCost, labsShowShortcutBar } = useUXLabsStore(useShallow(state => ({
+    labsComposerAttachmentsInline: state.labsComposerAttachmentsInline,
     labsShowCost: state.labsShowCost,
     labsShowShortcutBar: state.labsShowShortcutBar,
   })));
@@ -816,8 +817,9 @@ export function Composer(props: {
 
                 {/* [desktop] Attachment Sources: dropdown menu or inline buttons */}
                 <AttachmentSourcesMemo
-                  mode='inline-buttons'
-                  color={showTint}
+                  mode={!labsComposerAttachmentsInline ? 'menu-rich' : 'inline-buttons'}
+                  color={!labsComposerAttachmentsInline ? (showTint || 'neutral') : showTint}
+                  richButtonStandOut={!isText && !isAppend}
                   canBrowse={hasComposerBrowseCapability}
                   hasScreenCapture={supportsScreenCapture}
                   hasCamera={supportsCameraCapture()}

src/apps/settings-modal/UxLabsSettings.tsx

@@ -4,6 +4,7 @@ import { FormControl, Switch, Typography } from '@mui/joy';
 import CodeIcon from '@mui/icons-material/Code';
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import LocalAtmOutlinedIcon from '@mui/icons-material/LocalAtmOutlined';
+import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';
 import ShortcutIcon from '@mui/icons-material/Shortcut';
 import SpeedIcon from '@mui/icons-material/Speed';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
@@ -23,6 +24,7 @@ export function UxLabsSettings() {
     labsShowCost, setLabsShowCost,
     labsAutoHideComposer, setLabsAutoHideComposer,
     labsShowShortcutBar, setLabsShowShortcutBar,
+    labsComposerAttachmentsInline, setLabsComposerAttachmentsInline,
   } = useUXLabsStore();
 
   return <>
@@ -60,6 +62,11 @@ export function UxLabsSettings() {
       checked={labsShowShortcutBar} onChange={setLabsShowShortcutBar}
     />}
 
+    <FormSwitchControl
+      title={<><AttachFileRoundedIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Attachment Buttons</>} description={labsComposerAttachmentsInline ? 'Enabled' : 'Disabled'}
+      checked={labsComposerAttachmentsInline} onChange={setLabsComposerAttachmentsInline}
+    />
+
     <FormSwitchControl
       title={<><EditNoteIcon sx={{ fontSize: 'lg', mr: 0.5, mb: 0.25 }} />Auto-hide input</>} description={labsAutoHideComposer ? 'Hover to show' : 'Always visible'}
       checked={labsAutoHideComposer} onChange={setLabsAutoHideComposer}

src/common/stores/store-ux-labs.ts

@@ -28,6 +28,9 @@ interface UXLabsStore {
   labsShowShortcutBar: boolean;
   setLabsShowShortcutBar: (labsShowShortcutBar: boolean) => void;
 
+  labsComposerAttachmentsInline: boolean;
+  setLabsComposerAttachmentsInline: (labsComposerAttachmentsInline: boolean) => void;
+
 }
 
 export const useUXLabsStore = create<UXLabsStore>()(
@@ -52,6 +55,9 @@ export const useUXLabsStore = create<UXLabsStore>()(
       labsShowShortcutBar: true,
       setLabsShowShortcutBar: (labsShowShortcutBar: boolean) => set({ labsShowShortcutBar }),
 
+      labsComposerAttachmentsInline: false,
+      setLabsComposerAttachmentsInline: (labsComposerAttachmentsInline: boolean) => set({ labsComposerAttachmentsInline }),
+
     }),
     {
       name: 'app-ux-labs',