diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..a14e64f --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,16 @@ +export const metadata = { + title: 'Next.js', + description: 'Generated by Next.js', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/app/page.tsx b/app/page.tsx index e69de29..63d9c78 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -0,0 +1,157 @@ +"use client"; // Add this at the top to mark this file as a Client Component + +import React, { useState, useEffect, useRef } from 'react'; +import './styles.css'; // Make sure this matches your CSS file path + +const App = () => { + const [showDivs, setShowDivs] = useState(true); // Default to true to show divs on load + const conversationRef = useRef(null); + + useEffect(() => { + // Scroll to bottom when the component mounts or updates + const scrollToBottom = () => { + const conversation = conversationRef.current; + if (conversation) { + conversation.scrollTop = conversation.scrollHeight; + } + }; + + scrollToBottom(); // Scroll to the bottom when the page loads + + // Use MutationObserver to efficiently observe changes in the conversation element + const observer = new MutationObserver(scrollToBottom); + + if (conversationRef.current) { + observer.observe(conversationRef.current, { + childList: true, + subtree: true, + }); + } + + return () => { + if (conversationRef.current) { + observer.disconnect(); + } + }; + }, []); + + const toggleDivs = () => { + setShowDivs(prevState => !prevState); + }; + + return ( +
+
+
+ +
+
+ +
+ {showDivs && ( +
+
+
    +
  • + history1 +
    • + {/* Add more history items here */} +
+
+
+ )} + + {showDivs && ( +
+
+
+

Different AI models

+
+
+
+ + + + + + + +
+
+
+
+ )} + +
+
+ {/* Render messages here */} + {/* Replace the following example with dynamic rendering */} +
User: Example message
+
AI: Example response
+
+
+ +
+ + + +
+
+
+ ); +}; + +export default App; diff --git a/app/styles.css b/app/styles.css new file mode 100644 index 0000000..0f41603 --- /dev/null +++ b/app/styles.css @@ -0,0 +1,524 @@ +:root { + --background-color: white; + --text-color: white; + --font-family: Arial, sans-serif; + --history-background-color: rgb(0, 0, 48); + --models-background-color: rgb(0, 0, 48); + --output-background-color: black; + /* Set the conversation background to black */ + --user-message-color: rgb(0, 128, 255); + /* Blueish bubble for user */ + --ai-message-color: rgb(100, 100, 255); + /* Lighter blue for AI */ + --input-background-color: rgb(0, 0, 48); + --input-button-color: rgb(0, 128, 255); + --input-button-hover-color: rgb(0, 100, 200); + --scrollbar-track: rgb(91, 172, 253); + --scrollbar-thumb: rgb(0, 88, 176); +} + +/* Global Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + height: 100vh; + overflow: hidden; + /* Prevent scrolling */ +} + +/* Body Styling */ +body { + margin-top: 2em; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--background-color); + color: var(--text-color); + font-family: var(--font-family); + margin-bottom: 0.5em; +} + +/* Header Styling */ +header { + background-color: var(--background-color); + color: black; + width: 100%; + text-decoration: none; + position: fixed; + top: 0; + left: 0; + padding: 10px 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + z-index: 1000; + font-family: var(--font-family); +} + +header li { + display: inline-block; + margin: 0 15px; +} + +header img { + height: 2em; + vertical-align: middle; +} + +header a { + color: black; + text-decoration: none; + transition: color 0.3s; +} + +header a:hover { + color: var(--input-button-color); +} + +/* Container Grid Layout */ +.container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: 3fr 1fr 1fr 1fr; + gap: 10px; + width: 90vw; + height: 95vh; +} + +/* History Section */ +.history-background { + grid-column: 1/2; + grid-row: 1/2; + height: 100%; + overflow: hidden; + background-color: var(--history-background-color); + padding: 1em; + border-radius: 2em; +} + +.history { + height: 100%; + overflow-y: scroll; + padding-right: 10px; +} + +.history ul { + list-style: none; +} + +.history ul li { + padding: 10px 0; + border-bottom: 1px solid var(--text-color); + width: 100%; +} + +.history ul li a { + display: block; + text-decoration: none; + color: white; + width: 100%; + padding: 5px; +} + +.history ul li a:hover { + background-color: var(--input-button-hover-color); +} + +/* Models Section */ +.model-background { + grid-column: 1/2; + grid-row: 2/5; + overflow-y: auto; + background-color: var(--models-background-color); + border-radius: 2em; + padding: 1em; + height: 90%; + box-sizing: border-box; + overflow: hidden; +} + +.models { + grid-column: 1/2; + grid-row: 2/5; + overflow-y: auto; + background-color: var(--models-background-color); + border-radius: 2em; + padding: 1em; + height: 100%; + box-sizing: border-box; + overflow: hidden; + overflow-y: scroll; +} + +.models form { + padding-right: 10px; + padding-left: 10px; + display: flex; + align-items: center; + justify-content: center; +} + +.models .titel { + padding-bottom: 1em; + display: flex; + justify-content: center; + align-items: center; +} + +.grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5vh; + width: fit-content; + /* height: calc(100% - 2em); */ +} + +.grid h3 { + font-size: x-large; +} + +.model-box { + display: flex; + align-items: center; + justify-content: center; + color: #fff; + border-radius: 5%; + overflow: hidden; + position: relative; + height: 18vh; + width: 18vh; +} + +.overlay { + z-index: 900; + position: absolute; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + /* Dark overlay */ + color: white; + display: flex; + justify-content: center; + align-items: center; + font-size: 300%; + transition: opacity 0.5s ease; + pointer-events: none; + opacity: 0; + font-size: xx-large; +} + +.overlay img { + align-self: flex-end; + justify-self: end; + height: 3vh; + width: 3vh; + position: absolute; + right: 15px; + bottom: 15px; +} + +.model-box:hover .overlay { + opacity: 1; +} + +.code-model { + background-image: url(/img/code.jpg); + background-repeat: no-repeat; + background-size: cover; +} + +.math-model { + background-image: url(/img/math.jpg); + background-color: white; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +.language-model { + background-image: url(/img/language.jpg); + background-color: #72cce4; + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} + +.default-model { + background-image: url(/img/default.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +/* Output Section */ +.output { + grid-column: 2; + grid-row: 1 / 4; + border-radius: 2em; + background-color: var(--output-background-color); + padding: 1.5em; + display: flex; + flex-direction: column; + justify-content: flex-start; + font-size: 1.2em; + overflow-y: auto; + min-height: 75vh; + margin-bottom: 0; + width: 100%; + height: 100%; +} + +/* Conversation */ +#conversation { + display: flex; + flex-direction: column; + padding: 10px; + overflow-y: auto; + max-height: 80vh; + background-color: var(--output-background-color); + /* Black background */ + border-radius: 10px; + scroll-behavior: smooth; + /* Optional: Smooth scrolling */ +} + +/* Resizable Conversation */ +.resize { + resize: both; + overflow: auto; + /* Allow resizing both horizontally and vertically */ + min-width: 300px; + min-height: 300px; + /* Minimum dimensions to prevent it from becoming too small */ +} + +/* User and AI Messages */ +.user-message, +.ai-message { + margin: 10px 0; + padding: 10px 15px; + border-radius: 15px; + max-width: 60%; + width: fit-content; + /* Adjusts width to fit the content */ + word-wrap: break-word; + display: block; + /* Changed from inline-block to block */ + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); +} + +/* Align user message to the right */ +.user-message { + background-color: var(--user-message-color); + color: var(--text-color); + border-bottom-right-radius: 0; + margin-left: auto; + text-align: right; + /* Align text to the right */ +} + +/* Align AI message to the left */ +.ai-message { + background-color: var(--ai-message-color); + color: var(--text-color); + border-bottom-left-radius: 0; + margin-right: auto; + text-align: left; + /* Align text to the left */ +} + +/* Output Form Buttons */ +.output form { + display: flex; + justify-content: flex-start; + gap: 10px; +} + +.output form button { + background-color: transparent; + color: white; + border: none; + padding: 0; + margin: 5px; + cursor: pointer; + transition: transform 0.2s ease-in-out; +} + +.output form button:hover { + transform: scale(1.2); +} + +.output form button img { + height: 1.8em; +} + +/* Input Section */ +.input { + grid-column: 2/3; + grid-row: 4/5; + border-radius: 20px; + background-color: var(--input-background-color); + padding: 1.5vh; + display: flex; + justify-content: space-between; + align-items: center; + height: auto; + /* margin-top: -9em; */ + gap: 10px; + height: 10vh; +} + +.input input { + flex-grow: 1; + padding: 5px; + font-size: 1.2em; + border-radius: 8px; + border: 2px solid var(--input-button-color); + outline: none; + margin-right: 10px; + background-color: rgba(255, 255, 255, 0.9); + color: #333; + transition: border-color 0.3s ease-in-out; + height: 7vh; +} + +.input input:focus { + border-color: var(--input-button-hover-color); +} + +.input button { + padding: 1em; + margin: 5px; + background-color: var(--input-button-color); + color: white; + border: none; + border-radius: 50%; + font-size: 1.5em; + cursor: pointer; + height: 50px; + width: 50px; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.3s ease; + position: relative; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.input button img { + height: 1em; +} + +.input button:hover { + background-color: var(--input-button-hover-color); + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); +} + +/* FAQ Section */ +#faq { + max-width: 800px; + width: 90%; + margin-top: 50px; + padding: 20px; + background-color: #222; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +#faq h2 { + text-align: center; + color: #00ccff; + font-size: 2em; + margin-bottom: 20px; +} + +.faq-item { + margin-bottom: 20px; + padding: 10px; + border-radius: 5px; + background-color: #333; +} + +.faq-item h3 { + color: #00ccff; + margin-bottom: 10px; + font-size: 1.5em; +} + +.faq-item p { + color: #ddd; + font-size: 1.1em; + line-height: 1.5; +} + +.faq-item:hover { + background-color: #444; + transition: background-color 0.3s; +} + +::-webkit-scrollbar { + width: 7px; +} + +::-webkit-scrollbar-track { + background-color: var(--scrollbar-track); + border-radius: 5px; + overflow: hidden; + margin-left: 10px; + padding-left: 15px; +} + +::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: 5px; +} + +@media (max-width: 1400px) { + .grid { + grid-template-columns: 1fr; + } + + .model-box { + width: 15vw; + aspect-ratio: 1/1; + } +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .container { + grid-template-columns: 1fr; + grid-template-rows: auto; + width: 95vw; + } + + .history, + .models { + display: none; + /* Hide history and models */ + } + + .output { + grid-column: 1; + grid-row: 1 / span 2; + } + + .input { + grid-column: 1; + grid-row: 3; + /* margin-top: -4em; */ + } + + .input button { + height: 40px; + width: 40px; + } + + .output form button img { + height: 1.5em; + } +} diff --git a/public/img/code.jpg b/public/img/code.jpg new file mode 100644 index 0000000..416fca4 Binary files /dev/null and b/public/img/code.jpg differ diff --git a/public/img/copy.svg b/public/img/copy.svg new file mode 100644 index 0000000..c8bdf17 --- /dev/null +++ b/public/img/copy.svg @@ -0,0 +1,54 @@ + + + + + + + + + + diff --git a/public/img/default.jpg b/public/img/default.jpg new file mode 100644 index 0000000..266213d Binary files /dev/null and b/public/img/default.jpg differ diff --git a/public/img/edit.svg b/public/img/edit.svg new file mode 100644 index 0000000..ed1f7fe --- /dev/null +++ b/public/img/edit.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + diff --git a/public/img/language.jpg b/public/img/language.jpg new file mode 100644 index 0000000..5ab31b9 Binary files /dev/null and b/public/img/language.jpg differ diff --git a/public/img/logo.png b/public/img/logo.png new file mode 100644 index 0000000..00332a4 Binary files /dev/null and b/public/img/logo.png differ diff --git a/public/img/math.jpg b/public/img/math.jpg new file mode 100644 index 0000000..a417968 Binary files /dev/null and b/public/img/math.jpg differ diff --git a/public/img/microphone.svg b/public/img/microphone.svg new file mode 100644 index 0000000..6dde830 --- /dev/null +++ b/public/img/microphone.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/public/img/nowifi.svg b/public/img/nowifi.svg new file mode 100644 index 0000000..8e7beb7 --- /dev/null +++ b/public/img/nowifi.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/public/img/resend.svg b/public/img/resend.svg new file mode 100644 index 0000000..469d02b --- /dev/null +++ b/public/img/resend.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + diff --git a/public/img/send.svg b/public/img/send.svg new file mode 100644 index 0000000..dafc2e9 --- /dev/null +++ b/public/img/send.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/img/wifi.svg b/public/img/wifi.svg new file mode 100644 index 0000000..350a0eb --- /dev/null +++ b/public/img/wifi.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file