123 lines
4.4 KiB
TypeScript
123 lines
4.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useChatHistory } from '../hooks/useChatHistory';
|
|
|
|
const History: React.FC = () => {
|
|
const [chatHistory, setSelectedIndex, setChatHistory] = useChatHistory()
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [inputValue, setInputValue] = useState<string>('');
|
|
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
|
|
|
|
|
const handleEditButtonClick = () => {
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setInputValue(e.target.value);
|
|
};
|
|
|
|
const handleSaveButtonClick = () => {
|
|
setIsEditing(false);
|
|
chatHistory.chats.push({ name: inputValue, messages: [], timestamp: 5 })
|
|
setInputValue("")
|
|
};
|
|
|
|
const handleHistoryClick = (index: number) => {
|
|
setSelectedIndex(index)
|
|
console.log("index",index);
|
|
}
|
|
|
|
const handleHistoryHover = (index:number) => {
|
|
setHoveredIndex(index)
|
|
}
|
|
|
|
const handleHistoryNotHover = () => {
|
|
setHoveredIndex(null)
|
|
}
|
|
|
|
console.log("chat length",chatHistory.chats.length)
|
|
console.log("index",chatHistory.selectedIndex)
|
|
|
|
const handleHistoryDeletion = (index: number) => {
|
|
const currentIndex = chatHistory.selectedIndex;
|
|
|
|
// Create a new copy of the current chat history
|
|
const copyChats = { ...chatHistory };
|
|
copyChats.chats = [...chatHistory.chats]
|
|
|
|
// Remove the chat at the specified index
|
|
copyChats.chats.splice(index,1)
|
|
|
|
// Determine new selectedIndex
|
|
let newSelectedIndex = currentIndex;
|
|
|
|
// Adjust selectedIndex based on the deletion
|
|
if (index === currentIndex) {
|
|
// If the deleted index is the currently selected one, 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
|
|
} else if (index < currentIndex) {
|
|
// If the deleted chat is before the current selected index, decrement the selected index
|
|
newSelectedIndex = currentIndex - 1;
|
|
}
|
|
|
|
copyChats.selectedIndex = newSelectedIndex
|
|
|
|
console.log(copyChats)
|
|
|
|
// Set the updated chat history
|
|
setChatHistory(copyChats);
|
|
};
|
|
|
|
return (
|
|
<div className="history-background">
|
|
<div className="history">
|
|
<ul>
|
|
{/* Populate with history items */}
|
|
{chatHistory.chats.map((chats, index) => (
|
|
<li key={index} onMouseOver={()=>handleHistoryHover(index)} onMouseOut={handleHistoryNotHover} >
|
|
<a href="#" onClick={() => handleHistoryClick(index)} style={{
|
|
backgroundColor: chatHistory.selectedIndex == index ? "var(--input-button-color)" : "",
|
|
borderRadius: "5px",
|
|
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={{
|
|
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>
|
|
</li>
|
|
))}
|
|
<li>
|
|
{isEditing ? (
|
|
<div className="input-container">
|
|
<input
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={handleInputChange}
|
|
placeholder="Enter text"
|
|
className="chat-input"
|
|
/>
|
|
<button onClick={handleSaveButtonClick} className="save-btn">
|
|
Save
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button onClick={handleEditButtonClick} className="newChat-btn">
|
|
New Chat
|
|
</button>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default History;
|