Merge pull request #14665 from Budibase/budi-8664-cron-helper-ai-feature

Budi 8664 cron helper ai feature

packages/builder/assets/MagicWand.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let width
+  export let height
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 13 12"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9.4179 4.13222C9.4179 3.73121 9.26166 3.35428 8.97913 3.07175C8.41342 2.50538 7.4239 2.50408 6.85753 3.07175L5.64342 4.28586C5.6291 4.30018 5.61543 4.3158 5.60305 4.33143C5.58678 4.3438 5.5718 4.35747 5.55683 4.37244L0.491426 9.43785C0.208245 9.72103 0.052002 10.098 0.052002 10.4983C0.052002 10.8987 0.208245 11.2756 0.491426 11.5588C0.774607 11.842 1.15153 11.9982 1.5519 11.9982C1.95227 11.9982 2.32919 11.842 2.61238 11.5588L8.97848 5.1927C9.26166 4.90952 9.4179 4.53259 9.4179 4.13222ZM1.90539 10.8518C1.7166 11.0406 1.3872 11.0406 1.1984 10.8518C1.10401 10.7574 1.05193 10.6318 1.05193 10.4983C1.05193 10.3649 1.104 10.2392 1.1984 10.1448L5.99821 5.34503L6.70845 6.04875L1.90539 10.8518ZM8.2715 4.48571L7.41544 5.34178L6.7052 4.63805L7.56452 3.77873C7.7533 3.58995 8.08271 3.58929 8.2715 3.77939C8.36589 3.87313 8.41798 3.99877 8.41798 4.13223C8.41798 4.26569 8.3659 4.39132 8.2715 4.48571Z"
+    fill="#C8C8C8"
+  />
+  <path
+    d="M11.8552 6.55146L11.0144 6.21913L10.879 5.32449C10.8356 5.03919 10.3737 4.98776 10.2686 5.255L9.93606 6.09642L9.04143 6.23085C8.89951 6.25216 8.78884 6.36658 8.77257 6.50947C8.75629 6.65253 8.83783 6.78826 8.97193 6.84148L9.81335 7.17464L9.94794 8.06862C9.9691 8.21053 10.0835 8.32121 10.2266 8.33748C10.3695 8.35375 10.5052 8.27221 10.5586 8.13811L10.8914 7.29751L11.7855 7.1621C11.9283 7.1403 12.0381 7.02637 12.0544 6.88348C12.0707 6.74058 11.9887 6.60403 11.8552 6.55146Z"
+    fill="#F9634C"
+  />
+  <path
+    d="M8.94215 1.76145L9.78356 2.0946L9.91815 2.9885C9.93931 3.13049 10.0539 3.24117 10.1968 3.25744C10.3398 3.27371 10.4756 3.19218 10.5288 3.05807L10.8618 2.21739L11.7559 2.08207C11.8985 2.06034 12.0085 1.94633 12.0248 1.80344C12.0411 1.66054 11.959 1.524 11.8254 1.47143L10.9847 1.13909L10.8494 0.244456C10.806 -0.0409246 10.3439 -0.0922745 10.2388 0.174881L9.90643 1.0163L9.0118 1.15089C8.86972 1.17213 8.75905 1.28654 8.74278 1.42952C8.72651 1.57249 8.80804 1.70823 8.94215 1.76145Z"
+    fill="#8488FD"
+  />
+  <path
+    d="M3.2379 2.46066L3.92063 2.73091L4.02984 3.45637C4.04709 3.57151 4.14002 3.66135 4.25606 3.67453C4.37194 3.6878 4.48212 3.62163 4.52541 3.51276L4.79557 2.83059L5.52094 2.72074C5.63682 2.70316 5.72601 2.61072 5.73936 2.49468C5.75254 2.37864 5.68597 2.26797 5.57758 2.22533L4.89533 1.95565L4.78548 1.22963C4.75016 0.998038 4.37535 0.956375 4.29007 1.17315L4.0204 1.85597L3.29437 1.96517C3.17915 1.98235 3.08931 2.07527 3.07613 2.19131C3.06294 2.30727 3.12902 2.41737 3.2379 2.46066Z"
+    fill="#F7D804"
+  />
+</svg>

packages/builder/package.json

