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,10 +1,10 @@
-import TransitionWrapper from '@/components/transition';
 import HotKeys from '@/config/hotkeys';
 import useContainerScroll from '@/hooks/use-container-scorll';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
-import { Button, Input, Spin, Tooltip } from 'antd';
+import { useIntl, useSearchParams } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
+import classNames from 'classnames';
 import _ from 'lodash';
 import {
  forwardRef,
@@ -15,38 +15,33 @@ import {
  useState
 } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../apis';
 import { Roles } from '../config';
+import { MessageItem } from '../config/types';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
 import MessageInput from './message-input';
-import MessageItem from './message-item';
+import MessageContent from './multiple-chat/message-content';
+import SystemMessage from './multiple-chat/system-message';
+import ParamsSettings from './params-settings';
 import ViewCodeModal from './view-code-modal';

 interface MessageProps {
-  parameters: any;
+  parameters?: any;
  modelList: Global.BaseOption<string>[];
  ref?: any;
 }

-interface MessageItemProps {
-  role: string;
-  content: string;
-  uid: number;
-}
-
-const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
-  const { parameters, modelList } = props;
+const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
+  const { modelList } = props;
  const messageId = useRef<number>(0);
-  const [messageList, setMessageList] = useState<MessageItemProps[]>([
-    {
-      role: 'user',
-      content: '',
-      uid: messageId.current
-    }
-  ]);
+  const [messageList, setMessageList] = useState<MessageItem[]>([]);

  const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const selectModel = searchParams.get('model') || '';
+  const [parameters, setParams] = useState<any>({});
  const [systemMessage, setSystemMessage] = useState('');
  const [collapsed, setCollapsed] = useState(true);
  const [show, setShow] = useState(false);
@@ -54,10 +49,14 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
  const [activeIndex, setActiveIndex] = useState(-1);
  const [tokenResult, setTokenResult] = useState<any>(null);
  const [currentIsFocus, setCurrentIsFocus] = useState(false);
+  const [collapse, setCollapse] = useState(false);
  const systemRef = useRef<any>(null);
  const contentRef = useRef<any>('');
  const controllerRef = useRef<any>(null);
  const scroller = useRef<any>(null);
+  const currentMessageRef = useRef<any>(null);
+  const paramsScroller = useRef<any>(null);
+  const leftSimple = useRef<any>(null);
  const { updateScrollerPosition, handleContentWheel } = useContainerScroll(
    scroller,
    { toBottom: true }
@@ -67,10 +66,18 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
    updateScrollerPosition();
  }, [messageList]);

+  useEffect(() => {
+    paramsScroller.current?.recalculate();
+    leftSimple.current?.recalculate();
+  }, [collapse]);
+
  useImperativeHandle(ref, () => {
    return {
      viewCode() {
        setShow(true);
+      },
+      setCollapse() {
+        setCollapse(!collapse);
      }
    };
  });
