From 2dfa78fbe02bf0b2fe775752005d88b1da48cd32 Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Fri, 24 Nov 2023 10:56:48 -0800 Subject: [PATCH] Voice Calls - Labs option --- src/apps/call/AppCall.tsx | 3 --- .../chat/components/applayout/usePersonaDropdown.tsx | 6 +++--- src/apps/chat/components/composer/Composer.tsx | 7 ++++--- src/apps/settings-modal/UxLabsSettings.tsx | 10 ++++++++-- src/common/state/store-ux-labs.ts | 6 ++++++ 5 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/apps/call/AppCall.tsx b/src/apps/call/AppCall.tsx index 41062708b..bdcaf5797 100644 --- a/src/apps/call/AppCall.tsx +++ b/src/apps/call/AppCall.tsx @@ -10,9 +10,6 @@ import { CallUI } from './CallUI'; import { CallWizard } from './CallWizard'; -export const APP_CALL_ENABLED = false; - - export function AppCall() { // external state const { query } = useRouter(); diff --git a/src/apps/chat/components/applayout/usePersonaDropdown.tsx b/src/apps/chat/components/applayout/usePersonaDropdown.tsx index 8fefce21b..f66536123 100644 --- a/src/apps/chat/components/applayout/usePersonaDropdown.tsx +++ b/src/apps/chat/components/applayout/usePersonaDropdown.tsx @@ -4,14 +4,13 @@ import { shallow } from 'zustand/shallow'; import { ListItemButton, ListItemDecorator } from '@mui/joy'; import CallIcon from '@mui/icons-material/Call'; -import { APP_CALL_ENABLED } from '../../../call/AppCall'; - import { SystemPurposeId, SystemPurposes } from '../../../../data'; import { AppBarDropdown } from '~/common/layout/AppBarDropdown'; import { DConversationId, useChatStore } from '~/common/state/store-chats'; import { launchAppCall } from '~/common/app.routes'; import { useUIPreferencesStore } from '~/common/state/store-ui'; +import { useUXLabsStore } from '~/common/state/store-ux-labs'; function AppBarPersonaDropdown(props: { @@ -55,6 +54,7 @@ function AppBarPersonaDropdown(props: { export function usePersonaIdDropdown(conversationId: DConversationId | null) { // external state + const labsCalling = useUXLabsStore(state => state.labsCalling); const { systemPurposeId } = useChatStore(state => { const conversation = state.conversations.find(conversation => conversation.id === conversationId); return { @@ -69,7 +69,7 @@ export function usePersonaIdDropdown(conversationId: DConversationId | null) { if (conversationId && systemPurposeId) useChatStore.getState().setSystemPurposeId(conversationId, systemPurposeId); }} - onCall={APP_CALL_ENABLED ? () => { + onCall={labsCalling ? () => { if (conversationId && systemPurposeId) launchAppCall(conversationId, systemPurposeId); } : undefined} diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx index d1d2c4b18..55399df6a 100644 --- a/src/apps/chat/components/composer/Composer.tsx +++ b/src/apps/chat/components/composer/Composer.tsx @@ -15,7 +15,6 @@ import StopOutlinedIcon from '@mui/icons-material/StopOutlined'; import TelegramIcon from '@mui/icons-material/Telegram'; import type { ChatModeId } from '../../AppChat'; -import { APP_CALL_ENABLED } from '../../../call/AppCall'; import { ContentReducer } from '~/modules/aifn/summarize/ContentReducer'; import { LLMOptionsOpenAI } from '~/modules/llms/vendors/openai/openai.vendor'; @@ -36,6 +35,7 @@ import { useDebouncer } from '~/common/components/useDebouncer'; import { useGlobalShortcut } from '~/common/components/useGlobalShortcut'; import { useIsMobile } from '~/common/components/useMatchMedia'; import { useUIPreferencesStore } from '~/common/state/store-ui'; +import { useUXLabsStore } from '~/common/state/store-ux-labs'; import { ButtonCameraCapture } from './ButtonCameraCapture'; import { ButtonClipboardPaste } from './ButtonClipboardPaste'; @@ -135,6 +135,7 @@ export function Composer(props: { // external state const isMobile = useIsMobile(); + const labsCalling = useUXLabsStore(state => state.labsCalling); const [chatModeId, setChatModeId] = React.useState('immediate'); const [startupText, setStartupText] = useComposerStartupText(); const enterIsNewline = useUIPreferencesStore(state => state.enterIsNewline); @@ -585,7 +586,7 @@ export function Composer(props: { {/* [mobile] bottom-corner secondary button */} {isMobile && (isChat - ? + ? : (isDraw || isDrawPlus) ? : @@ -623,7 +624,7 @@ export function Composer(props: { {isDesktop && {/* [desktop] Call secondary button */} - {isChat && } + {isChat && } {/* [desktop] Draw Options secondary button */} {(isDraw || isDrawPlus) && } diff --git a/src/apps/settings-modal/UxLabsSettings.tsx b/src/apps/settings-modal/UxLabsSettings.tsx index e237e5e85..40874c6e1 100644 --- 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 CallIcon from '@mui/icons-material/Call'; import FormatPaintIcon from '@mui/icons-material/FormatPaint'; import VerticalSplitIcon from '@mui/icons-material/VerticalSplit'; import YouTubeIcon from '@mui/icons-material/YouTube'; @@ -15,8 +16,8 @@ export function UxLabsSettings() { // external state const { - /*labsEnhancedUI,*/ labsMagicDraw, labsPersonaYTCreator, labsSplitBranching, - /*setLabsEnhancedUI,*/ setLabsMagicDraw, setLabsPersonaYTCreator, setLabsSplitBranching, + labsCalling, /*labsEnhancedUI,*/ labsMagicDraw, labsPersonaYTCreator, labsSplitBranching, + setLabsCalling, /*setLabsEnhancedUI,*/ setLabsMagicDraw, setLabsPersonaYTCreator, setLabsSplitBranching, } = useUXLabsStore(); return <> @@ -31,6 +32,11 @@ export function UxLabsSettings() { checked={labsMagicDraw} onChange={setLabsMagicDraw} /> + Voice Calls} description={labsCalling ? 'Call AGI' : 'Disabled'} + checked={labsCalling} onChange={setLabsCalling} + /> + Split Branching} description={labsSplitBranching ? 'Enabled' : 'Disabled'} disabled checked={labsSplitBranching} onChange={setLabsSplitBranching} diff --git a/src/common/state/store-ux-labs.ts b/src/common/state/store-ux-labs.ts index 056146a19..721c68cc9 100644 --- a/src/common/state/store-ux-labs.ts +++ b/src/common/state/store-ux-labs.ts @@ -12,6 +12,9 @@ import { persist } from 'zustand/middleware'; */ interface UXLabsStore { + labsCalling: boolean; + setLabsCalling: (labsCalling: boolean) => void; + labsEnhancedUI: boolean; setLabsEnhancedUI: (labsEnhancedUI: boolean) => void; @@ -30,6 +33,9 @@ export const useUXLabsStore = create()( persist( (set) => ({ + labsCalling: false, + setLabsCalling: (labsCalling: boolean) => set({ labsCalling }), + labsEnhancedUI: false, setLabsEnhancedUI: (labsEnhancedUI: boolean) => set({ labsEnhancedUI }),