admin/PromptArch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: consolidate model and provider selector in ai assist header

Browse Source
This commit is contained in:
Gemini AI
2025-12-29 12:08:48 +04:00
Unverified
parent 72814c9496
commit 3c0dbf574a
1 changed files with 46 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
components/AIAssist.tsx
View File

@@ -705,33 +705,54 @@ export default function AIAssist() {
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-col items-end gap-2">
<div className="flex items-center gap-1.5 p-1 bg-blue-50/50 dark:bg-blue-900/20 rounded-xl border border-blue-100/50 dark:border-blue-900/50">
{(["qwen", "ollama", "zai"] as const).map((provider) => (
<button
key={provider}
onClick={() => setSelectedProvider(provider)}
className={cn(
"px-2 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider transition-all",
selectedProvider === provider
? "bg-blue-600 text-white shadow-md shadow-blue-500/20"
: "text-slate-400 hover:text-blue-500 hover:bg-blue-50 dark:text-blue-200/40 dark:hover:text-blue-200"
)}
>
{(provider === "qwen" ? "Qwen" : provider === "ollama" ? "Ollama" : "Z.AI")}
</button>
))}
</div>
<div className="flex items-center gap-2">
<span className="text-[9px] font-black uppercase tracking-widest text-slate-400/70">{common.model}:</span>
<select <select
value={selectedModels[selectedProvider]} value={selectedModels[selectedProvider]}
onChange={(e) => setSelectedModel(selectedProvider, e.target.value)} onChange={(e) => setSelectedModel(selectedProvider, e.target.value)}
className="text-[11px] font-black h-9 px-3 rounded-xl border-blue-100 dark:border-blue-900 bg-white/80 dark:bg-[#0b1414]/80 focus:ring-2 focus:ring-blue-400/40 transition-all outline-none" className="text-[10px] font-bold h-8 px-2 rounded-lg border border-blue-100 dark:border-blue-900 bg-white/80 dark:bg-[#0b1414]/80 focus:ring-2 focus:ring-blue-400/30 transition-all outline-none min-w-[120px]"
> >
{availableModels.map(m => <option key={m} value={m}>{m}</option>)} {availableModels.map(m => <option key={m} value={m}>{m}</option>)}
</select> </select>
<div className="flex items-center gap-1 ml-1 border-l border-blue-100 dark:border-blue-900 pl-2">
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowCanvas((prev) => !prev)} onClick={() => setShowCanvas((prev) => !prev)}
className="h-9 w-9 text-blue-700 hover:text-blue-950 hover:bg-blue-100 dark:text-blue-200 dark:hover:text-white dark:hover:bg-blue-900/40 rounded-xl transition-colors" className="h-8 w-8 text-blue-700 hover:text-blue-950 hover:bg-blue-100 dark:text-blue-200 dark:hover:text-white dark:hover:bg-blue-900/40 rounded-lg transition-colors"
disabled={!previewData} disabled={!previewData}
> >
<LayoutPanelLeft className="h-4 w-4" /> <LayoutPanelLeft className="h-3.5 w-3.5" />
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={clearHistory} onClick={clearHistory}
className="h-9 w-9 text-slate-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-xl transition-colors" className="h-8 w-8 text-slate-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors"
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-3.5 w-3.5" />
</Button> </Button>
</div> </div>
</div> </div>
</div>
</div>
{/* Tab Bar */} {/* Tab Bar */}
<div className="flex items-center gap-1 px-4 py-2 bg-slate-800/20 border-b border-white/5 backdrop-blur-md overflow-x-auto no-scrollbar"> <div className="flex items-center gap-1 px-4 py-2 bg-slate-800/20 border-b border-white/5 backdrop-blur-md overflow-x-auto no-scrollbar">
@@ -776,45 +797,6 @@ export default function AIAssist() {
</button> </button>
</div> </div>
{/* Model & Provider Selector */}
<div className="px-6 pt-6 pb-2 space-y-4 border-b border-blue-100/20 dark:border-blue-900/20">
<div className="flex flex-col gap-3">
<div className="flex items-center justify-between">
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400">{common.aiProvider}</label>
<div className="flex gap-1.5">
{(["qwen", "ollama", "zai"] as const).map((provider) => (
<button
key={provider}
onClick={() => setSelectedProvider(provider)}
className={cn(
"px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all border",
selectedProvider === provider
? "bg-blue-600 text-white border-blue-600 shadow-sm"
: "bg-white/50 text-slate-500 border-blue-100/50 hover:border-blue-300 dark:bg-[#0f1a1a] dark:text-blue-200/50 dark:border-blue-900"
)}
>
{provider === "qwen" ? "Qwen" : provider === "ollama" ? "Ollama" : "Z.AI"}
</button>
))}
</div>
</div>
<div className="flex items-center justify-between gap-4">
<label className="text-[10px] font-black uppercase tracking-widest text-slate-400 shrink-0">{common.model}</label>
<select
value={selectedModels[selectedProvider]}
onChange={(e) => setSelectedModel(selectedProvider, e.target.value)}
className="flex-1 bg-white/70 dark:bg-[#0f1a1a] border border-blue-100 dark:border-blue-900 rounded-xl px-3 py-1.5 text-[11px] font-bold text-blue-700 dark:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/20 appearance-none cursor-pointer"
>
{availableModels.map((model) => (
<option key={model} value={model}>
{model}
</option>
))}
</select>
</div>
</div>
</div>
{/* Agent Selector */} {/* Agent Selector */}
<div className="px-6 pt-6"> <div className="px-6 pt-6">