Walkover-Web-Solution · dvCodeWorld · Jun 30, 2026 · Jul 1, 2026 · Jul 1, 2026 · Jul 1, 2026
diff --git a/app/globals.css b/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"] {
@@ -82,10 +94,21 @@ html:has(.drawer-toggle:checked) {
 
 
 .icn {
+  /* color: var(--icon-color); */
+  border-radius: 9999px;
+  transition: color 200ms ease, background-color 200ms ease;
+}
+
+.icn:hover {
+  background-color: #e5e7eb;
+  color: #1f2937;
+}
+
+[data-theme="dark"] .icn:hover {
+  background-color: color-mix(in srgb, var(--icon-color) 12%, transparent);
   color: var(--icon-color);
-  @apply hover:bg-gray-200 hover:text-gray-800
 }
 
-[data-theme="dark"] .icn {
-  @apply hover:bg-gray-800 hover:text-gray-200
+input, select {
+  outline: none !important;
 }
diff --git a/components/Chatbot/Chatbot.tsx b/components/Chatbot/Chatbot.tsx
@@ -80,7 +80,7 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
   const messageRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
   const timeoutIdRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { backgroundColor } = useColor();
+  const { primaryBgColor } = useColor();
   const { isSmallScreen } = useScreenSize();
   const dispatch = useAppDispatch();
 
@@ -145,7 +145,7 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
     <MessageContext.Provider value={contextValue}>
       <div className="flex h-screen w-full overflow-hidden relative">
         {/* Sidebar - visible on large screens */}
-        <div className={`border-r overflow-y-auto transition-all duration-300 ease-in-out ${isToggledrawer && !isSmallScreen ? 'w-96 max-w-[286px]' : 'w-0'}`}>
+        <div className={`border-r overflow-y-auto transition-all duration-300 ease-in-out ${isToggledrawer && !isSmallScreen ? 'w-96 max-w-[286px]' : 'w-0 invisible absolute'}`}>
           <ChatbotDrawer
             setToggleDrawer={(data: boolean) => { dispatch(setToggleDrawer(data)) }}
             isToggledrawer={isToggledrawer}
@@ -162,7 +162,7 @@ function Chatbot({ chatSessionId, tabSessionId }: ChatbotProps) {
             <div className="w-full">
               <LinearProgress
                 color="inherit"
-                style={{ color: backgroundColor }}
+                style={{ color: primaryBgColor }}
               />
             </div>
           )}

diff --git a/components/Chatbot/hooks/useColor.ts b/components/Chatbot/hooks/useColor.ts
@@ -1,10 +1,25 @@
-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";
-
-    return { backgroundColor, textColor }
+    const primaryColor = theme.palette.primary.main;
+    const mode = theme.palette.mode;
+    const isLight = isColorLight(primaryColor);
+    const foregroundColor = mode === "dark" ? "white" : isLight ? "black" : "white";
+
+    return { 
+      primaryBgColor: primaryColor,
+      // Kept separate from primaryBgColor so the text color can be customized independently in the future.
+      primaryTextColor: primaryColor,
+      foregroundColor: foregroundColor,
+      primaryGradientBg: getGradientBackground(primaryColor, mode),
+      primaryTintColor: withAlpha(primaryColor, mode === "dark" ? 0.18 : 0.12),
+      primaryHoverTintColor: withAlpha(primaryColor, mode === "dark" ? 0.12 : 0.08),
+      headerHoverBg: mode === "dark"
+        ? "rgba(255, 255, 255, 0.12)"
+        : isLight
+          ? "rgba(0, 0, 0, 0.08)"
+          : "rgba(255, 255, 255, 0.18)",
+     }
 }
diff --git a/components/FormComponent.tsx b/components/FormComponent.tsx
@@ -6,7 +6,7 @@ import { setHelloClientInfo, setHelloKeysData } from "@/store/hello/helloSlice";
 import { GetSessionStorageData } from "@/utils/ChatbotUtility";
 import { useCustomSelector } from "@/utils/deepCheckSelector";
 import { splitNumber } from "@/utils/utilities";
