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 ( +
+ +
+ ); +}; + +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 ( +
+

hans

+
+ ); +}; + +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 ( +
+

Peter

+
+ ); +}; + +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 = ({ toggleDivs, showDivs }) => { +const Header: React.FC = ({ toggleDivs, showDivs, onViewChange, showHistoryModelsToggle }) => { return (
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 ( - - - AI Assistant - {children} ) 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(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 (
-
+
-
- - -
+ {view === 'AI' && ( +
+ + +
+ )}
- + {view === 'AI' && } + {view === 'FAQ' && } + {view === 'Documentation' && }
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",