wip

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

@@ -1059,6 +1059,7 @@
                         inputData[key] = e.detail
                       }}
                       completions={stepCompletions}
+                      {bindings}
                       mode={codeMode}
                       autocompleteEnabled={codeMode !== EditorModes.JS}
                       bind:getCaretPosition

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

@@ -152,6 +152,7 @@
     <div class="field-wrap json-field">
       <CodeEditor
         value={readableValue}
+        {bindings}
         on:blur={e => {
           onChange({
             row: {

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -59,7 +59,11 @@
   import { javascript } from "@codemirror/lang-javascript"
   import { EditorModes } from "./"
   import { themeStore } from "@/stores/portal"
-  import { FeatureFlag, type EditorMode } from "@budibase/types"
+  import {
+    type EnrichedBinding,
+    FeatureFlag,
+    type EditorMode,
+  } from "@budibase/types"
   import { tooltips } from "@codemirror/view"
   import type { BindingCompletion, CodeValidator } from "@/types"
   import { validateHbsTemplate } from "./validator/hbs"
@@ -80,6 +84,7 @@
   export let readonly = false
   export let readonlyLineNumbers = false
   export let dropdown = DropdownPosition.Relative
+  export let bindings: EnrichedBinding[] = []
 
   const dispatch = createEventDispatcher()
 
@@ -100,7 +105,8 @@
   let promptInput: TextArea
   $: aiGenEnabled =
     featureFlag.isEnabled(FeatureFlag.AI_JS_GENERATION) &&
-    mode.name === "javascript"
+    mode.name === "javascript" &&
+    !readonly
 
   $: {
     if (autofocus && isEditorInitialised) {
@@ -165,7 +171,7 @@
     popoverWidth = 30
     let code = ""
     try {
-      const resp = await API.generateJs({ prompt })
+      const resp = await API.generateJs({ prompt, bindings })
       code = resp.code
     } catch (e) {
       console.error(e)
@@ -189,6 +195,7 @@
     suggestedCode = null
     previousContents = null
     resetPopover()
+    dispatch("change", editor.state.doc.toString())
   }
 
   const rejectSuggestion = () => {
@@ -513,6 +520,11 @@
     bind:this={popover}
     minWidth={popoverWidth}
     anchor={popoverAnchor}
+    on:close={() => {
+      if (suggestedCode) {
+        acceptSuggestion()
+      }
+    }}
     align="left-outside"
   >
     {#if promptLoading}

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -359,6 +359,7 @@
               bind:getCaretPosition
               bind:insertAtPos
               {completions}
+              {bindings}
               {validations}
               autofocus={autofocusEditor}
               placeholder={placeholder ||
@@ -372,6 +373,7 @@
               value={jsValue ? decodeJSBinding(jsValue) : ""}
               on:change={onChangeJSValue}
               {completions}
+              {bindings}
               {validations}
               mode={EditorModes.JS}
               bind:getCaretPosition

packages/builder/src/components/common/bindings/CodeEditorField.svelte

@@ -144,6 +144,7 @@
         on:change={onChangeJSValue}
         on:blur
         completions={jsCompletions}
+        {bindings}
         mode={EditorModes.JS}
         bind:getCaretPosition
         bind:insertAtPos

packages/pro

@@ -1 +1 @@
-Subproject commit a44aec4935713412feaaddb50b5075a5e748c575
+Subproject commit 0a71c9147ab8ac184013e6ce197b689e160ff663

packages/types/src/api/web/ai.ts

@@ -1,6 +1,10 @@
+import { EnrichedBinding } from "../../ui"
+
 export interface GenerateJsRequest {
   prompt: string
+  bindings?: EnrichedBinding[]
 }
+
 export interface GenerateJsResponse {
   code: string
 }