xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-10 03:56:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: move search bar from chat-list to sidebar

Browse Source
This commit is contained in:
Andision 2023-12-01 04:50:21 +00:00
parent 59e7532e77
commit 0544ad0ccf
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/chat-list.tsx
View File

@ -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( const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
(state) => [ (state) => [
state.sessions, state.sessions,
@ -127,10 +127,8 @@ export function ChatList(props: { narrow?: boolean }) {
moveSession(source.index, destination.index); moveSession(source.index, destination.index);
}; };
const [chatListSearch, setChatListSearch] = useState("");
function haveSearchKeyword(item: ChatSession): boolean { function haveSearchKeyword(item: ChatSession): boolean {
if (chatListSearch.length === 0) { if (props.search.length === 0) {
return true; return true;
} }
@ -138,7 +136,7 @@ export function ChatList(props: { narrow?: boolean }) {
item.messages.forEach((message) => { item.messages.forEach((message) => {
// console.log(chatListSearch, message.content, message.content.includes(chatListSearch)) // console.log(chatListSearch, message.content, message.content.includes(chatListSearch))
if (message.content.includes(chatListSearch)) { if (message.content.includes(props.search)) {
foundKeyword = true; foundKeyword = true;
return; return;
} }
@ -156,16 +154,6 @@ export function ChatList(props: { narrow?: boolean }) {
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
> >
<div className={styles["chat-list-search"]}>
<SearchInput
value={chatListSearch}
onChange={(e) => {
setChatListSearch(e.currentTarget.value);
}}
placeholder={Locale.Home.Search}
></SearchInput>
</div>
{sessions.map( {sessions.map(
(item, i) => (item, i) =>
haveSearchKeyword(item) && ( haveSearchKeyword(item) && (

18
app/components/sidebar.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useMemo } from "react"; import { useEffect, useRef, useMemo, useState } from "react";
import styles from "./home.module.scss"; import styles from "./home.module.scss";
@ -29,7 +29,7 @@ import {
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { isIOS, useMobileScreen } from "../utils"; import { isIOS, useMobileScreen } from "../utils";
import dynamic from "next/dynamic"; 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, { const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
loading: () => null, loading: () => null,
@ -141,6 +141,8 @@ export function SideBar(props: { className?: string }) {
[isMobileScreen], [isMobileScreen],
); );
const [chatListSearch, setChatListSearch] = useState("");
useHotKey(); useHotKey();
return ( return (
@ -188,6 +190,16 @@ export function SideBar(props: { className?: string }) {
/> />
</div> </div>
<div className={styles["chat-list-search"]}>
<SearchInput
value={chatListSearch}
onChange={(e) => {
setChatListSearch(e.currentTarget.value);
}}
placeholder={Locale.Home.Search}
></SearchInput>
</div>
<div <div
className={styles["sidebar-body"]} className={styles["sidebar-body"]}
onClick={(e) => { onClick={(e) => {
@ -196,7 +208,7 @@ export function SideBar(props: { className?: string }) {
} }
}} }}
> >
<ChatList narrow={shouldNarrow} /> <ChatList narrow={shouldNarrow} search={chatListSearch} />
</div> </div>
<div className={styles["sidebar-tail"]}> <div className={styles["sidebar-tail"]}>