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

'use client';
import Profile from './Profile';
import MaskList from './MaskList';
import VoiceActor from './VoiceActor';
import Font from './Font';
import MaxToken from './MaxToken';
import Background from './Background';
import ChatModel from './ChatModel';
import { IconButton } from '@/components/ui/button';
import React, { useState } from 'react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { useStreamChatStore } from '../stream-chat';
import IconFont from '@/components/ui/iconFont';
import MaskCreate from './MaskCreate';
import { useTranslations } from 'next-intl';

type SettingProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
};
export type ActiveTabType =
  | 'profile'
  | 'mask'
  | 'mask_create'
  | 'history'
  | 'voice_actor'
  | 'font'
  | 'max_token'
  | 'background'
  | 'model';

const backMap = {
  mask: 'profile',
  mask_create: 'mask',
  history: 'profile',
  voice_actor: 'profile',
  font: 'profile',
  max_token: 'profile',
  background: 'profile',
  model: 'profile',
} as const;

export default function SettingDialog({ open, onOpenChange }: SettingProps) {
  const t = useTranslations('chat.drawer');
  const [activeTab, setActiveTab] = useState<ActiveTabType>('profile');
  const updateUserChatSetting = useStreamChatStore((store) => store.updateUserChatSetting);

  const titleMap = {
    mask: t('maskedIdentityMode'),
    mask_create: t('createMask'),
    history: t('history'),
    voice_actor: t('voiceActorTitle'),
    font: t('fontTitle'),
    max_token: t('maxToken'),
    background: t('background'),
    model: t('model'),
  };

  const handleChange = (open: boolean) => {
    if (!open) {
      updateUserChatSetting();
    }
    onOpenChange(open);
  };

  return (
    <AlertDialog open={open} onOpenChange={handleChange}>
      <AlertDialogContent className="max-w-[500px]" showCloseButton={activeTab === 'profile'}>
        <AlertDialogTitle className="flex justify-between">
          {activeTab === 'profile' ? (
            <IconButton variant="tertiary" size="small" iconfont="icon-Like" />
          ) : (
            titleMap[activeTab]
          )}
          {activeTab !== 'profile' && (
            <IconButton
              variant="tertiary"
              size="small"
              onClick={() => setActiveTab(backMap[activeTab])}
            >
              <IconFont size={24} className="text-white cursor-pointer" type="icon-jiantou" />
            </IconButton>
          )}
        </AlertDialogTitle>
        <div className="w-full h-[calc(100vh-160px)] pr-1 mt-4">
          {activeTab === 'profile' && <Profile onActiveTab={setActiveTab} />}
          {activeTab === 'mask' && <MaskList onActiveTab={setActiveTab} />}
          {activeTab === 'mask_create' && <MaskCreate onActiveTab={setActiveTab} />}
          {activeTab === 'voice_actor' && <VoiceActor />}
          {activeTab === 'font' && <Font />}
          {activeTab === 'max_token' && <MaxToken />}
          {activeTab === 'background' && <Background />}
          {activeTab === 'model' && <ChatModel />}
        </div>
      </AlertDialogContent>
    </AlertDialog>
  );
}