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/workflow/playground/src/components/conversation-select/conversations.tsx

@@ -17,11 +17,11 @@
 import React, { useEffect, useState, useMemo } from 'react';
 
 import { debounce } from 'lodash-es';
+import { useService } from '@flowgram-adapter/free-layout-editor';
 import { CONVERSATION_NAME, workflowApi } from '@coze-workflow/base';
 import { I18n } from '@coze-arch/i18n';
 import { Typography, Select } from '@coze-arch/coze-design';
 import { CreateMethod, CreateEnv } from '@coze-arch/bot-api/workflow_api';
-import { useService } from '@flowgram-adapter/free-layout-editor';
 
 import { ChatflowService } from '@/services';
 
@@ -131,7 +131,7 @@ export const Conversations: React.FC<ConversationsProps> = ({
           ?.defaultValue || '';
       const findItem = list.find(item => item.label === defaultName);
       // The conversation_name of the start node is selected by default, if not, Default default session is selected by default
-      handleChange(findItem?.value || '0', findItem);
+      handleChange(findItem?.value || list[0]?.value, findItem || list[0]);
     }
   };
 
@@ -155,7 +155,6 @@ export const Conversations: React.FC<ConversationsProps> = ({
       findItem?.value !== chatflowService.selectConversationItem?.value
     ) {
       chatflowService.setSelectConversationItem(findItem);
-      handleChange(findItem?.value || '0');
     }
   }, [value, staticList, dynamicList]);
 

frontend/packages/workflow/playground/src/components/test-run/chat-flow-test-form-panel/test-form-float-button.module.less

@@ -28,3 +28,9 @@
     font-size: 12px;
   }
 }
+
+.float-button-container {
+  position: relative;
+  width: 100%;
+  padding-left: 28px;
+}

frontend/packages/workflow/playground/src/components/test-run/chat-flow-test-form-panel/test-form-float-button.tsx

@@ -41,7 +41,7 @@ export const TestFormFloatButton = ({
   }
 
   return (
-    <>
+    <div className={css['float-button-container']}>
       <div
         className={css['float-button']}
         onClick={handleOpenForm}
@@ -56,6 +56,6 @@ export const TestFormFloatButton = ({
         </Typography.Text>
         <IconCozAdjust className="coz-fg-dim" />
       </div>
-    </>
+    </div>
   );
 };

frontend/packages/workflow/playground/src/components/test-run/chat-history/index.tsx

@@ -18,6 +18,7 @@ import React, { Suspense, lazy } from 'react';
 
 import { isEmpty } from 'lodash-es';
 import { userStoreService } from '@coze-studio/user-store';
+import { type IWorkflow, type IProject } from '@coze-studio/open-chat';
 import { IntelligenceType } from '@coze-arch/idl/intelligence_api';
 import { I18n } from '@coze-arch/i18n';
 import { IconCozIllusAdd } from '@coze-arch/coze-design/illustrations';
@@ -26,7 +27,6 @@ import {
   type ProjectConversation,
   CreateEnv,
 } from '@coze-arch/bot-api/workflow_api';
-import { type IWorkflow, type IProject } from '@coze-studio/open-chat';
 
 import { useSkeleton } from './use-skeleton';
 
@@ -72,8 +72,8 @@ export const ChatHistory = ({
 
   const chatUserInfo = {
     id: userInfo?.user_id_str || '',
-    name: userInfo?.name || '',
-    avatar: userInfo?.avatar_url || '',
+    nickname: userInfo?.name || '',
+    url: userInfo?.avatar_url || '',
   };
 
   if (
@@ -123,10 +123,12 @@ export const ChatHistory = ({
         }}
         areaUi={{
           isNeedClearContext: false,
+          isNeedClearMessage: true,
           input: {
             isShow: showInputArea,
             defaultText,
             renderChatInputTopSlot: topSlot,
+            isNeedAudio: false,
           },
           renderLoading,
           uiTheme: 'chatFlow',