From 52573799900543fa11521bb739207ef288ff61d9 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Fri, 11 Oct 2024 10:06:32 +0200 Subject: [PATCH] useChatHistory comments --- app/hooks/useChatHistory.tsx | 96 +++++++++++++++++++++++------------- 1 file changed, 63 insertions(+), 33 deletions(-) diff --git a/app/hooks/useChatHistory.tsx b/app/hooks/useChatHistory.tsx index b2aceb0..38bb6b9 100644 --- a/app/hooks/useChatHistory.tsx +++ b/app/hooks/useChatHistory.tsx @@ -1,68 +1,98 @@ -import { useEffect, useState } from "react" +import { useEffect, useState } from "react"; +// Define the structure of a Message interface Message { - role: string - content:string + role: string; // The role of the message sender (e.g., system, user, assistant) + content: string; // The content of the message } +// Define the structure for each chat session interface ChatMessages { - name: string - messages: Message[] - timestamp: number - + name: string; // The name or title of the chat + messages: Message[]; // Array of messages in the chat + timestamp: number; // Timestamp for the chat session } +// Define the structure for the global chat history interface GlobalChatHistory { - chats: ChatMessages[] - selectedIndex: number + chats: ChatMessages[]; // Array of chat sessions + selectedIndex: number; // Index of the currently selected chat } +// Initial global chat history state let globalChatHistory: GlobalChatHistory = { chats: [ - { name: "Welcome!", messages: [{role:"system",content:"you are a helpful assistant"},{role:"assistant",content:"Hello! How can I help you?"}], timestamp: 4 }, + { + name: "Welcome!", + messages: [ + { role: "system", content: "you are a helpful assistant" }, + { role: "assistant", content: "Hello! How can I help you?" } + ], + timestamp: 4 + }, ], - selectedIndex:0 -} -let listeners: ((state: GlobalChatHistory) => void)[] = [] + selectedIndex: 0 +}; +// Listeners for state changes +let listeners: ((state: GlobalChatHistory) => void)[] = []; + +// Function to set a new global state and notify listeners const setGlobalState = (newState: GlobalChatHistory): void => { - globalChatHistory = newState; - listeners.forEach((listener) => listener(globalChatHistory)) + globalChatHistory = newState; // Update the global state + listeners.forEach((listener) => listener(globalChatHistory)); // Notify all listeners } -export const useChatHistory = (): [GlobalChatHistory, (index:number)=>void, (newState:GlobalChatHistory) => void,(messageIndex: number, newContent:string)=> void] => { - const [state, setState] = useState(globalChatHistory) +// 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); // Local state initialized with global state useEffect(() => { - console.log("help", globalChatHistory); + // 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) - } + setState(newState); + }; - listeners.push(listener) + listeners.push(listener); // Add the listener to the array + // Cleanup function to remove the listener when the component unmounts return () => { - listeners = listeners.filter((l) => l!== listener) - } - }, []) + listeners = listeners.filter((l) => l !== listener); + }; + }, []); + // Function to set the selected chat index const setSelectedIndex = (index: number) => { - setGlobalState({...state,selectedIndex:index}) + setGlobalState({ ...state, 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] - const chatIndex = globalChatHistory.selectedIndex + const updatedChats = [...state.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] + const updatedMessages = [...updatedChats[chatIndex].messages]; // Copy messages of the selected chat + + // Check if the message index is valid if (messageIndex >= 0 && messageIndex < updatedMessages.length) { - updatedMessages[messageIndex] = { ...updatedMessages[messageIndex], content: newContent } - updatedChats[chatIndex] = { ...updatedChats[chatIndex], messages: updatedMessages } - setGlobalState({...state, chats: updatedChats}) + // 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 } } } - return [state, setSelectedIndex, setGlobalState, updateMessage] -} \ No newline at end of file + // Return the current state and action functions + return [state, setSelectedIndex, setGlobalState, updateMessage]; +}