82 lines
3.8 KiB
TypeScript
82 lines
3.8 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';
|
|||
|
|
|
|||
|
|
export default function 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">
|
|||
|
|
Text Message Price: Refers to the cost of chatting with the character via
|
|||
|
|
text messages, including sending text, images, or gifts. Charged per
|
|||
|
|
message.
|
|||
|
|
</p>
|
|||
|
|
<p className="break-words">
|
|||
|
|
Voice Message Price: Refers to the cost of sending a voice message to the
|
|||
|
|
character or playing the character’s voice. Charged per use.
|
|||
|
|
</p>
|
|||
|
|
<p className="break-words">
|
|||
|
|
Voice Call Price: Refers to the cost of having a voice call with the
|
|||
|
|
character. Charged per minute.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</TooltipContent>
|
|||
|
|
</Tooltip>
|
|||
|
|
</div>
|
|||
|
|
<Checkbox checked={chatSetting.chatModel === model} shape="round" />
|
|||
|
|
</div>
|
|||
|
|
<div className="txt-body-m text-txt-secondary-normal mt-1">
|
|||
|
|
Role-play a conversation with AI
|
|||
|
|
</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/Text Message</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/Send or play voice</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/min Voice call</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<div className="txt-body-m text-txt-secondary-normal mt-6">Stay tuned for more models</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|