feat: add SearchInput to ui-lib (#169)

* feat: add SearchInput to ui-lib * feat: add search bar in chat-list * feat: add placeholder for search bar in chat-list * Chore Local Language Indonesia - [+] chore(id.ts): add missing translation for "Search" in the Indonesian locale file --------- Co-authored-by: Andision <[email protected]>
H0llyW00dzZ · Dec 1, 2023 · 18da164 · 18da164
1 parent 88f6c94
commit 18da164
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 32 deletions.
diff --git a/app/components/chat-list.tsx b/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,31 +156,44 @@ export function ChatList(props: { narrow?: boolean }) {
             ref={provided.innerRef}
             {...provided.droppableProps}
           >
-            {sessions.map((item, i) => (
-              <ChatItem
-                title={item.topic}
-                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);
-                  }
+            <div className={styles["chat-list-search"]}>
+              <SearchInput
+                value={chatListSearch}
+                onChange={(e) => {
+                  setChatListSearch(e.currentTarget.value);
                 }}
-                narrow={props.narrow}
-                mask={item.mask}
-              />
-            ))}
+                placeholder={Locale.Home.Search}
+              ></SearchInput>
+            </div>
+
+            {sessions.map(
+              (item, i) =>
+                haveSearchKeyword(item) && (
+                  <ChatItem
+                    title={item.topic}
+                    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>
         )}

diff --git a/app/components/home.module.scss b/app/components/home.module.scss
@@ -243,6 +243,11 @@
   white-space: nowrap;
 }
 
+.chat-list-search {
+  padding: 10px 0px;
+  margin-bottom: 10px;
+}
+
 .narrow-sidebar {
   .sidebar-title,
   .sidebar-sub-title {

diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
@@ -275,6 +275,20 @@ export function PasswordInput(props: HTMLProps<HTMLInputElement>) {
   );
 }
 
+export function SearchInput(props: HTMLProps<HTMLInputElement>) {
+  const [visible, setVisible] = useState(false);
+
+  function changeVisibility() {
+    setVisible(!visible);
+  }
+
+  return (
+    <div className={"search-input-container"}>
+      <input {...props} type="text" className={"search-input"} />
+    </div>
+  );
+}
+
 export function Select(
   props: React.DetailedHTMLProps<
     React.SelectHTMLAttributes<HTMLSelectElement>,

diff --git a/app/locales/cn.ts b/app/locales/cn.ts
@@ -170,6 +170,7 @@ const cn = {
     DeleteChat: "确认删除选中的对话？",
     DeleteToast: "已删除会话",
     Revert: "撤销",
+    Search: "输入筛选的关键词",
   },
   Settings: {
     Title: "设置",
@@ -615,9 +616,9 @@ const cn = {
     Manage: "管理",
   },
   Exporter: {
-    Description : {
-      Title: "只有清除上下文之后的消息会被展示"
-    },  
+    Description: {
+      Title: "只有清除上下文之后的消息会被展示",
+    },
     Model: "模型",
     ServiceProvider: "服务提供商",
     Messages: "消息",

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -173,6 +173,7 @@ const en: LocaleType = {
     DeleteChat: "Confirm to delete the selected conversation?",
     DeleteToast: "Chat Deleted",
     Revert: "Revert",
+    Search: "Enter filter keywords",
   },
   Settings: {
     Title: "Settings",
@@ -620,8 +621,8 @@ const en: LocaleType = {
   },
   Exporter: {
     Description: {
-      Title: "Only messages after clearing the context will be displayed"
-    },  
+      Title: "Only messages after clearing the context will be displayed",
+    },
     Model: "Model",
     ServiceProvider: "Service Provider",
     Messages: "Messages",

diff --git a/app/locales/id.ts b/app/locales/id.ts
@@ -157,6 +157,7 @@ const id: PartialLocaleType = {
     DeleteChat: "Anda yakin ingin menghapus percakapan yang dipilih?",
     DeleteToast: "Percakapan telah dihapus",
     Revert: "Kembali",
+    Search: "Masukkan kata kunci filter",
   },
   Settings: {
     Title: "Pengaturan",

diff --git a/app/styles/globals.scss b/app/styles/globals.scss
@@ -339,6 +339,16 @@ pre {
   }
 }
 
+.search-input-container {
+  display: flex;
+  justify-content: center;
+
+  .search-input {
+    min-width: 99%;
+    text-align: left;
+  }
+}
+
 .user-avatar {
   height: 30px;
   min-height: 30px;