YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Started the Rework

Browse source
This commit is contained in:
Sage The DM 2024-09-19 09:54:00 +02:00
parent 2327fc343a
commit a2c960b710
11 changed files with 177 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/AI.tsx Normal file
View file

@ -0,0 +1,13 @@
// AI.tsx
import React from 'react';
import InputBackend from './InputBackend';
const AI: React.FC = () => {
return (
<div className="ai-container">
<InputBackend />
</div>
);
};
export default AI;

13
app/Documentation.tsx Normal file
View file

@ -0,0 +1,13 @@
// AI.tsx
import React from 'react';
const AI: React.FC = () => {
return (
<div>
<h1>hans</h1>
</div>
);
};
export default AI;

13
app/Faq.tsx Normal file
View file

@ -0,0 +1,13 @@
// AI.tsx
import React from 'react';
const AI: React.FC = () => {
return (
<div>
<h1>Peter</h1>
</div>
);
};
export default AI;

26
app/Header.tsx
View file

@ -4,29 +4,37 @@ import React from 'react';
interface HeaderProps {
toggleDivs: () => void;
showDivs: boolean;
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
showHistoryModelsToggle: boolean;
}
const Header: React.FC<HeaderProps> = ({ toggleDivs, showDivs }) => {
const Header: React.FC<HeaderProps> = ({ toggleDivs, showDivs, onViewChange, showHistoryModelsToggle }) => {
return (
<header>
<div className="header-menu">
<ul>
<li>
<a href="/">
<a href="#" onClick={() => onViewChange('AI')}>
<img src="/img/logo.png" alt="logo" />
</a>
</li>
<li>
<a href="/documentation">Documentation</a>
<a href="#" onClick={() => onViewChange('Documentation')}>
Documentation
</a>
</li>
<li>
<a href="/faq">FAQ</a>
</li>
<li>
<button onClick={toggleDivs}>
{showDivs ? "Hide History and Models" : "Show History and Models"}
</button>
<a href="#" onClick={() => onViewChange('FAQ')}>
FAQ
</a>
</li>
{showHistoryModelsToggle && (
<li>
<button onClick={toggleDivs}>
{showDivs ? "Hide History and Models" : "Show History and Models"}
</button>
</li>
)}
</ul>
</div>
</header>

4
app/layout.tsx
View file

@ -10,10 +10,6 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Assistant</title>
</head>
<body>{children}</body>
</html>
)

36
app/page.tsx
View file

@ -1,14 +1,17 @@
"use client"
// LandingPage.tsx
"use client"
import React, { useState, useEffect, useRef } from 'react';
import Header from './Header';
import AI from './AI';
import FAQ from './Faq';
import Documentation from './Documentation';
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 [view, setView] = useState<'AI' | 'FAQ' | 'Documentation'>('AI');
const conversationRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -40,16 +43,33 @@ const LandingPage: React.FC = () => {
setShowDivs(prevState => !prevState);
};
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
setView(view);
// Optionally hide the History/Models section when changing view
if (view !== 'AI') {
setShowDivs(false);
}
};
return (
<div className="App">
<Header toggleDivs={toggleDivs} showDivs={showDivs} />
<Header
toggleDivs={toggleDivs}
showDivs={showDivs}
onViewChange={handleViewChange}
showHistoryModelsToggle={view === 'AI'}
/>
<div className="container">
<div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
<History />
<Models />
</div>
{view === 'AI' && (
<div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
<History />
<Models />
</div>
)}
<div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
<InputBackend />
{view === 'AI' && <AI />}
{view === 'FAQ' && <FAQ />}
{view === 'Documentation' && <Documentation />}
</div>
</div>
</div>

34
app/styles/container.css
View file

@ -33,3 +33,37 @@
.conversation-container.collapsed {
margin-left: 30vw; /* Same as the width of the left-panel */
}
/* container.css */
/* Overlay styles for Documentation and FAQ */
.overlay {
position: fixed; /* Fixed positioning for overlay */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 1000; /* Ensure it is above other content */
display: none; /* Hidden by default */
align-items: center;
justify-content: center;
color: white; /* Text color for better readability */
padding: 20px;
box-sizing: border-box;
}
/* Show overlay when active */
.overlay.active {
display: flex;
}
/* Specific styling for Documentation overlay */
.overlay.documentation {
/* Add specific styles for Documentation overlay if needed */
}
/* Specific styling for FAQ overlay */
.overlay.faq {
/* Add specific styles for FAQ overlay if needed */
}

6
app/styles/faq.css
View file

@ -0,0 +1,6 @@
.faq-background{
width: 100vw;
height: 100vh;
color: white;
background-color: white;
}

1
app/styles/header.css
View file

@ -10,7 +10,6 @@ header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
font-family: var(--font-family);
height: 5vh;
}
header li {