From 0f3a79ab540855aa4c702ae366f777343fec600f Mon Sep 17 00:00:00 2001
From: Andrew <andrewpareles@gmail.com>
Date: Thu, 17 Oct 2024 16:43:25 -0700
Subject: [PATCH] error UI

---
 extensions/void/src/common/sendLLMMessage.ts |  4 +--
 extensions/void/src/sidebar/SidebarChat.tsx  | 27 +++++++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/extensions/void/src/common/sendLLMMessage.ts b/extensions/void/src/common/sendLLMMessage.ts
index a0ab0df3..b5005de0 100644
--- a/extensions/void/src/common/sendLLMMessage.ts
+++ b/extensions/void/src/common/sendLLMMessage.ts
@@ -68,7 +68,7 @@ const sendAnthropicMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFi
 	stream.on('error', (error) => {
 		// the most common error will be invalid API key (401), so we handle this with a nice message
 		if (error instanceof Anthropic.APIError && error.status === 401) {
-			onError('Invalid API key.')
+			onError('Unauthorized: Invalid API key.')
 		}
 		else {
 			onError(error.message)
@@ -145,7 +145,7 @@ const sendOpenAIMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinal
 		.catch(error => {
 			if (error instanceof OpenAI.APIError) {
 				if (error.status === 401) {
-					onError('Invalid API key.');
+					onError('Unauthorized: Invalid API key.');
 				}
 				else {
 					onError(error.message);
diff --git a/extensions/void/src/sidebar/SidebarChat.tsx b/extensions/void/src/sidebar/SidebarChat.tsx
index 554e3bd2..87c361d4 100644
--- a/extensions/void/src/sidebar/SidebarChat.tsx
+++ b/extensions/void/src/sidebar/SidebarChat.tsx
@@ -50,7 +50,7 @@ Please edit the file following these instructions:
 Please edit the selected code following these instructions:
 `;
 	}
-	
+
 	str += `
 \t${instructions}
 `;
@@ -106,6 +106,8 @@ export const SidebarChat = () => {
 	const [isLoading, setIsLoading] = useState(false)
 	const abortFnRef = useRef<(() => void) | null>(null)
 
+	const [latestError, setLatestError] = useState('')
+
 	// higher level state
 	const { allThreads, currentThread, addMessageToHistory, startNewThread, switchToThread } = useThreads()
 	const { voidConfig } = useVoidConfig()
@@ -142,33 +144,42 @@ export const SidebarChat = () => {
 
 		setIsLoading(true)
 		setInstructions('');
-		formRef.current?.reset(); // reset the form's text
+		formRef.current?.reset(); // reset the form's text when clear instructions or unexpected behavior happens
 		setSelection(null)
 		setFiles([])
+		setLatestError('')
 
 		// request file content from vscode and await response
 		getVSCodeAPI().postMessage({ type: 'requestFiles', filepaths: files })
 		const relevantFiles = await awaitVSCodeResponse('files')
 
 		// add message to chat history
-		const content = userInstructionsStr(instructions, relevantFiles.files, selection)
+		const userContent = userInstructionsStr(instructions, relevantFiles.files, selection)
 		// console.log('prompt:\n', content)
-		const newHistoryElt: ChatMessage = { role: 'user', content, displayContent: instructions, selection, files }
+		const newHistoryElt: ChatMessage = { role: 'user', content: userContent, displayContent: instructions, selection, files }
 		addMessageToHistory(newHistoryElt)
 
 		// send message to LLM
 		let { abort } = sendLLMMessage({
-			messages: [...(currentThread?.messages ?? []).map(m => ({ role: m.role, content: m.content })), { role: 'user', content }],
+			messages: [...(currentThread?.messages ?? []).map(m => ({ role: m.role, content: m.content })), { role: 'user', content: userContent }],
 			onText: (newText, fullText) => setMessageStream(fullText),
 			onFinalMessage: (content) => {
 				// add assistant's message to chat history, and clear selection
 				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
 				addMessageToHistory(newHistoryElt)
-
-				// clear selection
 				setMessageStream('')
 				setIsLoading(false)
 			},
+			onError: (error) => {
+				// add assistant's message to chat history, and clear selection
+				let content = messageStream; // just use the current content
+				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
+				addMessageToHistory(newHistoryElt)
+				setMessageStream('')
+				setIsLoading(false)
+
+				setLatestError(error)
+			},
 			voidConfig: voidConfig
 		})
 		abortFnRef.current = abort
@@ -268,6 +279,8 @@ export const SidebarChat = () => {
 					</div>
 				</div>
 			</div>
+
+			{latestError}
 		</div>
 	</>
 }