YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

History comments

Browse source
This commit is contained in:
sageTheDM 2024-10-11 10:00:31 +02:00
parent 3049201504
commit 5f017026e2
1 changed files with 84 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
app/components/History.tsx
View file

@ -1,68 +1,78 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useChatHistory } from '../hooks/useChatHistory'; import { useChatHistory } from '../hooks/useChatHistory'; // Importing the custom hook for chat history
const History: React.FC = () => { const History: React.FC = () => {
const [chatHistory, setSelectedIndex, setChatHistory] = useChatHistory() // Destructuring values from the useChatHistory hook
const [isEditing, setIsEditing] = useState(false); const [chatHistory, setSelectedIndex, setChatHistory] = useChatHistory();
const [inputValue, setInputValue] = useState<string>(''); const [isEditing, setIsEditing] = useState(false); // State to manage edit mode
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null) const [inputValue, setInputValue] = useState<string>(''); // State for input field
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); // State to track hovered chat index
// Function to activate editing mode
const handleEditButtonClick = () => { const handleEditButtonClick = () => {
setIsEditing(true); setIsEditing(true);
}; };
// Function to update input value as the user types
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value); setInputValue(e.target.value);
}; };
// Function to save the new chat
const handleSaveButtonClick = () => { const handleSaveButtonClick = () => {
setIsEditing(false); setIsEditing(false); // Exit edit mode
chatHistory.chats.push({ name: inputValue, messages: [], timestamp: 5 }) // Add a new chat entry to the history
setInputValue("") chatHistory.chats.push({ name: inputValue, messages: [], timestamp: 5 });
setInputValue(''); // Reset input value
}; };
// Function to select a chat from the history
const handleHistoryClick = (index: number) => { const handleHistoryClick = (index: number) => {
setSelectedIndex(index) setSelectedIndex(index); // Set the selected index to the clicked chat
console.log("index", index); console.log("index", index);
} };
// Function to handle hover over a chat entry
const handleHistoryHover = (index: number) => { const handleHistoryHover = (index: number) => {
setHoveredIndex(index) setHoveredIndex(index); // Set hovered index
} };
// Function to reset hovered index when not hovering
const handleHistoryNotHover = () => { const handleHistoryNotHover = () => {
setHoveredIndex(null) setHoveredIndex(null); // Reset hovered index
} };
console.log("chat length",chatHistory.chats.length) // Debugging information for chat history length and selected index
console.log("index",chatHistory.selectedIndex) console.log("chat length", chatHistory.chats.length);
console.log("index", chatHistory.selectedIndex);
// Function to delete a chat entry
const handleHistoryDeletion = (index: number) => { const handleHistoryDeletion = (index: number) => {
const currentIndex = chatHistory.selectedIndex; const currentIndex = chatHistory.selectedIndex; // Get the currently selected index
// Create a new copy of the current chat history // Create a new copy of the chat history
const copyChats = { ...chatHistory }; const copyChats = { ...chatHistory };
copyChats.chats = [...chatHistory.chats] copyChats.chats = [...chatHistory.chats];
// Remove the chat at the specified index // Remove the chat at the specified index
copyChats.chats.splice(index,1) copyChats.chats.splice(index, 1);
// Determine new selectedIndex // Determine the new selectedIndex
let newSelectedIndex = currentIndex; let newSelectedIndex = currentIndex;
// Adjust selectedIndex based on the deletion // Adjust selectedIndex based on the deletion
if (index === currentIndex) { if (index === currentIndex) {
// If the deleted index is the currently selected one, reset the selected index // If the deleted index is currently selected, reset the selected index
newSelectedIndex = copyChats.chats.length > 0 ? (index > 0 ? index - 1 : 0) : -1; // Set to previous or first chat or -1 if no chats left newSelectedIndex = copyChats.chats.length > 0 ? (index > 0 ? index - 1 : 0) : -1; // Set to previous or first chat or -1 if no chats left
} else if (index < currentIndex) { } else if (index < currentIndex) {
// If the deleted chat is before the current selected index, decrement the selected index // If the deleted chat is before the current selected index, decrement the selected index
newSelectedIndex = currentIndex - 1; newSelectedIndex = currentIndex - 1;
} }
copyChats.selectedIndex = newSelectedIndex copyChats.selectedIndex = newSelectedIndex; // Update the selected index
console.log(copyChats) // 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);
@ -72,25 +82,33 @@ const History: React.FC = () => {
<div className="history-background"> <div className="history-background">
<div className="history"> <div className="history">
<ul> <ul>
{/* Populate with history items */} {/* Render chat history items */}
{chatHistory.chats.map((chats, index) => ( {chatHistory.chats.map((chat, index) => (
<li key={index} onMouseOver={() => handleHistoryHover(index)} onMouseOut={handleHistoryNotHover}> <li key={index} onMouseOver={() => handleHistoryHover(index)} onMouseOut={handleHistoryNotHover}>
<a href="#" onClick={() => handleHistoryClick(index)} style={{ <a
backgroundColor: chatHistory.selectedIndex == index ? "var(--input-button-color)" : "", href="#"
borderRadius: "5px", onClick={() => handleHistoryClick(index)} // Handle click to select chat
width: index==hoveredIndex && chatHistory.chats.length >1 ? "85%":"100%"
}}>
{chatHistory.chats[index].name}
</a>
<button id="delete-chat-button"
onClick={()=>handleHistoryDeletion(index)}
disabled={(index == hoveredIndex && chatHistory.chats.length >1) ? false : true}
style={{ style={{
width: index == hoveredIndex && chatHistory.chats.length >1 ? "15%" : "0", backgroundColor: chatHistory.selectedIndex === index ? "var(--input-button-color)" : "",
visibility: index == hoveredIndex && chatHistory.chats.length >1 ? "visible" : "hidden", borderRadius: "5px",
marginLeft: index == hoveredIndex && chatHistory.chats.length >1? "0.5em":0 width: index === hoveredIndex && chatHistory.chats.length > 1 ? "85%" : "100%"
}}> }}
<svg viewBox="0 0 448 512"><path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg> >
{chat.name} {/* Display chat name */}
</a>
<button
id="delete-chat-button"
onClick={() => handleHistoryDeletion(index)} // Handle chat deletion
disabled={!(index === hoveredIndex && chatHistory.chats.length > 1)} // Disable if not hovered
style={{
width: index === hoveredIndex && chatHistory.chats.length > 1 ? "15%" : "0",
visibility: index === hoveredIndex && chatHistory.chats.length > 1 ? "visible" : "hidden",
marginLeft: index === hoveredIndex && chatHistory.chats.length > 1 ? "0.5em" : 0
}}
>
<svg viewBox="0 0 448 512">
<path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z" />
</svg>
</button> </button>
</li> </li>
))} ))}
@ -100,17 +118,17 @@ const History: React.FC = () => {
<input <input
type="text" type="text"
value={inputValue} value={inputValue}
onChange={handleInputChange} onChange={handleInputChange} // Update input value as user types
placeholder="Enter text" placeholder="Enter text"
className="chat-input" className="chat-input"
/> />
<button onClick={handleSaveButtonClick} className="save-btn"> <button onClick={handleSaveButtonClick} className="save-btn">
Save Save {/* Button to save new chat */}
</button> </button>
</div> </div>
) : ( ) : (
<button onClick={handleEditButtonClick} className="newChat-btn"> <button onClick={handleEditButtonClick} className="newChat-btn">
New Chat New Chat {/* Button to initiate a new chat */}
</button> </button>
)} )}
</li> </li>
@ -120,4 +138,4 @@ const History: React.FC = () => {
); );
} }
export default History; export default History; // Exporting the History component