79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
|
'use client'
|
||
|
|
import { SiderHeader } from '.'
|
||
|
|
import { useChatStore } from '../store'
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
|
||
|
|
type TokenOption = {
|
||
|
|
value: number
|
||
|
|
label: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function MaxToken() {
|
||
|
|
const setSideBar = useChatStore((store) => store.setSideBar)
|
||
|
|
|
||
|
|
// 最大回复数选项
|
||
|
|
const tokenOptions: TokenOption[] = [
|
||
|
|
{ value: 800, label: '800' },
|
||
|
|
{ value: 1000, label: '1000' },
|
||
|
|
{ value: 1200, label: '1200' },
|
||
|
|
{ value: 1500, label: '1500' },
|
||
|
|
]
|
||
|
|
|
||
|
|
const [selectedToken, setSelectedToken] = useState(800)
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
|
||
|
|
const handleConfirm = async () => {
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
// TODO: 调用实际的 API 保存最大回复数设置
|
||
|
|
// await updateMaxToken({ maxToken: selectedToken })
|
||
|
|
console.log('Selected max token:', selectedToken)
|
||
|
|
|
||
|
|
// 模拟延迟
|
||
|
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
||
|
|
|
||
|
|
setSideBar('profile')
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error)
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<SiderHeader title="Maximum Replies" />
|
||
|
|
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex flex-col gap-3">
|
||
|
|
{tokenOptions.map((option) => (
|
||
|
|
<div
|
||
|
|
key={option.value}
|
||
|
|
className={cn(
|
||
|
|
'bg-surface-element-normal flex h-12 cursor-pointer items-center justify-between rounded-lg px-5 transition-colors',
|
||
|
|
selectedToken === option.value && 'bg-surface-element-hover'
|
||
|
|
)}
|
||
|
|
onClick={() => setSelectedToken(option.value)}
|
||
|
|
>
|
||
|
|
<div className="txt-title-s">{option.label}</div>
|
||
|
|
<Checkbox shape="round" checked={selectedToken === option.value} />
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-6 flex justify-end gap-3">
|
||
|
|
<Button variant="tertiary" size="large" onClick={() => setSideBar('profile')}>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button size="large" variant="primary" loading={loading} onClick={handleConfirm}>
|
||
|
|
Select
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|