feat: added data test id

components/Chatbot-Preview/ChatbotPreview.tsx

@@ -30,6 +30,7 @@ function ChatbotPreview({ onThemeChange }) {
         position: "relative",
         // backgroundColor: theme.palette.background.default,
       }}
+      data-testid="chatbot-preview-box"
     >
       <ChatbotHeaderPreview
         title="Chatbot Header"

components/Chatbot/Chatbot.tsx

@@ -41,7 +41,7 @@ interface ChatbotProps {
 
 // Memoized components
 const EmptyChatView = React.memo(() => (
-  <div className="flex-1 flex flex-col items-center justify-center w-full max-w-5xl mx-auto mt-[-84px] p-5">
+  <div className="flex-1 flex flex-col items-center justify-center w-full max-w-5xl mx-auto mt-[-84px] p-5" data-testid="chatbot-empty-view">
     <div className="flex flex-col items-center w-full">
       <Image
         src={ChatBotGif}
@@ -50,8 +50,9 @@ const EmptyChatView = React.memo(() => (
         width={100}
         height={100}
         priority
+        data-testid="chatbot-empty-gif"
       />
-      <h2 className="text-xl font-bold text-base-content">
+      <h2 className="text-xl font-bold text-base-content" data-testid="chatbot-empty-title">
         What can I help with?
       </h2>
     </div>
@@ -63,11 +64,11 @@ const EmptyChatView = React.memo(() => (
 ));
 
 const ActiveChatView = React.memo(() => (
-  <div className="flex flex-col h-full overflow-auto" style={{ height: '100vh' }}>
-    <div className="flex-1 overflow-y-auto max-w-5xl mx-auto w-full scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
+  <div className="flex flex-col h-full overflow-auto" style={{ height: '100vh' }} data-testid="chatbot-active-view">
+    <div className="flex-1 overflow-y-auto max-w-5xl mx-auto w-full scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent" data-testid="chatbot-messages-container">
       <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" data-testid="chatbot-input-section">
       <ChatbotTextField />
     </div>
   </div>
@@ -143,23 +144,23 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
 
   return (
     <MessageContext.Provider value={contextValue}>
-      <div className="flex h-screen w-full overflow-hidden relative">
+      <div className="flex h-screen w-full overflow-hidden relative" data-testid="chatbot-main-container">
         {/* Sidebar - visible on large screens */}
-        <div className={`bg-base-100 overflow-y-auto transition-all duration-300 ease-in-out ${isToggledrawer && !isSmallScreen ? 'w-96 max-w-[286px]' : 'w-0'}`}>
+        <div className={`bg-base-100 overflow-y-auto transition-all duration-300 ease-in-out ${isToggledrawer && !isSmallScreen ? 'w-96 max-w-[286px]' : 'w-0'}`} data-testid="chatbot-sidebar">
           <ChatbotDrawer
             setToggleDrawer={(data: boolean) => { dispatch(setToggleDrawer(data)) }}
             isToggledrawer={isToggledrawer}
           />
         </div>
 
         {/* Main content area */}
-        <div className="flex flex-col w-full">
+        <div className="flex flex-col w-full" data-testid="chatbot-main-content">
           {/* Mobile header */}
           <ChatbotHeader />
 
           {/* Loading indicator */}
           {chatsLoading && (
-            <div className="w-full">
+            <div className="w-full" data-testid="chatbot-loading-indicator">
               <LinearProgress
                 color="inherit"
                 style={{ color: backgroundColor }}

components/Chatbot/hooks/useChatActions.ts

@@ -326,4 +326,4 @@ export const useChatActions = () => {
         setOptions: (payload: string[]) => globalDispatch(setOptions(payload)),
         setNewMessage: (payload: boolean) => globalDispatch(setNewMessage(payload)),
     }), [globalDispatch]);
-};
+};

components/ChatbotPreview.tsx

@@ -30,6 +30,7 @@ function ChatbotPreview({ onThemeChange }) {
         position: "relative",
         // backgroundColor: theme.palette.background.default,
       }}
+      data-testid="chatbot-preview-box"
     >
       <ChatbotHeaderPreview
         title="Chatbot Header"

components/FormComponent.tsx

@@ -133,6 +133,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
     <div
       className={`bg-base-100 dark:bg-slate-800 p-2 px-4 cursor-pointer z-[9999] hover:shadow-md transition-all mx-auto rounded-br-md rounded-bl-md ${isSmallScreen ? 'w-full' : 'w-1/2 max-w-lg'}`}
       onClick={() => setOpen(true)}
+      data-testid="chatbot-form-open-trigger"
       style={{
         background: `linear-gradient(to right, ${backgroundColor}, ${backgroundColor}CC)`,
         color: textColor
@@ -270,13 +271,15 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
               type="button"
               className="btn btn-outline flex-1"
               onClick={() => setOpen(false)}
+              data-testid="chatbot-form-skip-button"
             >
               Skip
             </button>
             <button
               disabled={isLoading}
               type="submit"
               className="btn flex-1"
+              data-testid="chatbot-form-submit-button"
               style={{
                 opacity: isLoading ? 0.5 : 1,
                 backgroundColor: backgroundColor,

components/Grid/Grid.tsx

@@ -61,7 +61,7 @@ function Grid({ componentJson, msgId, ...props }) {
 
   return (
     <GridContext.Provider value={{ gridContextValue, componentJson }}>
-      <Box className="h-full w-full">
+      <Box className="h-full w-full" data-testid="chatbot-interface-grid">
         <React.Suspense fallback={<div>Loading...</div>}>
           <Viewonlygrid />
         </React.Suspense>

components/Grid/ReactGridItemWrapper.tsx

@@ -48,7 +48,7 @@ function ReactGridItemWrapper({ children, onResizeItem, keyName = "" }: any) {
   }, [keyName, dimensions]); // Ensure effect is re-run if keyName changes
 
   return (
-    <div ref={ref} key={keyName} style={{ height: "fit-content" }}>
+    <div ref={ref} key={keyName} style={{ height: "fit-content" }} data-testid={`chatbot-interface-grid-item-${keyName || 'default'}`}>
       {children}
     </div>
   );

components/Grid/Viewonlygrid.tsx

@@ -9,7 +9,7 @@ function Viewonlygrid({ dragRef }) {
   const components = responseTypeJson?.components || responseTypeJson;
 
   return (
-    <Box className="w-full">
+    <Box className="w-full" data-testid="chatbot-interface-view-only-grid">
       {(Array.isArray(components) ? components : [])?.map((component: { type: string }, index: number) => {
         return (
           <div key={component?.id || index}>

components/Hello/RenderHelloAttachmentMessage.tsx

@@ -20,7 +20,7 @@ function RenderHelloAttachmentMessage({ message }: { message: any }) {
   };
 
   return (
-    <div className="attachment-message w-full">
+    <div className="attachment-message w-full" data-testid="chatbot-hello-attachment-message">
       {message?.messageJson?.attachment?.map((item: any, index: number) => (
         <div key={index} className="w-full">
           {renderAttachment(item)}

components/Hello/RenderHelloFeedbackMessage.tsx

@@ -58,7 +58,7 @@ function RenderHelloFeedbackMessage({message,chatSessionId}:{message:any,chatSes
   []);
 
   return (
-    <div className="p-3 bg-base-200 rounded-lg" style={{maxWidth: '400px'}}>
+    <div className="p-3 bg-base-200 rounded-lg" style={{maxWidth: '400px'}} data-testid="chatbot-hello-feedback-message">
       {widgetLogo && (
         <div className="flex justify-center mb-3">
           <img 

components/Hello/RenderHelloInteractiveMessage.tsx

@@ -60,6 +60,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                     key={index}
                     className="btn btn-sm btn-outline w-full max-w-md rounded-md normal-case justify-start px-4 font-medium"
                     onClick={() => sendMessageToHello?.(button?.reply?.title)}
+                    data-testid={`chatbot-hello-interactive-button-${index}`}
                   >
                     {button.reply?.title}
                   </button>

components/Hello/RenderHelloVedioCallMessage.tsx

@@ -25,7 +25,7 @@ function RenderHelloVedioCallMessage({message}:any) {
   };
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2" data-testid="chatbot-hello-video-call-message">
       <button 
         onClick={handleJoinCall}
         style={{ maxWidth: '220px' }}

components/Hello/callUI.tsx

@@ -45,6 +45,7 @@ const CallUI: React.FC = () => {
                                 onClick={endCall}
                                 className="p-2 rounded-full button-hover text-red-500 transition-colors end-button"
                                 aria-label="End Call"
+                                data-testid="chatbot-call-end-button"
                             >
                                 <Phone style={{ transform: 'rotate(135deg)' }} size={18} />
                             </button>
@@ -65,13 +66,15 @@ const CallUI: React.FC = () => {
                                 onClick={toggleMute}
                                 className={`p-2 rounded-full button-hover transition-colors ${isMuted ? 'bg-orange-500' : 'bg-blue-500'} text-white`}
                                 aria-label={isMuted ? 'Unmute' : 'Mute'}
+                                data-testid="chatbot-call-mute-button"
                             >
                                 {isMuted ? <MicOff size={18} /> : <Mic size={18} />}
                             </button>
                             <button
                                 onClick={endCall}
                                 className="p-2 rounded-full button-hover transition-colors bg-red-500 text-white"
                                 aria-label="End Call"
+                                data-testid="chatbot-call-end-button-active"
                             >
                                 <Phone style={{ transform: 'rotate(135deg)' }} size={18} />
                             </button>

components/Interface-Accordion/InterfaceAccordion.tsx

@@ -30,7 +30,7 @@ function InterfaceAccordion({ props, gridId, componentId }: InterfaceAccordionPr
   }
 
   return (
-    <Accordion {...props} onChange={handleChange}>
+    <Accordion {...props} onChange={handleChange} data-testid={`chatbot-interface-accordion-${componentId || 'default'}`}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls='panel1a-content' id='panel1a-header'>
         <Typography>{props?.title || 'Accordion'}</Typography>
       </AccordionSummary>

components/Interface-Box/InterfaceBox.tsx

@@ -8,7 +8,7 @@ interface InterfaceBoxProps {
 
 function InterfaceBox({ props, componentId = '', dragRef = { current: '' }, ingrid = false }: InterfaceBoxProps) {
   return (
-    <Box {...props} className='border-1 p-2   h-100 w-100 box-sizing-border-box '>
+    <Box {...props} className='border-1 p-2   h-100 w-100 box-sizing-border-box ' data-testid={`chatbot-interface-box-${componentId || 'default'}`}>
       <form
         className='nested_grid'
         onSubmit={(e) => {

components/Interface-Button/InterfaceButton.tsx

@@ -35,6 +35,7 @@ function InterfaceButton({ props, action, componentId }: InterfaceButtonProps):
       className="w-100 h-100 mb-1"
       {...props}
       onClick={handleOnClick}
+      data-testid={`chatbot-interface-button-${componentId?.id || 'default'}`}
     >
       {props?.label ||
         props?.children ||

components/Interface-Card/InterfaceCard.tsx

@@ -20,6 +20,7 @@ function InterfaceCard({ props, action }: any) {
     <Card
       sx={{ display: "flex", minWidth: "350px", maxWidth: "100%" }}
       className="mb-2 cursor-pointer" 
+      data-testid="chatbot-interface-card"
     >
       <CardActionArea onClick={handleClickCard}>
         <Box sx={{ display: "flex", flexDirection: "row" }} className="p-1 items-center">

components/Interface-Chatbot/CallButton.tsx

@@ -46,6 +46,7 @@ function CallButton({ chatSessionId, currentChannelId }: CallButtonProps) {
                 }`}
             style={{ backgroundColor: lighten(backgroundColor, 0.8) }}
             onClick={() => { if (!isCallDisabled) handleVoiceCall() }}
+            data-testid="chatbot-call-button"
         >
             <Phone className={`w-4 h-4 md:w-4 md:h-4`} style={{ color: darken(backgroundColor, 0.2) }} />
         </div>

components/Interface-Chatbot/ChatbotDrawer.tsx

@@ -192,6 +192,7 @@ const ChatbotDrawer = ({
               <a
                 className={`${thread?.sub_thread_id === subThreadId ? 'active' : ''}`}
                 onClick={() => handleChangeSubThread(thread?.sub_thread_id)}
+                data-testid={`chatbot-drawer-thread-${thread?.sub_thread_id}`}
               >
                 {thread?.display_name || thread?.sub_thread_id}
               </a>
@@ -221,6 +222,7 @@ const ChatbotDrawer = ({
                     borderColor: channel?.id === currentChatId ? backgroundColor : ''
                   }}
                   onClick={() => handleChangeChannel(channel?.channel, channel?.id, channel?.team_id)}
+                  data-testid={`chatbot-drawer-channel-${channel?.id}`}
                 >
                   <div className="w-9 h-9 flex items-center justify-center text-xs font-bold rounded-full mr-3" style={{ background: lighten(backgroundColor, 0.8), color: "#606060" }}>
                     {(() => {
@@ -309,7 +311,7 @@ const ChatbotDrawer = ({
         <div className="teams-list space-y-0">
           {teamsList.length === 0 ? (
             <div className="flex">
-              <button className="btn w-full" style={{ backgroundColor: backgroundColor, color: textColor }} onClick={handleSendMessageWithNoTeam}>Send us a message</button>
+              <button className="btn w-full" style={{ backgroundColor: backgroundColor, color: textColor }} onClick={handleSendMessageWithNoTeam} data-testid="chatbot-drawer-send-message-no-team">Send us a message</button>
             </div>
           ) : (
             <div className="flex flex-col gap-1">
@@ -318,6 +320,7 @@ const ChatbotDrawer = ({
                   key={`${team?.id}-${index}`}
                   className={`team-card p-3 bg-base-100 dark:bg-slate-800 shadow-sm hover:shadow-md transition-all cursor-pointer rounded-lg flex items-center justify-between border border-base-200 dark:border-slate-700`}
                   onClick={() => handleChangeTeam(team?.id)}
+                  data-testid={`chatbot-drawer-team-${team?.id}`}
                 >
                   <div className="flex items-center overflow-hidden">
                     <div className="team-avatar mr-3 bg-primary/10 p-2 rounded-md flex-shrink-0">
@@ -344,6 +347,7 @@ const ChatbotDrawer = ({
           className={`mt-2 text-xs py-1 px-3 rounded-md transition-colors ${callState !== "idle" ? "bg-gray-400 cursor-not-allowed" : "bg-primary text-white hover:bg-primary/80"}`}
           onClick={handleVoiceCall}
           disabled={callState !== "idle"}
+          data-testid="chatbot-drawer-voice-call-button"
         >
           Call Us
         </button>
@@ -377,6 +381,7 @@ const ChatbotDrawer = ({
       <div
         className="cursor-pointer p-2 hover:bg-gray-200 rounded-full transition-colors"
         onClick={handleCloseChatbot}
+        data-testid="chatbot-drawer-close-button"
       >
         <X size={22} color={iconColor} />
       </div>
@@ -398,6 +403,7 @@ const ChatbotDrawer = ({
         <div
           className="fixed inset-0 bg-black/30 backdrop-blur-sm lg:hidden"
           onClick={() => closeToggleDrawer(false)}
+          data-testid="chatbot-drawer-backdrop"
         />
       )}
 
@@ -411,6 +417,7 @@ const ChatbotDrawer = ({
                   <button
                     className="p-2 hover:bg-gray-200 rounded-full transition-colors"
                     onClick={() => closeToggleDrawer(!isToggledrawer)}
+                    data-testid="chatbot-drawer-toggle-button"
                   >
                     <AlignLeft size={22} color={iconColor} />
                   </button>
@@ -435,6 +442,7 @@ const ChatbotDrawer = ({
                     <button
                       className="p-2 hover:bg-gray-200 rounded-full transition-colors"
                       onClick={handleCreateNewSubThread}
+                      data-testid="chatbot-drawer-new-chat-button"
                     >
                       <SquarePen size={22} color={iconColor} />
                     </button>

components/Interface-Chatbot/ChatbotHeader.tsx

@@ -57,6 +57,7 @@ const SendEventOnComponentPress = ({ item, iconColor, children }: { item: { type
     className="p-2 rounded-full transition-colors hover:bg-base-200 dark:hover:bg-slate-700"
     style={{ color: iconColor }}
     onClick={() => emitEventToParent("HEADER_BUTTON_PRESS", item)}
+    data-testid={`chatbot-header-button-${item.type}`}
   >
     {children}
   </button>
@@ -103,6 +104,7 @@ const renderIconsByType = (item: { type: string }, iconColor: string) => {
               aria-haspopup="true"
               onClick={() => setDropdownIsOpen(!dropdownIsOpen)}
               style={{ color: iconColor }}
+              data-testid="chatbot-header-dropdown-button"
             >
               <span className={selectedOption?.value ? "font-bold" : ""}>{selectedOption?.value || "Select"}</span>
               <ChevronDown className="w-4 h-4 ml-2" color={iconColor} />
@@ -135,6 +137,7 @@ const renderIconsByType = (item: { type: string }, iconColor: string) => {
                               setSelectedOption({ value: optionValue, section: item?.section });
                               setDropdownIsOpen(false);
                             }}
+                            data-testid={`chatbot-header-dropdown-option-${sectionIndex}-${optionIndex}`}
                           >
                             {optionValue}
                           </a>
@@ -433,6 +436,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
       <button
         className="p-2 hover:bg-base-200 dark:hover:bg-slate-700 rounded-full transition-colors"
         onClick={() => setToggleDrawer(!isToggledrawer)}
+        data-testid="chatbot-drawer-toggle-button"
       >
         {isToggledrawer ? null : <AlignLeft size={22} color={iconColor} />}
       </button>
@@ -448,6 +452,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
         <button
           className="p-2 hover:bg-base-200 dark:hover:bg-slate-700 rounded-full transition-colors"
           onClick={handleCreateNewSubThread}
+          data-testid="chatbot-create-thread-button"
         >
           <SquarePen size={22} color={iconColor} />
         </button>
@@ -556,6 +561,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
       <div
         className="cursor-pointer p-2 rounded-full hover:bg-base-200 dark:hover:bg-slate-700 transition-colors"
         onClick={() => toggleFullScreen(false)}
+        data-testid="chatbot-minimize-button"
       >
         {/* <PictureInPicture2 size={22} color="#555555" /> */}
         <Minimize2 size={22} color={iconColor} style={{ transform: 'rotate(90deg)' }} />
@@ -564,6 +570,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
       <div
         className="cursor-pointer p-2 rounded-full transition-colors hover:bg-base-200 dark:hover:bg-slate-700"
         onClick={() => toggleFullScreen(true)}
+        data-testid="chatbot-maximize-button"
       >
         {/* <Maximize size={22} color="#555555" /> */}
         <Maximize2 size={22} color={iconColor} style={{ transform: 'rotate(90deg)' }} />
@@ -579,6 +586,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
       <div
         className="cursor-pointer p-2 py-2 rounded-full hover:bg-base-200 dark:hover:bg-slate-700 transition-colors"
         onClick={handleCloseChatbot}
+        data-testid="chatbot-close-button"
       >
         <X size={22} color={iconColor} />
       </div>
@@ -603,6 +611,7 @@ const ChatbotHeader: React.FC<ChatbotHeaderProps> = ({ preview = false, chatSess
       <div
         className="cursor-pointer p-2 py-2 rounded-full hover:bg-base-200 dark:hover:bg-slate-700 transition-colors"
         onClick={handleToggleMinimize}
+        data-testid="chatbot-minimize-toggle-button"
       >
         {isChatbotMinimized ? <Maximize2 size={22} color={iconColor} style={{ transform: 'rotate(90deg)' }} /> : <Minus size={22} color={iconColor} />}
       </div>