diff --git a/src/common/attachment-drafts/attachment-sources/AttachmentSources.tsx b/src/common/attachment-drafts/attachment-sources/AttachmentSources.tsx index b9d7d926d..17cd9ee9b 100644 --- a/src/common/attachment-drafts/attachment-sources/AttachmentSources.tsx +++ b/src/common/attachment-drafts/attachment-sources/AttachmentSources.tsx @@ -2,12 +2,13 @@ import * as React from 'react'; import { keyframes } from '@emotion/react'; import type { FileWithHandle } from 'browser-fs-access'; -import { Box, Button, Checkbox, ColorPaletteProp, Divider, Dropdown, IconButton, ListItem, ListItemDecorator, Menu, MenuButton, MenuItem } from '@mui/joy'; +import { Box, Button, Checkbox, ColorPaletteProp, Dropdown, IconButton, ListDivider, ListItem, ListItemDecorator, Menu, MenuButton, MenuItem } from '@mui/joy'; import AddRoundedIcon from '@mui/icons-material/AddRounded'; import AddToDriveRoundedIcon from '@mui/icons-material/AddToDriveRounded'; import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded'; import CameraAltOutlinedIcon from '@mui/icons-material/CameraAltOutlined'; import ContentPasteGoIcon from '@mui/icons-material/ContentPasteGo'; +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded'; import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor'; @@ -35,10 +36,11 @@ const animationMenuItem = keyframes` from {opacity: 0;transform: translateY(-6px const _style = { menuItem: { - py: 1, // pl: 3, // pr: 2, + py: 0.5, // was 1 minHeight: 60, + // minHeight: '3.25rem', // now 52, was 60 } as const, menuItemContent: { display: 'flex', @@ -58,6 +60,24 @@ const _style = { }; +// Live feed record button - returns null if onClick is undefined +function LiveFeedButton(props: { isActive: boolean, onClick: () => void }) { + return ( + { + e.stopPropagation(); + props.onClick(); + }} + > + + + ); +} + + // Rich menu item (used in menu-rich mode) function RichMenuItem(props: { name: React.ReactNode; @@ -67,6 +87,7 @@ function RichMenuItem(props: { delay?: number; disabled?: boolean; color?: ColorPaletteProp; + endAction?: React.ReactNode; }) { return ( + {props.endAction && ( + + {props.endAction} + + )} ); } @@ -107,7 +133,7 @@ function AutoDownloadToggle(props: { delay?: number }) { return <> - + void, + onStartLiveScreenFeed?: () => void, // callbacks onAttachClipboard: () => void, onAttachFiles: (files: FileWithHandle[], errorMessage: string | null) => void, @@ -299,7 +330,15 @@ function AttachmentSources(props: { // // Screen // - } onClick={handleTakeScreenCapture} disabled={capturingScreen} /> + } + disabled={capturingScreen} + onClick={handleTakeScreenCapture} + endAction={!isMessage && props.onStartLiveScreenFeed && } + /> )} {/* Camera */} @@ -308,7 +347,14 @@ function AttachmentSources(props: { // // Camera // - } onClick={props.onOpenCamera} /> + } + description='Capture photos with optional OCR' + onClick={props.onOpenCamera} + endAction={!isMessage && props.onStartLiveCameraFeed && } + /> )} @@ -412,25 +458,51 @@ function AttachmentSources(props: { } - description='Auto-converts images and text to the best format' + // description='Auto-converts images and text to the best format' + description='Auto-adapts images and text' onClick={props.onAttachClipboard} delay={0.06} /> )} + {/*{!props.onlyImages && props.canBrowse && (*/} + {/* */} + {/* */} + {/* event.stopPropagation()}*/} + {/* sx={{ ml: 0.375 }}*/} + {/* slotProps={{*/} + {/* label: {*/} + {/* sx: {*/} + {/* fontSize: 'sm',*/} + {/* fontWeight: 'md',*/} + {/* },*/} + {/* },*/} + {/* }}*/} + {/* label='Download and attach links'*/} + {/* />*/} + {/* */} + {/*)}*/} + + {/* Divider before labs features */} - {(props.hasScreenCapture || props.hasCamera) && } + {(props.hasScreenCapture || props.hasCamera) && } {/* Screen Capture */} {props.hasScreenCapture && ( } - description={screenCaptureError ? `Error: ${screenCaptureError}` : 'Capture windows, tabs, or screens'} + description={screenCaptureError ? `Error: ${screenCaptureError}` : 'Capture tabs, apps, and screens'} onClick={handleTakeScreenCapture} disabled={capturingScreen} color={screenCaptureError ? 'danger' : undefined} delay={0.08} + endAction={props.onStartLiveScreenFeed && } /> )} @@ -439,9 +511,10 @@ function AttachmentSources(props: { } - description='Capture photos with optional text recognition' + description='Capture photos with optional OCR' onClick={props.onOpenCamera} delay={0.1} + endAction={props.onStartLiveCameraFeed && } /> )}