🚑 (openai) Fix create credentials modal not displaying

apps/builder/src/features/blocks/integrations/openai/api/listModels.ts

@@ -123,12 +123,24 @@ export const listModels = authenticatedProcedure
 
       const response = await openai.listModels()
 
-      const modelsData = (await response.json()) as ResponseTypes['listModels']
+      const modelsData = (await response.json()) as
+        | ResponseTypes['listModels']
+        | {
+            error: unknown
+          }
+
+      if ('error' in modelsData)
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'Could not list models',
+          cause: modelsData.error,
+        })
 
       return {
-        models: modelsData.data
+        models:
-          .sort((a, b) => b.created - a.created)
+          modelsData.data
-          .map((model) => model.id),
+            .sort((a, b) => b.created - a.created)
+            .map((model) => model.id) ?? [],
       }
     }
   )

apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx

@@ -75,14 +75,21 @@ export const OpenAISettings = ({
   return (
     <Stack>
       {workspace && (
-        <CredentialsDropdown
+        <>
-          type="openai"
+          <CredentialsDropdown
-          workspaceId={workspace.id}
+            type="openai"
-          currentCredentialsId={options?.credentialsId}
+            workspaceId={workspace.id}
-          onCredentialsSelect={updateCredentialsId}
+            currentCredentialsId={options?.credentialsId}
-          onCreateNewClick={onOpen}
+            onCredentialsSelect={updateCredentialsId}
-          credentialsName="OpenAI account"
+            onCreateNewClick={onOpen}
-        />
+            credentialsName="OpenAI account"
+          />
+          <OpenAICredentialsModal
+            isOpen={isOpen}
+            onClose={onClose}
+            onNewCredentials={updateCredentialsId}
+          />
+        </>
       )}
       {options.credentialsId && (
         <>
@@ -110,11 +117,7 @@ export const OpenAISettings = ({
               </AccordionPanel>
             </AccordionItem>
           </Accordion>
-          <OpenAICredentialsModal
+
-            isOpen={isOpen}
-            onClose={onClose}
-            onNewCredentials={updateCredentialsId}
-          />
           <DropdownList
             currentItem={options.task}
             items={openAITasks.slice(0, -1)}

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

@@ -1,6 +1,7 @@
 import { Select } from '@/components/inputs/Select'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
 
 type Props = {
@@ -18,6 +19,7 @@ export const ModelsDropdown = ({
 }: Props) => {
   const { typebot } = useTypebot()
   const { workspace } = useWorkspace()
+  const { showToast } = useToast()
 
   const { data } = trpc.openAI.listModels.useQuery(
     {
@@ -28,6 +30,12 @@ export const ModelsDropdown = ({
     },
     {
       enabled: !!typebot && !!workspace,
+      onError: (error) => {
+        showToast({
+          description: error.message,
+          status: 'error',
+        })
+      },
     }
   )