stale state conversation as part of onboarding

packages/desktop/src/components/ConversationDetails.tsx

@@ -31,7 +31,13 @@ import useTerminal from './Terminal';
 
 export default function ConversationDetails() {
   const { user } = useAuth();
-  const { getUser, selectedConversation, selectConversation, isCloudDoingMagic } = useTerminal();
+  const {
+    getUser,
+    selectedConversation,
+    conversationContentMap,
+    selectConversation,
+    isCloudDoingMagic,
+  } = useTerminal();
 
   const rendersCount = useRendersCount();
   console.warn('RENDER COUNT | CONVERSATION DETAILS | ', rendersCount);
@@ -79,44 +85,33 @@ export default function ConversationDetails() {
   // TODO: uncheck priority or not
   // soft max of 10...not going to enforce by counting all in database, but relying on client side list of convos
 
-  return (
-    <>
-      <Container maxWidth={false} sx={{ position: 'relative', flex: 1, overflow: 'auto' }}>
-        <ConversationHistory />
-
-        {/* <Box
-          sx={{
-            position: 'absolute',
-            zIndex: 10,
-            bottom: 0,
-            right: 0,
-            padding: 3,
-          }}
-        >
-          <Fab color="primary" aria-label="add" size="medium">
-            <FiSun />
-          </Fab>
-        </Box> */}
-      </Container>
-    </>
-  );
-}
-
-function ConversationHistory() {
-  const { isCloudDoingMagic, selectedConversation, conversationContentMap } = useTerminal();
-
   const contentBlocks = useMemo(() => {
     return conversationContentMap[selectedConversation.id] ?? [];
   }, [conversationContentMap, selectedConversation.id]);
 
-  if (contentBlocks.length === 0)
+  if (contentBlocks.length === 0) {
     return (
-      <Stack justifyContent={'center'} alignItems={'center'}>
+      <Container
+        maxWidth={false}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 2,
+          flex: 1,
+          background: 'white',
+        }}
+      >
+        <Typography variant="h6">{`Ready?!`}</Typography>
         <Typography variant="caption">Get the party started!</Typography>
-      </Stack>
+        <Typography variant="caption">Look at the controls at the bottom right!</Typography>
+      </Container>
     );
+  }
 
   return (
+    <Container maxWidth={false} sx={{ position: 'relative', flex: 1, overflow: 'auto' }}>
       <Container maxWidth="xs">
         <Stack
           justifyContent={'flex-start'}
@@ -159,5 +154,6 @@ function ConversationHistory() {
           )}
         </Stack>
       </Container>
+    </Container>
   );
 }