crush-level-web/src/app/(main)/chat/[id]/Drawer/ChatModel.tsx

'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>
  );
}