🐛 Refresh variable list on focus

apps/builder/src/components/inputs/VariableSearchInput.tsx

@@ -162,6 +162,11 @@ export const VariableSearchInput = ({
     return setKeyboardFocusIndex(undefined)
   }
 
+  const openDropdown = () => {
+    if (inputValue === '') setFilteredItems(variables)
+    onOpen()
+  }
+
   return (
     <Flex ref={dropdownRef} w="full">
       <Popover
@@ -177,7 +182,7 @@ export const VariableSearchInput = ({
             ref={inputRef}
             value={inputValue}
             onChange={onInputChange}
-            onFocus={onOpen}
+            onFocus={openDropdown}
             onKeyDown={handleKeyUp}
             placeholder={inputProps.placeholder ?? 'Select a variable'}
             autoComplete="off"

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -1,5 +1,5 @@
 import { Flex, Stack, useColorModeValue } from '@chakra-ui/react'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Plate, PlateProvider, usePlateEditorRef } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from '@/lib/plate'
 import { BaseEditor, BaseSelection, Transforms } from 'slate'
@@ -38,17 +38,8 @@ const TextBubbleEditorContent = ({
     handler: closeEditor,
   })
 
-  useEffect(() => {
+  const computeTargetCoord = useCallback(() => {
-    if (!isVariableDropdownOpen) return
+    if (rememberedSelection.current) return { top: 0, left: 0 }
-    const el = varDropdownRef.current
-    if (!el) return
-    const { top, left } = computeTargetCoord()
-    el.style.top = `${top}px`
-    el.style.left = `${left}px`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isVariableDropdownOpen])
-
-  const computeTargetCoord = () => {
     const selection = window.getSelection()
     const relativeParent = textEditorRef.current
     if (!selection || !relativeParent) return { top: 0, left: 0 }
@@ -59,7 +50,17 @@ const TextBubbleEditorContent = ({
       top: selectionBoundingRect.bottom - relativeRect.top,
       left: selectionBoundingRect.left - relativeRect.left,
     }
-  }
+  }, [])
+
+  useEffect(() => {
+    if (!isVariableDropdownOpen) return
+    const el = varDropdownRef.current
+    if (!el) return
+    const { top, left } = computeTargetCoord()
+    if (top === 0 && left === 0) return
+    el.style.top = `${top}px`
+    el.style.left = `${left}px`
+  }, [computeTargetCoord, isVariableDropdownOpen])
 
   const handleVariableSelected = (variable?: Variable) => {
     setIsVariableDropdownOpen(false)
@@ -110,6 +111,7 @@ const TextBubbleEditorContent = ({
           style: editorStyle(useColorModeValue('white', colors.gray[850])),
           autoFocus: true,
           onFocus: () => {
+            rememberedSelection.current = null
             if (!isFirstFocus) return
             if (editor.children.length === 0) return
             selectEditor(editor, {

apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ChatCompletionMessageItem.tsx

@@ -65,16 +65,16 @@ export const ChatCompletionMessageItem = ({ item, onItemChange }: Props) => {
       />
       {item.role === 'Messages sequence ✨' ? (
         <>
-          <VariableSearchInput
-            initialVariableId={item.content?.assistantMessagesVariableId}
-            onSelectVariable={changeAssistantVariableId}
-            placeholder="Assistant messages variable"
-          />
           <VariableSearchInput
             initialVariableId={item.content?.userMessagesVariableId}
             onSelectVariable={changeUserVariableId}
             placeholder="User messages variable"
           />
+          <VariableSearchInput
+            initialVariableId={item.content?.assistantMessagesVariableId}
+            onSelectVariable={changeAssistantVariableId}
+            placeholder="Assistant messages variable"
+          />
         </>
       ) : (
         <Textarea

apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/OpenAIChatCompletionSettings.tsx

@@ -88,7 +88,7 @@ export const OpenAIChatCompletionSettings = ({
             <AccordionIcon />
           </AccordionButton>
 
-          <AccordionPanel>
+          <AccordionPanel pt="4">
             <TableList
               initialItems={options.messages}
               Item={ChatCompletionMessageItem}
@@ -125,7 +125,7 @@ export const OpenAIChatCompletionSettings = ({
             <AccordionIcon />
           </AccordionButton>
 
-          <AccordionPanel>
+          <AccordionPanel pt="4">
             <TableList
               initialItems={options.responseMapping}
               Item={ChatCompletionResponseItem}

apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx

@@ -127,7 +127,7 @@ export const WebhookAdvancedConfigForm = ({
                 Query params
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel>
+              <AccordionPanel pt="4">
                 <TableList<KeyValue>
                   initialItems={webhook.queryParams}
                   onItemsChange={handleQueryParamsChange}
@@ -141,7 +141,7 @@ export const WebhookAdvancedConfigForm = ({
                 Headers
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel>
+              <AccordionPanel pt="4">
                 <TableList<KeyValue>
                   initialItems={webhook.headers}
                   onItemsChange={handleHeadersChange}
@@ -176,7 +176,7 @@ export const WebhookAdvancedConfigForm = ({
                 Variable values for test
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel>
+              <AccordionPanel pt="4">
                 <TableList<VariableForTest>
                   initialItems={
                     options?.variablesForTest ?? { byId: {}, allIds: [] }
@@ -208,7 +208,7 @@ export const WebhookAdvancedConfigForm = ({
             Save in variables
             <AccordionIcon />
           </AccordionButton>
-          <AccordionPanel>
+          <AccordionPanel pt="4">
             <TableList<ResponseVariableMapping>
               initialItems={options.responseVariableMapping}
               onItemsChange={handleResponseMappingChange}