diff --git a/web/src/pages/data-flow/canvas/node/dropdown.tsx b/web/src/pages/data-flow/canvas/node/dropdown.tsx deleted file mode 100644 index dd5263abc..000000000 --- a/web/src/pages/data-flow/canvas/node/dropdown.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import OperateDropdown from '@/components/operate-dropdown'; -import { CopyOutlined } from '@ant-design/icons'; -import { Flex, MenuProps } from 'antd'; -import { useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; -import { Operator } from '../../constant'; -import { useDuplicateNode } from '../../hooks'; -import useGraphStore from '../../store'; - -interface IProps { - id: string; - iconFontColor?: string; - label: string; -} - -const NodeDropdown = ({ id, iconFontColor, label }: IProps) => { - const { t } = useTranslation(); - const deleteNodeById = useGraphStore((store) => store.deleteNodeById); - const deleteIterationNodeById = useGraphStore( - (store) => store.deleteIterationNodeById, - ); - - const deleteNode = useCallback(() => { - if (label === Operator.Iteration) { - deleteIterationNodeById(id); - } else { - deleteNodeById(id); - } - }, [label, deleteIterationNodeById, id, deleteNodeById]); - - const duplicateNode = useDuplicateNode(); - - const items: MenuProps['items'] = [ - { - key: '2', - onClick: () => duplicateNode(id, label), - label: ( - - {t('common.copy')} - - - ), - }, - ]; - - return ( - - ); -}; - -export default NodeDropdown; diff --git a/web/src/pages/data-flow/canvas/node/popover.tsx b/web/src/pages/data-flow/canvas/node/popover.tsx deleted file mode 100644 index d44538656..000000000 --- a/web/src/pages/data-flow/canvas/node/popover.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import get from 'lodash/get'; -import React, { MouseEventHandler, useCallback, useMemo } from 'react'; -import JsonView from 'react18-json-view'; -import 'react18-json-view/src/style.css'; -import { useReplaceIdWithText } from '../../hooks'; - -import { useTheme } from '@/components/theme-provider'; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from '@/components/ui/popover'; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from '@/components/ui/table'; -import { useTranslate } from '@/hooks/common-hooks'; -import { useFetchAgent } from '@/hooks/use-agent-request'; -import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query'; - -interface IProps extends React.PropsWithChildren { - nodeId: string; - name?: string; -} - -export function NextNodePopover({ children, nodeId, name }: IProps) { - const { t } = useTranslate('flow'); - - const { data } = useFetchAgent(); - const { theme } = useTheme(); - const component = useMemo(() => { - return get(data, ['dsl', 'components', nodeId], {}); - }, [nodeId, data]); - - const inputs: Array<{ component_id: string; content: string }> = get( - component, - ['obj', 'inputs'], - [], - ); - const output = get(component, ['obj', 'output'], {}); - const { replacedOutput } = useReplaceIdWithText(output); - const stopPropagation: MouseEventHandler = useCallback((e) => { - e.stopPropagation(); - }, []); - - const getLabel = useGetComponentLabelByValue(nodeId); - - return ( - - - {children} - - -
- {name} {t('operationResults')} -
-
-
- {t('input')} -
- - - - {t('componentId')} - {t('content')} - - - - {inputs.map((x, idx) => ( - - {getLabel(x.component_id)} - {x.content} - - ))} - -
-
-
-
- {t('output')} -
- -
-
-
- - - ); -} diff --git a/web/src/pages/data-flow/context.ts b/web/src/pages/data-flow/context.ts index 32f2edd86..e1b20b0df 100644 --- a/web/src/pages/data-flow/context.ts +++ b/web/src/pages/data-flow/context.ts @@ -2,8 +2,7 @@ import { RAGFlowNodeType } from '@/interfaces/database/flow'; import { HandleType, Position } from '@xyflow/react'; import { createContext } from 'react'; import { useAddNode } from './hooks/use-add-node'; -import { useCacheChatLog } from './hooks/use-cache-chat-log'; -import { useShowFormDrawer, useShowLogSheet } from './hooks/use-show-drawer'; +import { useShowFormDrawer } from './hooks/use-show-drawer'; export const AgentFormContext = createContext( undefined, @@ -19,24 +18,6 @@ export const AgentInstanceContext = createContext( {} as AgentInstanceContextType, ); -type AgentChatContextType = Pick< - ReturnType, - 'showLogSheet' -> & { setLastSendLoadingFunc: (loading: boolean, messageId: string) => void }; - -export const AgentChatContext = createContext( - {} as AgentChatContextType, -); - -type AgentChatLogContextType = Pick< - ReturnType, - 'addEventList' | 'setCurrentMessageId' ->; - -export const AgentChatLogContext = createContext( - {} as AgentChatLogContextType, -); - export type HandleContextType = { nodeId?: string; id?: string; diff --git a/web/src/pages/data-flow/debug-content/index.tsx b/web/src/pages/data-flow/debug-content/index.tsx deleted file mode 100644 index eadcefe58..000000000 --- a/web/src/pages/data-flow/debug-content/index.tsx +++ /dev/null @@ -1,260 +0,0 @@ -import { ButtonLoading } from '@/components/ui/button'; -import { - Form, - FormControl, - FormField, - FormItem, - FormLabel, - FormMessage, -} from '@/components/ui/form'; -import { Input } from '@/components/ui/input'; -import { RAGFlowSelect } from '@/components/ui/select'; -import { Switch } from '@/components/ui/switch'; -import { Textarea } from '@/components/ui/textarea'; -import { IMessage } from '@/pages/chat/interface'; -import { zodResolver } from '@hookform/resolvers/zod'; -import React, { ReactNode, useCallback, useMemo } from 'react'; -import { useForm } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; -import { z } from 'zod'; -import { BeginQueryType } from '../constant'; -import { BeginQuery } from '../interface'; -import { FileUploadDirectUpload } from './uploader'; - -const StringFields = [ - BeginQueryType.Line, - BeginQueryType.Paragraph, - BeginQueryType.Options, -]; - -interface IProps { - parameters: BeginQuery[]; - message?: IMessage; - ok(parameters: any[]): void; - isNext?: boolean; - loading?: boolean; - submitButtonDisabled?: boolean; - btnText?: ReactNode; -} - -const DebugContent = ({ - parameters, - message, - ok, - isNext = true, - loading = false, - submitButtonDisabled = false, - btnText, -}: IProps) => { - const { t } = useTranslation(); - - const formSchemaValues = useMemo(() => { - const obj = parameters.reduce<{ - schema: Record; - values: Record; - }>( - (pre, cur, idx) => { - const type = cur.type; - let fieldSchema; - let value; - if (StringFields.some((x) => x === type)) { - fieldSchema = z.string().trim().min(1); - } else if (type === BeginQueryType.Boolean) { - fieldSchema = z.boolean(); - value = false; - } else if (type === BeginQueryType.Integer || type === 'float') { - fieldSchema = z.coerce.number(); - } else { - fieldSchema = z.record(z.any()); - } - - if (cur.optional) { - fieldSchema = fieldSchema.optional(); - } - - const index = idx.toString(); - - pre.schema[index] = fieldSchema; - pre.values[index] = value; - - return pre; - }, - { schema: {}, values: {} }, - ); - - return { schema: z.object(obj.schema), values: obj.values }; - }, [parameters]); - - const form = useForm>({ - defaultValues: formSchemaValues.values, - resolver: zodResolver(formSchemaValues.schema), - }); - - const submittable = true; - - const renderWidget = useCallback( - (q: BeginQuery, idx: string) => { - const props = { - key: idx, - label: q.name ?? q.key, - name: idx, - }; - - const BeginQueryTypeMap = { - [BeginQueryType.Line]: ( - ( - - {props.label} - - - - - - )} - /> - ), - [BeginQueryType.Paragraph]: ( - ( - - {props.label} - - - - - - )} - /> - ), - [BeginQueryType.Options]: ( - ( - - {props.label} - - ({ - label: x, - value: x as string, - })) ?? [] - } - {...field} - > - - - - )} - /> - ), - [BeginQueryType.File]: ( - - ( -
- - {t('assistantAvatar')} - - - - - -
- )} - /> - - ), - [BeginQueryType.Integer]: ( - ( - - {props.label} - - - - - - )} - /> - ), - [BeginQueryType.Boolean]: ( - ( - - {props.label} - - - - - - )} - /> - ), - }; - - return ( - BeginQueryTypeMap[q.type as BeginQueryType] ?? - BeginQueryTypeMap[BeginQueryType.Paragraph] - ); - }, - [form, t], - ); - - const onSubmit = useCallback( - (values: z.infer) => { - const nextValues = Object.entries(values).map(([key, value]) => { - const item = parameters[Number(key)]; - return { ...item, value }; - }); - - ok(nextValues); - }, - [formSchemaValues, ok, parameters], - ); - return ( - <> -
- {message?.data?.tips &&
{message.data.tips}
} -
- - {parameters.map((x, idx) => { - return
{renderWidget(x, idx.toString())}
; - })} -
- - {btnText || t(isNext ? 'common.next' : 'flow.run')} - -
-
- -
- - ); -}; - -export default DebugContent; diff --git a/web/src/pages/data-flow/debug-content/popover-form.tsx b/web/src/pages/data-flow/debug-content/popover-form.tsx deleted file mode 100644 index 9465d903b..000000000 --- a/web/src/pages/data-flow/debug-content/popover-form.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { - Form, - FormControl, - FormField, - FormItem, - FormMessage, -} from '@/components/ui/form'; -import { Input } from '@/components/ui/input'; -import { Popover, PopoverContent } from '@/components/ui/popover'; -import { useParseDocument } from '@/hooks/document-hooks'; -import { IModalProps } from '@/interfaces/common'; -import { zodResolver } from '@hookform/resolvers/zod'; -import { PropsWithChildren } from 'react'; -import { useForm } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; -import { z } from 'zod'; - -const reg = - /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/; - -const FormSchema = z.object({ - url: z.string(), - result: z.any(), -}); - -const values = { - url: '', - result: null, -}; - -export const PopoverForm = ({ - children, - visible, - switchVisible, -}: PropsWithChildren>) => { - const form = useForm({ - defaultValues: values, - resolver: zodResolver(FormSchema), - }); - const { parseDocument, loading } = useParseDocument(); - const { t } = useTranslation(); - - // useResetFormOnCloseModal({ - // form, - // visible, - // }); - - async function onSubmit(values: z.infer) { - const val = values.url; - - if (reg.test(val)) { - const ret = await parseDocument(val); - if (ret?.data?.code === 0) { - form.setValue('result', ret?.data?.data); - } - } - } - - const content = ( -
- - ( - - - e.preventDefault()} - placeholder={t('flow.pasteFileLink')} - // suffix={ - // - // } - /> - - - - )} - /> - <>} - /> - - - ); - - return ( - - {children} - {content} - - ); -}; diff --git a/web/src/pages/data-flow/debug-content/uploader.tsx b/web/src/pages/data-flow/debug-content/uploader.tsx deleted file mode 100644 index e11a6f41d..000000000 --- a/web/src/pages/data-flow/debug-content/uploader.tsx +++ /dev/null @@ -1,116 +0,0 @@ -'use client'; - -import { - FileUpload, - FileUploadDropzone, - FileUploadItem, - FileUploadItemDelete, - FileUploadItemMetadata, - FileUploadItemPreview, - FileUploadItemProgress, - FileUploadList, - FileUploadTrigger, - type FileUploadProps, -} from '@/components/file-upload'; -import { Button } from '@/components/ui/button'; -import { useUploadCanvasFile } from '@/hooks/use-agent-request'; -import { Upload, X } from 'lucide-react'; -import * as React from 'react'; -import { toast } from 'sonner'; - -type FileUploadDirectUploadProps = { - value: Record; - onChange(value: Record): void; -}; - -export function FileUploadDirectUpload({ - onChange, -}: FileUploadDirectUploadProps) { - const [files, setFiles] = React.useState([]); - - const { uploadCanvasFile } = useUploadCanvasFile(); - - const onUpload: NonNullable = React.useCallback( - async (files, { onSuccess, onError }) => { - try { - const uploadPromises = files.map(async (file) => { - const handleError = (error?: any) => { - onError( - file, - error instanceof Error ? error : new Error('Upload failed'), - ); - }; - try { - const ret = await uploadCanvasFile([file]); - if (ret.code === 0) { - onSuccess(file); - onChange(ret.data); - } else { - handleError(); - } - } catch (error) { - handleError(error); - } - }); - - // Wait for all uploads to complete - await Promise.all(uploadPromises); - } catch (error) { - // This handles any error that might occur outside the individual upload processes - console.error('Unexpected error during upload:', error); - } - }, - [onChange, uploadCanvasFile], - ); - - const onFileReject = React.useCallback((file: File, message: string) => { - toast(message, { - description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`, - }); - }, []); - - return ( - - -
-
- -
-

Drag & drop files here

-

- Or click to browse (max 2 files) -

-
- - - - - - {files.map((file, index) => ( - -
- - - - - -
- - - ))} - - - ); -} diff --git a/web/src/pages/data-flow/form-hooks.ts b/web/src/pages/data-flow/form-hooks.ts deleted file mode 100644 index fef7d37b9..000000000 --- a/web/src/pages/data-flow/form-hooks.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { useTranslate } from '@/hooks/common-hooks'; -import { useCallback, useMemo } from 'react'; -import { Operator, RestrictedUpstreamMap } from './constant'; -import useGraphStore from './store'; - -export const useBuildFormSelectOptions = ( - operatorName: Operator, - selfId?: string, // exclude the current node -) => { - const nodes = useGraphStore((state) => state.nodes); - - const buildCategorizeToOptions = useCallback( - (toList: string[]) => { - const excludedNodes: Operator[] = [ - Operator.Note, - ...(RestrictedUpstreamMap[operatorName] ?? []), - ]; - return nodes - .filter( - (x) => - excludedNodes.every((y) => y !== x.data.label) && - x.id !== selfId && - !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options - ) - .map((x) => ({ label: x.data.name, value: x.id })); - }, - [nodes, operatorName, selfId], - ); - - return buildCategorizeToOptions; -}; - -export const useBuildSortOptions = () => { - const { t } = useTranslate('flow'); - - const options = useMemo(() => { - return ['data', 'relevance'].map((x) => ({ - value: x, - label: t(x), - })); - }, [t]); - return options; -}; diff --git a/web/src/pages/data-flow/hooks/use-open-document.ts b/web/src/pages/data-flow/hooks/use-open-document.ts deleted file mode 100644 index 384529c15..000000000 --- a/web/src/pages/data-flow/hooks/use-open-document.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useCallback } from 'react'; - -export function useOpenDocument() { - const openDocument = useCallback(() => { - window.open( - 'https://ragflow.io/docs/dev/category/agent-components', - '_blank', - ); - }, []); - - return openDocument; -} diff --git a/web/src/pages/data-flow/hooks/use-show-dialog.ts b/web/src/pages/data-flow/hooks/use-show-dialog.ts deleted file mode 100644 index 6178e3fbc..000000000 --- a/web/src/pages/data-flow/hooks/use-show-dialog.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { useFetchTokenListBeforeOtherStep } from '@/components/embed-dialog/use-show-embed-dialog'; -import { SharedFrom } from '@/constants/chat'; -import { useShowDeleteConfirm } from '@/hooks/common-hooks'; -import { - useCreateSystemToken, - useFetchSystemTokenList, - useRemoveSystemToken, -} from '@/hooks/user-setting-hooks'; -import { IStats } from '@/interfaces/database/chat'; -import { useQueryClient } from '@tanstack/react-query'; -import { useCallback } from 'react'; - -export const useOperateApiKey = (idKey: string, dialogId?: string) => { - const { removeToken } = useRemoveSystemToken(); - const { createToken, loading: creatingLoading } = useCreateSystemToken(); - const { data: tokenList, loading: listLoading } = useFetchSystemTokenList(); - - const showDeleteConfirm = useShowDeleteConfirm(); - - const onRemoveToken = (token: string) => { - showDeleteConfirm({ - onOk: () => removeToken(token), - }); - }; - - const onCreateToken = useCallback(() => { - createToken({ [idKey]: dialogId }); - }, [createToken, idKey, dialogId]); - - return { - removeToken: onRemoveToken, - createToken: onCreateToken, - tokenList, - creatingLoading, - listLoading, - }; -}; - -type ChartStatsType = { - [k in keyof IStats]: Array<{ xAxis: string; yAxis: number }>; -}; - -export const useSelectChartStatsList = (): ChartStatsType => { - const queryClient = useQueryClient(); - const data = queryClient.getQueriesData({ queryKey: ['fetchStats'] }); - const stats: IStats = (data.length > 0 ? data[0][1] : {}) as IStats; - - return Object.keys(stats).reduce((pre, cur) => { - const item = stats[cur as keyof IStats]; - if (item.length > 0) { - pre[cur as keyof IStats] = item.map((x) => ({ - xAxis: x[0] as string, - yAxis: x[1] as number, - })); - } - return pre; - }, {} as ChartStatsType); -}; - -const getUrlWithToken = (token: string, from: string = 'chat') => { - const { protocol, host } = window.location; - return `${protocol}//${host}/chat/share?shared_id=${token}&from=${from}`; -}; - -export const usePreviewChat = (idKey: string) => { - const { handleOperate } = useFetchTokenListBeforeOtherStep(); - - const open = useCallback( - (t: string) => { - window.open( - getUrlWithToken( - t, - idKey === 'canvasId' ? SharedFrom.Agent : SharedFrom.Chat, - ), - '_blank', - ); - }, - [idKey], - ); - - const handlePreview = useCallback(async () => { - const token = await handleOperate(); - if (token) { - open(token); - } - }, [handleOperate, open]); - - return { - handlePreview, - }; -}; diff --git a/web/src/pages/data-flow/hooks/use-show-drawer.tsx b/web/src/pages/data-flow/hooks/use-show-drawer.tsx index 82a9bec85..0fb8596f5 100644 --- a/web/src/pages/data-flow/hooks/use-show-drawer.tsx +++ b/web/src/pages/data-flow/hooks/use-show-drawer.tsx @@ -4,7 +4,6 @@ import get from 'lodash/get'; import React, { useCallback, useEffect } from 'react'; import { BeginId, Operator } from '../constant'; import useGraphStore from '../store'; -import { useCacheChatLog } from './use-cache-chat-log'; import { useSaveGraph } from './use-save-graph'; export const useShowFormDrawer = () => { @@ -135,26 +134,6 @@ export function useShowDrawer({ }; } -export function useShowLogSheet({ - setCurrentMessageId, -}: Pick, 'setCurrentMessageId'>) { - const { visible, showModal, hideModal } = useSetModalState(); - - const handleShow = useCallback( - (messageId: string) => { - setCurrentMessageId(messageId); - showModal(); - }, - [setCurrentMessageId, showModal], - ); - - return { - logSheetVisible: visible, - hideLogSheet: hideModal, - showLogSheet: handleShow, - }; -} - export function useHideFormSheetOnNodeDeletion({ hideFormDrawer, }: Pick, 'hideFormDrawer'>) { diff --git a/web/src/pages/data-flow/options.ts b/web/src/pages/data-flow/options.ts deleted file mode 100644 index e69de29bb..000000000