From 75fb94ec68b4846fa5a9831c4c724550c1f058b1 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 13 Dec 2023 15:31:07 -0800
Subject: [PATCH] feat: show error message in chat

---
 src/lib/components/chat/Messages.svelte | 27 ++++++++++++++++++++++++-
 src/routes/(app)/+page.svelte           |  8 ++++++++
 src/routes/(app)/c/[id]/+page.svelte    |  8 ++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index aa7bde72..ad691bf1 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -655,7 +655,32 @@
 											</div>
 										{:else}
 											<div class="w-full">
-												{@html marked(message.content.replace('\\\\', '\\\\\\'))}
+												{#if message?.error === true}
+													<div
+														class="flex mt-2 mb-4 space-x-2 border px-4 py-3 border-red-800 bg-red-800/30 font-medium rounded-lg"
+													>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke-width="1.5"
+															stroke="currentColor"
+															class="w-5 h-5 self-center"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+															/>
+														</svg>
+
+														<div class=" self-center">
+															{message.content}
+														</div>
+													</div>
+												{:else}
+													{@html marked(message.content.replace('\\\\', '\\\\\\'))}
+												{/if}
 
 												{#if message.done}
 													<div class=" flex justify-start space-x-1 -mt-2">
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index f6bf0e35..44c92397 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -276,12 +276,20 @@
 				console.log(error);
 				if ('detail' in error) {
 					toast.error(error.detail);
+					responseMessage.content = error.detail;
 				} else {
 					toast.error(error.error);
+					responseMessage.content = error.error;
 				}
 			} else {
 				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
+				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
 			}
+
+			responseMessage.error = true;
+			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
+			responseMessage.done = true;
+			messages = messages;
 		}
 
 		stopResponseFlag = false;
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 3eec7a5e..c2685af5 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -303,12 +303,20 @@
 				console.log(error);
 				if ('detail' in error) {
 					toast.error(error.detail);
+					responseMessage.content = error.detail;
 				} else {
 					toast.error(error.error);
+					responseMessage.content = error.error;
 				}
 			} else {
 				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
+				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
 			}
+
+			responseMessage.error = true;
+			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
+			responseMessage.done = true;
+			messages = messages;
 		}
 
 		stopResponseFlag = false;