alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 19: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

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

@ -11,12 +11,22 @@ import CrossIcon from '@icon/CrossIcon';
import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
const ChatHistoryList = () => {
const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
const currentChatIndex = useStore((state) => state.currentChatIndex);
const chatTitles = useStore(
(state) => state.chats?.map((chat) => chat.title),
shallow
);
useEffect(() => {
if (
chatTitles &&
currentChatIndex >= 0 &&
currentChatIndex < chatTitles.length
) {
document.title = chatTitles[currentChatIndex];
}
}, [currentChatIndex, chatTitles]);
return (
<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'>
@ -26,9 +36,6 @@ const ChatHistoryList = () => {
title={title}
key={`${title}-${index}`}
chatIndex={index}
onClick={() => {
setCurrentChatIndex(index);
}}
/>
))}
{/* <ShowMoreButton /> */}
@ -56,117 +63,113 @@ const ChatHistoryClass = {
'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-800',
};
const ChatHistory = ({
title,
chatIndex,
onClick,
}: {
title: string;
chatIndex: number;
onClick?: React.MouseEventHandler<HTMLElement>;
}) => {
const initialiseNewChat = useInitialiseNewChat();
const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
const setChats = useStore((state) => state.setChats);
const currentChatIndex = useStore((state) => state.currentChatIndex);
const ChatHistory = React.memo(
({ title, chatIndex }: { title: string; chatIndex: number }) => {
const initialiseNewChat = useInitialiseNewChat();
const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
const setChats = useStore((state) => state.setChats);
const active = useStore((state) => state.currentChatIndex === chatIndex);
const [isDelete, setIsDelete] = useState<boolean>(false);
const [isEdit, setIsEdit] = useState<boolean>(false);
const [_title, _setTitle] = useState<string>(title);
const inputRef = useRef<HTMLInputElement>(null);
const [isDelete, setIsDelete] = useState<boolean>(false);
const [isEdit, setIsEdit] = useState<boolean>(false);
const [_title, _setTitle] = useState<string>(title);
const inputRef = useRef<HTMLInputElement>(null);
const active = currentChatIndex === chatIndex;
const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
const updatedChats = JSON.parse(JSON.stringify(useStore.getState().chats));
if (isEdit) {
updatedChats[chatIndex].title = _title;
setChats(updatedChats);
setIsEdit(false);
} else if (isDelete) {
updatedChats.splice(chatIndex, 1);
if (updatedChats.length > 0) {
setCurrentChatIndex(0);
const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
const updatedChats = JSON.parse(
JSON.stringify(useStore.getState().chats)
);
if (isEdit) {
updatedChats[chatIndex].title = _title;
setChats(updatedChats);
} else {
initialiseNewChat();
setIsEdit(false);
} else if (isDelete) {
updatedChats.splice(chatIndex, 1);
if (updatedChats.length > 0) {
setCurrentChatIndex(0);
setChats(updatedChats);
} else {
initialiseNewChat();
}
setIsDelete(false);
}
};
const handleCross = () => {
setIsDelete(false);
}
};
setIsEdit(false);
};
const handleCross = () => {
setIsDelete(false);
setIsEdit(false);
};
useEffect(() => {
if (inputRef && inputRef.current) inputRef.current.focus();
}, [isEdit]);
useEffect(() => {
if (inputRef && inputRef.current) inputRef.current.focus();
}, [isEdit]);
return (
<a
className={active ? ChatHistoryClass.active : ChatHistoryClass.normal}
onClick={(e) => onClick && onClick(e)}
>
<ChatIcon />
<div className='flex-1 text-ellipsis max-h-5 overflow-hidden break-all relative'>
{isEdit ? (
<input
type='text'
className='focus:outline-blue-600 text-sm border-none bg-transparent p-0 m-0 w-full'
value={_title}
onChange={(e) => {
_setTitle(e.target.value);
}}
ref={inputRef}
/>
) : (
_title
)}
{isEdit || (
<div
className={
active
? ChatHistoryClass.activeGradient
: ChatHistoryClass.normalGradient
}
/>
)}
</div>
{active && (
<div className='absolute flex right-1 z-10 text-gray-300 visible'>
{isDelete || isEdit ? (
<>
<button className='p-1 hover:text-white' onClick={handleTick}>
<TickIcon />
</button>
<button className='p-1 hover:text-white' onClick={handleCross}>
<CrossIcon />
</button>
</>
return (
<a
className={active ? ChatHistoryClass.active : ChatHistoryClass.normal}
onClick={(e) => {
setCurrentChatIndex(chatIndex);
}}
>
<ChatIcon />
<div className='flex-1 text-ellipsis max-h-5 overflow-hidden break-all relative'>
{isEdit ? (
<input
type='text'
className='focus:outline-blue-600 text-sm border-none bg-transparent p-0 m-0 w-full'
value={_title}
onChange={(e) => {
_setTitle(e.target.value);
}}
ref={inputRef}
/>
) : (
<>
<button
className='p-1 hover:text-white'
onClick={() => setIsEdit(true)}
>
<EditIcon />
</button>
<button
className='p-1 hover:text-white'
onClick={() => setIsDelete(true)}
>
<DeleteIcon />
</button>
</>
_title
)}
{isEdit || (
<div
className={
active
? ChatHistoryClass.activeGradient
: ChatHistoryClass.normalGradient
}
/>
)}
</div>
)}
</a>
);
};
{active && (
<div className='absolute flex right-1 z-10 text-gray-300 visible'>
{isDelete || isEdit ? (
<>
<button className='p-1 hover:text-white' onClick={handleTick}>
<TickIcon />
</button>
<button className='p-1 hover:text-white' onClick={handleCross}>
<CrossIcon />
</button>
</>
) : (
<>
<button
className='p-1 hover:text-white'
onClick={() => setIsEdit(true)}
>
<EditIcon />
</button>
<button
className='p-1 hover:text-white'
onClick={() => setIsDelete(true)}
>
<DeleteIcon />
</button>
</>
)}
</div>
)}
</a>
);
}
);
export default ChatHistoryList;