H3126 | Case : Call button in the Chat Widget (OLD)

app/globals.css

@@ -4,12 +4,24 @@
 @plugin "daisyui";
 @plugin "@tailwindcss/typography";
 
+/* Hide Scrollbar */
+* {
+  scrollbar-width: none;
+}
+
+::-webkit-scrollbar {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: none;
+}
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
   --message-card-background: #f0f0f0;
   --icon-color: #555555;
-  --drawer-color: #f2f2f2;
+  --drawer-color: #ffffff;
 }
 
 [data-theme="dark"] {
@@ -88,4 +100,8 @@ html:has(.drawer-toggle:checked) {
 
 [data-theme="dark"] .icn {
   @apply hover:bg-gray-800 hover:text-gray-200
+}
+
+input, select {
+  outline: none !important;
 }

components/Chatbot/Chatbot.tsx

@@ -1,11 +1,17 @@
 import { LinearProgress } from '@mui/material';
+import { RefreshCw } from 'lucide-react';
 import Image from 'next/image';
 import React, { useEffect, useMemo, useRef } from 'react';
 
 // Context and hooks
 import { MessageContext } from '../Interface-Chatbot/InterfaceChatbot';
 import { useReduxStateManagement } from './hooks/useReduxManagement';
 import useRtlayerEventManager from './hooks/useRtlayerEventManager';
+import { installSocketLogger } from './utils/socketLogger';
+
+// Install the dev-only realtime logger at module load (before any fetch/axios
+// call can fire). The function is a true no-op in production.
+installSocketLogger();
 
 // Components
 import FormComponent from '../FormComponent';
@@ -26,6 +32,7 @@ import { useCustomSelector } from '@/utils/deepCheckSelector';
 import { useChatEffects } from './hooks/useChatEffects';
 import { useColor } from './hooks/useColor';
 import { useHelloEffects } from './hooks/useHelloEffects';
+import { useRetryChats } from './hooks/useHelloIntegration';
 import { useReduxEffects } from './hooks/useReduxEffects';
 import { useScreenSize } from './hooks/useScreenSize';
 
@@ -67,7 +74,7 @@ const ActiveChatView = React.memo(() => (
     <div className="w-full h-full overflow-hidden relative flex-1">
       <MessageList />
     </div>
-    <div className="max-w-5xl mx-auto p-3 pb-3 w-full">
+    <div className="max-w-5xl mx-auto p-3 pb-3 w-full bg-white">
       <ChatbotTextField />
     </div>
   </div>
@@ -80,21 +87,24 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
   const messageRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
   const timeoutIdRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { backgroundColor } = useColor();
+  const { primaryTextColor } = useColor();
   const { isSmallScreen } = useScreenSize();
   const dispatch = useAppDispatch();
+  const retryChats = useRetryChats();
 
   // State management
-  const { show_widget_form, greetingMessage, isToggledrawer, chatsLoading, messageIds, subThreadId, helloMsgIds } = useCustomSelector((state) => {
+  const { show_widget_form, greetingMessage, isToggledrawer, chatsLoading, chatsError, messageIds, subThreadId, helloMsgIds, show_msg91 } = useCustomSelector((state) => {
     const widgetInfo = state.Hello?.[chatSessionId]?.widgetInfo
     return ({
       show_widget_form: typeof widgetInfo?.show_widget_form === 'boolean' ? widgetInfo?.show_widget_form : state.Hello?.[chatSessionId]?.showWidgetForm,
       greetingMessage: state.Hello?.[chatSessionId]?.greeting as any,
       isToggledrawer: state.Chat.isToggledrawer,
       chatsLoading: state.Chat.chatsLoading,
+      chatsError: state.Chat.chatsError,
       messageIds: state.Chat.messageIds,
       subThreadId: state.Chat.subThreadId,
-      helloMsgIds: state.Chat.helloMsgIds
+      helloMsgIds: state.Chat.helloMsgIds,
+      show_msg91: state.Hello?.[chatSessionId]?.widgetInfo?.show_msg91 || false,
     })
   });
 
@@ -157,13 +167,29 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
           {/* Mobile header */}
           <ChatbotHeader />
 
-          {/* Loading indicator */}
-          {chatsLoading && (
+          {/* Loading / retry indicator */}
+          {(chatsLoading || chatsError) && (
             <div className="w-full">
-              <LinearProgress
-                color="inherit"
-                style={{ color: backgroundColor }}
-              />
+              {chatsLoading && (
+                <LinearProgress
+                  color="inherit"
+                  style={{ color: primaryTextColor }}
+                />
+              )}
+              {chatsError && (
+                <div className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs bg-red-50 text-red-700 border-b border-red-100">
+                  <span>Couldn't load chat history.</span>
+                  <button
+                    type="button"
+                    onClick={() => retryChats()}
+                    disabled={chatsLoading}
+                    className="inline-flex items-center gap-1 font-medium underline disabled:opacity-50 disabled:cursor-not-allowed hover:text-red-900"
+                  >
+                    <RefreshCw size={12} className={chatsLoading ? 'animate-spin' : ''} />
+                    Retry
+                  </button>
+                </div>
+              )}
             </div>
           )}
 
@@ -179,6 +205,39 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
           ) : (
             <ActiveChatView />
           )}
+
+          {/* Branding footer */}
+          {((isHelloUser && show_msg91) || !isHelloUser) && (
+            <div className="px-4 pb-2 pt-1 flex items-center justify-center">
+              <div className="text-[11px] text-gray-500 flex items-center gap-1">
+                {isHelloUser && show_msg91 ? (
+                  <>
+                    <span>Powered by</span>
+                    <a
+                      href="https://msg91.com"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center hover:opacity-80 transition-opacity"
+                    >
+                      <img src="/msg91-logo.svg" alt="MSG91" className="h-3.5" />
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    <span>Powered by</span>
+                    <a
+                      href="https://gtwy.ai"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="hover:opacity-80 transition-opacity"
+                    >
+                      <span className="font-bold">GTWY</span>
+                    </a>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </MessageContext.Provider>

components/Chatbot/hooks/chatReducer.ts

@@ -15,6 +15,7 @@ export const initialChatState: ChatState = {
   // Loading States
   loading: false,
   chatsLoading: false,
+  chatsError: false,
   isFetching: false,
 
   // UI States
@@ -101,6 +102,11 @@ export const chatReducer = (state: ChatState, action: ChatAction): ChatState =>
         ...state,
         chatsLoading: action.payload
       };
+    case ChatActionTypes.SET_CHATS_ERROR:
+      return {
+        ...state,
+        chatsError: action.payload
+      };
     case ChatActionTypes.SET_OPTIONS:
       return {
         ...state,

components/Chatbot/hooks/chatTypes.ts

@@ -26,6 +26,7 @@ export interface ChatState {
   helloMsgIdAndDataMap: { [subThreadId: string]: { [msgId: string]: any } }
   loading: boolean;
   chatsLoading: boolean;
+  chatsError: boolean;
   options: any[];
   images: string[];
   threadId: string;
@@ -54,6 +55,7 @@ export interface ReduxSetterActionType {
   helloMessages?: any[];
   loading?: boolean;
   chatsLoading?: boolean;
+  chatsError?: boolean;
   options?: any[];
   images?: string[] | Array<{ path: string }>;
   threadId?: string;
@@ -78,6 +80,7 @@ export enum ChatActionTypes {
   UPDATE_LAST_ASSISTANT_MESSAGE = 'UPDATE_LAST_ASSISTANT_MESSAGE',
   SET_LOADING = 'SET_LOADING',
   SET_CHATS_LOADING = 'SET_CHATS_LOADING',
+  SET_CHATS_ERROR = 'SET_CHATS_ERROR',
   SET_OPTIONS = 'SET_OPTIONS',
   SET_IMAGES = 'SET_IMAGES',
   CLEAR_IMAGES = 'CLEAR_IMAGES',
@@ -112,6 +115,7 @@ export type ChatAction =
   | { type: ChatActionTypes.UPDATE_LAST_ASSISTANT_MESSAGE; payload: Partial<MessageType> }
   | { type: ChatActionTypes.SET_LOADING; payload: boolean }
   | { type: ChatActionTypes.SET_CHATS_LOADING; payload: boolean }
+  | { type: ChatActionTypes.SET_CHATS_ERROR; payload: boolean }
   | { type: ChatActionTypes.SET_OPTIONS; payload: any[] }
   | { type: ChatActionTypes.SET_IMAGES; payload: string[] }
   | { type: ChatActionTypes.CLEAR_IMAGES }

components/Chatbot/hooks/useChatActions.ts

@@ -2,7 +2,7 @@ import { ChatContext } from '@/components/Chatbot-Wrapper/ChatbotWrapper';
 import { errorToast } from '@/components/customToast';
 import { MessageContext } from '@/components/Interface-Chatbot/InterfaceChatbot';
 import { getAllThreadsApi, getPreviousMessage, sendDataToAction, sendFeedbackAction } from '@/config/api';
-import { removeMessages, setChatsLoading, setData, setHelloEventMessage, setImages, setInitialMessages, setIsFetching, setLoading, setNewMessage, setOptions, setPaginateMessages, setStarterQuestions, setToggleDrawer, updateLastAssistantMessage, updateSingleMessage } from '@/store/chat/chatSlice';
+import { removeMessages, setChatsError, setChatsLoading, setData, setHelloEventMessage, setImages, setInitialMessages, setIsFetching, setLoading, setNewMessage, setOptions, setPaginateMessages, setStarterQuestions, setToggleDrawer, updateLastAssistantMessage, updateSingleMessage } from '@/store/chat/chatSlice';
 import { setThreads } from '@/store/interface/interfaceSlice';
 import { useCustomSelector } from '@/utils/deepCheckSelector';
 import { PAGE_SIZE } from '@/utils/enums';
@@ -258,6 +258,7 @@ export const useChatActions = () => {
         setToggleDrawer: (payload: boolean) => globalDispatch(setToggleDrawer(payload)),
         setLoading: (payload: boolean) => globalDispatch(setLoading(payload)),
         setChatsLoading: (payload: boolean) => globalDispatch(setChatsLoading(payload)),
+        setChatsError: (payload: boolean) => globalDispatch(setChatsError(payload)),
         setImages: (payload: string[]) => globalDispatch(setImages(payload)),
         setOptions: (payload: string[]) => globalDispatch(setOptions(payload)),
         setNewMessage: (payload: boolean) => globalDispatch(setNewMessage(payload)),

components/Chatbot/hooks/useColor.ts

@@ -1,10 +1,22 @@
-import { isColorLight } from "@/utils/themeUtility";
+import { getGradientBackground, isColorLight, withAlpha } from "@/utils/themeUtility";
 import { useTheme } from "@mui/material";
 
 export const useColor = () => {
     const theme = useTheme();
-    const backgroundColor = theme.palette.primary.main;
-    const textColor = isColorLight(backgroundColor) ? "black" : "white";
+    const primaryColor = theme.palette.primary.main;
+    const isLight = isColorLight(primaryColor);
+    const textColor = isLight ? "black" : "white";
 
-    return { backgroundColor, textColor }
+    return {
+      primaryBgColor: primaryColor,
+      // Kept separate from primaryBgColor so the text color can be customized independently in the future.
+      primaryTextColor: primaryColor,
+      foregroundColor: textColor,
+      primaryGradientBg: getGradientBackground(primaryColor),
+      primaryTintColor: withAlpha(primaryColor, 0.12),
+      primaryHoverTintColor: withAlpha(primaryColor, 0.08),
+      headerHoverBg: isLight
+        ? "rgba(0, 0, 0, 0.08)"
+        : "rgba(255, 255, 255, 0.18)",
+    }
 }