From bc58e5a10fae8cc97b8321c4479673bebb1c3439 Mon Sep 17 00:00:00 2001
From: Kevin Wang <kwangsan@gmail.com>
Date: Wed, 18 Oct 2023 15:42:37 -0400
Subject: [PATCH] feat: better chat error messages (#2187)

* feat: better chat error messages

* update comment

* don't submit if whitespace only

---------

Co-authored-by: Kendall Strautman Swarthout <36613477+kendallstrautman@users.noreply.github.com>
Co-authored-by: Kendall Strautman <kendallstrautman@gmail.com>
---
 src/components/chatbox/chatbox.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/chatbox/chatbox.tsx b/src/components/chatbox/chatbox.tsx
index 8fd2d76841..72052536ff 100644
--- a/src/components/chatbox/chatbox.tsx
+++ b/src/components/chatbox/chatbox.tsx
@@ -69,10 +69,24 @@ const useAI = () => {
 		},
 		onError: async (error) => {
 			switch (error.status) {
-				case 400:
+				// Check the backend for full validation messages
+				// https://github.com/hashicorp/experimental-chat-api/blob/main/apps/api/controllers/conversations.controller.ts
+				case 400: {
+					const { meta, errors } = await error.json()
+					const { status_code, status_text } = meta
+					setErrorText(
+						`${status_code} ${status_text} - ${errors[0].msg.replace(
+							'Task ',
+							''
+						)}`
+					)
+					break
+				}
 				case 401:
 				case 403: {
-					setErrorText(`${error.status} ${error.statusText}`)
+					const { meta, errors } = await error.json()
+					const { status_code, status_text } = meta
+					setErrorText(`${status_code} ${status_text}`)
 					break
 				}
 				case 429: {
@@ -260,6 +274,8 @@ const ChatBox = () => {
 		})
 	}
 
+	console.log({ userInput }, userInput.trim())
+
 	// update component state when text is streamed in from the backend
 	useEffect(() => {
 		if (!streamedText || !messageId || !conversationId) {
@@ -371,7 +387,7 @@ const ChatBox = () => {
 							onKeyDown={(e) => {
 								// enter submits form; // shift+enter adds a newline
 								if (e.key == 'Enter' && e.shiftKey == false) {
-									if (userInput) {
+									if (userInput.trim().length > 0) {
 										e.preventDefault()
 										formRef.current.requestSubmit()
 									}
@@ -396,7 +412,7 @@ const ChatBox = () => {
 								/>
 							) : (
 								<Button
-									disabled={userInput.length < 1}
+									disabled={userInput.trim().length < 1}
 									type={'submit'}
 									icon={<IconSend24 height={16} width={16} />}
 									text={'Send'}