Integrated into UI. need mobile view for chatpage

frontend/src/components/CandidateInfo.tsx

@@ -16,6 +16,7 @@ interface CandidateInfoProps {
   candidate: Candidate;
   sx?: SxProps;
   action?: string;
+  elevation?: number;
 };
 
 const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps) => {
@@ -23,7 +24,7 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
     const {
       sx,
       action = '',
-      ...rest
+      elevation = 1
     } = props;
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -33,7 +34,7 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
   }
   return (
     <Card 
-      elevation={1}
+      elevation={elevation}
       sx={{ 
         display: "flex",
         borderColor: 'transparent',

frontend/src/pages/CandidateChatPage.tsx

@@ -25,9 +25,11 @@ import { Message } from 'components/Message';
 import { DeleteConfirmation } from 'components/DeleteConfirmation';
 import { CandidateSessionsResponse } from 'services/api-client';
 import { CandidateInfo } from 'components/CandidateInfo';
+import { useNavigate } from 'react-router-dom';
 
 const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((props: BackstoryPageProps, ref) => {
   const { apiClient, candidate } = useUser();
+  const navigate = useNavigate();
   const {
     setSnack,
     submitQuery,
@@ -150,14 +152,17 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
     }
   }, [chatSession]);
 
-  return (
-    <Box ref={ref} sx={{ width: "100%" }}>
-      { candidate && <CandidateInfo candidate={candidate} /> }
+  if (!candidate) {
+    navigate('/find-a-candidate');
+  }
 
-      <Grid container spacing={3}>
+  return (
+    <Box ref={ref} sx={{ width: "100%", height: "100%", display: "flex", flexGrow: 1, flexDirection: "column" }}>
+      {candidate && <CandidateInfo elevation={4} candidate={candidate} sx={{ minHeight: "max-content" }} />}
+
+      < Box sx={{ display: "flex", mt: 1, gap: 1, height: "100%" }}>
         {/* Sessions Sidebar */}
-        <Grid size={{ xs: 12, md: 4 }}>
-          <Paper sx={{ p: 2, height: '600px', display: 'flex', flexDirection: 'column' }}>
+        <Paper sx={{ p: 2, height: '100%', display: 'flex', flexDirection: 'column' }}>
           <Typography variant="h6" gutterBottom>
             Chat Sessions
             {sessions && (
@@ -225,11 +230,9 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
             </Box>
           )}
         </Paper>
-        </Grid>
 
         {/* Chat Interface */}
-        <Grid size={{ xs: 12, md: 8 }}>
-          <Paper sx={{ height: '600px', display: 'flex', flexDirection: 'column' }}>
+        <Paper sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
           {chatSession?.id ? (
             <>
               {/* Messages Area */}
@@ -308,8 +311,7 @@ const CandidateChatPage = forwardRef<ConversationHandle, BackstoryPageProps>((pr
             </Box>
           )}
         </Paper>
-        </Grid>
-      </Grid>
+      </Box>
     </Box>
   );
 });

src/backend/agents/candidate_chat.py

@@ -47,7 +47,6 @@ DO NOT make up a URL for an image or provide markdown syntax for embedding an im
 Always use tools, <|resume|>, and <|context|> when possible. Be concise, and never make up information. If you do not know the answer, say so.
 """
 
-
 class CandidateChat(Agent):
     """
     CandidateChat Agent