fix: submit message

2024-09-22 14:55:23 +08:00
parent af077c4706
commit 2e5f0d9210
21 changed files with 907 additions and 145 deletions
@@ -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;
@@ -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;
@@ -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 };
@@ -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',
@@ -1,6 +1,8 @@
 export default {
  'menu.dashboard': '概览',
  'menu.playground': '试验场',
+  'menu.chat': '聊天',
+  'menu.compare': '多模型对比',
  'menu.models': '模型',
  'menu.resources': '资源',
  'menu.apikeys': 'API 密钥',
@@ -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}
            >
@@ -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);
@@ -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;
@@ -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;
@@ -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);
@@ -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);
@@ -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);
@@ -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);
@@ -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">
-          {intl.formatMessage({ id: 'playground.model' })}
-        </h3>
-        <Form.Item<ParamsSettingsFormProps>
-          name="model"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
+        {showModelSelector && (
+          <>
+            <h3 className="m-b-20 m-l-10 font-size-14">
+              {intl.formatMessage({ id: 'playground.model' })}
+            </h3>
+            <Form.Item<ParamsSettingsFormProps>
+              name="model"
+              rules={[
                {
-                  id: 'common.form.rule.select'
-                },
-                { name: intl.formatMessage({ id: 'playground.model' }) }
-              )
-            }
-          ]}
-        >
-          <SealSelect showSearch options={ModelList}></SealSelect>
-        </Form.Item>
+                  required: true,
+                  message: intl.formatMessage(
+                    {
+                      id: 'common.form.rule.select'
+                    },
+                    { name: intl.formatMessage({ id: 'playground.model' }) }
+                  )
+                }
+              ]}
+            >
+              <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>
@@ -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
-            size="small"
-            type="text"
-            icon={<FileImageOutlined />}
-          ></Button>
+          <Button size="small" type="text" icon={<PictureOutlined />}></Button>
        </Tooltip>
      </Upload>
    </>
@@ -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;
@@ -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={[
-        <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"
-            className="m-l-5"
-            onClick={() => setCollapse(!collapse)}
-            icon={
-              <IconFont
-                type="icon-a-layout6-line"
-                className="font-size-16"
-              ></IconFont>
-            }
-          ></Button>
-        </Space>
-      ]}
-      className="playground-container"
+      header={{
+        title: (
+          <div className="flex items-center">
+            {intl.formatMessage({ id: 'menu.playground' })}
+            <Segmented
+              options={optionsList}
+              size="middle"
+              className="m-l-40"
+              onChange={(key) => setActiveKey(key)}
+            ></Segmented>
+          </div>
+        )
+      }}
+      extra={renderExtra()}
+      className={classNames('playground-container', {
+        compare: activeKey === 'compare'
+      })}
    >
      <div className="play-ground">
        <div className="chat">
-          <GroundLeft parameters={params} ref={groundLeftRef}></GroundLeft>
+          <Tabs items={items} activeKey={activeKey}></Tabs>
        </div>
-        <div
-          className={classNames('left', {
-            collapse: collapse
-          })}
-        >
+        {activeKey === 'chat' && (
          <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
-                setParams={setParams}
-                selectedModel={selectModel}
-              />
+              <Divider type="vertical" />
+            </div>
+            <div className={classNames('params')}>
+              <div
+                className={classNames('params-box', {
+                  collapse: collapse
+                })}
+              >
+                <ParamsSettings
+                  setParams={setParams}
+                  selectedModel={selectModel}
+                />
+              </div>
            </div>
          </div>
-        </div>
+        )}
      </div>
    </PageContainer>
  );
@@ -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;
-  width: max(50%, 500px);
-  background-color: var(--color-fill-1);
-  border-radius: 30px;
-  padding-right: 50px;
-  border: 1px solid transparent;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  padding-inline: 16px 16px;
+  padding-bottom: 10px;
+  border-top: 1px solid var(--ant-color-split);
  transition: all 0.2s ease;
-  &:focus-within {
-    border-color: var(--ant-input-active-border-color);
-    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);
+
+  .tool-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: 5px;
    }
  }

-  &:hover {
-    background: var(--ant-color-fill-secondary);
-    transition: background 0.2s ease;
+  &:focus-within {
+    // border-color: var(--ant-input-active-border-color);
+    // 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;
-    border-radius: 30px;
+    padding-inline: 6px 0;
+    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;
+    }
+  }
 }
@@ -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;
+  }
+}
@@ -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);
+  }
+}
@@ -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;
+    }
+  }
 }