fix: #289 #367 #353 #369 provide more error message info

app/api/chat-stream/route.ts

@@ -8,6 +8,15 @@ async function createStream(req: NextRequest) {
 
   const res = await requestOpenai(req);
 
+  const contentType = res.headers.get("Content-Type") ?? "";
+  if (!contentType.includes("stream")) {
+    const content = await (
+      await res.text()
+    ).replace(/provided:.*. You/, "provided: ***. You");
+    console.log("[Stream] error ", content);
+    return "```json\n" + content + "```";
+  }
+
   const stream = new ReadableStream({
     async start(controller) {
       function onParse(event: any) {

app/components/chat.tsx

@@ -525,6 +525,8 @@ export function Chat(props: {
         className={styles["chat-body"]}
         ref={scrollRef}
         onScroll={(e) => onChatBodyScroll(e.currentTarget)}
+        onMouseOver={() => inputRef.current?.blur()}
+        onTouchStart={() => inputRef.current?.blur()}
       >
         {messages.map((message, i) => {
           const isUser = message.role === "user";
@@ -545,11 +547,7 @@ export function Chat(props: {
                     {Locale.Chat.Typing}
                   </div>
                 )}
-                <div
+                <div className={styles["chat-message-item"]}>
-                  className={styles["chat-message-item"]}
-                  onMouseOver={() => inputRef.current?.blur()}
-                  onTouchStart={() => inputRef.current?.blur()}
-                >
                   {!isUser &&
                     !(message.preview || message.content.length === 0) && (
                       <div className={styles["chat-message-top-actions"]}>

app/components/markdown.tsx

@@ -59,7 +59,7 @@ export function Markdown(props: { content: string }) {
         [
           RehypeHighlight,
           {
-            detect: true,
+            detect: false,
             ignoreMissing: true,
           },
         ],

app/components/ui-lib.module.scss

@@ -128,6 +128,8 @@
   justify-content: center;
 
   .toast-content {
+    max-width: 80vw;
+    word-break: break-all;
     font-size: 14px;
     background-color: var(--white);
     box-shadow: var(--card-shadow);

app/requests.ts

@@ -1,6 +1,7 @@
 import type { ChatRequest, ChatReponse } from "./api/openai/typing";
 import { filterConfig, Message, ModelConfig, useAccessStore } from "./store";
 import Locale from "./locales";
+import { showToast } from "./components/ui-lib";
 
 const TIME_OUT_MS = 30000;
 
@@ -87,8 +88,17 @@ export async function requestUsage() {
   try {
     const response = (await res.json()) as {
       total_usage: number;
+      error?: {
+        type: string;
+        message: string;
+      };
     };
 
+    if (response.error && response.error.type) {
+      showToast(response.error.message);
+      return;
+    }
+
     if (response.total_usage) {
       response.total_usage = Math.round(response.total_usage) / 100;
     }