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

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
Show stats 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;

16
app/Header.tsx
View file

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

4
app/layout.tsx
View file

@ -10,10 +10,6 @@ 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>
) )

28
app/page.tsx
View file

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

34
app/styles/container.css
View file

@ -33,3 +33,37 @@
.conversation-container.collapsed { .conversation-container.collapsed {
margin-left: 30vw; /* Same as the width of the left-panel */ 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); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
font-family: var(--font-family); font-family: var(--font-family);
height: 5vh;
} }
header li { header li {

87
package-lock.json generated
View file

@ -13,11 +13,12 @@
"next": "14.2.12", "next": "14.2.12",
"ollama": "^0.5.9", "ollama": "^0.5.9",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18",
"react-router-dom": "^6.26.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18.3.7",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "14.2.12", "eslint-config-next": "14.2.12",
@ -464,6 +465,15 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@remix-run/router": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
"integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rtsao/scc": { "node_modules/@rtsao/scc": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@ -3536,34 +3546,6 @@
} }
} }
}, },
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/normalize-path": { "node_modules/normalize-path": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@ -3906,10 +3888,9 @@
} }
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.47", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -3926,9 +3907,9 @@
], ],
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"nanoid": "^3.3.7", "nanoid": "^3.3.6",
"picocolors": "^1.1.0", "picocolors": "^1.0.0",
"source-map-js": "^1.2.1" "source-map-js": "^1.0.2"
}, },
"engines": { "engines": {
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
@ -4153,6 +4134,38 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/react-router": {
"version": "6.26.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
"integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.19.2"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.26.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
"integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.19.2",
"react-router": "6.26.2"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/read-cache": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

5
package.json
View file

@ -14,11 +14,12 @@
"next": "14.2.12", "next": "14.2.12",
"ollama": "^0.5.9", "ollama": "^0.5.9",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18",
"react-router-dom": "^6.26.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18.3.7",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "14.2.12", "eslint-config-next": "14.2.12",