From 31d436cc7e771edf0d901c525c96477b400e27be Mon Sep 17 00:00:00 2001 From: Andision Date: Fri, 1 Dec 2023 04:08:24 +0000 Subject: [PATCH 1/4] feat: add SearchInput to ui-lib --- app/components/ui-lib.tsx | 14 ++++++++++++++ app/styles/globals.scss | 10 ++++++++++ 2 files changed, 24 insertions(+) diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index f7e326fd3..746205e51 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -275,6 +275,20 @@ export function PasswordInput(props: HTMLProps) { ); } +export function SearchInput(props: HTMLProps) { + const [visible, setVisible] = useState(false); + + function changeVisibility() { + setVisible(!visible); + } + + return ( +
+ +
+ ); +} + export function Select( props: React.DetailedHTMLProps< React.SelectHTMLAttributes, diff --git a/app/styles/globals.scss b/app/styles/globals.scss index aa22b7d4f..e63f5d57b 100644 --- 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; From 354a596fa8b277922fa1a5118c0a077415bc13e9 Mon Sep 17 00:00:00 2001 From: Andision Date: Fri, 1 Dec 2023 04:08:47 +0000 Subject: [PATCH 2/4] feat: add search bar in chat-list --- app/components/chat-list.tsx | 87 +++++++++++++++++++++++---------- app/components/home.module.scss | 5 ++ 2 files changed, 65 insertions(+), 27 deletions(-) diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx index 33967717d..ff0ebb9d0 100644 --- 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 ( @@ -136,31 +156,44 @@ export function ChatList(props: { narrow?: boolean }) { ref={provided.innerRef} {...provided.droppableProps} > - {sessions.map((item, i) => ( - { - navigate(Path.Chat); - selectSession(i); +
+ { + setChatListSearch(e.currentTarget.value); }} - onDelete={async () => { - if ( - (!props.narrow && !isMobileScreen) || - (await showConfirm(Locale.Home.DeleteChat)) - ) { - chatStore.deleteSession(i); - } - }} - narrow={props.narrow} - mask={item.mask} - /> - ))} + placeholder={Locale.Home.Search} + > +
+ + {sessions.map( + (item, i) => + haveSearchKeyword(item) && ( + { + 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} )} diff --git a/app/components/home.module.scss b/app/components/home.module.scss index b836d2bec..b0884d248 100644 --- a/app/components/home.module.scss +++ b/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 { From 59e7532e77f0d71a4c98476055926787772b590d Mon Sep 17 00:00:00 2001 From: Andision Date: Fri, 1 Dec 2023 04:09:09 +0000 Subject: [PATCH 3/4] feat: add placeholder for search bar in chat-list --- app/locales/cn.ts | 7 ++++--- app/locales/en.ts | 5 +++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 50dd44284..22eff43b8 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -123,6 +123,7 @@ const cn = { DeleteChat: "确认删除选中的对话？", DeleteToast: "已删除会话", Revert: "撤销", + Search: "输入筛选的关键词", }, Settings: { Title: "设置", @@ -441,9 +442,9 @@ const cn = { Config: "配置", }, Exporter: { - Description : { - Title: "只有清除上下文之后的消息会被展示" - }, + Description: { + Title: "只有清除上下文之后的消息会被展示", + }, Model: "模型", Messages: "消息", Topic: "主题", diff --git a/app/locales/en.ts b/app/locales/en.ts index f90cffd4c..4ef31f012 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -126,6 +126,7 @@ const en: LocaleType = { DeleteChat: "Confirm to delete the selected conversation?", DeleteToast: "Chat Deleted", Revert: "Revert", + Search: "Enter filter keywords", }, Settings: { Title: "Settings", @@ -443,8 +444,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", Messages: "Messages", Topic: "Topic", From 0544ad0ccfa7dd7b41cc5e40a4b83c3619b50094 Mon Sep 17 00:00:00 2001 From: Andision Date: Fri, 1 Dec 2023 04:50:21 +0000 Subject: [PATCH 4/4] feat: move search bar from chat-list to sidebar --- app/components/chat-list.tsx | 18 +++--------------- app/components/sidebar.tsx | 18 +++++++++++++++--- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx index ff0ebb9d0..188eda654 100644 --- a/app/components/chat-list.tsx +++ b/app/components/chat-list.tsx @@ -98,7 +98,7 @@ export function ChatItem(props: { ); } -export function ChatList(props: { narrow?: boolean }) { +export function ChatList(props: { narrow?: boolean; search: string }) { const [sessions, selectedIndex, selectSession, moveSession] = useChatStore( (state) => [ state.sessions, @@ -127,10 +127,8 @@ export function ChatList(props: { narrow?: boolean }) { moveSession(source.index, destination.index); }; - const [chatListSearch, setChatListSearch] = useState(""); - function haveSearchKeyword(item: ChatSession): boolean { - if (chatListSearch.length === 0) { + if (props.search.length === 0) { return true; } @@ -138,7 +136,7 @@ export function ChatList(props: { narrow?: boolean }) { item.messages.forEach((message) => { // console.log(chatListSearch, message.content, message.content.includes(chatListSearch)) - if (message.content.includes(chatListSearch)) { + if (message.content.includes(props.search)) { foundKeyword = true; return; } @@ -156,16 +154,6 @@ export function ChatList(props: { narrow?: boolean }) { ref={provided.innerRef} {...provided.droppableProps} > -
- { - setChatListSearch(e.currentTarget.value); - }} - placeholder={Locale.Home.Search} - > -
- {sessions.map( (item, i) => haveSearchKeyword(item) && ( diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx index beeee865a..b0843c5e9 100644 --- a/app/components/sidebar.tsx +++ b/app/components/sidebar.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useMemo } from "react"; +import { useEffect, useRef, useMemo, useState } from "react"; import styles from "./home.module.scss"; @@ -29,7 +29,7 @@ import { import { Link, useNavigate } from "react-router-dom"; import { isIOS, useMobileScreen } from "../utils"; import dynamic from "next/dynamic"; -import { showConfirm, showToast } from "./ui-lib"; +import { SearchInput, showConfirm, showToast } from "./ui-lib"; const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, { loading: () => null, @@ -141,6 +141,8 @@ export function SideBar(props: { className?: string }) { [isMobileScreen], ); + const [chatListSearch, setChatListSearch] = useState(""); + useHotKey(); return ( @@ -188,6 +190,16 @@ export function SideBar(props: { className?: string }) { /> +
+ { + setChatListSearch(e.currentTarget.value); + }} + placeholder={Locale.Home.Search} + > +
+
{ @@ -196,7 +208,7 @@ export function SideBar(props: { className?: string }) { } }} > - +