|
| 1 | +/** |
| 2 | + * ChatTextSizeContext |
| 3 | + * |
| 4 | + * App-wide "Chat text size" preference — scales the typography of the |
| 5 | + * conversation transcript without resizing the rest of the app. |
| 6 | + * |
| 7 | + * Unlike the OS-level window zoom wired to the View menu |
| 8 | + * (`webContents.setZoomFactor`), which scales the entire UI (sidebar, toolbar, |
| 9 | + * composer, icons, spacing), this preference only affects the reading text in |
| 10 | + * chat. It works by reflecting the choice onto `<html>` as |
| 11 | + * `data-chat-text-size="small|medium|large"`; the global CSS in `index.css` |
| 12 | + * maps that to a `--chat-font-scale` custom property, which the chat transcript |
| 13 | + * container (`.chat-text-scope` in `ChatDisplay`) consumes via |
| 14 | + * `font-size: calc(1em * var(--chat-font-scale))`. Because the scale is |
| 15 | + * `em`-relative it is exactly neutral at `medium` (1×) and scales the inherited |
| 16 | + * message text up/down at `small` (0.9×) / `large` (1.15×). |
| 17 | + * |
| 18 | + * The preference is persisted in `localStorage` (renderer-only, no backend), |
| 19 | + * mirroring the other lightweight UI prefs in `lib/local-storage.ts` and the |
| 20 | + * sibling `ReduceMotionContext`. |
| 21 | + */ |
| 22 | + |
| 23 | +import React, { |
| 24 | + createContext, |
| 25 | + useContext, |
| 26 | + useState, |
| 27 | + useEffect, |
| 28 | + useCallback, |
| 29 | + type ReactNode, |
| 30 | +} from 'react' |
| 31 | +import * as storage from '@/lib/local-storage' |
| 32 | + |
| 33 | +export type ChatTextSize = 'small' | 'medium' | 'large' |
| 34 | + |
| 35 | +const CHAT_TEXT_SIZES: readonly ChatTextSize[] = ['small', 'medium', 'large'] |
| 36 | + |
| 37 | +const DEFAULT_CHAT_TEXT_SIZE: ChatTextSize = 'medium' |
| 38 | + |
| 39 | +interface ChatTextSizeContextType { |
| 40 | + chatTextSize: ChatTextSize |
| 41 | + setChatTextSize: (value: ChatTextSize) => void |
| 42 | +} |
| 43 | + |
| 44 | +const ChatTextSizeContext = createContext<ChatTextSizeContextType | null>(null) |
| 45 | + |
| 46 | +const CHAT_TEXT_SIZE_ATTR = 'data-chat-text-size' |
| 47 | + |
| 48 | +/** Guard against malformed persisted values. */ |
| 49 | +function normalize(value: unknown): ChatTextSize { |
| 50 | + return CHAT_TEXT_SIZES.includes(value as ChatTextSize) |
| 51 | + ? (value as ChatTextSize) |
| 52 | + : DEFAULT_CHAT_TEXT_SIZE |
| 53 | +} |
| 54 | + |
| 55 | +/** Reflect the preference onto <html> so the global CSS var can react. */ |
| 56 | +function applyChatTextSizeAttribute(size: ChatTextSize): void { |
| 57 | + document.documentElement.setAttribute(CHAT_TEXT_SIZE_ATTR, size) |
| 58 | +} |
| 59 | + |
| 60 | +export function ChatTextSizeProvider({ children }: { children: ReactNode }) { |
| 61 | + const [chatTextSize, setChatTextSizeState] = useState<ChatTextSize>(() => |
| 62 | + normalize(storage.get<ChatTextSize>(storage.KEYS.chatTextSize, DEFAULT_CHAT_TEXT_SIZE)), |
| 63 | + ) |
| 64 | + |
| 65 | + // Keep the DOM attribute in sync (also covers the initial value on mount). |
| 66 | + useEffect(() => { |
| 67 | + applyChatTextSizeAttribute(chatTextSize) |
| 68 | + }, [chatTextSize]) |
| 69 | + |
| 70 | + const setChatTextSize = useCallback((value: ChatTextSize) => { |
| 71 | + const next = normalize(value) |
| 72 | + setChatTextSizeState(next) |
| 73 | + storage.set(storage.KEYS.chatTextSize, next) |
| 74 | + applyChatTextSizeAttribute(next) |
| 75 | + }, []) |
| 76 | + |
| 77 | + return ( |
| 78 | + <ChatTextSizeContext.Provider value={{ chatTextSize, setChatTextSize }}> |
| 79 | + {children} |
| 80 | + </ChatTextSizeContext.Provider> |
| 81 | + ) |
| 82 | +} |
| 83 | + |
| 84 | +export function useChatTextSize(): ChatTextSizeContextType { |
| 85 | + const ctx = useContext(ChatTextSizeContext) |
| 86 | + if (!ctx) { |
| 87 | + throw new Error('useChatTextSize must be used within a ChatTextSizeProvider') |
| 88 | + } |
| 89 | + return ctx |
| 90 | +} |
0 commit comments