apunkt/plano
1
0
Fork 0
mirror of https://github.com/katanemo/plano.git synced 2026-06-17 15:25:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

fixed the scrolling issue

Browse source
This commit is contained in:
Salman Paracha 2025-07-03 16:17:21 -07:00
parent ad2f20c3e3
commit f8cd8aec60
1 changed files with 89 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

162
demos/use_cases/chatgpt-preference-model-selector/src/components/PreferenceBasedModelSelector.js
View file

@ -233,80 +233,96 @@ export default function PreferenceBasedModelSelector() {
}; };
return ( return (
<div className="w-full max-w-[600px] bg-gray-50 dark:bg-gray-800 p-4 mx-auto"> <div className="w-full max-w-[600px] h-[65vh] flex flex-col bg-gray-50 dark:bg-gray-800 p-4 mx-auto">
<div className="space-y-4">
<Card className="w-full"> {/* Scrollable preferences only */}
<CardContent> <div className="space-y-4 overflow-y-auto flex-1 pr-1 max-h-[60vh]">
<div className="flex items-center justify-between"> <Card className="w-full">
<Label>Enable preference-based routing</Label> <CardContent>
<Switch checked={routingEnabled} onCheckedChange={setRoutingEnabled} /> <div className="flex items-center justify-between">
</div> <Label>Enable preference-based routing</Label>
{routingEnabled && ( <Switch checked={routingEnabled} onCheckedChange={setRoutingEnabled} />
<div className="pt-4 mt-4 space-y-3 border-t border-gray-200 dark:border-gray-700"> </div>
{preferences.map((pref) => ( {routingEnabled && (
<div key={pref.id} className="grid grid-cols-[3fr_1.5fr_auto] gap-4 items-center"> <div className="pt-4 mt-4 space-y-3 border-t border-gray-200 dark:border-gray-700">
<Input {preferences.map((pref) => (
placeholder="(e.g. generating fictional stories or poems)" <div key={pref.id} className="grid grid-cols-[3fr_1.5fr_auto] gap-4 items-center">
value={pref.usage} <Input
onChange={(e) => updatePreference(pref.id, 'usage', e.target.value)} placeholder="(e.g. generating fictional stories or poems)"
/> value={pref.usage}
<select onChange={(e) => updatePreference(pref.id, 'usage', e.target.value)}
value={pref.model} />
onChange={(e) => updatePreference(pref.id, 'model', e.target.value)} <select
className="h-9 w-full px-3 text-sm value={pref.model}
bg-white dark:bg-gray-700 onChange={(e) => updatePreference(pref.id, 'model', e.target.value)}
text-gray-800 dark:text-white className="h-9 w-full px-3 text-sm
border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700
rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" text-gray-800 dark:text-white
> border border-gray-300 dark:border-gray-600
<option disabled value=""> rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
Select Model >
<option disabled value="">
Select Model
</option>
{modelOptions.map((m) => (
<option key={m} value={m}>
{m}
</option> </option>
{modelOptions.map((m) => ( ))}
<option key={m} value={m}> </select>
{m} <Button
</option> variant="ghost"
))} size="icon"
</select> onClick={() => removePreference(pref.id)}
<Button variant="ghost" size="icon" onClick={() => removePreference(pref.id)} disabled={preferences.length <= 1}> disabled={preferences.length <= 1}
<Trash2 className="h-4 w-4 text-gray-500 hover:text-red-600" /> >
</Button> <Trash2 className="h-4 w-4 text-gray-500 hover:text-red-600" />
</div> </Button>
))} </div>
<Button variant="outline" onClick={addPreference} className="flex items-center gap-2 text-sm mt-2">
<PlusCircle className="h-4 w-4" /> Add Preference
</Button>
</div>
)}
</CardContent>
</Card>
<Card className="w-full">
<CardContent>
<Label>Default Model</Label>
<select
value={defaultModel}
onChange={(e) => setDefaultModel(e.target.value)}
className="h-9 w-full mt-2 px-3 text-sm
bg-white dark:bg-gray-700
text-gray-800 dark:text-white
border border-gray-300 dark:border-gray-600
rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
{modelOptions.map((m) => (
<option key={m} value={m}>
{m}
</option>
))} ))}
</select> <Button
</CardContent> variant="outline"
</Card> onClick={addPreference}
<div className="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700"> className="flex items-center gap-2 text-sm mt-2"
<Button variant="ghost" onClick={handleCancel}> >
Cancel <PlusCircle className="h-4 w-4" /> Add Preference
</Button> </Button>
<Button onClick={handleSave}>Save and Apply</Button> </div>
</div> )}
</div> </CardContent>
</Card>
</div> </div>
);
{/* Default model selector (static) */}
<Card className="w-full mt-4">
<CardContent>
<Label>Default Model</Label>
<select
value={defaultModel}
onChange={(e) => setDefaultModel(e.target.value)}
className="h-9 w-full mt-2 px-3 text-sm
bg-white dark:bg-gray-700
text-gray-800 dark:text-white
border border-gray-300 dark:border-gray-600
rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
>
{modelOptions.map((m) => (
<option key={m} value={m}>
{m}
</option>
))}
</select>
</CardContent>
</Card>
{/* Save/Cancel footer (static) */}
<div className="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 mt-4">
<Button variant="ghost" onClick={handleCancel}>
Cancel
</Button>
<Button onClick={handleSave}>Save and Apply</Button>
</div>
</div>
);
} }