From 7e985991cd96f72e057918659ed34a99a1847f29 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 26 Sep 2024 19:51:09 +0800
Subject: [PATCH] fix(style): compare sroll

---
 src/assets/styles/common.less                 |   4 +
 src/components/markdown-viewer/index.tsx      |   1 +
 .../seal-form/components/wrapper.less         |   1 +
 src/global.less                               |   8 ++
 src/pages/llmodels/components/data-form.tsx   |   2 +-
 .../llmodels/components/deploy-modal.tsx      |   2 +-
 src/pages/llmodels/components/gpu-card.tsx    |  46 ++++----
 src/pages/llmodels/components/model-card.tsx  |   3 +-
 src/pages/llmodels/config/index.ts            |  14 +--
 src/pages/llmodels/style/separator.less       |   7 +-
 .../playground/components/ground-left.tsx     |  12 +--
 .../playground/components/message-input.tsx   |   6 +-
 .../components/multiple-chat/index.tsx        |  38 +++----
 .../components/multiple-chat/model-item.tsx   | 102 +++++++++---------
 src/pages/playground/style/model-item.less    |   6 ++
 src/pages/playground/style/multiple-chat.less |   7 ++
 16 files changed, 147 insertions(+), 112 deletions(-)

diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less
index 4ea6854a..441b9621 100644
--- a/src/assets/styles/common.less
+++ b/src/assets/styles/common.less
@@ -70,6 +70,10 @@
   padding-left: 6px;
 }
 
+.p-l-8 {
+  padding-left: 8px;
+}
+
 .flex {
   display: flex;
 }
