forked from Gerome-Elassaad/CodingIT
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchat-picker.tsx
More file actions
109 lines (108 loc) · 3.66 KB
/
Copy pathchat-picker.tsx
File metadata and controls
109 lines (108 loc) · 3.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { LLMModel, LLMModelConfig } from '@/lib/models'
import { TemplateId, Templates } from '@/lib/templates'
import 'core-js/actual/object/group-by'
import { Sparkles } from 'lucide-react'
import Image from 'next/image'
export function ChatPicker({
templates,
selectedTemplate,
onSelectedTemplateChange,
models,
languageModel,
onLanguageModelChange,
}: {
templates: Templates
selectedTemplate: 'auto' | TemplateId
onSelectedTemplateChange: (template: 'auto' | TemplateId) => void
models: LLMModel[]
languageModel: LLMModelConfig
onLanguageModelChange: (config: LLMModelConfig) => void
}) {
return (
<div className="flex items-center space-x-2">
<div className="flex flex-col">
<Select
name="template"
defaultValue={selectedTemplate}
onValueChange={onSelectedTemplateChange}
>
<SelectTrigger className="whitespace-nowrap border-none shadow-none focus:ring-0 px-0 py-0 h-6 text-xs bg-transparent">
<SelectValue placeholder="Select a persona" />
</SelectTrigger>
<SelectContent side="top">
<SelectGroup>
<SelectLabel>Persona</SelectLabel>
<SelectItem value="auto">
<div className="flex items-center space-x-2">
<Sparkles
className="flex text-[#a1a1aa]"
width={14}
height={14}
/>
<span>Auto</span>
</div>
</SelectItem>
{Object.entries(templates).map(([templateId, template]) => (
<SelectItem key={templateId} value={templateId}>
<div className="flex items-center space-x-2">
<Image
className="flex"
src={`/thirdparty/templates/${templateId}.svg`}
alt={templateId}
width={14}
height={14}
/>
<span>{template.name}</span>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="flex flex-col">
<Select
name="languageModel"
value={languageModel.model}
onValueChange={(e) => onLanguageModelChange({ model: e })}
>
<SelectTrigger className="whitespace-nowrap border-none shadow-none focus:ring-0 px-0 py-0 h-6 text-xs bg-transparent">
<SelectValue placeholder="Language model" />
</SelectTrigger>
<SelectContent>
{Object.entries(
Object.groupBy(models, ({ provider }) => provider),
).map(([provider, models]) => (
<SelectGroup key={provider}>
<SelectLabel>{provider}</SelectLabel>
{models?.map((model) => (
<SelectItem key={model.id} value={model.id}>
<div className="flex items-center space-x-2">
<Image
className="flex"
src={`/thirdparty/logos/${model.providerId}.svg`}
alt={model.provider}
width={14}
height={14}
/>
<span>{model.name}</span>
</div>
</SelectItem>
))}
</SelectGroup>
))}
</SelectContent>
</Select>
</div>
</div>
)
}