diff --git a/app/layout.tsx b/app/layout.tsx deleted file mode 100644 index a14e64f..0000000 --- a/app/layout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -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 63d9c78..e69de29 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,157 +0,0 @@ -"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 deleted file mode 100644 index 0f41603..0000000 --- a/app/styles.css +++ /dev/null @@ -1,524 +0,0 @@ -: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 deleted file mode 100644 index 416fca4..0000000 Binary files a/public/img/code.jpg and /dev/null differ diff --git a/public/img/copy.svg b/public/img/copy.svg deleted file mode 100644 index c8bdf17..0000000 --- a/public/img/copy.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - diff --git a/public/img/default.jpg b/public/img/default.jpg deleted file mode 100644 index 266213d..0000000 Binary files a/public/img/default.jpg and /dev/null differ diff --git a/public/img/edit.svg b/public/img/edit.svg deleted file mode 100644 index ed1f7fe..0000000 --- a/public/img/edit.svg +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - - - - - - diff --git a/public/img/language.jpg b/public/img/language.jpg deleted file mode 100644 index 5ab31b9..0000000 Binary files a/public/img/language.jpg and /dev/null differ diff --git a/public/img/logo.png b/public/img/logo.png deleted file mode 100644 index 00332a4..0000000 Binary files a/public/img/logo.png and /dev/null differ diff --git a/public/img/math.jpg b/public/img/math.jpg deleted file mode 100644 index a417968..0000000 Binary files a/public/img/math.jpg and /dev/null differ diff --git a/public/img/microphone.svg b/public/img/microphone.svg deleted file mode 100644 index 6dde830..0000000 --- a/public/img/microphone.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/public/img/nowifi.svg b/public/img/nowifi.svg deleted file mode 100644 index 8e7beb7..0000000 --- a/public/img/nowifi.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/public/img/resend.svg b/public/img/resend.svg deleted file mode 100644 index 469d02b..0000000 --- a/public/img/resend.svg +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - - - - - diff --git a/public/img/send.svg b/public/img/send.svg deleted file mode 100644 index dafc2e9..0000000 --- a/public/img/send.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/public/img/wifi.svg b/public/img/wifi.svg deleted file mode 100644 index 350a0eb..0000000 --- a/public/img/wifi.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file