diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index 37c88a0d..6e0cdaeb 100644 --- a/packages/toolkit/package.json +++ b/packages/toolkit/package.json @@ -1,6 +1,6 @@ { "name": "@instill-ai/toolkit", - "version": "0.68.3-rc.22", + "version": "0.68.3-rc.34", "description": "Instill AI's frontend toolkit", "repository": "https://github.com/instill-ai/design-system.git", "bugs": "https://github.com/instill-ai/design-system/issues", diff --git a/packages/toolkit/src/view/ai/AIForm.tsx b/packages/toolkit/src/view/ai/AIForm.tsx index a8ade7e0..ea40edb7 100644 --- a/packages/toolkit/src/view/ai/AIForm.tsx +++ b/packages/toolkit/src/view/ai/AIForm.tsx @@ -37,105 +37,107 @@ const AISchema = z connector_definition_name: z.string(), task: z.string(), - // connector-definitions/ai-instill-model - - // TASK_CLASSIFICATION - // TASK_INSTANCE_SEGMENTATION - // TASK_KEYPOINT - // TASK_DETECTION - // TASK_OCR - // TASK_SEMANTIC_SEGMENTATION - // TASK_TEXT_GENERATION - // TASK_TEXT_TO_IMAGE - - model_id: z.string().nullable().optional(), - model_namespace: z.string().nullable().optional(), - - // TASK_CLASSIFICATION - // TASK_INSTANCE_SEGMENTATION - // TASK_KEYPOINT - // TASK_DETECTION - // TASK_OCR - // TASK_SEMANTIC_SEGMENTATION - image_base64: z.string().nullable().optional(), - - // TASK_TEXT_GENERATION - // model_name - prompt: z.string().nullable().optional(), - seed: z.string().nullable().optional(), - output_len: z.string().nullable().optional(), - bad_words_list: z.string().nullable().optional(), - stop_words_list: z.string().nullable().optional(), - top_k: z.string().nullable().optional(), - - // TASK_TEXT_TO_IMAGE - // model_name - // prompt - cfg_scale: z.string().nullable().optional(), - steps: z.string().nullable().optional(), - samples: z.string().nullable().optional(), - // seed - - // connector-definitions/ai-openai - - // TASK_TEXT_GENERATION - // prompt - model: z.string().nullable().optional(), - system_message: z.string().nullable().optional(), - temperature: z.string().nullable().optional(), - n: z.string().nullable().optional(), - max_tokens: z.string().nullable().optional(), - - // TASK_TEXT_EMBEDDINGS - text: z.string().nullable().optional(), - // model - - // TASK_SPEECH_RECOGNITION - audio: z.string().nullable().optional(), - // model - // temperature - language: z.string().nullable().optional(), - // prompt - - // connector-definitions/ai-stability-ai - - // TASK_TEXT_TO_IMAGE - prompts: z.string().nullable().optional(), - weights: z.string().nullable().optional(), - engine: z.string().nullable().optional(), - height: z.string().nullable().optional(), - width: z.string().nullable().optional(), - // cfg_scale - clip_guidance_preset: z.string().nullable().optional(), - sampler: z.string().nullable().optional(), - // samples - // seed - // steps - style_preset: z.string().nullable().optional(), - - // TASK_IMAGE_TO_IMAGE - // prompts - // weights - init_image: z.string().nullable().optional(), - // engine - init_image_mode: z.string().nullable().optional(), - image_strength: z.string().nullable().optional(), - step_schedule_start: z.string().nullable().optional(), - step_schedule_end: z.string().nullable().optional(), - // cfg_scale - // clip_guidance_preset - // sampler - // samples - // seed - // steps - // style_preset + input: z.object({ + // connector-definitions/ai-instill-model + + // TASK_CLASSIFICATION + // TASK_INSTANCE_SEGMENTATION + // TASK_KEYPOINT + // TASK_DETECTION + // TASK_OCR + // TASK_SEMANTIC_SEGMENTATION + // TASK_TEXT_GENERATION + // TASK_TEXT_TO_IMAGE + + model_id: z.string().nullable().optional(), + model_namespace: z.string().nullable().optional(), + + // TASK_CLASSIFICATION + // TASK_INSTANCE_SEGMENTATION + // TASK_KEYPOINT + // TASK_DETECTION + // TASK_OCR + // TASK_SEMANTIC_SEGMENTATION + image_base64: z.string().nullable().optional(), + + // TASK_TEXT_GENERATION + // model_name + prompt: z.string().nullable().optional(), + seed: z.string().nullable().optional(), + output_len: z.string().nullable().optional(), + bad_words_list: z.string().nullable().optional(), + stop_words_list: z.string().nullable().optional(), + top_k: z.string().nullable().optional(), + + // TASK_TEXT_TO_IMAGE + // model_name + // prompt + cfg_scale: z.string().nullable().optional(), + steps: z.string().nullable().optional(), + samples: z.string().nullable().optional(), + // seed + + // connector-definitions/ai-openai + + // TASK_TEXT_GENERATION + // prompt + model: z.string().nullable().optional(), + system_message: z.string().nullable().optional(), + temperature: z.string().nullable().optional(), + n: z.string().nullable().optional(), + max_tokens: z.string().nullable().optional(), + + // TASK_TEXT_EMBEDDINGS + text: z.string().nullable().optional(), + // model + + // TASK_SPEECH_RECOGNITION + audio: z.string().nullable().optional(), + // model + // temperature + language: z.string().nullable().optional(), + // prompt + + // connector-definitions/ai-stability-ai + + // TASK_TEXT_TO_IMAGE + prompts: z.string().nullable().optional(), + weights: z.string().nullable().optional(), + engine: z.string().nullable().optional(), + height: z.string().nullable().optional(), + width: z.string().nullable().optional(), + // cfg_scale + clip_guidance_preset: z.string().nullable().optional(), + sampler: z.string().nullable().optional(), + // samples + // seed + // steps + style_preset: z.string().nullable().optional(), + + // TASK_IMAGE_TO_IMAGE + // prompts + // weights + init_image: z.string().nullable().optional(), + // engine + init_image_mode: z.string().nullable().optional(), + image_strength: z.string().nullable().optional(), + step_schedule_start: z.string().nullable().optional(), + step_schedule_end: z.string().nullable().optional(), + // cfg_scale + // clip_guidance_preset + // sampler + // samples + // seed + // steps + // style_preset + }), }) .superRefine((state, ctx) => { if ( state.connector_definition_name === "connector-definitions/ai-instill-model" ) { - if (!state.model_id) { + if (!state.input.model_id) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Model ID is required", @@ -144,35 +146,35 @@ const AISchema = z } else { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.model_id, + value: state.input.model_id, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["model_id"], + path: ["input.model_id"], }); } } - if (!state.model_namespace) { + if (!state.input.model_namespace) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Model namespace is required", - path: ["model_namespace"], + path: ["input.model_namespace"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.model_namespace, + value: state.input.model_namespace, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["model_namespace"], + path: ["input.model_namespace"], }); } } @@ -185,204 +187,204 @@ const AISchema = z state.task === "TASK_OCR" || state.task === "TASK_SEMANTIC_SEGMENTATION" ) { - if (!state.image_base64) { + if (!state.input.image_base64) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "image_base64 is required", - path: ["image_base64"], + path: ["input.image_base64"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.image_base64, + value: state.input.image_base64, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["image_base64"], + path: ["input.image_base64"], }); } } } if (state.task === "TASK_TEXT_GENERATION") { - if (!state.prompt) { + if (!state.input.prompt) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "prompt is required", - path: ["prompt"], + path: ["input.prompt"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.prompt, + value: state.input.prompt, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["prompt"], + path: ["input.prompt"], }); } } - if (state.output_len) { + if (state.input.output_len) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.output_len, + value: state.input.output_len, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["output_len"], + path: ["input.output_len"], }); } } - if (state.bad_words_list) { + if (state.input.bad_words_list) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.bad_words_list, + value: state.input.bad_words_list, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["bad_words_list"], + path: ["input.bad_words_list"], }); } } - if (state.stop_words_list) { + if (state.input.stop_words_list) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.stop_words_list, + value: state.input.stop_words_list, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["stop_words_list"], + path: ["input.stop_words_list"], }); } } - if (state.top_k) { + if (state.input.top_k) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.top_k, + value: state.input.top_k, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["top_k"], + path: ["input.top_k"], }); } } - if (state.seed) { + if (state.input.seed) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.seed, + value: state.input.seed, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["seed"], + path: ["input.seed"], }); } } } if (state.task === "TASK_TEXT_TO_IMAGE") { - if (!state.prompt) { + if (!state.input.prompt) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "prompt is required", - path: ["prompt"], + path: ["input.prompt"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.prompt, + value: state.input.prompt, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["prompt"], + path: ["input.prompt"], }); } } - if (state.cfg_scale) { + if (state.input.cfg_scale) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.cfg_scale, + value: state.input.cfg_scale, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["cfg_scale"], + path: ["input.cfg_scale"], }); } } - if (state.steps) { + if (state.input.steps) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.steps, + value: state.input.steps, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["steps"], + path: ["input.steps"], }); } } - if (state.samples) { + if (state.input.samples) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.samples, + value: state.input.samples, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["samples"], + path: ["input.samples"], }); } } - if (state.seed) { + if (state.input.seed) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.seed, + value: state.input.seed, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["samples"], + path: ["input.samples"], }); } } @@ -399,198 +401,198 @@ const AISchema = z } if (state.task === "TASK_TEXT_GENERATION") { - if (!state.prompt) { + if (!state.input.prompt) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "prompt is required", - path: ["prompt"], + path: ["input.prompt"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.prompt, + value: state.input.prompt, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["prompt"], + path: ["input.prompt"], }); } } - if (!state.model) { + if (!state.input.model) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "model is required", - path: ["model"], + path: ["input.model"], }); } - if (state.system_message) { + if (state.input.system_message) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.system_message, + value: state.input.system_message, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["system_message"], + path: ["input.system_message"], }); } } - if (state.temperature) { + if (state.input.temperature) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.temperature, + value: state.input.temperature, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["temperature"], + path: ["input.temperature"], }); } } - if (state.n) { + if (state.input.n) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.n, + value: state.input.n, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["n"], + path: ["input.n"], }); } } - if (state.max_tokens) { + if (state.input.max_tokens) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.max_tokens, + value: state.input.max_tokens, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["max_tokens"], + path: ["input.max_tokens"], }); } } } if (state.task === "TASK_TEXT_EMBEDDINGS") { - if (!state.text) { + if (!state.input.text) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "text is required", - path: ["text"], + path: ["input.text"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.text, + value: state.input.text, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["text"], + path: ["input.text"], }); } } - if (!state.model) { + if (!state.input.model) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "model is required", - path: ["model"], + path: ["input.model"], }); } } if (state.task === "TASK_SPEECH_RECOGNITION") { - if (!state.audio) { + if (!state.input.audio) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "audio is required", - path: ["audio"], + path: ["input.audio"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference", - value: state.audio, + value: state.input.audio, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["audio"], + path: ["input.audio"], }); } } - if (!state.model) { + if (!state.input.model) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "model is required", - path: ["model"], + path: ["input.model"], }); } - if (state.temperature) { + if (state.input.temperature) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.temperature, + value: state.input.temperature, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["temperature"], + path: ["input.temperature"], }); } } - if (state.language) { + if (state.input.language) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.language, + value: state.input.language, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["language"], + path: ["input.language"], }); } } - if (state.prompt) { + if (state.input.prompt) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.prompt, + value: state.input.prompt, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["prompt"], + path: ["input.prompt"], }); } } @@ -610,278 +612,278 @@ const AISchema = z } if (state.task === "TASK_TEXT_TO_IMAGE") { - if (!state.prompts) { + if (!state.input.prompts) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "prompts is required", - path: ["prompts"], + path: ["input.prompts"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference", - value: state.prompts, + value: state.input.prompts, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["prompts"], + path: ["input.prompts"], }); } } - if (state.weights) { + if (state.input.weights) { const result = validateIntillUpstreamTypes({ type: "reference", - value: state.weights, + value: state.input.weights, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["weights"], + path: ["input.weights"], }); } } - if (!state.engine) { + if (!state.input.engine) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "engine is required", - path: ["engine"], + path: ["input.engine"], }); } - if (state.height) { + if (state.input.height) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.height, + value: state.input.height, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["height"], + path: ["input.height"], }); } } - if (state.width) { + if (state.input.width) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.width, + value: state.input.width, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["width"], + path: ["input.width"], }); } } - if (state.cfg_scale) { + if (state.input.cfg_scale) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.cfg_scale, + value: state.input.cfg_scale, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["cfg_scale"], + path: ["input.cfg_scale"], }); } } - if (state.seed) { + if (state.input.seed) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.seed, + value: state.input.seed, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["seed"], + path: ["input.seed"], }); } } - if (state.steps) { + if (state.input.steps) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.steps, + value: state.input.steps, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["steps"], + path: ["input.steps"], }); } } } if (state.task === "TASK_IMAGE_TO_IMAGE") { - if (!state.prompts) { + if (!state.input.prompts) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "prompts is required", - path: ["prompts"], + path: ["input.prompts"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference", - value: state.prompts, + value: state.input.prompts, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["prompts"], + path: ["input.prompts"], }); } } - if (!state.init_image) { + if (!state.input.init_image) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "init_image is required", - path: ["init_image"], + path: ["input.init_image"], }); } else { const result = validateIntillUpstreamTypes({ type: "reference", - value: state.init_image, + value: state.input.init_image, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["init_image"], + path: ["input.init_image"], }); } } - if (!state.engine) { + if (!state.input.engine) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "engine is required", - path: ["engine"], + path: ["input.engine"], }); } - if (state.image_strength) { + if (state.input.image_strength) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.image_strength, + value: state.input.image_strength, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["image_strength"], + path: ["input.image_strength"], }); } } - if (state.step_schedule_start) { + if (state.input.step_schedule_start) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.step_schedule_start, + value: state.input.step_schedule_start, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["step_schedule_start"], + path: ["input.step_schedule_start"], }); } } - if (state.step_schedule_end) { + if (state.input.step_schedule_end) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.step_schedule_end, + value: state.input.step_schedule_end, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["step_schedule_end"], + path: ["input.step_schedule_end"], }); } } - if (state.cfg_scale) { + if (state.input.cfg_scale) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.cfg_scale, + value: state.input.cfg_scale, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["cfg_scale"], + path: ["input.cfg_scale"], }); } } - if (state.samples) { + if (state.input.samples) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.samples, + value: state.input.samples, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["samples"], + path: ["input.samples"], }); } } - if (state.seed) { + if (state.input.seed) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.seed, + value: state.input.seed, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["seed"], + path: ["input.seed"], }); } } - if (state.steps) { + if (state.input.steps) { const result = validateIntillUpstreamTypes({ type: "reference_and_number", - value: state.steps, + value: state.input.steps, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["steps"], + path: ["input.steps"], }); } } @@ -919,7 +921,9 @@ export const AIForm = (props: AIFormProps) => { const form = useForm>({ resolver: zodResolver(AISchema), defaultValues: { + ...configuration, connector_definition_name: connectorDefinitionName, + input: configuration.input ? configuration.input : {}, }, }); @@ -928,6 +932,7 @@ export const AIForm = (props: AIFormProps) => { React.useEffect(() => { reset({ ...configuration, + input: configuration.input ? configuration.input : {}, connector_definition_name: connectorDefinitionName, }); }, [configuration, connectorDefinitionName, reset]); @@ -948,7 +953,8 @@ export const AIForm = (props: AIFormProps) => { component: { ...node.data.component, configuration: { - input: modifiedData, + ...modifiedData, + connector_definition_name: undefined, }, }, }, @@ -1184,7 +1190,7 @@ export const AIForm = (props: AIFormProps) => { { const display = connectorDefinitionName === @@ -1216,7 +1222,7 @@ export const AIForm = (props: AIFormProps) => { /> { return ( { /> { return ( { { let display = false; let description: Nullable = null; @@ -1331,7 +1337,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -1359,7 +1365,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -1387,7 +1393,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -1415,7 +1421,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -1443,7 +1449,7 @@ export const AIForm = (props: AIFormProps) => { /> { let display = false; let description: Nullable = null; @@ -1486,7 +1492,7 @@ export const AIForm = (props: AIFormProps) => { /> { let display = false; let description: Nullable = null; @@ -1534,7 +1540,7 @@ export const AIForm = (props: AIFormProps) => { /> { let display = false; let description: Nullable = null; @@ -1573,7 +1579,7 @@ export const AIForm = (props: AIFormProps) => { /> { let display = false; let description: Nullable = null; @@ -1619,7 +1625,7 @@ export const AIForm = (props: AIFormProps) => { { const display = connectorDefinitionName === "connector-definitions/ai-openai" && @@ -1701,7 +1707,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === "connector-definitions/ai-openai" && @@ -1732,7 +1738,7 @@ export const AIForm = (props: AIFormProps) => { /> { let display = false; @@ -1782,7 +1788,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === "connector-definitions/ai-openai" && @@ -1813,7 +1819,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === "connector-definitions/ai-openai" && @@ -1849,7 +1855,7 @@ export const AIForm = (props: AIFormProps) => { { const display = connectorDefinitionName === "connector-definitions/ai-openai" && @@ -1878,7 +1884,7 @@ export const AIForm = (props: AIFormProps) => { { const display = connectorDefinitionName === "connector-definitions/ai-openai" && @@ -1909,7 +1915,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === "connector-definitions/ai-openai" && @@ -1943,7 +1949,7 @@ export const AIForm = (props: AIFormProps) => { { const display = connectorDefinitionName === @@ -1973,7 +1979,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2003,7 +2009,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2055,7 +2061,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2086,7 +2092,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2118,7 +2124,7 @@ export const AIForm = (props: AIFormProps) => { { const display = connectorDefinitionName === @@ -2163,7 +2169,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2216,7 +2222,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2277,7 +2283,7 @@ export const AIForm = (props: AIFormProps) => { { const display = connectorDefinitionName === @@ -2309,7 +2315,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2352,7 +2358,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2392,7 +2398,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === @@ -2429,7 +2435,7 @@ export const AIForm = (props: AIFormProps) => { /> { const display = connectorDefinitionName === diff --git a/packages/toolkit/src/view/blockchain/BlockchainForm.tsx b/packages/toolkit/src/view/blockchain/BlockchainForm.tsx index 8cece27d..89914e4f 100644 --- a/packages/toolkit/src/view/blockchain/BlockchainForm.tsx +++ b/packages/toolkit/src/view/blockchain/BlockchainForm.tsx @@ -19,29 +19,31 @@ import { PipelineComponentReference } from "../pipeline-builder"; export const BlockchainFormSchema = z .object({ - images: z.string().nullable().optional(), - asset_creator: z.string().nullable().optional(), - abstract: z.string().nullable().optional(), - custom: z - .object({ - digital_source_type: z.string().nullable().optional(), - mining_preference: z.string().nullable().optional(), - generated_through: z.string().nullable().optional(), - generated_by: z.string().nullable().optional(), - creator_wallet: z.string().nullable().optional(), - license: z - .object({ - name: z.string().nullable().optional(), - document: z.string().nullable().optional(), - }) - .optional() - .nullable(), - }) - .nullable() - .optional(), + input: z.object({ + images: z.string().nullable().optional(), + asset_creator: z.string().nullable().optional(), + abstract: z.string().nullable().optional(), + custom: z + .object({ + digital_source_type: z.string().nullable().optional(), + mining_preference: z.string().nullable().optional(), + generated_through: z.string().nullable().optional(), + generated_by: z.string().nullable().optional(), + creator_wallet: z.string().nullable().optional(), + license: z + .object({ + name: z.string().nullable().optional(), + document: z.string().nullable().optional(), + }) + .optional() + .nullable(), + }) + .nullable() + .optional(), + }), }) .superRefine((state, ctx) => { - if (!state.images) { + if (!state.input.images) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: "images is required", @@ -50,119 +52,119 @@ export const BlockchainFormSchema = z } else { const result = validateIntillUpstreamTypes({ type: "reference", - value: state.images, + value: state.input.images, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["images"], + path: ["input.images"], }); } } - if (state.asset_creator) { + if (state.input.asset_creator) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.asset_creator, + value: state.input.asset_creator, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["asset_creator"], + path: ["input.asset_creator"], }); } } - if (state.abstract) { + if (state.input.abstract) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.abstract, + value: state.input.abstract, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["abstract"], + path: ["input.abstract"], }); } } - if (state.custom?.generated_through) { + if (state.input.custom?.generated_through) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.custom?.generated_through, + value: state.input.custom?.generated_through, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["custom.generated_through"], + path: ["input.custom.generated_through"], }); } } - if (state.custom?.generated_by) { + if (state.input.custom?.generated_by) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.custom?.generated_by, + value: state.input.custom?.generated_by, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["custom.generated_by"], + path: ["input.custom.generated_by"], }); } } - if (state.custom?.creator_wallet) { + if (state.input.custom?.creator_wallet) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.custom?.creator_wallet, + value: state.input.custom?.creator_wallet, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["custom.creator_wallet"], + path: ["input.custom.creator_wallet"], }); } } - if (state.custom?.license?.name) { + if (state.input.custom?.license?.name) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.custom?.license?.name, + value: state.input.custom?.license?.name, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["custom.license.name"], + path: ["input.custom.license.name"], }); } } - if (state.custom?.license?.document) { + if (state.input.custom?.license?.document) { const result = validateIntillUpstreamTypes({ type: "reference_and_string", - value: state.custom?.license?.document, + value: state.input.custom?.license?.document, }); if (!result.isValid) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: result.error, - path: ["custom.license.document"], + path: ["input.custom.license.document"], }); } } @@ -198,10 +200,12 @@ export const BlockchainForm = (props: BlockchainFormProps) => { resolver: zodResolver(BlockchainFormSchema), defaultValues: { ...configuration, - images: undefined, - custom: { - digital_source_type: "trainedAlgorithmicMedia", - mining_preference: "notAllowed", + input: { + images: undefined, + custom: { + digital_source_type: "trainedAlgorithmicMedia", + mining_preference: "notAllowed", + }, }, }, }); @@ -209,7 +213,10 @@ export const BlockchainForm = (props: BlockchainFormProps) => { const { reset } = form; useEffect(() => { - reset(configuration); + reset({ + ...configuration, + input: configuration.input ? configuration.input : {}, + }); }, [configuration, reset]); function onSubmit(data: z.infer) { @@ -225,7 +232,8 @@ export const BlockchainForm = (props: BlockchainFormProps) => { component: { ...node.data.component, configuration: { - input: data, + ...data, + task: "TASK_COMMIT", }, }, }, @@ -263,7 +271,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => {
{ return ( @@ -289,7 +297,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => { /> { return ( @@ -315,7 +323,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => { /> { return ( @@ -345,7 +353,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => {

{ return ( @@ -409,7 +417,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => { /> { return ( @@ -492,7 +500,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => { /> { return ( @@ -518,7 +526,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => { /> { return ( @@ -544,7 +552,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => { /> { return ( @@ -574,7 +582,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => {

{ return ( @@ -600,7 +608,7 @@ export const BlockchainForm = (props: BlockchainFormProps) => { /> { return ( diff --git a/packages/toolkit/src/view/blockchain/BlockchainResourceForm.tsx b/packages/toolkit/src/view/blockchain/BlockchainResourceForm.tsx index 2fb7d421..ce182f9b 100644 --- a/packages/toolkit/src/view/blockchain/BlockchainResourceForm.tsx +++ b/packages/toolkit/src/view/blockchain/BlockchainResourceForm.tsx @@ -1,5 +1,4 @@ import cn from "clsx"; -import * as React from "react"; import { useForm } from "react-hook-form"; import * as z from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; diff --git a/packages/toolkit/src/view/data/DataComponentForm.tsx b/packages/toolkit/src/view/data/DataComponentForm.tsx new file mode 100644 index 00000000..ee984882 --- /dev/null +++ b/packages/toolkit/src/view/data/DataComponentForm.tsx @@ -0,0 +1,632 @@ +import * as z from "zod"; +import * as React from "react"; +import { GeneralRecord } from "../../lib"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { Button, Form, Input, Select, Switch } from "@instill-ai/design-system"; +import { + PipelineBuilderStore, + PipelineComponentReference, + composeEdgesFromReferences, + extractReferencesFromConfiguration, + recursiveReplaceNullAndEmptyStringWithUndefined, + usePipelineBuilderStore, + validateIntillUpstreamTypes, +} from "../pipeline-builder"; +import { shallow } from "zustand/shallow"; + +export const DataResourceSchema = z + .object({ + connector_definition_name: z.string(), + task: z.string(), + + input: z.object({ + // Google cloud storage + object_name: z.string().nullable().optional(), + data: z.string().nullable().optional(), + + // Pinecone - general + id: z.string().nullable().optional(), + + // Pinecone - TASK_QUERY + namespace: z.string().nullable().optional(), + topK: z.string().nullable().optional(), + includeValues: z.boolean().nullable().optional(), + includeMetadata: z.boolean().nullable().optional(), + vector: z.string().nullable().optional(), + + // Pinecone - TASK_UPSERT + values: z.string().nullable().optional(), + }), + }) + .superRefine((state, ctx) => { + if ( + state.connector_definition_name === "connector-definitions/data-pinecone" + ) { + if (state.task === "TASK_QUERY") { + if (!state.input.topK) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: "topK is required", + path: ["input.topK"], + }); + } else { + const result = validateIntillUpstreamTypes({ + type: "reference_and_number", + value: state.input.topK, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["input.topK"], + }); + } + } + + if (state.input.namespace) { + const result = validateIntillUpstreamTypes({ + type: "reference_and_string", + value: state.input.namespace, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["input.namespace"], + }); + } + } + + if (state.input.vector) { + const result = validateIntillUpstreamTypes({ + type: "reference", + value: state.input.vector, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["input.vector"], + }); + } + } + + if (state.input.id) { + const result = validateIntillUpstreamTypes({ + type: "reference", + value: state.input.id, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["input.id"], + }); + } + } + } + + if (state.task === "TASK_UPSERT") { + if (!state.input.values) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: "values is required", + path: ["input.values"], + }); + } else { + const result = validateIntillUpstreamTypes({ + type: "reference", + value: state.input.values, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["input.values"], + }); + } + } + + if (state.input.id) { + const result = validateIntillUpstreamTypes({ + type: "reference", + value: state.input.id, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["id"], + }); + } + } + } + } + + if (state.connector_definition_name === "connector-definitions/data-gcs") { + if (!state.input.object_name) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: "object_name is required", + path: ["object_name"], + }); + } else { + const result = validateIntillUpstreamTypes({ + type: "reference_and_string", + value: state.input.object_name, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["object_name"], + }); + } + } + + if (!state.input.data) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: "data is required", + path: ["data"], + }); + } else { + const result = validateIntillUpstreamTypes({ + type: "reference_and_string", + value: state.input.data, + }); + + if (!result.isValid) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: result.error, + path: ["data"], + }); + } + } + } + }); + +export type DataComponentFormProps = { + disabledAll?: boolean; + connectorDefinitionName: string; + configuration: GeneralRecord; +}; + +const pipelineBuilderSelector = (state: PipelineBuilderStore) => ({ + nodes: state.nodes, + updateNodes: state.updateNodes, + updateEdges: state.updateEdges, + selectedConnectorNodeId: state.selectedConnectorNodeId, + updateSelectedConnectorNodeId: state.updateSelectedConnectorNodeId, + updatePipelineRecipeIsDirty: state.updatePipelineRecipeIsDirty, +}); + +export const DataComponentForm = ({ + disabledAll, + connectorDefinitionName, + configuration, +}: DataComponentFormProps) => { + const { + nodes, + updateNodes, + updateEdges, + selectedConnectorNodeId, + updateSelectedConnectorNodeId, + updatePipelineRecipeIsDirty, + } = usePipelineBuilderStore(pipelineBuilderSelector, shallow); + + const form = useForm>({ + resolver: zodResolver(DataResourceSchema), + defaultValues: { + ...configuration, + connector_definition_name: connectorDefinitionName, + input: configuration.input ? configuration.input : {}, + }, + }); + + const { reset, watch } = form; + + React.useEffect(() => { + reset({ + ...configuration, + connector_definition_name: connectorDefinitionName, + input: configuration.input ? configuration.input : {}, + }); + }, [configuration, connectorDefinitionName, reset]); + + function onSubmit(data: z.infer) { + if (!selectedConnectorNodeId) return; + const modifiedData = recursiveReplaceNullAndEmptyStringWithUndefined(data); + + const newNodes = nodes.map((node) => { + if ( + node.id === selectedConnectorNodeId && + node.data.nodeType === "connector" + ) { + return { + ...node, + data: { + ...node.data, + component: { + ...node.data.component, + configuration: { + ...modifiedData, + connector_definition_name: undefined, + }, + }, + }, + }; + } + return node; + }); + + console.log(newNodes); + + updateNodes(() => newNodes); + + const allReferences: PipelineComponentReference[] = []; + + newNodes.forEach((node) => { + if (node.data.component?.configuration) { + allReferences.push( + ...extractReferencesFromConfiguration( + node.data.component?.configuration, + node.id + ) + ); + } + }); + + const newEdges = composeEdgesFromReferences(allReferences, newNodes); + + updateEdges(() => newEdges); + updateSelectedConnectorNodeId(() => null); + updatePipelineRecipeIsDirty(() => true); + } + + return ( + +
+
+ { + const display = + connectorDefinitionName === "connector-definitions/data-gcs"; + + return ( + + object_name * + + + + + + + The name of the object to be created + + + + ); + }} + /> + { + const display = + connectorDefinitionName === "connector-definitions/data-gcs"; + + return ( + + data * + + + + + + + The data to be saved in the object + + + + ); + }} + /> + + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone"; + + const tasks = [ + { + label: "Query", + value: "TASK_QUERY", + }, + { + label: "Upsert", + value: "TASK_UPSERT", + }, + ]; + + return ( + + Task * + + + + + + + + {tasks.map((task) => ( + +
+

{task.label}

+
+ + ))} + + + AI task type. + + + ); + }} + /> + + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone"; + + return ( + + id + + + + + + + {watch("task") === "TASK_QUERY" + ? "The unique ID of the vector to be used as a query vector" + : "The id of the matched vector"} + + + + ); + }} + /> + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone" && + watch("task") === "TASK_QUERY"; + + return ( + + namespace + + + + + + The namespace to query. + + + ); + }} + /> + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone" && + watch("task") === "TASK_QUERY"; + + return ( + + topK * + + + + + + The namespace to query. + + + ); + }} + /> + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone" && + watch("task") === "TASK_QUERY"; + + return ( + + includeValues + + + + + Indicates whether vector values are included in the + response. + + + + ); + }} + /> + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone" && + watch("task") === "TASK_QUERY"; + + return ( + + includeMetadata + + + + + Indicates whether metadata is included in the response as + well as the ids. + + + + ); + }} + /> + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone" && + watch("task") === "TASK_QUERY"; + + return ( + + vector + + + + + + + An array of dimensions for the query vector. + + + + ); + }} + /> + { + const display = + connectorDefinitionName === + "connector-definitions/data-pinecone" && + watch("task") === "TASK_UPSERT"; + + return ( + + values + + + + + + + An array of dimensions for the vector to be saved. + + + + ); + }} + /> +
+
+ +
+
+ + ); +}; diff --git a/packages/toolkit/src/view/data/index.ts b/packages/toolkit/src/view/data/index.ts index dc1e2296..fe1ee03a 100644 --- a/packages/toolkit/src/view/data/index.ts +++ b/packages/toolkit/src/view/data/index.ts @@ -1 +1,2 @@ export * from "./DataResourceForm"; +export * from "./DataComponentForm"; diff --git a/packages/toolkit/src/view/pipeline-builder/RightPanel.tsx b/packages/toolkit/src/view/pipeline-builder/RightPanel.tsx index e63d6fba..b66a92fd 100644 --- a/packages/toolkit/src/view/pipeline-builder/RightPanel.tsx +++ b/packages/toolkit/src/view/pipeline-builder/RightPanel.tsx @@ -7,6 +7,7 @@ import { Button, Icons, Separator } from "@instill-ai/design-system"; import { ImageWithFallback } from "../../components"; import { AIForm } from "../ai"; import { BlockchainForm } from "../blockchain"; +import { DataComponentForm } from "../data"; const pipelineBuilderSelector = (state: PipelineBuilderStore) => ({ nodes: state.nodes, @@ -92,9 +93,7 @@ export const RightPanel = () => { connectorDefinitionName={ selectedConnectorNode.data.component.definition_name } - configuration={ - selectedConnectorNode.data.component.configuration.input - } + configuration={selectedConnectorNode.data.component.configuration} /> ) : null} {selectedConnectorNode && @@ -102,11 +101,25 @@ export const RightPanel = () => { selectedConnectorNode.data.component.type === "COMPONENT_TYPE_CONNECTOR_BLOCKCHAIN" ? ( ) : null} + {selectedConnectorNode && + selectedConnectorNode.data.nodeType === "connector" && + selectedConnectorNode.data.component.type === + "COMPONENT_TYPE_CONNECTOR_DATA" ? ( + selectedConnectorNode.data.component.definition_name === + "connector-definitions/data-pinecone" || + selectedConnectorNode.data.component.definition_name === + "connector-definitions/data-gcs" ? ( + + ) : null + ) : null}
); diff --git a/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx b/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx index 5df76e9a..1bb2204f 100644 --- a/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx +++ b/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx @@ -8,7 +8,6 @@ import { Icons, Input, LinkButton, - Tag, Textarea, useToast, } from "@instill-ai/design-system"; @@ -118,12 +117,22 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { const [exapndOutputs, setExpandOutputs] = React.useState(false); let aiTaskNotSelected = false; + let dataTaskNotSelected = false; let resourceNotCreated = false; const { inputSchema, outputSchema } = React.useMemo(() => { if ( data.component.type === "COMPONENT_TYPE_CONNECTOR_AI" && - !data.component.configuration.input.task + !data.component.configuration.task + ) { + return { inputSchema: null, outputSchema: null }; + } + + if ( + data.component.type === "COMPONENT_TYPE_CONNECTOR_DATA" && + data.component.definition_name === + "connector-definitions/data-pinecone" && + !data.component.configuration.task ) { return { inputSchema: null, outputSchema: null }; } @@ -133,11 +142,19 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { if ( data.component.type === "COMPONENT_TYPE_CONNECTOR_AI" && - !data.component.configuration.input.task + !data.component.configuration.task ) { aiTaskNotSelected = true; } + if ( + data.component.type === "COMPONENT_TYPE_CONNECTOR_DATA" && + data.component.definition_name === "connector-definitions/data-pinecone" && + !data.component.configuration.task + ) { + dataTaskNotSelected = true; + } + if (!data.component.resource_name) { resourceNotCreated = true; } @@ -223,7 +240,7 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { function onEditDataConnectorInput(key: string) { dataConnectorInputForm.reset({ - value: data.component.configuration.input[key], + value: data.component.configuration.input.data[key], key: key, }); setEnableEdit(true); @@ -235,7 +252,7 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { const newNodes = nodes.map((node) => { if (node.data.nodeType === "connector" && node.id === id) { if (prevFieldKey) { - delete node.data.component.configuration.input[prevFieldKey]; + delete node.data.component.configuration.input.data[prevFieldKey]; } node.data = { @@ -246,7 +263,9 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { ...node.data.component.configuration, input: { ...node.data.component.configuration.input, - [formData.key]: formData.value, + data: { + [formData.key]: formData.value, + }, }, }, }, @@ -286,11 +305,7 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { function onDeleteDataConnectorInput(key: string) { const newNodes = nodes.map((node) => { if (node.data.nodeType === "connector" && node.id === id) { - delete node.data.component.configuration.input[key]; - - node.data = { - ...node.data, - }; + delete node.data.component.configuration.input.data[key]; } return node; }); @@ -546,13 +561,22 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { )} >
- { + dataConnectorInputForm.reset({ + value: "", + key: "", + }); setEnableEdit(!enableEdit); - dataConnectorInputForm.reset(); + setPrevFieldKey(null); }} - /> + > + +
) : null} - {aiTaskNotSelected || resourceNotCreated ? null : ( + {dataTaskNotSelected && !resourceNotCreated ? ( +
+

+ Please select Data task for this connector +

+
+ ) : null} + {aiTaskNotSelected || + dataTaskNotSelected || + resourceNotCreated ? null : (
input
)} {inputProperties.length > 0 ? ( @@ -762,7 +795,11 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { ) : null}
) : null} - {data.component.type === "COMPONENT_TYPE_CONNECTOR_DATA" ? ( + {data.component.type === "COMPONENT_TYPE_CONNECTOR_DATA" && + data.component.definition_name !== + "connector-definitions/data-pinecone" && + data.component.definition_name !== + "connector-definitions/data-gcs" ? ( testModeEnabled ? (
{Object.entries(data.component.configuration.input).map( @@ -781,86 +818,63 @@ export const ConnectorNode = ({ data, id }: NodeProps) => { ) : (
- {Object.entries( - data.component.configuration.input as GeneralRecord - ).map(([key, value]) => { - const reference = - extractPipelineComponentReferenceFromString({ - key, - value: value.value, - currentPath: [], - nodeId: id, - }); - - return ( -
-
-
- {key} -
-
- - -
-
-
- {reference?.type === "singleCurlyBrace" ? ( - - {reference.referenceValue.withoutCurlyBraces} - - ) : ( - reference?.referenceValues.map( - (referenceValue) => ( - { + return ( +
+
+
+

+ {key} +

+
+
+
-
- ); - })} + + + +
+
+
+ ); + }) + : null}
- + {dataTaskNotSelected ? null : ( + + )}
) ) : null} - {aiTaskNotSelected || resourceNotCreated ? null : ( + {aiTaskNotSelected || + dataTaskNotSelected || + resourceNotCreated ? null : (
output
)} {outputProperties.length > 0 ? ( diff --git a/packages/toolkit/src/view/pipeline-builder/lib/getAiConnectorDefaultConfiguration.tsx b/packages/toolkit/src/view/pipeline-builder/lib/getAiConnectorDefaultConfiguration.tsx index 85b71efb..eb4eaaec 100644 --- a/packages/toolkit/src/view/pipeline-builder/lib/getAiConnectorDefaultConfiguration.tsx +++ b/packages/toolkit/src/view/pipeline-builder/lib/getAiConnectorDefaultConfiguration.tsx @@ -4,22 +4,19 @@ export function getAiConnectorDefaultConfiguration( switch (connector_definition_name) { case "connector-definitions/ai-instill-model": return { - input: { - task: null, - }, + task: null, + input: {}, }; case "connector-definitions/ai-openai": return { - input: { - task: null, - }, + task: null, + input: {}, }; case "connector-definitions/ai-stability-ai": return { - input: { - task: null, - }, + task: null, + input: {}, }; default: return null; diff --git a/packages/toolkit/src/view/pipeline-builder/lib/getConnectorInputOutputSchema.ts b/packages/toolkit/src/view/pipeline-builder/lib/getConnectorInputOutputSchema.ts index eb7bc00e..1df2ba1a 100644 --- a/packages/toolkit/src/view/pipeline-builder/lib/getConnectorInputOutputSchema.ts +++ b/packages/toolkit/src/view/pipeline-builder/lib/getConnectorInputOutputSchema.ts @@ -26,12 +26,12 @@ export function getConnectorInputOutputSchema( ); if (hasTaskField) { - if (component.configuration.input.task) { + if (component.configuration.task) { inputSchema = ( ( ( component?.connector_definition?.spec.openapi_specifications[ - component.configuration.input.task + component.configuration.task ].paths["/execute"]?.post ?.requestBody as OpenAPIV3.RequestBodyObject ).content["application/json"]?.schema as OpenAPIV3.SchemaObject @@ -42,7 +42,7 @@ export function getConnectorInputOutputSchema( ( ( component?.connector_definition?.spec.openapi_specifications[ - component.configuration.input.task + component.configuration.task ].paths["/execute"]?.post?.responses[ "200" ] as OpenAPIV3.ResponseObject @@ -78,12 +78,12 @@ export function getConnectorInputOutputSchema( break; case "COMPONENT_TYPE_CONNECTOR_AI": - if (component.configuration.input.task) { + if (component.configuration.task) { inputSchema = ( ( ( component?.connector_definition?.spec.openapi_specifications[ - component.configuration.input.task + component.configuration.task ].paths["/execute"]?.post ?.requestBody as OpenAPIV3.RequestBodyObject ).content["application/json"]?.schema as OpenAPIV3.SchemaObject @@ -94,7 +94,7 @@ export function getConnectorInputOutputSchema( ( ( component?.connector_definition?.spec.openapi_specifications[ - component.configuration.input.task + component.configuration.task ].paths["/execute"]?.post?.responses[ "200" ] as OpenAPIV3.ResponseObject @@ -110,14 +110,15 @@ export function getConnectorInputOutputSchema( } function checkHasTaskField(schema: JSONSchema7) { - const properties = - (schema.properties?.input as JSONSchema7)?.properties ?? null; + const oneOf = schema.oneOf as JSONSchema7[]; - if (!properties) { + if (!oneOf) { return false; } - const propertyKeys = Object.keys(properties); + const hasTaskField = oneOf.some((schema) => { + return schema.properties?.task; + }); - return propertyKeys.includes("task"); + return hasTaskField; } diff --git a/packages/toolkit/src/view/pipeline-builder/lib/templates.ts b/packages/toolkit/src/view/pipeline-builder/lib/templates.ts index 8389390b..00315d36 100644 --- a/packages/toolkit/src/view/pipeline-builder/lib/templates.ts +++ b/packages/toolkit/src/view/pipeline-builder/lib/templates.ts @@ -72,9 +72,9 @@ export const templates: PipelineTemplate[] = [ "Augment the prompt with descriptive details for generating sticker images, and add the styles exactly at the end of the prompt “sticker style, flat icon, vector, die-cut {{start.shape}} sticker with white border”. Only return the output content. Prompt: a bear Output: a brown bear dancing in a forest, sticker style, flat icon, vector, die-cut {{start.shape}} sticker with white border Prompt: a dog writes code Output: a dog writes code in front of a laptop and drinks coffee, sticker style, flat icon, vector, die-cut {{start.shape}} sticker with white border Prompt: {{start.prompts[0]}} Output:", system_message: "You are a prompt engineer to generate Stable Diffusion prompts to generate sticker images", - task: "TASK_TEXT_GENERATION", temperature: 1, }, + task: "TASK_TEXT_GENERATION", }, type: "COMPONENT_TYPE_CONNECTOR_AI", definition_name: "connector-definitions/ai-openai", @@ -91,8 +91,8 @@ export const templates: PipelineTemplate[] = [ prompts: "{ai_1.output.texts}", samples: 1, steps: 30, - task: "TASK_TEXT_TO_IMAGE", }, + task: "TASK_TEXT_TO_IMAGE", }, type: "COMPONENT_TYPE_CONNECTOR_AI", definition_name: "connector-definitions/ai-stability-ai", @@ -167,9 +167,9 @@ export const templates: PipelineTemplate[] = [ prompt: "{start.prompts[0]}", system_message: "You are an AI image prompt generator. I will describe an image to you, and you will return a text-to-image prompt based on my description.\n\nAspect ratio list: 2:3, 16:9, 1:1, 9:16, 3:2\nStyle list: Van Gogh's Starry Night, reminiscent of Salvador Dali, J.R.R. Tolkien's Middle-earth, Claude Monet, detailed charcoal drawing, hyper-realistic digital painting, Frank Frazetta, Disney-inspired art, Studio Ghibli-inspired animation\nKeyword list: photo, 4k, 8k, cinematic, cartoon art, painting, cyberpunk art, cinematic lighting, high-resolution 3D art, \n\nPick a style from the style list and sme keywords from the keyword list, return the prompt in the following format:\n\n in a style of