Merge pull request 'main' (#3) from React-Group/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/3

app/InputBackend.tsx

@@ -40,7 +40,6 @@ const InputBackend:React.FC = () => {
     if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
       if (chatResponse.choices[0].message.content) {
         addMessage('AI: ' + chatResponse.choices[0].message.content);
-        console.error('Error: Brain Not Found');
         console.log(messages)
       }
     } else {
@@ -49,9 +48,15 @@ const InputBackend:React.FC = () => {
   }
 
   const handleSendClick = (message: string) => {
-    addMessage('User: ' + message);
+    var system = "You are a helpful assistant. The following is the chat history."
-    prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
+    for (let index = 0; index < messages.length; index++) {
+      system += messages[index] + " ";
     };
+
+    addMessage('User: ' + message);
+    prompt_mistral("mistral-large-latest", message, system)
+  };
+
   const [messages, setMessages] = useState([
     'User: Hello!',
     'AI: Hi there!',

app/styles/header.css

@@ -10,6 +10,7 @@ header {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     font-family: var(--font-family);
+    height: 5vh;
 }
 
 header li {

app/styles/history.css

@@ -5,8 +5,9 @@
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    border-radius: 2em;
     margin: 1em;
+    margin-right: 0;
+    border-radius: 2em;
 }
 
 .history {

app/styles/master.css

@@ -11,3 +11,4 @@
 @import './input.css';
 @import './faq.css';
 @import './scrollbar.css';
+@import './responsive.css';

app/styles/responsive.css

@@ -0,0 +1,57 @@
+/* responsive.css */
+
+/* Responsive behavior - applies only on smaller screens */
+@media (max-width: 1200px) {
+
+    /* Left panel as an overlay */
+    .left-panel {
+        margin: 0 auto;
+        min-width: 100vw;
+        max-width: 100vw;
+        padding: 1em;
+    }
+
+    .left-panel.hidden {
+        width: 0;
+        /* Set width to 0 when hidden */
+        visibility: hidden;
+        /* Fully hide the panel */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    header {
+        height: 125px;
+    }
+
+    header li {
+        flex-direction: column;
+        display: block;
+        padding: 2px;
+    }
+
+    body {
+        margin-top: 100px;
+    }
+
+    .conversation-container.expanded {
+
+        width: 0;
+        /* Set width to 0 when hidden */
+        visibility: hidden;
+        /* Fully hide the panel */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    .conversation-container.collapsed {
+        margin: 0 auto;
+        min-width: 100vw;
+        max-width: 100vw;
+        padding: 1em;
+        margin-left: 0;
+
+    }
+}