getting page show up for creating group chat

packages/desktop/src/components/MainPanel.tsx

@@ -1,13 +1,13 @@
 import { Grid, Container, Typography } from '@mui/material';
 import { blueGrey } from '@mui/material/colors';
-import React from 'react';
+import React, { useMemo } from 'react';
 import useAuth from '../providers/AuthProvider';
 import ConversationDetails from './ConversationDetails';
 import useTerminal from './Terminal';
 
 export default function MainPanel() {
   const { user } = useAuth();
-  const { selectedConversation } = useTerminal();
+  const { selectedConversation, createConversationMode } = useTerminal();
 
   // if selected conversation, show details
   // do all fetching necessary to paint things here
@@ -15,20 +15,11 @@ export default function MainPanel() {
 
   // show who is
 
-  return (
+  const pageContent = useMemo(() => {
-    <Grid
+    if (selectedConversation) return <ConversationDetails />;
-      item
+
-      xs={8}
+    if (createConversationMode)
-      sx={{
+      return (
-        backgroundColor: 'white',
-        display: 'flex',
-        flexDirection: 'column',
-        maxHeight: '100vh',
-      }}
-    >
-      {selectedConversation ? (
-        <ConversationDetails />
-      ) : (
         <Container
           maxWidth={false}
           sx={{
@@ -41,14 +32,43 @@ export default function MainPanel() {
             background: 'white',
           }}
         >
-          <Typography variant="h6">{`Hi ${
+          creating group conversation
-            user.displayName?.split(' ')[0] ?? 'there'
-          }!`}</Typography>
-          <Typography variant="caption" align="center">
-            Start a conversation with one tap <br /> or just take a breather.
-          </Typography>
         </Container>
-      )}
+      );
+
+    return (
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: 'white',
+        }}
+      >
+        <Typography variant="h6">{`Hi ${user.displayName?.split(' ')[0] ?? 'there'}!`}</Typography>
+        <Typography variant="caption" align="center">
+          Start a conversation with one tap <br /> or just take a breather.
+        </Typography>
+      </Container>
+    );
+  }, [createConversationMode, selectedConversation, user]);
+
+  return (
+    <Grid
+      item
+      xs={8}
+      sx={{
+        backgroundColor: 'white',
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: '100vh',
+      }}
+    >
+      {pageContent}
     </Grid>
   );
 }

packages/desktop/src/components/Navbar.tsx

@@ -21,6 +21,7 @@ import { blueGrey } from '@mui/material/colors';
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import { useSnackbar } from 'notistack';
 import { useKeyPressEvent } from 'react-use';
+import useTerminal from './Terminal';
 
 const Navbar = ({
   handleChangeSearchInput,
@@ -31,9 +32,10 @@ const Navbar = ({
   searchVal: string;
   isSearching: boolean;
 }) => {
-  const { logout, user } = useAuth();
   const { enqueueSnackbar } = useSnackbar();
 
+  const { handleShowCreateConvoForm } = useTerminal();
+
   const searchRef = useRef<HTMLInputElement>(null);
   const onSearchFocus = useCallback(() => {
     enqueueSnackbar('search focused');
@@ -87,7 +89,7 @@ const Navbar = ({
       </Stack>
 
       <Tooltip title={'Group conversation'}>
-        <IconButton color="default" size={'small'}>
+        <IconButton color="default" size={'small'} onClick={handleShowCreateConvoForm}>
           <FiUsers />
         </IconButton>
       </Tooltip>

packages/desktop/src/components/Terminal.tsx

@@ -72,6 +72,11 @@ interface ITerminalContext {
 
   isUserSpeaking: boolean;
   isCloudDoingMagic: boolean;
+
+  createConversationMode: boolean;
+  handleShowCreateConvoForm?: () => void;
+
+  handleEscape?: () => void;
 }
 
 const TerminalContext = React.createContext<ITerminalContext>({
@@ -80,6 +85,8 @@ const TerminalContext = React.createContext<ITerminalContext>({
 
   isUserSpeaking: false,
   isCloudDoingMagic: false,
+
+  createConversationMode: false,
 });
 
 // global audio data in memory
@@ -490,6 +497,17 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
     setAnchorEl(null);
   };
 
+  // const handleCreateConversation = useCallback(() => {
+
+  // }, [])
+
+  const [createConversationMode, setCreateConversationMode] = useState<boolean>(false);
+
+  const handleShowCreateConvoForm = useCallback(() => {
+    setSelectedConversationId(undefined);
+    setCreateConversationMode(true);
+  }, [setCreateConversationMode, setSelectedConversationId]);
+
   return (
     <TerminalContext.Provider
       value={{
@@ -501,6 +519,9 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
         selectConversation,
         isCloudDoingMagic,
         conversationContentMap,
+        createConversationMode,
+        handleShowCreateConvoForm,
+        handleEscape,
       }}
     >
       <Grid container spacing={0}>