set up for dialog for creating convo

packages/desktop/src/components/MainPanel.tsx

@@ -9,7 +9,7 @@ import { useRendersCount } from 'react-use';
 
 export default function MainPanel() {
   const { user } = useAuth();
-  const { selectedConversation, createConversationMode } = useTerminal();
+  const { selectedConversation } = useTerminal();
 
   // if selected conversation, show details
   // do all fetching necessary to paint things here
@@ -23,24 +23,6 @@ export default function MainPanel() {
   const pageContent = useMemo(() => {
     if (selectedConversation) return <ConversationDetails />;
 
-    if (createConversationMode)
-      return (
-        <Container
-          maxWidth={false}
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: 2,
-            flex: 1,
-            background: 'white',
-          }}
-        >
-          creating group conversation
-        </Container>
-      );
-
     return (
       <Container
         maxWidth={false}
@@ -60,7 +42,7 @@ export default function MainPanel() {
         </Typography>
       </Container>
     );
-  }, [createConversationMode, selectedConversation, user]);
+  }, [selectedConversation, user]);
 
   return (
     <Grid

packages/desktop/src/components/NewConversationDialog.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Container, Dialog, IconButton } from '@mui/material';
+import { FiX } from 'react-icons/fi';
+
+export default function NewConversationDialog({
+  open,
+  handleClose,
+}: {
+  open: boolean;
+  handleClose: () => void;
+}) {
+  return (
+    <Dialog fullScreen open={open} onClose={handleClose}>
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: 'white',
+          position: 'relative',
+        }}
+      >
+        <IconButton sx={{ position: 'absolute', top: 10, right: 10 }}>
+          <FiX />
+        </IconButton>
+      </Container>
+    </Dialog>
+  );
+}

packages/desktop/src/components/Terminal.tsx

@@ -22,6 +22,7 @@ import {
   ListItemIcon,
   Fab,
   Switch,
+  Dialog,
 } from '@mui/material';
 import { blueGrey } from '@mui/material/colors';
 import { FiZap, FiHeadphones, FiLogOut, FiMonitor, FiSun } from 'react-icons/fi';
@@ -48,6 +49,7 @@ import { ContentBlock, ContentType } from '@nirvana/core/src/models/content.mode
 import Navbar from './Navbar';
 import MainPanel from './MainPanel';
 import { ConversationList } from './ConversationList';
+import NewConversationDialog from './NewConversationDialog';
 type ConversationMap = {
   [conversationId: string]: Conversation;
 };
@@ -378,6 +380,8 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
     navigator.mediaDevices
       .getUserMedia({ audio: true })
       .then((localUserMedia: MediaStream) => {
+        localUserMedia.getTracks().forEach((track) => track.stop());
+
         setUserAudioStream(localUserMedia);
 
         const userMediaRecoder = new MediaRecorder(localUserMedia);
@@ -496,7 +500,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
 
   // }, [])
 
-  const [createConversationMode, setCreateConversationMode] = useState<boolean>(false);
+  const [createConversationMode, setCreateConversationMode] = useState<boolean>(true);
 
   const handleShowCreateConvoForm = useCallback(() => {
     setSelectedConversationId(undefined);
@@ -687,6 +691,9 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
       </Grid>
 
       {children}
+
+      {/* create chat dialog */}
+      <NewConversationDialog open={createConversationMode} handleClose={handleEscape} />
     </TerminalContext.Provider>
   );
 }