diff --git a/app/Conversation.tsx b/app/Conversation.tsx deleted file mode 100644 index 1caa836..0000000 --- a/app/Conversation.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React, { ForwardedRef } from 'react'; - -interface ConversationProps { - messages: string[]; - onResendClick: () => void; - onEditClick: () => void; - onCopyClick: () => void; -} - -const Conversation = React.forwardRef( - ({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef) => { - return ( -
-
- {messages.map((message, index) => { - const isUserMessage = message.startsWith('User:'); - return ( -
- {message} -
- ); - })} -
- - - -
-
-
- ); - } -); - -export default Conversation; diff --git a/app/Header.tsx b/app/Header.tsx deleted file mode 100644 index 7b4c1c6..0000000 --- a/app/Header.tsx +++ /dev/null @@ -1,36 +0,0 @@ -// Header.tsx -import React from 'react'; - -interface HeaderProps { - toggleDivs: () => void; - showDivs: boolean; -} - -const Header: React.FC = ({ toggleDivs, showDivs }) => { - return ( -
-
-
    -
  • - - logo - -
    • -
  • - Documentation -
    • -
  • - FAQ -
    • -
  • - -
    • -
-
-
- ); -}; - -export default Header; diff --git a/app/History.tsx b/app/History.tsx deleted file mode 100644 index cd93950..0000000 --- a/app/History.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -const History: React.FC = () => { - return ( -
-
-
    - {/* Populate with history items */} - {Array.from({ length: 20 }, (_, index) => ( -
  • - history{index + 1} -
    • - ))} -
-
-
- ); -}; - -export default History; diff --git a/app/InputForm.tsx b/app/InputForm.tsx deleted file mode 100644 index 6abfc64..0000000 --- a/app/InputForm.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -const InputForm: React.FC = () => { - return ( -
- - - -
- ); -}; - -export default InputForm; diff --git a/app/Models.tsx b/app/Models.tsx deleted file mode 100644 index ee6739b..0000000 --- a/app/Models.tsx +++ /dev/null @@ -1,88 +0,0 @@ -// Models.tsx -import React from 'react'; - -const Models: React.FC = () => { - return ( -
-
-
-

Different AI models

