Voice Calls - Labs option

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();

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}

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<ChatModeId>('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
-                  ? <CallButtonMobile disabled={!APP_CALL_ENABLED || !props.conversationId || !chatLLM} onClick={handleCallClicked} sx={{ mr: { xs: 1, md: 2 } }} />
+                  ? <CallButtonMobile disabled={!labsCalling || !props.conversationId || !chatLLM} onClick={handleCallClicked} sx={{ mr: { xs: 1, md: 2 } }} />
                   : (isDraw || isDrawPlus)
                     ? <DrawOptionsButtonMobile onClick={handleDrawOptionsClicked} sx={{ mr: { xs: 1, md: 2 } }} />
                     : <IconButton disabled variant='plain' color='neutral' sx={{ mr: { xs: 1, md: 2 } }} />
@@ -623,7 +624,7 @@ export function Composer(props: {
             {isDesktop && <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 1, justifyContent: 'flex-end' }}>
 
               {/* [desktop] Call secondary button */}
-              {isChat && <CallButtonDesktop disabled={!APP_CALL_ENABLED || !props.conversationId || !chatLLM} onClick={handleCallClicked} />}
+              {isChat && <CallButtonDesktop disabled={!labsCalling || !props.conversationId || !chatLLM} onClick={handleCallClicked} />}
 
               {/* [desktop] Draw Options secondary button */}
               {(isDraw || isDrawPlus) && <DrawOptionsButtonDesktop onClick={handleDrawOptionsClicked} />}

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}
     />
 
+    <FormSwitchControl
+      title={<><CallIcon /> Voice Calls</>} description={labsCalling ? 'Call AGI' : 'Disabled'}
+      checked={labsCalling} onChange={setLabsCalling}
+    />
+
     <FormSwitchControl
       title={<><VerticalSplitIcon /> Split Branching</>} description={labsSplitBranching ? 'Enabled' : 'Disabled'} disabled
       checked={labsSplitBranching} onChange={setLabsSplitBranching}

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<UXLabsStore>()(
   persist(
     (set) => ({
 
+      labsCalling: false,
+      setLabsCalling: (labsCalling: boolean) => set({ labsCalling }),
+
       labsEnhancedUI: false,
       setLabsEnhancedUI: (labsEnhancedUI: boolean) => set({ labsEnhancedUI }),