fix(style): markdown viewer text-intent

config/config.ts

@@ -14,7 +14,7 @@ const isProduction = env === 'production';
 const t = Date.now();
 export default defineConfig({
   proxy: {
-    ...proxy()
+    ...proxy('http://192.168.50.166:8080')
   },
   history: {
     type: 'hash'

src/assets/styles/common.less

@@ -93,6 +93,10 @@
   align-items: center;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .flex-gap-2 {
   display: flex;
   gap: 2px;

src/components/markdown-viewer/index.less

@@ -1,6 +1,5 @@
 .markdown-viewer {
   font-family: var(--font-family) !important;
-  white-space: pre-wrap;
 
   .hr {
     border: none;

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

@@ -6,6 +6,8 @@
   justify-content: flex-start;
   height: 68px;
   word-break: break-word;
+  min-width: 20px;
+  overflow: hidden;
 
   .cell-content {
     max-width: 100%;

src/hooks/use-update-chunk-list.ts

@@ -1,5 +1,4 @@
 import { WatchEventType } from '@/config';
-import _ from 'lodash';
 import { useEffect, useRef } from 'react';
 
 interface ChunkedCollection {
@@ -19,6 +18,7 @@ export function useUpdateChunkedList(options: {
 }) {
   const cacheDataListRef = useRef<any[]>(options.dataList || []);
   const timerRef = useRef<any>(null);
+  const countRef = useRef<number>(0);
 
   useEffect(() => {
     cacheDataListRef.current = [...(options.dataList || [])];
@@ -30,74 +30,71 @@ export function useUpdateChunkedList(options: {
       options.setDataList?.([...cacheDataListRef.current]);
     }, 80);
   };
-  const updateChunkedList = (
-    data: ChunkedCollection,
-    dataList?: { id: string | number }[]
-  ) => {
+  const updateChunkedList = (data: ChunkedCollection) => {
     console.log('updateChunkedList=====', {
       ids: data?.ids,
       type: data?.type,
-      collection: data?.collection.length,
-      dataList: _.map(dataList, (o: any) => o.id)
+      collection: data?.collection
     });
     let collections = data?.collection || [];
     if (options?.computedID) {
-      collections = _.map(collections, (item: any) => {
+      collections = collections?.map((item: any) => {
         item.id = options?.computedID?.(item);
         return item;
       });
     }
     if (options?.filterFun) {
-      collections = _.filter(data?.collection, options?.filterFun);
+      collections = data?.collection?.filter(options?.filterFun);
     }
     if (options?.mapFun) {
-      collections = _.map(data?.collection, options?.mapFun);
+      collections = data?.collection?.map(options?.mapFun);
     }
     const ids = data?.ids || [];
     // CREATE
     if (data?.type === WatchEventType.CREATE) {
-      const newDataList: any[] = [];
-      _.each(collections, (item: any) => {
-        const updateIndex = _.findIndex(
-          cacheDataListRef.current,
+      const newDataList = collections.reduce((acc: any[], item: any) => {
+        const updateIndex = cacheDataListRef.current?.findIndex(
           (sItem: any) => sItem.id === item.id
         );
+        const updateItem = { ...item };
         if (updateIndex === -1) {
-          const updateItem = _.cloneDeep(item);
-          newDataList.push(updateItem);
+          acc.push(updateItem);
+        } else {
+          cacheDataListRef.current[updateIndex] = updateItem;
         }
-        console.log('create=========', updateIndex, collections);
-      });
-      cacheDataListRef.current = [...newDataList, ...cacheDataListRef.current];
-      // options.setDataList?.([...cacheDataListRef.current]);
+
+        return acc;
+      }, []);
+      cacheDataListRef.current = [
+        ...newDataList,
+        ...cacheDataListRef.current
+      ].slice(0, 10);
     }
     // DELETE
     if (data?.type === WatchEventType.DELETE) {
-      cacheDataListRef.current = _.filter(
-        cacheDataListRef.current,
+      cacheDataListRef.current = cacheDataListRef.current?.filter(
         (item: any) => {
-          return !_.includes(ids, item.id);
+          return !ids?.includes(item.id);
         }
       );
       options.setDataList?.([...cacheDataListRef.current]);
     }
     // UPDATE
     if (data?.type === WatchEventType.UPDATE) {
-      _.each(collections, (item: any) => {
-        const updateIndex = _.findIndex(
-          cacheDataListRef.current,
+      collections?.forEach((item: any) => {
+        const updateIndex = cacheDataListRef.current?.findIndex(
           (sItem: any) => sItem.id === item.id
         );
+        const updateItem = { ...item };
         if (updateIndex > -1) {
-          const updateItem = _.cloneDeep(item);
           cacheDataListRef.current[updateIndex] = updateItem;
         } else if (updateIndex === -1) {
-          const updateItem = _.cloneDeep(item);
-          cacheDataListRef.current.push(updateItem);
+          cacheDataListRef.current = [
+            updateItem,
+            ...cacheDataListRef.current.slice(0, 9)
+          ];
         }
       });
-      console.log('updateChunkedList=====update', cacheDataListRef.current);
-      // options.setDataList?.([...cacheDataListRef.current]);
     }
 
     debounceUpdateChunckedList();

src/locales/en-US/playground.ts

@@ -46,5 +46,5 @@ export default {
   'playground.compare.applytoall': 'Apply to all models',
   'playground.model.noavailable': 'No available models.',
   'playground.model.noavailable.tips':
-    'Please deploy a model first, and it is not an Embedding Only model.'
+    'Please deploy a model first, and it should not be an embedding-only model.'
 };

src/locales/zh-CN/playground.ts

@@ -46,5 +46,5 @@ export default {
   'playground.compare.applytoall': '应用到所有模型',
   'playground.model.noavailable': '无可用模型',
   'playground.model.noavailable.tips':
-    '请先部署模型，且不是 Embedding Only 模型'
+    '请先部署模型，且不是 Embedding Only 的模型'
 };

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

@@ -519,17 +519,20 @@ const Models: React.FC<ModelsProps> = ({
             span={5}
             render={(text, record: ListItem) => {
               return (
-                <span className="flex-center" style={{ maxWidth: '100%' }}>
-                  <AutoTooltip className="m-r-5" ghost>
-                    {text}
+                <span
+                  className="flex-center flex-wrap"
+                  style={{ maxWidth: '100%' }}
+                >
+                  <AutoTooltip ghost>
+                    <span className="m-r-5">{text}</span>
                   </AutoTooltip>
-                  <span>
-                    {record.embedding_only && (
-                      <Tag style={{ marginTop: 6 }} color="geekblue">
+                  {record.embedding_only && (
+                    <span>
+                      <Tag style={{ margin: 0 }} color="geekblue">
                         Embedding Only
                       </Tag>
-                    )}
-                  </span>
+                    </span>
+                  )}
                 </span>
               );
             }}

src/pages/playground/components/message-input.tsx

@@ -1,12 +1,7 @@
 import IconFont from '@/components/icon-font';
 import HotKeys, { KeyMap } from '@/config/hotkeys';
 import { platformCall } from '@/utils';
-import {
-  ClearOutlined,
-  ControlOutlined,
-  SendOutlined,
-  SwapOutlined
-} from '@ant-design/icons';
+import { ClearOutlined, SendOutlined, SwapOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Divider, Input, Select, Tooltip } from 'antd';
 import _ from 'lodash';
@@ -351,7 +346,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
             ></Button>
           </Tooltip>
 
-          <Tooltip
+          {/* <Tooltip
             title={intl.formatMessage({ id: 'playground.toolbar.prompts' })}
           >
             <Button
@@ -360,7 +355,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
               size="middle"
               onClick={handleOpenPrompt}
             ></Button>
-          </Tooltip>
+          </Tooltip> */}
           {updateLayout && (
             <>
               <Divider type="vertical" style={{ margin: 0 }} />

src/pages/playground/components/prompt-modal.tsx

@@ -1,7 +1,7 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { useIntl } from '@umijs/max';
 import { Button, Modal, Typography } from 'antd';
 import React from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import promptList from '../config/prompt';
 import '../style/prompt-modal.less';
@@ -15,6 +15,15 @@ type ViewModalProps = {
 const AddWorker: React.FC<ViewModalProps> = (props) => {
   const { open, onCancel } = props || {};
   const intl = useIntl();
+  const { initialize } = useOverlayScroller();
+  const scrollerRef = React.useRef<any>(null);
+
+  React.useEffect(() => {
+    if (scrollerRef.current) {
+      initialize(scrollerRef.current);
+    }
+  }, [scrollerRef.current, initialize]);
+
   const handleSelect = (item: {
     title: string;
     data: { role: string; content: string }[];
@@ -45,7 +54,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       }}
       footer={null}
     >
-      <SimpleBar style={{ maxHeight: '550px' }}>
+      <div ref={scrollerRef} style={{ maxHeight: '550px', overflow: 'auto' }}>
         <div className="prompt-wrapper">
           {promptList.map((item, index) => {
             return (
@@ -83,7 +92,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
             );
           })}
         </div>
-      </SimpleBar>
+      </div>
     </Modal>
   );
 };