feat(web): copy awel flow (#1200)

Co-authored-by: Fangyin Cheng <staneyffer@gmail.com>
This commit is contained in:
Hzh_97
2024-02-28 21:03:23 +08:00
committed by GitHub
parent 0837da48ba
commit 673ddaab5b
68 changed files with 898 additions and 190 deletions

View File

@@ -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>