diff --git a/web/app/components/base/form/form-scenarios/input-field/hooks/use-max-number-of-uploads-filed.tsx b/web/app/components/base/form/form-scenarios/input-field/hooks/use-max-number-of-uploads-filed.tsx index 7842d7a3b2..ba68f52790 100644 --- a/web/app/components/base/form/form-scenarios/input-field/hooks/use-max-number-of-uploads-filed.tsx +++ b/web/app/components/base/form/form-scenarios/input-field/hooks/use-max-number-of-uploads-filed.tsx @@ -5,11 +5,10 @@ import { getNewVarInWorkflow } from '@/utils/var' import { useField } from '@tanstack/react-form' import Label from '../../../components/label' import { useCallback, useMemo } from 'react' -import useSWR from 'swr' -import { fetchFileUploadConfig } from '@/service/common' import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks' import { formatFileSize } from '@/utils/format' import InputNumberWithSlider from '@/app/components/workflow/nodes/_base/components/input-number-with-slider' +import { useFileUploadConfig } from '@/service/use-common' type MaxNumberOfUploadsFieldProps = { initialData?: InputVar @@ -28,7 +27,7 @@ const UseMaxNumberOfUploadsField = ({ const maxNumberOfUploadsField = useField({ form, name: 'max_length' }) const { value: max_length = 0 } = maxNumberOfUploadsField.state - const { data: fileUploadConfigResponse } = useSWR({ url: '/files/upload' }, fetchFileUploadConfig) + const { data: fileUploadConfigResponse } = useFileUploadConfig() const { imgSizeLimit, docSizeLimit, diff --git a/web/app/components/base/form/form-scenarios/input-field/index.tsx b/web/app/components/base/form/form-scenarios/input-field/index.tsx index b36dd21927..343a7bf6f3 100644 --- a/web/app/components/base/form/form-scenarios/input-field/index.tsx +++ b/web/app/components/base/form/form-scenarios/input-field/index.tsx @@ -1,12 +1,12 @@ import { useTranslation } from 'react-i18next' import { useAppForm } from '../..' -import type { FileTypeSelectOption, InputFieldFormProps } from './types' +import { type FileTypeSelectOption, type InputFieldFormProps, TEXT_MAX_LENGTH, createInputFieldSchema } from './types' import { getNewVarInWorkflow } from '@/utils/var' import { useHiddenFieldNames, useInputTypeOptions } from './hooks' import Divider from '../../../divider' import { useCallback, useMemo, useState } from 'react' import { useStore } from '@tanstack/react-form' -import { InputVarType } from '@/app/components/workflow/types' +import { ChangeType, InputVarType } from '@/app/components/workflow/types' import ShowAllSettings from './show-all-settings' import Button from '../../../button' import UseFileTypesFields from './hooks/use-file-types-fields' @@ -17,6 +17,7 @@ import { DEFAULT_VALUE_MAX_LEN } from '@/config' import { RiArrowDownSLine } from '@remixicon/react' import cn from '@/utils/classnames' import Badge from '../../../badge' +import Toast from '../../../toast' const InputFieldForm = ({ initialData, @@ -29,13 +30,29 @@ const InputFieldForm = ({ defaultValues: initialData || getNewVarInWorkflow(''), validators: { onSubmit: ({ value }) => { - // TODO: Add validation logic here - console.log('Validator form on submit:', value) + const { type } = value + const schema = createInputFieldSchema(type, t) + const result = schema.safeParse(value) + if (!result.success) { + const issues = result.error.issues + const firstIssue = issues[0].message + Toast.notify({ + type: 'error', + message: firstIssue, + }) + return firstIssue + } + return undefined }, }, onSubmit: ({ value }) => { - // TODO: Add submit logic here - onSubmit(value) + const moreInfo = value.variable === initialData?.variable + ? undefined + : { + type: ChangeType.changeVarName, + payload: { beforeKey: initialData?.variable || '', afterKey: value.variable }, + } + onSubmit(value, moreInfo) }, }) @@ -173,6 +190,8 @@ const InputFieldForm = ({ children={field => ( )} /> diff --git a/web/app/components/base/form/form-scenarios/input-field/types.ts b/web/app/components/base/form/form-scenarios/input-field/types.ts index e2c7b0afb3..1ba61b8013 100644 --- a/web/app/components/base/form/form-scenarios/input-field/types.ts +++ b/web/app/components/base/form/form-scenarios/input-field/types.ts @@ -1,8 +1,13 @@ -import type { InputVar } from '@/app/components/workflow/types' +import { DEFAULT_FILE_UPLOAD_SETTING } from '@/app/components/workflow/constants' +import type { MoreInfo } from '@/app/components/workflow/types' +import { type InputVar, InputVarType } from '@/app/components/workflow/types' +import { MAX_VAR_KEY_LENGTH } from '@/config' import type { RemixiconComponentType } from '@remixicon/react' import type { TFunction } from 'i18next' import { z } from 'zod' +export const TEXT_MAX_LENGTH = 256 + export const InputType = z.enum([ 'text-input', 'paragraph', @@ -27,26 +32,73 @@ const SupportedFileTypes = z.enum([ 'custom', ]) -// TODO: Add validation rules -export const createInputFieldSchema = (t: TFunction) => z.object({ - type: InputType, - label: z.string(), - variable: z.string(), - max_length: z.number().optional(), - default: z.string().optional(), - required: z.boolean(), - hint: z.string().optional(), - options: z.array(z.string()).optional(), - allowed_file_upload_methods: z.array(TransferMethod), - allowed_file_types: z.array(SupportedFileTypes), - allowed_file_extensions: z.string().optional(), -}) +export const createInputFieldSchema = (type: InputVarType, t: TFunction) => { + const commonSchema = z.object({ + type: InputType, + variable: z.string({ + invalid_type_error: t('appDebug.varKeyError.notValid', { key: t('appDebug.variableConfig.varName') }), + }).nonempty({ + message: t('appDebug.varKeyError.canNoBeEmpty', { key: t('appDebug.variableConfig.varName') }), + }).max(MAX_VAR_KEY_LENGTH, { + message: t('appDebug.varKeyError.tooLong', { key: t('appDebug.variableConfig.varName') }), + }).regex(/^(?!\d)\w+/, { + message: t('appDebug.varKeyError.notStartWithNumber', { key: t('appDebug.variableConfig.varName') }), + }), + label: z.string().nonempty({ + message: t('appDebug.variableConfig.errorMsg.labelNameRequired'), + }), + required: z.boolean(), + hint: z.string().optional(), + }) + if (type === InputVarType.textInput || type === InputVarType.paragraph) { + return z.object({ + max_length: z.number().min(1).max(TEXT_MAX_LENGTH), + default: z.string().optional(), + }).merge(commonSchema).passthrough() + } + if (type === InputVarType.number) { + return z.object({ + default: z.number().optional(), + unit: z.string().optional(), + placeholder: z.string().optional(), + }).merge(commonSchema).passthrough() + } + if (type === InputVarType.select) { + return z.object({ + options: z.array(z.string()).nonempty({ + message: t('appDebug.variableConfig.errorMsg.atLeastOneOption'), + }).refine( + arr => new Set(arr).size === arr.length, + { + message: t('appDebug.variableConfig.errorMsg.optionRepeat'), + }, + ), + default: z.string().optional(), + }).merge(commonSchema).passthrough() + } + if (type === InputVarType.singleFile) { + return z.object({ + allowed_file_types: z.array(SupportedFileTypes), + allowed_file_extensions: z.string().optional(), + allowed_file_upload_methods: z.array(TransferMethod), + }).merge(commonSchema).passthrough() + } + if (type === InputVarType.multiFiles) { + return z.object({ + allowed_file_types: z.array(SupportedFileTypes), + allowed_file_extensions: z.array(z.string()).optional(), + allowed_file_upload_methods: z.array(TransferMethod), + max_length: z.number().min(1).max(DEFAULT_FILE_UPLOAD_SETTING.max_length), + }).merge(commonSchema).passthrough() + } + return commonSchema.passthrough() +} export type InputFieldFormProps = { initialData?: InputVar supportFile?: boolean onCancel: () => void - onSubmit: (value: InputVar) => void + onSubmit: (value: InputVar, moreInfo?: MoreInfo) => void } export type TextFieldsProps = { diff --git a/web/app/components/base/icons/assets/public/knowledge/file.svg b/web/app/components/base/icons/assets/public/knowledge/file.svg new file mode 100644 index 0000000000..137086a203 --- /dev/null +++ b/web/app/components/base/icons/assets/public/knowledge/file.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/app/components/base/icons/assets/public/knowledge/watercrawl.svg b/web/app/components/base/icons/assets/public/knowledge/watercrawl.svg new file mode 100644 index 0000000000..bd4e6bac6f --- /dev/null +++ b/web/app/components/base/icons/assets/public/knowledge/watercrawl.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/components/base/icons/src/public/knowledge/File.json b/web/app/components/base/icons/src/public/knowledge/File.json new file mode 100644 index 0000000000..4d773520a5 --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/File.json @@ -0,0 +1,37 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "16", + "height": "16", + "viewBox": "0 0 16 16", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M8.66667 1.34356C8.66667 1.32602 8.66667 1.31725 8.66591 1.30135C8.65018 0.972168 8.3607 0.682824 8.03151 0.667251C8.01562 0.666499 8.0104 0.666501 8.00001 0.666504H5.8391C5.30248 0.666497 4.85957 0.666491 4.49878 0.695968C4.12405 0.726585 3.77958 0.792295 3.45603 0.957155C2.95426 1.21282 2.54631 1.62077 2.29065 2.12253C2.12579 2.44609 2.06008 2.79056 2.02946 3.16529C1.99999 3.52608 1.99999 3.96899 2 4.50562V11.494C1.99999 12.0307 1.99999 12.4736 2.02946 12.8344C2.06008 13.2091 2.12579 13.5536 2.29065 13.8771C2.54631 14.3789 2.95426 14.7869 3.45603 15.0425C3.77958 15.2074 4.12405 15.2731 4.49878 15.3037C4.85958 15.3332 5.30248 15.3332 5.83912 15.3332H10.1609C10.6975 15.3332 11.1404 15.3332 11.5012 15.3037C11.8759 15.2731 12.2204 15.2074 12.544 15.0425C13.0457 14.7869 13.4537 14.3789 13.7093 13.8771C13.8742 13.5536 13.9399 13.2091 13.9705 12.8344C14 12.4736 14 12.0307 14 11.4941V6.66646C14 6.65611 14 6.65093 13.9993 6.63505C13.9837 6.30583 13.6943 6.01631 13.3651 6.0006C13.3492 5.99985 13.3405 5.99985 13.323 5.99985L10.3787 5.99985C10.2105 5.99987 10.0466 5.99989 9.90785 5.98855C9.75545 5.9761 9.57563 5.94672 9.39468 5.85452C9.1438 5.72669 8.93983 5.52272 8.81199 5.27183C8.7198 5.09088 8.69042 4.91106 8.67797 4.75867C8.66663 4.61989 8.66665 4.45603 8.66667 4.28778L8.66667 1.34356ZM5.33333 8.6665C4.96514 8.6665 4.66667 8.96498 4.66667 9.33317C4.66667 9.70136 4.96514 9.99984 5.33333 9.99984H10.6667C11.0349 9.99984 11.3333 9.70136 11.3333 9.33317C11.3333 8.96498 11.0349 8.6665 10.6667 8.6665H5.33333ZM5.33333 11.3332C4.96514 11.3332 4.66667 11.6316 4.66667 11.9998C4.66667 12.368 4.96514 12.6665 5.33333 12.6665H9.33333C9.70152 12.6665 10 12.368 10 11.9998C10 11.6316 9.70152 11.3332 9.33333 11.3332H5.33333Z", + "fill": "#444CE7" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M12.6053 4.6665C12.8011 4.6665 12.8989 4.6665 12.9791 4.61735C13.0923 4.54794 13.16 4.3844 13.129 4.25526C13.107 4.16382 13.0432 4.10006 12.9155 3.97253L10.694 1.75098C10.5664 1.62333 10.5027 1.5595 10.4112 1.53752C10.2821 1.50648 10.1186 1.57417 10.0492 1.6874C10 1.76757 10 1.86545 10 2.0612L10 4.13315C10 4.31982 10 4.41316 10.0363 4.48446C10.0683 4.54718 10.1193 4.59818 10.182 4.63014C10.2533 4.66647 10.3466 4.66647 10.5333 4.66647L12.6053 4.6665Z", + "fill": "#444CE7" + }, + "children": [] + } + ] + }, + "name": "File" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/knowledge/File.tsx b/web/app/components/base/icons/src/public/knowledge/File.tsx new file mode 100644 index 0000000000..84beef1ef3 --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/File.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './File.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconData } from '@/app/components/base/icons/IconBase' + +const Icon = ( + { + ref, + ...props + }: React.SVGProps & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'File' + +export default Icon diff --git a/web/app/components/base/icons/src/public/knowledge/Watercrawl.json b/web/app/components/base/icons/src/public/knowledge/Watercrawl.json new file mode 100644 index 0000000000..82a1c3eeb9 --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/Watercrawl.json @@ -0,0 +1,188 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "xmlns": "http://www.w3.org/2000/svg", + "viewBox": "0 0 500 500" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(0, 23, 87); stroke: rgb(13, 14, 52);", + "d": "M 247.794 213.903 L 246.81 76.976 L 254.345 76.963 L 254.592 213.989 L 247.794 213.903 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "ellipse", + "attributes": { + "style": "fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);", + "cx": "250.025", + "cy": "43.859", + "rx": "33.966", + "ry": "33.906" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(30, 141, 166); stroke: rgb(30, 141, 166);", + "d": "M 282.472 260.389 L 414.181 330.253 L 410.563 336.234 L 279.38 265.739 L 282.472 260.389 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(15, 17, 57); stroke: rgb(13, 14, 52);", + "d": "M 255.105 281.394 L 254.485 417.656 L 246.156 417.691 L 246.688 280.51 L 255.105 281.394 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "paint-order: fill; fill: rgb(30, 141, 166); stroke: rgb(30, 141, 166);", + "d": "M 279.486 229.517 L 410.351 160.07 L 413.923 167.04 L 283.727 235.998 L 279.486 229.517 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(15, 164, 161); stroke: rgb(15, 164, 161);", + "d": "M 88.545 164.884 L 219.797 236.07 L 222.867 229.568 L 90.887 159.47 L 88.545 164.884 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(15, 164, 161); stroke: rgb(15, 164, 161);", + "d": "M 224.76 266.9 L 95.55 334.829 L 92.878 328.37 L 219.955 261.275 L 224.76 266.9 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "ellipse", + "attributes": { + "style": "paint-order: fill; fill: rgb(2, 181, 225); stroke: rgb(2, 181, 225);", + "cx": "251.242", + "cy": "247.466", + "rx": "33.966", + "ry": "33.906" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(13, 14, 52); stroke: rgb(13, 14, 52);", + "d": "M 279.502 433.617 L 408.666 359.443 C 408.666 359.443 412.398 366.965 412.398 366.916 C 412.398 366.867 281.544 440.217 281.544 440.217 L 279.502 433.617 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(13, 14, 52); stroke: rgb(13, 14, 52);", + "d": "M 223.119 431.408 L 96.643 361.068 L 93.265 368.047 L 218.895 438.099 L 223.119 431.408 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "ellipse", + "attributes": { + "style": "fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);", + "cx": "250.504", + "cy": "451.168", + "rx": "33.966", + "ry": "33.906" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(90, 191, 187); stroke: rgb(90, 191, 187);", + "d": "M 435.665 180.895 L 435.859 316.869 L 443.103 315.579 L 442.56 180.697 L 435.665 180.895 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "ellipse", + "attributes": { + "style": "fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);", + "cx": "441.06", + "cy": "349.665", + "rx": "33.966", + "ry": "33.906" + }, + "children": [] + }, + { + "type": "element", + "name": "ellipse", + "attributes": { + "style": "fill: rgb(2, 181, 225); stroke: rgb(2, 181, 225);", + "cx": "441.512", + "cy": "147.767", + "rx": "33.966", + "ry": "33.906" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "style": "fill: rgb(84, 187, 181); stroke: rgb(84, 187, 181);", + "d": "M 64.755 314.523 L 57.928 315.006 L 58.307 182.961 L 65.169 182.865 L 64.755 314.523 Z" + }, + "children": [] + }, + { + "type": "element", + "name": "ellipse", + "attributes": { + "style": "fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);", + "cx": "58.177", + "cy": "149.757", + "rx": "33.966", + "ry": "33.906" + }, + "children": [] + }, + { + "type": "element", + "name": "ellipse", + "attributes": { + "style": "fill: rgb(61, 224, 203); stroke: rgb(61, 224, 203);", + "cx": "65.909", + "cy": "348.17", + "rx": "33.966", + "ry": "33.906" + }, + "children": [] + } + ] + }, + "name": "Watercrawl" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/knowledge/Watercrawl.tsx b/web/app/components/base/icons/src/public/knowledge/Watercrawl.tsx new file mode 100644 index 0000000000..0d90df05e0 --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/Watercrawl.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './Watercrawl.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconData } from '@/app/components/base/icons/IconBase' + +const Icon = ( + { + ref, + ...props + }: React.SVGProps & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'Watercrawl' + +export default Icon diff --git a/web/app/components/base/icons/src/public/knowledge/index.ts b/web/app/components/base/icons/src/public/knowledge/index.ts index 0af2cf341d..e6564cd1f2 100644 --- a/web/app/components/base/icons/src/public/knowledge/index.ts +++ b/web/app/components/base/icons/src/public/knowledge/index.ts @@ -1,6 +1,8 @@ export { default as Chunk } from './Chunk' export { default as Collapse } from './Collapse' +export { default as File } from './File' export { default as GeneralType } from './GeneralType' export { default as LayoutRight2LineMod } from './LayoutRight2LineMod' export { default as ParentChildType } from './ParentChildType' export { default as SelectionMod } from './SelectionMod' +export { default as Watercrawl } from './Watercrawl' diff --git a/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx index d3cc1dbc78..b39620eb00 100644 --- a/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx +++ b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx @@ -1,7 +1,15 @@ 'use client' import type { FC } from 'react' import React from 'react' -import { RiAlignLeft, RiCheckboxMultipleLine, RiFileCopy2Line, RiFileList2Line, RiHashtag, RiTextSnippet } from '@remixicon/react' +import { + RiAlignLeft, + RiCheckboxLine, + RiCheckboxMultipleLine, + RiFileCopy2Line, + RiFileList2Line, + RiHashtag, + RiTextSnippet, +} from '@remixicon/react' import { InputVarType } from '../../../types' type Props = { @@ -17,6 +25,7 @@ const getIcon = (type: InputVarType) => { [InputVarType.number]: RiHashtag, [InputVarType.singleFile]: RiFileList2Line, [InputVarType.multiFiles]: RiFileCopy2Line, + [InputVarType.checkbox]: RiCheckboxLine, } as any)[type] || RiTextSnippet } diff --git a/web/service/datasets.ts b/web/service/datasets.ts index f9edb2eeaf..0380218ae0 100644 --- a/web/service/datasets.ts +++ b/web/service/datasets.ts @@ -272,7 +272,7 @@ export const checkWatercrawlTaskStatus: Fetcher = (jobId }) } -type FileTypesRes = { +export type FileTypesRes = { allowed_extensions: string[] } diff --git a/web/service/use-common.ts b/web/service/use-common.ts index d49f3803ac..1cfb5e5af1 100644 --- a/web/service/use-common.ts +++ b/web/service/use-common.ts @@ -5,13 +5,15 @@ import type { StructuredOutputRulesResponse, } from '@/models/common' import { useMutation, useQuery } from '@tanstack/react-query' +import type { FileTypesRes } from './datasets' const NAME_SPACE = 'common' -export const useFileUploadConfig = () => { +export const useFileUploadConfig = (enabled?: true) => { return useQuery({ queryKey: [NAME_SPACE, 'file-upload-config'], queryFn: () => get('/files/upload'), + enabled, }) } @@ -26,3 +28,10 @@ export const useGenerateStructuredOutputRules = () => { }, }) } + +export const useFileSupportTypes = () => { + return useQuery({ + queryKey: [NAME_SPACE, 'file-types'], + queryFn: () => get('/files/support-type'), + }) +}