fix: chat error message

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

@@ -172,13 +172,17 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         ...parameters,
         stream: true
       };
-      const result = await fetchChunkedData({
+      const result: any = await fetchChunkedData({
         data: chatParams,
         url: CHAT_API,
         signal
       });
 
-      if (!result) {
+      if (result?.error) {
+        setTokenResult({
+          error: true,
+          errorMessage: result?.data?.message
+        });
         return;
       }
       setMessageId();
@@ -186,10 +190,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       await readStreamData(reader, decoder, (chunk: any) => {
         joinMessage(chunk);
       });
-      setLoading(false);
     } catch (error) {
-      console.log('error=====', error);
-
+      // console.log('error:', error);
+    } finally {
       setLoading(false);
     }
   };

src/pages/playground/components/multiple-chat/active-models.tsx

@@ -15,9 +15,15 @@ interface ActiveModelsProps {
 const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
   const { spans, modelSelections, setModelRefs } = props;
   return (
-    <Row gutter={[16, 16]} style={{ height: '100%' }}>
+    <Row gutter={[16, 0]} style={{ height: '100%' }}>
       {modelSelections.map((model, index) => (
-        <Col span={spans.span} key={`${model.value || 'empty'}-${model.uid}`}>
+        <Col
+          span={spans.span}
+          key={`${model.value || 'empty'}-${model.uid}`}
+          style={{
+            height: spans.count < 4 ? 'calc(100% - 16px)' : 'calc(50% - 16px)'
+          }}
+        >
           <ModelItem
             key={`${model.value || 'empty'}-${model.uid}`}
             ref={(el: React.MutableRefObject<any>) =>

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -65,7 +65,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     const currentMessageRef = useRef<MessageItem[]>([]);
     const modelScrollRef = useRef<any>(null);
 
-    const { initialize } = useOverlayScroller();
+    const { initialize, updateScrollerPosition } = useOverlayScroller();
 
     const setMessageId = () => {
       messageId.current = messageId.current + 1;
@@ -180,13 +180,17 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
           stream: true
         };
         // ============== payload end ================
-        const result = await fetchChunkedData({
+        const result: any = await fetchChunkedData({
           data: chatParams,
           url: CHAT_API,
           signal
         });
 
-        if (!result) {
+        if (result?.error) {
+          setTokenResult({
+            error: true,
+            errorMessage: result?.data?.message
+          });
           return;
         }
         setMessageId();
@@ -194,8 +198,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         await readStreamData(reader, decoder, (chunk: any) => {
           joinMessage(chunk);
         });
-        setLoadingStatus(instanceId, false);
       } catch (error) {
+        // console.log('error:', error);
+      } finally {
         setLoadingStatus(instanceId, false);
       }
     };
@@ -338,6 +343,10 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       }
     }, [modelScrollRef.current, initialize]);
 
+    useEffect(() => {
+      updateScrollerPosition();
+    }, [messageList]);
+
     useImperativeHandle(ref, () => {
       return {
         submit: handleSubmit,
@@ -415,11 +424,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
           applyToAll={handleApplySystemChangeToAll}
           setSystemMessage={setSystemMessage}
         ></SystemMessage>
-        <div
-          className="content"
-          ref={modelScrollRef}
-          style={{ maxHeight: maxHeight }}
-        >
+        <div className="content" ref={modelScrollRef}>
           <div>
             <MessageContent
               spans={spans}

src/pages/playground/components/reference-params.tsx

@@ -1,10 +1,13 @@
+import { WarningOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Space, Tooltip } from 'antd';
+import { Alert, Space, Tooltip } from 'antd';
 import _ from 'lodash';
 import '../style/reference-params.less';
 
 interface ReferenceParamsProps {
   usage: {
+    error?: boolean;
+    errorMessage?: string;
     completion_tokens: number;
     prompt_tokens: number;
     total_tokens: number;
@@ -17,10 +20,25 @@ interface ReferenceParamsProps {
 const ReferenceParams = (props: ReferenceParamsProps) => {
   const intl = useIntl();
   const { usage } = props;
-  if (!usage) {
+  if (!usage || _.isEmpty(usage)) {
     return null;
   }
-  console.log('ReferenceParams usage:', usage);
+  if (usage.error) {
+    return (
+      <Alert
+        type="error"
+        style={{ textAlign: 'center', paddingBlock: 0 }}
+        message={
+          <span style={{ color: 'var(--ant-color-error)' }}>
+            <WarningOutlined className="m-r-8" />
+            {usage?.errorMessage}
+          </span>
+        }
+        banner
+        showIcon={false}
+      />
+    );
+  }
   return (
     <div className="reference-params">
       <span className="usage">