Fix: Fixed the issue that the content of the Dropdown section cannot be seen when selecting the next operator #3221 (#8918)

…be seen when selecting the next operator #3221

### What problem does this PR solve?
Fix: Fixed the issue that the content of the Dropdown section cannot be
seen when selecting the next operator #3221

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/next-chats/hooks/use-send-shared-message.ts

@@ -0,0 +1,149 @@
+import { MessageType, SharedFrom } from '@/constants/chat';
+import { useCreateNextSharedConversation } from '@/hooks/chat-hooks';
+import {
+  useHandleMessageInputChange,
+  useSelectDerivedMessages,
+  useSendMessageWithSse,
+} from '@/hooks/logic-hooks';
+import { Message } from '@/interfaces/database/chat';
+import { message } from 'antd';
+import { get } from 'lodash';
+import trim from 'lodash/trim';
+import { useCallback, useEffect, useState } from 'react';
+import { useSearchParams } from 'umi';
+import { v4 as uuid } from 'uuid';
+
+const isCompletionError = (res: any) =>
+  res && (res?.response.status !== 200 || res?.data?.code !== 0);
+
+export const useSendButtonDisabled = (value: string) => {
+  return trim(value) === '';
+};
+
+export const useGetSharedChatSearchParams = () => {
+  const [searchParams] = useSearchParams();
+  const data_prefix = 'data_';
+  const data = Object.fromEntries(
+    searchParams
+      .entries()
+      .filter(([key, value]) => key.startsWith(data_prefix))
+      .map(([key, value]) => [key.replace(data_prefix, ''), value]),
+  );
+  return {
+    from: searchParams.get('from') as SharedFrom,
+    sharedId: searchParams.get('shared_id'),
+    locale: searchParams.get('locale'),
+    data: data,
+    visibleAvatar: searchParams.get('visible_avatar')
+      ? searchParams.get('visible_avatar') !== '1'
+      : true,
+  };
+};
+
+export const useSendSharedMessage = () => {
+  const {
+    from,
+    sharedId: conversationId,
+    data: data,
+  } = useGetSharedChatSearchParams();
+  const { createSharedConversation: setConversation } =
+    useCreateNextSharedConversation();
+  const { handleInputChange, value, setValue } = useHandleMessageInputChange();
+  const { send, answer, done, stopOutputMessage } = useSendMessageWithSse(
+    `/api/v1/${from === SharedFrom.Agent ? 'agentbots' : 'chatbots'}/${conversationId}/completions`,
+  );
+  const {
+    derivedMessages,
+    ref,
+    removeLatestMessage,
+    addNewestAnswer,
+    addNewestQuestion,
+  } = useSelectDerivedMessages();
+  const [hasError, setHasError] = useState(false);
+
+  const sendMessage = useCallback(
+    async (message: Message, id?: string) => {
+      const res = await send({
+        conversation_id: id ?? conversationId,
+        quote: true,
+        question: message.content,
+        session_id: get(derivedMessages, '0.session_id'),
+      });
+
+      if (isCompletionError(res)) {
+        // cancel loading
+        setValue(message.content);
+        removeLatestMessage();
+      }
+    },
+    [send, conversationId, derivedMessages, setValue, removeLatestMessage],
+  );
+
+  const handleSendMessage = useCallback(
+    async (message: Message) => {
+      if (conversationId !== '') {
+        sendMessage(message);
+      } else {
+        const data = await setConversation('user id');
+        if (data.code === 0) {
+          const id = data.data.id;
+          sendMessage(message, id);
+        }
+      }
+    },
+    [conversationId, setConversation, sendMessage],
+  );
+
+  const fetchSessionId = useCallback(async () => {
+    const payload = { question: '' };
+    const ret = await send({ ...payload, ...data });
+    if (isCompletionError(ret)) {
+      message.error(ret?.data.message);
+      setHasError(true);
+    }
+  }, [data, send]);
+
+  useEffect(() => {
+    fetchSessionId();
+  }, [fetchSessionId, send]);
+
+  useEffect(() => {
+    if (answer.answer) {
+      addNewestAnswer(answer);
+    }
+  }, [answer, addNewestAnswer]);
+
+  const handlePressEnter = useCallback(
+    (documentIds: string[]) => {
+      if (trim(value) === '') return;
+      const id = uuid();
+      if (done) {
+        setValue('');
+        addNewestQuestion({
+          content: value,
+          doc_ids: documentIds,
+          id,
+          role: MessageType.User,
+        });
+        handleSendMessage({
+          content: value.trim(),
+          id,
+          role: MessageType.User,
+        });
+      }
+    },
+    [addNewestQuestion, done, handleSendMessage, setValue, value],
+  );
+
+  return {
+    handlePressEnter,
+    handleInputChange,
+    value,
+    sendLoading: !done,
+    ref,
+    loading: false,
+    derivedMessages,
+    hasError,
+    stopOutputMessage,
+  };
+};

web/src/pages/next-chats/share/index.less

@@ -0,0 +1,13 @@
+.chatWrapper {
+  height: 100vh;
+}
+
+.chatContainer {
+  padding: 10px;
+  box-sizing: border-box;
+  height: 100%;
+  .messageContainer {
+    overflow-y: auto;
+    padding-right: 6px;
+  }
+}

web/src/pages/next-chats/share/index.tsx

@@ -0,0 +1,13 @@
+import ChatContainer from './large';
+
+import styles from './index.less';
+
+const SharedChat = () => {
+  return (
+    <div className={styles.chatWrapper}>
+      <ChatContainer></ChatContainer>
+    </div>
+  );
+};
+
+export default SharedChat;

web/src/pages/next-chats/share/large.tsx

