alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 21:43:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: change tab title to current chat title

Browse source
This commit is contained in:
Jing Hua 2023-03-10 15:09:23 +08:00
parent f58382137d
commit bdc385158b
1 changed files with 109 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/Menu/ChatHistoryList.tsx
View file

@ -11,12 +11,22 @@ import CrossIcon from '@icon/CrossIcon';
import useInitialiseNewChat from '@hooks/useInitialiseNewChat'; import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
const ChatHistoryList = () => { const ChatHistoryList = () => {
const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex); const currentChatIndex = useStore((state) => state.currentChatIndex);
const chatTitles = useStore( const chatTitles = useStore(
(state) => state.chats?.map((chat) => chat.title), (state) => state.chats?.map((chat) => chat.title),
shallow shallow
); );
useEffect(() => {
if (
chatTitles &&
currentChatIndex >= 0 &&
currentChatIndex < chatTitles.length
) {
document.title = chatTitles[currentChatIndex];
}
}, [currentChatIndex, chatTitles]);
return ( return (
<div className='flex-col flex-1 overflow-y-auto border-b border-white/20'> <div className='flex-col flex-1 overflow-y-auto border-b border-white/20'>
<div className='flex flex-col gap-2 text-gray-100 text-sm'> <div className='flex flex-col gap-2 text-gray-100 text-sm'>
@ -26,9 +36,6 @@ const ChatHistoryList = () => {
title={title} title={title}
key={`${title}-${index}`} key={`${title}-${index}`}
chatIndex={index} chatIndex={index}
onClick={() => {
setCurrentChatIndex(index);
}}
/> />
))} ))}
{/* <ShowMoreButton /> */} {/* <ShowMoreButton /> */}
@ -56,30 +63,23 @@ const ChatHistoryClass = {
'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-800', 'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-800',
}; };
const ChatHistory = ({ const ChatHistory = React.memo(
title, ({ title, chatIndex }: { title: string; chatIndex: number }) => {
chatIndex,
onClick,
}: {
title: string;
chatIndex: number;
onClick?: React.MouseEventHandler<HTMLElement>;
}) => {
const initialiseNewChat = useInitialiseNewChat(); const initialiseNewChat = useInitialiseNewChat();
const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex); const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
const setChats = useStore((state) => state.setChats); const setChats = useStore((state) => state.setChats);
const currentChatIndex = useStore((state) => state.currentChatIndex); const active = useStore((state) => state.currentChatIndex === chatIndex);
const [isDelete, setIsDelete] = useState<boolean>(false); const [isDelete, setIsDelete] = useState<boolean>(false);
const [isEdit, setIsEdit] = useState<boolean>(false); const [isEdit, setIsEdit] = useState<boolean>(false);
const [_title, _setTitle] = useState<string>(title); const [_title, _setTitle] = useState<string>(title);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const active = currentChatIndex === chatIndex;
const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => { const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation(); e.stopPropagation();
const updatedChats = JSON.parse(JSON.stringify(useStore.getState().chats)); const updatedChats = JSON.parse(
JSON.stringify(useStore.getState().chats)
);
if (isEdit) { if (isEdit) {
updatedChats[chatIndex].title = _title; updatedChats[chatIndex].title = _title;
setChats(updatedChats); setChats(updatedChats);
@ -108,7 +108,9 @@ const ChatHistory = ({
return ( return (
<a <a
className={active ? ChatHistoryClass.active : ChatHistoryClass.normal} className={active ? ChatHistoryClass.active : ChatHistoryClass.normal}
onClick={(e) => onClick && onClick(e)} onClick={(e) => {
setCurrentChatIndex(chatIndex);
}}
> >
<ChatIcon /> <ChatIcon />
<div className='flex-1 text-ellipsis max-h-5 overflow-hidden break-all relative'> <div className='flex-1 text-ellipsis max-h-5 overflow-hidden break-all relative'>
@ -167,6 +169,7 @@ const ChatHistory = ({
)} )}
</a> </a>
); );
}; }
);
export default ChatHistoryList; export default ChatHistoryList;