fix: default value for chat layout style

frontend/src/components/feature/chat/ChatMessage/LeftRightLayout/LeftRightLayout.tsx

@@ -19,9 +19,6 @@ import useOutsideClick from "@/hooks/useOutsideClick"
 import { MessageContextMenu } from "../MessageActions/MessageActions"
 import { QuickActions } from "../MessageActions/QuickActions/QuickActions"
 
-// @ts-ignore
-const CHAT_STYLE = frappe.boot.chat_style
-
 export interface Props {
     message: Message
     user: UserFields | undefined
@@ -78,6 +75,9 @@ export const LeftRightLayout = ({ message, user, isActive, isHighlighted, onRepl
         }
     }
 
+    // @ts-ignore
+    const CHAT_STYLE = window.frappe?.boot?.chat_style ?? 'Simple'
+
     const alignToRight = CHAT_STYLE === "Left-Right" && currentUser === userID && !is_bot_message
 
     return (

frontend/src/components/feature/chat/ChatMessage/MessageActions/QuickActions/QuickActions.tsx

@@ -13,9 +13,6 @@ import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner'
 import { CreateThreadActionButton } from './CreateThreadButton'
 import clsx from 'clsx'
 
-// @ts-ignore
-const CHAT_STYLE = frappe.boot.chat_style
-
 const QUICK_EMOJIS = ['👍', '✅', '👀', '🎉']
 
 interface QuickActionsProps extends MessageContextMenuProps {
@@ -64,6 +61,9 @@ export const QuickActions = ({ message, onReply, onEdit, isEmojiPickerOpen, setI
         })
     }
 
+    // @ts-ignore
+    const CHAT_STYLE = window.frappe?.boot?.chat_style ?? 'Simple'
+
     return (
         <Box
             ref={toolbarRef}

frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx

@@ -28,9 +28,6 @@ import { ThreadMessage } from './Renderers/ThreadMessage'
 import OnLeaveBadge from '@/components/common/UserLeaveBadge'
 import { LeftRightLayout } from './LeftRightLayout/LeftRightLayout'
 
-// @ts-ignore
-const CHAT_STYLE = frappe.boot.chat_style
-
 interface MessageBlockProps {
     message: Message,
     setDeleteMessage: (message: Message) => void,
@@ -112,6 +109,9 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM
 
     const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false)
 
+    // @ts-ignore
+    const CHAT_STYLE = window.frappe?.boot?.chat_style ?? 'Simple'
+
     return (
         <>
             {CHAT_STYLE === 'Left-Right' ? <LeftRightLayout

frontend/src/pages/settings/Appearance.tsx

@@ -37,6 +37,7 @@ const Appearance = () => {
             fieldname: 'chat_style',
             value: style
         }).then(() => {
+            window.frappe.boot.chat_style = style
             mutate()
             toast.success('Chat style updated')
         }).catch((e) => {
@@ -59,7 +60,7 @@ const Appearance = () => {
 
                         <Separator className={'w-full bg-slate-4'} />
 
-                        {chatStyle && <ChatLayouts chatStyle={chatStyle?.message?.chat_style} setChatStyle={setChatStyle} appearance={appearance} />}
+                        <ChatLayouts chatStyle={chatStyle?.message?.chat_style ?? 'Simple'} setChatStyle={setChatStyle} appearance={appearance} />
                     </Flex>
                 </Stack>
             </SettingsContentContainer>
@@ -74,7 +75,7 @@ const Themes = ({ appearance, setAppearance }: { appearance: string, setAppearan
 
     return (
         <Stack gap='3'>
-            <Heading as='h3' className="not-cal" size='3' weight='medium'>Theme</Heading>
+            <Heading as='h3' className="not-cal" size='2' weight='bold'>Theme</Heading>
             <Box maxWidth="910px">
                 <RadioCards.Root value={appearance} defaultValue={appearance} columns={{ initial: '1', sm: '3' }}>
                     <Flex direction="column" align="center" gap='3'>
@@ -105,7 +106,7 @@ const Themes = ({ appearance, setAppearance }: { appearance: string, setAppearan
 }
 
 
-const ChatLayouts = ({ chatStyle, setChatStyle, appearance }: { chatStyle: 'Simple' | 'Left-Right', setChatStyle: (style: string) => void, appearance: string }) => {
+const ChatLayouts = ({ chatStyle = 'Simple', setChatStyle, appearance }: { chatStyle?: 'Simple' | 'Left-Right', setChatStyle: (style: string) => void, appearance: string }) => {
 
     const getImageSrc = (chatStyle: "Simple" | "Left-Right") => {
         const lightModeImages = {
@@ -136,20 +137,20 @@ const ChatLayouts = ({ chatStyle, setChatStyle, appearance }: { chatStyle: 'Simp
 
     return (
         <Stack gap='3'>
-            <Heading as='h3' className="not-cal" size='3' weight='medium'>Chat Layout</Heading>
+            <Heading as='h3' className="not-cal" size='2' weight='bold'>Chat Layout</Heading>
             <Box maxWidth="600px">
                 {chatStyle && <RadioCards.Root value={chatStyle} onValueChange={(value) => setChatStyle(value)} columns={{ initial: '1', sm: '2' }}>
                     <Flex direction="column" align="center" gap='3'>
                         <RadioCards.Item value="Simple" className="p-0 cursor-pointer">
                             <img src={getImageSrc("Simple")} className="w-full h-auto object-cover" />
                         </RadioCards.Item>
-                        <Text weight="bold">Simple</Text>
+                        <Text weight="medium">Simple</Text>
                     </Flex>
                     <Flex direction="column" align="center" gap='3'>
                         <RadioCards.Item value="Left-Right" className="p-0 cursor-pointer">
                             <img src={getImageSrc("Left-Right")} className="w-full h-auto object-cover" />
                         </RadioCards.Item>
-                        <Text weight="bold">Left-Right</Text>
+                        <Text weight="medium">Left-Right</Text>
                     </Flex>
                 </RadioCards.Root>}
             </Box>

raven/boot.py

@@ -21,5 +21,4 @@ def boot_session(bootinfo):
 	else:
 		bootinfo.tenor_api_key = "AIzaSyAWkuhLwbMxOlvn_o5fxBke1grUZ7F3ma4"  # should we remove this?
 
-	if chat_style:
-		bootinfo.chat_style = chat_style
+	bootinfo.chat_style = chat_style if chat_style else "Simple"