test-chat-sdk 0.0.0

package/src/Chat/Conversation/index.tsx

@@ -0,0 +1,236 @@
+import { Dropdown, Input, Menu } from 'antd';
+import classNames from 'classnames';
+import {
+  useEffect,
+  useState,
+  forwardRef,
+  ForwardRefRenderFunction,
+  useImperativeHandle,
+  memo,
+} from 'react';
+import ConversationModal from '../components/ConversationModal';
+import { deleteConversation, getAllConversations, saveConversation } from '../service';
+import styles from './style.module.less';
+import { AgentType, ConversationDetailType } from '../type';
+import { DEFAULT_CONVERSATION_NAME } from '../constants';
+import moment from 'moment';
+import { CloseOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
+
+type Props = {
+  currentAgent?: AgentType;
+  currentConversation?: ConversationDetailType;
+  historyVisible?: boolean;
+  onSelectConversation: (
+    conversation: ConversationDetailType,
+    sendMsgParams?: any,
+    isAdd?: boolean
+  ) => void;
+  onCloseConversation: () => void;
+};
+
+const Conversation: ForwardRefRenderFunction<any, Props> = (
+  { currentAgent, currentConversation, historyVisible, onSelectConversation, onCloseConversation },
+  ref
+) => {
+  const [conversations, setConversations] = useState<ConversationDetailType[]>([]);
+  const [editModalVisible, setEditModalVisible] = useState(false);
+  const [editConversation, setEditConversation] = useState<ConversationDetailType>();
+  const [searchValue, setSearchValue] = useState('');
+
+  useImperativeHandle(ref, () => ({
+    updateData,
+    onAddConversation,
+  }));
+
+  const updateData = async (agentId?: number) => {
+    const { data } = await getAllConversations(agentId || currentAgent!.id);
+    const conversationList = data || [];
+    setConversations(conversationList.slice(0, 200));
+    return conversationList;
+  };
+
+  const initData = async () => {
+    const data = await updateData();
+    if (data.length > 0) {
+      onSelectConversation(data[0]);
+    } else {
+      onAddConversation();
+    }
+  };
+
+  useEffect(() => {
+    if (currentAgent) {
+      if (currentAgent.initialSendMsgParams) {
+        onAddConversation(currentAgent.initialSendMsgParams);
+      } else {
+        initData();
+      }
+    }
+  }, [currentAgent]);
+
+  const addConversation = async (sendMsgParams?: any) => {
+    const agentId = sendMsgParams?.agentId || currentAgent!.id;
+    await saveConversation(DEFAULT_CONVERSATION_NAME, agentId);
+    return updateData(agentId);
+  };
+
+  const onDeleteConversation = async (id: number) => {
+    await deleteConversation(id);
+    initData();
+  };
+
+  const onAddConversation = async (sendMsgParams?: any) => {
+    const data = await addConversation(sendMsgParams);
+    if (data.length > 0) {
+      onSelectConversation(data[0], sendMsgParams, true);
+    }
+  };
+
+  const onOperate = (key: string, conversation: ConversationDetailType) => {
+    if (key === 'editName') {
+      setEditConversation(conversation);
+      setEditModalVisible(true);
+    } else if (key === 'delete') {
+      onDeleteConversation(conversation.chatId);
+    }
+  };
+
+  const conversationClass = classNames(styles.conversation, {
+    [styles.historyVisible]: historyVisible,
+  });
+
+  const convertTime = (date: string) => {
+    moment.locale('zh-cn');
+    const now = moment();
+    const inputDate = moment(date);
+    const diffMinutes = now.diff(inputDate, 'minutes');
+    if (diffMinutes < 1) {
+      return '刚刚';
+    } else if (inputDate.isSame(now, 'day')) {
+      return inputDate.format('HH:mm');
+    } else if (inputDate.isSame(now.subtract(1, 'day'), 'day')) {
+      return '昨天';
+    }
+    return inputDate.format('MM/DD');
+  };
+
+  const onSearchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
+  return (
+    <div className={conversationClass}>
+      <div className={styles.rightSection}>
+        <div className={styles.titleBar}>
+          <div className={styles.title}>历史对话</div>
+          <div className={styles.rightOperation}>
+            <div
+              className={styles.newConversation}
+              onClick={() => {
+                addConversation();
+              }}
+            >
+              新对话
+            </div>
+            <CloseOutlined className={styles.closeIcon} onClick={onCloseConversation} />
+          </div>
+        </div>
+        <div className={styles.searchConversation}>
+          <Input
+            placeholder="搜索"
+            prefix={<SearchOutlined className={styles.searchIcon} />}
+            className={styles.searchTask}
+            value={searchValue}
+            onChange={onSearchValueChange}
+            allowClear
+          />
+        </div>
+        <div className={styles.conversationList}>
+          {conversations
+            .filter(
+              conversation =>
+                searchValue === '' ||
+                conversation.chatName.toLowerCase().includes(searchValue.toLowerCase())
+            )
+            .map(item => {
+              const conversationItemClass = classNames(styles.conversationItem, {
+                [styles.activeConversationItem]: currentConversation?.chatId === item.chatId,
+              });
+              return (
+                <Dropdown
+                  key={item.chatId}
+                  overlay={
+                    <Menu
+                      items={[
+                        { label: '修改对话名称', key: 'editName' },
+                        { label: '删除', key: 'delete' },
+                      ]}
+                      onClick={({ key }) => {
+                        onOperate(key, item);
+                      }}
+                    />
+                  }
+                  trigger={['contextMenu']}
+                >
+                  <div
+                    className={conversationItemClass}
+                    onClick={() => {
+                      onSelectConversation(item);
+                    }}
+                  >
+                    <div className={styles.conversationContent}>
+                      <div className={styles.topTitleBar}>
+                        <div className={styles.conversationTitleBar}>
+                          <div className={styles.conversationName}>{item.chatName}</div>
+                          {currentConversation?.chatId === item.chatId && (
+                            <div className={styles.currentConversation}>当前对话</div>
+                          )}
+                        </div>
+                        <div className={styles.conversationTime}>
+                          {convertTime(item.lastTime || '')}
+                        </div>
+                      </div>
+                      <div className={styles.bottomSection}>
+                        <div className={styles.subTitle}>{item.lastQuestion}</div>
+                        <DeleteOutlined
+                          className={styles.deleteIcon}
+                          onClick={e => {
+                            e.stopPropagation();
+                            onDeleteConversation(item.chatId);
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </Dropdown>
+              );
+            })}
+        </div>
+      </div>
+      <ConversationModal
+        visible={editModalVisible}
+        editConversation={editConversation}
+        onClose={() => {
+          setEditModalVisible(false);
+        }}
+        onFinish={() => {
+          setEditModalVisible(false);
+          updateData();
+        }}
+      />
+    </div>
+  );
+};
+
+function areEqual(prevProps: Props, nextProps: Props) {
+  if (
+    prevProps.currentAgent?.id === nextProps.currentAgent?.id &&
+    prevProps.currentConversation?.chatId === nextProps.currentConversation?.chatId &&
+    prevProps.historyVisible === nextProps.historyVisible
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export default memo(forwardRef(Conversation), areEqual);

package/src/Chat/Conversation/style.module.less

@@ -0,0 +1,171 @@
+.conversation {
+  position: relative;
+  width: 0;
+  height: 100%;
+  background: #fff;
+
+  .rightSection {
+    width: 100%;
+    height: 100%;
+
+    .titleBar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .title {
+        color: var(--text-color);
+        font-weight: 500;
+        font-size: 15px;
+      }
+
+      .rightOperation {
+        display: flex;
+        align-items: center;
+        column-gap: 12px;
+
+        .newConversation {
+          color: var(--text-color);
+          font-size: 14px;
+          cursor: pointer;
+
+          &:hover {
+            color: var(--chat-blue);
+          }
+        }
+
+        .closeIcon {
+          color: var(--text-color);
+          font-size: 16px;
+          cursor: pointer;
+
+          &:hover {
+            color: var(--chat-blue);
+          }
+        }
+      }
+    }
+
+    .searchConversation {
+      display: flex;
+      align-items: center;
+      padding: 12px 0 10px;
+
+      .searchIcon {
+        color: #999 !important;
+      }
+
+      .searchTask {
+        font-size: 13px;
+        background-color: #f5f5f5;
+        border: 0;
+        border-radius: 4px;
+        box-shadow: none !important;
+
+        :global {
+          .ant-input {
+            font-size: 13px !important;
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+
+    .conversationList {
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 70px);
+      padding: 2px 0 0;
+      overflow-y: auto;
+      row-gap: 12px;
+
+      .conversationItem {
+        display: flex;
+        align-items: center;
+        padding: 8px 12px;
+        border: 1px solid #efefef;
+        border-radius: 8px;
+        cursor: pointer;
+
+        .conversationContent {
+          width: 100%;
+
+          .topTitleBar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+
+            .conversationTitleBar {
+              display: flex;
+              align-items: center;
+              column-gap: 6px;
+
+              .conversationName {
+                max-width: 300px;
+                margin-right: 2px;
+                overflow: hidden;
+                color: var(--text-color);
+                font-weight: 500;
+                font-size: 14px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+
+              .currentConversation {
+                padding: 0 4px;
+                color: var(--chat-blue);
+                font-size: 12px;
+                background-color: var(--light-blue-background);
+                border-radius: 4px;
+              }
+            }
+
+            .conversationTime {
+              color: var(--text-color-six);
+              font-size: 12px;
+            }
+          }
+
+          .bottomSection {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 4px;
+
+            .subTitle {
+              width: 350px;
+              overflow: hidden;
+              color: var(--text-color-six);
+              font-size: 12px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+
+            .deleteIcon {
+              color: var(--text-color-six);
+              font-size: 14px;
+              cursor: pointer;
+
+              &:hover {
+                color: var(--chat-blue);
+              }
+            }
+          }
+        }
+
+        &:hover,
+        &.activeConversationItem {
+          background-color: #f0f0f0;
+        }
+      }
+    }
+  }
+
+  &.historyVisible {
+    width: 400px;
+    padding: 10px 16px;
+    border-left: 1px solid #f1f1f1;
+    z-index: 99;
+  }
+}

package/src/Chat/MessageContainer/index.tsx

@@ -0,0 +1,145 @@
+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;
+  isSimpleMode?: boolean;
+  isDebugMode?: boolean;
+  onMsgDataLoaded: (
+    data: MsgDataType,
+    questionId: string | number,
+    question: string,
+    valid: boolean,
+    isRefresh?: boolean
+  ) => void;
+  onSendMsg: (value: string) => void;
+};
+
+const MessageContainer: React.FC<Props> = ({
+  id,
+  chatId,
+  messageList,
+  historyVisible,
+  currentAgent,
+  chatVisible,
+  isDeveloper,
+  integrateSystem,
+  isSimpleMode,
+  isDebugMode,
+  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,
+            questionId,
+            modelId,
+            agentId,
+            type,
+            msg,
+            msgValue,
+            score,
+            identityMsg,
+            parseInfos,
+            parseTimeCost,
+            msgData,
+            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
+                    questionId={questionId}
+                    currentAgent={currentAgent}
+                    isSimpleMode={isSimpleMode}
+                    isDebugMode={isDebugMode}
+                    msg={msgValue || msg || ''}
+                    parseInfos={parseInfos}
+                    parseTimeCostValue={parseTimeCost}
+                    msgData={msgData}
+                    conversationId={chatId}
+                    modelId={modelId}
+                    agentId={agentId}
+                    score={score}
+                    filter={filters}
+                    triggerResize={triggerResize}
+                    isDeveloper={isDeveloper}
+                    integrateSystem={integrateSystem}
+                    onMsgDataLoaded={(data: MsgDataType, valid: boolean, isRefresh) => {
+                      onMsgDataLoaded(data, msgId, msgValue || msg || '', valid, isRefresh);
+                    }}
+                    onUpdateMessageScroll={updateMessageContainerScroll}
+                    onSendMsg={onSendMsg}
+                    isLastMessage={index === messageList.length - 1}
+                  />
+                </>
+              )}
+            </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 &&
+    prevProps.isSimpleMode === nextProps.isSimpleMode
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export default memo(MessageContainer, areEqual);

package/src/Chat/MessageContainer/style.module.less

@@ -0,0 +1,53 @@
+.messageContainer {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  .messageList {
+    display: flex;
+    flex-direction: column;
+    padding: 70px 20px 60px 14px;
+    row-gap: 16px;
+
+    .messageItem {
+      display: flex;
+      flex-direction: column;
+      row-gap: 20px;
+
+      :global {
+        .ant-table-small {
+          .ant-table-tbody {
+            .ant-table-cell {
+              padding: 6px 0 !important;
+            }
+          }
+          .ss-chat-table-formatted-value {
+            font-size: 15px !important;
+          }
+        }
+        .ant-table-row {
+          background-color: #fff;
+        }
+
+        .ant-table-tbody > tr > td {
+          border-bottom: 1px solid #f0f0f0;
+          transition: background 0.2s, border-color 0.2s;
+        }
+
+        .ss-chat-table-even-row {
+          background-color: #fbfbfb;
+        }
+      }
+    }
+  }
+
+  &.mobile {
+    .messageList {
+      padding: 20px 10px 30px;
+    }
+  }
+}

package/src/Chat/MobileAgents/index.tsx

@@ -0,0 +1,62 @@
+import IconFont from '../../components/IconFont';
+import { Drawer } from 'antd';
+import classNames from 'classnames';
+import { AGENT_ICONS } from '../constants';
+import { AgentType } from '../type';
+import styles from './style.module.less';
+
+type Props = {
+  open: boolean;
+  agentList: AgentType[];
+  currentAgent?: AgentType;
+  onSelectAgent: (agent: AgentType) => void;
+  onClose: () => void;
+};
+
+const MobileAgents: React.FC<Props> = ({
+  open,
+  agentList,
+  currentAgent,
+  onSelectAgent,
+  onClose,
+}) => {
+  return (
+    <Drawer
+      title="智能助理"
+      placement="bottom"
+      open={open}
+      height="85%"
+      className={styles.mobileAgents}
+      onClose={onClose}
+    >
+      <div className={styles.agentListContent}>
+        {agentList.map((agent, index) => {
+          const agentItemClass = classNames(styles.agentItem, {
+            [styles.active]: currentAgent?.id === agent.id,
+          });
+          return (
+            <div
+              key={agent.id}
+              className={agentItemClass}
+              onClick={() => {
+                onSelectAgent(agent);
+                onClose();
+              }}
+            >
+              <div className={styles.agentTitleBar}>
+                <IconFont
+                  type={AGENT_ICONS[index % AGENT_ICONS.length]}
+                  className={styles.avatar}
+                />
+                <div className={styles.agentName}>{agent.name}</div>
+              </div>
+              <div className={styles.agentDesc}>{agent.description}</div>
+            </div>
+          );
+        })}
+      </div>
+    </Drawer>
+  );
+};
+
+export default MobileAgents;