Merge pull request #6073 from DonOmalVindula/feat/ai-login-flow-impro…

…vements
wso2 · Apr 25, 2024 · 21be497 · 21be497
2 parents ab45ab6 + b6d50cd
commit 21be497
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 58 deletions.
diff --git a/.changeset/itchy-ties-cross.md b/.changeset/itchy-ties-cross.md
@@ -0,0 +1,7 @@
+---
+"@wso2is/i18n": patch
+"@wso2is/features": patch
+"@wso2is/console": patch
+---
+
+Add UX improvements to AI based features
diff --git a/features/admin.ai.v1/components/branding-ai-loading-screen.scss b/features/admin.ai.v1/components/branding-ai-loading-screen.scss
@@ -16,7 +16,14 @@
  * under the License.
  */
 
- .branding-ai-loading-screen-container {
+.branding-ai-loading-screen-parent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.branding-ai-loading-screen-container {
     display: flex;
     align-items: stretch;
     justify-content: center;

diff --git a/features/admin.ai.v1/components/branding-ai-loading-screen.tsx b/features/admin.ai.v1/components/branding-ai-loading-screen.tsx
@@ -20,6 +20,7 @@ import Box from "@oxygen-ui/react/Box";
 import CircularProgress from "@oxygen-ui/react/CircularProgress";
 import LinearProgress from "@oxygen-ui/react/LinearProgress";
 import Typography from "@oxygen-ui/react/Typography";
+import { DocumentationLink, useDocumentation } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ReactComponent as LoadingPlaceholder }
@@ -41,6 +42,9 @@ import "./branding-ai-loading-screen.scss";
  */
 export const LoadingScreen: FunctionComponent = (): ReactElement => {
     const { t } = useTranslation();
+
+    const { getLink } = useDocumentation();
+
     const [ factIndex, setFactIndex ] = useState<number>(0);
     const [ currentProgress, setCurrentProgress ] = useState<number>(0);
 
@@ -116,32 +120,42 @@ export const LoadingScreen: FunctionComponent = (): ReactElement => {
     };
 
     return (
-        <Box className="branding-ai-loading-screen-container">
-            <Box className="branding-ai-loading-screen-illustration-container">
-                <LoadingPlaceholder />
-            </Box>
-            <Box className="branding-ai-loading-screen-text-container">
-                <Box className="mb-5">
-                    <Typography
-                        variant="h5"
-                        className="branding-ai-loading-screen-heading"
-                    >
-                        { t("branding:ai.screens.loading.didYouKnow") }
-                    </Typography>
-                    <Typography className="branding-ai-loading-screen-sub-heading">
-                        { facts[factIndex] }
-                    </Typography>
+        <Box className="branding-ai-loading-screen-parent">
+            <Box className="branding-ai-loading-screen-container">
+                <Box className="branding-ai-loading-screen-illustration-container">
+                    <LoadingPlaceholder />
                 </Box>
-                <Box sx={ { width: 1 } }>
-                    <Box className="branding-ai-loading-screen-loading-container">
-                        { isLoading && <CircularProgress size={ 20 } sx={ { mr: 2 } } /> }
-                        <Typography className="branding-ai-loading-screen-loading-state">
-                            { getCurrentStatus() }
+                <Box className="branding-ai-loading-screen-text-container">
+                    <Box className="mb-5">
+                        <Typography
+                            variant="h5"
+                            className="branding-ai-loading-screen-heading"
+                        >
+                            { t("branding:ai.screens.loading.didYouKnow") }
                         </Typography>
+                        <Typography className="branding-ai-loading-screen-sub-heading">
+                            { facts[factIndex] }
+                        </Typography>
+                    </Box>
+                    <Box sx={ { width: 1 } }>
+                        <Box className="branding-ai-loading-screen-loading-container">
+                            { isLoading && <CircularProgress size={ 20 } sx={ { mr: 2 } } /> }
+                            <Typography className="branding-ai-loading-screen-loading-state">
+                                { getCurrentStatus() }
+                            </Typography>
+                        </Box>
+                        <LinearProgress variant="determinate" value={ currentProgress } />
                     </Box>
-                    <LinearProgress variant="determinate" value={ currentProgress } />
                 </Box>
             </Box>
+            <Typography variant="caption">
+                { t("branding:ai.disclaimer") }
+                <DocumentationLink
+                    link={ getLink("common.termsOfService") }
+                >
+                    { t("branding:ai.termsAndConditions") }
+                </DocumentationLink>
+            </Typography>
         </Box>
     );
 };
diff --git a/features/admin.login-flow.ai.v1/api/use-ai-login-flow-generation-status.tsx b/features/admin.login-flow.ai.v1/api/use-ai-login-flow-generation-status.tsx
@@ -31,7 +31,7 @@ export const useAILoginFlowGenerationStatus = (
     operationId: string
 ): RequestResultInterface<AILoginFlowGenerationStatusAPIResponseInterface, RequestErrorInterface> =>{
 
-    const [ isLoading, setIsLoading ] = useState(true);
+    const [ isLoading, setIsLoading ] = useState<boolean>(true);
 
     const { setLoginFlowGenerationCompleted } = useAILoginFlow();
 
@@ -65,7 +65,7 @@ export const useAILoginFlowGenerationStatus = (
         }
 
         return () => clearInterval(interval);
-    }, [ data, isValidating, mutate ]);
+    }, [ data, isValidating ]);
 
     return {
         data,

diff --git a/features/admin.login-flow.ai.v1/components/login-flow-ai-banner.scss b/features/admin.login-flow.ai.v1/components/login-flow-ai-banner.scss
@@ -100,7 +100,7 @@
     border: 1px solid #cbcedb;
     width: 100%;
     padding: 0px 10px;
-    min-height: 50px;
+    min-height: 62px;
 }
 
 .login-flow-ai-input-button {

diff --git a/features/admin.login-flow.ai.v1/components/login-flow-ai-loading-screen.scss b/features/admin.login-flow.ai.v1/components/login-flow-ai-loading-screen.scss
@@ -16,6 +16,13 @@
  * under the License.
  */
 
+.login-flow-ai-loading-screen-parent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 .login-flow-ai-loading-screen-container {
     display: flex;
     align-items: stretch;

diff --git a/features/admin.login-flow.ai.v1/components/login-flow-ai-loading-screen.tsx b/features/admin.login-flow.ai.v1/components/login-flow-ai-loading-screen.tsx
@@ -22,6 +22,7 @@ import LinearProgress from "@oxygen-ui/react/LinearProgress";
 import Typography from "@oxygen-ui/react/Typography";
 import { AlertInterface, AlertLevels } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
+import { DocumentationLink, useDocumentation } from "@wso2is/react-components";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
@@ -42,6 +43,8 @@ const LoginFlowAILoadingScreen = ( { traceId }: { traceId: string } ): JSX.Eleme
 
     const { t } = useTranslation();
 
+    const { getLink } = useDocumentation();
+
     const dispatch: Dispatch = useDispatch();
 
     const statusLabels: Record<string, string> = useGetStatusLabels();
@@ -132,32 +135,42 @@ const LoginFlowAILoadingScreen = ( { traceId }: { traceId: string } ): JSX.Eleme
     };
 
     return (
-        <Box className="login-flow-ai-loading-screen-container">
-            <Box className="login-flow-ai-loading-screen-illustration-container">
-                <LoadingPlaceholder />
-            </Box>
-            <Box className="login-flow-ai-loading-screen-text-container">
-                <Box className="mb-5">
-                    <Typography
-                        variant="h5"
-                        className="login-flow-ai-loading-screen-heading"
-                    >
-                        Did you know?
-                    </Typography>
-                    <Typography className="login-flow-ai-loading-screen-sub-heading">
-                        { facts[factIndex] }
-                    </Typography>
+        <Box className="login-flow-ai-loading-screen-parent">
+            <Box className="login-flow-ai-loading-screen-container">
+                <Box className="login-flow-ai-loading-screen-illustration-container">
+                    <LoadingPlaceholder />
                 </Box>
-                <Box sx={ { width: 1 } }>
-                    <Box className="login-flow-ai-loading-screen-loading-container">
-                        { isLoading && <CircularProgress size={ 20 } sx={ { mr: 2 } } /> }
-                        <Typography className="login-flow-ai-loading-screen-loading-state">
-                            { getCurrentStatus() }
+                <Box className="login-flow-ai-loading-screen-text-container">
+                    <Box className="mb-5">
+                        <Typography
+                            variant="h5"
+                            className="login-flow-ai-loading-screen-heading"
+                        >
+                            { t("ai:aiLoginFlow.didYouKnow") }
                         </Typography>
+                        <Typography className="login-flow-ai-loading-screen-sub-heading">
+                            { facts[factIndex] }
+                        </Typography>
+                    </Box>
+                    <Box sx={ { width: 1 } }>
+                        <Box className="login-flow-ai-loading-screen-loading-container">
+                            { isLoading && <CircularProgress size={ 20 } sx={ { mr: 2 } } /> }
+                            <Typography className="login-flow-ai-loading-screen-loading-state">
+                                { getCurrentStatus() }
+                            </Typography>
+                        </Box>
+                        <LinearProgress variant="determinate" value={ currentProgress } />
                     </Box>
-                    <LinearProgress variant="determinate" value={ currentProgress } />
                 </Box>
             </Box>
+            <Typography variant="caption">
+                { t("ai:aiLoginFlow.disclaimer") }
+                <DocumentationLink
+                    link={ getLink("common.termsOfService") }
+                >
+                    { t("ai:aiLoginFlow.termsAndConditions") }
+                </DocumentationLink>
+            </Typography>
         </Box>
     );
 };

