✨ Add OpenAI block

Also migrate credentials to tRPC

Closes #253

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

@@ -118,7 +118,7 @@ export const WebhookAdvancedConfigForm = ({
         <>
           <HStack justify="space-between">
             <Text>Method:</Text>
-            <DropdownList<HttpMethod>
+            <DropdownList
               currentItem={webhook.method as HttpMethod}
               onItemSelect={handleMethodChange}
               items={Object.values(HttpMethod)}
@@ -130,13 +130,12 @@ export const WebhookAdvancedConfigForm = ({
                 Query params
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel py={4} as={Stack} spacing="6">
+              <AccordionPanel>
                 <TableList<KeyValue>
                   initialItems={webhook.queryParams}
                   onItemsChange={handleQueryParamsChange}
                   Item={QueryParamsInputs}
                   addLabel="Add a param"
-                  debounceTimeout={0}
                 />
               </AccordionPanel>
             </AccordionItem>
@@ -145,13 +144,12 @@ export const WebhookAdvancedConfigForm = ({
                 Headers
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel py={4} as={Stack} spacing="6">
+              <AccordionPanel>
                 <TableList<KeyValue>
                   initialItems={webhook.headers}
                   onItemsChange={handleHeadersChange}
                   Item={HeadersInputs}
                   addLabel="Add a value"
-                  debounceTimeout={0}
                 />
               </AccordionPanel>
             </AccordionItem>
@@ -181,7 +179,7 @@ export const WebhookAdvancedConfigForm = ({
                 Variable values for test
                 <AccordionIcon />
               </AccordionButton>
-              <AccordionPanel py={4} as={Stack} spacing="6">
+              <AccordionPanel>
                 <TableList<VariableForTest>
                   initialItems={
                     options?.variablesForTest ?? { byId: {}, allIds: [] }
@@ -189,7 +187,6 @@ export const WebhookAdvancedConfigForm = ({
                   onItemsChange={handleVariablesChange}
                   Item={VariableForTestInputs}
                   addLabel="Add an entry"
-                  debounceTimeout={0}
                 />
               </AccordionPanel>
             </AccordionItem>
@@ -215,13 +212,12 @@ export const WebhookAdvancedConfigForm = ({
               Save in variables
               <AccordionIcon />
             </AccordionButton>
-            <AccordionPanel py={4} as={Stack} spacing="6">
+            <AccordionPanel>
               <TableList<ResponseVariableMapping>
                 initialItems={options.responseVariableMapping}
                 onItemsChange={handleResponseMappingChange}
                 Item={ResponseMappingInputs}
                 addLabel="Add an entry"
-                debounceTimeout={0}
               />
             </AccordionPanel>
           </AccordionItem>

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/KeyValueInputs.tsx

@@ -24,7 +24,6 @@ export const KeyValueInputs = ({
   onItemChange,
   keyPlaceholder,
   valuePlaceholder,
-  debounceTimeout,
 }: TableListItemProps<KeyValue> & {
   keyPlaceholder?: string
   valuePlaceholder?: string
@@ -44,14 +43,12 @@ export const KeyValueInputs = ({
         defaultValue={item.key ?? ''}
         onChange={handleKeyChange}
         placeholder={keyPlaceholder}
-        debounceTimeout={debounceTimeout}
       />
       <TextInput
         label="Value:"
         defaultValue={item.value ?? ''}
         onChange={handleValueChange}
         placeholder={valuePlaceholder}
-        debounceTimeout={debounceTimeout}
       />
     </Stack>
   )

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/VariableForTestInputs.tsx

@@ -7,7 +7,6 @@ import { VariableForTest, Variable } from 'models'
 export const VariableForTestInputs = ({
   item,
   onItemChange,
-  debounceTimeout,
 }: TableListItemProps<VariableForTest>) => {
   const handleVariableSelect = (variable?: Variable) =>
     onItemChange({ ...item, variableId: variable?.id })
@@ -29,7 +28,6 @@ export const VariableForTestInputs = ({
         label="Test value:"
         defaultValue={item.value ?? ''}
         onChange={handleValueChange}
-        debounceTimeout={debounceTimeout}
       />
     </Stack>
   )

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

@@ -1,14 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { Spinner, Stack } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor'
 import { WebhookOptions, Webhook, WebhookBlock } from 'models'
-import { byId, env } from 'utils'
+import { byId } from 'utils'
 import { TextInput } from '@/components/inputs'
-import { useDebouncedCallback } from 'use-debounce'
 import { WebhookAdvancedConfigForm } from '../WebhookAdvancedConfigForm'
 
-const debounceWebhookTimeout = 2000
-
 type Props = {
   block: WebhookBlock
   onOptionsChange: (options: WebhookOptions) => void
@@ -22,26 +19,13 @@ export const WebhookSettings = ({
   const [localWebhook, _setLocalWebhook] = useState(
     webhooks.find(byId(webhookId))
   )
-  const updateWebhookDebounced = useDebouncedCallback(
-    async (newLocalWebhook) => {
-      await updateWebhook(newLocalWebhook.id, newLocalWebhook)
-    },
-    env('E2E_TEST') === 'true' ? 0 : debounceWebhookTimeout
-  )
 
-  const setLocalWebhook = (newLocalWebhook: Webhook) => {
+  const setLocalWebhook = async (newLocalWebhook: Webhook) => {
     _setLocalWebhook(newLocalWebhook)
-    updateWebhookDebounced(newLocalWebhook)
+    await updateWebhook(newLocalWebhook.id, newLocalWebhook)
   }
 
-  useEffect(
-    () => () => {
-      updateWebhookDebounced.flush()
-    },
-    [updateWebhookDebounced]
-  )
-
-  const handleUrlChange = (url?: string) =>
+  const updateUrl = (url?: string) =>
     localWebhook && setLocalWebhook({ ...localWebhook, url: url ?? null })
 
   if (!localWebhook) return <Spinner />
@@ -51,8 +35,7 @@ export const WebhookSettings = ({
       <TextInput
         placeholder="Paste webhook URL..."
         defaultValue={localWebhook.url ?? ''}
-        onChange={handleUrlChange}
-        debounceTimeout={0}
+        onChange={updateUrl}
       />
       <WebhookAdvancedConfigForm
         blockId={blockId}