feat: Reset buton functionality (#3764)

* Reset buton functionality

* Remove loading from ref

* Fixes

* Lint fix

* review changes

Author: akucharska

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

@@ -13,46 +13,50 @@ import getChatResponse from 'components/KymaCompanion/api/getChatResponse';
 import { usePromptSuggestions } from 'components/KymaCompanion/hooks/usePromptSuggestions';
 import './Chat.scss';
 
-interface MessageType {
+export interface MessageType {
   author: 'user' | 'ai';
   messageChunks: MessageChunk[];
   isLoading: boolean;
   suggestions?: string[];
   suggestionsLoading?: boolean;
 }
 
-export default function Chat() {
+type ChatProps = {
+  chatHistory: MessageType[];
+  setChatHistory: React.Dispatch<React.SetStateAction<MessageType[]>>;
+  loading: boolean;
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  isReset: boolean;
+  setIsReset: React.Dispatch<React.SetStateAction<boolean>>;
+  error: string | null;
+  setError: React.Dispatch<React.SetStateAction<string | null>>;
+};
+
+export const Chat = ({
+  chatHistory,
+  setChatHistory,
+  error,
+  setError,
+  loading,
+  setLoading,
+  isReset,
+  setIsReset,
+}: ChatProps) => {
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [inputValue, setInputValue] = useState<string>('');
-  const [chatHistory, setChatHistory] = useState<MessageType[]>([
-    {
-      author: 'ai',
-      messageChunks: [
-        {
-          data: {
-            answer: {
-              content: t('kyma-companion.introduction'),
-              next: '__end__',
-            },
-          },
-        },
-      ],
-      isLoading: false,
-      suggestionsLoading: true,
-    },
-  ]);
-  const [error, setError] = useState<string | null>(null);
+
   const sessionID = useRecoilValue<string>(sessionIDState);
   const cluster = useRecoilValue<any>(clusterState);
   const authData = useRecoilValue<any>(authDataState);
-  const [loading, setLoading] = useState<boolean>(false);
 
   const {
     initialSuggestions,
     initialSuggestionsLoading,
     currentResource,
-  } = usePromptSuggestions({ skip: chatHistory.length > 1 });
+  } = usePromptSuggestions(isReset, setIsReset, {
+    skip: chatHistory.length > 1,
+  });
 
   const addMessage = ({ author, messageChunks, isLoading }: MessageType) => {
     setChatHistory(prevItems =>
@@ -285,4 +289,4 @@ export default function Chat() {
       </div>
     </FlexBox>
   );
-}
+};

src/components/KymaCompanion/components/KymaCompanion.tsx

@@ -1,18 +1,52 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Card, Title } from '@ui5/webcomponents-react';
 import { useRecoilState } from 'recoil';
 import {
   ShowKymaCompanion,
   showKymaCompanionState,
 } from 'state/companion/showKymaCompanionAtom';
-import Chat from './Chat/Chat';
+import { Chat, MessageType } from './Chat/Chat';
 import './KymaCompanion.scss';
 
 export default function KymaCompanion() {
   const { t } = useTranslation();
+
+  const initialChatHistory: MessageType[] = [
+    {
+      author: 'ai',
+      messageChunks: [
+        {
+          data: {
+            answer: {
+              content: t('kyma-companion.introduction'),
+              next: '__end__',
+            },
+          },
+        },
+      ],
+      isLoading: false,
+      suggestionsLoading: true,
+    },
+  ];
+
   const [showCompanion, setShowCompanion] = useRecoilState<ShowKymaCompanion>(
     showKymaCompanionState,
   );
+  const [loading, setLoading] = useState<boolean>(false);
+  const [isReset, setIsReset] = useState<boolean>(false);
+  const [chatHistory, setChatHistory] = useState<MessageType[]>(
+    initialChatHistory,
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  function handleRefresh() {
+    setChatHistory(() => {
+      return initialChatHistory;
+    });
+    setError(null);
+    setIsReset(true);
+  }
 
   return (
     <div id="companion_wrapper" className="sap-margin-tiny">
@@ -27,9 +61,10 @@ export default function KymaCompanion() {
               <Button
                 design="Transparent"
                 icon="restart"
+                disabled={loading}
                 tooltip={t('common.buttons.reset')}
                 className="action"
-                onClick={() => {}}
+                onClick={() => handleRefresh()}
               />
               <Button
                 design="Transparent"
@@ -57,7 +92,16 @@ export default function KymaCompanion() {
           </div>
         }
       >
-        <Chat />
+        <Chat
+          loading={loading}
+          setLoading={setLoading}
+          chatHistory={chatHistory}
+          setChatHistory={setChatHistory}
+          isReset={isReset}
+          setIsReset={setIsReset}
+          error={error}
+          setError={setError}
+        />
       </Card>
     </div>
   );

src/components/KymaCompanion/hooks/usePromptSuggestions.ts

@@ -30,7 +30,13 @@ const getResourceFromColumnnLayout = (
   };
 };
 
-export function usePromptSuggestions(options?: { skip?: boolean }) {
+export function usePromptSuggestions(
+  isReset: boolean,
+  setIsReset: React.Dispatch<React.SetStateAction<boolean>>,
+  options?: {
+    skip?: boolean;
+  },
+) {
   const post = usePost();
   const [initialSuggestions, setInitialSuggestions] = useState<string[]>([]);
   const setSessionID = useSetRecoilState(sessionIDState);
@@ -93,11 +99,15 @@ export function usePromptSuggestions(options?: { skip?: boolean }) {
       }
     }
 
-    if (resourceType && fetchedResourceRef.current !== resourceKey) {
+    if (
+      resourceType &&
+      (fetchedResourceRef.current !== resourceKey || isReset)
+    ) {
       fetchedResourceRef.current = resourceKey;
       fetchSuggestions();
+      setIsReset(false);
     }
-  }, [currentResource, options?.skip, post, setSessionID]);
+  }, [currentResource, options?.skip, post, setSessionID, isReset, setIsReset]);
 
   return {
     initialSuggestions,