feat(opentrons-ai-client): add process env to ai-client for prod (#15329

)

* feat(opentrons-ai-client): add process env to ai-client for prod

.github/workflows/opentrons-ai-client-staging-continuous-deploy.yaml

@@ -53,12 +53,12 @@ jobs:
           make setup-js
       - name: 'build'
         run: |
-          make -C opentrons-ai-client build
+          make -C opentrons-ai-client build-staging
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:
           role-to-assume: ${{ secrets.STAGING_AI_ROLE_ARN }}
           aws-region: ${{ secrets.STAGING_AI_REGION }}
       - name: 'deploy to staging'
         run: |
-          make -C opentrons-ai-client staging-deploy
+          make -C opentrons-ai-client staging-deploy

opentrons-ai-client/Makefile

@@ -40,6 +40,13 @@ build:
 	vite build
 	git rev-parse HEAD > dist/.commit
 
+
+.PHONY: build-staging
+build: export NODE_ENV := staging
+build:
+	vite build
+	git rev-parse HEAD > dist/.commit
+
 # development
 #####################################################################
 

opentrons-ai-client/src/main.tsx

@@ -6,15 +6,23 @@ import { Auth0Provider } from '@auth0/auth0-react'
 import { GlobalStyle } from './atoms/GlobalStyle'
 import { i18n } from './i18n'
 import { App } from './App'
-import { AUTH0_DOMAIN, AUTH0_CLIENT_ID } from './resources/constants'
+import {
+  AUTH0_DOMAIN,
+  PROD_AUTH0_CLIENT_ID,
+  STAGING_AUTH0_CLIENT_ID,
+} from './resources/constants'
 
 const rootElement = document.getElementById('root')
 if (rootElement != null) {
   ReactDOM.createRoot(rootElement).render(
     <React.StrictMode>
       <Auth0Provider
         domain={AUTH0_DOMAIN}
-        clientId={AUTH0_CLIENT_ID}
+        clientId={
+          process.env.NODE_ENV === 'production'
+            ? PROD_AUTH0_CLIENT_ID
+            : STAGING_AUTH0_CLIENT_ID
+        }
         authorizationParams={{
           redirect_uri: window.location.origin,
         }}

opentrons-ai-client/src/molecules/InputPrompt/index.tsx

@@ -18,7 +18,7 @@ import { SendButton } from '../../atoms/SendButton'
 import { chatDataAtom, chatHistoryAtom, tokenAtom } from '../../resources/atoms'
 import { useApiCall } from '../../resources/hooks'
 import { calcTextAreaHeight } from '../../resources/utils/utils'
-import { END_POINT } from '../../resources/constants'
+import { STAGING_END_POINT, PROD_END_POINT } from '../../resources/constants'
 
 import type { AxiosRequestConfig } from 'axios'
 import type { ChatData } from '../../resources/types'
@@ -48,7 +48,10 @@ export function InputPrompt(): JSX.Element {
       }
 
       const config = {
-        url: END_POINT,
+        url:
+          process.env.NODE_ENV === 'production'
+            ? PROD_END_POINT
+            : STAGING_END_POINT,
         method: 'POST',
         headers,
         data: {

opentrons-ai-client/src/resources/constants.ts

@@ -1,7 +1,15 @@
 // ToDo (kk:05/29/2024) this should be switched by env var
-export const END_POINT = 'https://staging.opentrons.ai/api/chat/completion'
+export const STAGING_END_POINT =
+  'https://staging.opentrons.ai/api/chat/completion'
+export const PROD_END_POINT = 'https://opentrons.ai/api/chat/completion'
 
-// for auth0
+// auth0 domain
 export const AUTH0_DOMAIN = 'identity.auth.opentrons.com'
-export const AUTH0_CLIENT_ID = 'AV3GDND34Q9CHx9yjZSI85k8ZuvzWH4a'
-export const AUTH0_AUDIENCE = 'https://staging.opentrons.ai/api'
+
+// auth0 for staging
+export const STAGING_AUTH0_CLIENT_ID = 'AV3GDND34Q9CHx9yjZSI85k8ZuvzWH4a'
+export const STAGING_AUTH0_AUDIENCE = 'https://staging.opentrons.ai/api'
+
+// auth0 for production
+export const PROD_AUTH0_CLIENT_ID = 'b5oTRmfMY94tjYL8GyUaVYHhMTC28X8o'
+export const PROD_AUTH0_AUDIENCE = 'https://opentrons.ai/api'

opentrons-ai-client/src/resources/hooks/__tests__/useGetAccessToken.test.ts

@@ -2,7 +2,7 @@ import { describe, it, vi, expect } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { useAuth0 } from '@auth0/auth0-react'
 import { useGetAccessToken } from '../useGetAccessToken'
-import { AUTH0_AUDIENCE } from '../../constants'
+import { STAGING_AUTH0_AUDIENCE } from '../../constants'
 import type { Mock } from 'vitest'
 
 vi.mock('@auth0/auth0-react')
@@ -22,7 +22,7 @@ describe('useGetAccessToken', () => {
 
     expect(mockGetAccessTokenSilently).toHaveBeenCalledWith({
       authorizationParams: {
-        audience: AUTH0_AUDIENCE,
+        audience: STAGING_AUTH0_AUDIENCE,
       },
     })
     expect(await accessToken).toBe('mockAccessToken')
@@ -41,7 +41,7 @@ describe('useGetAccessToken', () => {
 
     expect(mockGetAccessTokenSilently).toHaveBeenCalledWith({
       authorizationParams: {
-        audience: AUTH0_AUDIENCE,
+        audience: STAGING_AUTH0_AUDIENCE,
       },
     })
     await expect(accessToken).rejects.toThrow('mockError')

opentrons-ai-client/src/resources/hooks/useGetAccessToken.ts

@@ -1,18 +1,22 @@
 import { useAuth0 } from '@auth0/auth0-react'
-import { AUTH0_AUDIENCE } from '../constants'
+import { PROD_AUTH0_AUDIENCE, STAGING_AUTH0_AUDIENCE } from '../constants'
 
 interface UseGetAccessTokenResult {
   getAccessToken: () => Promise<string>
 }
 
 export const useGetAccessToken = (): UseGetAccessTokenResult => {
   const { getAccessTokenSilently } = useAuth0()
+  const auth0Audience =
+    process.env.NODE_ENV === 'production'
+      ? PROD_AUTH0_AUDIENCE
+      : STAGING_AUTH0_AUDIENCE
 
   const getAccessToken = async (): Promise<string> => {
     try {
       const accessToken = await getAccessTokenSilently({
         authorizationParams: {
-          audience: AUTH0_AUDIENCE,
+          audience: auth0Audience,
         },
       })
       return accessToken