Tweaked styles

frontend/src/App.tsx

@@ -142,7 +142,7 @@ const App = () => {
 
   const chatPreamble: MessageList = [
     {
-      role: 'info',
+      role: 'content',
       content: `
 # Welcome to Backstory
 
@@ -163,10 +163,12 @@ What would you like to know about James?
       <ChatQuery text="What are James' professional strengths?" submitQuery={handleSubmitChatQuery} />
       <ChatQuery text="What are today's headlines on CNBC.com?" submitQuery={handleSubmitChatQuery} />
     </Box>,
-    <MuiMarkdown>
+    <Box sx={{ p: 1 }}>
-      As with all LLM interactions, the results may not be 100% accurate. If you have questions about my career,
+      <MuiMarkdown>
-      I'd love to hear from you. You can send me an email at **james_backstory@ketrenos.com**.
+        As with all LLM interactions, the results may not be 100% accurate. If you have questions about my career,
-    </MuiMarkdown>
+        I'd love to hear from you. You can send me an email at **james_backstory@ketrenos.com**.
+      </MuiMarkdown>
+    </Box>
   ];
 
 

frontend/src/ChatBubble.tsx

@@ -87,6 +87,21 @@ function ChatBubble({ role, isFullWidth, children, sx, className }: ChatBubblePr
       padding: '10px 16px',
       boxShadow: '0 1px 3px rgba(216, 58, 58, 0.15)', // Subtle shadow with red tint
     },
+    'content': {
+      ...defaultStyle,
+      backgroundColor: '#F5F2EA', // Light cream background for easy reading
+      border: `1px solid ${theme.palette.custom.highlight}`, // Golden Ochre border
+      borderRadius: 0,
+      maxWidth: '100%', // Full width to maximize reading space
+      alignSelf: 'center', // Centered in the chat
+      color: theme.palette.text.primary, // Charcoal Black for maximum readability
+      padding: '8px 8px', // More generous padding for better text framing
+      marginBottom: '20px', // Space between content and conversation
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)', // Subtle elevation
+      fontSize: '0.9rem', // Slightly smaller than default
+      lineHeight: '1.3', // More compact line height
+      fontFamily: theme.typography.fontFamily, // Consistent font with your theme
+    },
   };
 
   return (

frontend/src/DocumentViewer.tsx

@@ -118,8 +118,8 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
     });
 
     if (reduced.length > 0) {
-      // First message is always 'info'
+      // First message is always 'user'
-      reduced[0].role = 'info';
+      reduced[0].role = 'assistant';
       setHasJobDescription(true);
     }
 
@@ -173,8 +173,8 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
 
     /* If there are any messages, there is a resume */
     if (reduced.length > 0) {
-      // First message is always 'info'
+      // First message is always 'content'
-      reduced[0].role = 'info';
+      reduced[0].role = 'content';
       setHasResume(true);
     }
 
@@ -198,7 +198,8 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
       if (reduced[0].role === "user") {
         reduced.splice(0, 1);
       }
-      reduced[0].role = 'info';
+      // First message is always 'content'
+      reduced[0].role = 'content';
       setHasFacts(true);
     }
 

frontend/src/Message.tsx

@@ -29,7 +29,7 @@ import { Tooltip } from '@mui/material';
 import { VectorVisualizer } from './VectorVisualizer';
 import { SetSnackType } from './Snack';
 
-type MessageRoles = 'info' | 'user' | 'assistant' | 'system' | 'status' | 'error';
+type MessageRoles = 'info' | 'user' | 'assistant' | 'system' | 'status' | 'error' | 'content';
 
 type MessageData = {
   role: MessageRoles,