✨ (embed) Add new command setInputValue

apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx

@@ -43,8 +43,8 @@ export const NextjsLogo = (props: IconProps) => (
         y1="116.5"
         y2="160.5"
       >
-        <stop stop-color="white"></stop>
+        <stop stopColor="white"></stop>
-        <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+        <stop offset="1" stopColor="white" stopOpacity="0"></stop>
       </linearGradient>
       <linearGradient
         gradientUnits="userSpaceOnUse"
@@ -54,8 +54,8 @@ export const NextjsLogo = (props: IconProps) => (
         y1="54"
         y2="106.875"
       >
-        <stop stop-color="white"></stop>
+        <stop stopColor="white"></stop>
-        <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+        <stop offset="1" stopColor="white" stopOpacity="0"></stop>
       </linearGradient>
     </defs>
   </Icon>

apps/docs/docs/embed/commands.md

@@ -8,6 +8,7 @@ Here are the commands you can use to trigger your embedded typebot:
 - `Typebot.showPreviewMessage()`: Show preview message from the bubble,
 - `Typebot.hidePreviewMessage()`: Hide preview message from the bubble,
 - `Typebot.setPrefilledVariables(...)`: Set prefilled variables.
+- `Typebot.setInputValue(...)`: Set the value in the currently displayed input.
 
   Example:
 

packages/embeds/js/package.json

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

packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx

@@ -1,9 +1,10 @@
 import { ShortTextInput } from '@/components'
 import { SendButton } from '@/components/SendButton'
+import { CommandData } from '@/features/commands/types'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import type { EmailInputBlock } from '@typebot.io/schemas'
-import { createSignal, onMount } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
   block: EmailInputBlock
@@ -30,8 +31,19 @@ export const EmailInput = (props: Props) => {
 
   onMount(() => {
     if (!isMobile() && inputRef) inputRef.focus()
+    window.addEventListener('message', processIncomingEvent)
   })
 
+  onCleanup(() => {
+    window.removeEventListener('message', processIncomingEvent)
+  })
+
+  const processIncomingEvent = (event: MessageEvent<CommandData>) => {
+    const { data } = event
+    if (!data.isFromTypebot) return
+    if (data.command === 'setInputValue') setInputValue(data.value)
+  }
+
   return (
     <div
       class={'flex items-end justify-between pr-2 typebot-input w-full'}

packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx

@@ -1,9 +1,10 @@
 import { ShortTextInput } from '@/components'
 import { SendButton } from '@/components/SendButton'
+import { CommandData } from '@/features/commands/types'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import type { NumberInputBlock } from '@typebot.io/schemas'
-import { createSignal, onMount } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type NumberInputProps = {
   block: NumberInputBlock
@@ -30,8 +31,19 @@ export const NumberInput = (props: NumberInputProps) => {
 
   onMount(() => {
     if (!isMobile() && inputRef) inputRef.focus()
+    window.addEventListener('message', processIncomingEvent)
   })
 
+  onCleanup(() => {
+    window.removeEventListener('message', processIncomingEvent)
+  })
+
+  const processIncomingEvent = (event: MessageEvent<CommandData>) => {
+    const { data } = event
+    if (!data.isFromTypebot) return
+    if (data.command === 'setInputValue') setInputValue(data.value)
+  }
+
   return (
     <div
       class={'flex items-end justify-between pr-2 typebot-input w-full'}

packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx

@@ -4,9 +4,10 @@ import { SendButton } from '@/components/SendButton'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import type { PhoneNumberInputOptions } from '@typebot.io/schemas'
-import { createSignal, For, onMount } from 'solid-js'
+import { createSignal, For, onCleanup, onMount } from 'solid-js'
 import { isEmpty } from '@typebot.io/lib'
 import { phoneCountries } from '@typebot.io/lib/phoneCountries'
+import { CommandData } from '@/features/commands/types'
 
 type PhoneInputProps = Pick<
   PhoneNumberInputOptions,
@@ -33,7 +34,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
     const matchedCountry =
       inputValue?.startsWith('+') &&
       inputValue.length > 2 &&
-      phoneCountries.reduce<typeof phoneCountries[number] | null>(
+      phoneCountries.reduce<(typeof phoneCountries)[number] | null>(
         (matchedCountry, country) => {
           if (
             !country?.dial_code ||
@@ -87,8 +88,19 @@ export const PhoneInput = (props: PhoneInputProps) => {
 
   onMount(() => {
     if (!isMobile() && inputRef) inputRef.focus()
+    window.addEventListener('message', processIncomingEvent)
   })
 
+  onCleanup(() => {
+    window.removeEventListener('message', processIncomingEvent)
+  })
+
+  const processIncomingEvent = (event: MessageEvent<CommandData>) => {
+    const { data } = event
+    if (!data.isFromTypebot) return
+    if (data.command === 'setInputValue') setInputValue(data.value)
+  }
+
   return (
     <div
       class={'flex items-end justify-between pr-2 typebot-input'}

packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -1,9 +1,10 @@
 import { Textarea, ShortTextInput } from '@/components'
 import { SendButton } from '@/components/SendButton'
+import { CommandData } from '@/features/commands'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import type { TextInputBlock } from '@typebot.io/schemas'
-import { createSignal, onMount } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
   block: TextInputBlock
@@ -36,8 +37,19 @@ export const TextInput = (props: Props) => {
 
   onMount(() => {
     if (!isMobile() && inputRef) inputRef.focus()
+    window.addEventListener('message', processIncomingEvent)
   })
 
+  onCleanup(() => {
+    window.removeEventListener('message', processIncomingEvent)
+  })
+
+  const processIncomingEvent = (event: MessageEvent<CommandData>) => {
+    const { data } = event
+    if (!data.isFromTypebot) return
+    if (data.command === 'setInputValue') setInputValue(data.value)
+  }
+
   return (
     <div
       class={'flex items-end justify-between pr-2 typebot-input w-full'}

packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx

@@ -1,9 +1,10 @@
 import { ShortTextInput } from '@/components'
 import { SendButton } from '@/components/SendButton'
+import { CommandData } from '@/features/commands/types'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import type { UrlInputBlock } from '@typebot.io/schemas'
-import { createSignal, onMount } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
   block: UrlInputBlock
@@ -36,8 +37,19 @@ export const UrlInput = (props: Props) => {
 
   onMount(() => {
     if (!isMobile() && inputRef) inputRef.focus()
+    window.addEventListener('message', processIncomingEvent)
   })
 
+  onCleanup(() => {
+    window.removeEventListener('message', processIncomingEvent)
+  })
+
+  const processIncomingEvent = (event: MessageEvent<CommandData>) => {
+    const { data } = event
+    if (!data.isFromTypebot) return
+    if (data.command === 'setInputValue') setInputValue(data.value)
+  }
+
   return (
     <div
       class={'flex items-end justify-between pr-2 typebot-input w-full'}

packages/embeds/js/src/features/commands/types.ts

@@ -8,6 +8,7 @@ export type CommandData = {
     }
   | ShowMessageCommandData
   | SetPrefilledVariablesCommandData
+  | SetInputValueCommandData
 )
 
 export type ShowMessageCommandData = {
@@ -19,3 +20,8 @@ export type SetPrefilledVariablesCommandData = {
   command: 'setPrefilledVariables'
   variables: Record<string, string | number | boolean>
 }
+
+export type SetInputValueCommandData = {
+  command: 'setInputValue'
+  value: string
+}

packages/embeds/js/src/features/commands/utils/index.ts

@@ -4,3 +4,4 @@ export * from './open'
 export * from './setPrefilledVariables'
 export * from './showPreviewMessage'
 export * from './toggle'
+export * from './setInputValue'

packages/embeds/js/src/features/commands/utils/setInputValue.ts

@@ -0,0 +1,10 @@
+import { CommandData } from '../types'
+
+export const setInputValue = (value: string) => {
+  const message: CommandData = {
+    isFromTypebot: true,
+    command: 'setInputValue',
+    value,
+  }
+  window.postMessage(message)
+}

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/src/stories/bubble.stories.tsx

@@ -6,6 +6,7 @@ import {
   showPreviewMessage,
   hidePreviewMessage,
   setPrefilledVariables,
+  setInputValue,
 } from '@typebot.io/js'
 import { useState } from 'react'
 import { leadGenerationTypebot } from './assets/leadGenerationTypebot'
@@ -23,6 +24,7 @@ export const Default = () => {
         <button onClick={() => showPreviewMessage()}>
           Show Preview Message
         </button>
+        <button onClick={() => setInputValue('YOOOO!')}>Set input value</button>
         <button onClick={hidePreviewMessage}>Close Preview Message</button>
         <div>
           <p>Predefined name:</p>