fix: message format with imgs, downloading table style

src/components/buttons/more.tsx

@@ -0,0 +1,46 @@
+import { DoubleRightOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+interface MoreButtonProps {
+  show: boolean;
+  loadMore: () => void;
+  loading?: boolean;
+}
+
+const MoreWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-block: 16px;
+  opacity: 1;
+  transition: opacity 0.3s;
+  &.loading {
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+  }
+`;
+
+const MoreButton: React.FC<MoreButtonProps> = (props) => {
+  const { show, loading, loadMore } = props;
+  const intl = useIntl();
+  return (
+    <>
+      {show ? (
+        <MoreWrapper className={loading ? 'loading' : ''}>
+          <Button
+            onClick={loadMore}
+            size="middle"
+            type="text"
+            icon={<DoubleRightOutlined rotate={90} />}
+          >
+            {intl.formatMessage({ id: 'common.button.more' })}
+          </Button>
+        </MoreWrapper>
+      ) : null}
+    </>
+  );
+};
+
+export default MoreButton;

src/components/simple-table/index.less

@@ -8,25 +8,22 @@
     border-spacing: 0;
 
     td {
-      border-bottom: 1px solid rgba(255, 255, 255, 10%);
+      border-bottom: 1px solid var(--ant-color-split);
     }
 
     th {
-      border-bottom: 1px solid rgba(255, 255, 255, 10%);
+      border-bottom: 1px solid var(--ant-color-split);
-    }
-
-    tr:last-child td {
-      // border-bottom: none;
     }
   }
 
   th {
     height: 36px;
     font-weight: 600;
+    color: var(--ant-color-text);
   }
 
   td {
-    color: var(--color-white-quaternary);
+    color: var(--ant-color-text-secondary);
   }
 
   .cell-span {
@@ -38,16 +35,4 @@
   .cell-header {
     font-weight: var(--font-weight-medium);
   }
-
-  &.light {
-    th {
-      color: var(--ant-color-text);
-      border-bottom: 1px solid var(--ant-color-split);
-    }
-
-    td {
-      color: var(--ant-color-text);
-      border-bottom: 1px solid var(--ant-color-split);
-    }
-  }
 }

src/global.less

@@ -76,6 +76,7 @@ html {
   --color-bg-tooltip: '#fff';
   --color-modal-content-bg: rgba(255, 255, 255, 90%);
   --color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%);
+  --color-spotlight-bg: rgba(255, 255, 255, 100%);
   // ======== input ============
   --box-shadow-base: 0 4px 6px rgba(227, 232, 240, 70%);
   --ant-border-radius-lg: 4px;
@@ -97,6 +98,7 @@ html[data-theme='realDark'] {
   --color-progress-text: rgba(255, 255, 255, 80%);
   --color-modal-content-bg: #1f1f1f;
   --color-modal-box-shadow: none;
+  --color-spotlight-bg: #3e3e3e;
 
   background: #141414;
 
@@ -731,7 +733,7 @@ body {
 
 .light-downloading-tooltip {
   &.ant-tooltip .ant-tooltip-arrow::before {
-    background: var(--color-white-1);
+    background: var(--color-spotlight-bg);
   }
 }
 

src/pages/llmodels/catalog.tsx

@@ -1,9 +1,10 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
+import MoreButton from '@/components/buttons/more';
 import PageTools from '@/components/page-tools';
 import { PageAction } from '@/config';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import { IS_FIRST_LOGIN, writeState } from '@/utils/localstore/index';
-import { DoubleRightOutlined, SyncOutlined } from '@ant-design/icons';
+import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { Button, Input, Pagination, Select, Space, message } from 'antd';
@@ -22,18 +23,6 @@ const PageWrapper = styled.div`
   margin-block: 32px 16px;
 `;
 
-const MoreWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-block: 16px;
-  opacity: 1;
-  transition: opacity 0.3s;
-  &.loading {
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-  }
-`;
-
 const Catalog: React.FC = () => {
   const intl = useIntl();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
@@ -315,18 +304,11 @@ const Catalog: React.FC = () => {
         activeId={-1}
         isFirst={isFirst}
       ></CatalogList>
-      {queryParams.page < dataSource.totalPage && (
+      <MoreButton
-        <MoreWrapper className={dataSource.loading ? 'loading' : ''}>
+        show={queryParams.page < dataSource.totalPage}
-          <Button
+        loading={dataSource.loading}
-            onClick={loadMore}
+        loadMore={loadMore}
-            size="middle"
+      ></MoreButton>
-            type="text"
-            icon={<DoubleRightOutlined rotate={90} />}
-          >
-            {intl.formatMessage({ id: 'common.button.more' })}
-          </Button>
-        </MoreWrapper>
-      )}
       <PageWrapper>
         <Pagination
           hideOnSinglePage={queryParams.perPage === 100}

src/pages/llmodels/components/instance-item.tsx

@@ -139,7 +139,6 @@ const RenderRayactorDownloading = (props: {
         columns={downloadList}
         dataSource={[...mainWorker, ...list]}
         rowKey="worker_name"
-        theme="light"
       ></SimpleTabel>
     </div>
   );
@@ -162,7 +161,7 @@ const RenderWorkerDownloading = (props: {
       arrow={true}
       overlayInnerStyle={{
         width: 300,
-        backgroundColor: 'var(--color-white-1)'
+        backgroundColor: 'var(--color-spotlight-bg)'
       }}
       overlayClassName="light-downloading-tooltip"
       title={

src/pages/llmodels/config/llama-config.ts

@@ -592,6 +592,10 @@ const options = [
   {
     label: '--context-shift',
     value: '--context-shift'
+  },
+  {
+    label: '--v2',
+    value: '--v2'
   }
 ];
 

src/pages/playground/config/index.ts

@@ -1,4 +1,4 @@
-import { map } from 'lodash';
+import _, { map } from 'lodash';
 import { CREAT_IMAGE_API } from '../apis';
 import { MessageItem } from './types';
 
@@ -50,30 +50,33 @@ export const formatMessageParams = (messageList: any[]) => {
 
 export const generateMessagesByListContent = (messageList: any[]) => {
   if (!messageList.length) return [];
-
   return messageList.map((item: MessageItem) => {
-    const content = map(
+    if (item.imgs?.length) {
-      item.imgs,
+      const content = map(
-      (img: { uid: string | number; dataUrl: string }) => {
+        item.imgs,
-        return {
+        (img: { uid: string | number; dataUrl: string }) => {
-          type: 'image_url',
+          return {
-          image_url: {
+            type: 'image_url',
-            url: img.dataUrl
+            image_url: {
-          }
+              url: img.dataUrl
-        };
+            }
-      }
+          };
-    );
+        }
+      );
 
-    if (item.content) {
+      if (item.content) {
-      content.push({
+        content.push({
-        type: 'text',
+          type: 'text',
-        text: item.content
+          text: item.content
-      });
+        });
+      }
+
+      return {
+        role: item.role,
+        content: content
+      };
     }
-    return {
+    return _.omit(item, ['uid', 'imgs']);
-      role: item.role,
-      content: content
-    };
   });
 };