forked from React-Group/interstellar_ai
89 lines
2.2 KiB
TypeScript
89 lines
2.2 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 Conversation from './Conversation';
|
||
import InputForm from './InputForm';
|
||
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);
|
||
};
|
||
|
||
const messages = [
|
||
'User: Hello!',
|
||
'AI: Hi there!',
|
||
'User: How are you?',
|
||
'AI: I’m good, thank you!'
|
||
];
|
||
|
||
const handleResendClick = () => {
|
||
console.log('Resend button clicked');
|
||
// Handle resend action
|
||
};
|
||
|
||
const handleEditClick = () => {
|
||
console.log('Edit button clicked');
|
||
// Handle edit action
|
||
};
|
||
|
||
const handleCopyClick = () => {
|
||
console.log('Copy button clicked');
|
||
// Handle copy action
|
||
};
|
||
|
||
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'}`}>
|
||
<Conversation
|
||
ref={conversationRef}
|
||
messages={messages}
|
||
onResendClick={handleResendClick}
|
||
onEditClick={handleEditClick}
|
||
onCopyClick={handleCopyClick}
|
||
/>
|
||
<InputForm />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LandingPage;
|