From 083bbf7d9f3262c4917292596af0cf8236868b62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aneta=20Jastrz=C4=99bska?=
 <1544710+anetaj@users.noreply.github.com>
Date: Sat, 21 Sep 2024 21:11:52 +0200
Subject: [PATCH] start new chat; toggle thread history

---
 extensions/void/src/sidebar/Sidebar.tsx       | 21 +++++++++++++++++--
 .../src/sidebar/components/ThreadHistory.tsx  |  6 +-----
 extensions/void/src/sidebar/context.tsx       |  5 ++++-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/extensions/void/src/sidebar/Sidebar.tsx b/extensions/void/src/sidebar/Sidebar.tsx
index 41b3836c..0f7de288 100644
--- a/extensions/void/src/sidebar/Sidebar.tsx
+++ b/extensions/void/src/sidebar/Sidebar.tsx
@@ -84,7 +84,13 @@ const useInstantState = <T,>(initVal: T) => {
 
 
 const Sidebar = () => {
-	const { chatMessageHistory, addMessageToHistory, setPreviousThreads, previousThreads } = useChat()
+	const {
+		chatMessageHistory,
+		addMessageToHistory,
+		setPreviousThreads,
+		previousThreads,
+		startNewChat,
+	} = useChat()
 
 	// state of current message
 	const [selection, setSelection] = useState<Selection | null>(null) // the code the user is selecting
@@ -94,6 +100,7 @@ const Sidebar = () => {
 	// state of chat
 	const [messageStream, setMessageStream] = useState('')
 	const [isLoading, setIsLoading] = useState(false)
+	const [showChatHistory, setShowChatHistory] = useState(false)
 
 	const abortFnRef = useRef<(() => void) | null>(null)
 
@@ -203,6 +210,17 @@ const Sidebar = () => {
 
 	return <>
 		<div className="flex flex-col h-screen w-full">
+			<div className="mb-2">
+				<div className="flex justify-end space-x-2">
+					<button className="btn btn-primary px-3 py-1 rounded" onClick={startNewChat}>New chat</button>
+					{!!previousThreads.length && (
+						<button className="btn btn-primary px-3 py-1 rounded" onClick={() => setShowChatHistory(!showChatHistory)}>
+							{showChatHistory ? 'Hide previous chats' : 'Previous chats'}
+						</button>
+					)}
+				</div>
+				{showChatHistory && <ThreadHistory threads={previousThreads} />}
+			</div>
 			<div className="overflow-y-auto overflow-x-hidden space-y-4">
 				{/* previous messages */}
 				{chatMessageHistory.map((message, i) =>
@@ -269,7 +287,6 @@ const Sidebar = () => {
 						}
 					</form>
 				</div>
-				{!!previousThreads.length && <ThreadHistory threads={previousThreads} />}
 			</div>
 		</div>
 
diff --git a/extensions/void/src/sidebar/components/ThreadHistory.tsx b/extensions/void/src/sidebar/components/ThreadHistory.tsx
index 609c1d5d..4e0d0300 100644
--- a/extensions/void/src/sidebar/components/ThreadHistory.tsx
+++ b/extensions/void/src/sidebar/components/ThreadHistory.tsx
@@ -2,11 +2,7 @@ import React from "react"
 import { ChatThread } from "../../shared_types"
 import { useChat } from "../context"
 
-const ThreadHistory = ({
-	threads,
-}: {
-	threads: ChatThread[]
-}) => {
+const ThreadHistory = ({ threads }: { threads: ChatThread[] }) => {
 	const { selectThread } = useChat()
 
 	return (
diff --git a/extensions/void/src/sidebar/context.tsx b/extensions/void/src/sidebar/context.tsx
index 39cd0586..6c2ab653 100644
--- a/extensions/void/src/sidebar/context.tsx
+++ b/extensions/void/src/sidebar/context.tsx
@@ -26,6 +26,7 @@ interface IChatProviderProps {
 	setPreviousThreads: (threads: any) => void
 	previousThreads: ChatThread[]
 	selectThread: (thread: ChatThread) => void
+	startNewChat: () => void
 }
 
 const defaults = {
@@ -36,6 +37,7 @@ const defaults = {
 	thread: createEmptyThread(),
 	previousThreads: [],
 	selectThread: () => {},
+	startNewChat: () => {},
 }
 
 const ChatContext = createContext<IChatProviderProps>(defaults)
@@ -59,7 +61,7 @@ function ChatProvider({ children }: { children: ReactNode }) {
 	const addMessageToHistory = (message: ChatMessage) => {
 		setThread((prev) => ({
 			...prev,
-			// if there is no thread, create a new one with current timestamp
+			// replace placeholder thread with new thread if it's the first message
 			...(!thread.id && createNewThread()),
 			messages: [...prev.messages, message],
 		}))
@@ -81,6 +83,7 @@ function ChatProvider({ children }: { children: ReactNode }) {
 				setPreviousThreads: handleReceiveThreadHistory,
 				previousThreads,
 				selectThread: setThread,
+				startNewChat: () => setThread(createNewThread()),
 			}}
 		>
 			{children}