Call: some top-level structure

src/apps/call/AppCall.tsx

@@ -3,40 +3,48 @@ import * as React from 'react';
 import { Container, Sheet } from '@mui/joy';
 
 import { AppCallQueryParams, useRouterQuery } from '~/common/app.routes';
-import { InlineError } from '~/common/components/InlineError';
 
-import { CallUI } from './CallUI';
 import { CallWizard } from './CallWizard';
+import { Contacts } from './Contacts';
+import { Telephone } from './Telephone';
 
 
 export function AppCall() {
 
   // external state
-  const { conversationId, personaId } = useRouterQuery<AppCallQueryParams>();
+  const { conversationId, personaId: queryPersonaId } = useRouterQuery<Partial<AppCallQueryParams>>();
+
+  // state
+  const [personaId, setPersonaId] = React.useState<string | null>(queryPersonaId || null);
+
+
+  // [effect] update to query params (shall be already initally loaded)
+  React.useEffect(() => {
+    if (queryPersonaId)
+      setPersonaId(queryPersonaId);
+  }, [queryPersonaId]);
 
-  // derived state
-  const validInput = !!conversationId && !!personaId;
 
   return (
     <Sheet variant='solid' color='neutral' invertedColors sx={{
-      display: 'flex', flexDirection: 'column', justifyContent: 'center',
-      flexGrow: 1,
+      // take the full V-area (we're inside PageWrapper) and scroll as needed
+      flex: 1,
       overflowY: 'auto',
-      minHeight: 96,
+
+      // container will take the full v-area
+      display: 'grid',
     }}>
 
       <Container maxWidth='sm' sx={{
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center',
-        minHeight: '80dvh', justifyContent: 'space-evenly',
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly',
         gap: { xs: 2, md: 4 },
       }}>
 
-        {!validInput && <InlineError error={`Something went wrong. ${conversationId}:${personaId}`} />}
-
-        {validInput && (
+        {!personaId ? (
+          <Contacts personaId={personaId} setPersonaId={setPersonaId} />
+        ) : (
           <CallWizard conversationId={conversationId}>
-            <CallUI conversationId={conversationId} personaId={personaId} />
+            <Telephone conversationId={conversationId} personaId={personaId} />
           </CallWizard>
         )}
 

src/apps/call/CallWizard.tsx

@@ -75,7 +75,7 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
 }
 
 
-export function CallWizard(props: { strict?: boolean, conversationId: string, children: React.ReactNode }) {
+export function CallWizard(props: { strict?: boolean, conversationId?: string, children: React.ReactNode }) {
 
   // state
   const [chatEmptyOverride, setChatEmptyOverride] = React.useState(false);

src/apps/call/Contacts.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { Box } from '@mui/joy';
+
+import { InlineError } from '~/common/components/InlineError';
+
+
+export function Contacts(props: { personaId: string | null, setPersonaId: (personaId: string | null) => void }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly' }}>
+      <InlineError error='No Persona Selected' />
+    </Box>
+  );
+}

src/apps/call/CallUI.tsx → src/apps/call/Telephone.tsx

@@ -72,8 +72,8 @@ function CallMenuItems(props: {
 }
 
 
-export function CallUI(props: {
-  conversationId: string,
+export function Telephone(props: {
+  conversationId?: string,
   personaId: string,
 }) {
 
@@ -90,7 +90,9 @@ export function CallUI(props: {
   // external state
   const { chatLLMId, chatLLMDropdown } = useChatLLMDropdown();
   const { chatTitle, messages } = useChatStore(state => {
-    const conversation = state.conversations.find(conversation => conversation.id === props.conversationId);
+    const conversation = props.conversationId
+      ? state.conversations.find(conversation => conversation.id === props.conversationId) ?? null
+      : null;
     return {
       chatTitle: conversation ? conversationTitle(conversation) : 'no conversation',
       messages: conversation ? conversation.messages : [],