style: dashboard utilization

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

@@ -1,5 +1,6 @@
 import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
+import { platformCall } from '@/utils';
 import {
   CodeOutlined,
   DeleteOutlined,
@@ -7,8 +8,9 @@ import {
   PlusOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, Row, Space } from 'antd';
+import { Button, Col, Dropdown, Row, Space } from 'antd';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { Roles } from '../config';
 import '../style/chat-footer.less';
 
 interface ChatFooterProps {
@@ -23,6 +25,7 @@ interface ChatFooterProps {
 }
 
 const ChatFooter: React.FC<ChatFooterProps> = (props) => {
+  const platform = platformCall();
   const intl = useIntl();
   const {
     onSubmit,
@@ -42,38 +45,28 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
     { enabled: !disabled }
   );
 
-  const renderSubmitButton = () => {
-    if (disabled) {
-      return (
-        <>
-          {intl.formatMessage({ id: 'common.button.stop' })}
-          <span className="m-l-5">
-            <IconFont type="icon-stop"></IconFont>
-          </span>
-        </>
-      );
+  const MessageRoles = [
+    { key: Roles.User, label: intl.formatMessage({ id: 'playground.user' }) },
+    {
+      key: Roles.Assistant,
+      label: intl.formatMessage({ id: 'playground.assistant' })
     }
-    return (
-      <>
-        {intl.formatMessage({ id: 'common.button.submit' })}
-        <span className="m-l-5 opct-7">
-          <IconFont type="icon-command"></IconFont> + <EnterOutlined />
-        </span>
-      </>
-    );
-  };
+  ];
+
   return (
     <div className="chat-footer">
       <Row style={{ width: '100%' }}>
         <Col span={hasTokenResult ? 8 : 12}>
           <Space size={20}>
-            <Button
-              disabled={disabled}
-              icon={<PlusOutlined />}
-              onClick={onNewMessage}
+            <Dropdown
+              menu={{ items: MessageRoles, onClick: onNewMessage }}
+              placement="topLeft"
             >
-              {intl.formatMessage({ id: 'playground.newMessage' })}
-            </Button>
+              <Button disabled={disabled} icon={<PlusOutlined />}>
+                {intl.formatMessage({ id: 'playground.newMessage' })}
+              </Button>
+            </Dropdown>
+
             <Button
               icon={<DeleteOutlined></DeleteOutlined>}
               onClick={onClear}
@@ -97,15 +90,31 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
               <Button type="primary" disabled={disabled} onClick={onSubmit}>
                 {intl.formatMessage({ id: 'common.button.submit' })}
                 <span className="m-l-5 opct-7">
-                  <IconFont type="icon-command"></IconFont> + <EnterOutlined />
+                  {platform.isMac ? (
+                    <>
+                      <IconFont type="icon-command"></IconFont> +{' '}
+                      <EnterOutlined />
+                    </>
+                  ) : (
+                    <>
+                      CTRL + <EnterOutlined />
+                    </>
+                  )}
                 </span>
               </Button>
             ) : (
               <Button type="primary" onClick={onStop}>
-                {intl.formatMessage({ id: 'common.button.stop' })}
-                <span className="m-l-5">
-                  <IconFont type="icon-stop"></IconFont>
-                </span>
+                <div className="flex flex-center">
+                  <span>
+                    {intl.formatMessage({ id: 'common.button.stop' })}
+                  </span>
+                  <span className="m-l-5 flex flex-center">
+                    <IconFont
+                      type="icon-stop1"
+                      className="font-size-14"
+                    ></IconFont>
+                  </span>
+                </div>
               </Button>
             )}
           </Space>