Support prompt cards in json

acrobat/blocks/prompt-card/prompt-card.js

@@ -68,22 +68,41 @@ async function createBlock(element, cfg) {
   });
 }
 
-async function processGroup(element, startIndex, templateCfg) {
-  const blockArray = [];
-  const keys = [...element.children[startIndex].children].map((x) => x.textContent.toLowerCase());
-  [...element.children].slice(startIndex + 1).forEach((x) => {
-    const values = [...x.children].map((y) => y.textContent);
-    const block = keys.reduce((obj, key, index) => ({ ...obj, [key]: values[index] }), {});
-    blockArray.push(block);
-  });
+async function createBlocks(element, blockArray, templateCfg) {
+  const { parentNode } = element;
   for (const cfg of blockArray) {
     const blockEl = createTag('div', { class: 'prompt-card' });
     await createBlock(blockEl, { ...templateCfg, ...cfg });
-    element.parentNode.insertBefore(blockEl, element.previousSibling);
+    parentNode.insertBefore(blockEl, element.previousSibling);
   }
   element.remove();
 }
 
+async function processGroup(element, cfg, startIndex) {
+  let blockArray;
+  if (startIndex > -1) {
+    blockArray = [];
+    const keys = [...element.children[startIndex].children].map((x) => x.textContent.toLowerCase());
+    [...element.children].slice(startIndex + 1).forEach((x) => {
+      const values = [...x.children].map((y) => y.textContent);
+      const block = keys.reduce((obj, key, index) => ({ ...obj, [key]: values[index] }), {});
+      blockArray.push(block);
+    });
+  } else {
+    const resp = await fetch(cfg.json);
+    if (!resp.ok) {
+      element.remove();
+      return;
+    }
+    const json = await resp.json();
+    const keys = Object.keys(cfg).filter((k) => !['json'].includes(k));
+    blockArray = json.data.filter(
+      (x) => keys.reduce((a, k) => a && cfg[k] === x[k], true),
+    );
+  }
+  await createBlocks(element, blockArray, cfg);
+}
+
 function readKeyValueSet(element) {
   const cfg = {};
   for (const x of [...element.children]) {
@@ -96,12 +115,12 @@ function readKeyValueSet(element) {
 export default async function init(element) {
   if (element.classList.contains('template') && element.classList.contains('group')) {
     const cfg = readKeyValueSet(element);
-    await processGroup(element, Object.keys(cfg).length + 1, cfg);
+    await processGroup(element, cfg, Object.keys(cfg).length + 1);
     return;
   }
 
   if (element.classList.contains('group')) {
-    await processGroup(element, 0, window.promptCardTemplate);
+    await processGroup(element, window.promptCardTemplate, 0);
     return;
   }
 
@@ -113,6 +132,11 @@ export default async function init(element) {
     return;
   }
 
+  if (element.classList.contains('json')) {
+    await processGroup(element, cfg, -1);
+    return;
+  }
+
   cfg = { ...window.promptCardTemplate, ...cfg };
 
   await createBlock(element, cfg);

test/blocks/prompt-card/mocks/body-json.html

@@ -0,0 +1,29 @@
+<main>
+  <div>
+    <div class="prompt-card json">
+      <div>
+        <div>Json</div>
+        <div>https://www.adobe.com/dc-shared/promptcard.json</div>
+      </div>
+      <div>
+        <div>Page</div>
+        <div>B</div>
+      </div>       
+      <div>
+        <div>Prefix</div>
+        <div>Analyze</div>
+      </div>      
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div>style</div>
+        <div>Four up, xl-spacing</div>
+      </div>
+      <div>
+        <div>background</div>
+        <div>#f8f8f8</div>
+      </div>
+    </div>    
+  </div>
+</main>
+

test/blocks/prompt-card/mocks/promptcards.json

@@ -0,0 +1,14 @@
+{
+  "total": 2,
+  "offset": 0,
+  "limit": 2,
+  "data": [
+    { "page": "A", "prefix": "Ask", "title": "Sum it up", "prompt": "Summarize this document in 3 sentences."},
+    { "page": "A", "prefix": "Ask", "title": "Sum it up", "prompt": "Summarize this document in 3 sentences."},
+    { "page": "A", "prefix": "Ask", "title": "Sum it up", "prompt": "Summarize this document in 3 sentences."},
+    { "page": "B", "prefix": "Analyze", "title": "Sum it up", "prompt": "Summarize this document in 3 sentences."},
+    { "page": "B", "prefix": "Ask", "title": "Sum it up", "prompt": "Summarize this document in 3 sentences."},
+    { "page": "B", "prefix": "Analyze", "title": "Sum it up", "prompt": "Summarize this document in 3 sentences."}
+  ],
+  ":type": "sheet"
+}

test/blocks/prompt-card/prompt-card-group.test.js

@@ -10,7 +10,7 @@ describe('prompt-cards in a section using the group feature', () => {
     await waitForElement('.prompt-blade');
   });
 
-  it('creates a prompt-card block', async () => {
+  it('creates prompt cards', async () => {
     const blades = document.querySelectorAll('.prompt-blade');
     expect([...blades].length).to.equal(6);
   });

test/blocks/prompt-card/prompt-card-json-error.test.js

@@ -0,0 +1,26 @@
+/* eslint-disable compat/compat */
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { delay } from '../../helpers/waitfor.js';
+
+describe('prompt-cards using json feature', () => {
+  before(async () => {
+    sinon.stub(window, 'fetch');
+    const res = new window.Response('Not Found', { status: 404 });
+    window.fetch.returns(Promise.resolve(res));
+    document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body-json.html' });
+    await import('../../../acrobat/scripts/scripts.js');
+    await delay(500);
+  });
+
+  after(() => {
+    sinon.restore();
+  });
+
+  it('shows no prompt card', async () => {
+    const promptcard = document.querySelector('.prompt-card');
+    expect(promptcard).to.not.exist;
+  });
+});

test/blocks/prompt-card/prompt-card-json.test.js

@@ -0,0 +1,27 @@
+/* eslint-disable compat/compat */
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { waitForElement } from '../../helpers/waitfor.js';
+
+describe('prompt-cards using json feature', () => {
+  before(async () => {
+    const promptcards = await readFile({ path: './mocks/promptcards.json' });
+    sinon.stub(window, 'fetch');
+    const res = new window.Response(promptcards, { status: 200 });
+    window.fetch.returns(Promise.resolve(res));
+    document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body-json.html' });
+    await import('../../../acrobat/scripts/scripts.js');
+    await waitForElement('.prompt-blade');
+  });
+
+  after(() => {
+    sinon.restore();
+  });
+
+  it('creates prompt cards', async () => {
+    const blades = document.querySelectorAll('.prompt-blade');
+    expect([...blades].length).to.equal(2);
+  });
+});

test/blocks/prompt-card/prompt-card-section.test.js

@@ -10,7 +10,7 @@ describe('prompt-cards in a section', () => {
     await waitForElement('.prompt-blade');
   });
 
-  it('creates a prompt-card block', async () => {
+  it('creates prompt cards', async () => {
     const blades = document.querySelectorAll('.prompt-blade');
     expect([...blades].length).to.equal(5);
   });

test/blocks/prompt-card/prompt-card-template-group.test.js

@@ -10,7 +10,7 @@ describe('prompt-cards using the template and group features', () => {
     await waitForElement('.prompt-blade');
   });
 
-  it('creates a prompt-card block', async () => {
+  it('creates prompt cards', async () => {
     const blades = document.querySelectorAll('.prompt-blade');
     expect([...blades].length).to.equal(6);
   });

test/blocks/prompt-card/prompt-card-template.test.js

@@ -10,7 +10,7 @@ describe('prompt-cards in a section using a template', () => {
     await waitForElement('.prompt-blade');
   });
 
-  it('creates a prompt-card block', async () => {
+  it('creates prompt cards', async () => {
     const blades = document.querySelectorAll('.prompt-blade');
     expect([...blades].length).to.equal(5);
   });