From ff0dcd5095462ac5a482d9370287b728ad1f9ee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aneta=20Jastrz=C4=99bska?=
 <1544710+anetaj@users.noreply.github.com>
Date: Sun, 22 Sep 2024 11:04:28 +0200
Subject: [PATCH] handle show thread history

---
 extensions/void/src/sidebar/Sidebar.tsx       | 34 +++++++++--------
 .../src/sidebar/components/ThreadHistory.tsx  | 38 ++++++++++++++-----
 extensions/void/src/sidebar/context.tsx       | 13 +++----
 extensions/void/src/sidebar/getVscodeApi.ts   |  2 +
 4 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/extensions/void/src/sidebar/Sidebar.tsx b/extensions/void/src/sidebar/Sidebar.tsx
index df543a0c..c36d3e88 100644
--- a/extensions/void/src/sidebar/Sidebar.tsx
+++ b/extensions/void/src/sidebar/Sidebar.tsx
@@ -85,10 +85,9 @@ const useInstantState = <T,>(initVal: T) => {
 
 const Sidebar = () => {
 	const {
-		chatMessageHistory,
+		thread,
 		addMessageToHistory,
 		setPreviousThreads,
-		previousThreads,
 		startNewChat,
 	} = useChat()
 
@@ -141,10 +140,21 @@ const Sidebar = () => {
 				setPreviousThreads(m.threads)
 			}
 
+			// top navigation bar command - new chat
+			else if (m.type === 'startNewChat') {
+				setShowThreadsHistory(false)
+				startNewChat()
+			}
+
+			// top navigation bar command - new chat
+			else if (m.type === 'showPreviousChats') {
+				setShowThreadsHistory(true)
+			}
+
 		}
 		window.addEventListener('message', listener);
 		return () => { window.removeEventListener('message', listener) }
-	}, [files, selection, setPreviousThreads])
+	}, [files, selection, setPreviousThreads, startNewChat])
 
 
 	const formRef = useRef<HTMLFormElement | null>(null)
@@ -171,7 +181,7 @@ const Sidebar = () => {
 
 		// send message to claude
 		let { abort } = sendLLMMessage({
-			messages: [...chatMessageHistory.map(m => ({ role: m.role, content: m.content })), { role: 'user', content }],
+			messages: [...thread.messages.map(m => ({ role: m.role, content: m.content })), { role: 'user', content }],
 			onText: (newText, fullText) => setMessageStream(fullText),
 			onFinalMessage: (content) => {
 
@@ -210,20 +220,14 @@ const Sidebar = () => {
 
 	return <>
 		<div className="flex flex-col h-screen w-full">
-			<div className="mb-2">
-				<div className="flex justify-end space-x-2">
-					{!!chatMessageHistory.length && <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={() => setShowThreadsHistory(!showThreadsHistory)}>
-							{showThreadsHistory ? 'Hide previous chats' : 'Previous chats'}
-						</button>
-					)}
+			{showThreadsHistory && (
+				<div className="mb-2 max-h-[30vh] overflow-y-auto">
+					<ThreadHistory onClose={() => setShowThreadsHistory(false)} />
 				</div>
-				{showThreadsHistory && <ThreadHistory threads={previousThreads} />}
-			</div>
+			)}
 			<div className="overflow-y-auto overflow-x-hidden space-y-4">
 				{/* previous messages */}
-				{chatMessageHistory.map((message, i) =>
+				{thread.messages.map((message, i) =>
 					<ChatBubble key={i} chatMessage={message} />
 				)}
 				{/* message stream */}
diff --git a/extensions/void/src/sidebar/components/ThreadHistory.tsx b/extensions/void/src/sidebar/components/ThreadHistory.tsx
index 4e0d0300..0994ae22 100644
--- a/extensions/void/src/sidebar/components/ThreadHistory.tsx
+++ b/extensions/void/src/sidebar/components/ThreadHistory.tsx
@@ -1,19 +1,39 @@
 import React from "react"
-import { ChatThread } from "../../shared_types"
 import { useChat } from "../context"
+import { classNames } from "../utils"
 
-const ThreadHistory = ({ threads }: { threads: ChatThread[] }) => {
-	const { selectThread } = useChat()
+const ThreadHistory = ({ onClose }: { onClose: () => void }) => {
+	const { selectThread, previousThreads, thread } = useChat()
 
 	return (
-		<div className="flex flex-col space-y-1 mt-2">
-			{threads.map((thread) => (
+		<div className="flex flex-col space-y-1">
+			<div className="text-right">
+				<button className="btn btn-sm" onClick={onClose}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						className="size-4"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M6 18 18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+			{previousThreads.map((prevThread) => (
 				<button
-					key={thread.id}
-					className="btn btn-secondary btn-sm"
-					onClick={() => selectThread(thread)}
+					key={prevThread.id}
+					className={classNames(
+						"btn btn-sm btn-secondary",
+						prevThread.id === thread.id && "btn-primary"
+					)}
+					onClick={() => selectThread(prevThread)}
 				>
-					{new Date(thread.createdAt).toLocaleString()}
+					{new Date(prevThread.createdAt).toLocaleString()}
 				</button>
 			))}
 		</div>
diff --git a/extensions/void/src/sidebar/context.tsx b/extensions/void/src/sidebar/context.tsx
index 6c2ab653..c294423d 100644
--- a/extensions/void/src/sidebar/context.tsx
+++ b/extensions/void/src/sidebar/context.tsx
@@ -9,9 +9,9 @@ import { ChatMessage, ChatThread } from "../shared_types"
 import { getVSCodeAPI } from "./getVscodeApi"
 
 const createEmptyThread = () => ({
-    id: "",
-    createdAt: "",
-    messages: [],
+	id: "",
+	createdAt: "",
+	messages: [],
 })
 
 const createNewThread = () => ({
@@ -21,7 +21,7 @@ const createNewThread = () => ({
 })
 
 interface IChatProviderProps {
-	chatMessageHistory: ChatMessage[]
+	thread: ChatThread
 	addMessageToHistory: (message: ChatMessage) => void
 	setPreviousThreads: (threads: any) => void
 	previousThreads: ChatThread[]
@@ -30,10 +30,9 @@ interface IChatProviderProps {
 }
 
 const defaults = {
-	chatMessageHistory: [],
 	addMessageToHistory: () => {},
 	setPreviousThreads: () => {},
-    // placeholder for thread until first message is sent so that createdAt date is accurate
+	// placeholder for thread until first message is sent so that createdAt date is accurate
 	thread: createEmptyThread(),
 	previousThreads: [],
 	selectThread: () => {},
@@ -78,7 +77,7 @@ function ChatProvider({ children }: { children: ReactNode }) {
 	return (
 		<ChatContext.Provider
 			value={{
-				chatMessageHistory: thread.messages,
+				thread,
 				addMessageToHistory,
 				setPreviousThreads: handleReceiveThreadHistory,
 				previousThreads,
diff --git a/extensions/void/src/sidebar/getVscodeApi.ts b/extensions/void/src/sidebar/getVscodeApi.ts
index 126207c7..acd1a2ff 100644
--- a/extensions/void/src/sidebar/getVscodeApi.ts
+++ b/extensions/void/src/sidebar/getVscodeApi.ts
@@ -13,6 +13,8 @@ const awaiting: { [c in Command]: ((res: any) => void)[] } = {
 	"getThreadHistory": [],
 	"threadHistory": [],
 	"updateThread": [],
+	"startNewChat": [],
+	"showPreviousChats": [],
 }
 
 // use this function to await responses