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

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

app/components/Header.tsx

@@ -1,46 +1,77 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Login from './Login';
 
 interface HeaderProps {
-  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
+    onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void;
     showDivs: boolean;
     toggleDivs: () => void;
     showHistoryModelsToggle: boolean;
     showToggle: boolean;
 }
 
-const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
+const Header: React.FC<HeaderProps> = ({
+    onViewChange,
+    showDivs,
+    toggleDivs,
+    showHistoryModelsToggle,
+    showToggle,
+}) => {
     const [menuOpen, setMenuOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const toggleRef = useRef<HTMLDivElement | null>(null);
 
+    // Toggle menu state
     const toggleMenu = () => {
-    setMenuOpen(!menuOpen);
+        setMenuOpen((prevMenuOpen) => !prevMenuOpen);
     };
 
-  const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
+    // Handle button click
+    const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => {
         onViewChange(page);
-    toggleMenu();
+        setMenuOpen(false); // Close the menu when a button is clicked
     };
 
+    // Effect to handle clicks outside of the dropdown
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            // Check if the click is outside both the dropdown and the hamburger menu
+            if (
+                dropdownRef.current && 
+                !dropdownRef.current.contains(event.target as Node) &&
+                toggleRef.current && 
+                !toggleRef.current.contains(event.target as Node)
+            ) {
+                setMenuOpen(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
     return (
         <>
             <header>
-        <div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
+                {showToggle && showHistoryModelsToggle && (
+                    <button onClick={toggleDivs} className="nav-btn show-hide-btn">
+                        {showDivs ? 'Hide' : 'Show'}
+                    </button>
+                )}
+                <nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
+                    <button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
+                    <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
+                    <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
+                    <button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button>
+                </nav>
+                <div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
                     <span></span>
                     <span></span>
                     <span></span>
                 </div>
-        <nav className={`nav-links ${menuOpen ? "active" : ""}`}>
-        <button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
-          <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
-          <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
-          <button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
-          {showToggle && showHistoryModelsToggle && (
-            <button onClick={toggleDivs} className="nav-btn">
-              {showDivs ? 'Hide History/Models' : 'Show History/Models'}
-            </button>
-          )}
-        </nav>
-        <div className="header-button header-logo">
+                  <div className="header-logo">
                       {/* AI logo or text */}
                   </div>
                 <div className="login-button-container">

app/components/InputFrontend.tsx

@@ -47,6 +47,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
           value={inputValue}
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
+          className='textInputField'
         />
         <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
           <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>

app/components/Login.tsx

@@ -79,6 +79,7 @@ const Login: React.FC = () => {
 
   // Function to handle account creation
   const handleCreateAccount = async () => {
+    if (newAccountName !== "" && newAccountEmail !== "" && newAccountPassword !== "") {
       const success = await createAccount(newAccountName, newAccountEmail, newAccountPassword);
       if (success) {
         alert('Account created successfully! You can now log in.');
@@ -86,6 +87,9 @@ const Login: React.FC = () => {
       } else {
         alert('Account creation failed. Please try again.');
       }
+    } else {
+      alert('Account creation failed. Please do not leave any field empty.');
+    }
   };
 
   // Function to toggle the settings popup

app/components/settings/TextSettings.tsx

@@ -22,6 +22,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type,
         value={value} // Set the current value
         onChange={handleTextChange} // Handle input changes
         placeholder={placeholder} // Set the placeholder text
+        className='textInputField'
       />
     </div>
   );

app/styles/global.css

@@ -66,3 +66,14 @@ input:hover {
 select{
     background-color: var(--input-background-color);
 }
+
+h1, h2, h3, h4, p{
+    color: var(--text-color);
+    font-family: var(--font-family);
+    font-weight: 500;
+}
+
+p{
+    font-weight: 400;
+    font-size: var(--font-size)
+}

app/styles/header.css

@@ -10,10 +10,11 @@ header{
     z-index: 999;
 }
 
+/* Hamburger button styles */
 .hamburger {
     position: absolute;
     left: 5vw;
-    display: none;
+    display: flex; /* Always show hamburger button */
     flex-direction: column;
     cursor: pointer;
 }
@@ -36,32 +37,42 @@ header{
     transform: rotate(-45deg) translate(5px, -10px);
 }
 
-
-
+/* Navigation links (hidden in header, shown in dropdown) */
 .nav-links {
+    display: none; /* Default hidden */
     position: absolute;
-    left: 1vw;
-    display: flex;
-    gap: 0.5vw;
-    width:max-content;
-    height: 100%;
-    align-items: center;
+    top: 10vh; /* Adjust as needed */
+    left: 0;
+    background-color: var(--burger-menu-background-color);
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+}
+
+.nav-links.active {
+    display: flex; /* Show when active */
+    height: fit-content;
 }
 
 .nav-btn {
     background-color: var(--input-button-color);
     border: none;
     font-size: 0.9em;
-    height: 50%;
+    height: 50px; /* Consistent height */
     border-radius: 5px;
-    padding: 2px 15px;
+    padding: 10px;
     font-family: var(--font-family);
+    width: 100%; /* Full width */
+    text-align: center; /* Center text */
+    margin: 4px;
 }
 
 .nav-btn:hover {
     background-color: var(--input-button-hover-color);
 }
 
+/* Logo styles */
 .header-logo {
     width: 250px;
     height: 5vh;
@@ -73,6 +84,7 @@ header{
     border: none;
 }
 
+/* Login button styles */
 .login-button-container {
     position: absolute;
     top: 0.1vh;
@@ -102,3 +114,11 @@ header{
 .header-login-button:hover {
     background-color: var(--input-button-hover-color);
 }
+
+.show-hide-btn{
+    width: fit-content;
+    align-self: left;
+    position: absolute;
+    left: 10vw;
+    cursor: pointer;
+}

app/styles/input.css

@@ -33,6 +33,11 @@
     height: 7vh;
 }
 
+.textInputField::placeholder {
+    color: var(--text-color); /* Change to desired placeholder color */
+    opacity: 1;  /* Ensures full opacity (optional) */
+}
+
 .input input:focus {
     border-color: var(--input-button-hover-color);
 }

app/styles/responsive.css

@@ -102,7 +102,6 @@
 
   .header-logo {
     position: relative;
-    margin-left: -40px;
   }
 
   .hamburger.open {
@@ -111,9 +110,9 @@
   }
 
   .nav-links {
-    display: none;
+    display: none; /* Hidden by default */
     position: absolute;
-    top: 10vh;
+    top: 10vh; /* Adjust as needed */
     left: 0;
     background-color: var(--burger-menu-background-color);
     width: 100%;
@@ -124,7 +123,7 @@
   }
 
   .nav-links.active {
-    display: flex;
+    display: flex; /* Show when active */
     height: fit-content;
   }
 
@@ -133,14 +132,32 @@
     text-align: center;
     padding: 10px;
     height: 50px;
+    background-color: var(--input-button-color);
+    border: none;
+    font-size: 0.9em;
+    border-radius: 5px;
+  }
+
+  .nav-btn:hover {
+    background-color: var(--input-button-hover-color);
   }
 
   .hamburger {
-    display: flex;
+    display: flex; /* Always show hamburger button */
   }
 
   .header-login-button {
-    right: 5vh;
+    right: 5vh; /* Keep login button visible */
+  }
+
+  .show-hide-btn{
+    width: fit-content;
+    left: 20vw;
+  }
+
+  .header-logo {
+    background-image: url(../../public/img/logo-small.png);
+    width: 4em;
   }
 }
 

deployment_scripts/linux/NOTE.txt

@@ -0,0 +1,3 @@
+on linux it is slightly easier
+
+i'd say to create a preparation script for dnf/yum and apt based systems, which basically downloads the dependencies via the package manager, and ollama via the usual script

deployment_scripts/windows/NOTE.txt

@@ -0,0 +1,7 @@
+You will need to make three folders:
+
+node-bin - contains nodejs portable
+python-bin - contains python3 portable - don't forget to add the .pth file and adjust it accordingly, because import site is normally missing.
+ollama.bin - contains ollama portable
+
+you also need vc redist 2019

deployment_scripts/windows/prepare.bat

@@ -0,0 +1,3 @@
+start /b scripts\prepare_py.bat
+start /b scripts\prepare_npm.bat
+start /b scripts\prepare_ollama.bat

deployment_scripts/windows/python313._pth

@@ -0,0 +1,5 @@
+python313.zip
+.
+
+# Uncomment to run site.main() automatically
+import site

deployment_scripts/windows/run.bat

@@ -0,0 +1,3 @@
+start /b scripts\run_ollama.bat
+start /b scripts\run_electron.bat
+start /b scripts\run_py.bat

deployment_scripts/windows/scripts/prepare_npm.bat

@@ -0,0 +1,6 @@
+cd node-bin
+set PATH=%PATH%;"%CD%";
+cd ..
+
+npm install
+npm run build

deployment_scripts/windows/scripts/prepare_ollama.bat

@@ -0,0 +1,19 @@
+cd ollama-bin
+start /b ollama.exe serve
+timeout 5
+ollama.exe pull phi3.5
+ollama.exe pull qwen2-math:1.5b
+ollama.exe pull starcoder2
+ollama.exe pull llava-phi3
+ollama.exe pull qwen2.5-coder:1.5b
+ollama.exe pull starcoder2:7b
+ollama.exe pull wizard-math
+ollama.exe pull llama3.1
+ollama.exe pull llama3.2
+ollama.exe pull dolphin-phi
+ollama.exe pull dolphin-llama3
+ollama.exe pull dolphin-mistral
+ollama.exe pull llava
+ollama.exe pull qwen2.5
+ollama.exe pull mathstral
+ollama.exe pull qwen2.5-coder

deployment_scripts/windows/scripts/prepare_py.bat

@@ -0,0 +1,12 @@
+cd python-bin
+set PATH=%PATH%;"%CD%";
+curl -O https://bootstrap.pypa.io/get-pip.py
+ren python py
+py get-pip.py
+cd Scripts
+set PATH=%PATH%;"%CD%";
+cd ..
+cd ..
+
+cd py
+py -m pip install -r requirements.txt

deployment_scripts/windows/scripts/run_electron.bat

@@ -0,0 +1,6 @@
+cd node-bin
+set PATH=%PATH%;"%CD%";
+cd ..
+
+start /b npm start
+npx electron .

deployment_scripts/windows/scripts/run_ollama.bat

@@ -0,0 +1,2 @@
+cd ollama-bin
+start /b ollama.exe serve

deployment_scripts/windows/scripts/run_py.bat

@@ -0,0 +1,9 @@
+cd python-bin
+set PATH=%PATH%;"%CD%";
+cd Scripts
+set PATH=%PATH%;"%CD%";
+cd ..
+cd ..
+
+cd py
+python api.py