From e8eaac45fab2d4974038a97fa46d35c362ecfd9f Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Sat, 2 Sep 2023 14:04:09 +0200
Subject: [PATCH] :ambulance: (openai) Fix create credentials modal not
 displaying

---
 .../integrations/openai/api/listModels.ts     | 20 ++++++++++---
 .../openai/components/OpenAISettings.tsx      | 29 ++++++++++---------
 .../createChatCompletion/ModelsDropdown.tsx   |  8 +++++
 3 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/apps/builder/src/features/blocks/integrations/openai/api/listModels.ts b/apps/builder/src/features/blocks/integrations/openai/api/listModels.ts
index d5600919e..134d9157f 100644
--- a/apps/builder/src/features/blocks/integrations/openai/api/listModels.ts
+++ b/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
-          .sort((a, b) => b.created - a.created)
-          .map((model) => model.id),
+        models:
+          modelsData.data
+            .sort((a, b) => b.created - a.created)
+            .map((model) => model.id) ?? [],
       }
     }
   )
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx b/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx
index d5b3320ba..58dd60823 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx
+++ b/apps/builder/src/features/blocks/integrations/openai/components/OpenAISettings.tsx
@@ -75,14 +75,21 @@ export const OpenAISettings = ({
   return (
     <Stack>
       {workspace && (
-        <CredentialsDropdown
-          type="openai"
-          workspaceId={workspace.id}
-          currentCredentialsId={options?.credentialsId}
-          onCredentialsSelect={updateCredentialsId}
-          onCreateNewClick={onOpen}
-          credentialsName="OpenAI account"
-        />
+        <>
+          <CredentialsDropdown
+            type="openai"
+            workspaceId={workspace.id}
+            currentCredentialsId={options?.credentialsId}
+            onCredentialsSelect={updateCredentialsId}
+            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)}
diff --git a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ModelsDropdown.tsx b/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ModelsDropdown.tsx
index cc4e97d20..8cfef9ec4 100644
--- a/apps/builder/src/features/blocks/integrations/openai/components/createChatCompletion/ModelsDropdown.tsx
+++ b/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',
+        })
+      },
     }
   )