Skip to content

Input Block

Each input block consists of at least three files located under the inputs folder, which follows the following naming convention:

  • \<input block cid>.meta.json
  • \<input block cid>.mdx
  • \<input block cid>.summary.mdx

Assuming you have created a input block with cid "sample-input-block", then there should be the following files under the inputs folder:

  • sample-input-block.meta.json
  • sample-input-block.mdx
  • sample-input-block.summary.mdx

Input Block Meta Data

During installation, the Plugin Manager will search for and validate the input block meta data according to the schema ai-verify.inputBlock.schema.json schema definitions.

Propreties Type Required Description
cid string, must match pattern ^[a-zA-Z0-9][a-zA-Z0-9-._]*$ Yes Unique identifier for the input block within the plugin.
name string Yes Input block name.
description string No Input block description.
group string No Input blocks that have the same group name will be grouped together in the user input page
width string, enum ["xs", "sm", "md", "lg", "xl"] No Defines the width of the input block dialog box in the user input page. If not set, the width will default to "md"
fullScreen boolean No Whether the dialog box in the input block should be in fullscreen mode. If this is set to true, the width property is not used

Note: The input block meta data does not contain a gid property as it is automatically inferred and referenced using the format

\<plugin gid>:\<input block cid>

Example

{
  "cid": "sample-input-block",
  "name": "Sample Input Block",
  "description": "This is a sample input block",
  "group": "Sample Group",
  "width": "md",
  "fullScreen": false
}

Input Block MDX

The input blocks are launched as dialog in the user input page, with the width of the dialog box depending on the width property in the meta data.

The MDX are loaded as React components and the component properties are passed and accessed as props global variable.

Input Block Props

Propreties Type Description
data object Key-Value Object containing the user input data saved
onChangeData (key: string, value: any) => void Function to save user data, e.g. props.onChangeData("mykey","Hello World")

Input Block Summary

For each input block, there should be a summary file \<input block cid>.summary.mdx that is imported by the AI Verify portal. The script MUST implement and export the following methods. For Example,

{/* Return summary of data */}
export const summary = (data) => {
    // TODO: replace below code with meaningful summary of data.
  if (!data)
    return "No data";
  return JSON.stringify(data || {})
}

{/* Return progress in percentage (0-100) */}
export const progress = (data) => {
    // TODO: replace below code with percentage of user completion.
  if (!data)
    return 0;
  const totalKeys = 3;
  const numKeys = Object.values(data).filter(v => {
    if (typeof (v) === "string" || Array.isArray(v)) {
      return v.length > 0;
    } else {
      return true;
    }
  }).length;
  return Math.round((numKeys / totalKeys) * 100);
}

{/* Validate data. */}
export const validate = (data) => {
  // TODO: replace below code with data validation. 
  return progress(data) == 100;
}

Developers should implement the methods as defined to provide meaningful summary and track progress of the input block completion. The validate method tells the portal whether the input block data is valid.

If the input block summary validate function return false, then the portal will not allow report generation until the input block data validate success. If the input block does not require the data to be validated before generating report, then developer should return true for this function.