@@ -110,6 +117,7 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
      contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
    setMessageList([
      ...messageList,
+      ...currentMessageRef.current,
      {
        role: Roles.Assistant,
        content: contentRef.current,
@@ -122,7 +130,7 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
    setLoading(false);
  };

-  const submitMessage = async () => {
+  const submitMessage = async (current?: { role: string; content: string }) => {
    if (!parameters.model) return;
    try {
      setLoading(true);
@@ -132,24 +140,60 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
      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
-        };
+      currentMessageRef.current = current
+        ? [
+            {
+              ...current,
+              uid: messageId.current
+            }
+          ]
+        : [];
+
+      setMessageList((pre) => {
+        return [...pre, ...currentMessageRef.current];
      });

      contentRef.current = '';
+      const formatMessages = _.map(
+        [...messageList, ...currentMessageRef.current],
+        (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
      };
@@ -162,6 +206,7 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
      if (!result) {
        return;
      }
+      setMessageId();
      const { reader, decoder } = result;
      await readStreamData(reader, decoder, (chunk: any) => {
        joinMessage(chunk);
@@ -177,19 +222,19 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
      return;
    }
    setMessageId();
-    setMessageList([
-      {
-        role: Roles.User,
-        content: '',
-        uid: messageId.current
-      }
-    ]);
+    setMessageList([]);
  };

  const handleView = () => {
    setShow(true);
  };

+  const handleSendMessage = (message: { role: string; content: string }) => {
+    console.log('message:', message);
+    const currentMessage = message.content ? message : undefined;
+    submitMessage(currentMessage);
+  };
+
  const handleSubmit = () => {
    submitMessage();
  };
@@ -203,7 +248,7 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
    setMessageList([...messageList]);
  };

-  const handleUpdateMessage = (index: number, message: MessageItemProps) => {
+  const handleUpdateMessage = (index: number, message: MessageItem) => {
    messageList[index] = message;
    setMessageList([...messageList]);
  };
@@ -239,7 +284,20 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {

  const handleSelectModel = () => {};

-  const handlePresetPrompt = () => {};
+  const handlePresetPrompt = (list: { role: string; content: string }[]) => {
+    const sysMsg = list.filter((item) => item.role === 'system');
+    const userMsg = list
+      .filter((item) => item.role === 'user')
+      .map((item) => {
+        setMessageId();
+        return {
+          ...item,
+          uid: messageId.current
+        };
+      });
+    setSystemMessage(sysMsg[0]?.content || '');
+    setMessageList(userMsg);
+  };

  useHotkeys(
    HotKeys.SUBMIT,
@@ -278,14 +336,21 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
  );

  return (
-    <div className="ground-left">
-      <div
-        className="message-list-wrap"
-        ref={scroller}
-        onWheel={handleContentWheel}
-      >
-        <div style={{ marginBottom: 40 }}>
-          <TransitionWrapper
+    <div className="ground-left-wrapper">
+      <div className="ground-left">
+        <div className="message-list-wrap" onWheel={handleContentWheel}>
+          <div
+            style={{
+              marginBottom: 20,
+              borderRadius: 'var(--border-radius-mini)',
+              overflow: 'hidden'
+            }}
+          >
+            <SystemMessage
+              systemMessage={systemMessage}
+              setSystemMessage={setSystemMessage}
+            ></SystemMessage>
+            {/* <TransitionWrapper
            header={renderLabel()}
            variant="filled"
            setCollapsed={setCollapsed}
@@ -303,11 +368,11 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
              })}
              onChange={handleSystemMessageChange}
            ></Input.TextArea>
-          </TransitionWrapper>
-        </div>
+          </TransitionWrapper> */}
+          </div>

-        <div>
-          {messageList.map((item, index) => {
+          <div className="content">
+            {/* {messageList.map((item, index) => {
            return (
              <MessageItem
                key={item.uid}
@@ -315,44 +380,57 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
                islast={index === messageList.length - 1}
                loading={loading}
                onDelete={() => handleDelete(index)}
-                updateMessage={(message: MessageItemProps) =>
+                updateMessage={(message: MessageItem) =>
                  handleUpdateMessage(index, message)
                }
                onSubmit={handleSubmit}
                message={item}
              />
            );
-          })}
-          {loading && (
+          })} */}
+            <MessageContent
+              spans={{
+                span: 24,
+                count: 1
+              }}
+              messageList={messageList}
+              setMessageList={setMessageList}
+              editable={true}
+              loading={loading}
+            />
+            {/* {loading && (
            <Spin>
              <div style={{ height: '46px' }}></div>
            </Spin>
-          )}
+          )} */}
+          </div>
+        </div>
+        <div className="ground-left-footer">
+          <MessageInput
+            loading={loading}
+            disabled={!parameters.model}
+            isEmpty={!messageList.length}
+            handleSubmit={handleSendMessage}
+            addMessage={handleNewMessage}
+            handleAbortFetch={handleStopConversation}
+            clearAll={handleClear}
+            setModelSelections={handleSelectModel}
+            presetPrompt={handlePresetPrompt}
+            modelList={modelList}
+          />
        </div>
      </div>
-      <div className="ground-left-footer">
-        <MessageInput
-          loading={loading}
-          handleSubmit={handleSubmit}
-          addMessage={handleNewMessage}
-          handleAbortFetch={handleStopConversation}
-          clearAll={handleClear}
-          setModelSelections={handleSelectModel}
-          presetPrompt={handlePresetPrompt}
-          modelList={modelList}
-        />
-        {/* <ChatFooter
-          onClear={handleClear}
-          onNewMessage={handleNewMessage}
-          onSubmit={handleSubmit}
-          onView={handleView}
-          onStop={handleStopConversation}
-          disabled={loading}
-          selectedModel={parameters.model}
-          hasTokenResult={!!tokenResult}
-          feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
-        ></ChatFooter> */}
+
+      <div
+        className={classNames('params-wrapper', {
+          collapsed: collapse
+        })}
+      >
+        <div className="box">
+          <ParamsSettings setParams={setParams} selectedModel={selectModel} />
+        </div>
      </div>
+
      <ViewCodeModal
        open={show}
        systemMessage={systemMessage}
@@ -365,4 +443,4 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
  );
 });

-export default memo(MessageList);
+export default memo(GroundLeft);