Fixed bot response loading animation

copilot-ui/src/actions/ActionProvider.tsx

@@ -2,7 +2,6 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { createClientMessage } from 'react-chatbot-kit';
 import useWebSocket, { ReadyState } from 'react-use-websocket';
 import Loader from '../components/Loader';
-import Loader2 from '../components/Loader2';
 
 const API_QUERY = 'https://copilot-tg-26bfd0cd-6582-414e-937e-e2c83ecb5a79.us-east-1.i.tgcloud.io/Transaction_Fraud/query'
 const WS_URL = 'ws://0.0.0.0:8000/ui/Demo_Graph1/chat';
@@ -17,7 +16,6 @@ const ActionProvider: React.FC<ActionProviderProps> = ({ createChatBotMessage, s
   const [socketUrl, setSocketUrl] = useState(WS_URL);
   const [messageHistory, setMessageHistory] = useState<MessageEvent<any>[]>([]);
   const { sendMessage, lastMessage, readyState } = useWebSocket(socketUrl);
-  const [showLoad, setLoad] = useState(false);
 
   // eslint-disable-next-line
   // @ts-ignore
@@ -26,12 +24,6 @@ const ActionProvider: React.FC<ActionProviderProps> = ({ createChatBotMessage, s
   });
 
 
-  const queryCopilotWs = ((msg:string) => {
-    setLoad(true);
-    sendMessage(msg)
-  });
-
-
   useWebSocket(WS_URL, {
     onOpen: () => {
       queryCopilotWs2('dXNlcl8yOlRoaXNpc3RoZWFkbWluITE=')
@@ -50,18 +42,28 @@ const ActionProvider: React.FC<ActionProviderProps> = ({ createChatBotMessage, s
 
   const defaultQuestions = (msg: string) => {
     if (msg === 'Tell me about transaction fraud.') {
-      console.log(msg)
       handleTransactionFraud(msg);
     } else {
-      setLoad(true);
       const clientMessage = createClientMessage(msg, {
-        delay: 1300,
+        delay: 300,
       });
       updateState(clientMessage);
       queryCopilotWs(msg);
     }
   }
 
+
+  const queryCopilotWs = (msg) => {    
+    const queryCopilotWsTest = ((msg:string) => {sendMessage(msg)});
+    queryCopilotWsTest(msg);
+    const loading = createChatBotMessage(<Loader />)
+    setState((prev: any) => ({
+      ...prev,
+      messages: [...prev.messages, loading]
+    }))
+  }
+
+
   const handleTransactionFraud = (msg) => {
     console.log(msg)
     const clientMessage = createClientMessage(msg, {
@@ -78,20 +80,14 @@ const ActionProvider: React.FC<ActionProviderProps> = ({ createChatBotMessage, s
 
   useEffect(() => {
     if (lastMessage !== null) {
-      const loading = createChatBotMessage(<Loader />)
-      setState((prev: any) => ({
-        ...prev,
-        messages: [...prev.messages, loading]
-      }));
       setMessageHistory((prev) => prev.concat(lastMessage));
-      setTimeout(() => {
+      // setTimeout(() => {
         const botMessage = createChatBotMessage(JSON.parse(lastMessage.data));
-        setLoad(false);
         setState((prev) => {
           const newPrevMsg = prev.messages.slice(0, -1)
           return { ...prev, messages: [...newPrevMsg, botMessage], }
         })
-      }, 600);
+      // }, 300);
     } 
   }, [lastMessage]);
 
@@ -131,17 +127,12 @@ const ActionProvider: React.FC<ActionProviderProps> = ({ createChatBotMessage, s
 
   return (
     <div>
-      {/* {showLoad ? <div className='absolute bottom-[25%] right-[60%] z-[5000]'><Loader /></div> : null} */}
-      {showLoad ? <div className='absolute w-[100%] h-[100%] bg-[#272022] bg-opacity-75 z-[5001]'><Loader2 /></div> : null}
-
-      {/* {showLoad ? <Loader2 /> : null} */}
       <span className='absolute bottom-0 pl-2 z-[5000] text-[8px] text-[#666]'>The WebSocket is currently {connectionStatus}</span>
       {React.Children.map(children, (child) => {
         return React.cloneElement(child, {
           actions: {
             defaultQuestions,
             handleTransactionFraud,
-            // queryCopilot,
             queryCopilotWs
           },
         });

copilot-ui/src/components/CustomChatMessage.tsx

@@ -6,8 +6,6 @@ import { IoMdCopy } from "react-icons/io";
 import { PiArrowsCounterClockwiseFill } from "react-icons/pi";
 import { LuInfo } from "react-icons/lu";
 
-import { SetStateAction } from "react";
-
 // interface IChatbotMessageProps {
 //   message?: any;
 // }
@@ -37,10 +35,8 @@ export const CustomChatMessage: FC<IChatbotMessageProps> = ({ message }: IChatbo
 
   return (
     <>
-    {/* {JSON.stringify(typeof message)} */}
-
       {typeof message === 'string' ? (
-        <div className="text-sm max-w-[230px] md:max-w-[80%] mt-7 mb-7">
+        <div className="text-sm max-w-[230px] md:max-w-[80%] mt-7 mb-7">  
           <p className="typewriter">{message}</p>
           <div className="flex mt-3">
 
@@ -56,15 +52,16 @@ export const CustomChatMessage: FC<IChatbotMessageProps> = ({ message }: IChatbo
             <div className="w-[28px] h-[28px] bg-shadeA flex items-center justify-center rounded-sm mr-1 cursor-pointer" onClick={() => alert('Regenerate!!')}>
               <PiArrowsCounterClockwiseFill className='text-[15px]' />
             </div>
-            <div className="w-auto h-[28px] bg-shadeA flex items-center justify-center rounded-sm mr-1 px-2 cursor-pointer" onClick={() => alert('explain!!')}>
+            <div className="w-auto h-[28px] bg-shadeA flex items-center justify-center rounded-sm mr-1 px-2 cursor-pointer" onClick={() => explain()}>
               <LuInfo className='text-[15px] mr-1' />
               <span className="text-xs">Explain</span>
             </div>
 
           </div>
         </div>
       ) : (
-        <div className="text-sm max-w-[230px] md:max-w-[80%] mt-7 mb-7">
+        message.key === null ? message : (
+          <div className="text-sm max-w-[230px] md:max-w-[80%] mt-7 mb-7">
           <p className="typewriter">{message.natural_language_response}</p>
           <div className="flex mt-3">
 
@@ -93,6 +90,7 @@ export const CustomChatMessage: FC<IChatbotMessageProps> = ({ message }: IChatbo
           </p> : null}
 
         </div>
+        )
       )}
 
 

copilot-ui/src/index.css

@@ -123,6 +123,11 @@
   font-family: Urbane-Light, Arial, serif;
 }
 
+.chatbot-loader-container {
+  display: inline !important;
+  padding-top: 28px !important; 
+}
+
 .bg-popover {
   background-color: hsl(var(--popover));
 }