React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Split the pages up

Browse source
This commit is contained in:
Sage The DM 2024-09-18 10:03:36 +02:00
parent 54ead8579c
commit 48668f7f6e
7 changed files with 203 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

141
app/page.tsx
View file

@ -1,14 +1,19 @@
"use client"; // Add this at the top to mark this file as a Client Component
// LandingPage.tsx
"use client";
import React, { useState, useEffect, useRef } from 'react';
import './styles.css'; // Make sure this matches your CSS file path
import Header from './Header';
import History from './History';
import Models from './Models';
import Conversation from './Conversation';
import InputForm from './InputForm';
import './styles.css';
const App = () => {
const [showDivs, setShowDivs] = useState(true); // Default to true to show divs on load
const LandingPage: React.FC = () => {
const [showDivs, setShowDivs] = useState(true);
const conversationRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// Scroll to bottom when the component mounts or updates
const scrollToBottom = () => {
const conversation = conversationRef.current;
if (conversation) {
@ -16,11 +21,9 @@ const App = () => {
}
};
scrollToBottom(); // Scroll to the bottom when the page loads
scrollToBottom();
// Use MutationObserver to efficiently observe changes in the conversation element
const observer = new MutationObserver(scrollToBottom);
if (conversationRef.current) {
observer.observe(conversationRef.current, {
childList: true,
@ -39,119 +42,25 @@ const App = () => {
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>
<div className="header-menu">
<ul>
<li>
<a href="/">
<img src="/img/logo.png" alt="logo" />
</a>
</li>
<li>
<a href="/documentation">Documentation</a>
</li>
<li>
<a href="/faq">FAQ</a>
</li>
<li>
<button onClick={toggleDivs}>{showDivs ? "Hide Divs" : "Show Divs"}</button>
</li>
</ul>
</div>
</header>
<Header toggleDivs={toggleDivs} showDivs={showDivs} />
<div className="container">
{showDivs && (
<div className="history-background">
<div className="history">
<ul>
<li>
<a href="#">history1</a>
</li>
{/* Add more history items here */}
</ul>
</div>
</div>
)}
{showDivs && (
<div className="model-background">
<div className="models">
<div className="titel">
<h1>Different AI models</h1>
</div>
<form action="">
<div className="grid">
<button className="code-model model-box">
<div className="overlay">
<h3>Code</h3>
<img src="/img/wifi.svg" alt="Wi-Fi" />
</div>
</button>
<button className="math-model model-box">
<div className="overlay">
<h3>Math</h3>
<img src="/img/nowifi.svg" alt="No Wi-Fi" />
</div>
</button>
<button className="language-model model-box">
<div className="overlay">
<h3>Language</h3>
</div>
</button>
<button className="default-model model-box">
<div className="overlay">
<h3>Default</h3>
</div>
</button>
<button className="default-model model-box">
<div className="overlay">
<h3>Default</h3>
</div>
</button>
<button className="default-model model-box">
<div className="overlay">
<h3>Default</h3>
</div>
</button>
<button className="default-model model-box">
<div className="overlay">
<h3>Default</h3>
</div>
</button>
</div>
</form>
</div>
</div>
)}
<div className="output">
<div className="conversation resize" ref={conversationRef}>
{/* Render messages here */}
{/* Replace the following example with dynamic rendering */}
<div className="user-message">User: Example message</div>
<div className="ai-message">AI: Example response</div>
</div>
</div>
<form className="input" method="POST" action="" id="inputForm">
<input
type="text"
name="user_message"
placeholder="Type your message here..."
/>
<button type="submit" name="option" value="chat">
<img src="/img/send.svg" alt="send" />
</button>
<button type="submit" name="option" value="voice">
<img src="/img/microphone.svg" alt="microphone" />
</button>
</form>
{showDivs && <History />}
{showDivs && <Models />}
<Conversation ref={conversationRef} messages={messages} />
<InputForm />
</div>
</div>
);
};
export default App;
export default LandingPage;