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

feat(vscode/mobile): enhance model selection view

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2025-12-21 01:56:22 +02:00
parent 4bd4cad84e
commit 42a3137e6f
3 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ModelControls.tsx
+10 -7
View File
@@ -1132,14 +1132,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
title="Select model" title="Select model"
> >
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="px-2"> <div>
<div className="relative"> <div className="relative">
<RiSearchLine className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" /> <RiSearchLine className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input <Input
value={mobileModelQuery} value={mobileModelQuery}
onChange={(event) => setMobileModelQuery(event.target.value)} onChange={(event) => setMobileModelQuery(event.target.value)}
placeholder="Search providers or models" placeholder="Search providers or models"
className="pl-7 h-8 typography-meta" className="pl-7 h-9 rounded-xl border-border/40 bg-background/95 typography-meta"
/> />
{mobileModelQuery && ( {mobileModelQuery && (
<button <button
@@ -1162,7 +1162,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
{/* Favorites Section for Mobile */} {/* Favorites Section for Mobile */}
{!mobileModelQuery && favoriteModelsList.length > 0 && ( {!mobileModelQuery && favoriteModelsList.length > 0 && (
<div className="rounded-xl border border-border/40 bg-background/95"> <div className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider"> <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
<RiStarFill className="h-3 w-3 inline-block mr-1.5 text-primary" /> <RiStarFill className="h-3 w-3 inline-block mr-1.5 text-primary" />
Favorites Favorites
@@ -1180,6 +1180,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
className={cn( className={cn(
'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0', 'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0',
'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary', 'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
'first:rounded-t-xl last:rounded-b-xl transition-colors',
isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted' isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted'
)} )}
> >
@@ -1207,7 +1208,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
{/* Recent Section for Mobile */} {/* Recent Section for Mobile */}
{!mobileModelQuery && recentModelsList.length > 0 && ( {!mobileModelQuery && recentModelsList.length > 0 && (
<div className="rounded-xl border border-border/40 bg-background/95"> <div className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider"> <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
<RiTimeLine className="h-3 w-3 inline-block mr-1.5" /> <RiTimeLine className="h-3 w-3 inline-block mr-1.5" />
Recent Recent
@@ -1225,6 +1226,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
className={cn( className={cn(
'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0', 'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 text-left last:border-b-0',
'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary', 'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary',
'first:rounded-t-xl last:rounded-b-xl transition-colors',
isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted' isSelected ? 'bg-primary/15 text-primary' : 'hover:bg-muted'
)} )}
> >
@@ -1259,7 +1261,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
const isExpanded = expandedMobileProviders.has(provider.id) || normalizedQuery.length > 0; const isExpanded = expandedMobileProviders.has(provider.id) || normalizedQuery.length > 0;
return ( return (
<div key={provider.id} className="rounded-xl border border-border/40 bg-background/95"> <div key={provider.id} className="rounded-xl border border-border/40 bg-background/95 overflow-hidden">
<button <button
type="button" type="button"
onClick={() => toggleMobileProviderExpansion(provider.id)} onClick={() => toggleMobileProviderExpansion(provider.id)}
@@ -1298,6 +1300,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
key={model.id} key={model.id}
className={cn( className={cn(
'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 last:border-b-0', 'flex w-full items-start gap-2 border-b border-border/30 px-2 py-1.5 last:border-b-0',
'rounded-lg transition-colors',
!isSelected && 'hover:bg-muted',
isSelected isSelected
? 'bg-primary/15 text-primary' ? 'bg-primary/15 text-primary'
: '' : ''
@@ -1308,8 +1312,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
onClick={() => handleProviderAndModelChange(provider.id as string, model.id as string)} onClick={() => handleProviderAndModelChange(provider.id as string, model.id as string)}
className={cn( className={cn(
'flex flex-1 min-w-0 items-start gap-2 text-left', 'flex flex-1 min-w-0 items-start gap-2 text-left',
'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary', 'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary'
!isSelected && 'hover:bg-muted'
)} )}
> >
<div className="flex min-w-0 flex-col"> <div className="flex min-w-0 flex-col">
packages/ui/src/components/chat/StatusRow.tsx
+1 -1
View File
@@ -221,7 +221,7 @@ export const StatusRow: React.FC<StatusRowProps> = ({
className={cn( className={cn(
"absolute right-0 bottom-full mb-1 z-50", "absolute right-0 bottom-full mb-1 z-50",
"w-max min-w-[200px]", "w-max min-w-[200px]",
"rounded-xl border border-border bg-muted shadow-md", "rounded-xl border border-border bg-background shadow-md",
"animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2", "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
"duration-150" "duration-150"
)} )}
packages/ui/src/index.css
+4
View File
@@ -44,6 +44,10 @@ textarea[data-chat-input="true"]:hover {
box-shadow: none; box-shadow: none;
} }
:root.vscode-runtime textarea[data-chat-input="true"]::placeholder {
color: color-mix(in srgb, var(--vscode-input-placeholderForeground, var(--muted-foreground)) 65%, transparent);
}
/* Match chat footer background to input in WebKit to avoid dual-tone hover/focus */ /* Match chat footer background to input in WebKit to avoid dual-tone hover/focus */
[data-chat-input="true"] + div[data-chat-input-footer="true"] { [data-chat-input="true"] + div[data-chat-input-footer="true"] {
background: transparent !important; background: transparent !important;