forked from React-Group/interstellar_ai
66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
// LandingPage.tsx
|
||
"use client";
|
||
|
||
import React, { useState, useEffect, useRef } from 'react';
|
||
import Header from './Header';
|
||
import History from './History';
|
||
import Models from './Models';
|
||
import Conversation from './Conversation';
|
||
import InputForm from './InputForm';
|
||
import './styles.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);
|
||
};
|
||
|
||
// Example messages array
|
||
const messages = [
|
||
'User: Hello!',
|
||
'AI: Hi there!',
|
||
'User: How are you?',
|
||
'AI: I’m good, thank you!'
|
||
];
|
||
|
||
return (
|
||
<div className="App">
|
||
<Header toggleDivs={toggleDivs} showDivs={showDivs} />
|
||
<div className="container">
|
||
{showDivs && <History />}
|
||
{showDivs && <Models />}
|
||
<Conversation ref={conversationRef} messages={messages} />
|
||
<InputForm />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LandingPage;
|