fix: submit message

src/assets/styles/common.less

@@ -38,6 +38,10 @@
   margin-left: 20px;
 }
 
+.m-l-40 {
+  margin-left: 40px;
+}
+
 .m-r-10 {
   margin-right: 10px;
 }
@@ -98,6 +102,11 @@
   opacity: 0.8;
 }
 
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .flex-column {
   display: flex;
   flex-direction: column;

src/components/icon-font/index.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_3n3aubqzylv.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_xpmv3m9655d.js'
 });
 
 export default IconFont;

src/config/global.d.ts

@@ -22,14 +22,14 @@ declare namespace Global {
     id: number;
   }
 
-  interface BaseListItem {
+  interface BaseListItem<T> {
     key: string;
-    value: string | number;
+    value: T;
   }
 
-  interface BaseOption {
+  interface BaseOption<T> {
     label: string;
-    value: string | number;
+    value: T;
   }
 
   type SearchParams = Pagination & { search?: string };

src/locales/en-US/menu.ts

@@ -1,6 +1,8 @@
 export default {
   'menu.dashboard': 'Dashboard',
   'menu.playground': 'Playground',
+  'menu.chat': 'Chat',
+  'menu.compare': 'Compare',
   'menu.models': 'Models',
   'menu.resources': 'Resources',
   'menu.apikeys': 'API Keys',

src/locales/zh-CN/menu.ts

@@ -1,6 +1,8 @@
 export default {
   'menu.dashboard': '概览',
   'menu.playground': '试验场',
+  'menu.chat': '聊天',
+  'menu.compare': '多模型对比',
   'menu.models': '模型',
   'menu.resources': '资源',
   'menu.apikeys': 'API 密钥',

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

@@ -1,7 +1,7 @@
 import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
 import { platformCall } from '@/utils';
-import { DeleteOutlined, EnterOutlined, PlusOutlined } from '@ant-design/icons';
+import { ClearOutlined, EnterOutlined, PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Col, Row, Space } from 'antd';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -64,7 +64,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
               {intl.formatMessage({ id: 'playground.newMessage' })}
             </Button>
             <Button
-              icon={<DeleteOutlined></DeleteOutlined>}
+              icon={<ClearOutlined />}
               onClick={onClear}
               disabled={disabled}
             >

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

@@ -8,6 +8,7 @@ import { Button, Input, Spin, Tooltip } from 'antd';
 import _ from 'lodash';
 import {
   forwardRef,
+  memo,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -347,4 +348,4 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
   );
 });
 
-export default MessageList;
+export default memo(MessageList);

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

@@ -0,0 +1,153 @@
+import IconFont from '@/components/icon-font';
+import HotKeys from '@/config/hotkeys';
+import { platformCall } from '@/utils';
+import {
+  ClearOutlined,
+  ControlOutlined,
+  PictureOutlined,
+  SendOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Input, Select } from 'antd';
+import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import '../style/message-input.less';
+
+const layoutOptions = [
+  {
+    label: '2 columns',
+    icon: 'icon-cols_2',
+    value: {
+      span: 12,
+      count: 2
+    },
+    tips: 'two models compare'
+  },
+  {
+    label: '3 columns',
+    icon: 'icon-cols_3',
+    value: {
+      span: 8,
+      count: 3
+    },
+    tips: 'three models compare'
+  },
+  {
+    label: '4 columns',
+    icon: 'icon-cols_4',
+    value: {
+      span: 6,
+      count: 4
+    },
+    tips: 'four models compare'
+  },
+  {
+    label: '6 columns',
+    icon: 'icon-cols_6',
+    value: {
+      span: 8,
+      count: 6
+    },
+    tips: 'six models compare'
+  }
+];
+
+interface MessageInputProps {
+  modelList: Global.BaseOption<string>[];
+  handleSubmit: (value: string) => void;
+  handleAbortFetch: () => void;
+  setParamsSettings: (value: Record<string, any>) => void;
+  setSpans: (value: { span: number; count: number }) => void;
+  loading: boolean;
+}
+
+const MessageInput: React.FC<MessageInputProps> = ({
+  handleSubmit,
+  handleAbortFetch,
+  setParamsSettings,
+  loading,
+  modelList,
+  setSpans
+}) => {
+  const { TextArea } = Input;
+  const intl = useIntl();
+  const platform = platformCall();
+  const [disabled, setDisabled] = useState(false);
+  const [message, setMessage] = useState('');
+  const handleInputChange = (value: string) => {
+    setMessage(value);
+  };
+  const handleSendMessage = () => {
+    handleSubmit(message);
+  };
+  const onStop = () => {
+    setDisabled(false);
+    handleAbortFetch();
+  };
+  const handleLayoutChange = (value: { span: number; count: number }) => {
+    console.log('layout change:', value);
+    setSpans(value);
+  };
+  useHotkeys(
+    HotKeys.SUBMIT.join(','),
+    () => {
+      handleSendMessage();
+    },
+    { preventDefault: true }
+  );
+  return (
+    <div className="messageInput">
+      <div className="tool-bar">
+        <div className="actions">
+          <Button type="text" icon={<PictureOutlined />} size="middle"></Button>
+          <Button type="text" icon={<ClearOutlined />} size="middle"></Button>
+          <Button type="text" icon={<ControlOutlined />} size="middle"></Button>
+
+          {layoutOptions.map((option) => (
+            <Button
+              key={option.icon}
+              type="text"
+              icon={<IconFont type={option.icon}></IconFont>}
+              size="middle"
+              onClick={() => handleLayoutChange(option.value)}
+            ></Button>
+          ))}
+        </div>
+        <div className="actions">
+          <Select
+            variant="borderless"
+            style={{ width: 200 }}
+            placeholder="select models"
+            options={modelList}
+            mode="multiple"
+            maxCount={6}
+            maxTagCount={0}
+            maxTagTextLength={15}
+          ></Select>
+          {!loading ? (
+            <Button type="primary" onClick={handleSendMessage} size="middle">
+              <SendOutlined />
+            </Button>
+          ) : (
+            <Button
+              type="primary"
+              onClick={onStop}
+              size="middle"
+              icon={<IconFont type="icon-stop1"></IconFont>}
+            ></Button>
+          )}
+        </div>
+      </div>
+      <TextArea
+        placeholder="Send your message"
+        autoSize={{ minRows: 3, maxRows: 3 }}
+        onChange={(e) => handleInputChange(e.target.value)}
+        value={message}
+        size="large"
+        variant="borderless"
+      ></TextArea>
+    </div>
+  );
+};
+
+export default MessageInput;

src/pages/playground/components/messageInput.tsx

@@ -1,43 +0,0 @@
-import { SendOutlined } from '@ant-design/icons';
-import { Button, Input } from 'antd';
-import { useState } from 'react';
-import '../style/message-input.less';
-
-const MessageInput: React.FC = () => {
-  const { TextArea } = Input;
-  const [message, setMessage] = useState('');
-  const handleInputChange = (value: string) => {
-    setMessage(value);
-  };
-  const handleSendMessage = () => {
-    console.log('send message:', message);
-  };
-  const SendButton: React.FC = () => {
-    return (
-      <Button
-        type="primary"
-        shape="circle"
-        size="middle"
-        icon={<SendOutlined />}
-        onClick={() => handleSendMessage()}
-      ></Button>
-    );
-  };
-  return (
-    <div className="messageInput">
-      <TextArea
-        placeholder="send your message"
-        autoSize={{ minRows: 1, maxRows: 6 }}
-        onChange={(e) => handleInputChange(e.target.value)}
-        value={message}
-        size="large"
-        variant="borderless"
-      ></TextArea>
-      <span className="send-btn">
-        <SendButton />
-      </span>
-    </div>
-  );
-};
-
-export default MessageInput;

src/pages/playground/components/multiple-chat/content-item.tsx

@@ -0,0 +1,19 @@
+import { useIntl } from '@umijs/max';
+import React from 'react';
+
+const ContentItem: React.FC<{ data: { role: string; content: string } }> = ({
+  data
+}) => {
+  const intl = useIntl();
+  return (
+    <div className="content-item">
+      <div className="content-item-role">
+        {' '}
+        {intl.formatMessage({ id: `playground.${data.role}` })}
+      </div>
+      <div className="content-item-content">{data.content}</div>
+    </div>
+  );
+};
+
+export default React.memo(ContentItem);

src/pages/playground/components/multiple-chat/index.tsx

@@ -0,0 +1,126 @@
+import { Col, Row } from 'antd';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import '../../style/multiple-chat.less';
+import MessageInput from '../message-input';
+import ModelItem from './model-item';
+
+interface MultiCompareProps {
+  modelList: Global.BaseOption<string>[];
+  parmasSettings?: Record<string, any>;
+  spans?: number;
+}
+
+const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
+  const [loadingStatus, setLoadingStatus] = useState<boolean[]>([]);
+  const [parmasSettings, setParamsSettings] = useState<Record<string, any>>({});
+  const [systemMessage, setSystemMessage] = useState<string>('');
+  const [currentMessage, setCurrentMessage] = useState<
+    {
+      role: 'user' | 'assistant';
+      content: string;
+    }[]
+  >([]);
+  const [globalParams, setGlobalParams] = useState<Record<string, any>>({
+    seed: null,
+    stop: null,
+    temperature: 1,
+    top_p: 1,
+    max_tokens: 1024
+  });
+  const [spans, setSpans] = useState<{
+    span: number;
+    count: number;
+  }>({
+    span: 12,
+    count: 2
+  });
+  const modelRefs = useRef<any[]>([]);
+
+  const isLoading = useMemo(() => {
+    return loadingStatus.some((status) => status);
+  }, [loadingStatus]);
+
+  const modelSelections = useMemo(() => {
+    const list = modelList.slice?.(0, spans.count);
+    return list;
+  }, [modelList, spans.count]);
+
+  useEffect(() => {
+    modelRefs.current = modelSelections.map(() => {
+      return {};
+    });
+  }, [modelSelections]);
+
+  const handleSubmit = (message: string) => {
+    let msg: any[] = [];
+    if (message) {
+      msg = [
+        {
+          role: 'user',
+          content: message
+        }
+      ];
+    }
+    modelRefs.current.forEach(async (ref, index) => {
+      ref?.setMessageList((preList: any) => {
+        return [...preList, ...msg];
+      });
+      setLoadingStatus((preStatus) => {
+        const newState = [...preStatus];
+        newState[index] = true;
+        return newState;
+      });
+      await ref?.submit();
+      setLoadingStatus((preStatus) => {
+        const newState = [...preStatus];
+        newState[index] = false;
+        return newState;
+      });
+    });
+  };
+
+  const handleAbortFetch = () => {
+    modelRefs.current.forEach((ref) => {
+      ref?.abortFetch();
+    });
+  };
+
+  const setModelRefs = (index: number, ref: any) => {
+    modelRefs.current[index] = ref;
+  };
+
+  return (
+    <div className="multiple-chat">
+      <div className="chat-list">
+        <Row gutter={[16, 16]} style={{ height: '100%' }}>
+          {modelSelections.map((model, index) => (
+            <Col span={spans.span} key={model.value}>
+              <ModelItem
+                ref={(el: any) => setModelRefs(index, el)}
+                modelList={modelSelections}
+                globalParams={{
+                  ...globalParams,
+                  model: model.value
+                }}
+                systemMessage={systemMessage}
+                setGlobalParams={setGlobalParams}
+              />
+            </Col>
+          ))}
+        </Row>
+      </div>
+      <div>
+        <MessageInput
+          loading={isLoading}
+          handleSubmit={handleSubmit}
+          handleAbortFetch={handleAbortFetch}
+          setParamsSettings={setParamsSettings}
+          setSpans={setSpans}
+          modelList={modelList}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default memo(MultiCompare);

src/pages/playground/components/multiple-chat/message-content.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ContentItem from './content-item';
+
+interface MessageContentProps {
+  messageList: {
+    role: string;
+    uid?: string;
+    content: string;
+  }[];
+}
+
+const MessageContent: React.FC<MessageContentProps> = ({ messageList }) => {
+  return (
+    <div>
+      {messageList.map((item, index) => (
+        <ContentItem key={index} data={item} />
+      ))}
+    </div>
+  );
+};
+
+export default React.memo(MessageContent);

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -0,0 +1,186 @@
+import IconFont from '@/components/icon-font';
+import {
+  ClearOutlined,
+  CloseOutlined,
+  MoreOutlined,
+  SettingOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Checkbox, Dropdown, Popover, Select } from 'antd';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+import useChatCompletion from '../../hooks/use-chat-completion';
+import '../../style/model-item.less';
+import ParamsSettings from '../params-settings';
+import MessageContent from './message-content';
+
+interface ModelItemProps {
+  model?: string;
+  globalParams: Record<string, any>;
+  setGlobalParams: (value: Record<string, any>) => void;
+  modelList: Global.BaseOption<string>[];
+  systemMessage: string;
+  ref: any;
+}
+
+const ModelItem: React.FC<ModelItemProps> = forwardRef(
+  ({ model, systemMessage, modelList, globalParams, setGlobalParams }, ref) => {
+    const intl = useIntl();
+    const isApplyToAllModels = useRef(false);
+    const [params, setParams] = useState<Record<string, any>>({});
+    // const [messageList, setMessageList] = useState<
+    //   {
+    //     role: 'user' | 'assistant';
+    //     content: string;
+    //   }[]
+    // >([]);
+    const { messageList, submitMessage, abortFetch, setMessageList, loading } =
+      useChatCompletion(systemMessage, params);
+
+    useImperativeHandle(ref, () => {
+      return {
+        submit: submitMessage,
+        abortFetch,
+        setMessageList,
+        loading
+      };
+    });
+
+    const actions = [
+      {
+        label: intl.formatMessage({ id: 'common.button.clear' }),
+        key: 'clear',
+        icon: <ClearOutlined />
+      },
+      {
+        label: intl.formatMessage({ id: 'playground.viewcode' }),
+        key: 'viewcode',
+        icon: <IconFont type="icon-code" />
+      }
+    ];
+
+    const handleModelChange = (value: string) => {
+      setParams({
+        ...params,
+        model: value
+      });
+    };
+
+    const handleApplyToAllModels = (e: any) => {
+      console.log('checkbox change:', e.target.checked);
+      isApplyToAllModels.current = e.target.checked;
+      if (e.target.checked) {
+        setGlobalParams({
+          ...params
+        });
+      }
+    };
+
+    const handleOnValuesChange = (
+      changeValues: any,
+      allValues: Record<string, any>
+    ) => {
+      console.log('value:', allValues, isApplyToAllModels.current);
+      if (isApplyToAllModels.current) {
+        setParams({
+          ...params,
+          ...allValues
+        });
+        setGlobalParams({
+          ...allValues
+        });
+      } else {
+        setParams({
+          ...params,
+          ...changeValues
+        });
+      }
+    };
+
+    const handleDropdownAction = ({ key }: { key: string }) => {
+      console.log('key:', key);
+    };
+
+    useEffect(() => {
+      console.log('globalParams:', globalParams.model, globalParams);
+      setParams({
+        ...params,
+        ...globalParams
+      });
+    }, [globalParams]);
+
+    useEffect(() => {
+      return () => {
+        abortFetch();
+      };
+    }, []);
+
+    return (
+      <div className="model-item">
+        <div className="header">
+          <span className="title">
+            <Select
+              variant="borderless"
+              options={modelList}
+              onChange={handleModelChange}
+              value={params.model}
+            ></Select>
+          </span>
+          <span className="action">
+            <Dropdown
+              menu={{ items: actions, onSelect: handleDropdownAction }}
+              placement="bottomRight"
+            >
+              <Button
+                type="text"
+                icon={<MoreOutlined style={{ fontSize: '14px' }} />}
+                size="small"
+              ></Button>
+            </Dropdown>
+            <Popover
+              content={
+                <ParamsSettings
+                  showModelSelector={false}
+                  setParams={setParams}
+                  globalParams={globalParams}
+                  onValuesChange={handleOnValuesChange}
+                />
+              }
+              trigger={['click']}
+              arrow={false}
+              fresh={true}
+              title={
+                <div>
+                  <Checkbox onChange={handleApplyToAllModels}>
+                    Apply to all models
+                  </Checkbox>
+                </div>
+              }
+            >
+              <Button
+                type="text"
+                icon={<SettingOutlined />}
+                size="small"
+              ></Button>
+            </Popover>
+            <Button type="text" icon={<CloseOutlined />} size="small"></Button>
+          </span>
+        </div>
+        <SimpleBar style={{ height: 'calc(100% - 46px)' }}>
+          <div className="content">
+            <MessageContent messageList={messageList} />
+          </div>
+        </SimpleBar>
+      </div>
+    );
+  }
+);
+
+export default React.memo(ModelItem);

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

@@ -6,7 +6,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Form, InputNumber, Slider, Tooltip } from 'antd';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { queryModelsList } from '../apis';
 import CustomLabelStyles from '../style/custom-label.less';
 
@@ -15,19 +15,27 @@ type ParamsSettingsFormProps = {
   stop?: number;
   temperature?: number;
   top_p?: number;
-  model?: string;
   max_tokens?: number;
+  model?: string;
 };
 
 type ParamsSettingsProps = {
   selectedModel?: string;
+  showModelSelector?: boolean;
   params?: ParamsSettingsFormProps;
+  model?: string;
+  onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
   setParams: (params: any) => void;
+  globalParams?: ParamsSettingsFormProps;
 };
 
 const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   selectedModel,
-  setParams
+  setParams,
+  globalParams,
+  onValuesChange,
+  model,
+  showModelSelector = true
 }) => {
   const intl = useIntl();
   const [ModelList, setModelList] = useState([]);
@@ -36,9 +44,11 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
     stop: null,
     temperature: 1,
     top_p: 1,
-    max_tokens: 1024
+    max_tokens: 1024,
+    ...globalParams
   };
   const [form] = Form.useForm();
