79 lines
2 KiB
TypeScript
79 lines
2 KiB
TypeScript
// LandingPage.tsx
|
|
"use client"
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import Header from './Header';
|
|
import AI from './AI';
|
|
import FAQ from './Faq';
|
|
import Documentation from './Documentation';
|
|
import History from './History';
|
|
import Models from './Models';
|
|
import './styles/master.css';
|
|
|
|
const LandingPage: React.FC = () => {
|
|
const [showDivs, setShowDivs] = useState(true);
|
|
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation'>('AI');
|
|
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') => {
|
|
setView(view);
|
|
// Optionally hide the History/Models section when changing view
|
|
if (view !== 'AI') {
|
|
setShowDivs(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="App">
|
|
<Header
|
|
toggleDivs={toggleDivs}
|
|
showDivs={showDivs}
|
|
onViewChange={handleViewChange}
|
|
showHistoryModelsToggle={view === 'AI'}
|
|
/>
|
|
<div className="container">
|
|
{view === 'AI' && (
|
|
<div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
|
|
<History />
|
|
<Models />
|
|
</div>
|
|
)}
|
|
<div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
|
|
{view === 'AI' && <AI />}
|
|
{view === 'FAQ' && <FAQ />}
|
|
{view === 'Documentation' && <Documentation />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|