fix: submit message

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);