@pega/custom-dx-components 0.23.1 → 0.23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -7,6 +7,7 @@ export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token
 export const SERVICE_TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.service_token';
 export const OOTB_COMPONENTS = 'node_modules/@pega/custom-dx-components/.ootb_components';
 export const AI_PROMPT_FILENAME = 'aiPrompt.txt.mustache';
+export const AI_DAVINCI_PROMPT_FILENAME = 'aiPromptDavinci.txt.mustache';
 
 /* REST end points */
 export const PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/publish_component';
@@ -14,6 +15,8 @@ export const LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/list_c
 export const OOTB_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/ootb_component';
 export const DELETE_COMPONENT_SERVICE_REST_ENDPOINT = 'PRRestService/dev/v1/delete_component';
 export const BOOTSTRAP_SERVICE_REST_ENDPOINT = "PRRestService/application/v2/data_views/D_pxBootstrapConfig";
+export const DXCOMPGENAI_SERVICE_REST_ENDPOINT = "PRRestService/application/v2/data_views/D_DXCompAIGenList";
+
 export const SERVICES_AI_REST_ENDPOINT = 'generativeai';
 export const INF_TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
 export const INF_AUTHORIZE_URL_V1 = 'PRRestService/oauth2/v1/authorize';

package/src/tasks/create/templates/Constellation/Field/Boolean/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-checkbox-active.svg",

package/src/tasks/create/templates/Constellation/Field/Date/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-date-time-active.svg",

package/src/tasks/create/templates/Constellation/Field/DateTime/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-input-active.svg",

package/src/tasks/create/templates/Constellation/Field/Decimal/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-decimal-active.svg",

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-currency-active.svg",

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-input-active.svg",