-import { BookText, Loader2, Mail, Phone, Send, User } from "lucide-react";
+import { Loader2, Mail, MessageSquare, Phone, Send, User } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { useColor } from "./Chatbot/hooks/useColor";
@@ -36,13 +36,17 @@ interface FormErrors {
 }
 
 function FormComponent({ chatSessionId }: FormComponentProps) {
-  const { textColor, backgroundColor } = useColor();
+  const { foregroundColor, primaryTextColor, primaryBgColor } = useColor();
   const dispatch = useDispatch();
-  const { showWidgetForm, open, userData } = useCustomSelector((state) => ({
-    showWidgetForm: state.Hello?.[chatSessionId]?.showWidgetForm ?? true,
-    open: state.Chat.openHelloForm,
-    userData: state.Hello?.[chatSessionId]?.clientInfo
-  }));
+  const { showWidgetForm, open, userData, isFullScreen } = useCustomSelector((state) => {
+    const fullScreen = state.Hello?.[chatSessionId]?.helloConfig?.fullScreen;
+    return {
+      showWidgetForm: state.Hello?.[chatSessionId]?.showWidgetForm ?? true,
+      open: state.Chat.openHelloForm,
+      userData: state.Hello?.[chatSessionId]?.clientInfo,
+      isFullScreen: (fullScreen === true || fullScreen === 'true') ?? false
+    };
+  });
   const scriptParams = JSON.parse(GetSessionStorageData('helloConfig') || '{}')
   const { isSmallScreen } = useScreenSize();
   const [formData, setFormData] = useState<FormData>({
@@ -137,32 +141,39 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
 
   if (!open && !showWidgetForm) return null;
   if (!open && showWidgetForm) return (
-    <div
-      className={`bg-white 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)}
-      style={{
-        background: `linear-gradient(to right, ${backgroundColor}, ${backgroundColor}CC)`,
-        color: textColor
-      }}
-    >
-      <div className="flex items-center">
-        <div className="flex-shrink-0">
-          <BookText className="h-7 w-7 mr-1" />
+    <div className={`px-3 pt-2 ${isSmallScreen ? '' : 'mx-auto w-full max-w-2xl'}`}>
+      <div
+        onClick={() => setOpen(true)}
+        className="flex items-center gap-3 rounded-xl px-3 py-2.5 cursor-pointer transition-all hover:opacity-95 hover:shadow-md"
+        style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
+      >
+        <div
+          className="flex-shrink-0 grid place-items-center w-9 h-9 rounded-lg"
+          style={{ backgroundColor: 'rgba(255,255,255,0.18)' }}
+        >
+          <MessageSquare size={18} />
         </div>
-        <div className="ml-2">
-          <span className="font-medium block text-base">Enter your details</span>
-          <p className="text-xs opacity-90">Click here to provide your information</p>
+        <div className="min-w-0 flex-1 leading-tight">
+          <div className="font-semibold text-sm truncate">Enter your details</div>
+          <div className="text-xs opacity-80 truncate">Click here to provide your information</div>
         </div>
       </div>
     </div>
   );
   return (
-    <div className="fixed inset-0 bg-black/50 z-[9999] overflow-y-auto flex items-start justify-center py-4 backdrop-blur-sm">
-      <div className="rounded-lg shadow-xl w-full max-w-md mx-4 relative my-auto dark:border dark:border-gray-500" style={{ backgroundColor: 'var(--background)' }}>
-        {/* Card header */}
-        < div className="bg-primary text-white p-5 rounded-t-lg" style={{
-          background: `linear-gradient(to right, ${backgroundColor}, ${backgroundColor}CC)`,
-          color: textColor
+    <div
+      className={`fixed inset-0 bg-black/50 z-[9999] flex justify-center backdrop-blur-sm animate-fadeIn ${isFullScreen ? 'items-center p-4' : 'items-end'}`}
+      onClick={() => setOpen(false)}
+    >
+      <div
+        className={`shadow-2xl w-full max-w-md relative dark:border dark:border-gray-500 overflow-y-auto ${isFullScreen ? 'rounded-2xl max-h-[90vh] animate-fadeIn' : 'rounded-t-2xl max-h-[92%] animate-slideUp'}`}
+        style={{ backgroundColor: 'var(--background)' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Card header (sticky); drag handle shown only in bottom-sheet mode */}
+        < div className={`bg-primary text-white px-5 py-4 rounded-t-2xl sticky top-0 z-10`} style={{
+          background: `linear-gradient(to right, ${primaryBgColor}, ${primaryBgColor}CC)`,
+          color: foregroundColor
         }}>
           <h2 className="text-lg font-bold">Enter your details</h2>
           <p className="text-sm opacity-90 mt-1">
@@ -171,11 +182,15 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
         </div>
 
         {/* Form content */}
-        <form onSubmit={handleSubmit} className="p-5 gap-2 flex flex-col">
+        <form
+          onSubmit={handleSubmit}
+          className="p-5 gap-2 flex flex-col"
+          style={{ ['--theme-primary' as any]: primaryBgColor }}
+        >
           {/* Name field */}
           <div className="form-control w-full">
-            <label className="label">
-              <span className="label-text font-medium">Name *</span>
+            <label className="label pt-0">
+              <span className="label-text font-medium">Name <span className="text-red-400">*</span></span>
             </label>
             <div className="relative">
               <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
@@ -188,7 +203,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
                 onChange={handleChange}
                 placeholder="Enter your name"
                 disabled={scriptParams?.name ? true : false}
-                className={`input input-bordered w-full pl-10 ${errors.name ? "input-error" : ""
+                className={`input input-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] w-full pl-10 ${errors.name ? "input-error" : ""
                   }`}
                 required
               />
@@ -216,7 +231,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
                 onChange={handleChange}
                 disabled={scriptParams?.mail || scriptParams?.Email ? true : false}
                 placeholder="Enter your email"
-                className={`input input-bordered w-full pl-10 ${errors.email ? "input-error" : ""}`}
+                className={`input input-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] w-full pl-10 ${errors.email ? "input-error" : ""}`}
               />
             </div>
             {errors.email && (
@@ -231,13 +246,13 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
             <label className="label">
               <span className="label-text font-medium">Phone Number</span>
             </label>
-            <div className="flex flex-col sm:flex-row gap-2">
+            <div className="flex gap-2">
               <div className="relative">
                 <select
                   name="countryCode"
                   value={formData.countryCode}
                   onChange={handleChange}
-                  className={`select select-bordered select-md max-w-36 pl-10 ${errors.countryCode ? "select-error" : ""}`}
+                  className={`select select-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] select-md max-w-36 pl-10 ${errors.countryCode ? "select-error" : ""}`}
                   style={{ width: 'auto' }}
                 >
                   {countryCodes
@@ -262,7 +277,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
                   onChange={handleChange}
                   disabled={scriptParams?.number || scriptParams?.Phonenumber ? true : false}
                   placeholder="Enter your phone number"
-                  className={`input input-bordered w-full ${errors.number ? "input-error" : ""}`}
+                  className={`input input-bordered focus:outline-none focus:ring-1 focus:border-[var(--theme-primary)] focus:ring-[var(--theme-primary)] w-full ${errors.number ? "input-error" : ""}`}
                 />
               </div>
             </div>
@@ -274,7 +289,7 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
           </div>
 
           {/* Submit button */}
-          <div className="flex gap-3 mt-2">
+          <div className="flex gap-3 mt-5">
             <button
               type="button"
               className="btn btn-outline flex-1"
@@ -288,8 +303,8 @@ function FormComponent({ chatSessionId }: FormComponentProps) {
               className="btn flex-1"
               style={{
                 opacity: isLoading ? 0.5 : 1,
-                backgroundColor: backgroundColor,
-                color: textColor
+                backgroundColor: primaryBgColor,
+                color: foregroundColor
               }}
             >
               {isLoading ? (

diff --git a/components/Hello/RenderHelloInteractiveMessage.tsx b/components/Hello/RenderHelloInteractiveMessage.tsx
@@ -7,7 +7,7 @@ import ImageWithFallback from '../Interface-Chatbot/Messages/ImageWithFallback';
 function RenderHelloInteractiveMessage({ message }: { message: any }) {
   const messageJson = message?.messageJson || {};
   const sendMessageToHello = useSendMessageToHello({});
-  const { textColor, backgroundColor } = useColor();
+  const { foregroundColor, primaryBgColor } = useColor();
 
   const renderHeader = (header: any) => {
     if (header?.type === "text") {
@@ -67,7 +67,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                         target="_blank"
                         rel="noopener noreferrer"
                         className="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium w-full max-w-md justify-start"
-                        style={{ backgroundColor: backgroundColor, color: textColor }}
+                        style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
                         onClick={(e) => e.stopPropagation()}
                       >
                         <ExternalLink size={16} strokeWidth={2} />
@@ -125,7 +125,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                   target="_blank"
                   rel="noopener noreferrer"
                   className="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium"
-                  style={{ backgroundColor: backgroundColor, color: textColor }}
+                  style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
                 >
                   <ExternalLink size={16} strokeWidth={2} />
                   {action.parameters.display_text || "View"}
@@ -143,7 +143,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
                     target="_blank"
                     rel="noopener noreferrer"
                     className="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium w-full max-w-md justify-start"
-                    style={{ backgroundColor: backgroundColor, color: textColor }}
+                    style={{ backgroundColor: primaryBgColor, color: foregroundColor }}
                     onClick={(e) => e.stopPropagation()}
                   >
                     <ExternalLink size={16} strokeWidth={2} />
@@ -224,7 +224,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
           <CarouselMessage
             messageJson={messageJson}
             backgroundColor={backgroundColor}
-            textColor={textColor}
+            foregroundColor={foregroundColor}
             sendMessageToHello={sendMessageToHello}
             renderHeader={renderHeader}
           />
@@ -329,7 +329,7 @@ function RenderHelloInteractiveMessage({ message }: { message: any }) {
   );
 }
 
-function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageToHello, renderHeader }: any) {
+function CarouselMessage({ messageJson, backgroundColor, foregroundColor, sendMessageToHello, renderHeader }: any) {
   return (
     <div className="flex flex-col gap-2 max-w-[320px] sm:max-w-[400px] md:max-w-[500px] lg:max-w-[600px]">
       {messageJson.body?.text && (
@@ -358,7 +358,7 @@ function CarouselMessage({ messageJson, backgroundColor, textColor, sendMessageT
                       target="_blank"
                       rel="noopener noreferrer"
                       className="btn btn-sm rounded-md normal-case font-medium flex items-center justify-center gap-2"
-                      style={{ backgroundColor, color: textColor, border: "none" }}
+                      style={{ backgroundColor, color: foregroundColor, border: "none" }}
                       onClick={(e) => e.stopPropagation()}
                     >
                       <ExternalLink size={14} />

diff --git a/components/Interface-Chatbot/CallButton.tsx b/components/Interface-Chatbot/CallButton.tsx
@@ -21,7 +21,7 @@ function CallButton({ chatSessionId, currentChannelId }: CallButtonProps) {
         voice_call_widget: state.Hello?.[chatSessionId]?.widgetInfo?.voice_call_widget || false,
     }));
     const sendMessageToHello = useOnSendHello();
-    const { backgroundColor } = useColor();
+    const { primaryBgColor } = useColor();
     const { callState } = useCallUI();
 
     // Handler for voice call
@@ -50,10 +50,10 @@ function CallButton({ chatSessionId, currentChannelId }: CallButtonProps) {
                 ? "cursor-not-allowed opacity-50"
                 : "cursor-pointer hover:bg-gray-200"
                 }`}
-            style={{ backgroundColor: lighten(backgroundColor, 0.8) }}
+            style={{ backgroundColor: lighten(primaryBgColor, 0.8) }}
             onClick={() => { if (!isCallDisabled) handleVoiceCall() }}
         >
-            <Phone className={`w-4 h-4 md:w-4 md:h-4`} style={{ color: darken(backgroundColor, 0.2) }} />
+            <Phone className={`w-4 h-4 md:w-4 md:h-4`} style={{ color: darken(primaryBgColor, 0.2) }} />
         </div>
     );
 }