🐛 Fix bot libs mount behavior and prop types

packages/js/.npmignore

@@ -0,0 +1,6 @@
+src
+.eslintignore
+.eslintrc.cjs
+rollup.config.js
+tailwind.config.cjs
+tsconfig.json

packages/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/js/src/components/Bot.tsx

@@ -152,7 +152,7 @@ const BotContent = (props: BotContentProps) => {
     const font = document.createElement('link')
     font.href = `https://fonts.googleapis.com/css2?family=${
       props.initialChatReply.typebot?.theme?.general?.font ?? 'Open Sans'
-    }:wght@300;400;600&display=swap')`
+    }:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');')`
     font.rel = 'stylesheet'
     document.head.appendChild(font)
   }

packages/js/src/components/InputChatBlock.tsx

@@ -48,6 +48,11 @@ export const InputChatBlock = (props: Props) => {
     props.onSubmit(value ?? label)
   }
 
+  const handleSkip = (label: string) => {
+    setAnswer(label)
+    props.onSkip()
+  }
+
   return (
     <Switch>
       <Match when={answer()} keyed>
@@ -75,7 +80,7 @@ export const InputChatBlock = (props: Props) => {
             inputIndex={props.inputIndex}
             isInputPrefillEnabled={props.isInputPrefillEnabled}
             onSubmit={handleSubmit}
-            onSkip={() => props.onSkip()}
+            onSkip={handleSkip}
             hasGuestAvatar={props.guestAvatar?.isEnabled ?? false}
           />
         </div>
@@ -91,7 +96,7 @@ const Input = (props: {
   hasGuestAvatar: boolean
   isInputPrefillEnabled: boolean
   onSubmit: (answer: InputSubmitContent) => void
-  onSkip: () => void
+  onSkip: (label: string) => void
 }) => {
   const onSubmit = (answer: InputSubmitContent) => props.onSubmit(answer)
 
@@ -165,7 +170,6 @@ const Input = (props: {
           context={props.context}
           block={props.block as FileInputBlock}
           onSubmit={onSubmit}
-          // eslint-disable-next-line solid/reactivity
           onSkip={props.onSkip}
         />
       </Match>

packages/js/src/components/avatars/Avatar.tsx

@@ -14,7 +14,7 @@ export const Avatar = (props: { initialAvatarSrc?: string }) => {
     >
       <figure
         class={
-          'flex justify-center items-center rounded-full text-white relative animate-fade-in ' +
+          'flex justify-center items-center rounded-full text-white relative animate-fade-in flex-shrink-0 ' +
           (isMobile() ? 'w-6 h-6 text-sm' : 'w-10 h-10 text-xl')
         }
       >

packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx

@@ -9,7 +9,7 @@ type Props = {
   context: BotContext
   block: FileInputBlock
   onSubmit: (url: InputSubmitContent) => void
-  onSkip: () => void
+  onSkip: (label: string) => void
 }
 
 export const FileUploadForm = (props: Props) => {
@@ -178,7 +178,12 @@ export const FileUploadForm = (props: Props) => {
             class={
               'py-2 px-4 justify-center font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button '
             }
-            on:click={() => props.onSkip()}
+            on:click={() =>
+              props.onSkip(
+                props.block.options.labels.skip ??
+                  defaultFileInputOptions.labels.skip
+              )
+            }
           >
             {props.block.options.labels.skip ??
               defaultFileInputOptions.labels.skip}

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

@@ -124,6 +124,7 @@ export const Bubble = (props: BubbleProps) => {
           'transform-origin': 'bottom right',
           transform: isBotOpened() ? 'scale3d(1, 1, 1)' : 'scale3d(0, 0, 1)',
           'box-shadow': 'rgb(0 0 0 / 16%) 0px 5px 40px',
+          'background-color': bubbleProps.theme?.chatWindow?.backgroundColor,
         }}
         class={
           'absolute bottom-20 sm:right-4 rounded-lg w-full sm:w-[400px] max-h-[704px] ' +

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

@@ -4,10 +4,15 @@ export type BubbleParams = {
 }
 
 export type BubbleTheme = {
+  chatWindow?: ChatWindowTheme
   button?: ButtonTheme
   previewMessage?: PreviewMessageTheme
 }
 
+export type ChatWindowTheme = {
+  backgroundColor?: string
+}
+
 export type ButtonTheme = {
   backgroundColor?: string
   iconColor?: string