fix: chat error message

src/components/auto-tooltip/index.tsx

@@ -32,7 +32,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
       const { scrollWidth, clientWidth } = contentRef.current;
       setIsOverflowing(scrollWidth > clientWidth);
     }
-  }, []);
+  }, [contentRef.current]);
 
   const debouncedCheckOverflow = useMemo(
     () => debounce(checkOverflow, 200),

src/components/seal-table/styles/cell.less

@@ -6,6 +6,10 @@
   justify-content: flex-start;
   height: 68px;
 
+  .cell-content {
+    max-width: 100%;
+  }
+
   &-left {
     justify-content: flex-start;
   }

src/pages/llmodels/components/hf-model-file.tsx

@@ -139,7 +139,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
       });
 
       const list = _.filter(fileList, (file: any) => {
-        return filterReg.test(file.path) || _.includes(includeReg, file.path);
+        return filterRegGGUF.test(file.path) || _.includes(file.path, '.gguf');
       });
 
       return list;
@@ -160,9 +160,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
         }
       );
       const fileList = _.filter(_.get(data, ['Data', 'Files']), (file: any) => {
-        return (
-          filterRegGGUF.test(file.Path) || _.includes(filterRegGGUF, file.Path)
-        );
+        return filterRegGGUF.test(file.Path) || _.includes(file.Path, '.gguf');
       });
 
       const list = _.map(fileList, (item: any) => {

src/pages/llmodels/components/table-list.tsx

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
 import IconFont from '@/components/icon-font';
@@ -518,8 +519,10 @@ const Models: React.FC<ModelsProps> = ({
             span={5}
             render={(text, record: ListItem) => {
               return (
-                <span>
-                  <span className="m-r-5">{text}</span>
+                <span className="flex" style={{ maxWidth: '100%' }}>
+                  <AutoTooltip className="m-r-5" showTitle={true} ghost>
+                    {text}
+                  </AutoTooltip>
                   <span>
                     {record.embedding_only && (
                       <Tag style={{ marginTop: 6 }} color="geekblue">

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">

src/pages/playground/style/multiple-chat.less

@@ -6,7 +6,6 @@
   .chat-list {
     flex: 1;
     overflow-y: auto;
-    padding-bottom: 16px;
     padding-inline: var(--layout-content-inlinepadding);
   }
 

src/utils/fetch-chunk-data.ts

@@ -47,8 +47,10 @@ export const fetchChunkedData = async (params: {
     }
   });
   if (!response.ok) {
-    throw new Error('Network response was not ok');
-    return null;
+    return {
+      error: true,
+      data: await response.json()
+    };
   }
   const reader = response?.body?.getReader();
   const decoder = new TextDecoder('utf-8');