@pega/custom-dx-components 0.23.1 → 0.23.3

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

@@ -1,184 +1,390 @@
-import chalk from 'chalk';
-import inquirer from 'inquirer';
-import ora from 'ora';
-import path from 'path';
-import { URL, fileURLToPath } from 'url';
-import { join } from 'path';
 import fs from 'fs';
+import {sep, join} from 'path';
+import { URL, fileURLToPath } from 'url';
 
-import { AI_PROMPT_FILENAME } from '../../constants.js';
-
+import chalk from 'chalk';
+import inquirer from 'inquirer';
 import _ from 'lodash';
 
-
+import {
+  AI_PROMPT_FILENAME,
+  AI_DAVINCI_PROMPT_FILENAME
+} from '../../constants.js';
 import {
   getComponents,
-  getPegaConfig,
-  getAIPromptData,
+  getComponentsOfType,
   getDirectoryFiles,
-  getAIComponent,
+  getInfinityAIComponent,
   getComponentDirectoryPath,
   compileMustacheTemplate,
-  getComponentConfigJson
+  getComponentConfigJson,
+  getComponentConfigType
 } from '../../util.js';
-import { str } from 'ajv';
 
+export const renameFile = (oldFileName, newFileName) => {
+  try {
+    fs.renameSync(oldFileName, newFileName);
 
+  } catch(err) {
+    console.log(err)
+  }
+}
 
+export const generateAIComponent = async (componentKey, designSystemComponents, additionalPromptInfo) => {
 
+  const fileName = "." + sep + AI_PROMPT_FILENAME;
 
-export const getComponentAndGenerateAI = async (enteredKey) => {
-  const localComponents = await getComponents();
+  // get config file
+  //
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+  const configFileData = await getComponentConfigJson(targetDirectory);
 
-  let answers;
+ // let data = JSON.parse(configFileData);
+ // data.properties = [];
+ // configFileData  = JSON.stringify(data);
 
-  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',
+  let strPrompt = compileMustacheTemplate(fileURLToPath(new URL(fileName, import.meta.url)), {
+    COMPONENT_CONFIG: configFileData,
+    COMPONENT_DSC: designSystemComponents,
+    COMPONENT_ADDITIONAL: additionalPromptInfo
+  });
+
+  strPrompt = strPrompt.replaceAll("$", "//$");
+
+  strPrompt = _.unescape(strPrompt);
+
+
+  let aiComponent = await getInfinityAIComponent(strPrompt);
+
+  if (aiComponent) {
+    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
+
+    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;
+
+        genList.forEach((el) => {
+          const theName = el.split(".")[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");
+
+        renameFile(oldGenFileName, newGenFileName);
+      }
+      else {
+        const oldGenFileName = join(targetDirectory, "index.jsx");
+        const newGenFileName = join(targetDirectory, "index-genai-1.jsx.old");
+
+        renameFile(oldGenFileName, newGenFileName);
+      }
     }
     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',
-        }
-
+      // 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("Generating component...");
+    console.log(`Updated file ${chalk.green('index.jsx')} in directory ${chalk.green(componentKey)} with AI generated code.`);
+  }
 
-    await generateAIComponent(enteredKey || answers.componentKey, answers.designSystemComponents, answers.additionalPropmtInfo);
 
-  } else {
-    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
-  }
-};
 
-export const renameFile = (oldFileName, newFileName) => {
-  try {
-    fs.renameSync(oldFileName, newFileName);
 
-  } catch(err) {
-    console.log(err)
-  }
 }
 
