93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
'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_list'
|
|
| 'mask_create'
|
|
| 'history'
|
|
| 'voice_actor'
|
|
| 'font'
|
|
| 'max_token'
|
|
| 'background'
|
|
| 'model';
|
|
|
|
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_list: 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('profile')}>
|
|
<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_list' && <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>
|
|
);
|
|
}
|