diff --git a/features/admin.login-flow.ai.v1/constants/login-flow-ai-constants.ts b/features/admin.login-flow.ai.v1/constants/login-flow-ai-constants.ts
@@ -62,16 +62,16 @@ export const STATUS_SEQUENCE: string[] = [
 ];
 
 export const STATUS_PROGRESS_MAP: Record<string, number> = {
-    generating_login_flow_authenticators: 75,
-    generating_login_flow_script: 45,
-    generation_of_login_flow_authenticators_complete: 95,
-    generation_of_login_flow_script_complete: 70,
+    generating_login_flow_authenticators: 97,
+    generating_login_flow_script: 95,
+    generation_of_login_flow_authenticators_complete: 98,
+    generation_of_login_flow_script_complete: 96,
     login_flow_generation_complete: 100,
-    optimization_and_validation_complete: 20,
-    optimizing_and_validating_final_login_flow: 97,
-    optimizing_and_validating_user_query: 10,
-    retrieval_of_examples_complete: 40,
-    retrieving_examples: 25
+    optimization_and_validation_complete: 40,
+    optimizing_and_validating_final_login_flow: 99,
+    optimizing_and_validating_user_query: 20,
+    retrieval_of_examples_complete: 90,
+    retrieving_examples: 70
 };
 
 export const INITIAL_PROGRESS: number = 5;

