ben/coze-studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Zhj
2025-08-28 21:53:32 +08:00
committed by GitHub
parent bbc615a18e
commit d70101c979
503 changed files with 48036 additions and 3427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/packages/common/chat-area/chat-workflow-render/src/components/chat-flow-render/components/index.tsx Normal file
View File

@@ -0,0 +1,60 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { memo, useMemo } from 'react';
import { isEqual, isFunction, omitBy } from 'lodash-es';
import { extractChatflowMessage } from './utils';
import { type ChatflowNodeData, type RenderNodeEntryProps } from './type';
import { QuestionNodeRender } from './question-node-render';
import { InputNodeRender } from './input-node-render';
const BaseComponent: React.FC<RenderNodeEntryProps> = ({
message,
...restProps
}) => {
const chatflowNodeData: ChatflowNodeData | undefined = useMemo(
() => extractChatflowMessage(message),
[message],
);
if (!chatflowNodeData) {
return null;
}
if (chatflowNodeData.card_type === 'INPUT') {
return (
<InputNodeRender
data={chatflowNodeData}
message={message}
{...restProps}
/>
);
} else if (chatflowNodeData.card_type === 'QUESTION') {
return (
<QuestionNodeRender
data={chatflowNodeData}
message={message}
{...restProps}
/>
);
} else {
return 'content type is not supported';
}
};
export const WorkflowRenderEntry = memo(BaseComponent, (prevProps, nextProps) =>
isEqual(omitBy(prevProps, isFunction), omitBy(nextProps, isFunction)),
);

102
frontend/packages/common/chat-area/chat-workflow-render/src/components/chat-flow-render/components/input-node-render.tsx Normal file
View File

@@ -0,0 +1,102 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useState } from 'react';
import { produce } from 'immer';
import {
type IEventCallbacks,
type IMessage,
} from '@coze-common/chat-uikit-shared';
import { I18n } from '@coze-arch/i18n';
import { Button, Input, Space, Typography } from '@coze-arch/coze-design';
import { type ChatflowNodeData } from './type';
import { NodeWrapperUI } from './node-wrapper-ui';
export const InputNodeRender = ({
data,
onCardSendMsg,
readonly,
isDisable,
message,
}: {
data: ChatflowNodeData;
onCardSendMsg?: IEventCallbacks['onCardSendMsg'];
readonly?: boolean;
isDisable?: boolean;
message: IMessage;
}) => {
const [inputData, setInputData] = useState<Record<string, string>>({});
const [hasSend, setHasSend] = useState(false);
const disabled = readonly || isDisable || hasSend;
return (
<NodeWrapperUI>
<Space spacing={12} vertical className="w-full">
{data.input_card_data?.map((item, index) => (
<Space
align="start"
className="w-full"
spacing={6}
vertical
key={item?.name + index}
>
<Typography.Text ellipsis className="text-lg !font-medium">
{item?.name}
</Typography.Text>
<Input
disabled={disabled || hasSend}
value={inputData[item.name]}
onChange={value => {
setInputData(
produce(draft => {
draft[item.name] = value;
}),
);
}}
/>
</Space>
))}
<Button
className="w-full"
disabled={disabled}
onClick={() => {
if (disabled) {
return;
}
setHasSend(true);
onCardSendMsg?.({
message,
extra: {
msg:
data.input_card_data
?.map(item => `${item.name}:${inputData[item.name] || ''}`)
.join('\n') || '',
mentionList: message.sender_id
? [{ id: message.sender_id }]
: [],
},
});
}}
>
{I18n.t('workflow_detail_title_testrun_submit')}
</Button>
</Space>
</NodeWrapperUI>
);
};

23
frontend/packages/common/chat-area/chat-workflow-render/src/components/chat-flow-render/components/node-wrapper-ui.tsx Normal file
View File

@@ -0,0 +1,23 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { type PropsWithChildren } from 'react';
export const NodeWrapperUI: React.FC<PropsWithChildren> = ({ children }) => (
<div className="overflow-hidden w-full min-w-[282px] max-w-[546px] p-[16px] coz-bg-primary">
{children}
</div>
);

67
frontend/packages/common/chat-area/chat-workflow-render/src/components/chat-flow-render/components/question-node-render.tsx Normal file
View File

@@ -0,0 +1,67 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
type IEventCallbacks,
type IMessage,
} from '@coze-common/chat-uikit-shared';
import { Button, Space, Typography } from '@coze-arch/coze-design';
import { type ChatflowNodeData } from './type';
import { NodeWrapperUI } from './node-wrapper-ui';
export const QuestionNodeRender = ({
data,
onCardSendMsg,
readonly,
isDisable,
message,
}: {
data: ChatflowNodeData;
onCardSendMsg?: IEventCallbacks['onCardSendMsg'];
readonly?: boolean;
isDisable?: boolean;
message: IMessage;
}) => {
const disabled = readonly || isDisable;
return (
<NodeWrapperUI>
<Space className="w-full" vertical spacing={12} align="start">
<Typography.Text ellipsis className="text-18px">
{data.question_card_data?.Title}
</Typography.Text>
<Space className="w-full" vertical spacing={16}>
{data.question_card_data?.Options?.map((option, index) => (
<Button
key={option.name + index}
className="w-full"
color="primary"
disabled={disabled}
onClick={() =>
onCardSendMsg?.({
message,
extra: { msg: option.name, mentionList: [] },
})
}
>
{option.name}
</Button>
))}
</Space>
</Space>
</NodeWrapperUI>
);
};

