fix: openai error handling

backend/open_webui/utils/middleware.py

@@ -1255,9 +1255,16 @@ async def process_chat_response(
     if not isinstance(response, StreamingResponse):
         if event_emitter:
             if isinstance(response, dict) or isinstance(response, JSONResponse):
-                response_data = (
-                    response if isinstance(response, dict) else response.content
-                )
+
+                if isinstance(response, JSONResponse) and isinstance(
+                    response.body, bytes
+                ):
+                    try:
+                        response_data = json.loads(response.body.decode("utf-8"))
+                    except json.JSONDecodeError:
+                        response_data = {"error": {"detail": "Invalid JSON response"}}
+                else:
+                    response_data = response
 
                 if "error" in response_data:
                     error = response_data["error"].get("detail", response_data["error"])

src/lib/apis/openai/index.ts

@@ -379,7 +379,7 @@ export const generateOpenAIChatCompletion = async (
 			return res.json();
 		})
 		.catch((err) => {
-			error = `${err?.detail ?? err}`;
+			error = err?.detail ?? err;
 			return null;
 		});
 

src/lib/components/chat/Chat.svelte

@@ -1783,11 +1783,20 @@
 			},
 			`${WEBUI_BASE_URL}/api`
 		).catch(async (error) => {
-			toast.error(`${error}`);
+			console.log(error);
+
+			let errorMessage = $i18n.t(`Uh-oh! There was an issue with the response.`);
+			if (error?.error?.message) {
+				errorMessage = error.error.message;
+			} else if (error?.message) {
+				errorMessage = error.message;
+			}
 
+			toast.error(`${errorMessage}`);
 			responseMessage.error = {
 				content: error
 			};
+
 			responseMessage.done = true;
 
 			history.messages[responseMessageId] = responseMessage;

src/lib/components/chat/Messages/Error.svelte

@@ -10,6 +10,20 @@
 	</div>
 
 	<div class=" self-center text-sm">
-		{typeof content === 'string' ? content : JSON.stringify(content)}
+		{#if typeof content === 'string'}
+			{content}
+		{:else if typeof content === 'object' && content !== null}
+			{#if content?.error && content?.error?.message}
+				{content.error.message}
+			{:else if content?.detail}
+				{content.detail}
+			{:else if content?.message}
+				{content.message}
+			{:else}
+				{JSON.stringify(content)}
+			{/if}
+		{:else}
+			{JSON.stringify(content)}
+		{/if}
 	</div>
 </div>