From 5e1745fe0cfb6cc1a5470bc862ab720a9d77fee0 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Fri, 10 Mar 2023 00:15:05 +0800
Subject: [PATCH] style: side chat title input

---
 src/components/Menu/ChatHistoryList.tsx | 26 ++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Menu/ChatHistoryList.tsx b/src/components/Menu/ChatHistoryList.tsx
index 859120b..14513d9 100644
--- a/src/components/Menu/ChatHistoryList.tsx
+++ b/src/components/Menu/ChatHistoryList.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import useStore from '@store/store';
 
 import ChatIcon from '@icon/ChatIcon';
@@ -69,6 +69,7 @@ const ChatHistory = ({
   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;
 
@@ -96,6 +97,10 @@ const ChatHistory = ({
     setIsEdit(false);
   };
 
+  useEffect(() => {
+    if (inputRef && inputRef.current) inputRef.current.focus();
+  }, [isEdit]);
+
   return (
     <a
       className={active ? ChatHistoryClass.active : ChatHistoryClass.normal}
@@ -106,23 +111,26 @@ const ChatHistory = ({
         {isEdit ? (
           <input
             type='text'
-            className='text-sm border-none bg-transparent p-0 m-0 w-full mr-0'
+            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
         )}
 
-        <div
-          className={
-            active
-              ? ChatHistoryClass.activeGradient
-              : ChatHistoryClass.normalGradient
-          }
-        ></div>
+        {isEdit || (
+          <div
+            className={
+              active
+                ? ChatHistoryClass.activeGradient
+                : ChatHistoryClass.normalGradient
+            }
+          />
+        )}
       </div>
       {active && (
         <div className='absolute flex right-1 z-10 text-gray-300 visible'>