🚸 (bot) Update reply if we get new format from backend

packages/embeds/js/package.json

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

packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -93,8 +93,6 @@ export const ChatChunk = (props: Props) => {
           ref={inputRef}
           block={props.input}
           inputIndex={props.inputIndex}
-          onSubmit={props.onSubmit}
-          onSkip={props.onSkip}
           hasHostAvatar={props.theme.chat.hostAvatar?.isEnabled ?? false}
           guestAvatar={props.theme.chat.guestAvatar}
           context={props.context}
@@ -102,6 +100,8 @@ export const ChatChunk = (props: Props) => {
             props.settings.general.isInputPrefillEnabled ?? true
           }
           hasError={props.hasError}
+          onSubmit={props.onSubmit}
+          onSkip={props.onSkip}
         />
       )}
       <Show when={props.streamingMessageId} keyed>

packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -21,6 +21,10 @@ import { executeClientSideAction } from '@/utils/executeClientSideActions'
 import { LoadingChunk } from './LoadingChunk'
 import { PopupBlockedToast } from './PopupBlockedToast'
 import { setStreamingMessage } from '@/utils/streamingMessageSignal'
+import {
+  formattedMessages,
+  setFormattedMessages,
+} from '@/utils/formattedMessagesSignal'
 
 const parseDynamicTheme = (
   initialTheme: Theme,
@@ -164,6 +168,15 @@ export const ConversationContainer = (props: Props) => {
       ])
     }
     if (!data) return
+    if (data.lastMessageNewFormat) {
+      setFormattedMessages([
+        ...formattedMessages(),
+        {
+          inputId: [...chatChunks()].pop()?.input?.id ?? '',
+          formattedMessage: data.lastMessageNewFormat as string,
+        },
+      ])
+    }
     if (data.logs) props.onNewLogs?.(data.logs)
     if (data.dynamicTheme) setDynamicTheme(data.dynamicTheme)
     if (data.input?.id && props.onNewInputBlock) {

packages/embeds/js/src/components/InputChatBlock.tsx

@@ -25,7 +25,7 @@ import { PhoneInput } from '@/features/blocks/inputs/phone'
 import { DateForm } from '@/features/blocks/inputs/date'
 import { RatingForm } from '@/features/blocks/inputs/rating'
 import { FileUploadForm } from '@/features/blocks/inputs/fileUpload'
-import { createSignal, Switch, Match } from 'solid-js'
+import { createSignal, Switch, Match, createEffect } from 'solid-js'
 import { isNotDefined } from '@typebot.io/lib'
 import { isMobile } from '@/utils/isMobileSignal'
 import { PaymentForm } from '@/features/blocks/inputs/payment'
@@ -33,6 +33,7 @@ import { MultipleChoicesForm } from '@/features/blocks/inputs/buttons/components
 import { Buttons } from '@/features/blocks/inputs/buttons/components/Buttons'
 import { SinglePictureChoice } from '@/features/blocks/inputs/pictureChoice/SinglePictureChoice'
 import { MultiplePictureChoice } from '@/features/blocks/inputs/pictureChoice/MultiplePictureChoice'
+import { formattedMessages } from '@/utils/formattedMessagesSignal'
 
 type Props = {
   ref: HTMLDivElement | undefined
@@ -49,6 +50,7 @@ type Props = {
 
 export const InputChatBlock = (props: Props) => {
   const [answer, setAnswer] = createSignal<string>()
+  const [formattedMessage, setFormattedMessage] = createSignal<string>()
 
   const handleSubmit = async ({ label, value }: InputSubmitContent) => {
     setAnswer(label ?? value)
@@ -60,11 +62,18 @@ export const InputChatBlock = (props: Props) => {
     props.onSkip()
   }
 
+  createEffect(() => {
+    const formattedMessage = formattedMessages().find(
+      (message) => message.inputId === props.block.id
+    )?.formattedMessage
+    if (formattedMessage) setFormattedMessage(formattedMessage)
+  })
+
   return (
     <Switch>
       <Match when={answer() && !props.hasError}>
         <GuestBubble
-          message={answer() as string}
+          message={formattedMessage() ?? (answer() as string)}
           showAvatar={props.guestAvatar?.isEnabled ?? false}
           avatarSrc={props.guestAvatar?.url && props.guestAvatar.url}
         />

packages/embeds/js/src/utils/formattedMessagesSignal.ts

@@ -0,0 +1,5 @@
+import { createSignal } from 'solid-js'
+
+export const [formattedMessages, setFormattedMessages] = createSignal<
+  { inputId: string; formattedMessage: string }[]
+>([])

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "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.15",
+  "version": "0.1.16",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/schemas/features/chat.ts

@@ -292,6 +292,12 @@ export const chatReplySchema = z.object({
   resultId: z.string().optional(),
   dynamicTheme: dynamicThemeSchema.optional(),
   logs: z.array(replyLogSchema).optional(),
+  lastMessageNewFormat: z
+    .string()
+    .optional()
+    .describe(
+      'The sent message is validated and formatted on the backend. This is set only if the message differs from the formatted version.'
+    ),
 })
 
 export type ChatSession = z.infer<typeof chatSessionSchema>