54
frontend/packages/common/chat-area/chat-workflow-render/src/components/chat-flow-render/components/type.ts Normal file
View File

@@ -0,0 +1,54 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
type IEventCallbacks,
type IMessage,
} from '@coze-common/chat-uikit-shared';
interface RenderNodeBaseProps extends Pick<IEventCallbacks, 'onCardSendMsg'> {
isDisable: boolean | undefined;
readonly: boolean | undefined;
}
export interface RenderNodeEntryProps extends RenderNodeBaseProps {
message: IMessage;
}
export interface ChatflowNodeData {
card_type: 'QUESTION' | 'INPUT';
input_card_data?: {
type: string;
name: string;
}[];
question_card_data?: {
// eslint-disable-next-line @typescript-eslint/naming-convention
Title: string;
// eslint-disable-next-line @typescript-eslint/naming-convention
Options: { name: string }[];
};
}
export interface ChatflowNodeData {
card_type: 'QUESTION' | 'INPUT';
input_card_data?: {
type: string;
name: string;
}[];
question_card_data?: {
// eslint-disable-next-line @typescript-eslint/naming-convention
Title: string;
// eslint-disable-next-line @typescript-eslint/naming-convention
Options: { name: string }[];
};
}

40
frontend/packages/common/chat-area/chat-workflow-render/src/components/chat-flow-render/components/utils.ts Normal file
View File

@@ -0,0 +1,40 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { type IMessage } from '@coze-common/chat-uikit-shared';
import { safeJSONParse } from '@coze-common/chat-uikit';
import { type ChatflowNodeData } from './type';
export const extractChatflowMessage = (message: IMessage) => {
if (message.content_type === 'card') {
const contentStruct = safeJSONParse(message.content) as {
x_properties: {
workflow_card_info: string;
};
};
const workflowDataStr = contentStruct?.x_properties?.workflow_card_info;
if (workflowDataStr) {
const cardData = safeJSONParse(workflowDataStr) as ChatflowNodeData;
if (cardData?.card_type === 'QUESTION' && cardData?.question_card_data) {
return cardData;
}
if (cardData?.card_type === 'INPUT' && cardData?.input_card_data) {
return cardData;
}
}
}
};

87
frontend/packages/common/chat-area/chat-workflow-render/src/components/chat-flow-render/index.tsx Normal file
View File

@@ -0,0 +1,87 @@
/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ContentBoxType } from '@coze-common/chat-uikit-shared';
import {
ContentBox,
type EnhancedContentConfig,
ContentType,
} from '@coze-common/chat-uikit';
import {
PluginScopeContextProvider,
usePluginCustomComponents,
type ComponentTypesMap,
} from '@coze-common/chat-area';
import { WorkflowRenderEntry } from './components';
const defaultEnable = (value?: boolean) => {
if (typeof value === 'undefined') {
return true;
}
return value;
};
export const ChatFlowRender: ComponentTypesMap['contentBox'] = props => {
const customTextMessageInnerTopSlotList = usePluginCustomComponents(
'TextMessageInnerTopSlot',
);
const enhancedContentConfigList: EnhancedContentConfig[] = [
{
rule: ({ contentType, contentConfigs }) => {
const isCardEnable = defaultEnable(
contentConfigs?.[ContentBoxType.CARD]?.enable,
);
return contentType === ContentType.Card && isCardEnable;
},
render: ({ message, eventCallbacks, options }) => {
const { isCardDisabled, readonly } = options;
const { onCardSendMsg } = eventCallbacks ?? {};
return (
<WorkflowRenderEntry
message={message}
onCardSendMsg={onCardSendMsg}
readonly={readonly}
isDisable={isCardDisabled}
/>
);
},
},
];
return (
<ContentBox
enhancedContentConfigList={enhancedContentConfigList}
multimodalTextContentAddonTop={
<>
{customTextMessageInnerTopSlotList.map(
// eslint-disable-next-line @typescript-eslint/naming-convention -- matches the expected naming
({ pluginName, Component }, index) => (
<PluginScopeContextProvider
pluginName={pluginName}
key={pluginName}
>
<Component key={index} message={props.message} />
</PluginScopeContextProvider>
),
)}
</>
}
{...props}
/>
);
};

1
frontend/packages/common/chat-area/chat-workflow-render/src/index.ts
View File

@@ -15,3 +15,4 @@
*/
export { WorkflowRender } from './components/workflow-render';
export { ChatFlowRender } from './components/chat-flow-render';