feat(theme): ✨ Add chat theme settings

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/GuestBubble.tsx

@@ -10,7 +10,10 @@ export const GuestBubble = ({ message }: Props): JSX.Element => {
     <CSSTransition classNames="bubble" timeout={1000}>
       <div className="flex justify-end mb-2 items-center">
         <div className="flex items-end w-11/12 lg:w-4/6 justify-end">
-          <div className="inline-flex px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble">
+          <div
+            className="inline-flex px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble"
+            data-testid="guest-bubble"
+          >
             {message}
           </div>
         </div>

packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx

@@ -13,9 +13,14 @@ type Props = {
 
 export const showAnimationDuration = 400
 
+const defaultTypingEmulation = {
+  enabled: true,
+  speed: 300,
+  maxDelay: 1.5,
+}
+
 export const TextBubble = ({ step, onTransitionEnd }: Props) => {
   const { typebot } = useTypebot()
-  const { typingEmulation } = typebot.settings
   const { updateLastAvatarOffset } = useHostAvatars()
   const messageContainer = useRef<HTMLDivElement | null>(null)
   const [isTyping, setIsTyping] = useState(true)
@@ -30,7 +35,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
     sendAvatarOffset()
     const typingTimeout = computeTypingTimeout(
       step.content.plainText,
-      typingEmulation
+      typebot.settings?.typingEmulation ?? defaultTypingEmulation
     )
     setTimeout(() => {
       onTypingEnd()
@@ -61,6 +66,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
               width: isTyping ? '4rem' : '100%',
               height: isTyping ? '2rem' : '100%',
             }}
+            data-testid="host-bubble"
           >
             {isTyping ? <TypingContent /> : <></>}
           </div>

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/ChoiceForm.tsx

@@ -49,6 +49,7 @@ export const ChoiceForm = ({ options, onSubmit }: ChoiceFormProps) => {
                 ? 'active'
                 : '')
             }
+            data-testid="button"
           >
             {items.byId[itemId].content}
           </button>

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/DateForm.tsx

@@ -34,7 +34,7 @@ export const DateForm = ({
                 <p className="font-semibold mr-2">{labels?.from ?? 'From:'}</p>
               )}
               <input
-                className="focus:outline-none bg-transparent flex-1 w-full comp-input"
+                className="focus:outline-none bg-transparent flex-1 w-full text-input"
                 type={hasTime ? 'datetime-local' : 'date'}
                 onChange={(e) =>
                   setInputValues({ ...inputValues, from: e.target.value })
@@ -48,7 +48,7 @@ export const DateForm = ({
                   <p className="font-semibold">{labels?.to ?? 'To:'}</p>
                 )}
                 <input
-                  className="focus:outline-none bg-transparent flex-1 w-full comp-input ml-2"
+                  className="focus:outline-none bg-transparent flex-1 w-full text-input ml-2"
                   type={hasTime ? 'datetime-local' : 'date'}
                   onChange={(e) =>
                     setInputValues({ ...inputValues, to: e.target.value })

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextForm.tsx

@@ -36,6 +36,7 @@ export const TextForm = ({ step, onSubmit }: TextFormProps) => {
         <form
           className="flex items-end justify-between rounded-lg pr-2 typebot-input"
           onSubmit={handleSubmit}
+          data-testid="input"
         >
           <TextInput step={step} onChange={handleChange} />
           <SendButton

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/TextForm/TextInputContent.tsx

@@ -120,7 +120,7 @@ const ShortTextInput = React.forwardRef(
   ) => (
     <input
       ref={ref}
-      className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+      className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input"
       type="text"
       required
       {...props}
@@ -135,7 +135,7 @@ const LongTextInput = React.forwardRef(
   ) => (
     <textarea
       ref={ref}
-      className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full comp-input"
+      className="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input"
       rows={4}
       data-testid="textarea"
       required

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -5,6 +5,8 @@ import Frame from 'react-frame-component'
 import style from '../assets/style.css'
 //@ts-ignore
 import phoneNumberInputStyle from 'react-phone-number-input/style.css'
+//@ts-ignore
+import phoneSyle from '../assets/phone.css'
 import { ConversationContainer } from './ConversationContainer'
 import { AnswersContext } from '../contexts/AnswersContext'
 import { Answer, BackgroundType, PublicTypebot } from 'models'
@@ -23,10 +25,10 @@ export const TypebotViewer = ({
 }: TypebotViewerProps) => {
   const containerBgColor = useMemo(
     () =>
-      typebot.theme.general.background.type === BackgroundType.COLOR
+      typebot?.theme?.general?.background?.type === BackgroundType.COLOR
         ? typebot.theme.general.background.content
         : 'transparent',
-    [typebot.theme.general.background]
+    [typebot?.theme?.general?.background]
   )
   const handleNewBlockVisible = (blockId: string) => {
     if (onNewBlockVisible) onNewBlockVisible(blockId)
@@ -44,6 +46,7 @@ export const TypebotViewer = ({
       head={
         <style>
           {phoneNumberInputStyle}
+          {phoneSyle}
           {style}
         </style>
       }
@@ -51,7 +54,9 @@ export const TypebotViewer = ({
     >
       <style
         dangerouslySetInnerHTML={{
-          __html: `@import url('https://fonts.googleapis.com/css2?family=${typebot.theme.general.font}:wght@300;400;600&display=swap');`,
+          __html: `@import url('https://fonts.googleapis.com/css2?family=${
+            typebot?.theme?.general?.font ?? 'Open Sans'
+          }:wght@300;400;600&display=swap');`,
         }}
       />
       <TypebotContext typebot={typebot}>
@@ -60,7 +65,7 @@ export const TypebotViewer = ({
             className="flex text-base overflow-hidden bg-cover h-screen w-screen flex-col items-center typebot-container"
             style={{
               // We set this as inline style to avoid color flash for SSR
-              backgroundColor: containerBgColor,
+              backgroundColor: containerBgColor ?? 'transparent',
             }}
             data-testid="container"
           >