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

feat: enhance mobile view for model controls

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2025-12-15 03:04:46 +02:00
parent bd25787b92
commit 05deb79107
4 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+5
View File
@@ -4,7 +4,12 @@ All notable changes to this project will be documented in this file.
## [Unreleased]
## [1.1.4] - 2025-12-15
- Flexoki themes for Shiki syntax highlighting for consistency with the app color schema.
- Enchanced VSCode extension theming with editor themes
- Fixed mobile view model/agent selection
## [1.1.3] - 2025-12-14
packages/ui/src/components/chat/ChatInput.tsx
+4 -3
View File
@@ -870,9 +870,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
<div className="flex items-center flex-shrink-0 gap-x-1">
{attachmentsControls}
</div>
<div className="flex-1" />
<div className="flex items-center gap-x-1 min-w-0">
<ModelControls className={cn('flex items-center justify-end min-w-0')} />
<div className="flex flex-1 items-center justify-end gap-x-1 min-w-0">
<div className="flex flex-1 min-w-0 justify-end overflow-hidden">
<ModelControls className={cn('w-full flex items-center justify-end min-w-0')} />
</div>
{actionButton}
</div>
</div>
packages/ui/src/components/chat/ModelControls.tsx
+23 -7
View File
@@ -1473,7 +1473,6 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
<div
className={cn(
'model-controls__model-trigger flex items-center gap-1.5 cursor-pointer hover:opacity-70 min-w-0',
!isDesktopRuntime && 'flex-1',
buttonHeight
)}
>
@@ -1494,7 +1493,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
'model-controls__model-label',
controlTextSize,
'font-medium whitespace-nowrap text-foreground truncate min-w-0',
isDesktopRuntime ? 'max-w-[260px]' : 'flex-1'
'max-w-[260px]'
)}
>
{getCurrentModelDisplayName()}
@@ -1610,7 +1609,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
onTouchEnd={handleLongPressEnd}
onTouchCancel={handleLongPressEnd}
className={cn(
'model-controls__model-trigger flex items-center gap-1.5 min-w-0 focus:outline-none flex-1',
'model-controls__model-trigger flex items-center gap-1.5 min-w-0 focus:outline-none',
isMobile && 'flex-1',
'cursor-pointer hover:opacity-70',
buttonHeight
)}
@@ -1623,7 +1623,12 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
) : (
<RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
)}
<span className="model-controls__model-label typography-micro font-medium truncate min-w-0 flex-1">
<span
className={cn(
'model-controls__model-label typography-micro font-medium truncate min-w-0',
isMobile ? 'flex-1' : 'max-w-[220px]',
)}
>
{getCurrentModelDisplayName()}
</span>
</button>
@@ -1961,7 +1966,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
);
};
const inlineClassName = cn('@container/model-controls flex items-center min-w-0', inlineGapClass, className);
const inlineClassName = cn(
'@container/model-controls flex items-center min-w-0',
inlineGapClass,
// Only force full-width + truncation behaviors on true mobile layouts.
// VS Code also uses "compact" mode, but should keep its right-aligned inline sizing.
isMobile && 'w-full',
className,
);
return (
<>
@@ -1969,12 +1981,16 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
<div
className={cn(
'flex items-center min-w-0',
!isCompact ? (isDesktopRuntime ? 'flex-1 min-w-0 justify-end' : 'flex-1 min-w-0') : undefined
isMobile
? 'flex-1 min-w-0 overflow-hidden'
: (isCompact
? 'flex-1 min-w-0 justify-end'
: 'flex-1 min-w-0 justify-end')
)}
>
{renderModelSelector()}
</div>
<div className={cn('flex items-center min-w-0', inlineGapClass)}>
<div className={cn('flex items-center min-w-0', inlineGapClass, isMobile && 'flex-shrink-0')}>
{renderAgentSelector()}
</div>
</div>
packages/ui/src/index.css
+16 -3
View File
@@ -1266,19 +1266,32 @@ html:not(.dark) .chat-scroll {
font-size: inherit !important;
}
/* Model/agent controls: collapse labels in narrow containers (mobile + VSCode side panel). */
@container model-controls (max-width: 15rem) {
/* Model/agent controls: agent label hides before model label. */
@container model-controls (max-width: 11rem) {
.model-controls__agent-label {
display: none;
}
}
@container model-controls (max-width: 12rem) {
@container model-controls (max-width: 9rem) {
.model-controls__model-label {
display: none;
}
}
/* VS Code side panel: collapse earlier to save horizontal space. */
@container model-controls (max-width: 9rem) {
:root.vscode-runtime .model-controls__agent-label {
display: none;
}
}
@container model-controls (max-width: 10rem) {
:root.vscode-runtime .model-controls__model-label {
display: none;
}
}
/* Text font: IBM Plex Sans */
.streamdown-content {
font-family: var(--font-sans);