@@ -67,6 +67,7 @@
     "@spectrum-css/vars": "^3.0.1",
     "@zerodevx/svelte-json-view": "^1.0.7",
     "codemirror": "^5.65.16",
+    "cron-parser": "^4.9.0",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -1050,7 +1050,7 @@
             {:else if value.customType === "cron"}
               <CronBuilder
                 on:change={e => onChange({ [key]: e.detail })}
-                value={inputData[key]}
+                cronExpression={inputData[key]}
               />
             {:else if value.customType === "automationFields"}
               <AutomationSelector

packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte

@@ -1,41 +1,70 @@
 <script>
-  import { Button, Select, Input, Label } from "@budibase/bbui"
+  import {
+    Select,
+    InlineAlert,
+    Input,
+    Label,
+    Layout,
+    notifications,
+  } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { flags } from "stores/builder"
+  import { licensing } from "stores/portal"
+  import { API } from "api"
+  import MagicWand from "../../../../assets/MagicWand.svelte"
+
   import { helpers, REBOOT_CRON } from "@budibase/shared-core"
 
   const dispatch = createEventDispatcher()
 
-  export let value
+  export let cronExpression
+
   let error
+  let nextExecutions
 
+  // AI prompt
+  let aiCronPrompt = ""
+  let loadingAICronExpression = false
+
+  $: aiEnabled =
+    $licensing.customAIConfigsEnabled || $licensing.budibaseAIEnabled
   $: {
-    const exists = CRON_EXPRESSIONS.some(cron => cron.value === value)
-    const customIndex = CRON_EXPRESSIONS.findIndex(
-      cron => cron.label === "Custom"
-    )
-
-    if (!exists && customIndex === -1) {
-      CRON_EXPRESSIONS[0] = { label: "Custom", value: value }
-    } else if (exists && customIndex !== -1) {
-      CRON_EXPRESSIONS.splice(customIndex, 1)
+    if (cronExpression) {
+      try {
+        nextExecutions = helpers.cron
+          .getNextExecutionDates(cronExpression)
+          .join("\n")
+      } catch (err) {
+        nextExecutions = null
+      }
     }
   }
 
   const onChange = e => {
-    if (value !== REBOOT_CRON) {
+    if (e.detail !== REBOOT_CRON) {
       error = helpers.cron.validate(e.detail).err
     }
-    if (e.detail === value || error) {
+    if (e.detail === cronExpression || error) {
       return
     }
 
-    value = e.detail
+    cronExpression = e.detail
     dispatch("change", e.detail)
   }
 
+  const updatePreset = e => {
+    aiCronPrompt = ""
+    onChange(e)
+  }
+
+  const updateCronExpression = e => {
+    aiCronPrompt = ""
+    cronExpression = null
+    nextExecutions = null
+    onChange(e)
+  }
+
   let touched = false
-  let presets = false
 
   const CRON_EXPRESSIONS = [
     {
@@ -64,45 +93,130 @@
       })
     }
   })
+
+  async function generateAICronExpression() {
+    loadingAICronExpression = true
+    try {
+      const response = await API.generateCronExpression({
+        prompt: aiCronPrompt,
+      })
+      cronExpression = response.message
+      dispatch("change", response.message)
+    } catch (err) {
+      notifications.error(err.message)
+    } finally {
+      loadingAICronExpression = false
+    }
+  }
 </script>
 
