refactor: playground add comparsion

2024-09-22 14:55:23 +08:00
parent 1abaa164f5
commit c04b9342b8
32 changed files with 1206 additions and 425 deletions
@@ -1,27 +1,256 @@
+import CopyButton from '@/components/copy-button';
 import IconFont from '@/components/icon-font';
-import { UserOutlined } from '@ant-design/icons';
+import { CloseOutlined, SwapOutlined, UserOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import React from 'react';
+import { Button, Input, Tooltip } from 'antd';
+import classNames from 'classnames';
+import _ from 'lodash';
+import React, { useCallback, useRef, useState } from 'react';
 import { Roles } from '../../config';
+import { MessageItem } from '../../config/types';
 import '../../style/content-item.less';
+import ThumbImg from '../thumb-img';
+import UploadImg from '../upload-img';

-const ContentItem: React.FC<{ data: { role: string; content: string } }> = ({
-  data
+interface MessageItemProps {
+  data: MessageItem;
+  editable?: boolean;
+  loading?: boolean;
+  updateMessage?: (message: MessageItem) => void;
+  onDelete?: () => void;
+}
+
+const ContentItem: React.FC<MessageItemProps> = ({
+  updateMessage,
+  onDelete,
+  loading,
+  data,
+  editable
 }) => {
  const intl = useIntl();
+  const inputRef = useRef<any>(null);
+  const imgCountRef = useRef(0);
+  const [imgList, setImgList] = useState<
+    { uid: number | string; dataUrl: string }[]
+  >([]);
+
+  const handleMessageChange = (e: any) => {
+    updateMessage?.({
+      imgs: data.imgs || [],
+      role: data.role,
+      content: e.target.value,
+      uid: data.uid
+    });
+  };
+
+  const handleToggleRole = () => {
+    updateMessage?.({
+      imgs: data.imgs || [],
+      role: data.role === Roles.User ? Roles.Assistant : Roles.User,
+      content: data.content,
+      uid: data.uid
+    });
+  };
+
+  const getPasteContent = useCallback(async (event: any) => {
+    const clipboardData = event.clipboardData || window.clipboardData;
+    const items = clipboardData.items;
+    const imgPromises: Promise<string>[] = [];
+
+    for (let i = 0; i < items.length; i++) {
+      let item = items[i];
+      console.log('item===========', item);
+
+      if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
+        const file = item.getAsFile();
+        const imgPromise = new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = function (event) {
+            const base64String = event.target?.result as string;
+            if (base64String) {
+              resolve(base64String);
+            } else {
+              reject('Failed to convert image to base64');
+            }
+          };
+          reader.readAsDataURL(file);
+        });
+        imgPromises.push(imgPromise);
+      } else if (item.kind === 'string') {
+        // string
+      }
+    }
+
+    try {
+      const imgs = await Promise.all(imgPromises);
+      if (imgs.length) {
+        const list = _.map(imgs, (img: string) => {
+          imgCountRef.current += 1;
+          return {
+            uid: imgCountRef.current,
+            dataUrl: img
+          };
+        });
+        // setImgList((pre) => {
+        //   return [...pre, ...list];
+        // });
+        updateMessage?.({
+          role: data.role,
+          content: data.content,
+          uid: data.uid,
+          imgs: [...(data.imgs || []), ...list]
+        });
+      }
+    } catch (error) {
+      console.error('Error processing images:', error);
+    }
+  }, []);
+
+  const handleOnPaste = useCallback(
+    (e: any) => {
+      const text = e.clipboardData.getData('text');
+      if (text) {
+        updateMessage?.({
+          role: data.role,
+          content: inputRef.current?.resizableTextArea?.textArea?.value || '',
+          uid: data.uid
+        });
+      } else {
+        getPasteContent(e);
+      }
+    },
+    [getPasteContent, data, updateMessage]
+  );
+
+  const handleUpdateImgList = useCallback(
+    (list: { uid: number | string; dataUrl: string }[]) => {
+      // setImgList((preList) => {
+      //   return [...preList, ...list];
+      // });
+      console.log('list===========', data.imgs, list);
+      updateMessage?.({
+        role: data.role,
+        content: data.content,
+        uid: data.uid,
+        imgs: [...(data.imgs || []), ...list]
+      });
+    },
+    [data]
+  );
+
+  const handleDeleteImg = (uid: number | string) => {
+    const list = _.filter(data.imgs, (item: MessageItem) => item.uid !== uid);
+    // setImgList(list);
+    updateMessage?.({
+      role: data.role,
+      content: data.content,
+      uid: data.uid,
+      imgs: list
+    });
+  };
+
+  const handleDeleteLastImage = useCallback(() => {
+    if (data.imgs && data.imgs?.length > 0) {
+      const newImgList = [...(data.imgs || [])];
+      const lastImage = newImgList.pop();
+      if (lastImage) {
+        handleDeleteImg(lastImage.uid);
+      }
+    }
+  }, [data.imgs, handleDeleteImg]);
+
+  const handleKeyDown = useCallback(
+    (event: any) => {
+      if (
+        event.key === 'Backspace' &&
+        data.content === '' &&
+        data.imgs &&
+        data.imgs?.length > 0
+      ) {
+        // inputref blur
+        event.preventDefault();
+        handleDeleteLastImage();
+      }
+    },
+    [data, handleDeleteLastImage]
+  );
+
+  const handleClickWrapper = (e: any) => {
+    console.log('e===========', e);
+    e.stopPropagation();
+    e.preventDefault();
+    inputRef.current.focus();
+  };
+
  return (
    <div className="content-item">
      <div className="content-item-role">
-        <span className="m-r-5">
-          {Roles.User === data.role ? (
-            <UserOutlined></UserOutlined>
-          ) : (
-            <IconFont type="icon-AIzhineng"></IconFont>
+        <div className="role" onClick={handleToggleRole}>
+          <span className="m-r-5">
+            {Roles.User === data.role ? (
+              <UserOutlined></UserOutlined>
+            ) : (
+              <IconFont type="icon-AIzhineng"></IconFont>
+            )}
+          </span>
+          {intl.formatMessage({ id: `playground.${data.role}` })}
+          <SwapOutlined rotate={90} className="m-l-5" />
+        </div>
+        <div className="actions">
+          {editable && (
+            <UploadImg handleUpdateImgList={handleUpdateImgList}></UploadImg>
          )}
-        </span>
-        {intl.formatMessage({ id: `playground.${data.role}` })}
+          {data.content && (
+            <CopyButton
+              text={data.content}
+              size="small"
+              shape="default"
+              type="text"
+              fontSize="12px"
+            ></CopyButton>
+          )}
+          {editable && (
+            <Tooltip title={intl.formatMessage({ id: 'common.button.delete' })}>
+              <Button
+                size="small"
+                type="text"
+                onClick={onDelete}
+                icon={<CloseOutlined />}
+              ></Button>
+            </Tooltip>
+          )}
+        </div>
      </div>
-      <div className="content-item-content">{data.content}</div>
+      {editable ? (
+        <div
+          className={classNames('message-content-input', {
+            'has-img': data.imgs?.length
+          })}
+          onClick={handleClickWrapper}
+        >
+          <ThumbImg
+            dataList={data.imgs || []}
+            onDelete={handleDeleteImg}
+          ></ThumbImg>
+          <Input.TextArea
+            ref={inputRef}
+            value={data.content}
+            variant="filled"
+            autoSize={{ minRows: 1 }}
+            style={{
+              borderRadius: 'var(--border-radius-mini)'
+            }}
+            readOnly={loading}
+            onKeyDown={handleKeyDown}
+            onChange={handleMessageChange}
+            onPaste={handleOnPaste}
+          ></Input.TextArea>
+        </div>
+      ) : (
+        <div className="content-item-content">
+          <span>{data.content}</span>
+        </div>
+      )}
    </div>
  );
 };
@@ -1,11 +1,13 @@
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CompareContext from '../../config/compare-context';
-import { ModelSelectionItem } from '../../config/types';
+import { MessageItem, ModelSelectionItem } from '../../config/types';
 import '../../style/multiple-chat.less';
 import MessageInput from '../message-input';
 import ActiveModels from './active-models';

+type CurrentMessage = Omit<MessageItem, 'uid'>;
+
 interface MultiCompareProps {
  modelList: (Global.BaseOption<string> & { type?: string })[];
  spans?: number;
@@ -61,7 +63,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
    loadingStatus[instanceId] = false;
  };

-  const handleSubmit = (currentMessage: { role: string; content: string }) => {
+  const handleSubmit = (currentMessage: CurrentMessage) => {
    const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
    modelRefList.forEach((instanceId: symbol) => {
      const ref = modelRefs.current[instanceId];
@@ -69,7 +71,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
    });
  };

-  const handleAddMessage = (message: { role: string; content: string }) => {
+  const handleAddMessage = (message: CurrentMessage) => {
    const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
    modelRefList.forEach((instanceId: symbol) => {
      const ref = modelRefs.current[instanceId];
@@ -218,13 +220,6 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
    setModelSelections(resultList);
  }, [modelList]);

-  // useEffect(() => {
-  //   modelRefs.current = {};
-  //   modelSelections.forEach((item) => {
-  //     modelRefs.current[item.instanceId] = null;
-  //   });
-  // }, [modelSelections]);
-
  return (
    <div className="multiple-chat" style={{ height: boxHeight }}>
      <div className="chat-list">
@@ -248,6 +243,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
      <div>
        <MessageInput
          loading={isLoading}
+          disabled={isLoading || modelSelections.length === 0}
          handleSubmit={handleSubmit}
          addMessage={handleAddMessage}
          handleAbortFetch={handleAbortFetch}
@@ -256,6 +252,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
          setModelSelections={handleUpdateModelSelections}
          presetPrompt={handlePresetPrompt}
          modelList={modelFullList}
+          showModelSelection={true}
        />
      </div>
    </div>
@@ -1,48 +1,51 @@
-import { Spin } from 'antd';
-import React, { useMemo } from 'react';
-import SimpleBar from 'simplebar-react';
+import React from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
+import { MessageItem } from '../../config/types';
 import ContentItem from './content-item';

 interface MessageContentProps {
-  loading: boolean;
+  loading?: boolean;
  spans: {
    span: number;
    count: number;
  };
-  messageList: {
-    role: string;
-    uid?: any;
-    content: string;
-  }[];
+  editable?: boolean;
+  messageList: MessageItem[];
+  setMessageList?: (list: any) => void;
 }

 const MessageContent: React.FC<MessageContentProps> = ({
+  setMessageList,
  messageList,
  spans,
-  loading
+  editable
 }) => {
-  const maxHeight = useMemo(() => {
-    const total = 72 + 110 + 46 + 16 + 32;
-    if (spans.span < 4) {
-      return `calc(100vh - ${total}px)`;
-    }
-    return `calc(100vh - ${total * 2 + 16}px)`;
-  }, [spans.span]);
+  const updateMessage = (index: number, message: MessageItem) => {
+    const newMessageList = [...messageList];
+    newMessageList[index] = message;
+    setMessageList?.(newMessageList);
+  };
+
+  const handleDelete = (index: number) => {
+    const newMessageList = [...messageList];
+    newMessageList.splice(index, 1);
+    setMessageList?.(newMessageList);
+  };
  return (
    <>
-      {messageList.length ? (
-        <SimpleBar style={{ maxHeight: 'calc(100% - 46px)' }}>
-          <div className="message-content-list">
-            {messageList.map((item, index) => (
-              <ContentItem key={index} data={item} />
-            ))}
-          </div>
-        </SimpleBar>
-      ) : (
-        <span>{loading}</span>
+      {!!messageList.length && (
+        <div className="message-content-list">
+          {messageList.map((item, index) => (
+            <ContentItem
+              key={item.uid}
+              data={item}
+              editable={editable}
+              onDelete={() => handleDelete(index)}
+              updateMessage={(data) => updateMessage(index, data)}
+            />
+          ))}
+        </div>
      )}
-      <Spin spinning={!!loading} size="small" style={{ width: '100%' }} />
    </>
  );
 };
@@ -7,15 +7,7 @@ import {
  SettingOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import {
-  Button,
-  Checkbox,
-  Divider,
-  Dropdown,
-  Input,
-  Popover,
-  Select
-} from 'antd';
+import { Button, Checkbox, Dropdown, Popover, Select, Spin } from 'antd';
 import _ from 'lodash';
 import React, {
  forwardRef,
@@ -27,16 +19,18 @@ import React, {
  useRef,
  useState
 } from 'react';
+import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../../apis';
 import { Roles } from '../../config';
 import CompareContext from '../../config/compare-context';
-import { ModelSelectionItem } from '../../config/types';
+import { MessageItem, ModelSelectionItem } from '../../config/types';
 import '../../style/model-item.less';
 import ParamsSettings from '../params-settings';
 import ReferenceParams from '../reference-params';
 import ViewCodeModal from '../view-code-modal';
 import MessageContent from './message-content';
+import SystemMessage from './system-message';

 interface ModelItemProps {
  model: string;
@@ -45,12 +39,6 @@ interface ModelItemProps {
  ref: any;
 }

-interface MessageItemProps {
-  role: string;
-  content: string;
-  uid: string | number;
-}
-
 const ModelItem: React.FC<ModelItemProps> = forwardRef(
  ({ model, modelList, instanceId }, ref) => {
    const {
@@ -63,26 +51,28 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
    } = useContext(CompareContext);
    const intl = useIntl();
    const isApplyToAllModels = useRef(false);
-    const [autoSize, setAutoSize] = useState<{
-      minRows: number;
-      maxRows: number;
-      focus: boolean;
-    }>({ minRows: 1, maxRows: 1, focus: false });
    const [systemMessage, setSystemMessage] = useState<string>('');
    const [params, setParams] = useState<Record<string, any>>({});
    const [loading, setLoading] = useState(false);
    const messageId = useRef<number>(0);
-    const [messageList, setMessageList] = useState<MessageItemProps[]>([]);
+    const [messageList, setMessageList] = useState<MessageItem[]>([]);
    const [tokenResult, setTokenResult] = useState<any>(null);
    const [show, setShow] = useState(false);
    const contentRef = useRef<any>('');
    const controllerRef = useRef<any>(null);
-    const currentMessageRef = useRef<MessageItemProps>({} as MessageItemProps);
-    const systemMessageRef = useRef<any>(null);
+    const currentMessageRef = useRef<MessageItem>({} as MessageItem);

    const setMessageId = () => {
      messageId.current = messageId.current + 1;
    };
+    const maxHeight = useMemo(() => {
+      console.log('spans==========', spans);
+      const total = 72 + 110 + 46 + 16 + 32;
+      if (spans.count < 4) {
+        return `calc(100vh - ${total}px)`;
+      }
+      return `calc(100vh - ${total * 2 + 16}px)`;
+    }, [spans.count]);

    const abortFetch = () => {
      controllerRef.current?.abort?.();
@@ -104,9 +94,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
      console.log('currentMessage==========5', messageList);
      setMessageList([
        ...messageList,
-        {
-          ...currentMessageRef.current
-        },
        {
          role: Roles.Assistant,
          content: contentRef.current,
@@ -149,28 +136,58 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
              ...currentMessageRef.current
            }
          ],
-          (item: MessageItemProps) => {
+          (item: MessageItem) => {
            return {
              role: item.role,
-              content: item.content
+              content: item.content,
+              imgs: item.imgs || []
            };
          }
        );

        contentRef.current = '';
+        // ====== payload =================
+        const formatMessages = _.map(messages, (item: MessageItem) => {
+          return {
+            role: item.role,
+            content: [
+              {
+                type: 'text',
+                text: item.content
+              },
+              ..._.map(
+                item.imgs,
+                (img: { uid: string | number; dataUrl: string }) => {
+                  return {
+                    type: 'image_url',
+                    image_url: {
+                      url: img.dataUrl
+                    }
+                  };
+                }
+              )
+            ]
+          };
+        });
        const chatParams = {
          messages: systemMessage
            ? [
                {
                  role: Roles.System,
-                  content: systemMessage
+                  content: [
+                    {
+                      type: 'text',
+                      text: systemMessage
+                    }
+                  ]
                },
-                ...messages
+                ...formatMessages
              ]
-            : [...messages],
+            : [...formatMessages],
          ...parameters,
          stream: true
        };
+        // ============== payload end ================
        const result = await fetchChunkedData({
          data: chatParams,
          url: CHAT_API,
@@ -180,6 +197,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
        if (!result) {
          return;
        }
+        setMessageId();
        const { reader, decoder } = result;
        await readStreamData(reader, decoder, (chunk: any) => {
          joinMessage(chunk);
@@ -242,7 +260,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
      setMessageList([]);
      setTokenResult(null);
      setSystemMessage('');
-      currentMessageRef.current = {} as MessageItemProps;
+      currentMessageRef.current = {} as MessageItem;
      console.log('clear message', systemMessage);
    };

@@ -258,8 +276,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
      handleClearMessage();
    };

-    const handlePresetMessageList = (list: MessageItemProps[]) => {
-      currentMessageRef.current = {} as MessageItemProps;
+    const handlePresetMessageList = (list: MessageItem[]) => {
+      currentMessageRef.current = {} as MessageItem;
      const messages = _.map(
        list,
        (item: { role: string; content: string }) => {
@@ -279,31 +297,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
      handleDeleteModel(instanceId);
    };

-    const handleFocus = () => {
-      setAutoSize({
-        minRows: 4,
-        maxRows: 4,
-        focus: true
-      });
-      setTimeout(() => {
-        systemMessageRef.current?.focus?.({
-          cursor: 'end'
-        });
-      }, 100);
-    };
-
-    const handleBlur = () => {
-      setAutoSize({
-        minRows: 1,
-        maxRows: 1,
-        focus: false
-      });
-    };
-
-    const handleClearSystemMessage = () => {
-      setSystemMessage('');
-    };
-
    const modelOptions = useMemo(() => {
      return modelList.filter((item) => {
        return item.type !== 'empty';
@@ -406,66 +399,35 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
                size="small"
              ></Button>
            </Popover>
-            <Button
-              type="text"
-              icon={<CloseOutlined />}
-              size="small"
-              onClick={handleDelete}
-            ></Button>
+            {modelList.length > 2 && (
+              <Button
+                type="text"
+                icon={<CloseOutlined />}
+                size="small"
+                onClick={handleDelete}
+              ></Button>
+            )}
          </span>
        </div>
-        <div className="sys-message">
-          {
-            <div style={{ display: autoSize.focus ? 'block' : 'none' }}>
-              <Input.TextArea
-                ref={systemMessageRef}
-                variant="filled"
-                placeholder="Type system message here"
-                style={{
-                  borderRadius: '0',
-                  border: 'none'
-                }}
-                value={systemMessage}
-                autoSize={{
-                  minRows: autoSize.minRows,
-                  maxRows: autoSize.maxRows
-                }}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-                allowClear={false}
-                onChange={(e) => setSystemMessage(e.target.value)}
-              ></Input.TextArea>
-              <Divider style={{ margin: '0' }}></Divider>
-            </div>
-          }
-          {!autoSize.focus && (
-            <div className="sys-content-wrap" onClick={handleFocus}>
-              <div className="sys-content">
-                {systemMessage || (
-                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                    Type system message here
-                  </span>
-                )}
-              </div>
-              {systemMessage && (
-                <Button
-                  className="clear-btn"
-                  type="text"
-                  icon={<CloseOutlined />}
-                  size="small"
-                  onClick={handleClearSystemMessage}
-                ></Button>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="content">
-          <MessageContent
-            spans={spans}
-            messageList={messageList}
-            loading={loadingStatus[params.model]}
-          />
-        </div>
+        <SystemMessage
+          systemMessage={systemMessage}
+          setSystemMessage={setSystemMessage}
+        ></SystemMessage>
+        <SimpleBar style={{ maxHeight: maxHeight }}>
+          <div className="content">
+            <MessageContent
+              spans={spans}
+              messageList={messageList}
+              setMessageList={setMessageList}
+              editable={true}
+            />
+            <Spin
+              spinning={!!loadingStatus[instanceId]}
+              size="small"
+              style={{ width: '100%' }}
+            />
+          </div>
+        </SimpleBar>
        <ViewCodeModal
          open={show}
          systemMessage={systemMessage}
@@ -0,0 +1,94 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Divider, Input } from 'antd';
+import React, { useState } from 'react';
+import '../../style/sys-message.less';
+
+interface SystemMessageProps {
+  systemMessage: string;
+  setSystemMessage: (value: string) => void;
+}
+
+const SystemMessage: React.FC<SystemMessageProps> = (props) => {
+  const { systemMessage, setSystemMessage } = props;
+  const systemMessageRef = React.useRef<any>(null);
+  const [autoSize, setAutoSize] = useState<{
+    minRows: number;
+    maxRows: number;
+    focus: boolean;
+  }>({ minRows: 1, maxRows: 1, focus: false });
+
+  const handleFocus = () => {
+    setAutoSize({
+      minRows: 4,
+      maxRows: 4,
+      focus: true
+    });
+    setTimeout(() => {
+      systemMessageRef.current?.focus?.({
+        cursor: 'end'
+      });
+    }, 100);
+  };
+
+  const handleBlur = () => {
+    setAutoSize({
+      minRows: 1,
+      maxRows: 1,
+      focus: false
+    });
+  };
+
+  const handleClearSystemMessage = () => {
+    setSystemMessage('');
+  };
+
+  return (
+    <div className="sys-message">
+      {
+        <div style={{ display: autoSize.focus ? 'block' : 'none' }}>
+          <Input.TextArea
+            ref={systemMessageRef}
+            variant="filled"
+            placeholder="Type system message here"
+            style={{
+              borderRadius: '0',
+              border: 'none'
+            }}
+            value={systemMessage}
+            autoSize={{
+              minRows: autoSize.minRows,
+              maxRows: autoSize.maxRows
+            }}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            allowClear={false}
+            onChange={(e) => setSystemMessage(e.target.value)}
+          ></Input.TextArea>
+          <Divider style={{ margin: '0' }}></Divider>
+        </div>
+      }
+      {!autoSize.focus && (
+        <div className="sys-content-wrap" onClick={handleFocus}>
+          <div className="sys-content">
+            {systemMessage || (
+              <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                Type system message here
+              </span>
+            )}
+          </div>
+          {systemMessage && (
+            <Button
+              className="clear-btn"
+              type="text"
+              icon={<CloseOutlined />}
+              size="small"
+              onClick={handleClearSystemMessage}
+            ></Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(SystemMessage);