⚡ (chat) Improve chat API compatibility with preview mode

packages/js/src/features/bubble/components/Bubble.tsx

@@ -20,7 +20,7 @@ export const Bubble = (props: BubbleProps) => {
     'onClose',
     'previewMessage',
     'onPreviewMessageClick',
-    'button',
+    'theme',
   ])
   const [prefilledVariables, setPrefilledVariables] = createSignal(
     // eslint-disable-next-line solid/reactivity
@@ -106,13 +106,13 @@ export const Bubble = (props: BubbleProps) => {
       <Show when={isPreviewMessageDisplayed()}>
         <PreviewMessage
           {...previewMessage()}
-          button={bubbleProps.button}
+          previewMessageTheme={bubbleProps.theme?.previewMessage}
           onClick={handlePreviewMessageClick}
           onCloseClick={hideMessage}
         />
       </Show>
       <BubbleButton
-        {...bubbleProps.button}
+        {...bubbleProps.theme?.button}
         toggleBot={toggleBot}
         isBotOpened={isBotOpened()}
       />
@@ -126,7 +126,7 @@ export const Bubble = (props: BubbleProps) => {
           'box-shadow': 'rgb(0 0 0 / 16%) 0px 5px 40px',
         }}
         class={
-          'absolute bottom-20 sm:right-4 rounded-lg bg-white w-full sm:w-[400px] max-h-[704px] ' +
+          'absolute bottom-20 sm:right-4 rounded-lg w-full sm:w-[400px] max-h-[704px] ' +
           (isBotOpened() ? 'opacity-1' : 'opacity-0 pointer-events-none')
         }
       >

packages/js/src/features/bubble/components/BubbleButton.tsx

@@ -1,7 +1,7 @@
 import { Show } from 'solid-js'
-import { ButtonParams } from '../types'
+import { ButtonTheme } from '../types'
 
-type Props = ButtonParams & {
+type Props = ButtonTheme & {
   isBotOpened: boolean
   toggleBot: () => void
 }

packages/js/src/features/bubble/components/PreviewMessage.tsx

@@ -1,14 +1,14 @@
 import { createSignal } from 'solid-js'
-import { BubbleParams, PreviewMessageParams } from '../types'
+import { PreviewMessageParams, PreviewMessageTheme } from '../types'
 
 export type PreviewMessageProps = Pick<
   PreviewMessageParams,
-  'avatarUrl' | 'message' | 'style'
-> &
-  Pick<BubbleParams, 'button'> & {
-    onClick: () => void
-    onCloseClick: () => void
-  }
+  'avatarUrl' | 'message'
+> & {
+  previewMessageTheme?: PreviewMessageTheme
+  onClick: () => void
+  onCloseClick: () => void
+}
 
 const defaultFontFamily =
   "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"
@@ -23,9 +23,11 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
       onClick={props.onClick}
       class="absolute bottom-20 right-4 w-64 rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
       style={{
-        'font-family': props.style?.fontFamily ?? defaultFontFamily,
-        'background-color': props.style?.backgroundColor ?? '#F7F8FF',
-        color: props.style?.color ?? '#303235',
+        'font-family':
+          props.previewMessageTheme?.fontFamily ?? defaultFontFamily,
+        'background-color':
+          props.previewMessageTheme?.backgroundColor ?? '#F7F8FF',
+        color: props.previewMessageTheme?.color ?? '#303235',
       }}
       onMouseEnter={() => setIsPreviewMessageHovered(true)}
       onMouseLeave={() => setIsPreviewMessageHovered(false)}
@@ -40,8 +42,9 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
           return props.onCloseClick()
         }}
         style={{
-          'background-color': props.style?.closeButtonBgColor ?? '#F7F8FF',
-          color: props.style?.closeButtonColor ?? '#303235',
+          'background-color':
+            props.previewMessageTheme?.closeButtonBgColor ?? '#F7F8FF',
+          color: props.previewMessageTheme?.closeButtonColor ?? '#303235',
         }}
       >
         <svg

packages/js/src/features/bubble/types.ts

@@ -1,9 +1,14 @@
 export type BubbleParams = {
-  button: ButtonParams
-  previewMessage: PreviewMessageParams
+  theme?: BubbleTheme
+  previewMessage?: PreviewMessageParams
 }
 
-export type ButtonParams = {
+export type BubbleTheme = {
+  button?: ButtonTheme
+  previewMessage?: PreviewMessageTheme
+}
+
+export type ButtonTheme = {
   backgroundColor?: string
   icon?: {
     color?: string
@@ -15,13 +20,12 @@ export type PreviewMessageParams = {
   avatarUrl?: string
   message: string
   autoShowDelay?: number
-  style?: PreviewMessageStyle
 }
 
-type PreviewMessageStyle = Partial<{
-  backgroundColor: string
-  color: string
-  fontFamily: string
-  closeButtonBgColor: string
-  closeButtonColor: string
-}>
+export type PreviewMessageTheme = {
+  backgroundColor?: string
+  color?: string
+  fontFamily?: string
+  closeButtonBgColor?: string
+  closeButtonColor?: string
+}