test

src/components/Bot.tsx

@@ -2619,12 +2619,6 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
                 />
               )}
             </div>
-            <Badge
-              footer={props.footer}
-              badgeBackgroundColor={props.badgeBackgroundColor}
-              poweredByTextColor={props.poweredByTextColor}
-              botContainer={botContainer}
-            />
           </div>
         </div>
       )}
@@ -2663,4 +2657,4 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
       )}
     </>
   );
-};
+};

src/features/bubble/components/BubbleButton.tsx

@@ -89,57 +89,65 @@ export const BubbleButton = (props: Props) => {
         part="button"
         onClick={handleButtonClick}
         onMouseDown={onMouseDown}
-        class={`fixed shadow-md rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in`}
+        class={`fixed shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in gap-2`}
         style={{
           'background-color': props.backgroundColor ?? defaultButtonColor,
           'z-index': 42424242,
           right: `${position().right}px`,
           bottom: `${position().bottom}px`,
-          width: `${buttonSize}px`,
           height: `${buttonSize}px`,
+          'min-width': props.isBotOpened ? `${buttonSize}px` : '160px',
+          'border-radius': '24px',
           cursor: props.dragAndDrop ? 'grab' : 'pointer',
+          padding: props.isBotOpened ? '0' : '0 16px',
+          color: props.iconColor ?? defaultIconColor,
         }}
       >
-        <Show when={isNotDefined(props.customIconSrc)} keyed>
-          <svg
-            viewBox="0 0 24 24"
+        {/* Water Drop Icon - Always Visible */}
+        <Show when={!props.isBotOpened}>
+          <img
+            src={props.customIconSrc ?? 'https://favpng.com/png_view/water-droplets-clipart-drop-water-clip-art-png/T2RKsQr1'}
+            alt="AquaSolar"
             style={{
-              stroke: props.iconColor ?? defaultIconColor,
+              width: `${buttonSize * 0.5}px`,
+              height: `${buttonSize * 0.5}px`,
+              filter: 'brightness(0) invert(1)',
             }}
-            class={
-              `stroke-2 fill-transparent absolute duration-200 transition ` + (props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100')
-            }
-            width={buttonSize * 0.6}
-            height={buttonSize * 0.6}
-          >
-            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
-          </svg>
+          />
         </Show>
-        <Show when={props.customIconSrc}>
-          <img
-            src={props.customIconSrc}
-            class={'rounded-full object-cover' + (props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100')}
+
+        {/* Text "ask aquasolar" - Only when closed */}
+        <Show when={!props.isBotOpened}>
+          <div
             style={{
-              width: `${buttonSize * 0.6}px`,
-              height: `${buttonSize * 0.6}px`,
+              display: 'flex',
+              'align-items': 'center',
+              gap: '6px',
+              'white-space': 'nowrap',
+              'font-family': 'Arial, sans-serif',
             }}
-            alt="Bubble button icon"
-          />
+          >
+            <span style={{ 'font-size': '14px', 'font-weight': '300' }}>Ask</span>
+            <span style={{ 'font-size': '14px', 'font-weight': '700' }}>AquaSolar</span>
+          </div>
         </Show>
 
-        <svg
-          viewBox="0 0 24 24"
-          style={{ fill: props.iconColor ?? 'white' }}
-          class={`absolute duration-200 transition ` + (props.isBotOpened ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-180 opacity-0')}
-          width={buttonSize * 0.6}
-          height={buttonSize * 0.6}
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
-          />
-        </svg>
+        {/* Close Icon - When opened (existing SVG) */}
+        <Show when={props.isBotOpened}>
+          <svg
+            viewBox="0 0 24 24"
+            style={{ fill: props.iconColor ?? 'white' }}
+            class="absolute duration-200 transition scale-100 rotate-0 opacity-100"
+            width={buttonSize * 0.6}
+            height={buttonSize * 0.6}
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
+            />
+          </svg>
+        </Show>
       </button>
     </Show>
   );