Purpose Selector

components/ChatArea.tsx

@@ -160,7 +160,7 @@ export function ChatArea(props: { onShowSettings: () => void, sx?: SxProps }) {
         onClearConversation={handleConversationClear} onShowSettings={props.onShowSettings}
         sx={{
           position: 'sticky', top: 0, zIndex: 20,
-          ...(process.env.NODE_ENV === 'development' ? { background: theme.vars.palette.danger.solidBg } : {}),
+          // ...(process.env.NODE_ENV === 'development' ? { background: theme.vars.palette.danger.solidBg } : {}),
         }} />
 
       <Conversation

components/Conversation.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, List, Option, Select, Stack, Typography } from '@mui/joy';
+import { AspectRatio, Box, Button, Grid, List, Stack, Typography, useTheme } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
 
 import { DMessage, useActiveConfiguration, useActiveConversation, useChatStore } from '@/lib/store-chats';
@@ -9,6 +9,7 @@ import { useSettingsStore } from '@/lib/store';
 
 
 function PurposeSelect() {
+  const theme = useTheme();
   const { setSystemPurposeId, systemPurposeId } = useActiveConfiguration();
 
   const handlePurposeChange = (purpose: SystemPurposeId | null) => {
@@ -24,26 +25,46 @@ function PurposeSelect() {
   };
 
   return (
-    <Stack direction='column' sx={{ alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }}>
+    <Stack direction='column' sx={{ justifyContent: 'center', alignItems: 'center', mx: 2, minHeight: '60vh' }}>
+
       <Box>
-        <Typography level='body3' color='neutral'>
+
+        <Typography level='body3' color='neutral' sx={{ mb: 2 }}>
           AI purpose
         </Typography>
-        <Select
-          value={systemPurposeId}
-          onChange={(e, v) => handlePurposeChange(v)}
-          sx={{ minWidth: '20vw' }}
-        >
+
+        <Grid container spacing={1}>
           {Object.keys(SystemPurposes).map(spId => (
-            <Option key={spId} value={spId}>
-              {SystemPurposes[spId as SystemPurposeId]?.title}
-            </Option>
+            <Grid key={spId} xs={4} lg={3} xl={2}>
+              <AspectRatio variant='plain' ratio={1} sx={{ minWidth: { xs: 56, lg: 78, xl: 130 } }}>
+                <Button
+                  variant={systemPurposeId === spId ? 'solid' : 'soft'}
+                  color={systemPurposeId === spId ? 'primary' : 'neutral'}
+                  onClick={() => handlePurposeChange(spId as SystemPurposeId)}
+                  sx={{
+                    flexDirection: 'column',
+                    gap: { xs: 2, lg: 3 },
+                    fontFamily: theme.vars.fontFamily.code, fontWeight: 500,
+                  }}
+                >
+                  <div style={{ fontSize: '1.875rem' }}>
+                    {SystemPurposes[spId as SystemPurposeId]?.symbol}
+                  </div>
+                  <div>
+                    {SystemPurposes[spId as SystemPurposeId]?.title}
+                  </div>
+                </Button>
+              </AspectRatio>
+            </Grid>
           ))}
-        </Select>
-        <Typography level='body2' sx={{ mt: 1, minWidth: 280 }}>
+        </Grid>
+
+        <Typography level='body2' sx={{ mt: 2 }}>
           {SystemPurposes[systemPurposeId].description}
         </Typography>
+
       </Box>
+
     </Stack>
   );
 }

components/Message.tsx

@@ -309,7 +309,7 @@ export function Message(props: { dMessage: DMessage, disableSend: boolean, onDel
   // text box css
   const chatFontCss = {
     my: 'auto',
-    fontFamily: message.role === 'assistant' ? theme.fontFamily.code : undefined,
+    fontFamily: message.role === 'assistant' ? theme.fontFamily.code : theme.fontFamily.body,
     fontSize: message.role === 'assistant' ? '14px' : '16px',
     lineHeight: 1.75,
   };

lib/data.ts

@@ -28,7 +28,7 @@ export const SystemPurposes: { [key in SystemPurposeId]: SystemPurposeData } = {
   },
   Catalyst: {
     title: 'Catalyst',
-    description: 'The growth hacker with marketing superpowers 🚀',
+    description: 'Growth hacker with marketing superpowers 🚀',
     systemMessage: 'You are a marketing extraordinaire for a booming startup fusing creativity, data-smarts, and digital prowess to skyrocket growth & wow audiences. So fun. Much meme. 🚀🎯💡',
     symbol: '🚀',
   },