Enable Camera on desktop, #233

enricoros · Dec 5, 2023 · 245bedb · 245bedb
1 parent e07ad4f
commit 245bedb
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 28 deletions.
diff --git a/src/apps/chat/components/composer/ButtonCameraCapture.tsx b/src/apps/chat/components/composer/ButtonCameraCapture.tsx
@@ -5,10 +5,8 @@ import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 
 import { CameraCaptureModal } from './CameraCaptureModal';
 
-const CAMERA_ENABLE_ON_DESKTOP = true;
 
-
-export function ButtonCameraCapture(props: { isMobile: boolean, onAttachImage: (file: File) => void }) {
+export function ButtonCameraCapture(props: { isMobile?: boolean, onAttachImage: (file: File) => void }) {
   // state
   const [open, setOpen] = React.useState(false);
 
@@ -19,13 +17,13 @@ export function ButtonCameraCapture(props: { isMobile: boolean, onAttachImage: (
       <IconButton variant='plain' color='neutral' onClick={() => setOpen(true)}>
         <AddAPhotoIcon />
       </IconButton>
-    ) : CAMERA_ENABLE_ON_DESKTOP ? (
+    ) : (
       <Button
         fullWidth variant='plain' color='neutral' onClick={() => setOpen(true)} startDecorator={<AddAPhotoIcon />}
         sx={{ justifyContent: 'flex-start' }}>
-        OCR
+        Camera
       </Button>
-    ) : undefined}
+    )}
 
     {/* The actual capture dialog, which will stream the video */}
     {open && <CameraCaptureModal onCloseModal={() => setOpen(false)} onAttachImage={props.onAttachImage} />}

diff --git a/src/apps/chat/components/composer/ButtonClipboardPaste.tsx b/src/apps/chat/components/composer/ButtonClipboardPaste.tsx
@@ -13,7 +13,7 @@ const pasteClipboardLegend =
     <KeyStroke combo='Ctrl + Shift + V' />
   </Box>;
 
-export function ButtonClipboardPaste(props: { isMobile: boolean, isDeveloperMode: boolean, onPaste: () => void }) {
+export function ButtonClipboardPaste(props: { isMobile?: boolean, onPaste: () => void }) {
   return props.isMobile ? (
     <IconButton onClick={props.onPaste}>
       <ContentPasteGoIcon />
@@ -24,7 +24,7 @@ export function ButtonClipboardPaste(props: { isMobile: boolean, isDeveloperMode
       title={pasteClipboardLegend}>
       <Button fullWidth variant='plain' color='neutral' startDecorator={<ContentPasteGoIcon />} onClick={props.onPaste}
               sx={{ justifyContent: 'flex-start' }}>
-        {props.isDeveloperMode ? 'Paste code' : 'Paste'}
+        Paste
       </Button>
     </Tooltip>
   );

diff --git a/src/apps/chat/components/composer/ButtonFileAttach.tsx b/src/apps/chat/components/composer/ButtonFileAttach.tsx
@@ -34,7 +34,7 @@ const attachFileLegend =
   </Stack>;
 
 
-export const ButtonFileAttach = (props: { isMobile: boolean, onAttachFilePicker: () => void }) =>
+export const ButtonFileAttach = (props: { isMobile?: boolean, onAttachFilePicker: () => void }) =>
   props.isMobile ? (
     <IconButton onClick={props.onAttachFilePicker}>
       <AttachFileOutlinedIcon />
@@ -43,7 +43,7 @@ export const ButtonFileAttach = (props: { isMobile: boolean, onAttachFilePicker:
     <Tooltip variant='solid' placement='top-start' title={attachFileLegend}>
       <Button fullWidth variant='plain' color='neutral' onClick={props.onAttachFilePicker} startDecorator={<AttachFileOutlinedIcon />}
               sx={{ justifyContent: 'flex-start' }}>
-        Attach
+        File
       </Button>
     </Tooltip>
   );
diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
@@ -118,7 +118,10 @@ export function Composer(props: {
 
   // external state
   const isMobile = useIsMobile();
-  const labsCalling = useUXLabsStore(state => state.labsCalling);
+  const { labsCalling, labsCameraDesktop } = useUXLabsStore(state => ({
+    labsCalling: state.labsCalling,
+    labsCameraDesktop: state.labsCameraDesktop,
+  }), shallow);
   const [chatModeId, setChatModeId] = React.useState<ChatModeId>('immediate');
   const [startupText, setStartupText] = useComposerStartupText();
   const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline);
@@ -360,21 +363,40 @@ export function Composer(props: {
         <Grid xs={12} md={9}><Stack direction='row' spacing={{ xs: 1, md: 2 }}>
 
           {/* Vertical (insert) buttons */}
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 0, md: 2 } }}>
+          {isMobile ? (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 0, md: 2 } }}>
 
-            {/* [mobile] Mic button */}
-            {isMobile && isSpeechEnabled && <MicButton variant={micVariant} color={micColor} onClick={handleToggleMic} />}
+              {/* [mobile] Mic button */}
+              {isSpeechEnabled && <MicButton variant={micVariant} color={micColor} onClick={handleToggleMic} />}
 
-            {/* Responsive Camera OCR button */}
-            <ButtonCameraCapture isMobile={isMobile} onAttachImage={handleAttachCameraImage} />
+              {/* Responsive Camera OCR button */}
+              <ButtonCameraCapture isMobile onAttachImage={handleAttachCameraImage} />
 
-            {/* Responsive Open Files button */}
-            <ButtonFileAttach isMobile={isMobile} onAttachFilePicker={handleAttachFilePicker} />
+              {/* Responsive Open Files button */}
+              <ButtonFileAttach isMobile onAttachFilePicker={handleAttachFilePicker} />
 
-            {/* Responsive Paste button */}
-            {supportsClipboardRead && <ButtonClipboardPaste isMobile={isMobile} isDeveloperMode={props.isDeveloperMode} onPaste={attachAppendClipboardItems} />}
+              {/* Responsive Paste button */}
+              {supportsClipboardRead && <ButtonClipboardPaste isMobile onPaste={attachAppendClipboardItems} />}
 
-          </Box>
+            </Box>
+          ) : (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 0, md: 1 } }}>
+
+              {/*<FormHelperText sx={{ mx: 'auto' }}>*/}
+              {/*  Attach*/}
+              {/*</FormHelperText>*/}
+
+              {/* Responsive Open Files button */}
+              <ButtonFileAttach onAttachFilePicker={handleAttachFilePicker} />
+
+              {/* Responsive Paste button */}
+              {supportsClipboardRead && <ButtonClipboardPaste onPaste={attachAppendClipboardItems} />}
+
+              {/* Responsive Camera OCR button */}
+              {labsCameraDesktop && <ButtonCameraCapture onAttachImage={handleAttachCameraImage} />}
+
+            </Box>
+          )}
 
           {/* Vertical stacked Edit box and Attachments */}
           <Box sx={{

diff --git a/src/apps/settings-modal/UxLabsSettings.tsx b/src/apps/settings-modal/UxLabsSettings.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { FormControl, Typography } from '@mui/joy';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import CallIcon from '@mui/icons-material/Call';
 import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
 import FormatPaintIcon from '@mui/icons-material/FormatPaint';
@@ -10,41 +11,48 @@ import YouTubeIcon from '@mui/icons-material/YouTube';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormSwitchControl } from '~/common/components/forms/FormSwitchControl';
 import { Link } from '~/common/components/Link';
+import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 
 export function UxLabsSettings() {
 
   // external state
+  const isMobile = useIsMobile();
   const {
-    labsCalling, /*labsEnhancedUI,*/ labsLlmOvertemp, labsMagicDraw, labsPersonaYTCreator, labsSplitBranching,
-    setLabsCalling, /*setLabsEnhancedUI,*/ setLabsLlmOvertemp, setLabsMagicDraw, setLabsPersonaYTCreator, setLabsSplitBranching,
+    labsCalling, labsCameraDesktop, /*labsEnhancedUI,*/ labsLlmOvertemp, labsMagicDraw, labsPersonaYTCreator, labsSplitBranching,
+    setLabsCalling, setLabsCameraDesktop, /*setLabsEnhancedUI,*/ setLabsLlmOvertemp, setLabsMagicDraw, setLabsPersonaYTCreator, setLabsSplitBranching,
   } = useUXLabsStore();
 
   return <>
 
     <FormSwitchControl
-      title={<><YouTubeIcon /> YouTube Personas</>} description={labsPersonaYTCreator ? 'Creator Enabled' : 'Disabled'}
+      title={<><YouTubeIcon color={labsPersonaYTCreator ? 'primary' : undefined} sx={{ mr: 0.25 }} /> YouTube Personas</>} description={labsPersonaYTCreator ? 'Creator Enabled' : 'Disabled'}
       checked={labsPersonaYTCreator} onChange={setLabsPersonaYTCreator}
     />
 
     <FormSwitchControl
-      title={<><FormatPaintIcon />Assisted Draw</>} description={labsMagicDraw ? 'Enabled' : 'Disabled'}
+      title={<><FormatPaintIcon color={labsMagicDraw ? 'primary' : undefined} sx={{ mr: 0.25 }} />Assisted Draw</>} description={labsMagicDraw ? 'Enabled' : 'Disabled'}
       checked={labsMagicDraw} onChange={setLabsMagicDraw}
     />
 
     <FormSwitchControl
-      title={<><CallIcon /> Voice Calls</>} description={labsCalling ? 'Call AGI' : 'Disabled'}
+      title={<><CallIcon color={labsCalling ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Voice Calls</>} description={labsCalling ? 'Call AGI' : 'Disabled'}
       checked={labsCalling} onChange={setLabsCalling}
     />
 
+    {!isMobile && <FormSwitchControl
+      title={<><AddAPhotoIcon color={labsCameraDesktop ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Webcam</>} description={labsCameraDesktop ? 'Enabled' : 'Disabled'}
+      checked={labsCameraDesktop} onChange={setLabsCameraDesktop}
+    />}
+
     <FormSwitchControl
-      title={<><VerticalSplitIcon /> Split Branching</>} description={labsSplitBranching ? 'Enabled' : 'Disabled'} disabled
+      title={<><VerticalSplitIcon color={labsSplitBranching ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Split Branching</>} description={labsSplitBranching ? 'Enabled' : 'Disabled'} disabled
       checked={labsSplitBranching} onChange={setLabsSplitBranching}
     />
 
     <FormSwitchControl
-      title={<><DeviceThermostatIcon sx={{ mr: 0.25 }} /> Overtemperature</>} description={labsLlmOvertemp ? 'LLMs ♨️' : 'Disabled'}
+      title={<><DeviceThermostatIcon color={labsLlmOvertemp ? 'primary' : undefined} sx={{ mr: 0.25 }} /> Overtemperature</>} description={labsLlmOvertemp ? 'LLMs ♨️' : 'Disabled'}
       checked={labsLlmOvertemp} onChange={setLabsLlmOvertemp}
     />
 

diff --git a/src/common/state/store-ux-labs.ts b/src/common/state/store-ux-labs.ts
@@ -15,6 +15,9 @@ interface UXLabsStore {
   labsCalling: boolean;
   setLabsCalling: (labsCalling: boolean) => void;
 
+  labsCameraDesktop: boolean;
+  setLabsCameraDesktop: (labsCameraDesktop: boolean) => void;
+
   labsEnhancedUI: boolean;
   setLabsEnhancedUI: (labsEnhancedUI: boolean) => void;
 
@@ -39,6 +42,9 @@ export const useUXLabsStore = create<UXLabsStore>()(
       labsCalling: false,
       setLabsCalling: (labsCalling: boolean) => set({ labsCalling }),
 
+      labsCameraDesktop: false,
+      setLabsCameraDesktop: (labsCameraDesktop: boolean) => set({ labsCameraDesktop }),
+
       labsEnhancedUI: false,
       setLabsEnhancedUI: (labsEnhancedUI: boolean) => set({ labsEnhancedUI }),