main #139
					 10 changed files with 37 additions and 70 deletions
				
			
		|  | @ -4,7 +4,7 @@ import ConversationFrontend from '../components/ConversationFrontend'; | ||||||
| import InputFrontend from "../components/InputFrontend"; | import InputFrontend from "../components/InputFrontend"; | ||||||
| import { sendToVoiceRecognition } from "./voice_backend" | import { sendToVoiceRecognition } from "./voice_backend" | ||||||
| import axios from "axios"; | import axios from "axios"; | ||||||
| import { useChatHistory } from '../hooks/useChatHistory'; | import { updateMessage, useChatHistory } from '../hooks/useChatHistory'; | ||||||
| import { getWeather } from "./weather"; | import { getWeather } from "./weather"; | ||||||
| import { changeHistory, getHistory } from "./database"; | import { changeHistory, getHistory } from "./database"; | ||||||
| 
 | 
 | ||||||
|  | @ -16,7 +16,7 @@ const InputOutputBackend: React.FC = () => { | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   // Define state variables for user preferences and messages
 |   // 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 [preferredCurrency, setPreferredCurrency] = useState<string>("USD"); | ||||||
|   const [preferredLanguage, setPreferredLanguage] = useState<string>("english"); |   const [preferredLanguage, setPreferredLanguage] = useState<string>("english"); | ||||||
|   const [timeFormat, setTimeFormat] = useState<string>("24-hour"); |   const [timeFormat, setTimeFormat] = useState<string>("24-hour"); | ||||||
|  | @ -36,7 +36,6 @@ const InputOutputBackend: React.FC = () => { | ||||||
|     apiURL.hostname = "localhost" |     apiURL.hostname = "localhost" | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   console.log(setSelectedIndex) |  | ||||||
|   //#region useEffect
 |   //#region useEffect
 | ||||||
|   useEffect(() => { |   useEffect(() => { | ||||||
|     setMessages(chatHistory.chats[chatHistory.selectedIndex].messages) |     setMessages(chatHistory.chats[chatHistory.selectedIndex].messages) | ||||||
|  | @ -44,10 +43,6 @@ const InputOutputBackend: React.FC = () => { | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|   useEffect(() => { |   useEffect(() => { | ||||||
|     console.log("History", chatHistory); |  | ||||||
|     console.log("Messages", messages); |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
|     // Get the current chat's messages
 |     // Get the current chat's messages
 | ||||||
|     const currentMessages = chatHistory.chats[chatHistory.selectedIndex].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
 |       // When creating a new chat and no messages exist yet, set default messages
 | ||||||
|       addMessage("system", systemMessage) |       addMessage("system", systemMessage) | ||||||
|       addMessage("assistant", "Hello! How can I help you?") |       addMessage("assistant", "Hello! How can I help you?") | ||||||
|       console.log(systemMessage) |  | ||||||
|     } |     } | ||||||
|   }, [chatHistory, chatHistory.selectedIndex, systemMessage]); |   }, [chatHistory, chatHistory.selectedIndex, systemMessage]); | ||||||
| 
 | 
 | ||||||
|  | @ -82,14 +76,12 @@ const InputOutputBackend: React.FC = () => { | ||||||
|     const password = localStorage.getItem("accountPassword") |     const password = localStorage.getItem("accountPassword") | ||||||
|     if (username && password && chatHistoryTriggered) { |     if (username && password && chatHistoryTriggered) { | ||||||
|       changeHistory(username, password, chatHistory) |       changeHistory(username, password, chatHistory) | ||||||
|       console.log("changed history in backend") |  | ||||||
|     } |     } | ||||||
|   }, [chatHistory]) |   }, [chatHistory]) | ||||||
| 
 | 
 | ||||||
|   //#region functions
 |   //#region functions
 | ||||||
|   const getWeatherHere = async () => { |   const getWeatherHere = async () => { | ||||||
|     setWeatherData(await getWeather({ "unit_type": preferredMeasurement, "city": localStorage.getItem("weatherInfo") || "New York" })) |     setWeatherData(await getWeather({ "unit_type": preferredMeasurement, "city": localStorage.getItem("weatherInfo") || "New York" })) | ||||||
|     console.log("Got the Data!") |  | ||||||
|     setWeatherTriggered(true) |     setWeatherTriggered(true) | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|  | @ -100,15 +92,12 @@ const InputOutputBackend: React.FC = () => { | ||||||
|       const tempChatHistory = await getHistory(username, password) |       const tempChatHistory = await getHistory(username, password) | ||||||
|       if (tempChatHistory && typeof tempChatHistory == "object") { |       if (tempChatHistory && typeof tempChatHistory == "object") { | ||||||
|         setChatHistory(tempChatHistory) |         setChatHistory(tempChatHistory) | ||||||
|         console.log("got history from backend") |  | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|     setChatHistoryTriggered(true) |     setChatHistoryTriggered(true) | ||||||
|   } |   } | ||||||
|   //#region system-prompt
 |   //#region system-prompt
 | ||||||
|   useEffect(() => { |   useEffect(() => { | ||||||
|     console.log("creating system prompt") |  | ||||||
|     console.log(weatherData) |  | ||||||
| 
 | 
 | ||||||
|     const measurementString = (preferredMeasurement == "Metric") |     const measurementString = (preferredMeasurement == "Metric") | ||||||
|       ? "All measurements follow the metric system. Refuse to use any other measurement system." |       ? "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,  |       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 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.`; |       : `You are a helpful assistant.`; | ||||||
|     console.log(newSystemMessage) |  | ||||||
|     setSystemMessage(newSystemMessage) |     setSystemMessage(newSystemMessage) | ||||||
|   }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean, weatherTriggered]); |   }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean, weatherTriggered]); | ||||||
| 
 | 
 | ||||||
|   useEffect(() => { |   useEffect(() => { | ||||||
|     const messageIndex = 0 // system prompt is the first so index 0
 |     const messageIndex = 0 // system prompt is the first so index 0
 | ||||||
|     updateMessage(messageIndex, systemMessage) |     updateMessage(messageIndex, systemMessage) | ||||||
|     console.log(messages) |  | ||||||
|   }, [systemMessage]) |   }, [systemMessage]) | ||||||
| 
 | 
 | ||||||
|   //#region more variables and functions
 |   //#region more variables and functions
 | ||||||
|  | @ -208,7 +195,6 @@ const InputOutputBackend: React.FC = () => { | ||||||
|         if (event.data == "error") { |         if (event.data == "error") { | ||||||
|           console.log("Error getting ai message.") |           console.log("Error getting ai message.") | ||||||
|         } else { |         } else { | ||||||
|           console.log("Received data:", data); |  | ||||||
|           editLastMessage(data.response) |           editLastMessage(data.response) | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|  |  | ||||||
|  | @ -17,8 +17,6 @@ const fetchData = () => { | ||||||
|     const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken); |     const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_get?access_token=" + accesstoken); | ||||||
|     apiURL.hostname = windownameGlobal; // Set the hostname
 |     apiURL.hostname = windownameGlobal; // Set the hostname
 | ||||||
| 
 | 
 | ||||||
|     console.log(apiURL.href); // Log the constructed URL
 |  | ||||||
| 
 |  | ||||||
|     axios.get(apiURL.href) |     axios.get(apiURL.href) | ||||||
|         .then(response => { |         .then(response => { | ||||||
|             postMessage(response.data); // Send data back on success
 |             postMessage(response.data); // Send data back on success
 | ||||||
|  |  | ||||||
|  | @ -14,10 +14,8 @@ onmessage = (e) => { | ||||||
|     }; |     }; | ||||||
| 
 | 
 | ||||||
|     const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_send"); |     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
 |     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
 |     // Make a POST request to the API with the message object
 | ||||||
|     axios.post(apiURL.href, Message) |     axios.post(apiURL.href, Message) | ||||||
|  |  | ||||||
|  | @ -18,7 +18,6 @@ export const getWeather = async (data: object): Promise<string> => { | ||||||
| 
 | 
 | ||||||
|         // Send the status and success response back to the worker
 |         // Send the status and success response back to the worker
 | ||||||
|         postMessage({ status, success }); |         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
 |         return JSON.stringify(success); // Return the weather data as a JSON string
 | ||||||
|     } catch (error) { |     } catch (error) { | ||||||
|         // Handle any errors that occur during the request
 |         // Handle any errors that occur during the request
 | ||||||
|  |  | ||||||
|  | @ -7,17 +7,17 @@ const FAQ: React.FC = () => { | ||||||
|       <h2>Frequently Asked Questions</h2> {/* Title for the FAQ section */} |       <h2>Frequently Asked Questions</h2> {/* Title for the FAQ section */} | ||||||
|        |        | ||||||
|       <div className="faq-item"> |       <div className="faq-item"> | ||||||
|         <h3>Why doesn't my selection in the category dropdown menu apply?</h3> |         <h3>Why doesn'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> |         <p>Currently, the dropdown menu for selecting AI models does not retain your choice after a website refresh.</p> | ||||||
|       </div> |       </div> | ||||||
|        |        | ||||||
|       <div className="faq-item"> |       <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'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't specifically selected the weather option.</p> | ||||||
|       </div> |       </div> | ||||||
|        |        | ||||||
|       <div className="faq-item"> |       <div className="faq-item"> | ||||||
|         <h3>Why isn't the online API working?</h3> |         <h3>Why isn'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> |         <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> |       </div> | ||||||
|        |        | ||||||
|  | @ -27,7 +27,7 @@ const FAQ: React.FC = () => { | ||||||
|       </div> |       </div> | ||||||
|        |        | ||||||
|       <div className="faq-item"> |       <div className="faq-item"> | ||||||
|         <h3>Why isn't the AI responding in the format I specified in the settings?</h3> |         <h3>Why isn'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> |         <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> |       </div> | ||||||
|        |        | ||||||
|  |  | ||||||
|  | @ -1,9 +1,9 @@ | ||||||
| import React, { useState } from 'react'; | 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 = () => { | const History: React.FC = () => { | ||||||
|   // Destructuring values from the useChatHistory hook
 |   // 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 [isEditing, setIsEditing] = useState(false); // State to manage edit mode
 | ||||||
|   const [inputValue, setInputValue] = useState<string>(''); // State for input field
 |   const [inputValue, setInputValue] = useState<string>(''); // State for input field
 | ||||||
|   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); // State to track hovered chat index
 |   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
 |   // Function to select a chat from the history
 | ||||||
|   const handleHistoryClick = (index: number) => { |   const handleHistoryClick = (index: number) => { | ||||||
|     setSelectedIndex(index); // Set the selected index to the clicked chat
 |     setSelectedIndex(index); // Set the selected index to the clicked chat
 | ||||||
|     console.log("index", index); |  | ||||||
|   }; |   }; | ||||||
| 
 | 
 | ||||||
|   // Function to handle hover over a chat entry
 |   // Function to handle hover over a chat entry
 | ||||||
|  | @ -42,10 +41,6 @@ const History: React.FC = () => { | ||||||
|     setHoveredIndex(null); // Reset hovered index
 |     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
 |   // Function to delete a chat entry
 | ||||||
|   const handleHistoryDeletion = (index: number) => { |   const handleHistoryDeletion = (index: number) => { | ||||||
|     const currentIndex = chatHistory.selectedIndex; // Get the currently selected index
 |     const currentIndex = chatHistory.selectedIndex; // Get the currently selected index
 | ||||||
|  | @ -71,9 +66,6 @@ const History: React.FC = () => { | ||||||
| 
 | 
 | ||||||
|     copyChats.selectedIndex = newSelectedIndex; // Update the selected index
 |     copyChats.selectedIndex = newSelectedIndex; // Update the selected index
 | ||||||
| 
 | 
 | ||||||
|     // Debugging information to inspect the modified chat history
 |  | ||||||
|     console.log(copyChats); |  | ||||||
| 
 |  | ||||||
|     // Set the updated chat history
 |     // Set the updated chat history
 | ||||||
|     setChatHistory(copyChats); |     setChatHistory(copyChats); | ||||||
|   }; |   }; | ||||||
|  |  | ||||||
|  | @ -34,7 +34,6 @@ export function importSettings(jsonData: string): void { | ||||||
|             }); |             }); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|         console.log("Settings imported successfully!"); |  | ||||||
|     } catch (error) { |     } catch (error) { | ||||||
|         console.error("Invalid JSON data:", error); |         console.error("Invalid JSON data:", error); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | @ -46,16 +46,11 @@ const setGlobalState = (newState: GlobalChatHistory): void => { | ||||||
| // Custom hook to manage chat history
 | // Custom hook to manage chat history
 | ||||||
| export const useChatHistory = (): [ | export const useChatHistory = (): [ | ||||||
|     GlobalChatHistory, // Current state
 |     GlobalChatHistory, // Current state
 | ||||||
|     (index: number) => void, // Function to set selected index
 |  | ||||||
|     (newState: GlobalChatHistory) => void, // Function to set global state
 |     (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
 |     const [state, setState] = useState<GlobalChatHistory>(globalChatHistory); // Local state initialized with global state
 | ||||||
| 
 | 
 | ||||||
|     useEffect(() => { |     useEffect(() => { | ||||||
|         // Log the initial state for debugging
 |  | ||||||
|         console.log("Current global chat history:", globalChatHistory); |  | ||||||
|          |  | ||||||
|         // Listener to update local state when global state changes
 |         // Listener to update local state when global state changes
 | ||||||
|         const listener = (newState: GlobalChatHistory) => { |         const listener = (newState: GlobalChatHistory) => { | ||||||
|             setState(newState); |             setState(newState); | ||||||
|  | @ -69,14 +64,19 @@ export const useChatHistory = (): [ | ||||||
|         }; |         }; | ||||||
|     }, []); |     }, []); | ||||||
| 
 | 
 | ||||||
|  |      | ||||||
|  |      | ||||||
|  |     // Return the current state and action functions
 | ||||||
|  |     return [state, setGlobalState]; | ||||||
|  | } | ||||||
| // Function to set the selected chat index
 | // Function to set the selected chat index
 | ||||||
|     const setSelectedIndex = (index: number) => { | export const setSelectedIndex = (index: number) => { | ||||||
|         setGlobalState({ ...state, selectedIndex: index }); // Update the global state
 |     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
 | ||||||
|  | @ -88,11 +88,7 @@ export const useChatHistory = (): [ | ||||||
|             // 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]; |  | ||||||
| } |  | ||||||
|  |  | ||||||
|  | @ -9,15 +9,14 @@ export const metadata = { | ||||||
| // RootLayout component definition
 | // RootLayout component definition
 | ||||||
| export default function RootLayout({ children }: { children: ReactNode }) { | export default function RootLayout({ children }: { children: ReactNode }) { | ||||||
|   return ( |   return ( | ||||||
|     <html lang="en"> {/* Set the language of the document */} |     <html lang="en"> | ||||||
|       <head> |       <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" /> |         <link rel="icon" href="./favicon.ico" type="image/x-icon" /> | ||||||
|       </head> |       </head> | ||||||
|       <body> |       <body> | ||||||
|         <main>{children}</main> {/* Render the child components inside the main element */} |         <main>{children}</main> | ||||||
|       </body> |       </body> | ||||||
|     </html> |     </html> | ||||||
|   ); |   ); | ||||||
|  |  | ||||||
|  | @ -91,7 +91,7 @@ const LandingPage: React.FC = () => { | ||||||
|   }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Apply themes whenever color states change
 |   }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Apply themes whenever color states change
 | ||||||
| 
 | 
 | ||||||
|   return ( |   return ( | ||||||
|     <> |     <div> | ||||||
|       {/* Header component with props for toggling and view change */} |       {/* Header component with props for toggling and view change */} | ||||||
|       <Header |       <Header | ||||||
|         toggleDivs={toggleDivs} |         toggleDivs={toggleDivs} | ||||||
|  | @ -118,7 +118,7 @@ const LandingPage: React.FC = () => { | ||||||
|           {view === 'Credits' && <Credits />} |           {view === 'Credits' && <Credits />} | ||||||
|         </div> |         </div> | ||||||
|       </div> |       </div> | ||||||
|     </> |     </div> | ||||||
|   ); |   ); | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue