Merge pull request 'main' (#139) from YasinOnm08/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/139

app/backend/InputOutputHandler.tsx

@@ -4,7 +4,7 @@ import ConversationFrontend from '../components/ConversationFrontend';
 import InputFrontend from "../components/InputFrontend";
 import { sendToVoiceRecognition } from "./voice_backend"
 import axios from "axios";
-import { useChatHistory } from '../hooks/useChatHistory';
+import { updateMessage, useChatHistory } from '../hooks/useChatHistory';
 import { getWeather } from "./weather";
 import { changeHistory, getHistory } from "./database";
 
@@ -16,7 +16,7 @@ const InputOutputBackend: React.FC = () => {
   }
 
   // Define state variables for user preferences and messages
-  const [chatHistory, setSelectedIndex, setChatHistory, updateMessage] = useChatHistory()
+  const [chatHistory, setChatHistory] = useChatHistory()
   const [preferredCurrency, setPreferredCurrency] = useState<string>("USD");
   const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
   const [timeFormat, setTimeFormat] = useState<string>("24-hour");
@@ -36,7 +36,6 @@ const InputOutputBackend: React.FC = () => {
     apiURL.hostname = "localhost"
   }
 
-  console.log(setSelectedIndex)
   //#region useEffect
   useEffect(() => {
     setMessages(chatHistory.chats[chatHistory.selectedIndex].messages)
@@ -44,10 +43,6 @@ const InputOutputBackend: React.FC = () => {
 
 
   useEffect(() => {
-    console.log("History", chatHistory);
-    console.log("Messages", messages);
-
-
     // Get the current chat's messages
     const currentMessages = chatHistory.chats[chatHistory.selectedIndex].messages || [];
 
@@ -58,7 +53,6 @@ const InputOutputBackend: React.FC = () => {
       // When creating a new chat and no messages exist yet, set default messages
       addMessage("system", systemMessage)
       addMessage("assistant", "Hello! How can I help you?")
-      console.log(systemMessage)
     }
   }, [chatHistory, chatHistory.selectedIndex, systemMessage]);
 
@@ -82,14 +76,12 @@ const InputOutputBackend: React.FC = () => {
     const password = localStorage.getItem("accountPassword")
     if (username && password && chatHistoryTriggered) {
       changeHistory(username, password, chatHistory)
-      console.log("changed history in backend")
     }
   }, [chatHistory])
 
   //#region functions
   const getWeatherHere = async () => {
     setWeatherData(await getWeather({ "unit_type": preferredMeasurement, "city": localStorage.getItem("weatherInfo") || "New York" }))
-    console.log("Got the Data!")
     setWeatherTriggered(true)
   }
 
@@ -100,15 +92,12 @@ const InputOutputBackend: React.FC = () => {
       const tempChatHistory = await getHistory(username, password)
       if (tempChatHistory && typeof tempChatHistory == "object") {
         setChatHistory(tempChatHistory)
-        console.log("got history from backend")
       }
     }
     setChatHistoryTriggered(true)
   }
   //#region system-prompt
   useEffect(() => {
-    console.log("creating system prompt")
-    console.log(weatherData)
 
     const measurementString = (preferredMeasurement == "Metric")
       ? "All measurements follow the metric system. Refuse to use any other measurement system."
@@ -124,14 +113,12 @@ const InputOutputBackend: React.FC = () => {
       These are the currently newest Weather infos for the region. Only for the case when the user asks about anything weather related, 
       you can use the following data to help the user: ${weatherData}. If there is nothing there say there is no data`
       : `You are a helpful assistant.`;
-    console.log(newSystemMessage)
     setSystemMessage(newSystemMessage)
   }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean, weatherTriggered]);
 
   useEffect(() => {
     const messageIndex = 0 // system prompt is the first so index 0
     updateMessage(messageIndex, systemMessage)
-    console.log(messages)
   }, [systemMessage])
 
   //#region more variables and functions
@@ -208,7 +195,6 @@ const InputOutputBackend: React.FC = () => {
         if (event.data == "error") {
           console.log("Error getting ai message.")
         } else {
-          console.log("Received data:", data);
           editLastMessage(data.response)
         }
       }

app/backend/threads/GetWorker.ts

@@ -17,8 +17,6 @@ const fetchData = () => {
     const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken);
     apiURL.hostname = windownameGlobal; // Set the hostname
 
-    console.log(apiURL.href); // Log the constructed URL
-
     axios.get(apiURL.href)
         .then(response => {
             postMessage(response.data); // Send data back on success

app/backend/threads/PostWorker.ts

@@ -14,10 +14,8 @@ onmessage = (e) => {
     };
 
     const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_send");
-    console.log(windowname); // Log the window name
     apiURL.hostname = windowname; // Set the hostname for the API request
 
-    console.log(apiURL.href); // Log the constructed API URL
 
     // Make a POST request to the API with the message object
     axios.post(apiURL.href, Message)

app/backend/weather.ts

@@ -18,7 +18,6 @@ export const getWeather = async (data: object): Promise<string> => {
 
         // Send the status and success response back to the worker
         postMessage({ status, success });
-        console.log(JSON.stringify(success)); // Log the successful response for debugging
         return JSON.stringify(success); // Return the weather data as a JSON string
     } catch (error) {
         // Handle any errors that occur during the request

app/components/Faq.tsx

@@ -7,17 +7,17 @@ const FAQ: React.FC = () => {
       <h2>Frequently Asked Questions</h2> {/* Title for the FAQ section */}
       
       <div className="faq-item">
-        <h3>Why doesn't my selection in the category dropdown menu apply?</h3>
+        <h3>Why doesn&apos;t my selection in the category dropdown menu apply?</h3>
         <p>Currently, the dropdown menu for selecting AI models does not retain your choice after a website refresh.</p>
       </div>
       
       <div className="faq-item">
-        <h3>Why is the AI suddenly talking about the weather when I didn't select that option?</h3>
+        <h3>Why is the AI suddenly talking about the weather when I didn&apos;t select that option?</h3>
-        <p>The AI is programmed to provide weather information even if you haven't specifically selected the weather option.</p>
+        <p>The AI is programmed to provide weather information even if you haven&apos;t specifically selected the weather option.</p>
       </div>
       
       <div className="faq-item">
-        <h3>Why isn't the online API working?</h3>
+        <h3>Why isn&apos;t the online API working?</h3>
         <p>At the moment, the online APIs for Google and La Plateforme are not operational. However, the OpenAI and Anthropic APIs may still function.</p>
       </div>
       
@@ -27,7 +27,7 @@ const FAQ: React.FC = () => {
       </div>
       
       <div className="faq-item">
-        <h3>Why isn't the AI responding in the format I specified in the settings?</h3>
+        <h3>Why isn&apos;t the AI responding in the format I specified in the settings?</h3>
         <p>Please check if the system prompt settings are enabled. If the issue persists, it may be because the AI is unable to fully adhere to the command.</p>
       </div>
       

app/components/History.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { useChatHistory } from '../hooks/useChatHistory'; // Importing the custom hook for chat history
+import { setSelectedIndex, useChatHistory } from '../hooks/useChatHistory'; // Importing the custom hook for chat history
 
 const History: React.FC = () => {
   // Destructuring values from the useChatHistory hook
-  const [chatHistory, setSelectedIndex, setChatHistory] = useChatHistory();
+  const [chatHistory, setChatHistory] = useChatHistory();
   const [isEditing, setIsEditing] = useState(false); // State to manage edit mode
   const [inputValue, setInputValue] = useState<string>(''); // State for input field
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); // State to track hovered chat index
@@ -29,7 +29,6 @@ const History: React.FC = () => {
   // Function to select a chat from the history
   const handleHistoryClick = (index: number) => {
     setSelectedIndex(index); // Set the selected index to the clicked chat
-    console.log("index", index);
   };
 
   // Function to handle hover over a chat entry
@@ -42,10 +41,6 @@ const History: React.FC = () => {
     setHoveredIndex(null); // Reset hovered index
   };
 
-  // Debugging information for chat history length and selected index
-  console.log("chat length", chatHistory.chats.length);
-  console.log("index", chatHistory.selectedIndex);
-
   // Function to delete a chat entry
   const handleHistoryDeletion = (index: number) => {
     const currentIndex = chatHistory.selectedIndex; // Get the currently selected index
@@ -71,9 +66,6 @@ const History: React.FC = () => {
 
     copyChats.selectedIndex = newSelectedIndex; // Update the selected index
 
-    // Debugging information to inspect the modified chat history
-    console.log(copyChats);
-
     // Set the updated chat history
     setChatHistory(copyChats);
   };

app/components/settings/settingUtils.ts

@@ -34,7 +34,6 @@ export function importSettings(jsonData: string): void {
             });
         }
 
-        console.log("Settings imported successfully!");
     } catch (error) {
         console.error("Invalid JSON data:", error);
     }

app/hooks/useChatHistory.tsx

@@ -46,16 +46,11 @@ const setGlobalState = (newState: GlobalChatHistory): void => {
 // Custom hook to manage chat history
 export const useChatHistory = (): [
     GlobalChatHistory, // Current state
-    (index: number) => void, // Function to set selected index
     (newState: GlobalChatHistory) => void, // Function to set global state
-    (messageIndex: number, newContent: string) => void // Function to update a message
 ] => {
     const [state, setState] = useState<GlobalChatHistory>(globalChatHistory); // Local state initialized with global state
 
     useEffect(() => {
-        // Log the initial state for debugging
-        console.log("Current global chat history:", globalChatHistory);
-        
         // Listener to update local state when global state changes
         const listener = (newState: GlobalChatHistory) => {
             setState(newState);
@@ -69,30 +64,31 @@ export const useChatHistory = (): [
         };
     }, []);
 
-    // Function to set the selected chat index
+    
-    const setSelectedIndex = (index: number) => {
+    
-        setGlobalState({ ...state, selectedIndex: index }); // Update the global state
+    // Return the current state and action functions
-    }
+    return [state, setGlobalState];
+}
+// Function to set the selected chat index
+export const setSelectedIndex = (index: number) => {
+    setGlobalState({ ...globalChatHistory, selectedIndex: index }); // Update the global state
+}
 
-    // Function to update a specific message in the current chat
+// Function to update a specific message in the current chat
-    const updateMessage = (messageIndex: number, newContent: string) => {
+export const updateMessage = (messageIndex: number, newContent: string) => {
-        const updatedChats = [...state.chats]; // Make a copy of the current chats
+    const updatedChats = [...globalChatHistory.chats]; // Make a copy of the current chats
-        const chatIndex = globalChatHistory.selectedIndex; // Get the currently selected chat index
+    const chatIndex = globalChatHistory.selectedIndex; // Get the currently selected chat index
 
-        // Check if the selected chat index is valid
+    // Check if the selected chat index is valid
-        if (chatIndex >= 0 && chatIndex < updatedChats.length) {
+    if (chatIndex >= 0 && chatIndex < updatedChats.length) {
-            const updatedMessages = [...updatedChats[chatIndex].messages]; // Copy messages of the selected chat
+        const updatedMessages = [...updatedChats[chatIndex].messages]; // Copy messages of the selected chat
 
-            // Check if the message index is valid
+        // Check if the message index is valid
-            if (messageIndex >= 0 && messageIndex < updatedMessages.length) {
+        if (messageIndex >= 0 && messageIndex < updatedMessages.length) {
-                // Update the content of the specified message
+            // Update the content of the specified message
-                updatedMessages[messageIndex] = { ...updatedMessages[messageIndex], content: newContent };
+            updatedMessages[messageIndex] = { ...updatedMessages[messageIndex], content: newContent };
-                updatedChats[chatIndex] = { ...updatedChats[chatIndex], messages: updatedMessages }; // Update the chat with new messages
+            updatedChats[chatIndex] = { ...updatedChats[chatIndex], messages: updatedMessages }; // Update the chat with new messages
-                setGlobalState({ ...state, chats: updatedChats }); // Set the updated global state
+            setGlobalState({ ...globalChatHistory, chats: updatedChats }); // Set the updated global state
-            }
         }
     }
-
-    // Return the current state and action functions
-    return [state, setSelectedIndex, setGlobalState, updateMessage];
 }

app/layout.tsx

@@ -9,15 +9,14 @@ export const metadata = {
 // RootLayout component definition
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en"> {/* Set the language of the document */}
+    <html lang="en">
       <head>
-        <title>{metadata.title}</title> {/* Set the page title */}
+        <title>{metadata.title}</title>
-        <meta name="description" content={metadata.description} /> {/* Set the page description for SEO */}
+        <meta name="description" content={metadata.description} />
-        {/* Link to the favicon for the site */}
         <link rel="icon" href="./favicon.ico" type="image/x-icon" />
       </head>
       <body>
-        <main>{children}</main> {/* Render the child components inside the main element */}
+        <main>{children}</main>
       </body>
     </html>
   );

app/page.tsx

@@ -91,7 +91,7 @@ const LandingPage: React.FC = () => {
   }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Apply themes whenever color states change
 
   return (
-    <>
+    <div>
       {/* Header component with props for toggling and view change */}
       <Header
         toggleDivs={toggleDivs}
@@ -118,7 +118,7 @@ const LandingPage: React.FC = () => {
           {view === 'Credits' && <Credits />}
         </div>
       </div>
-    </>
+    </div>
   );
 };