82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
'use client';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { IconButton } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import Image from 'next/image';
|
|
import { useModels } from '@/hooks/services/chat';
|
|
import { useStreamChatStore } from '../stream-chat';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export default function ChatModel() {
|
|
const t = useTranslations('chat.drawer.chatModel');
|
|
const { data: models = [] } = useModels();
|
|
const chatSetting = useStreamChatStore((store) => store.chatSetting);
|
|
const setChatSetting = useStreamChatStore((store) => store.setChatSetting);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex-1 flex flex-col gap-2">
|
|
{models.map((model: any) => (
|
|
<div
|
|
key={model}
|
|
onClick={() => setChatSetting({ chatModel: model })}
|
|
className="bg-surface-element-normal cursor-pointer overflow-hidden rounded-lg p-4"
|
|
>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="txt-title-s">{model}</div>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<IconButton iconfont="icon-question" variant="tertiary" size="mini" />
|
|
</TooltipTrigger>
|
|
<TooltipContent className="max-w-[300px]">
|
|
<div className="space-y-2">
|
|
<p className="break-words">
|
|
{t('textMessagePrice')}: {t('textMessagePriceDesc')}
|
|
</p>
|
|
<p className="break-words">
|
|
{t('voiceMessagePrice')}: {t('voiceMessagePriceDesc')}
|
|
</p>
|
|
<p className="break-words">
|
|
{t('voiceCallPrice')}: {t('voiceCallPriceDesc')}
|
|
</p>
|
|
</div>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
<Checkbox checked={chatSetting.chatModel === model} shape="round" />
|
|
</div>
|
|
<div className="txt-body-m text-txt-secondary-normal mt-1">{t('rolePlayDesc')}</div>
|
|
|
|
<div className="bg-surface-district-normal mt-3 rounded-sm p-3">
|
|
<div className="flex items-center gap-1">
|
|
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
|
|
<span className="txt-label-m text-txt-primary-normal">1/{t('textMessage')}</span>
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center justify-between gap-1">
|
|
<div className="flex min-w-0 flex-1 items-center gap-1">
|
|
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
|
|
<span className="txt-label-m text-txt-primary-normal">
|
|
10/{t('sendOrPlayVoice')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center justify-between gap-1">
|
|
<div className="flex min-w-0 flex-1 items-center gap-1">
|
|
<Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
|
|
<span className="txt-label-m text-txt-primary-normal">
|
|
20/{t('voiceCallPerMin')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div className="txt-body-m text-txt-secondary-normal mt-6">{t('stayTuned')}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|