+
{isEdit ? (
) : (
- _title
+ `${title}${chatSize ? ` (${formatNumber(chatSize)})` : ''}`
)}
{isEdit || (
diff --git a/src/components/Menu/ChatHistoryList.tsx b/src/components/Menu/ChatHistoryList.tsx
index 42a9757dd..04fe2b432 100644
--- a/src/components/Menu/ChatHistoryList.tsx
+++ b/src/components/Menu/ChatHistoryList.tsx
@@ -11,10 +11,13 @@ import {
ChatHistoryFolderInterface,
ChatInterface,
FolderCollection,
+ isImageContent,
+ isTextContent,
} from '@type/chat';
const ChatHistoryList = () => {
const currentChatIndex = useStore((state) => state.currentChatIndex);
+ const displayChatSize = useStore((state) => state.displayChatSize);
const setChats = useStore((state) => state.setChats);
const setFolders = useStore((state) => state.setFolders);
const chatTitles = useStore(
@@ -30,6 +33,10 @@ const ChatHistoryList = () => {
[]
);
const [filter, setFilter] = useState('');
+ const [selectedChats, setSelectedChats] = useState([]);
+ const [lastSelectedIndex, setLastSelectedIndex] = useState(
+ null
+ );
const chatsRef = useRef(useStore.getState().chats || []);
const foldersRef = useRef(useStore.getState().folders);
@@ -40,6 +47,7 @@ const ChatHistoryList = () => {
const _noFolders: ChatHistoryInterface[] = [];
const chats = useStore.getState().chats;
const folders = useStore.getState().folders;
+ const displayChatSize = useStore.getState().displayChatSize;
Object.values(folders)
.sort((a, b) => a.order - b.order)
@@ -61,13 +69,51 @@ const ChatHistoryList = () => {
return;
if (!chat.folder) {
- _noFolders.push({ title: chat.title, index: index, id: chat.id });
+ _noFolders.push({
+ title: chat.title,
+ index: index,
+ id: chat.id,
+ chatSize: !displayChatSize
+ ? undefined
+ : chat.messages.reduce(
+ (prev, current) =>
+ prev +
+ current.content.reduce(
+ (prevInner, currCont) =>
+ prevInner +
+ (isTextContent(currCont)
+ ? currCont.text.length
+ : isImageContent(currCont)
+ ? currCont.image_url.url.length
+ : 0),
+ 0
+ ),
+ 0
+ ),
+ });
} else {
if (!_folders[chat.folder]) _folders[_chatFolderName] = [];
_folders[chat.folder].push({
title: chat.title,
index: index,
id: chat.id,
+ chatSize: !displayChatSize
+ ? undefined
+ : chat.messages.reduce(
+ (prev, current) =>
+ prev +
+ current.content.reduce(
+ (prevInner, currCont) =>
+ prevInner +
+ (isTextContent(currCont)
+ ? currCont.text.length
+ : isImageContent(currCont)
+ ? currCont.image_url.url.length
+ : 0),
+ 0
+ ),
+ 0
+ ),
});
}
});
@@ -80,7 +126,7 @@ const ChatHistoryList = () => {
useEffect(() => {
updateFolders();
- useStore.subscribe((state) => {
+ const unsubscribe = useStore.subscribe((state) => {
if (
!state.generating &&
state.chats &&
@@ -93,8 +139,15 @@ const ChatHistoryList = () => {
foldersRef.current = state.folders;
}
});
+ return () => {
+ unsubscribe();
+ };
}, []);
+ useEffect(() => {
+ updateFolders();
+ }, [displayChatSize]);
+
useEffect(() => {
if (
chatTitles &&
@@ -131,12 +184,15 @@ const ChatHistoryList = () => {
e.stopPropagation();
setIsHover(false);
- const chatIndex = Number(e.dataTransfer.getData('chatIndex'));
+ const chatIndices = JSON.parse(e.dataTransfer.getData('chatIndices'));
const updatedChats: ChatInterface[] = JSON.parse(
JSON.stringify(useStore.getState().chats)
);
- delete updatedChats[chatIndex].folder;
+ chatIndices.forEach((chatIndex: number) => {
+ delete updatedChats[chatIndex].folder;
+ });
setChats(updatedChats);
+ setSelectedChats([]);
}
};
@@ -170,10 +226,23 @@ const ChatHistoryList = () => {
folderChats={chatFolders[folderId]}
folderId={folderId}
key={folderId}
+ selectedChats={selectedChats}
+ setSelectedChats={setSelectedChats}
+ lastSelectedIndex={lastSelectedIndex}
+ setLastSelectedIndex={setLastSelectedIndex}
/>
))}
- {noChatFolders.map(({ title, index, id }) => (
-
+ {noChatFolders.map(({ title, index, id, chatSize }) => (
+
))}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index d808368dc..7f124640b 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,5 +1,4 @@
import React, { useEffect, useRef } from 'react';
-
import useStore from '@store/store';
import NewChat from './NewChat';
@@ -14,8 +13,11 @@ import MenuIcon from '@icon/MenuIcon';
const Menu = () => {
const hideSideMenu = useStore((state) => state.hideSideMenu);
const setHideSideMenu = useStore((state) => state.setHideSideMenu);
+ const menuWidth = useStore((state) => state.menuWidth);
+ const setMenuWidth = useStore((state) => state.setMenuWidth);
const windowWidthRef = useRef
(window.innerWidth);
+ const isResizing = useRef(false);
useEffect(() => {
if (window.innerWidth < 768) setHideSideMenu(true);
@@ -28,13 +30,41 @@ const Menu = () => {
});
}, []);
+ const handleMouseDown = () => {
+ isResizing.current = true;
+ };
+
+ const handleMouseMove = (e: MouseEvent) => {
+ if (isResizing.current) {
+ const newWidth = e.clientX;
+ if (newWidth > 100 && newWidth < window.innerWidth * 0.75) {
+ setMenuWidth(newWidth);
+ }
+ }
+ };
+
+ const handleMouseUp = () => {
+ isResizing.current = false;
+ };
+
+ useEffect(() => {
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+
+ return () => {
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ };
+ }, []);
+
return (
<>