feat: add parameter prompt block

src/background/workflowEngine/blocksHandler/handlerParameterPrompt.js

@@ -0,0 +1,80 @@
+import browser from 'webextension-polyfill';
+import { sleep } from '@/utils/helper';
+
+function getInputtedParams({ execId, blockId }, ms) {
+  return new Promise((resolve) => {
+    let timeout = null;
+    const key = `params-prompt:${execId}__${blockId}`;
+
+    const storageListener = (event) => {
+      if (!event[key]) return;
+
+      clearTimeout(timeout);
+      browser.storage.onChanged.removeListener(storageListener);
+
+      const { newValue } = event[key];
+      resolve(newValue);
+    };
+
+    timeout = setTimeout(() => {
+      browser.storage.onChanged.removeListener(storageListener);
+      resolve({});
+    }, ms || 10000);
+
+    browser.storage.onChanged.addListener(storageListener);
+  });
+}
+
+export default async function ({ data, id }) {
+  const paramURL = browser.runtime.getURL('/params.html');
+  let tab = (await browser.tabs.query({})).find((item) =>
+    item.url.includes(paramURL)
+  );
+
+  if (!tab) {
+    const { tabs } = await browser.windows.create({
+      type: 'popup',
+      width: 480,
+      height: 600,
+      url: browser.runtime.getURL('/params.html'),
+    });
+    [tab] = tabs;
+    await sleep(1000);
+  } else {
+    await browser.tabs.update(tab.id, {
+      active: true,
+    });
+    await browser.windows.update(tab.windowId, { focused: true });
+  }
+
+  const timeout = data.timeout || 20000;
+
+  await browser.tabs.sendMessage(tab.id, {
+    name: 'workflow:params-block',
+    data: {
+      blockId: id,
+      execId: this.engine.id,
+      params: data.parameters,
+      timeout: Date.now() + timeout,
+      name: this.engine.workflow.name,
+      icon: this.engine.workflow.icon,
+      description: this.engine.workflow.description,
+    },
+  });
+
+  const result = await getInputtedParams(
+    {
+      blockId: id,
+      execId: this.engine.id,
+    },
+    timeout
+  );
+  Object.entries(result).forEach(([varName, varValue]) => {
+    this.setVariable(varName, varValue);
+  });
+
+  return {
+    data: '',
+    nextBlockId: this.getBlockConnections(id),
+  };
+}

src/components/newtab/workflow/edit/EditParameterPrompt.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <ui-textarea
+      :model-value="data.description"
+      :placeholder="t('common.description')"
+      class="w-full"
+      @change="updateData({ description: $event })"
+    />
+    <ui-input
+      :model-value="data.timeout"
+      type="number"
+      label="Timeout (millisecond)"
+      class="w-full mt-2"
+      @change="updateData({ timeout: +$event })"
+    />
+    <ui-button
+      class="w-full mt-4"
+      variant="accent"
+      @click="showModal = !showModal"
+    >
+      Insert Parameters
+    </ui-button>
+    <ui-modal v-model="showModal" title="Parameters" content-class="max-w-4xl">
+      <edit-workflow-parameters
+        :data="data.parameters"
+        @update="updateData({ parameters: $event })"
+      />
+    </ui-modal>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import EditWorkflowParameters from './EditWorkflowParameters.vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+const { t } = useI18n();
+
+const showModal = ref(false);
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+</script>

src/params/App.vue

@@ -43,6 +43,9 @@
             </p>
           </div>
         </template>
+        <p v-if="workflow.type === 'block'" class="px-4 pb-2">
+          By Parameter Prompt block
+        </p>
         <div class="px-4 pb-4">
           <ul class="space-y-4 divide-y">
             <li v-for="(param, paramIdx) in workflow.params" :key="paramIdx">
@@ -78,7 +81,18 @@
             <ui-button class="mr-4" @click="deleteWorkflow(index)">
               Cancel
             </ui-button>
-            <ui-button variant="accent" @click="runWorkflow(index, workflow)">
+            <ui-button
+              v-if="workflow.type === 'block'"
+              variant="accent"
+              @click="continueWorkflow(index, workflow)"
+            >
+              Continue
+            </ui-button>
+            <ui-button
+              v-else
+              variant="accent"
+              @click="runWorkflow(index, workflow)"
+            >
               <v-remixicon name="riPlayLine" class="mr-2 -ml-1" />
               Run
             </ui-button>
@@ -177,14 +191,14 @@ async function addWorkflow(workflowId) {
     console.error(error);
   }
 }
-function runWorkflow(index, { data, params }) {
+function getParamsValues(params) {
   const getParamVal = {
     string: (str) => str,
     number: (num) => (Number.isNaN(+num) ? 0 : +num),
     default: (value) => value,
   };
 
-  const variables = params.reduce((acc, param) => {
+  return params.reduce((acc, param) => {
     const valueFunc =
       getParamVal[param.type] ||
       paramsList[param.type]?.getValue ||
@@ -194,6 +208,9 @@ function runWorkflow(index, { data, params }) {
 
     return acc;
   }, {});
+}
+function runWorkflow(index, { data, params }) {
+  const variables = getParamsValues(params);
   const payload = {
     name: 'background--workflow:execute',
     data: {
@@ -212,11 +229,36 @@ function runWorkflow(index, { data, params }) {
       deleteWorkflow(index);
     });
 }
+function continueWorkflow(index, { data, params }) {
+  if (Date.now() > data.timeout) {
+    deleteWorkflow(index);
+    return;
+  }
+
+  const key = `params-prompt:${data.execId}__${data.blockId}`;
+  browser.storage.local
+    .set({
+      [key]: getParamsValues(params),
+    })
+    .then(() => {
+      deleteWorkflow(index);
+    });
+}
 
 browser.runtime.onMessage.addListener(({ name, data }) => {
-  if (name !== 'workflow:params') return;
+  if (name === 'workflow:params') {
+    addWorkflow(data);
+  } else if (name === 'workflow:params-block') {
+    const params = [...data.params];
+    delete data.params;
 
-  addWorkflow(data);
+    workflows.value.push({
+      data,
+      params,
+      type: 'block',
+      addedDate: Date.now(),
+    });
+  }
 });
 
 onMounted(async () => {

src/utils/shared.js

@@ -1351,6 +1351,24 @@ export const tasks = {
       workflowsToStop: [],
     },
   },
+  'parameter-prompt': {
+    name: 'Parameter prompt',
+    description: '',
+    icon: 'riCommandLine',
+    component: 'BlockBasic',
+    category: 'general',
+    editComponent: 'EditParameterPrompt',
+    inputs: 1,
+    outputs: 1,
+    maxConnection: 1,
+    allowedInputs: true,
+    data: {
+      disableBlock: false,
+      description: '',
+      timeout: 20000,
+      parameters: [],
+    },
+  },
 };
 
 export const categories = {