feat: Support for Chat Flow & Agent Support for binding a single chat flow (#765)

Co-authored-by: Yu Yang <72337138+tomasyu985@users.noreply.github.com>
Co-authored-by: zengxiaohui <csu.zengxiaohui@gmail.com>
Co-authored-by: lijunwen.gigoo <lijunwen.gigoo@bytedance.com>
Co-authored-by: lvxinyu.1117 <lvxinyu.1117@bytedance.com>
Co-authored-by: liuyunchao.0510 <liuyunchao.0510@bytedance.com>
Co-authored-by: haozhenfei <37089575+haozhenfei@users.noreply.github.com>
Co-authored-by: July <jiangxujin@bytedance.com>
Co-authored-by: tecvan-fe <fanwenjie.fe@bytedance.com>

frontend/packages/common/chat-area/chat-uikit/src/components/chat/chat-upload/index.tsx

@@ -16,16 +16,16 @@
 
 import { type FC } from 'react';
 
-import {
-  FILE_TYPE_CONFIG,
-  FileTypeEnum,
-} from '@coze-common/chat-core/shared/const';
-import { Toast, Upload } from '@coze-arch/coze-design';
 import {
   type IChatUploadCopywritingConfig,
   DEFAULT_MAX_FILE_SIZE,
   UploadType,
 } from '@coze-common/chat-uikit-shared';
+import {
+  FILE_TYPE_CONFIG,
+  FileTypeEnum,
+} from '@coze-common/chat-core/shared/const';
+import { Toast, Upload } from '@coze-arch/coze-design';
 
 interface IChatUploadProps {
   /**
@@ -132,6 +132,7 @@ export const ChatUpload: FC<IChatUploadProps> = props => {
       onFileChange={handleUpload}
       disabled={isDisabled}
       multiple={limitFileCount > 1}
+      uploadTrigger={'custom'}
     >
       {children}
     </Upload>

frontend/packages/common/chat-area/chat-uikit/src/components/common/message-box/index.tsx

@@ -40,7 +40,8 @@ export const MessageBox: FC<
 
     messageBubbleClassname,
     messageBubbleWrapperClassname,
-    messageBoxWraperClassname,
+    messageBoxWrapperClassname,
+    messageHoverWrapperClassName,
     messageErrorWrapperClassname,
     isHoverShowUserInfo,
 
@@ -69,7 +70,8 @@ export const MessageBox: FC<
       classname={classname}
       messageBubbleWrapperClassname={messageBubbleWrapperClassname}
       messageBubbleClassname={messageBubbleClassname}
-      messageBoxWraperClassname={messageBoxWraperClassname}
+      messageBoxWrapperClassname={messageBoxWrapperClassname}
+      messageHoverWrapperClassName={messageHoverWrapperClassName}
       messageErrorWrapperClassname={messageErrorWrapperClassname}
       isHoverShowUserInfo={isHoverShowUserInfo}
       layout={layout}

frontend/packages/common/chat-area/chat-uikit/src/components/common/message-box/message-box-wrap.tsx

@@ -24,13 +24,13 @@ import {
 
 import classnames from 'classnames';
 import { useClickAway, useHover, useUpdateEffect } from 'ahooks';
-import { ErrorBoundary } from '@coze-arch/logger';
 import {
   Layout,
   UIKitEvents,
   useUiKitEventCenter,
 } from '@coze-common/chat-uikit-shared';
 import { useEventCallback } from '@coze-common/chat-hooks';
+import { ErrorBoundary } from '@coze-arch/logger';
 import { Avatar, Typography } from '@coze-arch/coze-design';
 
 import { UserLabel, UserName } from '../user-label';
@@ -67,7 +67,8 @@ export const MessageBoxWrap: FC<
     classname,
     messageBubbleClassname,
     messageBubbleWrapperClassname,
-    messageBoxWraperClassname,
+    messageBoxWrapperClassname,
+    messageHoverWrapperClassName,
     messageErrorWrapperClassname,
     isHoverShowUserInfo = true,
     layout,
@@ -165,7 +166,7 @@ export const MessageBoxWrap: FC<
           // chat-uikit-message-box-container chat-uikit-message-box-container-pc
           className={classnames(
             messageBoxContainerVariants({ isMobileLayout }),
-            messageBoxWraperClassname,
+            messageBoxWrapperClassname,
           )}
         >
           <div
@@ -292,6 +293,17 @@ export const MessageBoxWrap: FC<
                 >
                   {right}
                 </div>
+                {isHovering || hoverContentVisible ? (
+                  <div
+                    // chat-uikit-message-box-container__message__message-box__hover-container
+                    className={classnames(
+                      'absolute right-[-12px] bottom-[-20px]',
+                      messageHoverWrapperClassName,
+                    )}
+                  >
+                    {hoverContent}
+                  </div>
+                ) : null}
               </div>
               {/* Please read the refreshContainerWidthConditionally above before changing the style of this dom */}
               <div
@@ -301,14 +313,6 @@ export const MessageBoxWrap: FC<
               >
                 {renderFooter?.(refreshContainerWidthConditionally)}
               </div>
-              {isHovering || hoverContentVisible ? (
-                <div
-                  // chat-uikit-message-box-container__message__message-box__hover-container
-                  className="absolute right-[-12px] bottom-[-20px]"
-                >
-                  {hoverContent}
-                </div>
-              ) : null}
             </div>
           </div>
         </div>

frontend/packages/common/chat-area/chat-uikit/src/components/common/message-box/type.ts

@@ -91,7 +91,8 @@ interface MessageBoxBasicProps {
   classname?: string;
 
   messageBubbleWrapperClassname?: string;
-  messageBoxWraperClassname?: string; // Direct father style of message box
+  messageBoxWrapperClassname?: string; // Direct father style of message box
+  messageHoverWrapperClassName?: string; // Direct hover style of message box
   messageBubbleClassname?: string; // Message The style of the message bubble
   messageErrorWrapperClassname?: string; // Message wrong father style
   isHoverShowUserInfo?: boolean; // Whether to display user details when hovering
@@ -160,7 +161,9 @@ export interface MessageBoxWrapProps {
   contentTime: number | undefined;
   classname?: string;
 
-  messageBoxWraperClassname?: string; // Direct father style of message box
+  messageBoxWrapperClassname?: string; // Direct father style of message box
+  messageHoverWrapperClassName?: string; // Direct hover style of message box
+
   messageBubbleClassname?: string; // Message The style of the message bubble
   messageBubbleWrapperClassname?: string; // Message message bubble father style
   messageErrorWrapperClassname?: string; // Message wrong father style

frontend/packages/common/chat-area/chat-uikit/src/components/contents/text-content/index.tsx

@@ -54,7 +54,6 @@ export const TextContent: FC<IMessageContentProps> = props => {
   } = props;
   const MdBoxLazy = LazyCozeMdBox;
   const contentRef = useRef<HTMLDivElement | null>(null);
-
   const { content } = message;
 
   if (!isText(content)) {
@@ -63,7 +62,6 @@ export const TextContent: FC<IMessageContentProps> = props => {
 
   const isStreaming = !message.is_finish;
   const text = content.slice(0, message.broken_pos ?? Infinity);
-
   return (
     <div
       className="chat-uikit-text-content"