diff --git a/src/components/markdown-viewer/index.tsx b/src/components/markdown-viewer/index.tsx
index 9d194d97..cdf3bfab 100644
--- a/src/components/markdown-viewer/index.tsx
+++ b/src/components/markdown-viewer/index.tsx
@@ -88,6 +88,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
       htmlstr = (
         <Image
           src={token.href}
+          alt={token.text}
           preview={{
             mask: <EyeOutlined />
           }}
diff --git a/src/components/seal-form/components/wrapper.less b/src/components/seal-form/components/wrapper.less
index be7911c7..85963ef5 100644
--- a/src/components/seal-form/components/wrapper.less
+++ b/src/components/seal-form/components/wrapper.less
@@ -95,6 +95,7 @@
   align-items: flex-start;
   flex: 1;
   padding-block: 20px 0;
+  max-width: 100%;
 
   &.no-wrapper-style {
     padding-block: 0;
diff --git a/src/global.less b/src/global.less
index f549088d..a6c16cdd 100644
--- a/src/global.less
+++ b/src/global.less
@@ -518,6 +518,14 @@ body {
   }
 }
 
+.ant-dropdown-menu
+  .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(
+    .ant-dropdown-menu-item-disabled
+  ):hover {
+  background-color: var(--ant-color-error-bg) !important;
+  color: var(--ant-color-error) !important;
+}
+
 .ant-message-notice-wrapper {
   .ant-message-notice-error {
     .ant-message-notice-content {
diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx
index 61f08cd9..ea79486b 100644
--- a/src/pages/llmodels/components/data-form.tsx
+++ b/src/pages/llmodels/components/data-form.tsx
@@ -219,10 +219,10 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             filterOption
             defaultActiveFirstOption
             disabled={action === PageAction.EDIT}
+            options={ollamaModelOptions}
             label={intl.formatMessage({ id: 'model.form.ollama.model' })}
             placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
             required
-            options={ollamaModelOptions}
           ></SealAutoComplete>
         </Form.Item>
       </>
diff --git a/src/pages/llmodels/components/deploy-modal.tsx b/src/pages/llmodels/components/deploy-modal.tsx
index 3e2a3abd..3a398938 100644
--- a/src/pages/llmodels/components/deploy-modal.tsx
+++ b/src/pages/llmodels/components/deploy-modal.tsx
@@ -118,7 +118,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       width={width}
       footer={false}
     >
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex', height: '100%' }}>
         {SEARCH_SOURCE.includes(props.source) && (
           <>
             <div style={{ display: 'flex', flex: 1 }}>
diff --git a/src/pages/llmodels/components/gpu-card.tsx b/src/pages/llmodels/components/gpu-card.tsx
index 30f4743a..762fb0cd 100644
--- a/src/pages/llmodels/components/gpu-card.tsx
+++ b/src/pages/llmodels/components/gpu-card.tsx
@@ -6,30 +6,40 @@ import '../style/gpu-card.less';
 
 const GPUCard: React.FC<{
   data: any;
-}> = ({ data }) => {
+  header?: React.ReactNode;
+  info?: React.ReactNode;
+}> = ({ data, header, info }) => {
   const intl = useIntl();
   return (
     <div className="gpu-card">
       <div className="header">
-        {data.label}({data.worker_name})[
-        {intl.formatMessage({ id: 'resources.table.index' })}:{data.index}]
+        {header ?? (
+          <>
+            {data.label}({data.worker_name})[
+            {intl.formatMessage({ id: 'resources.table.index' })}:{data.index}]
+          </>
+        )}
       </div>
       <div className="info">
-        <span>
-          {intl.formatMessage({ id: 'resources.table.vram' })}(
-          {intl.formatMessage({ id: 'resources.table.used' })}/
-          {intl.formatMessage({ id: 'resources.table.total' })}):{' '}
-          <span>
-            {convertFileSize(data?.memory?.used || 0)} /{' '}
-            {convertFileSize(data?.memory?.total || 0)}
-          </span>
-        </span>
-        <span>
-          <span>
-            {intl.formatMessage({ id: 'resources.table.gpuutilization' })}:{' '}
-          </span>
-          {_.round(data?.memory?.utilization_rate || 0, 2)}%
-        </span>
+        {info ?? (
+          <>
+            <span>
+              {intl.formatMessage({ id: 'resources.table.vram' })}(
+              {intl.formatMessage({ id: 'resources.table.used' })}/
+              {intl.formatMessage({ id: 'resources.table.total' })}):{' '}
+              <span>
+                {convertFileSize(data?.memory?.used || 0)} /{' '}
+                {convertFileSize(data?.memory?.total || 0)}
+              </span>
+            </span>
+            <span>
+              <span>
+                {intl.formatMessage({ id: 'resources.table.gpuutilization' })}:{' '}
+              </span>
+              {_.round(data?.memory?.utilization_rate || 0, 2)}%
+            </span>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/llmodels/components/model-card.tsx b/src/pages/llmodels/components/model-card.tsx
index 8e14c81a..5eec3a5e 100644
--- a/src/pages/llmodels/components/model-card.tsx
+++ b/src/pages/llmodels/components/model-card.tsx
@@ -111,6 +111,7 @@ const ModelCard: React.FC<{
   const getModelCardData = async () => {
     if (!props.selectedModel.name) {
       setModelData(null);
+      setReadmeText(null);
       return;
     }
     requestToken.current?.cancel?.();
@@ -191,7 +192,7 @@ const ModelCard: React.FC<{
       <div className="card-wrapper">
         {modelData ? (
           <div className="model-card-wrap">
-            <div className="flex-between flex-center">
+            <div className="flex-center">
               {modelData.config?.model_type && (
                 <Tag className="tag-item" color="gold">
                   <span style={{ opacity: 0.65 }}>
diff --git a/src/pages/llmodels/config/index.ts b/src/pages/llmodels/config/index.ts
index 6adf7718..dd0c882a 100644
--- a/src/pages/llmodels/config/index.ts
+++ b/src/pages/llmodels/config/index.ts
@@ -44,13 +44,13 @@ export const ollamaModelOptions = [
     tags: ['7B'],
     id: 'mistral'
   },
-  // {
-  //   label: 'llava',
-  //   value: 'llava',
-  //   name: 'llava',
-  //   tags: ['7B', '13B', '34B'],
-  //   id: 'llava'
-  // },
+  {
+    label: 'llava',
+    value: 'llava',
+    name: 'llava',
+    tags: ['7B', '13B', '34B'],
+    id: 'llava'
+  },
   {
     label: 'qwen2',
     value: 'qwen2',
diff --git a/src/pages/llmodels/style/separator.less b/src/pages/llmodels/style/separator.less
index bd58eb33..43a8f449 100644
--- a/src/pages/llmodels/style/separator.less
+++ b/src/pages/llmodels/style/separator.less
@@ -5,14 +5,15 @@
     position: absolute;
     border-radius: 0 2px 0 0;
     top: 10px;
-    left: -10px;
-    width: 22px;
-    height: 22px;
+    left: -13px;
+    width: 24px;
+    height: 24px;
     border: 2px solid var(--ant-color-split);
     transform: rotate(45deg);
     border-left: none;
     border-bottom: none;
     background-color: var(--color-white-1);
     z-index: 100;
+    clip-path: polygon(0 -1px, 24px 0, 24px 23px);
   }
 }
diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index 32fbba7d..5990401c 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/src/pages/playground/components/ground-left.tsx
@@ -93,13 +93,11 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const joinMessage = (chunk: any) => {
-    if (!chunk) {
-      return;
-    }
-    if (!_.get(chunk, 'choices', []).length) {
-      setTokenResult({
-        ...chunk?.usage
-      });
+    setTokenResult({
+      ...(chunk?.usage ?? {})
+    });
+
+    if (!chunk || !_.get(chunk, 'choices', []).length) {
       return;
     }
     contentRef.current =
diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx
index 23724ec4..f151a921 100644
--- a/src/pages/playground/components/message-input.tsx
+++ b/src/pages/playground/components/message-input.tsx
@@ -291,9 +291,9 @@ const MessageInput: React.FC<MessageInputProps> = ({
 
   useHotkeys(
     HotKeys.SUBMIT,
-    () => {
+    (e: any) => {
       console.log('submit message', loading);
-      inputRef.current?.blur?.();
+      e.preventDefault();
       handleSendMessage();
     },
     {
@@ -307,8 +307,6 @@ const MessageInput: React.FC<MessageInputProps> = ({
     (e: any) => {
       e.preventDefault();
       e.stopPropagation();
-      console.log('add message', loading);
-      inputRef.current?.blur?.();
       handleAddMessage();
     },
     {
diff --git a/src/pages/playground/components/multiple-chat/index.tsx b/src/pages/playground/components/multiple-chat/index.tsx
index f6bf9b33..eda7a84e 100644
--- a/src/pages/playground/components/multiple-chat/index.tsx
+++ b/src/pages/playground/components/multiple-chat/index.tsx
@@ -252,24 +252,26 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
   return (
     <div className="multiple-chat" style={{ height: boxHeight }}>
       <div className="chat-list">
-        <CompareContext.Provider
-          value={{
-            spans,
-            globalParams,
-            loadingStatus,
-            modelFullList: modelList,
-            handleApplySystemChangeToAll,
-            setGlobalParams,
-            setLoadingStatus: handleSetLoadingStatus,
-            handleDeleteModel: handleDeleteModel
-          }}
-        >
-          <ActiveModels
-            spans={spans}
-            modelSelections={modelSelections}
-            setModelRefs={setModelRefs}
-          ></ActiveModels>
-        </CompareContext.Provider>
+        <div className="chat-list-inner">
+          <CompareContext.Provider
+            value={{
+              spans,
+              globalParams,
+              loadingStatus,
+              modelFullList: modelList,
+              handleApplySystemChangeToAll,
+              setGlobalParams,
+              setLoadingStatus: handleSetLoadingStatus,
+              handleDeleteModel: handleDeleteModel
+            }}
+          >
+            <ActiveModels
+              spans={spans}
+              modelSelections={modelSelections}
+              setModelRefs={setModelRefs}
+            ></ActiveModels>
+          </CompareContext.Provider>
+        </div>
       </div>
       <div>
         <MessageInput
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx
index 932b5334..593c86bd 100644
--- a/src/pages/playground/components/multiple-chat/model-item.tsx
+++ b/src/pages/playground/components/multiple-chat/model-item.tsx
@@ -2,7 +2,7 @@ import IconFont from '@/components/icon-font';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import {
   ClearOutlined,
-  CloseOutlined,
+  DeleteOutlined,
   MoreOutlined,
   SettingOutlined
 } from '@ant-design/icons';
@@ -11,7 +11,6 @@ import { Button, Checkbox, Dropdown, Popover, Select, Spin } from 'antd';
 import _ from 'lodash';
 import React, {
   forwardRef,
-  useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -81,18 +80,17 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     };
 
     const joinMessage = (chunk: any) => {
-      if (!chunk) {
-        return;
-      }
-      if (!_.get(chunk, 'choices', [].length)) {
-        setTokenResult({
-          ...chunk?.usage
-        });
+      setTokenResult({
+        ...(chunk?.usage ?? {})
+      });
+
+      if (!chunk || !_.get(chunk, 'choices', [].length)) {
         return;
       }
+
       contentRef.current =
         contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
-      console.log('currentMessage==========5', messageList);
+
       setMessageList([
         ...messageList,
         ...currentMessageRef.current,
@@ -202,15 +200,10 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         setLoadingStatus(instanceId, false);
       }
     };
-    const handleDropdownAction = useCallback(({ key }: { key: string }) => {
-      if (key === 'clear') {
-        setMessageList([]);
-        setSystemMessage('');
-      }
-      if (key === 'viewCode') {
-        setShow(true);
-      }
-    }, []);
+
+    const handleDelete = () => {
+      handleDeleteModel(instanceId);
+    };
 
     const handleSubmit = (currentMessage: Omit<MessageItem, 'uid'>) => {
       const currentMsg =
@@ -234,7 +227,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       changeValues: any,
       allValues: Record<string, any>
     ) => {
-      console.log('value:', allValues, isApplyToAllModels.current);
       if (isApplyToAllModels.current) {
         setParams({
           ...params,
@@ -256,7 +248,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       setTokenResult(null);
       setSystemMessage('');
       currentMessageRef.current = [];
-      console.log('clear message', systemMessage);
     };
 
     const handleCloseViewCode = () => {
@@ -285,16 +276,48 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       setMessageList(messages);
     };
 
-    const handleDelete = () => {
-      handleDeleteModel(instanceId);
-    };
-
     const modelOptions = useMemo(() => {
       return modelFullList.filter((item) => {
         return item.type !== 'empty';
       });
     }, [modelFullList]);
 
+    const actionItems = useMemo(() => {
+      const list = [
+        {
+          label: intl.formatMessage({ id: 'common.button.clear' }),
+          key: 'clear',
+          icon: <ClearOutlined />,
+          danger: false,
+          onClick: () => {
+            setMessageList([]);
+            setSystemMessage('');
+          }
+        },
+        {
+          label: intl.formatMessage({ id: 'playground.viewcode' }),
+          key: 'viewcode',
+          icon: <IconFont type="icon-code" />,
+          onClick: () => {
+            setShow(true);
+          }
+        }
+      ];
+
+      if (modelList.length > 2) {
+        list.push({
+          label: intl.formatMessage({ id: 'common.button.delete' }),
+          key: 'delete',
+          icon: <DeleteOutlined />,
+          danger: true,
+          onClick: () => {
+            handleDelete();
+          }
+        });
+      }
+      return list;
+    }, [modelList]);
+
     useEffect(() => {
       console.log('globalParams:', globalParams.model, globalParams);
       setParams({
@@ -327,7 +350,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         <div className="header">
           <span className="title">
             <Select
-              style={{ minWidth: '120px' }}
+              style={{ minWidth: '120px', maxWidth: '200px' }}
               variant="borderless"
               options={modelFullList}
               onChange={handleModelChange}
@@ -338,24 +361,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
           <span className="action">
             <Dropdown
               menu={{
-                items: [
-                  {
-                    label: intl.formatMessage({ id: 'common.button.clear' }),
-                    key: 'clear',
-                    icon: <ClearOutlined />,
-                    onClick: () => {
-                      handleDropdownAction({ key: 'clear' });
-                    }
-                  },
-                  {
-                    label: intl.formatMessage({ id: 'playground.viewcode' }),
-                    key: 'viewcode',
-                    icon: <IconFont type="icon-code" />,
-                    onClick: () => {
-                      handleDropdownAction({ key: 'viewCode' });
-                    }
-                  }
-                ]
+                items: actionItems
               }}
               placement="bottomRight"
             >
@@ -396,14 +402,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
                 size="small"
               ></Button>
             </Popover>
-            {modelList.length > 2 && (
-              <Button
-                type="text"
-                icon={<CloseOutlined />}
-                size="small"
-                onClick={handleDelete}
-              ></Button>
-            )}
           </span>
         </div>
         <SystemMessage
diff --git a/src/pages/playground/style/model-item.less b/src/pages/playground/style/model-item.less
index 2f3f4981..8361841e 100644
--- a/src/pages/playground/style/model-item.less
+++ b/src/pages/playground/style/model-item.less
@@ -14,6 +14,12 @@
     border-bottom: 1px solid var(--ant-color-border);
   }
 
+  .action {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
   .content {
     flex: 1;
     padding: 16px;
diff --git a/src/pages/playground/style/multiple-chat.less b/src/pages/playground/style/multiple-chat.less
index a89afee8..67cae0bf 100644
--- a/src/pages/playground/style/multiple-chat.less
+++ b/src/pages/playground/style/multiple-chat.less
@@ -5,7 +5,14 @@
 
   .chat-list {
     flex: 1;
+    overflow-y: auto;
     padding-bottom: 16px;
     padding-inline: var(--layout-content-inlinepadding);
   }
+
+  .chat-list-inner {
+    min-height: calc(100vh - 199px);
+    max-height: max-content;
+    height: 100%;
+  }
 }