feat: add loading indicator, and refresh when navigate to different resource

Author: chriskari

backend/companion/TokenManager.js

@@ -35,8 +35,9 @@ export class TokenManager {
   getExpirationFromJWT(token) {
     try {
       // Split the token and get the payload
+      const PAYLOAD_INDEX = 1;
       const payload = JSON.parse(
-        Buffer.from(token.split('.')[1], 'base64').toString(),
+        Buffer.from(token.split('.')[PAYLOAD_INDEX], 'base64').toString(),
       );
       // exp is in seconds, convert to milliseconds
       return payload.exp * 1000;

src/components/KymaCompanion/components/Chat/Chat.tsx

@@ -16,10 +16,19 @@ interface MessageType {
   author: 'user' | 'ai';
   messageChunks: { step: string; result: string }[];
   isLoading: boolean;
-  suggestions?: any[];
+  suggestions?: string[];
+  suggestionsLoading?: boolean;
 }
 
-export default function Chat({ suggestions }: { suggestions: string[] }) {
+interface ChatProps {
+  initialSuggestions: string[];
+  initialSuggestionsLoading: boolean;
+}
+
+export default function Chat({
+  initialSuggestions,
+  initialSuggestionsLoading,
+}: ChatProps) {
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [inputValue, setInputValue] = useState<string>('');
@@ -30,6 +39,7 @@ export default function Chat({ suggestions }: { suggestions: string[] }) {
         { step: 'output', result: t('kyma-companion.introduction') },
       ],
       isLoading: false,
+      suggestionsLoading: true,
     },
   ]);
   const [errorOccured, setErrorOccured] = useState<boolean>(false);
@@ -46,6 +56,7 @@ export default function Chat({ suggestions }: { suggestions: string[] }) {
   const handleChatResponse = (response: any) => {
     const isLoading = response?.step !== 'output';
     if (!isLoading) {
+      setFollowUpLoading();
       getFollowUpQuestions({
         sessionID,
         handleFollowUpQuestions,
@@ -65,12 +76,24 @@ export default function Chat({ suggestions }: { suggestions: string[] }) {
     });
   };
 
-  const handleFollowUpQuestions = (questions: any) => {
+  const setFollowUpLoading = () => {
     setChatHistory(prevMessages => {
       const [latestMessage] = prevMessages.slice(-1);
-      return prevMessages
-        .slice(0, -1)
-        .concat({ ...latestMessage, suggestions: questions });
+      return prevMessages.slice(0, -1).concat({
+        ...latestMessage,
+        suggestionsLoading: true,
+      });
+    });
+  };
+
+  const handleFollowUpQuestions = (questions: string[]) => {
+    setChatHistory(prevMessages => {
+      const [latestMessage] = prevMessages.slice(-1);
+      return prevMessages.slice(0, -1).concat({
+        ...latestMessage,
+        suggestions: questions,
+        suggestionsLoading: false,
+      });
     });
   };
 
@@ -115,11 +138,15 @@ export default function Chat({ suggestions }: { suggestions: string[] }) {
   };
 
   useEffect(() => {
-    if (suggestions.length && chatHistory.length === 1) {
-      handleFollowUpQuestions(suggestions);
+    if (chatHistory.length === 1) {
+      if (initialSuggestionsLoading) {
+        setFollowUpLoading();
+      } else if (initialSuggestions.length) {
+        handleFollowUpQuestions(initialSuggestions);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [suggestions]);
+  }, [initialSuggestions, initialSuggestionsLoading]);
 
   useEffect(() => {
     const delay = errorOccured ? 500 : 0;
@@ -150,6 +177,7 @@ export default function Chat({ suggestions }: { suggestions: string[] }) {
                 <Bubbles
                   onClick={sendPrompt}
                   suggestions={message.suggestions}
+                  isLoading={message.suggestionsLoading ?? false}
                 />
               )}
             </React.Fragment>

src/components/KymaCompanion/components/Chat/messages/Bubbles.scss

@@ -1,3 +1,7 @@
+.suggestions-loading-indicator {
+  align-self: flex-start;
+}
+
 .bubbles-container {
   max-width: 90%;
   gap: 8px;

src/components/KymaCompanion/components/Chat/messages/Bubbles.tsx

@@ -1,15 +1,28 @@
-import { Button, FlexBox } from '@ui5/webcomponents-react';
+import { BusyIndicator, Button, FlexBox } from '@ui5/webcomponents-react';
 import './Bubbles.scss';
 
 interface BubblesProps {
   suggestions: any[] | undefined;
+  isLoading: boolean;
   onClick: (suggestion: string) => void;
 }
 
 export default function Bubbles({
   suggestions,
+  isLoading,
   onClick,
 }: BubblesProps): JSX.Element {
+  if (isLoading) {
+    return (
+      <BusyIndicator
+        className="suggestions-loading-indicator sap-margin-begin-tiny"
+        active
+        size="M"
+        delay={0}
+      />
+    );
+  }
+
   return suggestions ? (
     <FlexBox
       wrap="Wrap"

src/components/KymaCompanion/components/KymaCompanion.tsx

@@ -14,7 +14,7 @@ export default function KymaCompanion() {
   const [showCompanion, setShowCompanion] = useRecoilState<ShowKymaCompanion>(
     showKymaCompanionState,
   );
-  const suggestions = usePromptSuggestions();
+  const { suggestions, loading: suggestionsLoading } = usePromptSuggestions();
 
   return (
     <div id="companion_wrapper" className="sap-margin-tiny">
@@ -29,6 +29,7 @@ export default function KymaCompanion() {
               <Button
                 design="Transparent"
                 icon="restart"
+                tooltip={t('common.buttons.reset')}
                 className="action"
                 onClick={() => {}}
               />
@@ -48,6 +49,7 @@ export default function KymaCompanion() {
               <Button
                 design="Transparent"
                 icon="decline"
+                tooltip={t('common.buttons.close')}
                 className="action"
                 onClick={() =>
                   setShowCompanion({ show: false, fullScreen: false })
@@ -57,7 +59,10 @@ export default function KymaCompanion() {
           </div>
         }
       >
-        <Chat suggestions={suggestions} />
+        <Chat
+          initialSuggestions={suggestions}
+          initialSuggestionsLoading={suggestionsLoading}
+        />
       </Card>
     </div>
   );

src/components/KymaCompanion/hooks/usePromptSuggestions.ts

@@ -1,30 +1,32 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { sessionIDState } from '../../../state/companion/sessionIDAtom';
 import getPromptSuggestions from '../api/getPromptSuggestions';
 import { ColumnLayoutState, columnLayoutState } from 'state/columnLayoutAtom';
 import { prettifyNameSingular } from 'shared/utils/helpers';
 import { usePost } from 'shared/hooks/BackendAPI/usePost';
 
+const getResourceFromColumnnLayout = (columnLayout: ColumnLayoutState) => {
+  const column =
+    columnLayout?.endColumn ??
+    columnLayout?.midColumn ??
+    columnLayout?.startColumn;
+  return {
+    namespace: column?.namespaceId ?? '',
+    resourceType: prettifyNameSingular(column?.resourceType ?? ''),
+    apiGroup: column?.apiGroup ?? '',
+    apiVersion: column?.apiVersion ?? '',
+    resourceName: column?.resourceName ?? '',
+  };
+};
+
 export function usePromptSuggestions() {
+  const post = usePost();
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const setSessionID = useSetRecoilState(sessionIDState);
   const columnLayout = useRecoilValue(columnLayoutState);
-  const post = usePost();
-
-  const getResourceFromColumnnLayout = (columnLayout: ColumnLayoutState) => {
-    const column =
-      columnLayout?.endColumn ??
-      columnLayout?.midColumn ??
-      columnLayout?.startColumn;
-    return {
-      namespace: column?.namespaceId ?? '',
-      resourceType: prettifyNameSingular(column?.resourceType ?? ''),
-      apiGroup: column?.apiGroup ?? '',
-      apiVersion: column?.apiVersion ?? '',
-      resourceName: column?.resourceName ?? '',
-    };
-  };
+  const [loading, setLoading] = useState(false);
+  const fetchedResourceRef = useRef('');
 
   useEffect(() => {
     const {
@@ -36,24 +38,32 @@ export function usePromptSuggestions() {
     } = getResourceFromColumnnLayout(columnLayout);
     const groupVersion = apiGroup ? `${apiGroup}/${apiVersion}` : apiVersion;
 
+    const resourceKey = `${namespace}|${resourceType}|${groupVersion}|${resourceName}`.toLocaleLowerCase();
+
     async function fetchSuggestions() {
-      const result = await getPromptSuggestions({
-        post,
-        namespace: namespace,
-        resourceType: resourceType,
-        groupVersion: groupVersion,
-        resourceName: resourceName,
-      });
-      if (result) {
-        setSuggestions(result.promptSuggestions);
-        setSessionID(result.conversationId);
+      setLoading(true);
+      try {
+        const result = await getPromptSuggestions({
+          post,
+          namespace: namespace,
+          resourceType: resourceType,
+          groupVersion: groupVersion,
+          resourceName: resourceName,
+        });
+        if (result) {
+          setSuggestions(result.promptSuggestions);
+          setSessionID(result.conversationId);
+        }
+      } finally {
+        setLoading(false);
       }
     }
 
-    if (resourceType && suggestions.length === 0) {
+    if (resourceType && fetchedResourceRef.current !== resourceKey) {
+      fetchedResourceRef.current = resourceKey;
       fetchSuggestions();
     }
-  }, [columnLayout, suggestions, post, setSessionID]);
+  }, [columnLayout, post, setSessionID]);
 
-  return suggestions;
+  return { suggestions, loading };
 }