feat: Text Size Setting (S / M / L / XL)

apps/webclaw/src/hooks/use-chat-settings.ts

@@ -3,11 +3,20 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 export type ThemeMode = 'system' | 'light' | 'dark'
+export type TextSize = 'sm' | 'md' | 'lg' | 'xl'
+
+export const textSizeClasses: Record<TextSize, string> = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+}
 
 export type ChatSettings = {
   showToolMessages: boolean
   showReasoningBlocks: boolean
   theme: ThemeMode
+  textSize: TextSize
 }
 
 type ChatSettingsState = {
@@ -22,6 +31,7 @@ export const useChatSettingsStore = create<ChatSettingsState>()(
         showToolMessages: true,
         showReasoningBlocks: true,
         theme: 'system',
+        textSize: 'md',
       },
       updateSettings: (updates) =>
         set((state) => ({

apps/webclaw/src/screens/chat/components/message-item.tsx

@@ -10,7 +10,7 @@ import type { ToolPart } from '@/components/prompt-kit/tool'
 import { Message, MessageContent } from '@/components/prompt-kit/message'
 import { Thinking } from '@/components/prompt-kit/thinking'
 import { Tool } from '@/components/prompt-kit/tool'
-import { useChatSettings } from '@/hooks/use-chat-settings'
+import { useChatSettings, textSizeClasses } from '@/hooks/use-chat-settings'
 import { cn } from '@/lib/utils'
 
 type MessageItemProps = {
@@ -221,6 +221,7 @@ function MessageItemComponent({
           markdown={!isUser}
           className={cn(
             'text-primary-900',
+            textSizeClasses[settings.textSize],
             !isUser
               ? 'bg-transparent w-full'
               : 'bg-primary-100 px-4 py-2.5 max-w-[85%]',

apps/webclaw/src/screens/chat/components/settings-dialog.tsx

@@ -15,9 +15,10 @@ import {
 } from '@/components/ui/dialog'
 import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsList, TabsTab } from '@/components/ui/tabs'
-import { useChatSettings } from '@/hooks/use-chat-settings'
-import type { ThemeMode } from '@/hooks/use-chat-settings'
+import { useChatSettings, textSizeClasses } from '@/hooks/use-chat-settings'
+import type { ThemeMode, TextSize } from '@/hooks/use-chat-settings'
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 
 type SettingsSectionProps = {
   title: string
@@ -154,6 +155,34 @@ export function SettingsDialog({
           </SettingsSection>
 
           <SettingsSection title="Chat">
+            <SettingsRow label="Text size">
+              <div className="flex gap-1">
+                {(['sm', 'md', 'lg', 'xl'] as const).map(function renderSize(size) {
+                  const labels: Record<TextSize, string> = {
+                    sm: 'S',
+                    md: 'M',
+                    lg: 'L',
+                    xl: 'XL',
+                  }
+                  return (
+                    <button
+                      key={size}
+                      onClick={function handleClick() {
+                        updateSettings({ textSize: size })
+                      }}
+                      className={cn(
+                        'px-2.5 py-1 rounded-md text-xs font-medium transition-colors',
+                        settings.textSize === size
+                          ? 'bg-primary-900 text-white'
+                          : 'bg-primary-100 text-primary-600 hover:bg-primary-200',
+                      )}
+                    >
+                      {labels[size]}
+                    </button>
+                  )
+                })}
+              </div>
+            </SettingsRow>
             <SettingsRow label="Show tool messages">
               <Switch
                 checked={settings.showToolMessages}