fix: handle api error

src/pages/playground/components/ground-embedding.tsx

@@ -29,6 +29,7 @@ import React, {
   useState
 } from 'react';
 import { EMBEDDING_API, handleEmbedding } from '../apis';
+import { extractErrorMessage } from '../config';
 import { LLM_METAKEYS } from '../hooks/config';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
 import '../style/ground-left.less';
@@ -250,7 +251,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     } catch (error: any) {
       setTokenResult({
         error: true,
-        errorMessage: error.response?.data?.error?.message
+        errorMessage: extractErrorMessage(error.response)
       });
     } finally {
       setLoading(false);

src/pages/playground/components/ground-reranker.tsx

@@ -23,6 +23,7 @@ import React, {
   useState
 } from 'react';
 import { rerankerQuery } from '../apis';
+import { extractErrorMessage } from '../config';
 import { ParamsSchema } from '../config/types';
 import { LLM_METAKEYS } from '../hooks/config';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
@@ -298,7 +299,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     } catch (error: any) {
       setTokenResult({
         error: true,
-        errorMessage: error.response?.data?.error?.message
+        errorMessage: extractErrorMessage(error.response)
       });
     } finally {
       setLoading(false);

src/pages/playground/components/ground-stt.tsx

@@ -14,7 +14,7 @@ import { useIntl, useSearchParams } from '@umijs/max';
 import { Button, Spin, Tooltip } from 'antd';
 import classNames from 'classnames';
 import 'overlayscrollbars/overlayscrollbars.css';
-import {
+import React, {
   forwardRef,
   useCallback,
   useEffect,
@@ -24,7 +24,7 @@ import {
   useState
 } from 'react';
 import { AUDIO_SPEECH_TO_TEXT_API, speechToText } from '../apis';
-import { SpeechToTextFormat } from '../config';
+import { SpeechToTextFormat, extractErrorMessage } from '../config';
 import { RealtimeParamsConfig as paramsConfig } from '../config/params-config';
 import '../style/ground-left.less';
 import '../style/speech-to-text.less';
@@ -140,12 +140,7 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
       ) {
         setTokenResult({
           error: true,
-          errorMessage:
-            result?.data?.error?.message ||
-            result?.error?.message ||
-            result?.data?.message ||
-            result?.detail ||
-            ''
+          errorMessage: extractErrorMessage(result)
         });
         return;
       }
@@ -161,12 +156,7 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
       if (res?.error || (res?.status_code && res?.status_code !== 200)) {
         setTokenResult({
           error: true,
-          errorMessage:
-            res?.error?.message ||
-            res?.data?.error?.message ||
-            res?.data?.error ||
-            res?.detail ||
-            ''
+          errorMessage: extractErrorMessage(res)
         });
       }
     } finally {

src/pages/playground/components/ground-tts.tsx

@@ -20,6 +20,7 @@ import React, {
   useState
 } from 'react';
 import { AUDIO_TEXT_TO_SPEECH_API, CHAT_API, textToSpeech } from '../apis';
+import { extractErrorMessage } from '../config';
 import { TTSParamsConfig as paramsConfig } from '../config/params-config';
 import { MessageItem, ParamsSchema } from '../config/types';
 import '../style/ground-left.less';
@@ -179,12 +180,7 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
       if ((res?.status_code && res?.status_code !== 200) || res?.error) {
         setTokenResult({
           error: true,
-          errorMessage:
-            res?.data?.error?.message ||
-            res?.error?.message ||
-            res?.data?.error ||
-            res?.detail ||
-            ''
+          errorMessage: extractErrorMessage(res)
         });
         setMessageList([]);
         return;
@@ -207,12 +203,7 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
       if (res?.error) {
         setTokenResult({
           error: true,
-          errorMessage:
-            res?.error?.message ||
-            res?.data?.error?.message ||
-            res?.data?.error ||
-            res?.detail ||
-            ''
+          errorMessage: extractErrorMessage(res)
         });
       }
     } finally {

src/pages/playground/config/index.ts

@@ -167,7 +167,13 @@ export const extractErrorMessage = (result: any) => {
     result?.data?.data?.message ||
     result?.data?.error?.message ||
     result?.data?.error ||
-    ''
+    result?.data?.detail ||
+    result?.data?.message ||
+    result?.error ||
+    result?.detail ||
+    result?.message ||
+    result?.error?.message ||
+    'Unknown error occurred'
   );
 };
 

src/pages/playground/hooks/use-chat-completion.ts

@@ -1,9 +1,9 @@
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import _ from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { CHAT_API } from '../apis';
-import { Roles, generateMessages } from '../config';
+import { Roles, extractErrorMessage, generateMessages } from '../config';
 import { MessageItem } from '../config/types';
 
 export default function useChatCompletion(
@@ -153,8 +153,7 @@ export default function useChatCompletion(
       if (result?.error) {
         setTokenResult({
           error: true,
-          errorMessage:
-            result?.data?.error?.message || result?.data?.message || ''
+          errorMessage: extractErrorMessage(result)
         });
         return;
       }
@@ -164,7 +163,7 @@ export default function useChatCompletion(
         if (chunk?.error) {
           setTokenResult({
             error: true,
-            errorMessage: chunk?.error?.message || chunk?.message || ''
+            errorMessage: extractErrorMessage(chunk)
           });
           return;
         }

src/pages/playground/hooks/use-text-image.ts

@@ -142,7 +142,7 @@ export default function useTextImage(props: any) {
         if (chunk?.error) {
           setTokenResult({
             error: true,
-            errorMessage: chunk?.error?.message || chunk?.message || ''
+            errorMessage: extractErrorMessage(chunk)
           });
           return;
         }

src/pages/playground/style/reference-params.less

@@ -8,6 +8,7 @@
 
   &.scaleable {
     gap: 15px;
+    overflow: hidden;
   }
 
   .usage {

src/utils/fetch-chunk-data.ts

@@ -27,7 +27,6 @@ const extractJSON = (dataStr: string) => {
 const errorHandler = async (res: any) => {
   try {
     const data = await res.json();
-    console.log('errorHandler:', data);
     return {
       error: true,
       data: data