fix: submit message

2024-09-22 14:55:23 +08:00
parent af077c4706
commit 2e5f0d9210
21 changed files with 907 additions and 145 deletions
@@ -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>
    </>