-
-
-
- - - - - {/* Example Models */} - - - - - - - - - -
-
-
-
- ); -}; - -export default Models; 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 a53edbb..63d9c78 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,18 +1,14 @@ -"use client" -// LandingPage.tsx -import React, { useState, useEffect, useRef } from 'react'; -import Header from './Header'; -import History from './History'; -import Models from './Models'; -import Conversation from './Conversation'; -import InputForm from './InputForm'; -import './styles/master.css'; +"use client"; // Add this at the top to mark this file as a Client Component -const LandingPage: React.FC = () => { - const [showDivs, setShowDivs] = useState(true); +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) { @@ -20,9 +16,11 @@ const LandingPage: React.FC = () => { } }; - scrollToBottom(); + 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, @@ -41,49 +39,119 @@ const LandingPage: React.FC = () => { setShowDivs(prevState => !prevState); }; - const messages = [ - 'User: Hello!', - 'AI: Hi there!', - 'User: How are you?', - 'AI: I’m good, thank you!' - ]; - - const handleResendClick = () => { - console.log('Resend button clicked'); - // Handle resend action - }; - - const handleEditClick = () => { - console.log('Edit button clicked'); - // Handle edit action - }; - - const handleCopyClick = () => { - console.log('Copy button clicked'); - // Handle copy action - }; - 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 LandingPage; +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/app/styles/container.css b/app/styles/container.css deleted file mode 100644 index 0c7316c..0000000 --- a/app/styles/container.css +++ /dev/null @@ -1,34 +0,0 @@ -/* container.css */ -.container { - display: flex; - height: 100vh; - width: 100vw; - overflow: hidden; - position: relative; /* Ensure relative positioning for proper transitions */ -} - -.left-panel { - width: 30vw; /* Adjust as needed */ - transition: width 0.3s ease, visibility 0.3s ease; /* Transition for width, opacity, and visibility */ -} - -.left-panel.hidden { - opacity: 0; /* Fade out when hidden */ - width: 0; /* Set width to 0 when hidden */ - visibility: hidden; /* Hide the panel while keeping the space occupied */ - margin-right: -30vw; -} - -.conversation-container { - flex: 1; - transition: width 0.3s ease, visibility 0.3s ease; /* Transition for margin-left */ -} - -/* Adjust margin-left when panel is shown or hidden */ -.conversation-container.expanded { - margin-left: 0; -} - -.conversation-container.collapsed { - margin-left: 30vw; /* Same as the width of the left-panel */ -} diff --git a/app/styles/faq.css b/app/styles/faq.css deleted file mode 100644 index e69de29..0000000 diff --git a/app/styles/global.css b/app/styles/global.css deleted file mode 100644 index 2a2b956..0000000 --- a/app/styles/global.css +++ /dev/null @@ -1,18 +0,0 @@ -html, -body { - height: 100vh; - overflow: hidden; - position: relative; - top: 1vh; -} - -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; -} diff --git a/app/styles/header.css b/app/styles/header.css deleted file mode 100644 index 8ecc019..0000000 --- a/app/styles/header.css +++ /dev/null @@ -1,38 +0,0 @@ -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, -header li button { - color: black; - text-decoration: none; - transition: color 0.3s; - border: none; - background-color: transparent; - font-size: 1em; -} - -header a:hover, -header li button:hover { - color: var(--input-button-color); -} diff --git a/app/styles/history.css b/app/styles/history.css deleted file mode 100644 index 2aaa58d..0000000 --- a/app/styles/history.css +++ /dev/null @@ -1,38 +0,0 @@ -.history-background { - grid-column: 1/2; - grid-row: 1/2; - height: 40vh; - overflow: hidden; - background-color: var(--history-background-color); - padding: 1em; - border-radius: 2em; - margin: 1em; -} - -.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); -} diff --git a/app/styles/input.css b/app/styles/input.css deleted file mode 100644 index 12b71e2..0000000 --- a/app/styles/input.css +++ /dev/null @@ -1,61 +0,0 @@ -/* Input Section */ -.input { - grid-column: 2/3; - grid-row: 4/5; - border-radius: 20px; - background-color: var(--input-background-color); - padding: 1em; - margin: 1em; - display: flex; - justify-content: space-between; - align-items: center; - height: auto; - 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); -} diff --git a/app/styles/master.css b/app/styles/master.css deleted file mode 100644 index 4b21879..0000000 --- a/app/styles/master.css +++ /dev/null @@ -1,13 +0,0 @@ -/* Importing all the split CSS files */ -@import './variables.css'; -@import './reset.css'; -@import './global.css'; -@import './header.css'; -@import './container.css'; -@import './history.css'; -@import './models.css'; -@import './output.css'; -@import './user-ai-messages.css'; -@import './input.css'; -@import './faq.css'; -@import './scrollbar.css'; diff --git a/app/styles/models.css b/app/styles/models.css deleted file mode 100644 index 18b6777..0000000 --- a/app/styles/models.css +++ /dev/null @@ -1,124 +0,0 @@ -.model-background { - grid-column: 1/2; - grid-row: 2/5; - overflow-y: auto; - background-color: var(--models-background-color); - border-radius: 2em; - padding: 1em; - margin: 1em; - height: 50vh; - 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; -} - -.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); - 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; -} diff --git a/app/styles/output.css b/app/styles/output.css deleted file mode 100644 index 122122c..0000000 --- a/app/styles/output.css +++ /dev/null @@ -1,74 +0,0 @@ -/* Output Section */ -.output { - grid-column: 2; - grid-row: 1 / 4; - border-radius: 2em; - background-color: var(--output-background-color); - padding: 1em; - margin: 1em; - display: flex; - flex-direction: column; - justify-content: flex-start; - font-size: 1.2em; - overflow-y: auto; - margin-bottom: 0; - width: 100% -2em; - height: 80vh; - margin-bottom: 1vh; -} - -#conversation { - display: flex; - flex-direction: column; - padding: 10px; - overflow-y: auto; - max-height: 80vh; - background-color: var(--output-background-color); - border-radius: 10px; - scroll-behavior: smooth; -} - -/* Message Bubbles */ -.user-message, .ai-message { - padding: 10px; - border-radius: 10px; - margin: 5px 0; - max-width: 75%; - word-wrap: break-word; -} - -.user-message { - background-color: var(--user-message-background-color); - align-self: flex-end; - color: var(--user-message-text-color); -} - -.ai-message { - background-color: var(--ai-message-background-color); - align-self: flex-start; - color: var(--ai-message-text-color); -} - -/* Button Container */ -.button-container { - display: flex; - padding: 10px 0; -} - -.button-container button { - background: none; - border: none; - cursor: pointer; - background-color: var(--button-background-color); - border-radius: 50%; - padding: 10px; - transition: background-color 0.3s ease; -} - -.button-container button:hover { - background-color: var(--button-hover-background-color); -} - -.button-container img { - height: 1.5em; -} diff --git a/app/styles/reset.css b/app/styles/reset.css deleted file mode 100644 index 23d8732..0000000 --- a/app/styles/reset.css +++ /dev/null @@ -1,5 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} diff --git a/app/styles/scrollbar.css b/app/styles/scrollbar.css deleted file mode 100644 index 5e2f6a1..0000000 --- a/app/styles/scrollbar.css +++ /dev/null @@ -1,17 +0,0 @@ -/* Scrollbar styling */ -.scrollbar { - overflow-y: scroll; -} - -.scrollbar::-webkit-scrollbar { - width: 8px; -} - -.scrollbar::-webkit-scrollbar-thumb { - background-color: #ccc; - border-radius: 4px; -} - -.scrollbar::-webkit-scrollbar-track { - background-color: #f1f1f1; -} \ No newline at end of file diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css deleted file mode 100644 index ccbd494..0000000 --- a/app/styles/user-ai-messages.css +++ /dev/null @@ -1,27 +0,0 @@ -.user-message, -.ai-message { - margin: 10px 0; - padding: 10px 15px; - border-radius: 15px; - max-width: 60%; - width: fit-content; - word-wrap: break-word; - display: block; - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -} - -.user-message { - background-color: var(--user-message-color); - color: var(--text-color); - border-bottom-right-radius: 0; - margin-left: auto; - text-align: right; -} - -.ai-message { - background-color: var(--ai-message-color); - color: var(--text-color); - border-bottom-left-radius: 0; - margin-right: auto; - text-align: left; -} diff --git a/app/styles/variables.css b/app/styles/variables.css deleted file mode 100644 index 3df7f30..0000000 --- a/app/styles/variables.css +++ /dev/null @@ -1,15 +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; - --user-message-color: rgb(0, 128, 255); - --ai-message-color: rgb(100, 100, 255); - --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); -}