style: help menu

src/pages/playground/components/chat-footer.tsx

@@ -8,7 +8,7 @@ import {
   PlusOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, Dropdown, Row, Space } from 'antd';
+import { Button, Col, Row, Space } from 'antd';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Roles } from '../config';
 import '../style/chat-footer.less';
@@ -22,6 +22,7 @@ interface ChatFooterProps {
   disabled?: boolean;
   feedback?: React.ReactNode;
   hasTokenResult?: boolean;
+  selectedModel?: string;
 }
 
 const ChatFooter: React.FC<ChatFooterProps> = (props) => {
@@ -35,7 +36,8 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
     onView,
     feedback,
     disabled,
-    hasTokenResult
+    hasTokenResult,
+    selectedModel
   } = props;
   useHotkeys(
     HotKeys.SUBMIT.join(','),
@@ -58,15 +60,25 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
       <Row style={{ width: '100%' }}>
         <Col span={hasTokenResult ? 8 : 12}>
           <Space size={20}>
-            <Dropdown
+            {/* <Dropdown
               menu={{ items: MessageRoles, onClick: onNewMessage }}
               placement="topLeft"
             >
-              <Button disabled={disabled} icon={<PlusOutlined />}>
+              <Button
+                disabled={disabled}
+                icon={<PlusOutlined />}
+                onClick={onNewMessage}
+              >
                 {intl.formatMessage({ id: 'playground.newMessage' })}
               </Button>
-            </Dropdown>
-
+            </Dropdown> */}
+            <Button
+              disabled={disabled}
+              icon={<PlusOutlined />}
+              onClick={onNewMessage}
+            >
+              {intl.formatMessage({ id: 'playground.newMessage' })}
+            </Button>
             <Button
               icon={<DeleteOutlined></DeleteOutlined>}
               onClick={onClear}
@@ -87,7 +99,11 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
               {intl.formatMessage({ id: 'playground.viewcode' })}
             </Button>
             {!disabled ? (
-              <Button type="primary" disabled={disabled} onClick={onSubmit}>
+              <Button
+                type="primary"
+                disabled={disabled || !selectedModel}
+                onClick={onSubmit}
+              >
                 {intl.formatMessage({ id: 'common.button.submit' })}
                 <span className="m-l-5 opct-7">
                   {platform.isMac ? (

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

@@ -56,11 +56,10 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const setMessageId = () => {
     messageId.current = messageId.current + 1;
   };
-  const handleNewMessage = (role: any) => {
+  const handleNewMessage = (role?: any) => {
     messageList.push({
-      // role:
-      //   _.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
-      role: role.key,
+      role:
+        _.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
       content: '',
       uid: messageId.current + 1
     });
@@ -142,11 +141,14 @@ const MessageList: React.FC<MessageProps> = (props) => {
     if (!messageList.length) {
       return;
     }
-    const headItem = _.cloneDeep(_.get(messageList, '0'));
-    headItem.content = '';
-    headItem.role = Roles.User;
-    headItem.uid = messageId.current + 1;
-    setMessageList(headItem ? [headItem] : []);
+    setMessageId();
+    setMessageList([
+      {
+        role: Roles.User,
+        content: '',
+        uid: messageId.current
+      }
+    ]);
   };
 
   const handleView = () => {
@@ -261,6 +263,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
           onView={handleView}
           onStop={handleStopConversation}
           disabled={loading}
+          selectedModel={parameters.model}
           hasTokenResult={!!tokenResult}
           feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
         ></ChatFooter>

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

@@ -2,8 +2,9 @@ import FieldWrapper from '@/components/seal-form/field-wrapper';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { INPUT_WIDTH } from '@/constants';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form, InputNumber, Slider } from 'antd';
+import { Form, InputNumber, Slider, Tooltip } from 'antd';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { queryModelsList } from '../apis';
@@ -100,13 +101,27 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
     form.setFieldsValue(initialValues);
     setParams(initialValues);
   };
-  const renderLabel = (args: { field: string; label: string }) => {
+  const renderLabel = (args: {
+    field: string;
+    label: string;
+    description: string;
+  }) => {
     return (
       <span
         className={CustomLabelStyles.label}
         style={{ width: INPUT_WIDTH.mini }}
       >
-        <span className="text">{args.label}</span>
+        <span className="text">
+          <span> {args.label}</span>
+          {args.description && (
+            <span className="m-l-5">
+              <Tooltip title={args.description}>
+                <InfoCircleOutlined />
+              </Tooltip>
+            </span>
+          )}
+        </span>
+
         <InputNumber
           className="label-val"
           variant="outlined"
@@ -150,7 +165,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           <FieldWrapper
             label={renderLabel({
               field: 'temperature',
-              label: 'Temperature'
+              label: 'Temperature',
+              description: intl.formatMessage({
+                id: 'playground.params.temperature.tips'
+              })
             })}
             style={{ paddingInline: 0 }}
             variant="borderless"
@@ -173,7 +191,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           <FieldWrapper
             label={renderLabel({
               field: 'max_tokens',
-              label: 'Max Tokens'
+              label: 'Max Tokens',
+              description: intl.formatMessage({
+                id: 'playground.params.maxtokens.tips'
+              })
             })}
             style={{ paddingInline: 0 }}
             variant="borderless"
@@ -196,7 +217,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           <FieldWrapper
             label={renderLabel({
               field: 'top_p',
-              label: 'Top P'
+              label: 'Top P',
+              description: intl.formatMessage({
+                id: 'playground.params.topp.tips'
+              })
             })}
             style={{ paddingInline: 0 }}
             variant="borderless"
@@ -219,7 +243,10 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           <FieldWrapper
             label={renderLabel({
               field: 'seed',
-              label: 'Seed'
+              label: 'Seed',
+              description: intl.formatMessage({
+                id: 'playground.params.seed.tips'
+              })
             })}
             style={{ paddingInline: 0 }}
             variant="borderless"
@@ -240,6 +267,9 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         >
           <SealInput.Input
             label="Stop Sequence"
+            description={intl.formatMessage({
+              id: 'playground.params.stop.tips'
+            })}
             style={{ width: INPUT_WIDTH.mini }}
           ></SealInput.Input>
         </Form.Item>