chore: playground hotkey

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

@@ -1,11 +1,14 @@
+import HotKeys from '@/config/hotkeys';
 import {
   CodeOutlined,
   DeleteOutlined,
-  PlusOutlined,
-  SaveOutlined
+  EnterOutlined,
+  MacCommandOutlined,
+  PlusOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Col, Row, Space } from 'antd';
+import { useHotkeys } from 'react-hotkeys-hook';
 import '../style/chat-footer.less';
 
 interface ChatFooterProps {
@@ -20,6 +23,14 @@ interface ChatFooterProps {
 const ChatFooter: React.FC<ChatFooterProps> = (props) => {
   const intl = useIntl();
   const { onSubmit, onClear, onNewMessage, onView, feedback, disabled } = props;
+  useHotkeys(
+    HotKeys.SUBMIT.join(','),
+    () => {
+      onSubmit();
+    },
+    { enabled: !disabled }
+  );
+
   return (
     <div className="chat-footer">
       <Row style={{ width: '100%' }}>
@@ -52,13 +63,11 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
             >
               {intl.formatMessage({ id: 'playground.viewcode' })}
             </Button>
-            <Button
-              disabled={disabled}
-              type="primary"
-              icon={<SaveOutlined></SaveOutlined>}
-              onClick={onSubmit}
-            >
+            <Button disabled={disabled} type="primary" onClick={onSubmit}>
               {intl.formatMessage({ id: 'common.button.submit' })}
+              <span className="m-l-5 opct-7">
+                <MacCommandOutlined /> + <EnterOutlined />
+              </span>
             </Button>
           </Space>
         </Col>

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

@@ -1,10 +1,12 @@
 import TransitionWrapper from '@/components/transition';
+import HotKeys from '@/config/hotkeys';
 import { EyeInvisibleOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Spin } from 'antd';
 import _ from 'lodash';
 import { useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { fetchChatStream, receiveChatStream } from '../apis';
 import { Roles } from '../config';
 import '../style/ground-left.less';
@@ -13,6 +15,7 @@ import ChatFooter from './chat-footer';
 import MessageItem from './message-item';
 import ReferenceParams from './reference-params';
 import ViewCodeModal from './view-code-modal';
+
 interface MessageProps {
   parameters: any;
 }
@@ -40,6 +43,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const [loading, setLoading] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
   const [tokenResult, setTokenResult] = useState<any>(null);
+  const [currentIsFocus, setCurrentIsFocus] = useState(false);
   const systemRef = useRef<any>(null);
   const contentRef = useRef<any>('');
 
@@ -153,6 +157,27 @@ const MessageList: React.FC<MessageProps> = (props) => {
       </div>
     );
   };
+
+  const handleFocus = () => {
+    setCurrentIsFocus(true);
+  };
+
+  const handleBlur = () => {
+    setCurrentIsFocus(false);
+  };
+
+  useHotkeys(
+    HotKeys.SUBMIT,
+    () => {
+      handleSubmit();
+    },
+    {
+      enabled: currentIsFocus && !loading,
+      enableOnFormTags: currentIsFocus && !loading,
+      preventDefault: true
+    }
+  );
+
   return (
     <div className="ground-left">
       <PageContainer title={false} className="message-list-wrap">
@@ -166,6 +191,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
               value={systemMessage}
               variant="filled"
               autoSize={true}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
               placeholder={intl.formatMessage({ id: 'playground.system.tips' })}
               onChange={handleSystemMessageChange}
             ></Input.TextArea>
@@ -184,6 +211,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
                 updateMessage={(message: MessageItemProps) =>
                   handleUpdateMessage(index, message)
                 }
+                onSubmit={handleSubmit}
                 message={item}
               />
             );

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

@@ -1,7 +1,9 @@
+import HotKeys from '@/config/hotkeys';
 import { MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input } from 'antd';
 import { memo, useEffect, useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { Roles } from '../config';
 import '../style/message-item.less';
 interface MessageItemProps {
@@ -14,18 +16,32 @@ const MessageItem: React.FC<{
   message: MessageItemProps;
   loading?: boolean;
   islast?: boolean;
+  onSubmit: () => void;
   updateMessage: (message: MessageItemProps) => void;
   isFocus: boolean;
   onDelete: () => void;
-}> = ({ message, isFocus, onDelete, updateMessage }) => {
+}> = ({ message, isFocus, onDelete, updateMessage, onSubmit, loading }) => {
   const intl = useIntl();
   const [roleType, setRoleType] = useState(message.role);
   const [isTyping, setIsTyping] = useState(false);
   const [messageContent, setMessageContent] = useState(message.content);
   const isInitialRender = useRef(true);
   const [isAnimating, setIsAnimating] = useState(false);
+  const [currentIsFocus, setCurrentIsFocus] = useState(isFocus);
   const inputRef = useRef<any>(null);
 
+  useHotkeys(
+    HotKeys.SUBMIT,
+    () => {
+      onSubmit();
+    },
+    {
+      enabled: currentIsFocus && !loading,
+      enableOnFormTags: currentIsFocus && !loading,
+      preventDefault: true
+    }
+  );
+
   useEffect(() => {
     if (inputRef.current && isFocus) {
       inputRef.current.focus();
@@ -75,6 +91,11 @@ const MessageItem: React.FC<{
 
   const handleBlur = () => {
     setIsTyping(true);
+    setCurrentIsFocus(false);
+  };
+
+  const handleFocus = () => {
+    setCurrentIsFocus(true);
   };
 
   const handleRoleChange = () => {
@@ -103,6 +124,7 @@ const MessageItem: React.FC<{
           autoSize={true}
           variant="filled"
           onChange={handleMessageChange}
+          onFocus={handleFocus}
           onBlur={handleBlur}
         ></Input.TextArea>
       </div>
@@ -110,6 +132,7 @@ const MessageItem: React.FC<{
         <Button
           type="text"
           shape="circle"
+          size="small"
           style={{ color: 'var(--ant-color-primary)' }}
           onClick={handleDelete}
           icon={<MinusCircleOutlined />}