package/src/tasks/create/templates/Constellation/Field/Integer/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   {{#IS_TEMPLATE}}

package/src/tasks/create/templates/Constellation/Field/Picklist/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-dropdown-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   {{#IS_TEMPLATE}}

package/src/tasks/create/templates/Constellation/Field/Text-Email/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-email-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-Input/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": "Text",
   "icon": "images/pz-text-input-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-text-area-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-Phone/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-phone-active.svg",

package/src/tasks/create/templates/Constellation/Field/Text-URL/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-url-active.svg",

package/src/tasks/create/templates/Constellation/Field/TimeOfDay/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "images/pz-date-time-active.svg",

package/src/tasks/create/templates/Constellation/Template/DETAILS/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnDetails.svg",

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "TwoColumnDetails.svg",

package/src/tasks/create/templates/Constellation/Template/FORM/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "DefaultForm.svg",

package/src/tasks/create/templates/Constellation/Template/FORM-region/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "TwoColumn.svg",

package/src/tasks/create/templates/Constellation/Template/PAGE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/create/templates/Constellation/Widget/CASE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/create/templates/Constellation/Widget/PAGE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/config.json.mustache

@@ -7,6 +7,7 @@
   "library": "{{LIBRARY}}",
   "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
+  "compName" : "{{COMPONENT_CLASS_NAME}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",

package/src/tasks/generate-ai/aiPrompt.txt.mustache

@@ -1,121 +1,23 @@
-Your task is to generate a custom DX component based on the Pega Constellation architecture. A custom DX component is a React functional component that uses hooks.  Create the first iteration of this component using the code template below, delimited by the second set of triple backticks.
+You are a Pega Digital Experience (DX) Component and React expert who only produces sample code with no additional narrative.  A Pega React DX Component is a functional component that uses hooks, PropTypes and StyledComponents.
 
-Replace MyOrg, MyLib and MyComponent with the text specified in InputProperties called organization, library and name respectively that is provided in the in the json properties array delimited by the fourth set of triple backticks. Be aware that MyComponent should be derived from the last part of the componentKey text that is delimited by a '_'. Based on the example component definition delimited by the third set of three backticks, replace the component props and PropTypes with the properties defined in the properties json array delimited by the fourth set of backticks.
 
-DesignSystemComponents is an array of jsx React components.  Replace the DesignSystemComponents import with the comma delimited list of imported components from '@pega/cosmos-react-core' with the text specified in DesignSystemComponents, delimited by the first set of triple backticks.  Also add in the jsx components in the render function.
+Very important: The name of the component comes from component definition compName.
 
-{{COMPONENT_ADDITIONAL}}
+Very important: The type of component to be created comes from component definition subtype.
+
+Very important:  A DX component has all of it's data passed in via a single object that must always be called props.  The object properties are then destructured in the component.  There is always a function passed in called getPConnect() that is required.  All event handlers are created in the same component and not passed in via the props object.  Apart from getPConnect() all of the object properties are defined in an array called properties in a file called config.json (a.k.a the component definition).
 
-DesignSystemComponents:
-```{{COMPONENT_DSC}}```
 
-Template:
-```
-import PropTypes from 'prop-types';
-import { DesignSystemComponents } from '@pega/cosmos-react-core';
-import StyledMyOrgMyLibMyComponentWrapper from './styles';
+Presentation components are imported from the Constellation Design System from the packages @pega/cosmos-react-core, @pega/cosmos-react-work, @pega/cosmos-react-social.
 
-export default function MyOrgMyLibMyComponent(props) {
-	const { getPConnect, visibility, disabled, required, aNumber, aString, aBoolean } = props;
+{{COMPONENT_ADDITIONAL}}
+
+Build a component defined by subtype in component definition.
 
-	const pConn = getPConnect();
+Should use the following design system components
 
-	return (
-		<StyledMyOrgMyLibMyPageWidgetWrapper>
-			<DesignSystemComponent
-				input1 = {aNumber}
-				input2 = {aString}
-				input3 = {aBoolean}
-			/>
-		</StyledMyOrgMyLibMyPageWidgetWrapper>
-	);
-}
+DesignSystemComponents:
+{{COMPONENT_DSC}}
 
-MyOrgMyLibMyComponent.defaultProps = {
-	aString: '',
-	aNumber: 0,
-	aBoolean: false,
-	visibility: true,
-	disabled: false,
-	required: false
-}
-MyOrgMyLibMyComponent.propTypes = {
-	aString: PropTypes.string,
-	aNumber: PropTypes.number,
-	aBoolean: PropTypes.bool,
-	visibility: PropTypes.string.bool,
-	disabled: PropTypes.string.bool,
-	required: PropTypes.string.bool,
-	getPConnect: PropTypes.func.isRequired
-}
-```
-ExampleComponentDefinition:
-```
-{
-  "name": "MyOrg_MyLib_MyComponent",
-  "label": "My Component",
-  "description": "My Component",
-  "organization": "MyOrg",
-  "version": "01.01.01",
-  "library": "MyLib",
-  "allowedApplications": [],
-  "componentKey": "MyOrg_MyLib_MyComponent",
-  "type": "",
-  "subtype": "",
-  "properties": [
-    {
-      "name": "aString",
-      "label": "aString value",
-      "format": "TEXT"
-    },
-    {
-      "name": "aBoolean",
-      "label": "aBoolean value",
-      "format": "BOOLEAN"
-    },
-    {
-      "name": "aNumber",
-      "label": "aNumber value",
-      "format": "NUMBER",
-      "defaultValue": "0"
-    },
-    {
-      "name": "visibility",
-      "label": "Visible",
-      "format": "VISIBILITY"
-    },
-    {
-      "name": "disabled",
-      "label": "Disabled",
-      "format": "DISABLED",
-      "visibility": "(!$this.readOnly = true)"
-    },
-    {
-      "name": "required",
-      "label": "Required",
-      "format": "REQUIRED",
-      "visibility": "(!$this.readOnly = true)"
-    },
-    {
-      "label": "Advanced",
-      "format": "GROUP",
-      "collapsible": true,
-      "properties": [
-        {
-          "name": "testId",
-          "label": "Test ID",
-          "format": "TEXT",
-          "ignorePattern": "[^-_\\p{N}\\p{L}]",
-          "includeAnnotations": false
-        }
-      ]
-    }
-  ],
-  "defaultConfig": {
-  }
-}
-```
-InputProperties:
-```
+Here is the component definition
 {{COMPONENT_CONFIG}}
-```

package/src/tasks/generate-ai/aiPromptDavinci.txt.mustache

@@ -0,0 +1,14 @@
+You are a Pega Digital Experience (DX) Component and React expert who only produces sample code with no additional narrative.  A Pega React DX Component is a functional component that uses hooks, PropTypes and StyledComponents.
+
+
+Very important: The name of the component comes from component definition compName.
+
+Very important:  A DX component has all of it's data passed in via a single object that must always be called props.  The object properties are then destructured in the component.  There is always a function passed in called getPConnect() that is required.  All event handlers are created in the same component and not passed in via the props object.  Apart from getPConnect() all of the object properties are defined in an array called properties in a file called config.json (a.k.a the component definition).
+
+
+Presentation components are imported from the Constellation Design System from the packages @pega/cosmos-react-core, @pega/cosmos-react-work, @pega/cosmos-react-social.
+
+{{COMPONENT_ADDITIONAL}}
+
+Here is the component definition
+{{COMPONENT_CONFIG}}

package/src/tasks/generate-ai/helper.js

@@ -6,68 +6,124 @@ import { URL, fileURLToPath } from 'url';
 import { join } from 'path';
 import fs from 'fs';
 
-import { AI_PROMPT_FILENAME } from '../../constants.js';
+import {
+  AI_PROMPT_FILENAME,
+  AI_DAVINCI_PROMPT_FILENAME
+} from '../../constants.js';
 
 import _ from 'lodash';
 
 
 import {
   getComponents,
+  getComponentsOfType,
   getPegaConfig,
   getAIPromptData,
   getDirectoryFiles,
   getAIComponent,
+  getInfinityAIComponent,
   getComponentDirectoryPath,
   compileMustacheTemplate,
-  getComponentConfigJson
+  getComponentConfigJson,
+  getComponentConfigType
 } from '../../util.js';
 import { str } from 'ajv';
 
 
+export const getSelectAComponent = async() => {
+  //let localComponents = await getComponents();
+  const localComponents = await getComponentsOfType("Widget,Template");
+
+  let answers;
+
+  if (localComponents.length > 0) {
+    answers = await inquirer.prompt([
+      {
+        name: 'componentKey',
+        type: 'rawlist',
+        message: 'Select component to generateAI',
+        choices: localComponents
+      }]);
+  }
+
+  return answers;
+}
 
+export const determineAndGenerateAI = async (enteredKey) => {
 
+  if (!enteredKey) {
+    let answer = await getSelectAComponent();
+    if (answer) {
+      enteredKey = answer.componentKey;
+    }
+    else {
+      console.log(chalk.bold.redBright(`No custom components to generate AI. Please create a Widget or Template component first.`));
+      process.exit(1);
+    }
+
+  }
+
+  const targetDirectory = await getComponentDirectoryPath(enteredKey);
+  const configType = await getComponentConfigType(targetDirectory);
+
+  switch (configType.toLowerCase()) {
+    case "widget":
+    case "template":
+      await getWidgetTemplateAndGenerateAI(enteredKey);
+      break;
+    case "field":
+      await getFieldAndGenerateAI(enteredKey);
+      break;
+  }
 
-export const getComponentAndGenerateAI = async (enteredKey) => {
+
+}
+
+export const getWidgetTemplateAndGenerateAI = async (enteredKey) => {
   const localComponents = await getComponents();
 
   let answers;
 
   if (localComponents.length > 0) {
 
-    if (enteredKey && enteredKey != "") {
-      answers = await inquirer.prompt([
-        {
-          name: 'designSystemComponents',
-          message: 'Enter comma delimited string of Design system components (ie. Input, TextArea, etc.)'
-        },
-        {
-          name: 'additionalPromptInfo',
-          message: 'Enter any additional generation information',
-        }
+    answers = await inquirer.prompt([
 
+      {
+        name: 'additionalPromptInfo',
+        message: 'Enter what you would like this component to do? ',
+      }
 
-      ]);
-    }
-    else {
-      answers = await inquirer.prompt([
-        {
-          name: 'componentKey',
-          type: 'rawlist',
-          message: 'Select component to generateAI',
-          choices: localComponents,
-        },
-        {
-          name: 'designSystemComponents',
-          message: 'Enter comma delimited string of Design system components (ie. Input, TextArea, etc.)'
-        },
-        {
-          name: 'additionalPromptInfo',
-          message: 'Enter any additional generation information',
-        }
 
+    ]);
 
-      ]);
-    }
+    console.log("Generating component...");
+
+    await generateInfinityAIComponent(enteredKey, answers.additionalPromptInfo);
+
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+
+export const getFieldAndGenerateAI = async (enteredKey) => {
+  const localComponents = await getComponents();
+
+  let answers;
+
+  if (localComponents.length > 0) {
+
+    answers = await inquirer.prompt([
+      {
+        name: 'designSystemComponents',
+        message: 'Enter comma delimited string of Design system components (ie. Input, TextArea, etc.)'
+      },
+      {
+        name: 'additionalPromptInfo',
+        message: 'Enter any additional generation information',
+      }
+
+    ]);
 
 
     console.log("Generating component...");
@@ -95,90 +151,207 @@ export const generateAIComponent = async (componentKey, designSystemComponents,
   // get config file
   //
   const targetDirectory = await getComponentDirectoryPath(componentKey);
-  const configFile = await getComponentConfigJson(targetDirectory);
+  let configFileData = await getComponentConfigJson(targetDirectory);
+
+ // let data = JSON.parse(configFileData);
+ // data.properties = [];
+ // configFileData  = JSON.stringify(data);
+
 
   let strPrompt = compileMustacheTemplate(fileURLToPath(new URL(fileName, import.meta.url)), {
-    COMPONENT_CONFIG: configFile,
+    COMPONENT_CONFIG: configFileData,
     COMPONENT_DSC: designSystemComponents,
     COMPONENT_ADDITIONAL: additionalPromptInfo
   });
 
+  strPrompt = strPrompt.replaceAll("$", "//$");
+
   strPrompt = _.unescape(strPrompt);
 
+
   //let strPrompt = await getAIPromptData(fileURLToPath(new URL(fileName, import.meta.url)));
-  let aiComponent = await getAIComponent(strPrompt);
+  //let aiComponent = await getAIComponent(strPrompt);
+  let aiComponent = await getInfinityAIComponent(strPrompt);
 
-  //console.log(aiData);
-  const indexFile = join(targetDirectory, "index.jsx");
+  if (aiComponent) {
+    //console.log(aiData);
+    const indexFile = join(targetDirectory, "index.jsx");
+
+    // remove enclosed ``` and "Answer:"
+    aiComponent = aiComponent.substring(aiComponent.indexOf("import"));
+    aiComponent = aiComponent.substring(0, aiComponent.lastIndexOf("```"));
+
+
+
+    // get directory list
+    // check for index-template.jsx.old
+    //    if not there, copy index.jsx to index-template.jsx.old and then copy aiComponent to index.jsx
+    //    if there, check if have index-genai-1.jsx.old, if not, then copy index.jsx, to index-genai-1.jsx.old
+    //    otherwise, find all index-genai-X and find biggest number and add one, and save index.jsx to that and then create index.jsx
 
-  // remove enclosed ``` and "Answer:"
-  aiComponent = aiComponent.substring(aiComponent.indexOf("import"));
-  aiComponent = aiComponent.substring(0, aiComponent.lastIndexOf("```"));
+    const dirList = await getDirectoryFiles(targetDirectory);
 
+    if (dirList.includes("index-template.jsx.old")) {
 
+      const genList = dirList.map( (el) => {
+        if (el.indexOf("index-genai") >= 0) {
+          return el;
+        }
+        else {
+          return "";
+        }
+      });
+
+      if (genList.length > 0) {
+        let lastIndex = 0;
 
-  // get directory list
-  // check for index-template.jsx.old
-  //    if not there, copy index.jsx to index-template.jsx.old and then copy aiComponent to index.jsx
-  //    if there, check if have index-genai-1.jsx.old, if not, then copy index.jsx, to index-genai-1.jsx.old
-  //    otherwise, find all index-genai-X and find biggest number and add one, and save index.jsx to that and then create index.jsx
+        genList.forEach((el) => {
+          const theName = el.split(".")[0];
+          const theIndex = theName.split("-")[2];
 
-  const dirList = await getDirectoryFiles(targetDirectory);
+          if (parseInt(theIndex) > lastIndex) {
+            lastIndex = parseInt(theIndex);
+          }
+        });
 
-  if (dirList.includes("index-template.jsx.old")) {
+        lastIndex++;
 
-    const genList = dirList.map( (el) => {
-      if (el.indexOf("index-genai") >= 0) {
-        return el;
+        const oldGenFileName = join(targetDirectory, "index.jsx");
+        const newGenFileName = join(targetDirectory, "index-genai-" + lastIndex + ".jsx.old");
+
+        renameFile(oldGenFileName, newGenFileName);
       }
       else {
-        return "";
+        const oldGenFileName = join(targetDirectory, "index.jsx");
+        const newGenFileName = join(targetDirectory, "index-genai-1.jsx.old");
+
+        renameFile(oldGenFileName, newGenFileName);
+      }
+    }
+    else {
+      // so only index.jsx, so rename index.jsx to index-template.jsx.old
+      // and create a new index.jsx
+      const oldFileName = join(targetDirectory, "index.jsx");
+      const newFileName = join(targetDirectory, "index-template.jsx.old");
+
+      renameFile(oldFileName, newFileName);
+    }
+
+    // creae new index.jsx
+    fs.writeFileSync(indexFile, aiComponent, err => {
+      if (err) {
+        Promise.reject(`${chalk.bold.red(err)}`);
       }
     });
 
+    console.log(`Updated file ${chalk.green('index.jsx')} in directory ${chalk.green(componentKey)} with AI generated code.`);
+  }
+
+
+
+
+}
+
+export const generateInfinityAIComponent = async (componentKey, additionalPromptInfo) => {
+
+  const fileName = "." + path.sep + AI_DAVINCI_PROMPT_FILENAME;
+
+  // get config file
+  //
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+  let configFileData = await getComponentConfigJson(targetDirectory);
+
+  // need to escape $
+  configFileData = configFileData.replaceAll("$", "\\$");
+
+  let strPrompt = compileMustacheTemplate(fileURLToPath(new URL(fileName, import.meta.url)), {
+    COMPONENT_CONFIG: configFileData,
+    COMPONENT_ADDITIONAL: additionalPromptInfo
+  });
+
+  strPrompt = _.unescape(strPrompt);
+
+  //let strPrompt = await getAIPromptData(fileURLToPath(new URL(fileName, import.meta.url)));
+  let aiComponent = await getInfinityAIComponent(strPrompt);
+
+  //console.log(aiData);
+
+  if (aiComponent) {
+    const indexFile = join(targetDirectory, "index-genai.jsx.tmp");
+
+    // remove enclosed ``` and "Answer:"
+    if (aiComponent.indexOf("```") >= 0) {
+      aiComponent = aiComponent.substring(aiComponent.indexOf("```"));
+      aiComponent = aiComponent.substring(0, aiComponent.lastIndexOf("```"));
+    }
+    else if (aiComponent.indexOf("'") == 0) {
+      aiComponent = aiComponent.substring(aiComponent.indexOf("'"));
+      aiComponent = aiComponent.substring(0, aiComponent.lastIndexOf("'"));
+    }
+
+
+
+
+    // get directory list
+    // check for index-template.jsx.old
+    //    if not there, copy index.jsx to index-template.jsx.old and then copy aiComponent to index.jsx
+    //    if there, check if have index-genai-1.jsx.old, if not, then copy index.jsx, to index-genai-1.jsx.old
+    //    otherwise, find all index-genai-X and find biggest number and add one, and save index.jsx to that and then create index.jsx
+
+    const dirList = await getDirectoryFiles(targetDirectory);
+
+
+
+      const genList = dirList.map( (el) => {
+        if (el.indexOf("index-genai") >= 0) {
+          return el;
+        }
+        else {
+          return "";
+        }
+      });
+
     if (genList.length > 0) {
-      let lastIndex = 0;
+      let lastIndex = -1;
 
       genList.forEach((el) => {
         const theName = el.split(".")[0];
-        const theIndex = theName.split("-")[2];
 
-        if (parseInt(theIndex) > lastIndex) {
-          lastIndex = parseInt(theIndex);
+        if (theName.indexOf("index-genai") >=0) {
+          if (lastIndex === -1) {
+            lastIndex = 0;
+          }
+          const theIndex = theName.split("-")[2];
+
+          if (parseInt(theIndex) > lastIndex) {
+            lastIndex = parseInt(theIndex);
+          }
         }
+
       });
 
       lastIndex++;
 
-      const oldGenFileName = join(targetDirectory, "index.jsx");
-      const newGenFileName = join(targetDirectory, "index-genai-" + lastIndex + ".jsx.old");
+      if (lastIndex > 0) {
+        const oldGenFileName = join(targetDirectory, "index-genai.jsx.tmp");
+        const newGenFileName = join(targetDirectory, "index-genai-" + lastIndex + ".jsx.tmp");
 
-      renameFile(oldGenFileName, newGenFileName);
-    }
-    else {
-      const oldGenFileName = join(targetDirectory, "index.jsx");
-      const newGenFileName = join(targetDirectory, "index-genai-1.jsx.old");
+        renameFile(oldGenFileName, newGenFileName);
+      }
 
-      renameFile(oldGenFileName, newGenFileName);
     }
-  }
-  else {
-    // so only index.jsx, so rename index.jsx to index-template.jsx.old
-    // and create a new index.jsx
-    const oldFileName = join(targetDirectory, "index.jsx");
-    const newFileName = join(targetDirectory, "index-template.jsx.old");
 
-    renameFile(oldFileName, newFileName);
-  }
 
-  // creae new index.jsx
-  fs.writeFileSync(indexFile, aiComponent, err => {
-    if (err) {
-      Promise.reject(`${chalk.bold.red(err)}`);
-    }
-  });
+    // creae new index.jsx
+    fs.writeFileSync(indexFile, aiComponent, err => {
+      if (err) {
+        Promise.reject(`${chalk.bold.red(err)}`);
+      }
+    });
+
+    console.log(`Updated file ${chalk.green('index-genai.jsx.tmp')} in directory ${chalk.green(componentKey)} with AI generated code.`);
+  }
 
-  console.log(`Updated file ${chalk.green('index.jsx')} in directory ${chalk.green(componentKey)} with AI generated code.`);
 
 
 }

package/src/tasks/generate-ai/index.js

@@ -3,8 +3,7 @@ import ora from 'ora';
 import chalk from 'chalk';
 
 import {
-  getComponentAndGenerateAI,
-  generateAIComponent
+  determineAndGenerateAI
 } from './helper.js';
 
 import { showVersion } from '../../util.js';
@@ -19,11 +18,13 @@ export default async options => {
     const sourceOfComponents = options.params[3];
 
     //await generateAIComponent(sourceOfComponents);
-    await getComponentAndGenerateAI(sourceOfComponents);
+    //await getComponentAndGenerateAI(sourceOfComponents);
+    await determineAndGenerateAI(sourceOfComponents);
   }
   else {
 
-    await getComponentAndGenerateAI();
+    //await getComponentAndGenerateAI();
+    await determineAndGenerateAI();
   }
 
 

package/src/tasks/init/template/package.json.mustache

@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.5.3",
-    "@pega/custom-dx-components": "^0.23.1",
+    "@pega/custom-dx-components": "^0.23.2",
     "@pega/eslint-config": "^0.3.2",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

package/src/tasks/init/template/src/components/_components.md

@@ -0,0 +1 @@
+# directory for components #

package/src/util.js

@@ -1,4 +1,5 @@
 import fs from 'fs';
+import path from 'path';
 import { join } from 'path';
 import { promisify } from 'util';
 import https from 'https';
@@ -21,6 +22,7 @@ import {
   OOTB_COMPONENTS,
   SERVICES_AI_REST_ENDPOINT,
   BOOTSTRAP_SERVICE_REST_ENDPOINT,
+  DXCOMPGENAI_SERVICE_REST_ENDPOINT,
   SERVICE_TOKEN_PATH
 } from './constants.js';
 
@@ -142,6 +144,46 @@ export const getComponents = async () => {
     .map(dirent => dirent.name);
 };
 
+export const getComponentsOfType = async (componentType) => {
+  const componentList = await getComponents();
+  let filteredList = Array();
+  if (componentList.length > 0) {
+
+    const currentDirectory = process.cwd();
+    const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+    await checkPathAccess(pegaConfigJsonPath);
+
+    let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+    data = JSON.parse(data);
+
+    if (!data[COMPONENTS_DIRECTORY_PATH]) {
+      console.error(
+        `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+      );
+      process.exit(1);
+    }
+
+    const directory = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH]);
+    const arTypes = componentType.split(",");
+
+    for (let index in componentList) {
+      let compDir = directory + path.sep + componentList[index];
+      let type =  await getComponentConfigType(compDir);
+      if (arTypes.includes(type)) {
+        filteredList.push( componentList[index]);
+      }
+    }
+
+
+
+    return filteredList;
+  }
+  else {
+    return componentList;
+  }
+};
+
 
 
 
@@ -219,6 +261,15 @@ export const getComponentConfigJson = async (componentDirectory) => {
   return data;
 }
 
+export const getComponentConfigType = async (componentDirectory) => {
+  const configData = await getComponentConfigJson(componentDirectory);
+
+  let data = JSON.parse(configData);
+
+  return data.type;
+
+}
+
 export const getPegaServerConfig = async () => {
   const config = await getPegaConfig();
   return config['server-config'];
@@ -516,3 +567,77 @@ export const getAIComponent = async (prompt) => {
 
   return returnCode;
 };
+
+
+export const getInfinityAIComponent = async (prompt) => {
+  const { server } = await getPegaServerConfig();
+  const dataPageUrl = constructCompleteUrl(server, DXCOMPGENAI_SERVICE_REST_ENDPOINT);
+
+  const jsonBody = { "dataViewParameters" :  { "Prompt" : prompt } };
+
+
+
+  let returnCode = "";
+
+  try {
+    const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
+
+    if (OauthData) {
+      let {
+        access_token: accessToken,
+        token_type: tokenType,
+        refresh_token: refreshToken
+      } = JSON.parse(OauthData);
+
+      // services needs Bearer with a big "B"
+      //tokenType = convertIntoPascalCase(tokenType);
+
+      await fetch(dataPageUrl, {
+        method: 'POST',
+        agent: new https.Agent({ rejectUnauthorized: false }),
+        headers: {
+          Authorization: `${tokenType} ${accessToken}`
+        },
+        body: JSON.stringify(jsonBody),
+      })
+        .then(response => response.text())
+        .then(data => {
+
+          try {
+            const returnData = JSON.parse(data);
+
+            if (returnData != null && returnData.data) {
+              returnCode = returnData.data[0].pyValue;
+            }
+            else if (returnData != null && returnData.errors) {
+              if (returnData.errors[0].message.indexOf("token") >= 0) {
+                Promise.reject(`${chalk.bold.red("ERROR: Need to authenticate or reauthenticate.")}`);
+              }
+            }
+            else {
+              returnCode = "";
+              Promise.reject(`Error in AI generation: \n ${chalk.bold.red(data)}`);
+            }
+          }
+          catch {
+            Promise.reject(`Error in AI generation: \n ${chalk.bold.red(data)}`);
+            //throw new Error('Error occurred in validation', data);
+          }
+
+
+        })
+        .catch(e => Promise.reject(`Error in AI generation: \n ${chalk.bold.red(e)}`));
+    }
+  }
+  catch (error) {
+    if (error.code === 'ENOENT') {
+      Promise.reject(`${chalk.bold.red("ERROR: Need to authenticate or reauthenticate.")}`);
+    }
+    else {
+      throw new Error('Error occurred in validation', error);
+    }
+
+  }
+
+  return returnCode;
+};

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, Story } from '@storybook/react';
-
-import MediaURLInput from './MediaURLInput';
-import MediaURLDisplay from './MediaURLDisplay';
-
-export default {
-  title: 'MediaURL',
-  parameters: {
-    layout: 'centered'
-  }
-} as Meta;
-
-export const InputMode: Story = () => {
-  return <MediaURLInput label='Media src url' />;
-};
-
-export const DisplayMode: Story = () => {
-  return <MediaURLDisplay value='https://youtu.be/BxogmCLpy0w' />;
-};

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.styles.ts

@@ -1,5 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export default styled.div(() => {
-  return css``;
-});

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURL.types.ts

@@ -1,10 +0,0 @@
-import type { FormControlProps, OmitStrict, URLDisplayProps } from '@pega/cosmos-react-core';
-
-export interface MediaURLInputProps extends OmitStrict<FormControlProps, 'defaultValue'> {
-  testId?: string;
-}
-
-export interface MediaURLDisplayProps extends OmitStrict<URLDisplayProps, 'variant' | 'ref'> {
-  variant?: 'player' | URLDisplayProps['variant'];
-  testId?: string;
-}

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURLDisplay.tsx

@@ -1,25 +0,0 @@
-import type { FunctionComponent } from 'react';
-import { URLDisplay } from '@pega/cosmos-react-core';
-import ReactPlayer from 'react-player';
-
-import StyledMediaURLDisplay from './MediaURL.styles';
-import type { MediaURLDisplayProps } from './MediaURL.types';
-
-const MediaURLDisplay: FunctionComponent<MediaURLDisplayProps> = ({
-  value,
-  variant = 'player',
-  testId,
-  ...restProps
-}) => {
-  if ((!value && variant !== 'player') || variant !== 'player') {
-    return <URLDisplay value={value} variant={variant} {...restProps} />;
-  }
-
-  return (
-    <StyledMediaURLDisplay data-testid={testId}>
-      <ReactPlayer url={value} />
-    </StyledMediaURLDisplay>
-  );
-};
-
-export default MediaURLDisplay;

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/MediaURLInput.tsx

@@ -1,24 +0,0 @@
-import { ChangeEvent, FunctionComponent, useState } from 'react';
-import { Input } from '@pega/cosmos-react-core';
-
-import type { MediaURLInputProps } from './MediaURL.types';
-
-const MediaURLInput: FunctionComponent<MediaURLInputProps> = ({
-  value,
-  ...restProps
-}: MediaURLInputProps) => {
-  const [url, setURL] = useState(value);
-
-  return (
-    <Input
-      {...restProps}
-      type='url'
-      value={url}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        setURL(e.target.value);
-      }}
-    />
-  );
-};
-
-export default MediaURLInput;

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "Organization_Library_MediaURL",
-  "label": "MediaURL",
-  "description": "A pair of components for taking input and displaying teh value of a video or audio url.",
-  "organization": "TBD",
-  "version": "0.0.1",
-  "library": "TBD",
-  "componentKey": "Organization_Library_MediaURL",
-  "type": "Field",
-  "subtype": "Text",
-  "icon": "TBD",
-  "properties": ["TBD"]
-}

package/src/tasks/init/template/src/components/Organization_Library_MediaURL/index.ts

@@ -1,2 +0,0 @@
-export { default as MediaURLInput } from './MediaURLInput';
-export { default as MediaURLDisplay } from './MediaURLDisplay';

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/config.json

@@ -1,44 +0,0 @@
-{
-  "name": "Organization_Library_VideoPlayer",
-  "label": "Video Player",
-  "description": "video player",
-  "organization": "apple",
-  "version": "0.0.1",
-  "library": "basic",
-  "componentKey": "Organization_Library_VideoPlayer",
-  "type": "Field",
-  "subtype": "Text",
-  "icon": "images/pz-text-input-active.svg",
-  "properties": [
-    {
-      "name": "value",
-      "label": "Property",
-      "format": "PROPERTY"
-    },
-    {
-      "name": "label",
-      "label": "Label value",
-      "format": "TEXT"
-    },
-    {
-      "name": "placeholder",
-      "label": "Placeholder",
-      "format": "TEXT"
-    },
-    {
-      "name": "visibility",
-      "label": "Visible",
-      "format": "VISIBILITY"
-    },
-    {
-      "name": "disabled",
-      "label": "Disabled",
-      "format": "DISABLED"
-    },
-    {
-      "name": "required",
-      "label": "Required",
-      "format": "REQUIRED"
-    }
-  ]
-}

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/demo.stories.jsx

@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
-import VideoPlayer from './index';
-
-export default {
-  title: 'VideoPlayer',
-  decorators: [withKnobs],
-  component: VideoPlayer
-};
-
-export const baseVideoPlayer = () => {
-  const [value, setValue] = useState('test value');
-
-  const props = {
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: (propName, value) => {
-              setValue(value);
-            }
-          };
-        },
-        getStateProps: () => {
-          return { value: '.name' };
-        }
-      };
-    },
-    value: text('src', 'https://www.youtube.com/watch?v=EtG5IuNGYSk'),
-    placeholder: text('Placeholder', 'Test placeholder'),
-    disabled: boolean('Disabled', false),
-    readOnly: boolean('Disabled', false),
-    required: boolean('Disabled', false),
-    label: text('Label', 'Video player label'),
-    testId: text('Test id', 'video-12344566')
-  };
-
-  return <VideoPlayer {...props} />;
-};

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/index.jsx

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Label } from '@pega/cosmos-react-core';
-import ReactPlayer from 'react-player';
-
-import StyledVideoPlayerWrapper from './styles';
-
-const VideoPlayer = props => {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label } = props;
-
-  const pConn = getPConnect();
-  const actions = pConn.getActionsApi();
-  const propName = pConn?.getStateProps()?.value;
-
-  return (
-    <StyledVideoPlayerWrapper>
-      <Label>{label}</Label>
-      <ReactPlayer url={value} />
-    </StyledVideoPlayerWrapper>
-  );
-};
-
-VideoPlayer.defaultProps = {
-  value: '',
-  placeholder: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: null
-};
-VideoPlayer.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string.isRequired,
-  placeholder: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string
-};
-
-export default VideoPlayer;

package/src/tasks/init/template/src/components/Organization_Library_VideoPlayer/styles.js

@@ -1,5 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export default styled.div(() => {
-  return css``;
-});