diff --git a/components/Sidebar/ClearConversations.tsx b/components/Sidebar/ClearConversations.tsx new file mode 100644 index 0000000..eedb799 --- /dev/null +++ b/components/Sidebar/ClearConversations.tsx @@ -0,0 +1,50 @@ +import { IconCheck, IconTrash, IconX } from "@tabler/icons-react"; +import { FC, useState } from "react"; +import { SidebarButton } from "./SidebarButton"; + +interface Props { + onClearConversations: () => void; +} + +export const ClearConversations: FC = ({ onClearConversations }) => { + const [isConfirming, setIsConfirming] = useState(false); + + const handleClearConversations = () => { + onClearConversations(); + setIsConfirming(false); + }; + + return isConfirming ? ( +
+ + +
Are you sure?
+ +
+ { + e.stopPropagation(); + handleClearConversations(); + }} + /> + + { + e.stopPropagation(); + setIsConfirming(false); + }} + /> +
+
+ ) : ( + } + onClick={() => setIsConfirming(true)} + /> + ); +}; diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx index 2ae3e33..493c5c3 100644 --- a/components/Sidebar/Sidebar.tsx +++ b/components/Sidebar/Sidebar.tsx @@ -18,9 +18,10 @@ interface Props { onToggleSidebar: () => void; onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void; onApiKeyChange: (apiKey: string) => void; + onClearConversations: () => void; } -export const Sidebar: FC = ({ loading, conversations, lightMode, selectedConversation, apiKey, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation, onToggleSidebar, onUpdateConversation, onApiKeyChange }) => { +export const Sidebar: FC = ({ loading, conversations, lightMode, selectedConversation, apiKey, onNewConversation, onToggleLightMode, onSelectConversation, onDeleteConversation, onToggleSidebar, onUpdateConversation, onApiKeyChange, onClearConversations }) => { const [searchTerm, setSearchTerm] = useState(""); const [filteredConversations, setFilteredConversations] = useState(conversations); @@ -85,6 +86,7 @@ export const Sidebar: FC = ({ loading, conversations, lightMode, selected apiKey={apiKey} onToggleLightMode={onToggleLightMode} onApiKeyChange={onApiKeyChange} + onClearConversations={onClearConversations} /> ); diff --git a/components/Sidebar/SidebarSettings.tsx b/components/Sidebar/SidebarSettings.tsx index a769223..4244235 100644 --- a/components/Sidebar/SidebarSettings.tsx +++ b/components/Sidebar/SidebarSettings.tsx @@ -1,5 +1,6 @@ import { IconMoon, IconSun } from "@tabler/icons-react"; import { FC } from "react"; +import { ClearConversations } from "./ClearConversations"; import { Key } from "./Key"; import { SidebarButton } from "./SidebarButton"; @@ -8,11 +9,14 @@ interface Props { apiKey: string; onToggleLightMode: (mode: "light" | "dark") => void; onApiKeyChange: (apiKey: string) => void; + onClearConversations: () => void; } -export const SidebarSettings: FC = ({ lightMode, apiKey, onToggleLightMode, onApiKeyChange }) => { +export const SidebarSettings: FC = ({ lightMode, apiKey, onToggleLightMode, onApiKeyChange, onClearConversations }) => { return (
+ + : } diff --git a/pages/index.tsx b/pages/index.tsx index 64c2ab7..5624d3f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -21,13 +21,6 @@ export default function Home() { const [messageError, setMessageError] = useState(false); const [modelError, setModelError] = useState(false); - // Close sidebar when a conversation is selected/created on mobile - useEffect(() => { - if (window.innerWidth < 640) { - setShowSidebar(false); - } - }, [selectedConversation]) - const handleSend = async (message: Message, isResend: boolean) => { if (selectedConversation) { let updatedConversation: Conversation; @@ -247,6 +240,26 @@ export default function Home() { setConversations(all); }; + const handleClearConversations = () => { + setConversations([]); + localStorage.removeItem("conversationHistory"); + + setSelectedConversation({ + id: 1, + name: "New conversation", + messages: [], + model: OpenAIModels[OpenAIModelID.GPT_3_5], + prompt: DEFAULT_SYSTEM_PROMPT + }); + localStorage.removeItem("selectedConversation"); + }; + + useEffect(() => { + if (window.innerWidth < 640) { + setShowSidebar(false); + } + }, [selectedConversation]); + useEffect(() => { const theme = localStorage.getItem("theme"); if (theme) { @@ -329,6 +342,7 @@ export default function Home() { onToggleSidebar={() => setShowSidebar(!showSidebar)} onUpdateConversation={handleUpdateConversation} onApiKeyChange={handleApiKeyChange} + onClearConversations={handleClearConversations} />