Tweaking Beta page

docker-compose.yml

@@ -11,7 +11,7 @@ services:
       - .env
     environment:
       - PRODUCTION=0
-      - MODEL_NAME=${MODEL_NAME:-qwen2.5:3b}
+      - MODEL_NAME=${MODEL_NAME:-qwen2.5:7b}
     devices:
       - /dev/dri:/dev/dri
     depends_on:

frontend/src/NewApp/BackstoryApp.css

@@ -138,7 +138,7 @@ button {
   flex-grow: 0;
 }
 
-.About.MuiCard-root,
+.Docs.MuiCard-root,
 .assistant-message.MuiCard-root {
   border: 1px solid #E0E0E0;
   background-color: #FFFFFF;
@@ -159,7 +159,7 @@ button {
 }
 
 
-.About.MuiCard-root {
+.Docs.MuiCard-root {
   display: flex;
   flex-grow: 1;
   width: 100%;
@@ -167,20 +167,20 @@ button {
   margin-right: 0;
 }
 
-.About .MuiCardContent-root,
+.Docs .MuiCardContent-root,
 .assistant-message .MuiCardContent-root {
   padding: 0 16px !important;
   font-size: 0.9rem;
 }
 
-.About span,
+.Docs span,
 .assistant-message span {
   font-size: 0.9rem;
 }
 
 .user-message .MuiCardContent-root:last-child,
 .assistant-message .MuiCardContent-root:last-child,
-.About .MuiCardContent-root:last-child {
+.Docs .MuiCardContent-root:last-child {
     padding: 16px;
 }
 

frontend/src/NewApp/BackstoryApp.tsx

@@ -24,14 +24,13 @@ import { Scrollable } from '../Components/Scrollable';
 import { Footer } from './Components/Footer';
 import { Snack, SeverityType } from '../Components/Snack';
 import { Query } from '../Components/ChatQuery';
-import { ConversationHandle } from '../Components/Conversation';
-
+import { ConversationHandle } from './Components/Conversation';
 
 import { HomePage } from './Pages/HomePage';
 import { ChatPage } from './Pages/ChatPage';
 import { ResumeBuilderPage } from '../Pages/ResumeBuilderPage';
 // import { BackstoryThemeVisualizer } from './BackstoryThemeVisualizer';
-import { AboutPage } from './Pages/AboutPage';
+import { DocsPage } from './Pages/DocsPage';
 import { BetaPage } from './Pages/BetaPage';
 import { CreateProfilePage } from './Pages/CreateProfilePage';
 import { VectorVisualizerPage } from 'Pages/VectorVisualizerPage';
@@ -54,8 +53,8 @@ type NavigationLinkType = {
 const DefaultNavItems : NavigationLinkType[] = [
     { name: 'Chat', path: '/chat', icon: <ChatIcon /> },
     { name: 'Resume Builder', path: '/resume-builder', icon: <WorkIcon /> },
-    { name: 'RAG Visualizer', path: '/rag-visualizer', icon: <WorkIcon /> },
-    { name: 'About', path: '/about', icon: <InfoIcon /> },
+    { name: 'Knowledge Explorer', path: '/knowledge-explorer', icon: <WorkIcon /> },
+    { name: 'Docs', path: '/docs', icon: <InfoIcon /> },
     // { name: 'How It Works', path: '/how-it-works', icon: <InfoIcon/> },
     // { name: 'For Candidates', path: '/for-candidates', icon: <PersonIcon/> },
     // { name: 'For Employers', path: '/for-employers', icon: <BusinessIcon/> },
@@ -286,10 +285,10 @@ const BackstoryApp = () => {
                     {sessionId !== undefined &&
                         <Routes>
                             <Route path="/chat" element={<ChatPage ref={chatRef} setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
-                            <Route path="/about" element={<AboutPage setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
-                            <Route path="/about/:subPage" element={<AboutPage setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
+                            <Route path="/docs" element={<DocsPage setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
+                            <Route path="/docs/:subPage" element={<DocsPage setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
                             <Route path="/resume-builder" element={<ResumeBuilderPage setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
-                            <Route path="/rag-visualizer" element={<VectorVisualizerPage setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
+                            <Route path="/knowledge-explorer" element={<VectorVisualizerPage setSnack={setSnack} sessionId={sessionId} submitQuery={submitQuery} />} />
                         <Route path="/create-your-profile" element={<CreateProfilePage />} />
                             <Route path="/dashboard" element={<DashboardPage />} />
                             <Route path="/" element={<HomePage />} />
@@ -330,13 +329,6 @@ const BackstoryApp = () => {
   
 };
 
-const App = () => {
-  return (
-      <BackstoryApp />
-  );
-};
-
-
 export type {
     UserContext,
     NavigationLinkType

frontend/src/NewApp/Components/Beta.css

@@ -5,10 +5,9 @@
 .beta-clipper {
   position: absolute;
   top: 0;
-  left: -5px;
   width: 100%;
   height: 72px;
-  overflow: hidden;
+  overflow: visible;
   pointer-events: none;
   z-index: 1101;
   cursor: pointer;
@@ -31,7 +30,7 @@
 }
 
 .beta-label {
-  width: 200px;
+  width: 300px;
   position: absolute;
   display: flex;
   justify-content: center;

frontend/src/NewApp/Components/Beta.tsx

@@ -1,16 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Box from '@mui/material/Box';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material/styles';
+import { SxProps, useTheme } from '@mui/material/styles';
 
 import './Beta.css';
 
 type BetaProps = {
+    adaptive?: boolean;
     onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+    sx?: SxProps;
 }
 
 const Beta: React.FC<BetaProps> = (props : BetaProps) => {
-    const { onClick } = props;
+    const { onClick, adaptive = true, sx = {} } = props;
     const betaRef = useRef<HTMLElement | null>(null);
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -36,8 +38,8 @@ const Beta: React.FC<BetaProps> = (props : BetaProps) => {
     };
     
     return (
-        <Box className={`beta-clipper ${isMobile && "mobile"}`} onClick={(e) => { onClick && onClick(e);}}>
-            <Box ref={betaRef} className={`beta-label ${isMobile && "mobile"}`}>
+        <Box sx={sx} className={`beta-clipper ${adaptive && isMobile && "mobile"}`} onClick={(e) => { onClick && onClick(e); }}>
+            <Box ref={betaRef} className={`beta-label ${adaptive && isMobile && "mobile"}`}>
                 <Box key={animationKey} className="particles"></Box>
                 <Box>BETA</Box>
             </Box>

frontend/src/NewApp/Components/CandidateInfo.tsx

@@ -63,7 +63,7 @@ const CandidateInfo: React.FC<CandidateInfoProps> = ({ userInfo }) => {
               {userInfo.full_name}
             </Typography>
             <Chip 
-                          onClick={() => navigate('/rag-visualizer')}
+                          onClick={() => navigate('/knowledge-explorer')}
               label={formatRagSize(userInfo.rag_content_size)}
               color="primary"
               size="small"

frontend/src/NewApp/Components/Document.tsx

@@ -39,7 +39,7 @@ const Document = (props: DocumentProps) => {
         const data = await response.text();
         setDocument(data);
       } catch (error: any) {
-        console.error('Error obtaining About content information:', error);
+        console.error('Error obtaining Docs content information:', error);
         setDocument(`${filepath} not found.`);
       };
     };

frontend/src/NewApp/Components/Header.tsx

@@ -375,6 +375,7 @@ const Header: React.FC<HeaderProps> = ({
       position="fixed"
       transparent={transparent}
       className={className}
+        sx={{ overflow: "hidden" }}
     >
       <Container maxWidth="xl">
         <Toolbar disableGutters>
@@ -415,8 +416,8 @@ const Header: React.FC<HeaderProps> = ({
           </MobileDrawer>
         </Toolbar>
       </Container>
-    </StyledAppBar>
-    <Beta onClick={()=>{navigate('/about/beta');}}/>
+        <Beta sx={{ left: "-72px", "& .mobile": { right: "-72px" } }} onClick={() => { navigate('/docs/beta'); }} />
+      </StyledAppBar>
     </Box>
   );
 };

frontend/src/NewApp/Pages/AboutPage.tsx

@@ -1,422 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
-import {
-  Box,
-  Drawer,
-  AppBar,
-  Toolbar,
-  IconButton,
-  Typography,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Paper,
-  Grid,
-  Card,
-  CardContent,
-  CardActionArea,
-  Divider,
-  useTheme,
-  useMediaQuery
-} from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import CloseIcon from '@mui/icons-material/Close';
-import DescriptionIcon from '@mui/icons-material/Description';
-import CodeIcon from '@mui/icons-material/Code';
-import LayersIcon from '@mui/icons-material/Layers';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import PaletteIcon from '@mui/icons-material/Palette';
-import AnalyticsIcon from '@mui/icons-material/Analytics';
-import ViewQuiltIcon from '@mui/icons-material/ViewQuilt';
-
-import { Document } from '../Components/Document';
-import { BackstoryPageProps } from '../../Components/BackstoryTab';
-import { BackstoryUIOverviewPage } from './BackstoryUIOverviewPage';
-import { BackstoryAppAnalysisPage } from './BackstoryAppAnalysisPage';
-import { BackstoryThemeVisualizerPage } from './BackstoryThemeVisualizerPage';
-import { MockupPage } from './MockupPage';
-
-// Get appropriate icon for document type
-const getDocumentIcon = (title: string) => {
-  switch (title) {
-    case 'About':
-      return <DescriptionIcon />;
-    case 'BETA':
-      return <CodeIcon />;
-    case 'Resume Generation Architecture':
-    case 'Application Architecture':
-      return <LayersIcon />;
-    case 'UI Overview':
-    case 'UI Mockup':
-      return <DashboardIcon />;
-    case 'Theme Visualizer':
-      return <PaletteIcon />;
-    case 'App Analysis':
-      return <AnalyticsIcon />;
-    default:
-      return <ViewQuiltIcon />;
-  }
-};
-
-// Sidebar navigation component using MUI components
-const Sidebar: React.FC<{
-  currentPage: string;
-  onDocumentSelect: (docName: string, open: boolean) => void;
-  onClose?: () => void;
-  isMobile: boolean;
-}> = ({ currentPage, onDocumentSelect, onClose, isMobile }) => {
-  // Document definitions
-  const documents = [
-    { title: "About", route: "about" },
-    { title: "BETA", route: "beta" },
-    { title: "Resume Generation Architecture", route: "resume-generation" },
-    { title: "Application Architecture", route: "about-app" },
-    { title: "UI Overview", route: "ui-overview" },
-    { title: "Theme Visualizer", route: "theme-visualizer" },
-    { title: "App Analysis", route: "app-analysis" },
-    { title: "UI Mockup", route: "ui-mockup" }
-  ];
-
-  const handleItemClick = (route: string) => {
-    onDocumentSelect(route, true);
-    if (isMobile && onClose) {
-      onClose();
-    }
-  };
-
-  return (
-    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <Box sx={{
-        p: 2,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderBottom: 1,
-        borderColor: 'divider'
-      }}>
-        <Typography variant="h6" component="h2" fontWeight="bold">
-          Documentation
-        </Typography>
-        {isMobile && onClose && (
-          <IconButton
-            onClick={onClose}
-            size="small"
-            aria-label="Close navigation"
-          >
-            <CloseIcon />
-          </IconButton>
-        )}
-      </Box>
-
-      <Box sx={{
-        flexGrow: 1,
-        overflow: 'auto',
-        p: 1
-      }}>
-        <List>
-          {documents.map((doc, index) => (
-            <ListItem key={index} disablePadding>
-              <ListItemButton
-                onClick={() => handleItemClick(doc.route)}
-                selected={currentPage === doc.route}
-                sx={{
-                  borderRadius: 1,
-                  mb: 0.5
-                }}
-              >
-                <ListItemIcon sx={{
-                  color: currentPage === doc.route ? 'primary.main' : 'text.secondary',
-                  minWidth: 40
-                }}>
-                  {getDocumentIcon(doc.title)}
-                </ListItemIcon>
-                <ListItemText
-                  primary={doc.title}
-                  slotProps={{
-                    primary: {
-                      fontWeight: currentPage === doc.route ? 'medium' : 'regular',
-                    }
-                  }}
-                />
-              </ListItemButton>
-            </ListItem>
-          ))}
-        </List>
-      </Box>
-    </Box>
-  );
-};
-
-// AboutPage main component
-const AboutPage = (props: BackstoryPageProps) => {
-  const { sessionId, submitQuery, setSnack } = props;
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { paramPage = '' } = useParams();
-  const [page, setPage] = useState<string>(paramPage);
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-
-  // Track location changes
-  useEffect(() => {
-    const parts = location.pathname.split('/');
-    if (parts.length > 2) {
-      setPage(parts[2]);
-    } else {
-      setPage('');
-    }
-  }, [location]);
-
-  // Close drawer when changing to desktop view
-  useEffect(() => {
-    if (!isMobile) {
-      setDrawerOpen(false);
-    }
-  }, [isMobile]);
-
-  // Handle document navigation
-  const onDocumentExpand = (docName: string, open: boolean) => {
-    console.log("Document expanded:", { docName, open, location });
-    if (open) {
-      const parts = location.pathname.split('/');
-      if (parts.length > 2) {
-        const basePath = parts.slice(0, -1).join('/');
-        navigate(`${basePath}/${docName}`);
-      } else {
-        navigate(docName);
-      }
-    } else {
-      const basePath = location.pathname.split('/').slice(0, -1).join('/');
-      navigate(`${basePath}`);
-    }
-  };
-
-  // Toggle mobile drawer
-  const toggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
-
-  // Close the drawer
-  const closeDrawer = () => {
-    setDrawerOpen(false);
-  };
-
-  // Helper function to get document title from route
-  function documentTitleFromRoute(route: string): string {
-    const titles: Record<string, string> = {
-      'about': 'About',
-      'beta': 'BETA',
-      'resume-generation': 'Resume Generation Architecture',
-      'about-app': 'Application Architecture',
-      'ui-overview': 'UI Overview',
-      'theme-visualizer': 'Theme Visualizer',
-      'app-analysis': 'App Analysis',
-      'ui-mockup': 'UI Mockup'
-    };
-
-    return titles[route] || 'Documentation';
-  }
-
-  interface DocViewProps {
-    page: string
-  };
-  const DocView = (props: DocViewProps) => {
-    const { page } = props;
-    const title = documentTitleFromRoute(page);
-    const icon = getDocumentIcon(title);
-
-    return (
-      <Card>
-        <CardContent>
-          <Box sx={{ color: 'inherit', fontSize: "1.75rem", fontWeight: "bold", display: "flex", flexDirection: "row", gap: 1, alignItems: "center", mr: 1.5 }}>
-            {icon}
-            {title}
-          </Box>
-          <Document
-            filepath={`/docs/${page}.md`}
-            sessionId={sessionId}
-            submitQuery={submitQuery}
-            setSnack={setSnack}
-          />
-        </CardContent>
-      </Card>
-    );
-  };
-
-  // Render the appropriate content based on current page
-  function renderContent() {
-    switch (page) {
-      case 'about':
-        return <DocView page={page} />
-      case 'beta':
-        return <DocView page={page} />
-      case 'resume-generation':
-        return <DocView page={page} />
-      case 'about-app':
-        return <DocView page={page} />
-      case 'ui-overview':
-        return (<BackstoryUIOverviewPage />);
-      case 'theme-visualizer':
-        return (<Paper sx={{ m: 0, p: 1 }}><BackstoryThemeVisualizerPage /></Paper>);
-      case 'app-analysis':
-        return (<BackstoryAppAnalysisPage />);
-      case 'ui-mockup':
-        return (<MockupPage />);
-      default:
-        // Document grid for landing page
-        return (
-          <Paper sx={{ p: 3 }} elevation={1}>
-            <Typography variant="h4" component="h1" gutterBottom>
-              Documentation
-            </Typography>
-            <Typography variant="body1" color="text.secondary" paragraph>
-              Select a document from the sidebar to view detailed technical information about the application.
-            </Typography>
-
-            <Grid container spacing={2}>
-              {[
-                { title: "About", route: "about", description: "General information about the application and its purpose" },
-                { title: "BETA", route: "beta", description: "Details about the current beta version and upcoming features" },
-                { title: "Resume Generation Architecture", route: "resume-generation", description: "Technical overview of how resumes are processed and generated" },
-                { title: "Application Architecture", route: "about-app", description: "System design and technical stack information" },
-                { title: "UI Overview", route: "ui-overview", description: "Guide to the user interface components and interactions" },
-                { title: "Theme Visualizer", route: "theme-visualizer", description: "Explore and customize application themes and visual styles" },
-                { title: "App Analysis", route: "app-analysis", description: "Statistics and performance metrics of the application" },
-                { title: "UI Mockup", route: "ui-mockup", description: "Visual previews of interfaces and layout concepts" }
-              ].map((doc, index) => (
-                <Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
-                  <Card>
-                    <CardActionArea onClick={() => onDocumentExpand(doc.route, true)}>
-                      <CardContent>
-                        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                          <Box sx={{ color: 'primary.main', mr: 1.5 }}>
-                            {getDocumentIcon(doc.title)}
-                          </Box>
-                          <Typography variant="h6">{doc.title}</Typography>
-                        </Box>
-                        <Typography variant="body2" color="text.secondary" sx={{ ml: 5 }}>
-                          {doc.description}
-                        </Typography>
-                      </CardContent>
-                    </CardActionArea>
-                  </Card>
-                </Grid>
-              ))}
-            </Grid>
-          </Paper>
-        );
-    }
-  }
-
-  // Calculate drawer width
-  const drawerWidth = 240;
-
-  return (
-    <Box sx={{ display: 'flex', height: '100%' }}>
-      {/* Mobile App Bar */}
-      {isMobile && (
-        <AppBar
-          position="fixed"
-          sx={{
-            width: { sm: `calc(100% - ${drawerWidth}px)` },
-            ml: { sm: `${drawerWidth}px` },
-            display: { md: 'none' }
-          }}
-          elevation={0}
-          color="default"
-        >
-          <Toolbar>
-            <IconButton
-              aria-label="open drawer"
-              edge="start"
-              onClick={toggleDrawer}
-              sx={{ mr: 2 }}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant="h6" noWrap component="div" sx={{ color: "white" }}>
-              {page ? documentTitleFromRoute(page) : "Documentation"}
-            </Typography>
-          </Toolbar>
-        </AppBar>
-      )}
-
-      {/* Navigation drawer */}
-      <Box
-        component="nav"
-        sx={{
-          width: { md: drawerWidth },
-          flexShrink: { md: 0 }
-        }}
-      >
-        {/* Mobile drawer (temporary) */}
-        {isMobile ? (
-          <Drawer
-            variant="temporary"
-            open={drawerOpen}
-            onClose={closeDrawer}
-            ModalProps={{
-              keepMounted: true, // Better open performance on mobile
-            }}
-            sx={{
-              display: { xs: 'block', md: 'none' },
-              '& .MuiDrawer-paper': {
-                boxSizing: 'border-box',
-                width: drawerWidth
-              },
-            }}
-          >
-            <Sidebar
-              currentPage={page}
-              onDocumentSelect={onDocumentExpand}
-              onClose={closeDrawer}
-              isMobile={true}
-            />
-          </Drawer>
-        ) : (
-          // Desktop drawer (permanent)
-          <Drawer
-            variant="permanent"
-            sx={{
-              display: { xs: 'none', md: 'block' },
-              '& .MuiDrawer-paper': {
-                boxSizing: 'border-box',
-                width: drawerWidth,
-                position: 'relative',
-                height: '100%'
-              },
-            }}
-            open
-          >
-            <Sidebar
-              currentPage={page}
-              onDocumentSelect={onDocumentExpand}
-              isMobile={false}
-            />
-          </Drawer>
-        )}
-      </Box>
-
-      {/* Main content */}
-      <Box
-        component="main"
-        sx={{
-          flexGrow: 1,
-          p: 3,
-          width: { md: `calc(100% - ${drawerWidth}px)` },
-          pt: isMobile ? { xs: 8, sm: 9 } : 3, // Add padding top on mobile to account for AppBar
-          height: '100%',
-          overflow: 'auto'
-        }}
-      >
-        {renderContent()}
-      </Box>
-    </Box>
-  );
-};
-
-export { AboutPage };

frontend/src/NewApp/Pages/BackstoryAppAnalysisPage.tsx

@@ -122,7 +122,7 @@ const BackstoryAppAnalysisPage = () => {
           <Box component="ul" sx={{ pl: 4 }}>
             <li>
               <Typography variant="body1" component="div">
-                <strong>Public Navigation</strong> - Home, About, Pricing, Login/Register accessible to all users
+                <strong>Public Navigation</strong> - Home, Docs, Pricing, Login/Register accessible to all users
               </Typography>
             </li>
             <li>

frontend/src/NewApp/Pages/BackstoryUIOverviewPage.tsx

@@ -137,7 +137,7 @@ const BackstoryUIOverviewPage: React.FC = () => {
                 },
                 { 
                   title: 'Public Navigation',
-                  items: ['Home', 'About', 'Pricing', 'Login', 'Register'],
+                  items: ['Home', 'Docs', 'Pricing', 'Login', 'Register'],
                   color: 'custom.highlight',
                   borderColor: 'custom.highlight'
                 }

frontend/src/NewApp/Pages/BetaPage.tsx

@@ -14,7 +14,7 @@ import {
 import { useTheme } from '@mui/material/styles';
 import ConstructionIcon from '@mui/icons-material/Construction';
 import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
-import { Navigate } from 'react-router-dom';
+import { Beta } from '../Components/Beta';
 
 interface BetaPageProps {
   children?: React.ReactNode;
@@ -187,6 +187,7 @@ export const BetaPage: React.FC<BetaPageProps> = ({
                     <Typography color="textSecondary" sx={{ mt: 1 }}>
                       Check back soon for updates.
                     </Typography>
+                    <Beta adaptive={false} sx={{ left: "-72px", "& > div": { paddingRight: "30px", background: "gold", color: "#808080" } }} onClick={() => { navigate('/docs/beta'); }} />
                   </Box>
                 )}
               </Box>

frontend/src/NewApp/Pages/ChatPage.tsx

@@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles';
 import MuiMarkdown from 'mui-markdown';
 
 import { BackstoryPageProps } from '../../Components//BackstoryTab';
-import { Conversation, ConversationHandle } from '../../Components/Conversation';
+import { Conversation, ConversationHandle } from '../Components/Conversation';
 import { ChatQuery, Tunables } from '../../Components/ChatQuery';
 import { MessageList } from '../../Components/Message';
 import { CandidateInfo, UserInfo } from 'NewApp/Components/CandidateInfo';
@@ -16,8 +16,7 @@ import { Typography } from '@mui/material';
 const ChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((props: BackstoryPageProps, ref) => {
   const { sessionId, setSnack, submitQuery } = props;
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const [preamble, setPreamble] = useState<MessageList>([]);
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [questions, setQuestions] = useState<React.ReactElement[]>([]);
   const [user, setUser] = useState<UserInfo | undefined>(undefined)
 
@@ -26,14 +25,6 @@ const ChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((props: Back
       return;
     }
 
-    setPreamble([{
-      role: 'system',
-      disableCopy: true,
-      content: `
-What would you like to know about ${user.first_name}?
-`,
-    }]);
-
     setQuestions([
       <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
         {user.questions.map(({ question, tunables }, i: number) =>
@@ -94,7 +85,6 @@ What would you like to know about ${user.first_name}?
                     resetLabel: "chat",
                     sessionId,
                     setSnack,
-                    //   preamble: preamble,
                     defaultPrompts: questions,
                     submitQuery,
                 }} />