-export const generateAIComponent = async (componentKey, designSystemComponents, additionalPromptInfo) => {
 
-  const fileName = "." + path.sep + AI_PROMPT_FILENAME;
+
+export const generateInfinityAIComponent = async (componentKey, additionalPromptInfo) => {
+
+  const fileName = "." + sep + AI_DAVINCI_PROMPT_FILENAME;
 
   // get config file
   //
   const targetDirectory = await getComponentDirectoryPath(componentKey);
-  const configFile = await getComponentConfigJson(targetDirectory);
+  let configFileData = await getComponentConfigJson(targetDirectory);
+
+  // need to escape $
+  configFileData = configFileData.replaceAll("$", "\\$");
 
   let strPrompt = compileMustacheTemplate(fileURLToPath(new URL(fileName, import.meta.url)), {
-    COMPONENT_CONFIG: configFile,
-    COMPONENT_DSC: designSystemComponents,
+    COMPONENT_CONFIG: configFileData,
     COMPONENT_ADDITIONAL: additionalPromptInfo
   });
 
   strPrompt = _.unescape(strPrompt);
 
   //let strPrompt = await getAIPromptData(fileURLToPath(new URL(fileName, import.meta.url)));
-  let aiComponent = await getAIComponent(strPrompt);
+  let aiComponent = await getInfinityAIComponent(strPrompt);
 
   //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("```"));
+  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);
 
-  if (dirList.includes("index-template.jsx.old")) {
+    // 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 "";
-      }
-    });
+
+      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);
+      }
 
-      renameFile(oldGenFileName, newGenFileName);
     }
-    else {
-      const oldGenFileName = join(targetDirectory, "index.jsx");
-      const newGenFileName = join(targetDirectory, "index-genai-1.jsx.old");
 
-      renameFile(oldGenFileName, newGenFileName);
+
+    // 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.`);
+  }
+
+
+
+}
+
+export const getWidgetTemplateAndGenerateAI = async (enteredKey) => {
+  const localComponents = await getComponents();
+
+  let answers;
+
+  if (localComponents.length > 0) {
+
+    answers = await inquirer.prompt([
+      {
+        name: "fileOrText",
+        type: "rawlist",
+        choices: [ {name: "Prompt via a file", value:"File"}, {name: "Prompt entered text", value:"Text"}],
+        message: 'Enter how you want to propmt for component instructions '
+      },
+      {
+        name: 'fileName',
+        message: 'Enter file name? ',
+        default: 'prompt.txt',
+        when(answers) {
+          return answers.fileOrText === 'File';
+        }
+      },
+      {
+        name: 'additionalPromptInfo',
+        message: 'Enter what you would like this component to do? ',
+        when(answers) {
+          return answers.fileOrText === 'Text';
+        }
+      }
+
+    ]);
+
+    console.log("Generating component...");
+
+    if (answers.fileOrText === "Text") {
+      await generateInfinityAIComponent(enteredKey, answers.additionalPromptInfo);
+    }
+    else if (answers.fileOrText == "File") {
+      const strPrompt = await getFilePromptData(enteredKey, answers.fileName);
+
+      await generateInfinityAIComponent(enteredKey, strPrompt);
     }
+
+
+
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const getFilePromptData = async (componentKey, fileName) => {
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+
+  const fullFileName = join(targetDirectory, fileName);
+
+  if (fs.existsSync(fullFileName)) {
+    const promptData = fs.readFileSync(fullFileName, { encoding: 'utf8' });
+    return promptData;
   }
   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");
+    console.log(chalk.bold.redBright(`File ${fileName} does not exist.`));
+    process.exit(1);
+  }
+
+
+}
+
+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...");
+
+    await generateAIComponent(enteredKey || answers.componentKey, answers.designSystemComponents, answers.additionalPropmtInfo);
 
-    renameFile(oldFileName, newFileName);
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+
+
+export const getSelectAComponent = async() => {
+  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
+      }]);
   }
 
-  // creae new index.jsx
-  fs.writeFileSync(indexFile, aiComponent, err => {
-    if (err) {
-      Promise.reject(`${chalk.bold.red(err)}`);
+  return answers;
+}
+
+export const determineAndGenerateAI = async (enteredKey) => {
+
+  if (!enteredKey) {
+    const 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);
     }
-  });
 
-  console.log(`Updated file ${chalk.green('index.jsx')} in directory ${chalk.green(componentKey)} with AI generated code.`);
+  }
+
+  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;
+    default:
+      break;
+  }
 
 
 }

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.3",
     "@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;
+};