forked from React-Group/interstellar_ai
Split the pages up
This commit is contained in:
Sage The DM
parent
54ead8579c
commit
48668f7f6e
7 changed files with 203 additions and 116 deletions
39
app/Conversation.tsx
Normal file
39
app/Conversation.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
// Conversation.tsx
|
||||||
|
import React, { ForwardedRef } from 'react';
|
||||||
|
|
||||||
|
interface ConversationProps {
|
||||||
|
messages: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const Conversation = React.forwardRef<HTMLDivElement, ConversationProps>(({ messages }, ref: ForwardedRef<HTMLDivElement>) => {
|
||||||
|
return (
|
||||||
|
<div className="output">
|
||||||
|
<div className="conversation resize" id="conversation" ref={ref}>
|
||||||
|
{messages.map((message, index) => {
|
||||||
|
const isUserMessage = message.startsWith('User:');
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={isUserMessage ? 'user-message' : 'ai-message'}
|
||||||
|
>
|
||||||
|
{message}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<form method="POST" action="" id="buttonForm">
|
||||||
|
<button type="button" name="option" value="chat">
|
||||||
|
<img src="/img/resend.svg" alt="resend" />
|
||||||
|
</button>
|
||||||
|
<button type="button" name="option" value="chat">
|
||||||
|
<img src="/img/edit.svg" alt="edit" />
|
||||||
|
</button>
|
||||||
|
<button type="button" name="option" value="answer">
|
||||||
|
<img src="/img/copy.svg" alt="copy" />
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Conversation;
|
||||||
34
app/Header.tsx
Normal file
34
app/Header.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
// Header.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
toggleDivs: () => void;
|
||||||
|
showDivs: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Header: React.FC<HeaderProps> = ({ toggleDivs, showDivs }) => {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
36
app/History.tsx
Normal file
36
app/History.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
// History.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const History: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="history-background">
|
||||||
|
<div className="history">
|
||||||
|
<ul>
|
||||||
|
{/* Populate with history items */}
|
||||||
|
<li><a href="#">history1</a></li>
|
||||||
|
<li><a href="#">history2</a></li>
|
||||||
|
<li><a href="#">history3</a></li>
|
||||||
|
<li><a href="#">history4</a></li>
|
||||||
|
<li><a href="#">history5</a></li>
|
||||||
|
<li><a href="#">history6</a></li>
|
||||||
|
<li><a href="#">history7</a></li>
|
||||||
|
<li><a href="#">history8</a></li>
|
||||||
|
<li><a href="#">history9</a></li>
|
||||||
|
<li><a href="#">history10</a></li>
|
||||||
|
<li><a href="#">history11</a></li>
|
||||||
|
<li><a href="#">history12</a></li>
|
||||||
|
<li><a href="#">history13</a></li>
|
||||||
|
<li><a href="#">history14</a></li>
|
||||||
|
<li><a href="#">history15</a></li>
|
||||||
|
<li><a href="#">history16</a></li>
|
||||||
|
<li><a href="#">history17</a></li>
|
||||||
|
<li><a href="#">history18</a></li>
|
||||||
|
<li><a href="#">history19</a></li>
|
||||||
|
<li><a href="#">history20</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default History;
|
||||||
22
app/InputForm.tsx
Normal file
22
app/InputForm.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
// InputForm.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const InputForm: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InputForm;
|
||||||
43
app/Models.tsx
Normal file
43
app/Models.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
// Models.tsx
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const Models: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
{/* Add more model buttons here */}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Models;
|
||||||
|
|
@ -10,6 +10,10 @@ export default function RootLayout({
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>AI Assistant</title>
|
||||||
|
</head>
|
||||||
<body>{children}</body>
|
<body>{children}</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
141
app/page.tsx
141
app/page.tsx
|
|
@ -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 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 LandingPage: React.FC = () => {
|
||||||
const [showDivs, setShowDivs] = useState(true); // Default to true to show divs on load
|
const [showDivs, setShowDivs] = useState(true);
|
||||||
const conversationRef = useRef<HTMLDivElement>(null);
|
const conversationRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Scroll to bottom when the component mounts or updates
|
|
||||||
const scrollToBottom = () => {
|
const scrollToBottom = () => {
|
||||||
const conversation = conversationRef.current;
|
const conversation = conversationRef.current;
|
||||||
if (conversation) {
|
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);
|
const observer = new MutationObserver(scrollToBottom);
|
||||||
|
|
||||||
if (conversationRef.current) {
|
if (conversationRef.current) {
|
||||||
observer.observe(conversationRef.current, {
|
observer.observe(conversationRef.current, {
|
||||||
childList: true,
|
childList: true,
|
||||||
|
|
@ -39,119 +42,25 @@ const App = () => {
|
||||||
setShowDivs(prevState => !prevState);
|
setShowDivs(prevState => !prevState);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Example messages array
|
||||||
|
const messages = [
|
||||||
|
'User: Hello!',
|
||||||
|
'AI: Hi there!',
|
||||||
|
'User: How are you?',
|
||||||
|
'AI: I’m good, thank you!'
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<header>
|
<Header toggleDivs={toggleDivs} showDivs={showDivs} />
|
||||||
<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>
|
|
||||||
|
|
||||||
<div className="container">
|
<div className="container">
|
||||||
{showDivs && (
|
{showDivs && <History />}
|
||||||
<div className="history-background">
|
{showDivs && <Models />}
|
||||||
<div className="history">
|
<Conversation ref={conversationRef} messages={messages} />
|
||||||
<ul>
|
<InputForm />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default LandingPage;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue