Latest Update.

Author: kcantrel

AI/GenAI-ChatBot-application-sample/package-lock.json

@@ -27,7 +27,7 @@ class ErrorBoundary extends Component<Props, State> {
   public render() {
     if (this.state.hasError) {
       //TODO: Rout to aiChat home page
-      return <h1>Sorry.. there was an error</h1>;
+      return <div>Sorry.. there was an error</div>;
     }
 
     return this.props.children;

AI/GenAI-ChatBot-application-sample/src/app/ErrorBoundary.tsx

@@ -7,7 +7,7 @@ import EnterpriseChatIcon from "@/app/svgs/chatbot/enterpriseChat.svg";
 import EmptyPromptIcon from '@/app/svgs/chatbot/emptyPrompt.svg';
 import LoadingIcon from '@/app/svgs/loaderMain.svg';
 import Prompt, { PromptItem, UserType } from './prompt/prompt';
-import { useGetMessagesQuery, useSendMessageMutation } from '@/lib/api/chatApi.slice';
+import { closeSocket, useGetMessagesQuery, useSendMessageMutation } from '@/lib/api/chatApi.slice';
 import { skip } from '@/lib/api/api.slice';
 import rootSelector from '@/lib/selectors/root.selector';
 import { ChatMessage } from '@/lib/store.types';
@@ -191,6 +191,7 @@ const Chatbot = () => {
     }, [isFetching, dispatch]);
 
     useEffect(() => {
+        closeSocket();
         resetQuestion();
         dispatch(resetMessages());
     }, [dispatch, chatId])
@@ -234,7 +235,7 @@ const Chatbot = () => {
 
     const isSendMessageDisabled = useMemo(() => {
         const isWriting = promptList[promptList.length - 1]?.isWriting;
-        const isDisabled = !knowledgebase || isLoading || !chatId || isWriting;
+        const isDisabled = !knowledgebase || !chatId || isWriting;
 
         if (!isDisabled) {
             setTimeout(() => {
@@ -246,11 +247,11 @@ const Chatbot = () => {
         }
 
         return isDisabled;
-    }, [knowledgebase, isLoading, chatId, promptList])
+    }, [knowledgebase, chatId, promptList])
 
     const setNewChatId = (chatId: string) => {
-        refetch();
         dispatch(setChatId(chatId));
+        refetch();
     }
 
     const ConversationStarterPrompts = () => {

AI/GenAI-ChatBot-application-sample/src/app/components/chatbot/chatbot.tsx

@@ -16,7 +16,6 @@ import { NOTIFICATION_CONSTS } from '../NotificationGroup/notification.consts';
 import { setAuth } from '@/lib/slices/auth.slice';
 import { ClerkSignIn } from '@/app/services/clerk.service';
 import { SignInResult, LoginProvider } from '@/lib/api/api.types';
-import useRunOnce from '@/app/hooks/useRunOnce';
 import useRunUntil from '@/app/hooks/useRunUntil';
 
 const LoginForm = () => {

AI/GenAI-ChatBot-application-sample/src/app/components/loginForm/loginForm.tsx

@@ -27,7 +27,7 @@ const HistoryPanel = ({ isExpanded, isLoading, promptList, historyList, toggleEx
         <div className={_Classes(styles.chatHistory, panelStyles.panel, { [panelStyles.expanded]: isExpanded })}>
             <PanelHeader title='History' isLoading={isLoading} panelType='history' toggleExpanded={toggleExpanded} />
             <div className={_Classes(styles.historyList, { [styles.emptyHistory]: promptList.length === 0 && historyList.size === 0 })}>
-                {promptList.length > 0 || (historyList.size > 0 && !isLoading) ? Array.from(historyList.keys()).sort((hist1, hist2) => hist2 - hist1).map(id => {
+                {promptList.length > 0 || historyList.size > 0 ? Array.from(historyList.keys()).sort((hist1, hist2) => hist2 - hist1).map(id => {
                     return (
                         <HistoryItem key={id}
                             history={{

AI/GenAI-ChatBot-application-sample/src/app/components/panels/historyPanel/historyPanel.tsx

@@ -1,32 +1,40 @@
+'use client';
+
 import styles from './global.module.scss';
 import LoginForm from "./components/loginForm/loginForm";
 import ChatBot from '@/app/svgs/login/chatBot.png'
 import Cloud from '@/app/svgs/login/cloud.png'
 import Image from 'next/image';
 import { _Classes } from '@/utils/cssHelper.util';
+import { useAppSelector } from '@/lib/hooks';
+import rootSelector from '@/lib/selectors/root.selector';
 
 const Home = () => {
+  const { accessToken, isSuccess } = useAppSelector(rootSelector.auth);
+
   return (
     <div className={styles.genAi}>
-      <LoginForm />
-      <div className={styles.welcomeContent}>
-        <Image
-          src={ChatBot}
-          alt="chatBot"
-          width={1124}
-          height={794}
-          priority
-          className={styles.chatBotImage} />
-        <span className={_Classes(styles.Semibold_43, styles.title)}>Welcome to Workload factory GenAI sample chatbot</span>
-        <span className={`${styles.Regular_20} ${styles.subTitle}`}>By incorporating your enterprise data, GenAI Studio chatbot will understand industry-specific language, generate tailored responses, provide insights, and assist with documentation.</span>
-        <Image
-          src={Cloud}
-          alt="clouds"
-          width={982}
-          height={284}
-          priority
-          className={styles.cloudsImage} />
-      </div>
+      {!accessToken && isSuccess && <>
+        <LoginForm />
+        <div className={styles.welcomeContent}>
+          <Image
+            src={ChatBot}
+            alt="chatBot"
+            width={1124}
+            height={794}
+            priority
+            className={styles.chatBotImage} />
+          <span className={_Classes(styles.Semibold_43, styles.title)}>Welcome to Workload factory GenAI sample chatbot</span>
+          <span className={`${styles.Regular_20} ${styles.subTitle}`}>By incorporating your enterprise data, GenAI Studio chatbot will understand industry-specific language, generate tailored responses, provide insights, and assist with documentation.</span>
+          <Image
+            src={Cloud}
+            alt="clouds"
+            width={982}
+            height={284}
+            priority
+            className={styles.cloudsImage} />
+        </div>
+      </>}
     </div>
   )
 }

AI/GenAI-ChatBot-application-sample/src/app/home.tsx

@@ -24,16 +24,16 @@ export default function RootLayout({
     <html lang="en">
       <GenAiClerkProvider>
         <StoreProvider>
-          <ErrorBoundary>
-            <body className={`${styles.genAi} ${styles['font-variants']} light-theme`} style={{ margin: 0 }}>
-              <DialogContextProvider>
+          <body className={`${styles.genAi} ${styles['font-variants']} light-theme`} style={{ margin: 0 }}>
+            <DialogContextProvider>
+              <ErrorBoundary>
                 <RedirectProvider>
                   {children}
                 </RedirectProvider>
-              </DialogContextProvider>
-              <NotificationGroup />
-            </body>
-          </ErrorBoundary>
+                <NotificationGroup />
+              </ErrorBoundary>
+            </DialogContextProvider>
+          </body>
         </StoreProvider>
       </GenAiClerkProvider>
     </html>

AI/GenAI-ChatBot-application-sample/src/app/layout.tsx

@@ -25,7 +25,7 @@ const RedirectProvider = ({ children }: RedirectProviderProps) => {
         const authFromStorage = localStorage.getItem('genAi');
         const auth = authFromStorage ? JSON.parse(authFromStorage) as Auth : authInitialState;
 
-        if (!auth.isSuccess) {
+        if (!auth.accessToken) {
             router.replace(ROUTES.BASE)
         } else {
             dispatch(setAuth(auth))
@@ -34,6 +34,8 @@ const RedirectProvider = ({ children }: RedirectProviderProps) => {
                 router.push(`${ROUTES.BASE}${ROUTES.CHAT}`)
             }
         }
+
+        dispatch(setAuth({ ...auth, isSuccess: true }));
     }, [router, pathname, dispatch])
 
     return children;

AI/GenAI-ChatBot-application-sample/src/app/providers/redirectProvider.tsx

@@ -20,7 +20,7 @@ export const paginationApiMockResponseInitial: PaginationApiResponse<any> = {
   isSuccess: false,
 }
 
-export const BASE_URL = 'staging.api.workloads.netapp.com';
+export const BASE_URL = 'api.workloads.netapp.com';
 
 export const selfHandleErrors = (args: ApiRequest, api: any) => {
   if (args.isSelfHandleErrors) {

AI/GenAI-ChatBot-application-sample/src/lib/api/api.slice.ts

@@ -28,7 +28,10 @@ const chatSlice = createSlice({
             state.messages = [];
         },
         resetChat(state) {
-            return initialState
+            return {
+                ...initialState,
+                chatId: Date.now().toString()
+            }
         }
     }
 })