Integrate Chat and Copilot into chat-sdk, and add SQL parse display (#166)

2025-12-14 22:25:19 +00:00 · 2023-10-02 18:05:12 +08:00
parent 741ed4191b
commit 71cb20eb4f
68 changed files with 1353 additions and 882 deletions
--- a/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
+++ b/webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx
@@ -0,0 +1,150 @@
+import Text from '../components/Text';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { isEqual } from 'lodash';
+import { AgentType, MessageItem, MessageTypeEnum } from '../type';
+import { isMobile, updateMessageContainerScroll } from '../../utils/utils';
+import styles from './style.module.less';
+import AgentTip from '../components/AgentTip';
+import classNames from 'classnames';
+import { MsgDataType } from '../../common/type';
+import ChatItem from '../../components/ChatItem';
+
+type Props = {
+  id: string;
+  chatId: number;
+  messageList: MessageItem[];
+  historyVisible: boolean;
+  currentAgent?: AgentType;
+  chatVisible?: boolean;
+  isDeveloper?: boolean;
+  integrateSystem?: string;
+  onMsgDataLoaded: (
+    data: MsgDataType,
+    questionId: string | number,
+    question: string,
+    valid: boolean
+  ) => void;
+  onSendMsg: (value: string) => void;
+};
+
+const MessageContainer: React.FC<Props> = ({
+  id,
+  chatId,
+  messageList,
+  historyVisible,
+  currentAgent,
+  chatVisible,
+  isDeveloper,
+  integrateSystem,
+  onMsgDataLoaded,
+  onSendMsg,
+}) => {
+  const [triggerResize, setTriggerResize] = useState(false);
+
+  const onResize = useCallback(() => {
+    setTriggerResize(true);
+    setTimeout(() => {
+      setTriggerResize(false);
+    }, 0);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    onResize();
+  }, [historyVisible, chatVisible]);
+
+  const messageContainerClass = classNames(styles.messageContainer, { [styles.mobile]: isMobile });
+
+  return (
+    <div id={id} className={messageContainerClass}>
+      <div className={styles.messageList}>
+        {messageList.map((msgItem: MessageItem, index: number) => {
+          const {
+            id: msgId,
+            modelId,
+            agentId,
+            type,
+            msg,
+            msgValue,
+            identityMsg,
+            msgData,
+            score,
+            parseOptions,
+            filters,
+          } = msgItem;
+
+          return (
+            <div key={msgId} id={`${msgId}`} className={styles.messageItem}>
+              {type === MessageTypeEnum.TEXT && <Text position="left" data={msg} />}
+              {type === MessageTypeEnum.AGENT_LIST && (
+                <AgentTip currentAgent={currentAgent} onSendMsg={onSendMsg} />
+              )}
+              {type === MessageTypeEnum.QUESTION && (
+                <>
+                  <Text position="right" data={msg} />
+                  {identityMsg && <Text position="left" data={identityMsg} />}
+                  <ChatItem
+                    msg={msgValue || msg || ''}
+                    msgData={msgData}
+                    conversationId={chatId}
+                    modelId={modelId}
+                    agentId={agentId}
+                    filter={filters}
+                    isLastMessage={index === messageList.length - 1}
+                    triggerResize={triggerResize}
+                    isDeveloper={isDeveloper}
+                    integrateSystem={integrateSystem}
+                    onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
+                      onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
+                    }}
+                    onUpdateMessageScroll={updateMessageContainerScroll}
+                    onSendMsg={onSendMsg}
+                  />
+                </>
+              )}
+              {type === MessageTypeEnum.PARSE_OPTIONS && (
+                <ChatItem
+                  msg={msgValue || msg || ''}
+                  conversationId={chatId}
+                  modelId={modelId}
+                  agentId={agentId}
+                  filter={filters}
+                  isLastMessage={index === messageList.length - 1}
+                  triggerResize={triggerResize}
+                  parseOptions={parseOptions}
+                  integrateSystem={integrateSystem}
+                  onMsgDataLoaded={(data: MsgDataType, valid: boolean) => {
+                    onMsgDataLoaded(data, msgId, msgValue || msg || '', valid);
+                  }}
+                  onUpdateMessageScroll={updateMessageContainerScroll}
+                  onSendMsg={onSendMsg}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+function areEqual(prevProps: Props, nextProps: Props) {
+  if (
+    prevProps.id === nextProps.id &&
+    isEqual(prevProps.messageList, nextProps.messageList) &&
+    prevProps.historyVisible === nextProps.historyVisible &&
+    prevProps.currentAgent === nextProps.currentAgent &&
+    prevProps.chatVisible === nextProps.chatVisible
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export default memo(MessageContainer, areEqual);