@@ -0,0 +1,123 @@
+import MessageInput from '@/components/message-input';
+import MessageItem from '@/components/message-item';
+import PdfDrawer from '@/components/pdf-drawer';
+import { useClickDrawer } from '@/components/pdf-drawer/hooks';
+import { MessageType, SharedFrom } from '@/constants/chat';
+import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
+import { useFetchFlowSSE } from '@/hooks/flow-hooks';
+import i18n from '@/locales/config';
+import { useSendButtonDisabled } from '@/pages/chat/hooks';
+import { buildMessageUuidWithRole } from '@/utils/chat';
+import { Flex, Spin } from 'antd';
+import React, { forwardRef, useMemo } from 'react';
+import {
+  useGetSharedChatSearchParams,
+  useSendSharedMessage,
+} from '../hooks/use-send-shared-message';
+import { buildMessageItemReference } from '../utils';
+import styles from './index.less';
+
+const ChatContainer = () => {
+  const {
+    sharedId: conversationId,
+    from,
+    locale,
+    visibleAvatar,
+  } = useGetSharedChatSearchParams();
+  const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
+    useClickDrawer();
+
+  const {
+    handlePressEnter,
+    handleInputChange,
+    value,
+    sendLoading,
+    loading,
+    ref,
+    derivedMessages,
+    hasError,
+    stopOutputMessage,
+  } = useSendSharedMessage();
+  const sendDisabled = useSendButtonDisabled(value);
+
+  const useFetchAvatar = useMemo(() => {
+    return from === SharedFrom.Agent
+      ? useFetchFlowSSE
+      : useFetchNextConversationSSE;
+  }, [from]);
+  React.useEffect(() => {
+    if (locale && i18n.language !== locale) {
+      i18n.changeLanguage(locale);
+    }
+  }, [locale, visibleAvatar]);
+  const { data: avatarData } = useFetchAvatar();
+
+  if (!conversationId) {
+    return <div>empty</div>;
+  }
+
+  return (
+    <>
+      <Flex flex={1} className={styles.chatContainer} vertical>
+        <Flex flex={1} vertical className={styles.messageContainer}>
+          <div>
+            <Spin spinning={loading}>
+              {derivedMessages?.map((message, i) => {
+                return (
+                  <MessageItem
+                    visibleAvatar={visibleAvatar}
+                    key={buildMessageUuidWithRole(message)}
+                    avatarDialog={avatarData?.avatar}
+                    item={message}
+                    nickname="You"
+                    reference={buildMessageItemReference(
+                      {
+                        message: derivedMessages,
+                        reference: [],
+                      },
+                      message,
+                    )}
+                    loading={
+                      message.role === MessageType.Assistant &&
+                      sendLoading &&
+                      derivedMessages?.length - 1 === i
+                    }
+                    index={i}
+                    clickDocumentButton={clickDocumentButton}
+                    showLikeButton={false}
+                    showLoudspeaker={false}
+                  ></MessageItem>
+                );
+              })}
+            </Spin>
+          </div>
+          <div ref={ref} />
+        </Flex>
+
+        <MessageInput
+          isShared
+          value={value}
+          disabled={hasError}
+          sendDisabled={sendDisabled}
+          conversationId={conversationId}
+          onInputChange={handleInputChange}
+          onPressEnter={handlePressEnter}
+          sendLoading={sendLoading}
+          uploadMethod="external_upload_and_parse"
+          showUploadIcon={false}
+          stopOutputMessage={stopOutputMessage}
+        ></MessageInput>
+      </Flex>
+      {visible && (
+        <PdfDrawer
+          visible={visible}
+          hideModal={hideModal}
+          documentId={documentId}
+          chunk={selectedChunk}
+        ></PdfDrawer>
+      )}
+    </>
+  );
+};
+
+export default forwardRef(ChatContainer);

web/src/pages/next-chats/utils.ts

@@ -0,0 +1,53 @@
+import { MessageType } from '@/constants/chat';
+import { IConversation, IReference } from '@/interfaces/database/chat';
+import { isEmpty } from 'lodash';
+import { EmptyConversationId } from './constants';
+import { IMessage } from './interface';
+
+export const isConversationIdExist = (conversationId: string) => {
+  return conversationId !== EmptyConversationId && conversationId !== '';
+};
+
+export const getDocumentIdsFromConversionReference = (data: IConversation) => {
+  const documentIds = data.reference.reduce(
+    (pre: Array<string>, cur: IReference) => {
+      cur.doc_aggs
+        ?.map((x) => x.doc_id)
+        .forEach((x) => {
+          if (pre.every((y) => y !== x)) {
+            pre.push(x);
+          }
+        });
+      return pre;
+    },
+    [],
+  );
+  return documentIds.join(',');
+};
+
+export const buildMessageItemReference = (
+  conversation: { message: IMessage[]; reference: IReference[] },
+  message: IMessage,
+) => {
+  const assistantMessages = conversation.message
+    ?.filter((x) => x.role === MessageType.Assistant)
+    .slice(1);
+  const referenceIndex = assistantMessages.findIndex(
+    (x) => x.id === message.id,
+  );
+  const reference = !isEmpty(message?.reference)
+    ? message?.reference
+    : (conversation?.reference ?? [])[referenceIndex];
+
+  return reference ?? { doc_aggs: [], chunks: [], total: 0 };
+};
+
+const oldReg = /(#{2}\d+\${2})/g;
+export const currentReg = /\[ID:(\d+)\]/g;
+
+// To be compatible with the old index matching mode
+export const replaceTextByOldReg = (text: string) => {
+  return text?.replace(oldReg, (substring: string) => {
+    return `[ID:${substring.slice(2, -2)}]`;
+  });
+};