59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
"use client"
|
|
// LandingPage.tsx
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import Header from './Header';
|
|
import History from './History';
|
|
import Models from './Models';
|
|
import InputBackend from './InputBackend';
|
|
import './styles/master.css';
|
|
|
|
const LandingPage: React.FC = () => {
|
|
const [showDivs, setShowDivs] = useState(true);
|
|
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);
|
|
};
|
|
|
|
return (
|
|
<div className="App">
|
|
<Header toggleDivs={toggleDivs} showDivs={showDivs} />
|
|
<div className="container">
|
|
<div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
|
|
<History />
|
|
<Models />
|
|
</div>
|
|
<div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
|
|
<InputBackend />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|