48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { IconButton } from '@/components/ui/button';
|
|
import Input from './Input';
|
|
import MessageList from './MessageList';
|
|
import SettingDialog from './Drawer';
|
|
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
|
|
import { useParams } from 'next/navigation';
|
|
import { useEffect, useState } from 'react';
|
|
import { useCharacter } from '@/hooks/services/character';
|
|
import Background from './Background';
|
|
|
|
export default function ChatPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const characterId = id?.split('-')[2] || '';
|
|
const [settingOpen, setSettingOpen] = useState(false);
|
|
const switchToChannel = useStreamChatStore((s) => s.switchToChannel);
|
|
const client = useStreamChatStore((s) => s.client);
|
|
const { data: character } = useCharacter(characterId);
|
|
|
|
useEffect(() => {
|
|
if (id && client) {
|
|
switchToChannel(id as string);
|
|
}
|
|
}, [id, client]);
|
|
|
|
return (
|
|
<div className="flex bg-[rgba(6,3,24,1)] h-full">
|
|
<div className="relative px-4 w-full flex-1 flex justify-center">
|
|
<div className="max-w-[752px] w-full relative h-full flex flex-col">
|
|
<Background imageUrl={character?.characterStand || character?.coverImage} />
|
|
<MessageList />
|
|
<Input />
|
|
</div>
|
|
<IconButton
|
|
onClick={() => setSettingOpen(!settingOpen)}
|
|
className="absolute top-2 right-2"
|
|
variant="ghost"
|
|
size="small"
|
|
>
|
|
<i className="iconfont-v2 iconv2-zhankai-1" />
|
|
</IconButton>
|
|
</div>
|
|
<SettingDialog open={settingOpen} onOpenChange={setSettingOpen} />
|
|
</div>
|
|
);
|
|
}
|