From a2c960b7105ed9b78816a8df163c1c89996a3268 Mon Sep 17 00:00:00 2001
From: Sage The DM <luca.burger@grischuni.net>
Date: Thu, 19 Sep 2024 09:54:00 +0200
Subject: [PATCH] Started the Rework
---
app/AI.tsx | 13 ++++++
app/Documentation.tsx | 13 ++++++
app/Faq.tsx | 13 ++++++
app/Header.tsx | 26 +++++++-----
app/layout.tsx | 4 --
app/page.tsx | 36 +++++++++++++----
app/styles/container.css | 34 ++++++++++++++++
app/styles/faq.css | 6 +++
app/styles/header.css | 1 -
package-lock.json | 87 +++++++++++++++++++++++-----------------
package.json | 5 ++-
11 files changed, 177 insertions(+), 61 deletions(-)
create mode 100644 app/AI.tsx
create mode 100644 app/Documentation.tsx
create mode 100644 app/Faq.tsx
diff --git a/app/AI.tsx b/app/AI.tsx
new file mode 100644
index 0000000..597b629
--- /dev/null
+++ b/app/AI.tsx
@@ -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;
diff --git a/app/Documentation.tsx b/app/Documentation.tsx
new file mode 100644
index 0000000..3c7edd2
--- /dev/null
+++ b/app/Documentation.tsx
@@ -0,0 +1,13 @@
+// AI.tsx
+import React from 'react';
+
+
+const AI: React.FC = () => {
+ return (
+ <div>
+ <h1>hans</h1>
+ </div>
+ );
+};
+
+export default AI;
diff --git a/app/Faq.tsx b/app/Faq.tsx
new file mode 100644
index 0000000..8749689
--- /dev/null
+++ b/app/Faq.tsx
@@ -0,0 +1,13 @@
+// AI.tsx
+import React from 'react';
+
+
+const AI: React.FC = () => {
+ return (
+ <div>
+ <h1>Peter</h1>
+ </div>
+ );
+};
+
+export default AI;
diff --git a/app/Header.tsx b/app/Header.tsx
index 7b4c1c6..fbd14cb 100644
--- a/app/Header.tsx
+++ b/app/Header.tsx
@@ -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>
diff --git a/app/layout.tsx b/app/layout.tsx
index 3bf71eb..a14e64f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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>
)
diff --git a/app/page.tsx b/app/page.tsx
index 05030cd..583151e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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>
diff --git a/app/styles/container.css b/app/styles/container.css
index 5e43ccf..7170986 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -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 */
+}
diff --git a/app/styles/faq.css b/app/styles/faq.css
index e69de29..99b28db 100644
--- a/app/styles/faq.css
+++ b/app/styles/faq.css
@@ -0,0 +1,6 @@
+.faq-background{
+ width: 100vw;
+ height: 100vh;
+ color: white;
+ background-color: white;
+}
\ No newline at end of file
diff --git a/app/styles/header.css b/app/styles/header.css
index abb1b66..8ecc019 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -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 {
diff --git a/package-lock.json b/package-lock.json
index 64403cd..5480324 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,12 @@
"next": "14.2.12",
"ollama": "^0.5.9",
"react": "^18",
- "react-dom": "^18"
+ "react-dom": "^18",
+ "react-router-dom": "^6.26.2"
},
"devDependencies": {
"@types/node": "^20",
- "@types/react": "^18",
+ "@types/react": "^18.3.7",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.12",
@@ -464,6 +465,15 @@
"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": {
"version": "1.1.0",
"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": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3906,10 +3888,9 @@
}
},
"node_modules/postcss": {
- "version": "8.4.47",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
- "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
- "dev": true,
+ "version": "8.4.31",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+ "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
@@ -3926,9 +3907,9 @@
],
"license": "MIT",
"dependencies": {
- "nanoid": "^3.3.7",
- "picocolors": "^1.1.0",
- "source-map-js": "^1.2.1"
+ "nanoid": "^3.3.6",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -4153,6 +4134,38 @@
"dev": true,
"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": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index b1b9f3c..a4f359b 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
"next": "14.2.12",
"ollama": "^0.5.9",
"react": "^18",
- "react-dom": "^18"
+ "react-dom": "^18",
+ "react-router-dom": "^6.26.2"
},
"devDependencies": {
"@types/node": "^20",
- "@types/react": "^18",
+ "@types/react": "^18.3.7",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.12",