-<div class="block-field">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<Layout noPadding gap="S">
+  <Select
+    on:change={updatePreset}
+    value={cronExpression || "Custom"}
+    secondary
+    extraThin
+    label="Use a Preset (Optional)"
+    options={CRON_EXPRESSIONS}
+  />
+  {#if aiEnabled}
+    <div class="cron-ai-generator">
+      <Input
+        bind:value={aiCronPrompt}
+        label="Generate Cron Expression with AI"
+        size="S"
+        placeholder="Run every hour between 1pm to 4pm everyday of the week"
+      />
+      {#if aiCronPrompt}
+        <div
+          class="icon"
+          class:pulsing-text={loadingAICronExpression}
+          on:click={generateAICronExpression}
+        >
+          <MagicWand height="17" width="17" />
+        </div>
+      {/if}
+    </div>
+  {/if}
   <Input
+    label="Cron Expression"
     {error}
-    on:change={onChange}
-    {value}
+    on:change={updateCronExpression}
+    value={cronExpression}
     on:blur={() => (touched = true)}
     updateOnChange={false}
   />
-  {#if touched && !value}
+  {#if touched && !cronExpression}
     <Label><div class="error">Please specify a CRON expression</div></Label>
   {/if}
-  <div class="presets">
-    <Button on:click={() => (presets = !presets)}
-      >{presets ? "Hide" : "Show"} Presets</Button
-    >
-    {#if presets}
-      <Select
-        on:change={onChange}
-        value={value || "Custom"}
-        secondary
-        extraThin
-        label="Presets"
-        options={CRON_EXPRESSIONS}
-      />
-    {/if}
-  </div>
-</div>
+  {#if nextExecutions}
+    <InlineAlert
+      type="info"
+      header="Next Executions"
+      message={nextExecutions}
+    />
+  {/if}
+</Layout>
 
 <style>
-  .presets {
-    margin-top: var(--spacing-m);
+  .cron-ai-generator {
+    flex: 1;
+    position: relative;
   }
-  .block-field {
-    padding-top: var(--spacing-s);
+  .icon {
+    right: 1px;
+    bottom: 1px;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
   }
+
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
+  }
+
   .error {
     padding-top: var(--spacing-xs);
     color: var(--spectrum-global-color-red-500);
   }
+
+  .pulsing-text {
+    font-size: 24px;
+    font-weight: bold;
+    animation: pulse 1.5s infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 0.3;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.05);
+    }
+    100% {
+      opacity: 0.3;
+      transform: scale(1);
+    }
+  }
 </style>

packages/frontend-core/src/api/ai.js

@@ -0,0 +1,11 @@
+export const buildAIEndpoints = API => ({
+  /**
+   * Generates a cron expression from a prompt
+   */
+  generateCronExpression: async ({ prompt }) => {
+    return await API.post({
+      url: "/api/ai/cron",
+      body: { prompt },
+    })
+  },
+})

packages/frontend-core/src/api/index.js

@@ -2,6 +2,7 @@ import { Helpers } from "@budibase/bbui"
 import { Header } from "@budibase/shared-core"
 import { ApiVersion } from "../constants"
 import { buildAnalyticsEndpoints } from "./analytics"
+import { buildAIEndpoints } from "./ai"
 import { buildAppEndpoints } from "./app"
 import { buildAttachmentEndpoints } from "./attachments"
 import { buildAuthEndpoints } from "./auth"
@@ -268,6 +269,7 @@ export const createAPIClient = config => {
   // Attach all endpoints
   return {
     ...API,
+    ...buildAIEndpoints(API),
     ...buildAnalyticsEndpoints(API),
     ...buildAppEndpoints(API),
     ...buildAttachmentEndpoints(API),

packages/server/src/api/routes/index.ts

@@ -33,6 +33,7 @@ import rowActionRoutes from "./rowAction"
 export { default as staticRoutes } from "./static"
 export { default as publicRoutes } from "./public"
 
+const aiRoutes = pro.ai
 const appBackupRoutes = pro.appBackups
 const environmentVariableRoutes = pro.environmentVariables
 
@@ -67,6 +68,7 @@ export const mainRoutes: Router[] = [
   debugRoutes,
   environmentVariableRoutes,
   rowActionRoutes,
+  aiRoutes,
   // these need to be handled last as they still use /api/:tableId
   // this could be breaking as koa may recognise other routes as this
   tableRoutes,

packages/shared-core/src/helpers/cron.ts

@@ -1,4 +1,5 @@
 import cronValidate from "cron-validate"
+import cronParser from "cron-parser"
 
 const INPUT_CRON_START = "(Input cron: "
 const ERROR_SWAPS = {
@@ -30,6 +31,19 @@ function improveErrors(errors: string[]): string[] {
   return finalErrors
 }
 
+export function getNextExecutionDates(
+  cronExpression: string,
+  limit: number = 4
+): string[] {
+  const parsed = cronParser.parseExpression(cronExpression)
+  const nextRuns = []
+  for (let i = 0; i < limit; i++) {
+    nextRuns.push(parsed.next().toString())
+  }
+
+  return nextRuns
+}
+
 export function validate(
   cronExpression: string
 ): { valid: false; err: string[] } | { valid: true } {