diff --git a/components/Sidebar/Search.tsx b/components/Sidebar/Search.tsx new file mode 100644 index 0000000..c3bc573 --- /dev/null +++ b/components/Sidebar/Search.tsx @@ -0,0 +1,37 @@ +import { IconX } from "@tabler/icons-react"; +import { FC } from "react"; + +interface Props { + searchTerm: string; + onSearch: (searchTerm: string) => void; +} + +export const Search: FC = ({ searchTerm, onSearch }) => { + const handleSearchChange = (e: React.ChangeEvent) => { + onSearch(e.target.value); + }; + + const clearSearch = () => { + onSearch(""); + }; + + return ( +
+ + + {searchTerm && ( + + )} +
+ ); +}; diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx index 8806fde..2a5c5cb 100644 --- a/components/Sidebar/Sidebar.tsx +++ b/components/Sidebar/Sidebar.tsx @@ -1,7 +1,8 @@ import { Conversation } from "@/types"; import { IconArrowBarLeft, IconPlus } from "@tabler/icons-react"; -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; import { Conversations } from "./Conversations"; +import { Search } from "./Search"; import { SidebarSettings } from "./SidebarSettings"; interface Props { @@ -20,12 +21,26 @@ interface Props { } export const Sidebar: FC = ({ loading, conversations, lightMode, selectedConversation, apiKey, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation, onToggleSidebar, onRenameConversation, onApiKeyChange }) => { + const [searchTerm, setSearchTerm] = useState(""); + const [filteredConversations, setFilteredConversations] = useState(conversations); + + useEffect(() => { + if (searchTerm) { + setFilteredConversations(conversations.filter((conversation) => conversation.name.toLowerCase().includes(searchTerm.toLowerCase()))); + } else { + setFilteredConversations(conversations); + } + }, [searchTerm, conversations]); + return (
+ {conversations.length > 1 && ( + + )} +
{ + onDeleteConversation(conversation); + setSearchTerm(""); + }} + onRenameConversation={(conversation, name) => { + onRenameConversation(conversation, name); + setSearchTerm(""); + }} />