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/App.tsx
+8
View File
@@ -222,6 +222,7 @@ function App({ apis }: AppProps) {
const [initRetryExhausted, setInitRetryExhausted] = React.useState(false);
const [initRetryEpoch, setInitRetryEpoch] = React.useState(0);
const [manualInitRetrying, setManualInitRetrying] = React.useState(false);
const wideChatLayoutEnabled = useUIStore((state) => state.wideChatLayoutEnabled);
const isDesktopRuntime = React.useMemo(() => isDesktopShell(), []);
const setPlanModeEnabled = useFeatureFlagsStore((state) => state.setPlanModeEnabled);
const [bootInjectionStatus, setBootInjectionStatus] = React.useState<BootInjectionStatus>(() => {
@@ -250,6 +251,13 @@ function App({ apis }: AppProps) {
setIsVSCodeRuntime(apis.runtime.isVSCode);
}, [apis.runtime.isVSCode]);
React.useEffect(() => {
document.documentElement.classList.toggle('wide-chat-layout', wideChatLayoutEnabled);
return () => {
document.documentElement.classList.remove('wide-chat-layout');
};
}, [wideChatLayoutEnabled]);
React.useEffect(() => {
registerRuntimeAPIs(apis);
return () => registerRuntimeAPIs(null);
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"
packages/ui/src/lib/desktop.ts
+1
View File
@@ -133,6 +133,7 @@ export type DesktopSettings = {
mermaidRenderingMode?: 'svg' | 'ascii';
userMessageRenderingMode?: 'markdown' | 'plain';
stickyUserHeader?: boolean;
wideChatLayoutEnabled?: boolean;
showSplitAssistantMessageActions?: boolean;
fontSize?: number;
terminalFontSize?: number;
packages/ui/src/lib/i18n/messages/en.settings.ts
+2
View File
@@ -1394,6 +1394,8 @@ export const settingsDict = {
'settings.openchamber.visual.field.showReasoningTraces': 'Show Reasoning Traces',
'settings.openchamber.visual.field.stickyUserHeaderAria': 'Sticky user header',
'settings.openchamber.visual.field.stickyUserHeader': 'Sticky User Header',
'settings.openchamber.visual.field.wideChatLayoutAria': 'Wide chat layout',
'settings.openchamber.visual.field.wideChatLayout': 'Wide Chat Layout',
'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': 'Inline assistant actions',
'settings.openchamber.visual.field.showSplitAssistantMessageActions': 'Inline Assistant Actions',
'settings.openchamber.visual.field.showSplitAssistantMessageActionsTooltip': 'Show Copy Answer, Save as image, and Read aloud on assistant text blocks that appear before later tool calls in the same response.',
packages/ui/src/lib/i18n/messages/es.settings.ts
+2
View File
@@ -1394,6 +1394,8 @@ export const settingsDict = {
"settings.openchamber.visual.field.showReasoningTraces": "Mostrar trazas de razonamiento",
"settings.openchamber.visual.field.stickyUserHeaderAria": "Encabezado del usuario fijo",
"settings.openchamber.visual.field.stickyUserHeader": "Encabezado de usuario fijo",
"settings.openchamber.visual.field.wideChatLayoutAria": "Diseño de chat ancho",
"settings.openchamber.visual.field.wideChatLayout": "Diseño de chat ancho",
"settings.openchamber.visual.field.showSplitAssistantMessageActionsAria": "Acciones en línea del asistente",
"settings.openchamber.visual.field.showSplitAssistantMessageActions": "Acciones en línea del asistente",
"settings.openchamber.visual.field.showSplitAssistantMessageActionsTooltip": "Muestra Copiar respuesta, Guardar como imagen y Leer en voz alta en bloques de texto del asistente que aparecen antes de llamadas a herramientas posteriores dentro de la misma respuesta.",
packages/ui/src/lib/i18n/messages/ko.settings.ts
+2
View File
@@ -1394,6 +1394,8 @@ export const settingsDict = {
'settings.openchamber.visual.field.showReasoningTraces': 'Reasoning Trace 표시',
'settings.openchamber.visual.field.stickyUserHeaderAria': '고정 사용자 헤더',
'settings.openchamber.visual.field.stickyUserHeader': '고정 사용자 헤더',
'settings.openchamber.visual.field.wideChatLayoutAria': '넓은 채팅 레이아웃',
'settings.openchamber.visual.field.wideChatLayout': '넓은 채팅 레이아웃',
'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': '인라인 어시스턴트 작업',
'settings.openchamber.visual.field.showSplitAssistantMessageActions': '인라인 어시스턴트 작업',
'settings.openchamber.visual.field.showSplitAssistantMessageActionsTooltip': '같은 응답에서 이후 도구 호출 앞에 나타나는 어시스턴트 텍스트 블록에 답변 복사, 이미지로 저장, 소리 내어 읽기 작업을 표시합니다.',
packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
+2
View File
@@ -1394,6 +1394,8 @@ export const settingsDict = {
"settings.openchamber.visual.field.showReasoningTraces": "Mostrar rastros de raciocínio",
"settings.openchamber.visual.field.stickyUserHeaderAria": "Cabeçalho do usuário fixo",
"settings.openchamber.visual.field.stickyUserHeader": "Cabeçalho do usuário fixo",
"settings.openchamber.visual.field.wideChatLayoutAria": "Layout de chat amplo",
"settings.openchamber.visual.field.wideChatLayout": "Layout de chat amplo",
"settings.openchamber.visual.field.showSplitAssistantMessageActionsAria": "Ações inline do assistente",
"settings.openchamber.visual.field.showSplitAssistantMessageActions": "Ações inline do assistente",
"settings.openchamber.visual.field.showSplitAssistantMessageActionsTooltip": "Mostra Copiar resposta, Salvar como imagem e Ler em voz alta em blocos de texto do assistente que aparecem antes de chamadas de ferramenta posteriores na mesma resposta.",
packages/ui/src/lib/i18n/messages/uk.settings.ts
+2
View File
@@ -1394,6 +1394,8 @@ export const settingsDict = {
"settings.openchamber.visual.field.showReasoningTraces": "Показати сліди міркувань",
"settings.openchamber.visual.field.stickyUserHeaderAria": "Закріплений заголовок користувача",
"settings.openchamber.visual.field.stickyUserHeader": "Закріплений заголовок користувача",
"settings.openchamber.visual.field.wideChatLayoutAria": "Широкий макет чату",
"settings.openchamber.visual.field.wideChatLayout": "Широкий макет чату",
"settings.openchamber.visual.field.showSplitAssistantMessageActionsAria": "Вбудовані дії асистента",
"settings.openchamber.visual.field.showSplitAssistantMessageActions": "Вбудовані дії асистента",
"settings.openchamber.visual.field.showSplitAssistantMessageActionsTooltip": "Показує «Скопіювати відповідь», «Зберегти як зображення» та озвучення для текстових блоків асистента, які з’являються перед пізнішими викликами інструментів у тій самій відповіді.",
packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
+2
View File
@@ -1394,6 +1394,8 @@ export const settingsDict = {
'settings.openchamber.visual.field.showReasoningTraces': '显示推理轨迹',
'settings.openchamber.visual.field.stickyUserHeaderAria': '固定用户消息头',
'settings.openchamber.visual.field.stickyUserHeader': '固定用户消息头',
'settings.openchamber.visual.field.wideChatLayoutAria': '宽聊天布局',
'settings.openchamber.visual.field.wideChatLayout': '宽聊天布局',
'settings.openchamber.visual.field.showSplitAssistantMessageActionsAria': '内联助手操作',
'settings.openchamber.visual.field.showSplitAssistantMessageActions': '内联助手操作',
'settings.openchamber.visual.field.showSplitAssistantMessageActionsTooltip': '在同一条回复中，如果助手文本块后面还有工具调用，则显示“复制回答”“保存为图片”和“朗读”操作。',
packages/ui/src/lib/persistence.ts
+6
View File
@@ -431,6 +431,9 @@ const applyDesktopUiPreferences = (settings: DesktopSettings) => {
if (typeof settings.stickyUserHeader === 'boolean' && settings.stickyUserHeader !== store.stickyUserHeader) {
store.setStickyUserHeader(settings.stickyUserHeader);
}
if (typeof settings.wideChatLayoutEnabled === 'boolean' && settings.wideChatLayoutEnabled !== store.wideChatLayoutEnabled) {
store.setWideChatLayoutEnabled(settings.wideChatLayoutEnabled);
}
if (
typeof settings.showSplitAssistantMessageActions === 'boolean'
&& settings.showSplitAssistantMessageActions !== store.showSplitAssistantMessageActions
@@ -859,6 +862,9 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
if (typeof candidate.stickyUserHeader === 'boolean') {
result.stickyUserHeader = candidate.stickyUserHeader;
}
if (typeof candidate.wideChatLayoutEnabled === 'boolean') {
result.wideChatLayoutEnabled = candidate.wideChatLayoutEnabled;
}
if (typeof candidate.showSplitAssistantMessageActions === 'boolean') {
result.showSplitAssistantMessageActions = candidate.showSplitAssistantMessageActions;
}
packages/ui/src/stores/useUIStore.ts
+7
View File
@@ -563,6 +563,7 @@ interface UIStore {
showTerminalQuickKeysOnDesktop: boolean;
persistChatDraft: boolean;
inputSpellcheckEnabled: boolean;
wideChatLayoutEnabled: boolean;
showToolFileIcons: boolean;
showExpandedBashTools: boolean;
showExpandedEditTools: boolean;
@@ -689,6 +690,7 @@ interface UIStore {
setMaxLastMessageLength: (value: number) => void;
setPersistChatDraft: (value: boolean) => void;
setInputSpellcheckEnabled: (value: boolean) => void;
setWideChatLayoutEnabled: (value: boolean) => void;
setShowToolFileIcons: (value: boolean) => void;
setShowExpandedBashTools: (value: boolean) => void;
setShowExpandedEditTools: (value: boolean) => void;
@@ -811,6 +813,7 @@ export const useUIStore = create<UIStore>()(
showTerminalQuickKeysOnDesktop: false,
persistChatDraft: true,
inputSpellcheckEnabled: false,
wideChatLayoutEnabled: false,
showToolFileIcons: true,
showExpandedBashTools: false,
showExpandedEditTools: false,
@@ -1804,6 +1807,9 @@ export const useUIStore = create<UIStore>()(
setInputSpellcheckEnabled: (value) => {
set({ inputSpellcheckEnabled: value });
},
setWideChatLayoutEnabled: (value) => {
set({ wideChatLayoutEnabled: value });
},
setShowToolFileIcons: (value) => {
set({ showToolFileIcons: value });
},
@@ -2025,6 +2031,7 @@ export const useUIStore = create<UIStore>()(
maxLastMessageLength: state.maxLastMessageLength,
persistChatDraft: state.persistChatDraft,
inputSpellcheckEnabled: state.inputSpellcheckEnabled,
wideChatLayoutEnabled: state.wideChatLayoutEnabled,
showToolFileIcons: state.showToolFileIcons,
showExpandedBashTools: state.showExpandedBashTools,
showExpandedEditTools: state.showExpandedEditTools,
packages/ui/src/styles/typography.css
+10 -2
View File
@@ -25,11 +25,15 @@
}
.chat-column {
width: min(100%, 64rem);
width: min(100%, 48rem);
margin-inline: auto;
padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
}
.wide-chat-layout .chat-column {
width: min(100%, 64rem);
}
.chat-input-column {
width: min(100%, 48rem);
margin-inline: auto;
@@ -37,11 +41,15 @@
}
.chat-message-column {
width: min(100%, 64rem);
width: min(100%, 48rem);
margin-inline: auto;
padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
}
.wide-chat-layout .chat-message-column {
width: min(100%, 64rem);
}
@media (min-width: 1024px) {
.chat-column {
padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));