✨ Add OpenAI block

Also migrate credentials to tRPC

Closes #253

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}