+  const formId = useId();
 
   useEffect(() => {
     const getModelList = async () => {
@@ -86,7 +96,9 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   };
 
   const handleValuesChange = (changedValues: any, allValues: any) => {
+    console.log('changedValues===', changedValues);
     setParams?.(allValues);
+    onValuesChange?.(changedValues, allValues);
   };
   const handleFieldValueChange = (val: any, field: string) => {
     const values = form.getFieldsValue();
@@ -98,12 +110,24 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
       ...values,
       [field]: val
     });
+    onValuesChange?.(
+      { [field]: val },
+      {
+        ...values,
+        [field]: val
+      }
+    );
   };
 
   const handleResetParams = () => {
     form.setFieldsValue(initialValues);
     setParams(initialValues);
   };
+
+  useEffect(() => {
+    form.setFieldsValue(globalParams);
+    console.log('globalParams=========11111', model, globalParams);
+  }, [globalParams]);
   const renderLabel = (args: {
     field: string;
     label: string;
@@ -141,32 +165,40 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
 
   return (
     <Form
-      name="modelparams"
+      name={formId}
       form={form}
       onValuesChange={handleValuesChange}
       onFinish={handleOnFinish}
       onFinishFailed={handleOnFinishFailed}
     >
       <div>
-        <h3 className="m-b-15 m-l-10 font-size-14">
+        {showModelSelector && (
-          {intl.formatMessage({ id: 'playground.model' })}
+          <>
-        </h3>
+            <h3 className="m-b-20 m-l-10 font-size-14">
-        <Form.Item<ParamsSettingsFormProps>
+              {intl.formatMessage({ id: 'playground.model' })}
-          name="model"
+            </h3>
-          rules={[
+            <Form.Item<ParamsSettingsFormProps>
-            {
+              name="model"
-              required: true,
+              rules={[
-              message: intl.formatMessage(
                 {
-                  id: 'common.form.rule.select'
+                  required: true,
-                },
+                  message: intl.formatMessage(
-                { name: intl.formatMessage({ id: 'playground.model' }) }
+                    {
-              )
+                      id: 'common.form.rule.select'
-            }
+                    },
-          ]}
+                    { name: intl.formatMessage({ id: 'playground.model' }) }
-        >
+                  )
-          <SealSelect showSearch options={ModelList}></SealSelect>
+                }
-        </Form.Item>
+              ]}
+            >
+              <SealSelect
+                showSearch
+                options={ModelList}
+                label={intl.formatMessage({ id: 'playground.model' })}
+              ></SealSelect>
+            </Form.Item>
+          </>
+        )}
         <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14">
           <span>{intl.formatMessage({ id: 'playground.parameters' })}</span>
         </h3>

src/pages/playground/components/upload-img.tsx

@@ -1,4 +1,4 @@
-import { FileImageOutlined } from '@ant-design/icons';
+import { PictureOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
 import type { UploadFile } from 'antd/es/upload';
@@ -71,11 +71,7 @@ const UploadImg: React.FC<UploadImgProps> = ({ handleUpdateImgList }) => {
         onChange={handleChange}
       >
         <Tooltip title={intl.formatMessage({ id: 'playground.img.upload' })}>
-          <Button
+          <Button size="small" type="text" icon={<PictureOutlined />}></Button>
-            size="small"
-            type="text"
-            icon={<FileImageOutlined />}
-          ></Button>
         </Tooltip>
       </Upload>
     </>

src/pages/playground/hooks/use-chat-completion.ts

@@ -0,0 +1,115 @@
+import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
+import _ from 'lodash';
+import { useRef, useState } from 'react';
+import { CHAT_API } from '../apis';
+import { Roles } from '../config';
+
+interface MessageItemProps {
+  role: string | number;
+  content: string;
+  uid: number;
+}
+
+const useChatCompletion = (
+  systemMessage: string,
+  parameters: Record<string, any>
+) => {
+  const [loading, setLoading] = useState(false);
+  const messageId = useRef<number>(0);
+  const [messageList, setMessageList] = useState<MessageItemProps[]>([
+    {
+      role: 'user',
+      content: '',
+      uid: messageId.current
+    }
+  ]);
+  const contentRef = useRef<any>('');
+  const controllerRef = useRef<any>(null);
+
+  const setMessageId = () => {
+    messageId.current = messageId.current + 1;
+  };
+
+  const abortFetch = () => {
+    controllerRef.current?.abort?.();
+  };
+
+  const joinMessage = (chunk: any) => {
+    if (!chunk) {
+      return;
+    }
+    if (_.get(chunk, 'choices.0.finish_reason')) {
+      return;
+    }
+    contentRef.current =
+      contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
+    setMessageList([
+      ...messageList,
+      {
+        role: Roles.Assistant,
+        content: contentRef.current,
+        uid: messageId.current
+      }
+    ]);
+  };
+
+  const submitMessage = async () => {
+    if (!parameters.model) return;
+    try {
+      setLoading(true);
+      setMessageId();
+
+      controllerRef.current?.abort?.();
+      controllerRef.current = new AbortController();
+      const signal = controllerRef.current.signal;
+      const messages = _.map(messageList, (item: MessageItemProps) => {
+        return {
+          role: item.role,
+          content: item.content
+        };
+      });
+
+      contentRef.current = '';
+      const chatParams = {
+        messages: systemMessage
+          ? [
+              {
+                role: Roles.System,
+                content: systemMessage
+              },
+              ...messages
+            ]
+          : [...messages],
+        ...parameters,
+        stream: true
+      };
+      const result = await fetchChunkedData({
+        data: chatParams,
+        url: CHAT_API,
+        signal
+      });
+
+      if (!result) {
+        return;
+      }
+      const { reader, decoder } = result;
+      await readStreamData(reader, decoder, (chunk: any) => {
+        joinMessage(chunk);
+      });
+      setLoading(false);
+    } catch (error) {
+      console.log('error=====', error);
+      setLoading(false);
+    }
+  };
+
+  return {
+    loading,
+    messageList,
+    setMessageList,
+    submitMessage,
+    abortFetch
+  };
+};
+
+export default useChatCompletion;

src/pages/playground/index.tsx

@@ -1,12 +1,16 @@
 import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
+import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useSearchParams } from '@umijs/max';
-import { Button, Divider, Space } from 'antd';
+import { Button, Divider, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
-import { useRef, useState } from 'react';
+import _ from 'lodash';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { queryModelsList } from './apis';
 import GroundLeft from './components/ground-left';
+import MultipleChat from './components/multiple-chat';
 import ParamsSettings from './components/params-settings';
 import './style/play-ground.less';
 
@@ -16,10 +20,87 @@ const Playground: React.FC = () => {
   const selectModel = searchParams.get('model') || '';
   const [params, setParams] = useState({});
   const [collapse, setCollapse] = useState(false);
+  const [activeKey, setActiveKey] = useState('chat');
   const groundLeftRef = useRef<any>(null);
+  const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
+  const optionsList = [
+    {
+      label: intl.formatMessage({ id: 'menu.chat' }),
+      value: 'chat',
+      icon: <MessageOutlined />
+    },
+    {
+      label: intl.formatMessage({ id: 'menu.compare' }),
+      value: 'compare',
+      icon: <OneToOneOutlined />
+    }
+  ];
 
-  const handleViewCode = () => {
+  const handleViewCode = useCallback(() => {
     groundLeftRef.current?.viewCode?.();
+  }, [groundLeftRef]);
+
+  const items: TabsProps['items'] = [
+    {
+      key: 'chat',
+      label: 'Chat',
+      children: (
+        <GroundLeft parameters={params} ref={groundLeftRef}></GroundLeft>
+      )
+    },
+    {
+      key: 'compare',
+      label: 'Compare',
+      children: <MultipleChat modelList={modelList} />
+    }
+  ];
+
+  useEffect(() => {
+    const getModelList = async () => {
+      try {
+        const params = {
+          embedding_only: false
+        };
+        const res = await queryModelsList(params);
+        const list = _.map(res.data || [], (item: any) => {
+          return {
+            value: item.id,
+            label: item.id
+          };
+        }) as Global.BaseOption<string>[];
+        setModelList(list);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    getModelList();
+  }, []);
+
+  const renderExtra = () => {
+    if (activeKey === 'compare') {
+      return false;
+    }
+    return (
+      <Space key="buttons">
+        <Button
+          size="middle"
+          onClick={handleViewCode}
+          icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
+        >
+          {intl.formatMessage({ id: 'playground.viewcode' })}
+        </Button>
+        <Button
+          size="middle"
+          onClick={() => setCollapse(!collapse)}
+          icon={
+            <IconFont
+              type="icon-a-layout6-line"
+              className="font-size-16"
+            ></IconFont>
+          }
+        ></Button>
+      </Space>
+    );
   };
 
   useHotkeys(
@@ -37,61 +118,55 @@ const Playground: React.FC = () => {
   return (
     <PageContainer
       ghost
-      extra={[
+      header={{
-        <Space key="buttons">
+        title: (
-          <Button
+          <div className="flex items-center">
-            size="middle"
+            {intl.formatMessage({ id: 'menu.playground' })}
-            onClick={handleViewCode}
+            <Segmented
-            icon={
+              options={optionsList}
-              <IconFont type="icon-code" className="font-size-16"></IconFont>
+              size="middle"
-            }
+              className="m-l-40"
-          >
+              onChange={(key) => setActiveKey(key)}
-            {intl.formatMessage({ id: 'playground.viewcode' })}
+            ></Segmented>
-          </Button>
+          </div>
-          <Button
+        )
-            size="middle"
+      }}
-            className="m-l-5"
+      extra={renderExtra()}
-            onClick={() => setCollapse(!collapse)}
+      className={classNames('playground-container', {
-            icon={
+        compare: activeKey === 'compare'
-              <IconFont
+      })}
-                type="icon-a-layout6-line"
-                className="font-size-16"
-              ></IconFont>
-            }
-          ></Button>
-        </Space>
-      ]}
-      className="playground-container"
     >
       <div className="play-ground">
         <div className="chat">
-          <GroundLeft parameters={params} ref={groundLeftRef}></GroundLeft>
+          <Tabs items={items} activeKey={activeKey}></Tabs>
         </div>
-        <div
+        {activeKey === 'chat' && (
-          className={classNames('left', {
-            collapse: collapse
-          })}
-        >
           <div
-            className={classNames('divider-line', {
+            className={classNames('left', {
               collapse: collapse
             })}
           >
-            <Divider type="vertical" />
-          </div>
-          <div className={classNames('params')}>
             <div
-              className={classNames('params-box', {
+              className={classNames('divider-line', {
                 collapse: collapse
               })}
             >
-              <ParamsSettings
+              <Divider type="vertical" />
-                setParams={setParams}
+            </div>
-                selectedModel={selectModel}
+            <div className={classNames('params')}>
-              />
+              <div
+                className={classNames('params-box', {
+                  collapse: collapse
+                })}
+              >
+                <ParamsSettings
+                  setParams={setParams}
+                  selectedModel={selectModel}
+                />
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
     </PageContainer>
   );

src/pages/playground/style/message-input.less

@@ -2,6 +2,7 @@
   padding-block: 20px;
   padding-bottom: 30px;
   border: none;
+
   .ant-pro-footer-bar-right {
     width: 100%;
     display: flex;
@@ -9,36 +10,54 @@
     align-items: center;
   }
 }
+
 .messageInput {
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
+  flex-direction: column;
-  width: max(50%, 500px);
+  justify-content: space-between;
-  background-color: var(--color-fill-1);
+  width: 100%;
-  border-radius: 30px;
+  padding-inline: 16px 16px;
-  padding-right: 50px;
+  padding-bottom: 10px;
-  border: 1px solid transparent;
+  border-top: 1px solid var(--ant-color-split);
   transition: all 0.2s ease;
-  &:focus-within {
+
-    border-color: var(--ant-input-active-border-color);
+  .tool-bar {
-    box-shadow: var(--ant-input-active-shadow);
+    display: flex;
-    background-color: var(--color-white-1);
+    justify-content: space-between;
-    transition: all 0.2s ease;
+    align-items: center;
-    &:hover {
+    height: 40px;
-      background-color: var(--color-white-1);
+    width: 100%;
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: 5px;
     }
   }
 
-  &:hover {
+  &:focus-within {
-    background: var(--ant-color-fill-secondary);
+    // border-color: var(--ant-input-active-border-color);
-    transition: background 0.2s ease;
+    // box-shadow: var(--ant-input-active-shadow);
+    // background-color: var(--color-white-1);
+    // transition: all 0.2s ease;
+    // &:hover {
+    //   background-color: var(--color-white-1);
+    // }
   }
+
+  &:hover {
+    // background: var(--ant-color-fill-secondary);
+    // transition: background 0.2s ease;
+  }
+
   textarea {
-    padding: 16px;
+    padding-inline: 6px 0;
-    border-radius: 30px;
+    padding-block: 0;
     background-color: transparent;
   }
+
   textarea::-webkit-scrollbar {
     width: 8px;
   }
@@ -51,13 +70,17 @@
     background-color: #d9d9d9;
     border-radius: 6px;
   }
+
   .send-btn {
-    position: absolute;
-    right: 10px;
-    bottom: 11px;
     display: flex;
     justify-content: center;
     align-items: center;
     transform: rotate(-30deg);
   }
+
+  .ant-select-selector {
+    .ant-select-selection-overflow {
+      justify-content: flex-end;
+    }
+  }
 }

src/pages/playground/style/model-item.less

@@ -0,0 +1,21 @@
+.model-item {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--border-radius-base);
+  height: 100%;
+
+  .header {
+    padding-inline: 2px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 46px;
+    border-bottom: 1px solid var(--ant-color-border);
+  }
+
+  .content {
+    flex: 1;
+    padding: 16px;
+  }
+}

src/pages/playground/style/multiple-chat.less

@@ -0,0 +1,12 @@
+.multiple-chat {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 72px);
+
+  .chat-list {
+    flex: 1;
+    padding-bottom: 16px;
+    padding-inline: var(--layout-content-inlinepadding);
+  }
+}

src/pages/playground/style/play-ground.less

@@ -2,6 +2,10 @@
   display: flex;
   align-items: flex-start;
 
+  .ant-tabs-nav {
+    display: none;
+  }
+
   .left {
     position: relative;
     display: flex;
@@ -71,4 +75,11 @@
   .ant-pro-page-container-children-container {
     padding-right: 0;
   }
+
+  &.compare {
+    .ant-pro-page-container-children-container {
+      padding-inline: 0;
+      padding-block: 0;
+    }
+  }
 }