BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): add wide layout setting

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-04-30 00:45:25 +03:00
parent e9edfa5302
commit e6c7cc5589
13 changed files with 78 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
+1 -1
View File
@@ -128,7 +128,7 @@ const VisualSectionContent: React.FC = () => {
// Chat section: User message rendering, Diff layout, Mobile status bar, Show reasoning traces, Queue mode, Persist draft
const ChatSectionContent: React.FC = () => {
return <OpenChamberVisualSettings visibleSettings={['chatRenderMode', 'messageTransport', 'activityRenderMode', 'userMessageRendering', 'mermaidRendering', 'reasoning', 'showToolFileIcons', 'expandedTools', 'stickyUserHeader', 'splitAssistantMessageActions', 'diffLayout', 'mobileStatusBar', 'dotfiles', 'queueMode', 'persistDraft', 'inputSpellcheck']} />;
return <OpenChamberVisualSettings visibleSettings={['chatRenderMode', 'messageTransport', 'activityRenderMode', 'userMessageRendering', 'mermaidRendering', 'reasoning', 'showToolFileIcons', 'expandedTools', 'stickyUserHeader', 'wideChatLayout', 'splitAssistantMessageActions', 'diffLayout', 'mobileStatusBar', 'dotfiles', 'queueMode', 'persistDraft', 'inputSpellcheck']} />;
};
// Sessions section: Default model & agent, Session retention
packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+33 -2
View File
@@ -220,7 +220,7 @@ const normalizeUserMessageRenderingMode = (mode: unknown): 'markdown' | 'plain'
return mode === 'markdown' ? 'markdown' : 'plain';
};
export type VisibleSetting = 'theme' | 'pwaInstallName' | 'pwaOrientation' | 'timeFormat' | 'weekStart' | 'fontSize' | 'terminalFontSize' | 'spacing' | 'inputBarOffset' | 'mermaidRendering' | 'userMessageRendering' | 'chatRenderMode' | 'messageTransport' | 'activityRenderMode' | 'stickyUserHeader' | 'splitAssistantMessageActions' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'reasoning' | 'showToolFileIcons' | 'expandedTools' | 'queueMode' | 'terminalQuickKeys' | 'persistDraft' | 'inputSpellcheck' | 'reportUsage';
export type VisibleSetting = 'theme' | 'pwaInstallName' | 'pwaOrientation' | 'timeFormat' | 'weekStart' | 'fontSize' | 'terminalFontSize' | 'spacing' | 'inputBarOffset' | 'mermaidRendering' | 'userMessageRendering' | 'chatRenderMode' | 'messageTransport' | 'activityRenderMode' | 'stickyUserHeader' | 'wideChatLayout' | 'splitAssistantMessageActions' | 'diffLayout' | 'mobileStatusBar' | 'dotfiles' | 'reasoning' | 'showToolFileIcons' | 'expandedTools' | 'queueMode' | 'terminalQuickKeys' | 'persistDraft' | 'inputSpellcheck' | 'reportUsage';
interface OpenChamberVisualSettingsProps {
/** Which settings to show. If undefined, shows all. */
@@ -242,6 +242,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
const setUserMessageRenderingMode = useUIStore(state => state.setUserMessageRenderingMode);
const stickyUserHeader = useUIStore(state => state.stickyUserHeader);
const setStickyUserHeader = useUIStore(state => state.setStickyUserHeader);
const wideChatLayoutEnabled = useUIStore(state => state.wideChatLayoutEnabled);
const setWideChatLayoutEnabled = useUIStore(state => state.setWideChatLayoutEnabled);
const chatRenderMode = useUIStore(state => state.chatRenderMode);
const setChatRenderMode = useUIStore(state => state.setChatRenderMode);
const activityRenderMode = useUIStore(state => state.activityRenderMode);
@@ -366,6 +368,11 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
void updateDesktopSettings({ stickyUserHeader: enabled });
}, [setStickyUserHeader]);
const handleWideChatLayoutChange = React.useCallback((enabled: boolean) => {
setWideChatLayoutEnabled(enabled);
void updateDesktopSettings({ wideChatLayoutEnabled: enabled });
}, [setWideChatLayoutEnabled]);
const handleShowSplitAssistantMessageActionsChange = React.useCallback((enabled: boolean) => {
setShowSplitAssistantMessageActions(enabled);
void updateDesktopSettings({ showSplitAssistantMessageActions: enabled });
@@ -469,6 +476,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
|| shouldShow('messageTransport')
|| (shouldShow('activityRenderMode') && chatRenderMode === 'sorted')
|| shouldShow('stickyUserHeader')
|| shouldShow('wideChatLayout')
|| shouldShow('splitAssistantMessageActions')
|| shouldShow('diffLayout')
|| (shouldShow('mobileStatusBar') && isMobile)
@@ -1451,7 +1459,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
</div>
)}
{(shouldShow('stickyUserHeader') || shouldShow('splitAssistantMessageActions') || (shouldShow('mobileStatusBar') && isMobile) || shouldShow('dotfiles') || shouldShow('queueMode') || shouldShow('persistDraft') || shouldShow('showToolFileIcons') || (!isMobile && shouldShow('inputSpellcheck')) || shouldShow('reasoning')) && (
{(shouldShow('stickyUserHeader') || shouldShow('wideChatLayout') || shouldShow('splitAssistantMessageActions') || (shouldShow('mobileStatusBar') && isMobile) || shouldShow('dotfiles') || shouldShow('queueMode') || shouldShow('persistDraft') || shouldShow('showToolFileIcons') || (!isMobile && shouldShow('inputSpellcheck')) || shouldShow('reasoning')) && (
<section className="p-2 space-y-0.5">
{shouldShow('reasoning') && (
<div
@@ -1499,6 +1507,29 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
</div>
)}
{shouldShow('wideChatLayout') && (
<div
className="group flex cursor-pointer items-center gap-2 py-0.5"
role="button"
tabIndex={0}
aria-pressed={wideChatLayoutEnabled}
onClick={() => handleWideChatLayoutChange(!wideChatLayoutEnabled)}
onKeyDown={(event) => {
if (event.key === ' ' || event.key === 'Enter') {
event.preventDefault();
handleWideChatLayoutChange(!wideChatLayoutEnabled);
}
}}
>
<Checkbox
checked={wideChatLayoutEnabled}
onChange={handleWideChatLayoutChange}
ariaLabel={t('settings.openchamber.visual.field.wideChatLayoutAria')}
/>
<span className="typography-ui-label text-foreground">{t('settings.openchamber.visual.field.wideChatLayout')}</span>
</div>
)}
{shouldShow('splitAssistantMessageActions') && (
<div
className="group flex cursor-pointer items-center gap-2 py-0.5"