Upgrade AWS Amplify to version 6

frontend/package.json

@@ -12,12 +12,12 @@
     "ladle": "npx ladle serve"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "^5.0.6",
+    "@aws-amplify/ui-react": "^6.1.14",
     "@headlessui/react": "^1.7.15",
     "@ladle/react": "^4.1.0",
     "@react-icons/all-files": "^4.1.0",
     "@xstate/react": "^4.1.1",
-    "aws-amplify": "^5.3.5",
+    "aws-amplify": "^6.4.3",
     "axios": "^1.6.0",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { translations } from '@aws-amplify/ui-react';
-import { Amplify, I18n } from 'aws-amplify';
+import { Amplify } from 'aws-amplify';
+import { I18n } from 'aws-amplify/utils';
 import '@aws-amplify/ui-react/styles.css';
 import AuthAmplify from './components/AuthAmplify';
 import AuthCustom from './components/AuthCustom';
@@ -33,15 +34,18 @@ const App: React.FC = () => {
 
   Amplify.configure({
     Auth: {
-      userPoolId: import.meta.env.VITE_APP_USER_POOL_ID,
-      userPoolWebClientId: import.meta.env.VITE_APP_USER_POOL_CLIENT_ID,
-      authenticationFlowType: 'USER_SRP_AUTH',
-      oauth: {
-        domain: import.meta.env.VITE_APP_COGNITO_DOMAIN,
-        scope: ['openid', 'email'],
-        redirectSignIn: import.meta.env.VITE_APP_REDIRECT_SIGNIN_URL,
-        redirectSignOut: import.meta.env.VITE_APP_REDIRECT_SIGNOUT_URL,
-        responseType: 'code',
+      Cognito: {
+        userPoolId: import.meta.env.VITE_APP_USER_POOL_ID,
+        userPoolClientId: import.meta.env.VITE_APP_USER_POOL_CLIENT_ID,
+        loginWith: {
+          oauth: {
+            domain: import.meta.env.VITE_APP_COGNITO_DOMAIN,
+            scopes: ['openid', 'email'],
+            redirectSignIn: [import.meta.env.VITE_APP_REDIRECT_SIGNIN_URL],
+            redirectSignOut: [import.meta.env.VITE_APP_REDIRECT_SIGNOUT_URL],
+            responseType: 'code',
+          },
+        },
       },
     },
   });

frontend/src/components/AuthCustom.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import Button from './Button';
 import { BaseProps } from '../@types/common';
-import { Auth } from 'aws-amplify';
+import { getCurrentUser, signInWithRedirect, signOut } from 'aws-amplify/auth';
 import { useTranslation } from 'react-i18next';
 import { PiCircleNotch } from 'react-icons/pi';
 
@@ -23,7 +23,7 @@ const AuthCustom: React.FC<Props> = ({ children }) => {
   const { t } = useTranslation();
 
   useEffect(() => {
-    Auth.currentAuthenticatedUser()
+    getCurrentUser()
       .then(() => {
         setAuthenticated(true);
       })
@@ -35,14 +35,16 @@ const AuthCustom: React.FC<Props> = ({ children }) => {
       });
   }, []);
 
-  const signIn = () => {
-    Auth.federatedSignIn({
-      customProvider: import.meta.env.VITE_APP_CUSTOM_PROVIDER_NAME,
+  const handleSignIn = () => {
+    signInWithRedirect({
+      provider: {
+        custom: import.meta.env.VITE_APP_CUSTOM_PROVIDER_NAME,
+      },
     });
   };
 
-  const signOut = () => {
-    Auth.signOut();
+  const handleSignOut = () => {
+    signOut();
   };
 
   return (
@@ -59,13 +61,13 @@ const AuthCustom: React.FC<Props> = ({ children }) => {
           <div className="mb-5 mt-10 text-4xl text-aws-sea-blue">
             {!MISTRAL_ENABLED ? t('app.name') : t('app.nameWithoutClaude')}
           </div>
-          <Button onClick={() => signIn()} className="px-20 text-xl">
+          <Button onClick={() => handleSignIn()} className="px-20 text-xl">
             {t('signIn.button.login')}
           </Button>
         </div>
       ) : (
         // Pass the signOut function to the child component
-        <>{cloneElement(children as ReactElement, { signOut })}</>
+        <>{cloneElement(children as ReactElement, { signOut: handleSignOut })}</>
       )}
     </>
   );

frontend/src/components/ChatMessage.tsx

@@ -245,7 +245,7 @@ const ChatMessage: React.FC<Props> = (props) => {
                 onClose={() => setIsFileModalOpen(false)}
                 widthFromContent={true}
                 title={dialogFileName ?? ''}>
-                <div className="relative flex h-auto max-h-[80vh] w-auto max-w-[80vh] flex-col">
+                <div className="relative flex size-auto max-h-[80vh] max-w-[80vh] flex-col">
                   <div className="overflow-auto px-4">
                     <pre className="whitespace-pre-wrap break-all">
                       {dialogFileContent}

frontend/src/components/InputChatContent.tsx

@@ -461,7 +461,7 @@ const InputChatContent = forwardRef<HTMLElement, Props>((props, focusInputRef) =
     <>
       {props.dndMode && (
         <div
-          className="fixed left-0 top-0 h-full w-full bg-black/40"
+          className="fixed left-0 top-0 size-full bg-black/40"
           onDrop={onDrop}></div>
       )}
       <div

frontend/src/components/Select.tsx

@@ -46,13 +46,13 @@ const Select: React.FC<Props> = (props) => {
             <span className="block truncate">{selectedLabel}</span>
 
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <PiCaretUpDown className="h-5 w-5 text-gray" />
+              <PiCaretUpDown className="size-5 text-gray" />
             </span>
           </Listbox.Button>
           {props.clearable && props.value !== '' && (
             <span className="absolute inset-y-0 right-6 flex items-center pr-2">
               <ButtonIcon onClick={onClear}>
-                <PiX className="h-5 w-5 text-gray" />
+                <PiX className="size-5 text-gray" />
               </ButtonIcon>
             </span>
           )}
@@ -83,7 +83,7 @@ const Select: React.FC<Props> = (props) => {
                       </span>
                       {selected ? (
                         <span className="absolute inset-y-0 left-0 flex items-center pl-3">
-                          <PiCheck className="h-5 w-5" />
+                          <PiCheck className="size-5" />
                         </span>
                       ) : null}
                     </>

frontend/src/components/UploadedAttachedFile.tsx

@@ -45,7 +45,7 @@ const UploadedFileText: React.FC<Props> = (props) => {
         <svg
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
-          className="block h-4 w-4 shrink-0 drop-shadow">
+          className="block size-4 shrink-0 drop-shadow">
           <path
             d="M0 0L16 16H0V0Z"
             className="fill-aws-paper stroke-gray"

frontend/src/hooks/useHttp.ts

@@ -1,5 +1,4 @@
-// import { Auth } from "aws-amplify";
-import { Auth } from 'aws-amplify';
+import { fetchAuthSession } from 'aws-amplify/auth';
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import useSWR, { SWRConfiguration } from 'swr';
 // import useAlertSnackbar from "./useAlertSnackbar";
@@ -11,10 +10,9 @@ const api = axios.create({
 // // HTTP Request Preprocessing
 api.interceptors.request.use(async (config) => {
   // If Authenticated, append ID Token to Request Header
-  const user = await Auth.currentAuthenticatedUser();
-  if (user) {
-    const token = (await Auth.currentSession()).getIdToken().getJwtToken();
-    config.headers['Authorization'] = 'Bearer ' + token;
+  const idToken = (await fetchAuthSession()).tokens?.idToken;
+  if (idToken) {
+    config.headers['Authorization'] = 'Bearer ' + idToken.toString();
   }
   config.headers['Content-Type'] = 'application/json';
 

frontend/src/hooks/usePostMessageStreaming.ts

@@ -1,4 +1,4 @@
-import { Auth } from 'aws-amplify';
+import { fetchAuthSession } from 'aws-amplify/auth';
 import { PostMessageRequest } from '../@types/conversation';
 import { create } from 'zustand';
 import i18next from 'i18next';
@@ -25,7 +25,7 @@ const usePostMessageStreaming = create<{
       } else {
         dispatch(i18next.t('app.chatWaitingSymbol'));
       }
-      const token = (await Auth.currentSession()).getIdToken().getJwtToken();
+      const token = (await fetchAuthSession()).tokens?.idToken?.toString();
       const payloadString = JSON.stringify({
         ...input,
         token,

frontend/src/hooks/useUser.ts

@@ -1,4 +1,4 @@
-import { Auth } from 'aws-amplify';
+import { fetchAuthSession } from 'aws-amplify/auth';
 import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 
@@ -12,14 +12,13 @@ const useUser = () => {
   const [isAdmin, setIsAdmin] = useState(false);
 
   const { data: session } = useSWR('current-session', () =>
-    Auth.currentSession()
+    fetchAuthSession()
   );
 
   useEffect(() => {
-    const groups: string[] | undefined =
-      session?.getIdToken().payload['cognito:groups'];
+    const groups = session?.tokens?.idToken?.payload?.['cognito:groups'];
 
-    if (groups) {
+    if (Array.isArray(groups)) {
       setIsAllowApiSettings(groups.some(group =>
         group === GROUP_PUBLISH_ALLOWED || group === GROUP_ADMIN
       ));

frontend/src/pages/AdminApiManagementPage.tsx

@@ -25,7 +25,7 @@ const AdminApiManagementPage: React.FC = () => {
     <>
       <div className="flex h-full justify-center">
         <div className="w-2/3">
-          <div className="h-full w-full pt-8">
+          <div className="size-full pt-8">
             <div className="flex items-end justify-between">
               <div className="flex items-center gap-2">
                 <div className="text-xl font-bold">
@@ -46,7 +46,7 @@ const AdminApiManagementPage: React.FC = () => {
               )}
 
               {botApis?.length === 0 && (
-                <div className="flex h-full w-full items-center justify-center italic text-dark-gray">
+                <div className="flex size-full items-center justify-center italic text-dark-gray">
                   {t('admin.apiManagement.label.noApi')}
                 </div>
               )}

frontend/src/pages/AdminSharedBotAnalyticsPage.tsx

@@ -57,7 +57,7 @@ const AdminSharedBotAnalyticsPage: React.FC = () => {
     <>
       <div className="flex h-full justify-center">
         <div className="w-2/3">
-          <div className="h-full w-full pt-8">
+          <div className="size-full pt-8">
             <div className="flex items-end justify-between">
               <div className="flex items-center gap-2">
                 <div className="text-xl font-bold">
@@ -150,7 +150,7 @@ const AdminSharedBotAnalyticsPage: React.FC = () => {
               )}
 
               {publicBots?.length === 0 && (
-                <div className="flex h-full w-full items-center justify-center italic text-dark-gray">
+                <div className="flex size-full items-center justify-center italic text-dark-gray">
                   {t('admin.sharedBotAnalytics.label.noPublicBotUsages')}
                 </div>
               )}

frontend/src/pages/BotExplorePage.tsx

@@ -152,7 +152,7 @@ const BotExplorePage: React.FC = () => {
 
             <div className="h-4/5 overflow-x-hidden overflow-y-scroll border-b border-gray pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20 ">
               {myBots?.length === 0 && (
-                <div className="flex h-full w-full items-center justify-center italic text-dark-gray">
+                <div className="flex size-full items-center justify-center italic text-dark-gray">
                   {t('bot.label.noBots')}
                 </div>
               )}
@@ -260,7 +260,7 @@ const BotExplorePage: React.FC = () => {
             <div className="mt-2 border-b border-gray"></div>
             <div className="h-4/5 overflow-y-scroll border-b border-gray  pr-1 scrollbar-thin scrollbar-thumb-aws-font-color/20">
               {recentlyUsedSharedBots?.length === 0 && (
-                <div className="flex h-full w-full items-center justify-center italic text-dark-gray">
+                <div className="flex size-full items-center justify-center italic text-dark-gray">
                   {t('bot.label.noBotsRecentlyUsed')}
                 </div>
               )}

frontend/src/pages/ChatPage.tsx

@@ -360,7 +360,7 @@ const ChatPage: React.FC = () => {
             </div>
           )}
         </div>
-        <section className="relative h-full w-full flex-1 overflow-auto pb-9">
+        <section className="relative size-full flex-1 overflow-auto pb-9">
           <div className="h-full">
             <div
               id="messages"