+
@@ -94,7 +91,11 @@ function FlowCanvas({ sideWidth }: IProps) {
)}
-
+
);
}
diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less
index 43a78ca33b8..92996613c51 100644
--- a/web/src/pages/flow/canvas/node/index.less
+++ b/web/src/pages/flow/canvas/node/index.less
@@ -1,6 +1,6 @@
.textUpdaterNode {
// height: 50px;
- border: 1px solid black;
+ border: 1px solid gray;
padding: 5px;
border-radius: 5px;
background: white;
@@ -10,3 +10,12 @@
font-size: 12px;
}
}
+.selectedNode {
+ border-color: #1677ff;
+}
+
+.handle {
+ display: inline-flex;
+ text-align: center;
+ // align-items: center;
+}
diff --git a/web/src/pages/flow/canvas/node/index.tsx b/web/src/pages/flow/canvas/node/index.tsx
index 13801cace59..bd501799ddf 100644
--- a/web/src/pages/flow/canvas/node/index.tsx
+++ b/web/src/pages/flow/canvas/node/index.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
import { Handle, NodeProps, Position } from 'reactflow';
import styles from './index.less';
@@ -5,19 +6,30 @@ import styles from './index.less';
export function TextUpdaterNode({
data,
isConnectable = true,
+ selected,
}: NodeProps<{ label: string }>) {
return (
-
+
+ className={styles.handle}
+ >
+ {/*
*/}
+
+ className={styles.handle}
+ >
+ {/*
*/}
+
{data.label}
);
diff --git a/web/src/pages/flow/constant.ts b/web/src/pages/flow/constant.ts
new file mode 100644
index 00000000000..8f246dce222
--- /dev/null
+++ b/web/src/pages/flow/constant.ts
@@ -0,0 +1,6 @@
+export enum Operator {
+ Begin = 'Begin',
+ Retrieval = 'Retrieval',
+ Generate = 'Generate',
+ Answer = 'Answer',
+}
diff --git a/web/src/pages/flow/flow-drawer/index.tsx b/web/src/pages/flow/flow-drawer/index.tsx
index 7e395b2574b..01f3338dd13 100644
--- a/web/src/pages/flow/flow-drawer/index.tsx
+++ b/web/src/pages/flow/flow-drawer/index.tsx
@@ -1,18 +1,46 @@
import { IModalProps } from '@/interfaces/common';
import { Drawer } from 'antd';
+import { Node } from 'reactflow';
+import AnswerForm from '../answer-form';
+import BeginForm from '../begin-form';
+import { Operator } from '../constant';
+import GenerateForm from '../generate-form';
+import { useHandleFormValuesChange } from '../hooks';
+import RetrievalForm from '../retrieval-form';
+
+interface IProps {
+ node?: Node;
+}
+
+const FormMap = {
+ [Operator.Begin]: BeginForm,
+ [Operator.Retrieval]: RetrievalForm,
+ [Operator.Generate]: GenerateForm,
+ [Operator.Answer]: AnswerForm,
+};
+
+const FlowDrawer = ({
+ visible,
+ hideModal,
+ node,
+}: IModalProps
& IProps) => {
+ const operatorName: Operator = node?.data.label;
+ const OperatorForm = FormMap[operatorName];
+ const { handleValuesChange } = useHandleFormValuesChange(node?.id);
-const FlowDrawer = ({ visible, hideModal }: IModalProps) => {
return (
- Some contents...
+ {visible && (
+
+ )}
);
};
diff --git a/web/src/pages/flow/generate-form/index.tsx b/web/src/pages/flow/generate-form/index.tsx
new file mode 100644
index 00000000000..c5d63d1927f
--- /dev/null
+++ b/web/src/pages/flow/generate-form/index.tsx
@@ -0,0 +1,83 @@
+import LlmSettingItems from '@/components/llm-setting-items';
+import {
+ ModelVariableType,
+ settledModelVariableMap,
+} from '@/constants/knowledge';
+import { useTranslate } from '@/hooks/commonHooks';
+import { Variable } from '@/interfaces/database/chat';
+import { variableEnabledFieldMap } from '@/pages/chat/constants';
+import { Form, Input, Switch } from 'antd';
+import { useCallback, useEffect } from 'react';
+import { IOperatorForm } from '../interface';
+
+const GenerateForm = ({ onValuesChange }: IOperatorForm) => {
+ const { t } = useTranslate('flow');
+ const [form] = Form.useForm();
+ const initialLlmSetting = undefined;
+
+ const handleParametersChange = useCallback(
+ (value: ModelVariableType) => {
+ const variable = settledModelVariableMap[value];
+ form.setFieldsValue(variable);
+ },
+ [form],
+ );
+
+ useEffect(() => {
+ const switchBoxValues = Object.keys(variableEnabledFieldMap).reduce<
+ Record
+ >((pre, field) => {
+ pre[field] =
+ initialLlmSetting === undefined
+ ? true
+ : !!initialLlmSetting[
+ variableEnabledFieldMap[
+ field as keyof typeof variableEnabledFieldMap
+ ] as keyof Variable
+ ];
+ return pre;
+ }, {});
+ const otherValues = settledModelVariableMap[ModelVariableType.Precise];
+ form.setFieldsValue({ ...switchBoxValues, ...otherValues });
+ }, [form, initialLlmSetting]);
+
+ return (
+
+ );
+};
+
+export default GenerateForm;
diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts
index 23e5216bcba..52f65b882eb 100644
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@@ -1,19 +1,26 @@
import { useSetModalState } from '@/hooks/commonHooks';
-import React, {
- Dispatch,
- KeyboardEventHandler,
- SetStateAction,
- useCallback,
- useState,
-} from 'react';
-import {
- Node,
- Position,
- ReactFlowInstance,
- useOnSelectionChange,
- useReactFlow,
-} from 'reactflow';
+import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
+import { useFetchLlmList } from '@/hooks/llmHooks';
+import React, { KeyboardEventHandler, useCallback, useState } from 'react';
+import { Node, Position, ReactFlowInstance } from 'reactflow';
import { v4 as uuidv4 } from 'uuid';
+import useStore, { RFState } from './store';
+import { buildDslComponentsByGraph } from './utils';
+
+const selector = (state: RFState) => ({
+ nodes: state.nodes,
+ edges: state.edges,
+ onNodesChange: state.onNodesChange,
+ onEdgesChange: state.onEdgesChange,
+ onConnect: state.onConnect,
+ setNodes: state.setNodes,
+ onSelectionChange: state.onSelectionChange,
+});
+
+export const useSelectCanvasData = () => {
+ // return useStore(useShallow(selector)); throw error
+ return useStore(selector);
+};
export const useHandleDrag = () => {
const handleDragStart = useCallback(
@@ -27,7 +34,8 @@ export const useHandleDrag = () => {
return { handleDragStart };
};
-export const useHandleDrop = (setNodes: Dispatch>) => {
+export const useHandleDrop = () => {
+ const addNode = useStore((state) => state.addNode);
const [reactFlowInstance, setReactFlowInstance] =
useState>();
@@ -66,59 +74,40 @@ export const useHandleDrop = (setNodes: Dispatch>) => {
targetPosition: Position.Left,
};
- setNodes((nds) => nds.concat(newNode));
+ addNode(newNode);
},
- [reactFlowInstance, setNodes],
+ [reactFlowInstance, addNode],
);
return { onDrop, onDragOver, setReactFlowInstance };
};
export const useShowDrawer = () => {
+ const [clickedNode, setClickedNode] = useState();
const {
visible: drawerVisible,
hideModal: hideDrawer,
showModal: showDrawer,
} = useSetModalState();
+ const handleShow = useCallback(
+ (node: Node) => {
+ setClickedNode(node);
+ showDrawer();
+ },
+ [showDrawer],
+ );
+
return {
drawerVisible,
hideDrawer,
- showDrawer,
+ showDrawer: handleShow,
+ clickedNode,
};
};
-export const useHandleSelectionChange = () => {
- const [selectedNodes, setSelectedNodes] = useState([]);
- const [selectedEdges, setSelectedEdges] = useState([]);
-
- useOnSelectionChange({
- onChange: ({ nodes, edges }) => {
- setSelectedNodes(nodes.map((node) => node.id));
- setSelectedEdges(edges.map((edge) => edge.id));
- },
- });
-
- return { selectedEdges, selectedNodes };
-};
-
-export const useDeleteEdge = (selectedEdges: string[]) => {
- const { setEdges } = useReactFlow();
-
- const deleteEdge = useCallback(() => {
- setEdges((edges) =>
- edges.filter((edge) => selectedEdges.every((x) => x !== edge.id)),
- );
- }, [setEdges, selectedEdges]);
-
- return deleteEdge;
-};
-
-export const useHandleKeyUp = (
- selectedEdges: string[],
- selectedNodes: string[],
-) => {
- const deleteEdge = useDeleteEdge(selectedEdges);
+export const useHandleKeyUp = () => {
+ const deleteEdge = useStore((state) => state.deleteEdge);
const handleKeyUp: KeyboardEventHandler = useCallback(
(e) => {
if (e.code === 'Delete') {
@@ -132,7 +121,31 @@ export const useHandleKeyUp = (
};
export const useSaveGraph = () => {
- const saveGraph = useCallback(() => {}, []);
+ const { nodes, edges } = useStore((state) => state);
+ const saveGraph = useCallback(() => {
+ const x = buildDslComponentsByGraph(nodes, edges);
+ console.info('components:', x);
+ }, [nodes, edges]);
return { saveGraph };
};
+
+export const useHandleFormValuesChange = (id?: string) => {
+ const updateNodeForm = useStore((state) => state.updateNodeForm);
+ const handleValuesChange = useCallback(
+ (changedValues: any, values: any) => {
+ console.info(changedValues, values);
+ if (id) {
+ updateNodeForm(id, values);
+ }
+ },
+ [updateNodeForm, id],
+ );
+
+ return { handleValuesChange };
+};
+
+export const useFetchDataOnMount = () => {
+ useFetchFlowTemplates();
+ useFetchLlmList();
+};
diff --git a/web/src/pages/flow/index.tsx b/web/src/pages/flow/index.tsx
index b1775b526bf..9bd1a1b0527 100644
--- a/web/src/pages/flow/index.tsx
+++ b/web/src/pages/flow/index.tsx
@@ -4,19 +4,22 @@ import { ReactFlowProvider } from 'reactflow';
import FlowCanvas from './canvas';
import Sider from './flow-sider';
import FlowHeader from './header';
+import { useFetchDataOnMount } from './hooks';
const { Content } = Layout;
function RagFlow() {
const [collapsed, setCollapsed] = useState(false);
+ useFetchDataOnMount();
+
return (
-
+
diff --git a/web/src/pages/flow/interface.ts b/web/src/pages/flow/interface.ts
index 2d17dd48e40..ffb882c2c8f 100644
--- a/web/src/pages/flow/interface.ts
+++ b/web/src/pages/flow/interface.ts
@@ -1,4 +1,62 @@
+import { Edge, Node } from 'reactflow';
+
export interface DSLComponentList {
id: string;
name: string;
}
+
+export interface IOperatorForm {
+ onValuesChange?(changedValues: any, values: any): void;
+}
+
+export interface IBeginForm {
+ prologue?: string;
+}
+
+export interface IRetrievalForm {
+ similarity_threshold?: number;
+ keywords_similarity_weight?: number;
+ top_n?: number;
+ top_k?: number;
+ rerank_id?: string;
+ empty_response?: string;
+ kb_ids: string[];
+}
+
+export interface IGenerateForm {
+ max_tokens?: number;
+ temperature?: number;
+ top_p?: number;
+ presence_penalty?: number;
+ frequency_penalty?: number;
+ cite?: boolean;
+ prompt: number;
+ llm_id: string;
+ parameters: { key: string; component_id: string };
+}
+
+export type NodeData = {
+ label: string;
+ color: string;
+ form: IBeginForm | IRetrievalForm | IGenerateForm;
+};
+
+export interface IFlow {
+ avatar: null;
+ canvas_type: null;
+ create_date: string;
+ create_time: number;
+ description: null;
+ dsl: {
+ answer: any[];
+ components: DSLComponentList;
+ graph: { nodes: Node[]; edges: Edge[] };
+ history: any[];
+ path: string[];
+ };
+ id: string;
+ title: string;
+ update_date: string;
+ update_time: number;
+ user_id: string;
+}
diff --git a/web/src/pages/flow/list/flow-card/index.less b/web/src/pages/flow/list/flow-card/index.less
new file mode 100644
index 00000000000..1c7d174e0fb
--- /dev/null
+++ b/web/src/pages/flow/list/flow-card/index.less
@@ -0,0 +1,78 @@
+.container {
+ height: 251px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .delete {
+ height: 24px;
+ }
+
+ .content {
+ display: flex;
+ justify-content: space-between;
+
+ .context {
+ flex: 1;
+ }
+ }
+
+ .footer {
+ // text-align: left;
+ }
+ .footerTop {
+ padding-bottom: 2px;
+ }
+}
+
+.card {
+ border-radius: 12px;
+ border: 1px solid rgba(234, 236, 240, 1);
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+ padding: 24px;
+ width: 300px;
+ cursor: pointer;
+
+ .titleWrapper {
+ // flex: 1;
+ .title {
+ font-size: 24px;
+ line-height: 32px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.88);
+ word-break: break-all;
+ }
+ .description {
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 20px;
+ color: rgba(0, 0, 0, 0.45);
+ }
+ }
+
+ :global {
+ .ant-card-body {
+ padding: 0;
+ margin: 0;
+ }
+ }
+ .bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .bottomLeft {
+ vertical-align: middle;
+ }
+ .leftIcon {
+ margin-right: 10px;
+ font-size: 18px;
+ vertical-align: middle;
+ }
+ .rightText {
+ font-size: 12px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.65);
+ vertical-align: middle;
+ }
+}
diff --git a/web/src/pages/flow/list/flow-card/index.tsx b/web/src/pages/flow/list/flow-card/index.tsx
new file mode 100644
index 00000000000..643496e23f3
--- /dev/null
+++ b/web/src/pages/flow/list/flow-card/index.tsx
@@ -0,0 +1,94 @@
+import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
+import { useShowDeleteConfirm } from '@/hooks/commonHooks';
+import { formatDate } from '@/utils/date';
+import {
+ CalendarOutlined,
+ DeleteOutlined,
+ UserOutlined,
+} from '@ant-design/icons';
+import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'umi';
+
+import { useDeleteFlow } from '@/hooks/flow-hooks';
+import { IFlow } from '../../interface';
+import styles from './index.less';
+
+interface IProps {
+ item: IFlow;
+}
+
+const FlowCard = ({ item }: IProps) => {
+ const navigate = useNavigate();
+ const showDeleteConfirm = useShowDeleteConfirm();
+ const { t } = useTranslation();
+ const { deleteFlow } = useDeleteFlow();
+
+ const removeKnowledge = () => {
+ return deleteFlow([item.id]);
+ };
+
+ const handleDelete = () => {
+ showDeleteConfirm({ onOk: removeKnowledge });
+ };
+
+ const items: MenuProps['items'] = [
+ {
+ key: '1',
+ label: (
+
+ {t('common.delete')}
+
+
+ ),
+ },
+ ];
+
+ const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => {
+ domEvent.preventDefault();
+ domEvent.stopPropagation();
+ if (key === '1') {
+ handleDelete();
+ }
+ };
+
+ const handleCardClick = () => {
+ navigate(`/flow/${item.id}`);
+ };
+
+ return (
+
+
+
+
} src={item.avatar} />
+
+
+
+
+
+
+
+
{item.title}
+
{item.description}
+
+
+
+
+
+
+ {formatDate(item.update_time)}
+
+
+
+
+