Improved QnA

frontend/src/components/BackstoryQuery.tsx

@@ -23,7 +23,6 @@ const BackstoryQuery = (props: BackstoryQueryInterface): JSX.Element => {
       sx={{
         color: theme => theme.palette.custom.highlight, // Golden Ochre (#D4A017)
         borderColor: theme => theme.palette.custom.highlight,
-        m: 1,
       }}
       size="small"
       onClick={(): void => {

frontend/src/components/BackstoryTextField.tsx

@@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import { useTheme } from '@mui/material/styles';
 import './BackstoryTextField.css';
+import Box from '@mui/material/Box';
 
 // Define ref interface for exposed methods
 interface BackstoryTextFieldRef {
@@ -100,7 +101,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
     const fullStyle: CSSProperties = {
       display: 'flex',
       flexGrow: 1,
-      width: '100%',
+      // width: '100%',
       padding: '16.5px 14px',
       resize: 'none',
       overflow: 'hidden',
@@ -115,7 +116,9 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
     };
 
     return (
-      <>
+      <Box sx={{ position: 'relative', display: 'flex', flexGrow: 1, m: 0, p: 0 }}>
+        {/* Main textarea for user input */}
+        {/* Shadow textarea for height calculation */}
         <textarea
           className="BackstoryTextField"
           ref={textareaRef}
@@ -148,7 +151,7 @@ const BackstoryTextField = React.forwardRef<BackstoryTextFieldRef, BackstoryText
           readOnly
           tabIndex={-1}
         />
-      </>
+      </Box>
     );
   }
 );

frontend/src/pages/CandidateChatPage.tsx

@@ -53,11 +53,6 @@ const defaultMessage: ChatMessage = {
   metadata: emptyMetadata,
 };
 
-const defaultQuestion: CandidateQuestion = {
-  question:
-    'How well does the resume align with the job description? What are the three key strengths and two greatest weaknesses?',
-};
-
 interface CandidateChatPageProps {
   sx?: SxProps; // Optional styles for the component
 }
@@ -252,6 +247,15 @@ const CandidateChatPage = forwardRef<ConversationHandle, CandidateChatPageProps>
       return <CandidatePicker />;
     }
 
+    const candidatePossessive = `${selectedCandidate.firstName}'${
+      selectedCandidate.firstName.slice(-1) !== 's' ? 's' : ''
+    }`;
+
+    const defaultQuestions: string[] = [
+      `How well does ${candidatePossessive} resume align with the job description?`,
+      `Should ${selectedCandidate.firstName} be hired for the ${resume?.job?.title} position?`,
+    ];
+
     const welcomeMessage: ChatMessage = {
       sessionId: chatSession?.id || '',
       role: 'information',
@@ -261,9 +265,7 @@ const CandidateChatPage = forwardRef<ConversationHandle, CandidateChatPageProps>
       content:
         `Welcome to the Backstory Chat about ${selectedCandidate.fullName}` +
         (resume && ` and the ${resume.job?.title} position at ${resume.job?.company}`) +
-        `. Enter any questions you have about ${selectedCandidate.firstName}'${
+        `. Enter any questions you have about ${candidatePossessive} resume or skills, or select from the available questions.`,
-          selectedCandidate.firstName.slice(-1) !== 's' ? 's' : ''
-        } resume or skills, or select from the available questions.`,
       metadata: emptyMetadata,
     };
 
@@ -386,16 +388,30 @@ const CandidateChatPage = forwardRef<ConversationHandle, CandidateChatPageProps>
               <div ref={messagesEndRef} />
             </Scrollable>
           )}
-          <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1, p: 1, flex: 0 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 0.5,
+              p: 0.5,
+              flex: 0,
+              flexWrap: 'wrap',
+            }}
+          >
             {selectedCandidate.questions?.map((q, i) => (
               <BackstoryQuery key={i} question={q} submitQuery={handleSubmitQuestion} />
             ))}
-            {resume && (
+            {resume &&
-              <BackstoryQuery question={defaultQuestion} submitQuery={handleSubmitQuestion} />
+              defaultQuestions.map((question: string, i) => (
-            )}
+                <BackstoryQuery
+                  key={i}
+                  question={{ question }}
+                  submitQuery={handleSubmitQuestion}
+                />
+              ))}
           </Box>
           {/* Fixed Message Input */}
-          <Box sx={{ display: 'flex', gap: 1 }}>
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
             <DeleteConfirmation
               onDelete={(): void => {
                 chatSession && onDelete(chatSession);