From bdc385158b16ca4d06b936a2f9226fd53c62f8bf Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Fri, 10 Mar 2023 15:09:23 +0800
Subject: [PATCH] feat: change tab title to current chat title

---
 src/components/Menu/ChatHistoryList.tsx | 215 ++++++++++++------------
 1 file changed, 109 insertions(+), 106 deletions(-)

diff --git a/src/components/Menu/ChatHistoryList.tsx b/src/components/Menu/ChatHistoryList.tsx
index 0c4a4a2..862717c 100644
--- a/src/components/Menu/ChatHistoryList.tsx
+++ b/src/components/Menu/ChatHistoryList.tsx
@@ -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;