feat: add search bar in chat-list

app/components/chat-list.tsx

@@ -9,15 +9,15 @@ import {
   OnDragEndResponder,
 } from "@hello-pangea/dnd";
 
-import { useChatStore } from "../store";
+import { ChatSession, useChatStore } from "../store";
 
 import Locale from "../locales";
 import { Link, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
-import { showConfirm } from "./ui-lib";
+import { showConfirm, SearchInput } from "./ui-lib";
 import { useMobileScreen } from "../utils";
 
 export function ChatItem(props: {
@@ -127,6 +127,26 @@ export function ChatList(props: { narrow?: boolean }) {
     moveSession(source.index, destination.index);
   };
 
+  const [chatListSearch, setChatListSearch] = useState("");
+
+  function haveSearchKeyword(item: ChatSession): boolean {
+    if (chatListSearch.length === 0) {
+      return true;
+    }
+
+    let foundKeyword = false;
+
+    item.messages.forEach((message) => {
+      // console.log(chatListSearch, message.content, message.content.includes(chatListSearch))
+      if (message.content.includes(chatListSearch)) {
+        foundKeyword = true;
+        return;
+      }
+    });
+
+    return foundKeyword;
+  }
+
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId="chat-list">
@@ -136,31 +156,44 @@ export function ChatList(props: { narrow?: boolean }) {
             ref={provided.innerRef}
             {...provided.droppableProps}
           >
-            {sessions.map((item, i) => (
+            <div className={styles["chat-list-search"]}>
-              <ChatItem
+              <SearchInput
-                title={item.topic}
+                value={chatListSearch}
-                time={new Date(item.lastUpdate).toLocaleString()}
+                onChange={(e) => {
-                count={item.messages.length}
+                  setChatListSearch(e.currentTarget.value);
-                key={item.id}
-                id={item.id}
-                index={i}
-                selected={i === selectedIndex}
-                onClick={() => {
-                  navigate(Path.Chat);
-                  selectSession(i);
                 }}
-                onDelete={async () => {
+                placeholder={Locale.Home.Search}
-                  if (
+              ></SearchInput>
-                    (!props.narrow && !isMobileScreen) ||
+            </div>
-                    (await showConfirm(Locale.Home.DeleteChat))
+
-                  ) {
+            {sessions.map(
-                    chatStore.deleteSession(i);
+              (item, i) =>
-                  }
+                haveSearchKeyword(item) && (
-                }}
+                  <ChatItem
-                narrow={props.narrow}
+                    title={item.topic}
-                mask={item.mask}
+                    time={new Date(item.lastUpdate).toLocaleString()}
-              />
+                    count={item.messages.length}
-            ))}
+                    key={item.id}
+                    id={item.id}
+                    index={i}
+                    selected={i === selectedIndex}
+                    onClick={() => {
+                      navigate(Path.Chat);
+                      selectSession(i);
+                    }}
+                    onDelete={async () => {
+                      if (
+                        (!props.narrow && !isMobileScreen) ||
+                        (await showConfirm(Locale.Home.DeleteChat))
+                      ) {
+                        chatStore.deleteSession(i);
+                      }
+                    }}
+                    narrow={props.narrow}
+                    mask={item.mask}
+                  />
+                ),
+            )}
             {provided.placeholder}
           </div>
         )}

app/components/home.module.scss

@@ -230,6 +230,11 @@
   white-space: nowrap;
 }
 
+.chat-list-search {
+  padding: 10px 0px;
+  margin-bottom: 10px;
+}
+
 .narrow-sidebar {
   .sidebar-title,
   .sidebar-sub-title {