mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-09-11 05:49:22 +00:00
feat(web): copy awel flow (#1200)
Co-authored-by: Fangyin Cheng <staneyffer@gmail.com>
This commit is contained in:
@@ -1,7 +1,15 @@
|
||||
import { apiInterceptors, deleteFlowById, newDialogue } from '@/client/api';
|
||||
import { IFlow } from '@/types/flow';
|
||||
import { DeleteFilled, EditFilled, MessageFilled, WarningOutlined } from '@ant-design/icons';
|
||||
import { Modal } from 'antd';
|
||||
import {
|
||||
CopyFilled,
|
||||
DeleteFilled,
|
||||
EditFilled,
|
||||
ExclamationCircleFilled,
|
||||
ExclamationCircleOutlined,
|
||||
MessageFilled,
|
||||
WarningOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Modal, Tooltip } from 'antd';
|
||||
import React, { useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FlowPreview from './preview-flow';
|
||||
@@ -13,9 +21,10 @@ import qs from 'querystring';
|
||||
interface FlowCardProps {
|
||||
flow: IFlow;
|
||||
deleteCallback: (uid: string) => void;
|
||||
onCopy: (flow: IFlow) => void;
|
||||
}
|
||||
|
||||
const FlowCard: React.FC<FlowCardProps> = ({ flow, deleteCallback }) => {
|
||||
const FlowCard: React.FC<FlowCardProps> = ({ flow, onCopy, deleteCallback }) => {
|
||||
const { model } = useContext(ChatContext);
|
||||
const { t } = useTranslation();
|
||||
const [modal, contextHolder] = Modal.useModal();
|
||||
@@ -63,12 +72,28 @@ const FlowCard: React.FC<FlowCardProps> = ({ flow, deleteCallback }) => {
|
||||
<>
|
||||
{contextHolder}
|
||||
<GptCard
|
||||
className="w-96"
|
||||
className="w-[26rem] max-w-full"
|
||||
title={flow.name}
|
||||
desc={flow.description}
|
||||
tags={[
|
||||
{ text: flow.source, border: true, color: flow.source === 'DBGPT-WEB' ? 'green' : 'blue' },
|
||||
{ text: flow.editable ? 'Editable' : 'Can not Edit', color: flow.editable ? 'green' : 'gray' },
|
||||
{ text: flow.source, color: flow.source === 'DBGPT-WEB' ? 'green' : 'blue', border: true },
|
||||
{ text: flow.editable ? 'Editable' : 'Can not Edit', color: flow.editable ? 'green' : 'gray', border: true },
|
||||
{
|
||||
text: (
|
||||
<>
|
||||
{flow.error_message ? (
|
||||
<Tooltip placement="bottom" title={flow.error_message}>
|
||||
{flow.state}
|
||||
<ExclamationCircleOutlined className="ml-1" />
|
||||
</Tooltip>
|
||||
) : (
|
||||
flow.state
|
||||
)}
|
||||
</>
|
||||
),
|
||||
color: flow.state === 'load_failed' ? 'red' : flow.state === 'running' ? 'green' : 'blue',
|
||||
border: true,
|
||||
},
|
||||
]}
|
||||
operations={[
|
||||
{
|
||||
@@ -81,6 +106,13 @@ const FlowCard: React.FC<FlowCardProps> = ({ flow, deleteCallback }) => {
|
||||
children: <EditFilled />,
|
||||
onClick: cardClick,
|
||||
},
|
||||
{
|
||||
label: t('Copy'),
|
||||
children: <CopyFilled />,
|
||||
onClick: () => {
|
||||
onCopy(flow);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('Delete'),
|
||||
children: <DeleteFilled />,
|
||||
@@ -88,7 +120,7 @@ const FlowCard: React.FC<FlowCardProps> = ({ flow, deleteCallback }) => {
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div className="w-full h-[150px] shadow-[inset_0_0_16px_rgba(50,50,50,.05)]">
|
||||
<div className="w-full h-40 shadow-[inset_0_0_16px_rgba(50,50,50,.05)]">
|
||||
<FlowPreview flowData={flow.flow_data} />
|
||||
</div>
|
||||
</GptCard>
|
||||
|
Reference in New Issue
Block a user