fix: auto-focus current conversation in ChatListDropdown (#141)

glowingjade · Nov 27, 2024 · edcc7a3 · edcc7a3
1 parent 2b6ab4d
commit edcc7a3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/chat-view/Chat.tsx b/src/components/chat-view/Chat.tsx
@@ -545,6 +545,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
           </button>
           <ChatListDropdown
             chatList={chatList}
+            currentConversationId={currentConversationId}
             onSelect={async (conversationId) => {
               if (conversationId === currentConversationId) return
               await handleLoadConversation(conversationId)

diff --git a/src/components/chat-view/ChatListDropdown.tsx b/src/components/chat-view/ChatListDropdown.tsx
@@ -108,13 +108,15 @@ function ChatListItem({
 
 export function ChatListDropdown({
   chatList,
+  currentConversationId,
   onSelect,
   onDelete,
   onUpdateTitle,
   className,
   children,
 }: {
   chatList: ChatConversationMeta[]
+  currentConversationId: string
   onSelect: (conversationId: string) => Promise<void>
   onDelete: (conversationId: string) => Promise<void>
   onUpdateTitle: (conversationId: string, newTitle: string) => Promise<void>
@@ -127,7 +129,10 @@ export function ChatListDropdown({
 
   useEffect(() => {
     if (open) {
-      setFocusedIndex(0)
+      const currentIndex = chatList.findIndex(
+        (chat) => chat.id === currentConversationId,
+      )
+      setFocusedIndex(currentIndex === -1 ? 0 : currentIndex)
       setEditingId(null)
     }
   }, [open])
@@ -171,8 +176,8 @@ export function ChatListDropdown({
                     setFocusedIndex(index)
                   }}
                   onSelect={async () => {
-                    setEditingId(null)
                     await onSelect(chat.id)
+                    setOpen(false)
                   }}
                   onDelete={async () => {
                     await onDelete(chat.id)