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 { showConfirm } from "./ui-lib";
+import { useRef, useEffect, useState } from "react";
+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,7 +156,19 @@ export function ChatList(props: { narrow?: boolean }) {
             ref={provided.innerRef}
             {...provided.droppableProps}
           >
-            {sessions.map((item, i) => (
+            <div className={styles["chat-list-search"]}>
+              <SearchInput
+                value={chatListSearch}
+                onChange={(e) => {
+                  setChatListSearch(e.currentTarget.value);
+                }}
+                placeholder={Locale.Home.Search}
+              ></SearchInput>
+            </div>
+
+            {sessions.map(
+              (item, i) =>
+                haveSearchKeyword(item) && (
                   <ChatItem
                     title={item.topic}
                     time={new Date(item.lastUpdate).toLocaleString()}
@@ -160,7 +192,8 @@ export function ChatList(props: { narrow?: boolean }) {
                     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 {