import { mdiChatOutline } from '@mdi/js'; import Head from 'next/head'; import React, { ReactElement, useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import CardBox from '../../components/CardBox'; import LayoutAuthenticated from '../../layouts/Authenticated'; import SectionMain from '../../components/SectionMain'; import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; import BaseButton from '../../components/BaseButton'; import { useAppDispatch, useAppSelector } from '../../stores/hooks'; import { fetch } from '../../stores/scenes/scenesSlice'; import { getPageTitle } from '../../config'; import LoadingSpinner from '../../components/LoadingSpinner'; const AkazaRoleplay = () => { const router = useRouter(); const dispatch = useAppDispatch(); const { scenesId } = router.query; const { scenes, loading } = useAppSelector((state) => state.scenes); useEffect(() => { if (scenesId) { dispatch(fetch({ id: scenesId })); } }, [scenesId, dispatch]); return ( <> {getPageTitle('Akaza Roleplay')} router.push('/scenes/scenes-list')} /> {loading ? ( ) : (

{scenes?.title || 'Loading Scene...'}

Conversation

{/* Chat messages will appear here */}

Chat history will be loaded here...

)} ); }; AkazaRoleplay.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default AkazaRoleplay;