diff --git a/features/admin.login-flow.ai.v1/providers/ai-login-flow-provider.tsx b/features/admin.login-flow.ai.v1/providers/ai-login-flow-provider.tsx
@@ -63,6 +63,7 @@ const AILoginFlowProvider = (props: PropsWithChildren<AILoginFlowProviderProps>)
     useEffect(() => {
         if (error) {
             setGeneratingLoginFlow(false);
+            setLoginFlowGenerationCompleted(false);
 
             dispatch(
                 addAlert<AlertInterface>({
@@ -77,6 +78,7 @@ const AILoginFlowProvider = (props: PropsWithChildren<AILoginFlowProviderProps>)
 
         if (data?.status === LoginFlowResultStatus.FAILED) {
             setGeneratingLoginFlow(false);
+            setLoginFlowGenerationCompleted(false);
 
             // if data.data contains an object error then use that as the error message
             const errorMessage: string = "error" in data.data
@@ -106,8 +108,8 @@ const AILoginFlowProvider = (props: PropsWithChildren<AILoginFlowProviderProps>)
      */
     const handleGenerate = (data: AuthenticationSequenceInterface) => {
         setAiGeneratedLoginFlow(data);
-        setLoginFlowGenerationCompleted(false);
         setGeneratingLoginFlow(false);
+        setLoginFlowGenerationCompleted(false);
     };
 
     return (

diff --git a/modules/i18n/src/models/namespaces/ai-ns.ts b/modules/i18n/src/models/namespaces/ai-ns.ts
@@ -39,6 +39,7 @@ export interface aiNS{
             };
 
         };
+        didYouKnow: string;
         notifications: {
             generateError: NotificationItem;
             generateResultError: NotificationItem;
@@ -70,6 +71,8 @@ export interface aiNS{
                 };
             };
         };
+        disclaimer: string;
+        termsAndConditions: string;
         title: string;
     };
 }
diff --git a/modules/i18n/src/models/namespaces/branding-ns.ts b/modules/i18n/src/models/namespaces/branding-ns.ts
@@ -187,6 +187,7 @@ export interface BrandingNS {
                 button: string;
             };
         };
+        disclaimer: string;
         notifications: {
             generateError: {
                 description: string;
@@ -228,5 +229,6 @@ export interface BrandingNS {
             };
         };
         title: string;
+        termsAndConditions: string;
     };
 }
diff --git a/modules/i18n/src/translations/en-US/portals/ai.ts b/modules/i18n/src/translations/en-US/portals/ai.ts
@@ -43,6 +43,8 @@ export const ai: aiNS = {
                 " environment and authenticators."
             }
         },
+        didYouKnow: "Did you know?",
+        disclaimer: "Login Flow AI can make errors. Verify the information for accuracy.",
         notifications: {
             generateError: {
                 description: "An error occurred while generating the login flow. Please try again.",
@@ -76,7 +78,7 @@ export const ai: aiNS = {
                 facts:{
                     0:"Asgardeo features a visual editor that simplifies authentication flow configuration by allowing"+
                     " intuitive placement of authenticators and conditional elements, enhancing design efficiency.",
-                    1:"ou can create dynamic authentication sequences with conditional scripts for versatile "+
+                    1:"You can create dynamic authentication sequences with conditional scripts for versatile "+
                     "login flows.",
                     2:"You can use Asgardeo's authentication script editor to create tailored authentication scripts"+
                     " to meet your authentication requirements."
@@ -97,6 +99,7 @@ export const ai: aiNS = {
                 }
             }
         },
+        termsAndConditions: "Terms and Conditions",
         title: "Login Flow AI"
     }
 };
diff --git a/modules/i18n/src/translations/en-US/portals/branding.ts b/modules/i18n/src/translations/en-US/portals/branding.ts
@@ -187,6 +187,7 @@ export const branding: BrandingNS = {
                 button: "Try Branding AI"
             }
         },
+        disclaimer: "Branding AI can make errors. Verify the information for accuracy.",
         notifications: {
             generateError: {
                 description: "An error occurred while generating the branding.",
@@ -227,7 +228,8 @@ export const branding: BrandingNS = {
                 }
             }
         },
-        title: "Branding AI"
+        title: "Branding AI",
+        termsAndConditions: "Terms and Conditions"
     },
     tabs: {
         preview: {