fix: model list duplicate

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

@@ -13,6 +13,7 @@ import '../style/chat-footer.less';
 
 interface ChatFooterProps {
   onSubmit: () => void;
+  onStop: () => void;
   onClear: () => void;
   onNewMessage: () => void;
   onView: () => void;
@@ -26,6 +27,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
   const {
     onSubmit,
     onClear,
+    onStop,
     onNewMessage,
     onView,
     feedback,
@@ -40,6 +42,26 @@ 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>
+        </>
+      );
+    }
+    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%' }}>
@@ -71,12 +93,21 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
             >
               {intl.formatMessage({ id: 'playground.viewcode' })}
             </Button>
-            <Button disabled={disabled} type="primary" onClick={onSubmit}>
-              {intl.formatMessage({ id: 'common.button.submit' })}
-              <span className="m-l-5 opct-7">
-                <IconFont type="icon-command"></IconFont> + <EnterOutlined />
-              </span>
-            </Button>
+            {!disabled ? (
+              <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 />
+                </span>
+              </Button>
+            ) : (
+              <Button type="primary" onClick={onStop}>
+                {intl.formatMessage({ id: 'common.button.stop' })}
+                <span className="m-l-5">
+                  <IconFont type="icon-stop"></IconFont>
+                </span>
+              </Button>
+            )}
           </Space>
         </Col>
       </Row>

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

@@ -47,6 +47,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const [currentIsFocus, setCurrentIsFocus] = useState(false);
   const systemRef = useRef<any>(null);
   const contentRef = useRef<any>('');
+  const controllerRef = useRef<any>(null);
 
   const handleSystemMessageChange = (e: any) => {
     setSystemMessage(e.target.value);
@@ -88,11 +89,21 @@ const MessageList: React.FC<MessageProps> = (props) => {
     console.log('messageList=====', messageList, messageId.current, chunk);
     return false;
   };
+  const handleStopConversation = () => {
+    controllerRef.current?.abort?.();
+    setLoading(false);
+  };
+
   const submitMessage = async () => {
     try {
       setLoading(true);
       setMessageId();
       setTokenResult(null);
+
+      controllerRef.current?.abort?.();
+      controllerRef.current = new AbortController();
+      const signal = controllerRef.current.signal;
+
       contentRef.current = '';
       const chatParams = {
         messages: systemMessage
@@ -109,7 +120,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
       };
       const result = await fetchChunkedData({
         data: chatParams,
-        url: CHAT_API
+        url: CHAT_API,
+        signal
       });
 
       if (!result) {
@@ -246,6 +258,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
           onNewMessage={handleNewMessage}
           onSubmit={handleSubmit}
           onView={handleView}
+          onStop={handleStopConversation}
           disabled={loading}
           hasTokenResult={!!tokenResult}
           feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}

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

@@ -43,7 +43,7 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
 
       <span>
         {intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '}
-        {usage.tokens_per_second * 1000} Tokens/s
+        {usage.tokens_per_second} Tokens/s
       </span>
     </div>
   );

src/pages/playground/components/view-code-modal.tsx

@@ -137,7 +137,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         closeIcon={true}
         maskClosable={false}
         keyboard={false}
-        width={660}
+        width={600}
         footer={null}
       >
         <div style={{ marginBottom: '10px' }}>
@@ -152,7 +152,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
             onChangeLang={handleOnChangeLang}
           >
             <Editor
-              height="min(500px, 90vh)"
+              height="min(450px, 90vh)"
               theme="vs-dark"
               className="monaco-editor"
               defaultLanguage="shell"