File size: 2,775 Bytes
a8aec61 |
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 |
'use client'
import * as React from 'react'
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem
} from '@/components/ui/select'
import { usePlaygroundStore } from '@/store'
import { useQueryState } from 'nuqs'
import Icon from '@/components/ui/icon'
import { useEffect } from 'react'
import useChatActions from '@/hooks/useChatActions'
export function AgentSelector() {
const { agents, setMessages, setSelectedModel, setHasStorage } =
usePlaygroundStore()
const { focusChatInput } = useChatActions()
const [agentId, setAgentId] = useQueryState('agent', {
parse: (value) => value || undefined,
history: 'push'
})
const [, setSessionId] = useQueryState('session')
// Set the model when the component mounts if an agent is already selected
useEffect(() => {
if (agentId && agents.length > 0) {
const agent = agents.find((agent) => agent.value === agentId)
if (agent) {
setSelectedModel(agent.model.provider || '')
setHasStorage(!!agent.storage)
if (agent.model.provider) {
focusChatInput()
}
} else {
setAgentId(agents[0].value)
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [agentId, agents, setSelectedModel])
const handleOnValueChange = (value: string) => {
const newAgent = value === agentId ? '' : value
const selectedAgent = agents.find((agent) => agent.value === newAgent)
setSelectedModel(selectedAgent?.model.provider || '')
setHasStorage(!!selectedAgent?.storage)
setAgentId(newAgent)
setMessages([])
setSessionId(null)
if (selectedAgent?.model.provider) {
focusChatInput()
}
}
return (
<Select
value={agentId || ''}
onValueChange={(value) => handleOnValueChange(value)}
>
<SelectTrigger className="h-9 w-full rounded-xl border border-primary/15 bg-primaryAccent text-xs font-medium uppercase">
<SelectValue placeholder="Select Agent" />
</SelectTrigger>
<SelectContent className="border-none bg-primaryAccent font-dmmono shadow-lg">
{agents.map((agent, index) => (
<SelectItem
className="cursor-pointer"
key={`${agent.value}-${index}`}
value={agent.value}
>
<div className="flex items-center gap-3 text-xs font-medium uppercase">
<Icon type={'agent'} size="xs" />
{agent.label}
</div>
</SelectItem>
))}
{agents.length === 0 && (
<SelectItem
value="no-agents"
className="cursor-not-allowed select-none text-center"
>
No agents found
</SelectItem>
)}
</SelectContent>
</Select>
)
}
|