83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import Header from './components/Header';
|
|
import AI from './components/AI';
|
|
import FAQ from './components/Faq'; // Ensure the import path is correct
|
|
import Documentation from './components/Documentation'; // Ensure the import path is correct
|
|
import History from './components/History';
|
|
import Models from './components/Models';
|
|
import Credits from './components/Credits';
|
|
import Head from 'next/head';
|
|
import './styles/master.css';
|
|
|
|
const LandingPage: React.FC = () => {
|
|
const [showDivs, setShowDivs] = useState(true);
|
|
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
|
|
const conversationRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const scrollToBottom = () => {
|
|
const conversation = conversationRef.current;
|
|
if (conversation) {
|
|
conversation.scrollTop = conversation.scrollHeight;
|
|
}
|
|
};
|
|
|
|
scrollToBottom();
|
|
|
|
const observer = new MutationObserver(scrollToBottom);
|
|
if (conversationRef.current) {
|
|
observer.observe(conversationRef.current, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
}
|
|
|
|
return () => {
|
|
if (conversationRef.current) {
|
|
observer.disconnect();
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const toggleDivs = () => {
|
|
setShowDivs(prevState => !prevState);
|
|
};
|
|
|
|
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
|
|
setView(view);
|
|
if (view !== 'AI') {
|
|
setShowDivs(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Header
|
|
toggleDivs={toggleDivs}
|
|
showDivs={showDivs}
|
|
onViewChange={handleViewChange}
|
|
showHistoryModelsToggle={true}
|
|
showToggle={view === 'AI'} // Pass the condition here
|
|
/>
|
|
<div className="container">
|
|
<div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
|
|
{showDivs && (
|
|
<div className="history-models">
|
|
<History />
|
|
<Models />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
|
|
{view === 'AI' && <AI />}
|
|
{view === 'FAQ' && <FAQ />}
|
|
{view === 'Documentation' && <Documentation />}
|
|
{view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|