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

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

app/Header.tsx

@@ -14,7 +14,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
     <header>
       <ul>
         <li>
-          <button onClick={() => onViewChange('AI')} className="header-button">
+          <button onClick={() => onViewChange('AI')} className="header-button header-logo">
             <img src="/img/logo.png" alt="logo" className="header-logo" />
           </button>
         </li>

app/ProcessAPI.js

@@ -10,7 +10,7 @@ onmessage = function (e) {
     };
     switch (functionName) {
         case "getAccess":
-            axios.get('https://localhost:5000/interstellar/api/ai_create')
+            axios.get('https://127.0.0.1:5000/interstellar/api/ai_create')
                 .then(Response => {
                     postMessage(Response.data.access_token)
                 }).catch(error => {
@@ -18,7 +18,7 @@ onmessage = function (e) {
                 })
             break
         case "postRequest":
-            axios.post('https://localhost:5000/interstellar/api/ai_send', data)
+            axios.post('https://127.0.0.1:5000/interstellar/api/ai_send', data)
                 .then(Response => {
                     postMessage(Response.data)
                 }).catch(error => {
@@ -26,7 +26,7 @@ onmessage = function (e) {
                 })
             break
         case "getResponse":
-            axios.get('https://localhost:5000/interstellar/api/ai_get?access_token='+access_token)
+            axios.get('https://127.0.0.1:5000/interstellar/api/ai_get?access_token=' + access_token)
                 .then(Response => {
                     postMessage(Response.data.response)
                 }).catch(error => {

app/styles/responsive.css

@@ -1,51 +1,93 @@
 /* Responsive behavior - applies only on smaller screens */
 @media (max-width: 1200px) {
-  header li{
+  *{
-    display: block;
+    margin: 0;
+    padding: 0;
   }
   
+  /* Header styles */
+  header {
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-top: 5px;
+    padding-top: 0;
+    width: 100%;
+  }
+ 
+  /* Container styles */
   .container {
     display: flex;
-    justify-content: center; /* Centers horizontally */
+    flex-direction: column;
-    width: 90vw;
+    align-items: center;
-    margin-top: 10vh;
+    width: 100vw;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
   }
 
-  .left-panel {
+  header li{
-    display: none; /* Initially hidden */
+    display: flex;
-    min-width: 90%; /* Takes full width when shown */
+    flex-direction: column;
+    justify-content: center;
     margin: 0;
   }
 
+  header li button {
+    margin: 2px;
+    margin-bottom: 0;
+  }
 
-  .conversation-container {
+  header li img {
-      width: 90%;
+    height: 1.5em;
+    vertical-align: middle;
+    margin-top: 10px;
+  }
+
+  /* Left panel styles */
+ .left-panel {
+    display: none; /* Initially hidden */
+    min-width: 90%; /* Takes full width when visible */
+    margin: 0;
   }
 
  .left-panel.visible {
     display: block;
   }
 
+  /* Conversation container styles */
+ .conversation-container {
+    width: 90%;
+    height: 90%;
+  }
+
  .conversation-container.collapsed {
-      display: none;
+    width: 0;
+    padding: 0;
+    border: none;
+    overflow: hidden;
   }
 
  .conversation-container.expanded {
     width: 100%;
   }
 
+  /* Grid styles */
  .grid {
     grid-template-columns: 1fr; /* One item per line */
   }
 
+  /* Model box styles */
  .model-box {
-      max-width: none; /* Remove max-width constraint */
+    max-width: none; /* Remove max-width */
     margin: 0 auto; /* Center each model-box */
   }
 
+  /* Input styles */
  .input {
     grid-column: 1 / -1;
-    flex-direction: row;
     gap: 10px;
     padding: 0.5em;
     margin: 0 auto;

py/api.py

@@ -6,11 +6,12 @@ import secrets
 
 class AI:
     @staticmethod
-    def process_local(model, message, system, return_class, access_token):
+    def process_local(model, messages, return_class, access_token):
         stream = ollama.chat(
             model=model,
-            messages=[{'role': 'user', 'content': message}, {'role': 'system', 'content': system}],
+            messages=messages,
             stream=True,
+            options={"temperature": 0},
         )
 
         for chunk in stream:
@@ -35,13 +36,12 @@ class API:
         @self.app.route('/interstellar/api/ai_send', methods=['POST'])
         def send_ai():
             data = request.get_json()
-            message = data.get('message')
+            messages = data.get('messages')
             ai_model = data.get('ai_model')
-            system_prompt = data.get('system_prompt')
             access_token = data.get('access_token')
             if access_token not in self.ai_response:
                 return jsonify({'status': 401, 'error': 'Invalid access token'})
-            self.ai.process_local(ai_model, message, system_prompt, self, access_token)
+            self.ai.process_local(ai_model, messages, self, access_token)
             return jsonify({'status': 200})
 
         @self.app.route('/interstellar/api/ai_get', methods=['GET'])