delete logs and fix hydration error

This commit is contained in:
YasinOnm08 2024-10-11 10:46:05 +02:00
parent 4ed2756b9a
commit 891dabcabf
10 changed files with 37 additions and 70 deletions

View file

@ -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)
}
}

View file

@ -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

View file

@ -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)

View file

@ -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

View file

@ -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>
<p>The AI is programmed to provide weather information even if you haven't specifically selected the weather option.</p>
<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&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>

View file

@ -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);
};

View file

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

View file

@ -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
const updateMessage = (messageIndex: number, newContent: string) => {
const updatedChats = [...state.chats]; // Make a copy of the current chats
const chatIndex = globalChatHistory.selectedIndex; // Get the currently selected chat index
// Function to update a specific message in the current chat
export const updateMessage = (messageIndex: number, newContent: string) => {
const updatedChats = [...globalChatHistory.chats]; // Make a copy of the current chats
const chatIndex = globalChatHistory.selectedIndex; // Get the currently selected chat index
// Check if the selected chat index is valid
if (chatIndex >= 0 && chatIndex < updatedChats.length) {
const updatedMessages = [...updatedChats[chatIndex].messages]; // Copy messages of the selected chat
// Check if the selected chat index is valid
if (chatIndex >= 0 && chatIndex < updatedChats.length) {
const updatedMessages = [...updatedChats[chatIndex].messages]; // Copy messages of the selected chat
// Check if the message index is valid
if (messageIndex >= 0 && messageIndex < updatedMessages.length) {
// Update the content of the specified message
updatedMessages[messageIndex] = { ...updatedMessages[messageIndex], content: newContent };
updatedChats[chatIndex] = { ...updatedChats[chatIndex], messages: updatedMessages }; // Update the chat with new messages
setGlobalState({ ...state, chats: updatedChats }); // Set the updated global state
}
// Check if the message index is valid
if (messageIndex >= 0 && messageIndex < updatedMessages.length) {
// Update the content of the specified message
updatedMessages[messageIndex] = { ...updatedMessages[messageIndex], content: newContent };
updatedChats[chatIndex] = { ...updatedChats[chatIndex], messages: updatedMessages }; // Update the chat with new messages
setGlobalState({ ...globalChatHistory, chats: updatedChats }); // Set the updated global state
}
}
// Return the current state and action functions
return [state, setSelectedIndex, setGlobalState, updateMessage];
}

View file

@ -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 */}
<meta name="description" content={metadata.description} /> {/* Set the page description for SEO */}
{/* Link to the favicon for the site */}
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<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>
);

View file

@ -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>
);
};