diff --git a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx index 7c3f8e482ca..c84bc46a0c9 100644 --- a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx +++ b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next' import styled, { css } from 'styled-components' import { useForm } from 'react-hook-form' import { useAtom } from 'jotai' -import { useAuth0 } from '@auth0/auth0-react' import { ALIGN_CENTER, @@ -17,7 +16,7 @@ import { } from '@opentrons/components' import { SendButton } from '../../atoms/SendButton' import { preparedPromptAtom, chatDataAtom } from '../../resources/atoms' -import { useApiCall } from '../../resources/hooks/useApiCall' +import { useApiCall, useGetAccessToken } from '../../resources/hooks' import { calcTextAreaHeight } from '../../resources/utils/utils' import { END_POINT } from '../../resources/constants' @@ -45,40 +44,10 @@ export function InputPrompt(): JSX.Element { // ToDo (kk:05/15/2024) this will be used in the future // const [error, setError] = React.useState('') - const { getAccessTokenSilently } = useAuth0() - const userPrompt = watch('userPrompt') ?? '' const { data, error, isLoading, fetchData } = useApiCall() - - // // ToDo (kk:05/15/2024) This will be moved to a better place - // const fetchData = async (prompt: string): Promise => { - // if (prompt !== '') { - // setLoading(true) - // try { - // const accessToken = await getAccessTokenSilently({ - // authorizationParams: { - // audience: 'sandbox-ai-api', - // }, - // }) - // const postData = { - // message: prompt, - // fake: false, - // } - // const headers = { - // Authorization: `Bearer ${accessToken}`, - // 'Content-Type': 'application/json', - // } - // const response = await axios.post(END_POINT, postData, { headers }) - // setData(response.data) - // } catch (err) { - // // setError('Error fetching data from the API.') - // console.error(`error: ${err}`) - // } finally { - // setLoading(false) - // } - // } - // } + const { getAccessToken } = useGetAccessToken() const handleClick = async (): Promise => { const userInput: ChatData = { @@ -88,12 +57,7 @@ export function InputPrompt(): JSX.Element { setChatData(chatData => [...chatData, userInput]) try { - const accessToken = await getAccessTokenSilently({ - authorizationParams: { - audience: 'sandbox-ai-api', - }, - }) - + const accessToken = await getAccessToken() const headers = { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json', @@ -117,6 +81,7 @@ export function InputPrompt(): JSX.Element { reset() } catch (err) { console.error(`error: ${err}`) + throw err } } diff --git a/opentrons-ai-client/src/resources/hooks/index.ts b/opentrons-ai-client/src/resources/hooks/index.ts new file mode 100644 index 00000000000..7680a15ffb6 --- /dev/null +++ b/opentrons-ai-client/src/resources/hooks/index.ts @@ -0,0 +1,2 @@ +export * from './useApiCall' +export * from './useGetAccessToken' diff --git a/opentrons-ai-client/src/resources/hooks/useApiCall.ts b/opentrons-ai-client/src/resources/hooks/useApiCall.ts index 2c338d5d8dc..464c5f60447 100644 --- a/opentrons-ai-client/src/resources/hooks/useApiCall.ts +++ b/opentrons-ai-client/src/resources/hooks/useApiCall.ts @@ -10,6 +10,11 @@ interface UseApiCallResult { fetchData: (config: AxiosRequestConfig) => Promise } +/** + * React hook to initiate an API call and track its progress and result. + * @template T The type of the data returned by the API call. + * @returns An object with the current state of the API call and a function to initiate the call. + */ export const useApiCall = (): UseApiCallResult => { const [data, setData] = useState(null) const [error, setError] = useState(null) diff --git a/opentrons-ai-client/src/resources/hooks/useGetAccessToken.ts b/opentrons-ai-client/src/resources/hooks/useGetAccessToken.ts new file mode 100644 index 00000000000..6136527c844 --- /dev/null +++ b/opentrons-ai-client/src/resources/hooks/useGetAccessToken.ts @@ -0,0 +1,26 @@ +import { useAuth0 } from '@auth0/auth0-react' + +interface UseGetAccessTokenResult { + getAccessToken: () => Promise +} + +const audience = 'sandbox-ai-api' +export const useGetAccessToken = (): UseGetAccessTokenResult => { + const { getAccessTokenSilently } = useAuth0() + + const getAccessToken = async (): Promise => { + try { + const accessToken = await getAccessTokenSilently({ + authorizationParams: { + audience, + }, + }) + return accessToken + } catch (error) { + console.error('Error getting access token:', error) + throw error + } + } + + return { getAccessToken } +} diff --git a/opentrons-ai-client/src/resources/hooks/useGetAuth0Token.ts b/opentrons-ai-client/src/resources/hooks/useGetAuth0Token.ts deleted file mode 100644 index 6dca4506657..00000000000 --- a/opentrons-ai-client/src/resources/hooks/useGetAuth0Token.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { useAuth0 } from '@auth0/auth0-react' - -const audience = 'sandbox-ai-api' -export const useGetAuth0Token = async (): Promise => { - const { getAccessTokenSilently } = useAuth0() - try { - const accessToken = await getAccessTokenSilently({ - authorizationParams: { - audience, - }, - }) - return accessToken - } catch (err) { - console.error(`cannot get token: ${err}`) - } - return null -}