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

'use client';
import Profile from './Profile';
import Personal from './Personal';
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';

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

const titleMap = {
  personal: 'Personal',
  history: 'History',
  voice_actor: 'Voice Actor',
  font: 'Font',
  max_token: 'Max Token',
  background: 'Background',
  model: 'Chat Model',
};

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

  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('profile')}>
              <i className="iconfont-v2 iconv2-jiantou" />
            </IconButton>
          )}
        </AlertDialogTitle>
        <div className="w-full h-[calc(100vh-160px)] pr-1 mt-4">
          {activeTab === 'profile' && <Profile onActiveTab={setActiveTab} />}
          {activeTab === 'personal' && <Personal />}
          {activeTab === 'voice_actor' && <VoiceActor />}
          {activeTab === 'font' && <Font />}
          {activeTab === 'max_token' && <MaxToken />}
          {activeTab === 'background' && <Background />}
          {activeTab === 'model' && <ChatModel />}
        </div>
      </AlertDialogContent>
    </AlertDialog>
  );
}