mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-02-06 02:25:05 +08:00
### What problem does this PR solve? Feat: Initialize the data pipeline canvas. #9869 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
165
web/src/pages/data-flow/form-sheet/form-config-map.tsx
Normal file
165
web/src/pages/data-flow/form-sheet/form-config-map.tsx
Normal file
@ -0,0 +1,165 @@
|
||||
import { Operator } from '../constant';
|
||||
import AgentForm from '../form/agent-form';
|
||||
import AkShareForm from '../form/akshare-form';
|
||||
import ArXivForm from '../form/arxiv-form';
|
||||
import BaiduFanyiForm from '../form/baidu-fanyi-form';
|
||||
import BaiduForm from '../form/baidu-form';
|
||||
import BeginForm from '../form/begin-form';
|
||||
import BingForm from '../form/bing-form';
|
||||
import CategorizeForm from '../form/categorize-form';
|
||||
import CodeForm from '../form/code-form';
|
||||
import CrawlerForm from '../form/crawler-form';
|
||||
import DeepLForm from '../form/deepl-form';
|
||||
import DuckDuckGoForm from '../form/duckduckgo-form';
|
||||
import EmailForm from '../form/email-form';
|
||||
import ExeSQLForm from '../form/exesql-form';
|
||||
import GithubForm from '../form/github-form';
|
||||
import GoogleForm from '../form/google-form';
|
||||
import GoogleScholarForm from '../form/google-scholar-form';
|
||||
import InvokeForm from '../form/invoke-form';
|
||||
import IterationForm from '../form/iteration-form';
|
||||
import IterationStartForm from '../form/iteration-start-from';
|
||||
import Jin10Form from '../form/jin10-form';
|
||||
import KeywordExtractForm from '../form/keyword-extract-form';
|
||||
import MessageForm from '../form/message-form';
|
||||
import PubMedForm from '../form/pubmed-form';
|
||||
import QWeatherForm from '../form/qweather-form';
|
||||
import RelevantForm from '../form/relevant-form';
|
||||
import RetrievalForm from '../form/retrieval-form/next';
|
||||
import RewriteQuestionForm from '../form/rewrite-question-form';
|
||||
import SearXNGForm from '../form/searxng-form';
|
||||
import StringTransformForm from '../form/string-transform-form';
|
||||
import SwitchForm from '../form/switch-form';
|
||||
import TavilyExtractForm from '../form/tavily-extract-form';
|
||||
import TavilyForm from '../form/tavily-form';
|
||||
import TuShareForm from '../form/tushare-form';
|
||||
import UserFillUpForm from '../form/user-fill-up-form';
|
||||
import WenCaiForm from '../form/wencai-form';
|
||||
import WikipediaForm from '../form/wikipedia-form';
|
||||
import YahooFinanceForm from '../form/yahoo-finance-form';
|
||||
|
||||
export const FormConfigMap = {
|
||||
[Operator.Begin]: {
|
||||
component: BeginForm,
|
||||
},
|
||||
[Operator.Retrieval]: {
|
||||
component: RetrievalForm,
|
||||
},
|
||||
[Operator.Categorize]: {
|
||||
component: CategorizeForm,
|
||||
},
|
||||
[Operator.Message]: {
|
||||
component: MessageForm,
|
||||
},
|
||||
[Operator.Relevant]: {
|
||||
component: RelevantForm,
|
||||
},
|
||||
[Operator.RewriteQuestion]: {
|
||||
component: RewriteQuestionForm,
|
||||
},
|
||||
[Operator.Code]: {
|
||||
component: CodeForm,
|
||||
},
|
||||
[Operator.WaitingDialogue]: {
|
||||
component: CodeForm,
|
||||
},
|
||||
[Operator.Agent]: {
|
||||
component: AgentForm,
|
||||
},
|
||||
[Operator.Baidu]: {
|
||||
component: BaiduForm,
|
||||
},
|
||||
[Operator.DuckDuckGo]: {
|
||||
component: DuckDuckGoForm,
|
||||
},
|
||||
[Operator.KeywordExtract]: {
|
||||
component: KeywordExtractForm,
|
||||
},
|
||||
[Operator.Wikipedia]: {
|
||||
component: WikipediaForm,
|
||||
},
|
||||
[Operator.PubMed]: {
|
||||
component: PubMedForm,
|
||||
},
|
||||
[Operator.ArXiv]: {
|
||||
component: ArXivForm,
|
||||
},
|
||||
[Operator.Google]: {
|
||||
component: GoogleForm,
|
||||
},
|
||||
[Operator.Bing]: {
|
||||
component: BingForm,
|
||||
},
|
||||
[Operator.GoogleScholar]: {
|
||||
component: GoogleScholarForm,
|
||||
},
|
||||
[Operator.DeepL]: {
|
||||
component: DeepLForm,
|
||||
},
|
||||
[Operator.GitHub]: {
|
||||
component: GithubForm,
|
||||
},
|
||||
[Operator.BaiduFanyi]: {
|
||||
component: BaiduFanyiForm,
|
||||
},
|
||||
[Operator.QWeather]: {
|
||||
component: QWeatherForm,
|
||||
},
|
||||
[Operator.ExeSQL]: {
|
||||
component: ExeSQLForm,
|
||||
},
|
||||
[Operator.Switch]: {
|
||||
component: SwitchForm,
|
||||
},
|
||||
[Operator.WenCai]: {
|
||||
component: WenCaiForm,
|
||||
},
|
||||
[Operator.AkShare]: {
|
||||
component: AkShareForm,
|
||||
},
|
||||
[Operator.YahooFinance]: {
|
||||
component: YahooFinanceForm,
|
||||
},
|
||||
[Operator.Jin10]: {
|
||||
component: Jin10Form,
|
||||
},
|
||||
[Operator.TuShare]: {
|
||||
component: TuShareForm,
|
||||
},
|
||||
[Operator.Crawler]: {
|
||||
component: CrawlerForm,
|
||||
},
|
||||
[Operator.Invoke]: {
|
||||
component: InvokeForm,
|
||||
},
|
||||
[Operator.SearXNG]: {
|
||||
component: SearXNGForm,
|
||||
},
|
||||
[Operator.Concentrator]: {
|
||||
component: () => <></>,
|
||||
},
|
||||
[Operator.Note]: {
|
||||
component: () => <></>,
|
||||
},
|
||||
[Operator.Email]: {
|
||||
component: EmailForm,
|
||||
},
|
||||
[Operator.Iteration]: {
|
||||
component: IterationForm,
|
||||
},
|
||||
[Operator.IterationStart]: {
|
||||
component: IterationStartForm,
|
||||
},
|
||||
[Operator.TavilySearch]: {
|
||||
component: TavilyForm,
|
||||
},
|
||||
[Operator.UserFillUp]: {
|
||||
component: UserFillUpForm,
|
||||
},
|
||||
[Operator.StringTransform]: {
|
||||
component: StringTransformForm,
|
||||
},
|
||||
[Operator.TavilyExtract]: {
|
||||
component: TavilyExtractForm,
|
||||
},
|
||||
};
|
||||
134
web/src/pages/data-flow/form-sheet/next.tsx
Normal file
134
web/src/pages/data-flow/form-sheet/next.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet';
|
||||
import { useTranslate } from '@/hooks/common-hooks';
|
||||
import { IModalProps } from '@/interfaces/common';
|
||||
import { RAGFlowNodeType } from '@/interfaces/database/flow';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { lowerFirst } from 'lodash';
|
||||
import { Play, X } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import { BeginId, Operator } from '../constant';
|
||||
import { AgentFormContext } from '../context';
|
||||
import { RunTooltip } from '../flow-tooltip';
|
||||
import { useHandleNodeNameChange } from '../hooks/use-change-node-name';
|
||||
import OperatorIcon from '../operator-icon';
|
||||
import useGraphStore from '../store';
|
||||
import { needsSingleStepDebugging } from '../utils';
|
||||
import { FormConfigMap } from './form-config-map';
|
||||
import SingleDebugSheet from './single-debug-sheet';
|
||||
|
||||
interface IProps {
|
||||
node?: RAGFlowNodeType;
|
||||
singleDebugDrawerVisible: IModalProps<any>['visible'];
|
||||
hideSingleDebugDrawer: IModalProps<any>['hideModal'];
|
||||
showSingleDebugDrawer: IModalProps<any>['showModal'];
|
||||
chatVisible: boolean;
|
||||
}
|
||||
|
||||
const EmptyContent = () => <div></div>;
|
||||
|
||||
const FormSheet = ({
|
||||
visible,
|
||||
hideModal,
|
||||
node,
|
||||
singleDebugDrawerVisible,
|
||||
chatVisible,
|
||||
hideSingleDebugDrawer,
|
||||
showSingleDebugDrawer,
|
||||
}: IModalProps<any> & IProps) => {
|
||||
const operatorName: Operator = node?.data.label as Operator;
|
||||
const clickedToolId = useGraphStore((state) => state.clickedToolId);
|
||||
|
||||
const currentFormMap = FormConfigMap[operatorName];
|
||||
|
||||
const OperatorForm = currentFormMap?.component ?? EmptyContent;
|
||||
|
||||
const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
|
||||
id: node?.id,
|
||||
data: node?.data,
|
||||
});
|
||||
|
||||
const isMcp = useMemo(() => {
|
||||
return (
|
||||
operatorName === Operator.Tool &&
|
||||
Object.values(Operator).every((x) => x !== clickedToolId)
|
||||
);
|
||||
}, [clickedToolId, operatorName]);
|
||||
|
||||
const { t } = useTranslate('flow');
|
||||
|
||||
return (
|
||||
<Sheet open={visible} modal={false}>
|
||||
<SheetContent
|
||||
className={cn('top-20 p-0 flex flex-col pb-20 ', {
|
||||
'right-[620px]': chatVisible,
|
||||
})}
|
||||
closeIcon={false}
|
||||
>
|
||||
<SheetHeader>
|
||||
<SheetTitle className="hidden"></SheetTitle>
|
||||
<section className="flex-col border-b py-2 px-5">
|
||||
<div className="flex items-center gap-2 pb-3">
|
||||
<OperatorIcon name={operatorName}></OperatorIcon>
|
||||
|
||||
{isMcp ? (
|
||||
<div className="flex-1">MCP Config</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<label htmlFor="">{t('title')}</label>
|
||||
{node?.id === BeginId ? (
|
||||
<span>{t(BeginId)}</span>
|
||||
) : (
|
||||
<Input
|
||||
value={name}
|
||||
onBlur={handleNameBlur}
|
||||
onChange={handleNameChange}
|
||||
></Input>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{needsSingleStepDebugging(operatorName) && (
|
||||
<RunTooltip>
|
||||
<Play
|
||||
className="size-5 cursor-pointer"
|
||||
onClick={showSingleDebugDrawer}
|
||||
/>
|
||||
</RunTooltip>
|
||||
)}
|
||||
<X onClick={hideModal} />
|
||||
</div>
|
||||
{isMcp || (
|
||||
<span>
|
||||
{t(
|
||||
`${lowerFirst(operatorName === Operator.Tool ? clickedToolId : operatorName)}Description`,
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</section>
|
||||
</SheetHeader>
|
||||
<section className="pt-4 overflow-auto flex-1">
|
||||
{visible && (
|
||||
<AgentFormContext.Provider value={node}>
|
||||
<OperatorForm node={node} key={node?.id}></OperatorForm>
|
||||
</AgentFormContext.Provider>
|
||||
)}
|
||||
</section>
|
||||
</SheetContent>
|
||||
{singleDebugDrawerVisible && (
|
||||
<SingleDebugSheet
|
||||
visible={singleDebugDrawerVisible}
|
||||
hideModal={hideSingleDebugDrawer}
|
||||
componentId={node?.id}
|
||||
></SingleDebugSheet>
|
||||
)}
|
||||
</Sheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormSheet;
|
||||
@ -0,0 +1,89 @@
|
||||
import CopyToClipboard from '@/components/copy-to-clipboard';
|
||||
import { Sheet, SheetContent, SheetHeader } from '@/components/ui/sheet';
|
||||
import { useDebugSingle, useFetchInputForm } from '@/hooks/use-agent-request';
|
||||
import { IModalProps } from '@/interfaces/common';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { X } from 'lucide-react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import JsonView from 'react18-json-view';
|
||||
import 'react18-json-view/src/style.css';
|
||||
import DebugContent from '../../debug-content';
|
||||
import { transferInputsArrayToObject } from '../../form/begin-form/use-watch-change';
|
||||
import { buildBeginInputListFromObject } from '../../form/begin-form/utils';
|
||||
|
||||
interface IProps {
|
||||
componentId?: string;
|
||||
}
|
||||
|
||||
const SingleDebugSheet = ({
|
||||
componentId,
|
||||
visible,
|
||||
hideModal,
|
||||
}: IModalProps<any> & IProps) => {
|
||||
const { t } = useTranslation();
|
||||
const inputForm = useFetchInputForm(componentId);
|
||||
const { debugSingle, data, loading } = useDebugSingle();
|
||||
|
||||
const list = useMemo(() => {
|
||||
return buildBeginInputListFromObject(inputForm);
|
||||
}, [inputForm]);
|
||||
|
||||
const onOk = useCallback(
|
||||
(nextValues: any[]) => {
|
||||
if (componentId) {
|
||||
debugSingle({
|
||||
component_id: componentId,
|
||||
params: transferInputsArrayToObject(nextValues),
|
||||
});
|
||||
}
|
||||
},
|
||||
[componentId, debugSingle],
|
||||
);
|
||||
|
||||
const content = JSON.stringify(data, null, 2);
|
||||
|
||||
return (
|
||||
<Sheet open={visible} modal={false}>
|
||||
<SheetContent className="top-20 p-0" closeIcon={false}>
|
||||
<SheetHeader className="py-2 px-5">
|
||||
<div className="flex justify-between ">
|
||||
{t('flow.testRun')}
|
||||
<X onClick={hideModal} className="cursor-pointer" />
|
||||
</div>
|
||||
</SheetHeader>
|
||||
<section className="overflow-y-auto pt-4 px-5">
|
||||
<DebugContent
|
||||
parameters={list}
|
||||
ok={onOk}
|
||||
isNext={false}
|
||||
loading={loading}
|
||||
submitButtonDisabled={list.length === 0}
|
||||
></DebugContent>
|
||||
{!isEmpty(data) ? (
|
||||
<div
|
||||
className={cn('mt-4 rounded-md border', {
|
||||
[`border-state-error`]: !isEmpty(data._ERROR),
|
||||
})}
|
||||
>
|
||||
<div className="flex justify-between p-2">
|
||||
<span>JSON</span>
|
||||
<CopyToClipboard text={content}></CopyToClipboard>
|
||||
</div>
|
||||
<JsonView
|
||||
src={data}
|
||||
displaySize
|
||||
collapseStringsAfterLength={100000000000}
|
||||
className="w-full h-[800px] break-words overflow-auto p-2"
|
||||
dark
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleDebugSheet;
|
||||
Reference in New Issue
Block a user