{
props.initialChatReply.typebot.settings.general?.isBrandingEnabled
}
>
-
{(toast) => (
diff --git a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
index a23d0d85f..70c02424d 100644
--- a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
+++ b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
@@ -1,4 +1,8 @@
-import { Answer, BotContext, ChatChunk as ChatChunkType } from '@/types'
+import {
+ InputSubmitContent,
+ BotContext,
+ ChatChunk as ChatChunkType,
+} from '@/types'
import { isMobile } from '@/utils/isMobileSignal'
import { ContinueChatResponse, Settings, Theme } from '@typebot.io/schemas'
import { createSignal, For, onMount, Show } from 'solid-js'
@@ -23,7 +27,7 @@ type Props = Pick & {
isTransitionDisabled?: boolean
onNewBubbleDisplayed: (blockId: string) => Promise
onScrollToBottom: (ref?: HTMLDivElement, offset?: number) => void
- onSubmit: (answer?: string, attachments?: Answer['attachments']) => void
+ onSubmit: (answer?: InputSubmitContent) => void
onSkip: () => void
onAllBubblesDisplayed: () => void
}
diff --git a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
index 6260d6e3e..0fd559de2 100644
--- a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
+++ b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -4,6 +4,7 @@ import {
Theme,
ChatLog,
StartChatResponse,
+ Message,
} from '@typebot.io/schemas'
import {
createEffect,
@@ -16,9 +17,9 @@ import {
import { continueChatQuery } from '@/queries/continueChatQuery'
import { ChatChunk } from './ChatChunk'
import {
- Answer,
BotContext,
ChatChunk as ChatChunkType,
+ InputSubmitContent,
OutgoingLog,
} from '@/types'
import { isNotDefined } from '@typebot.io/lib'
@@ -33,6 +34,7 @@ import {
import { saveClientLogsQuery } from '@/queries/saveClientLogsQuery'
import { HTTPError } from 'ky'
import { persist } from '@/utils/persist'
+import { getAnswerContent } from '@/utils/getAnswerContent'
const autoScrollBottomToleranceScreenPercent = 0.6
const bottomSpacerHeight = 128
@@ -142,15 +144,15 @@ export const ConversationContainer = (props: Props) => {
})
}
- const sendMessage = async (
- message?: string,
- attachments?: Answer['attachments']
- ) => {
+ const sendMessage = async (answer?: InputSubmitContent) => {
setIsRecovered(false)
setHasError(false)
const currentInputBlock = [...chatChunks()].pop()?.input
- if (currentInputBlock?.id && props.onAnswer && message)
- props.onAnswer({ message, blockId: currentInputBlock.id })
+ if (currentInputBlock?.id && props.onAnswer && answer)
+ props.onAnswer({
+ message: getAnswerContent(answer),
+ blockId: currentInputBlock.id,
+ })
const longRequest = setTimeout(() => {
setIsSending(true)
}, 1000)
@@ -158,13 +160,7 @@ export const ConversationContainer = (props: Props) => {
const { data, error } = await continueChatQuery({
apiHost: props.context.apiHost,
sessionId: props.initialChatReply.sessionId,
- message: message
- ? {
- type: 'text',
- text: message,
- attachedFileUrls: attachments?.map((attachment) => attachment.url),
- }
- : undefined,
+ message: convertSubmitContentToMessage(answer),
})
clearTimeout(longRequest)
setIsSending(false)
@@ -294,7 +290,11 @@ export const ConversationContainer = (props: Props) => {
if (response && 'logs' in response) saveLogs(response.logs)
if (response && 'replyToSend' in response) {
setIsSending(false)
- sendMessage(response.replyToSend)
+ sendMessage(
+ response.replyToSend
+ ? { type: 'text', value: response.replyToSend }
+ : undefined
+ )
return
}
if (response && 'blockedPopupUrl' in response)
@@ -364,3 +364,16 @@ const BottomSpacer = () => (
style={{ height: bottomSpacerHeight + 'px' }}
/>
)
+
+const convertSubmitContentToMessage = (
+ answer: InputSubmitContent | undefined
+): Message | undefined => {
+ if (!answer) return
+ if (answer.type === 'text')
+ return {
+ type: 'text',
+ text: answer.value,
+ attachedFileUrls: answer.attachments?.map((attachment) => attachment.url),
+ }
+ if (answer.type === 'recording') return { type: 'audio', url: answer.url }
+}
diff --git a/packages/embeds/js/src/components/InputChatBlock.tsx b/packages/embeds/js/src/components/InputChatBlock.tsx
index c7d5fa4d0..725de233d 100644
--- a/packages/embeds/js/src/components/InputChatBlock.tsx
+++ b/packages/embeds/js/src/components/InputChatBlock.tsx
@@ -15,7 +15,7 @@ import type {
DateInputBlock,
} from '@typebot.io/schemas'
import { GuestBubble } from './bubbles/GuestBubble'
-import { Answer, BotContext, InputSubmitContent } from '@/types'
+import { BotContext, InputSubmitContent } from '@/types'
import { TextInput } from '@/features/blocks/inputs/textInput'
import { NumberInput } from '@/features/blocks/inputs/number'
import { EmailInput } from '@/features/blocks/inputs/email'
@@ -48,33 +48,24 @@ type Props = {
isInputPrefillEnabled: boolean
hasError: boolean
onTransitionEnd: () => void
- onSubmit: (answer: string, attachments?: Answer['attachments']) => void
+ onSubmit: (content: InputSubmitContent) => void
onSkip: () => void
}
export const InputChatBlock = (props: Props) => {
- const [answer, setAnswer] = persist(createSignal(), {
+ const [answer, setAnswer] = persist(createSignal(), {
key: `typebot-${props.context.typebot.id}-input-${props.chunkIndex}`,
storage: props.context.storage,
})
- const handleSubmit = async ({
- label,
- value,
- attachments,
- }: InputSubmitContent & Pick) => {
- setAnswer({
- text: props.block.type !== InputBlockType.FILE ? label ?? value : '',
- attachments,
- })
- props.onSubmit(
- value ?? label,
- props.block.type === InputBlockType.FILE ? undefined : attachments
- )
+ const handleSubmit = async (content: InputSubmitContent) => {
+ console.log(content)
+ setAnswer(content)
+ props.onSubmit(content)
}
const handleSkip = (label: string) => {
- setAnswer({ text: label })
+ setAnswer({ type: 'text', value: label })
props.onSkip()
}
@@ -83,14 +74,18 @@ export const InputChatBlock = (props: Props) => {
(message) => props.chunkIndex === message.inputIndex
)?.formattedMessage
if (formattedMessage && props.block.type !== InputBlockType.FILE)
- setAnswer((answer) => ({ ...answer, text: formattedMessage }))
+ setAnswer((answer) =>
+ answer?.type === 'text'
+ ? { ...answer, label: formattedMessage }
+ : answer
+ )
})
return (
{
block={props.block}
chunkIndex={props.chunkIndex}
isInputPrefillEnabled={props.isInputPrefillEnabled}
- existingAnswer={props.hasError ? answer()?.text : undefined}
+ existingAnswer={
+ props.hasError ? getAnswerValue(answer()!) : undefined
+ }
onTransitionEnd={props.onTransitionEnd}
onSubmit={handleSubmit}
onSkip={handleSkip}
@@ -128,6 +125,11 @@ export const InputChatBlock = (props: Props) => {
)
}
+const getAnswerValue = (answer?: InputSubmitContent) => {
+ if (!answer) return
+ return answer.type === 'text' ? answer.value : answer.url
+}
+
const Input = (props: {
context: BotContext
block: NonNullable
@@ -146,6 +148,7 @@ const Input = (props: {
const submitPaymentSuccess = () =>
props.onSubmit({
+ type: 'text',
value:
(props.block.options as PaymentInputBlock['options'])?.labels
?.success ?? defaultPaymentInputOptions.labels.success,
diff --git a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
index 62bfa47eb..efb500305 100644
--- a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
+++ b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
@@ -1,22 +1,24 @@
-import { createSignal, For, Show } from 'solid-js'
+import { createSignal, For, Show, Switch, Match } from 'solid-js'
import { Avatar } from '../avatars/Avatar'
import { isMobile } from '@/utils/isMobileSignal'
-import { Answer } from '@/types'
+import {
+ InputSubmitContent,
+ RecordingInputSubmitContent,
+ TextInputSubmitContent,
+} from '@/types'
import { Modal } from '../Modal'
import { isNotEmpty } from '@typebot.io/lib'
import { FilePreview } from '@/features/blocks/inputs/fileUpload/components/FilePreview'
import clsx from 'clsx'
type Props = {
- message: Answer
+ answer?: InputSubmitContent
showAvatar: boolean
avatarSrc?: string
hasHostAvatar: boolean
}
export const GuestBubble = (props: Props) => {
- const [clickedImageSrc, setClickedImageSrc] = createSignal()
-
return (
()
+
+ return (
+ ) => (
+
+)
diff --git a/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx
index 4e080c60f..9115590f5 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx
@@ -5,11 +5,12 @@ import { clsx } from 'clsx'
import { CustomEmbedBubble as CustomEmbedBubbleProps } from '@typebot.io/schemas'
import { executeCode } from '@/features/blocks/logic/script/executeScript'
import { botContainerHeight } from '@/utils/botContainerHeightSignal'
+import { InputSubmitContent } from '@/types'
type Props = {
content: CustomEmbedBubbleProps['content']
onTransitionEnd?: (ref?: HTMLDivElement) => void
- onCompleted: (reply?: string) => void
+ onCompleted: (reply?: InputSubmitContent) => void
}
let typingTimeout: NodeJS.Timeout
@@ -36,7 +37,8 @@ export const CustomEmbedBubble = (props: Props) => {
executeCode({
args: {
...props.content.waitForEventFunction.args,
- continueFlow: props.onCompleted,
+ continueFlow: (text: string) =>
+ props.onCompleted(text ? { type: 'text', value: text } : undefined),
},
content: props.content.waitForEventFunction.content,
})
diff --git a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
index 84a241bae..85ea6d189 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
@@ -5,11 +5,12 @@ import { clsx } from 'clsx'
import { EmbedBubbleBlock } from '@typebot.io/schemas'
import { defaultEmbedBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/embed/constants'
import { isNotEmpty } from '@typebot.io/lib/utils'
+import { InputSubmitContent } from '@/types'
type Props = {
content: EmbedBubbleBlock['content']
onTransitionEnd?: (ref?: HTMLDivElement) => void
- onCompleted?: (data?: string) => void
+ onCompleted?: (data?: InputSubmitContent) => void
}
let typingTimeout: NodeJS.Timeout
@@ -32,7 +33,10 @@ export const EmbedBubble = (props: Props) => {
) {
props.onCompleted?.(
props.content.waitForEvent.saveDataInVariableId && event.data.data
- ? event.data.data
+ ? {
+ type: 'text',
+ value: event.data.data,
+ }
: undefined
)
window.removeEventListener('message', handleMessage)
diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx
index 07baffa67..10a7583a6 100644
--- a/packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx
@@ -22,7 +22,10 @@ export const Buttons = (props: Props) => {
})
const handleClick = (itemIndex: number) =>
- props.onSubmit({ value: filteredItems()[itemIndex].content ?? '' })
+ props.onSubmit({
+ type: 'text',
+ value: filteredItems()[itemIndex].content ?? '',
+ })
const filterItems = (inputValue: string) => {
setFilteredItems(
diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx
index c2f7307a6..61a294fee 100644
--- a/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx
@@ -39,6 +39,7 @@ export const MultipleChoicesForm = (props: Props) => {
const handleSubmit = () =>
props.onSubmit({
+ type: 'text',
value: selectedItemIds()
.map(
(selectedItemId) =>
diff --git a/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx b/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
index 1d11cfc60..e323f8a5f 100644
--- a/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
@@ -19,6 +19,7 @@ export const DateForm = (props: Props) => {
const submit = () => {
if (inputValues().from === '' && inputValues().to === '') return
props.onSubmit({
+ type: 'text',
value: `${inputValues().from}${
props.options?.isRange ? ` to ${inputValues().to}` : ''
}`,
diff --git a/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx b/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
index 92c453d14..3ae26a706 100644
--- a/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
@@ -24,7 +24,7 @@ export const EmailInput = (props: Props) => {
const submit = () => {
if (checkIfInputIsValid())
- props.onSubmit({ value: inputRef?.value ?? inputValue() })
+ props.onSubmit({ type: 'text', value: inputRef?.value ?? inputValue() })
else inputRef?.focus()
}
diff --git a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
index 9fcfce755..3603bbd06 100644
--- a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
@@ -78,6 +78,7 @@ export const FileUploadForm = (props: Props) => {
setIsUploading(false)
if (urls.length && urls[0])
return props.onSubmit({
+ type: 'text',
label:
props.block.options?.labels?.success?.single ??
defaultFileInputOptions.labels.success.single,
@@ -107,6 +108,7 @@ export const FileUploadForm = (props: Props) => {
description: 'An error occured while uploading the files',
})
props.onSubmit({
+ type: 'text',
label:
urls.length > 1
? (
diff --git a/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx b/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
index 0cbd69e0c..8765a7b33 100644
--- a/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
@@ -27,7 +27,10 @@ export const NumberInput = (props: NumberInputProps) => {
const submit = () => {
if (checkIfInputIsValid())
- props.onSubmit({ value: inputRef?.value ?? inputValue().toString() })
+ props.onSubmit({
+ type: 'text',
+ value: inputRef?.value ?? inputValue().toString(),
+ })
else inputRef?.focus()
}
diff --git a/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx b/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
index e2995ae9f..d26cdea62 100644
--- a/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
@@ -66,6 +66,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
if (checkIfInputIsValid()) {
const val = inputRef?.value ?? inputValue()
props.onSubmit({
+ type: 'text',
value: val.startsWith('+')
? val
: `${selectedCountryDialCode ?? ''}${val}`,
diff --git a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
index d8da50630..12382fe4b 100644
--- a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
@@ -42,6 +42,7 @@ export const MultiplePictureChoice = (props: Props) => {
const handleSubmit = () =>
props.onSubmit({
+ type: 'text',
value: selectedItemIds()
.map((selectedItemId) => {
const item = props.defaultItems.find(
diff --git a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
index dc8d306bf..5ce1680b7 100644
--- a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
@@ -24,6 +24,7 @@ export const SinglePictureChoice = (props: Props) => {
const handleClick = (itemIndex: number) => {
const item = filteredItems()[itemIndex]
return props.onSubmit({
+ type: 'text',
label: isNotEmpty(item.title) ? item.title : item.pictureSrc ?? item.id,
value: item.id,
})
diff --git a/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx b/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
index 0eff01ea4..ce0f28888 100644
--- a/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
@@ -21,12 +21,13 @@ export const RatingForm = (props: Props) => {
e.preventDefault()
const selectedRating = rating()
if (isNotDefined(selectedRating)) return
- props.onSubmit({ value: selectedRating.toString() })
+ props.onSubmit({ type: 'text', value: selectedRating.toString() })
}
const handleClick = (rating: number) => {
if (props.block.options?.isOneClickSubmitEnabled)
- props.onSubmit({ value: rating.toString() })
+ props.onSubmit({ type: 'text', value: rating.toString() })
+
setRating(rating)
}
diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
index 0b17486ca..c392f7ac9 100644
--- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
@@ -1,10 +1,18 @@
import { Textarea, ShortTextInput } from '@/components'
import { SendButton } from '@/components/SendButton'
import { CommandData } from '@/features/commands'
-import { Answer, BotContext, InputSubmitContent } from '@/types'
+import { Attachment, BotContext, InputSubmitContent } from '@/types'
import { isMobile } from '@/utils/isMobileSignal'
import type { TextInputBlock } from '@typebot.io/schemas'
-import { For, Show, createSignal, onCleanup, onMount } from 'solid-js'
+import {
+ For,
+ Match,
+ Show,
+ Switch,
+ createSignal,
+ onCleanup,
+ onMount,
+} from 'solid-js'
import { defaultTextInputOptions } from '@typebot.io/schemas/features/blocks/inputs/text/constants'
import clsx from 'clsx'
import { TextInputAddFileButton } from '@/components/TextInputAddFileButton'
@@ -15,6 +23,9 @@ import { toaster } from '@/utils/toaster'
import { isDefined } from '@typebot.io/lib'
import { uploadFiles } from '../../fileUpload/helpers/uploadFiles'
import { guessApiHost } from '@/utils/guessApiHost'
+import { VoiceRecorder } from './VoiceRecorder'
+import { Button } from '@/components/Button'
+import { MicrophoneIcon } from '@/components/icons/MicrophoneIcon'
type Props = {
block: TextInputBlock
@@ -30,7 +41,10 @@ export const TextInput = (props: Props) => {
{ fileIndex: number; progress: number } | undefined
>(undefined)
const [isDraggingOver, setIsDraggingOver] = createSignal(false)
+ const [isRecording, setIsRecording] = createSignal(false)
let inputRef: HTMLInputElement | HTMLTextAreaElement | undefined
+ let mediaRecorder: MediaRecorder | undefined
+ let recordedChunks: Blob[] = []
const handleInput = (inputValue: string) => setInputValue(inputValue)
@@ -38,8 +52,12 @@ export const TextInput = (props: Props) => {
inputRef?.value !== '' && inputRef?.reportValidity()
const submit = async () => {
+ if (isRecording() && mediaRecorder) {
+ mediaRecorder.stop()
+ return
+ }
if (checkIfInputIsValid()) {
- let attachments: Answer['attachments']
+ let attachments: Attachment[] | undefined
if (selectedFiles().length > 0) {
setUploadProgress(undefined)
const urls = await uploadFiles({
@@ -57,6 +75,7 @@ export const TextInput = (props: Props) => {
attachments = urls?.filter(isDefined)
}
props.onSubmit({
+ type: 'text',
value: inputRef?.value ?? inputValue(),
attachments,
})
@@ -137,6 +156,59 @@ export const TextInput = (props: Props) => {
)
}
+ const recordVoice = () => {
+ setIsRecording(true)
+ }
+
+ const handleRecordingStart = (stream: MediaStream) => {
+ mediaRecorder = new MediaRecorder(stream)
+ mediaRecorder.ondataavailable = (event) => {
+ if (event.data.size === 0) return
+ recordedChunks.push(event.data)
+ }
+ mediaRecorder.onstop = async () => {
+ if (!isRecording() || recordedChunks.length === 0) return
+ const audioFile = new File(
+ recordedChunks,
+ `rec-${props.block.id}-${Date.now()}.mp3`,
+ {
+ type: 'audio/mp3',
+ }
+ )
+ setUploadProgress(undefined)
+ const urls = (
+ await uploadFiles({
+ apiHost:
+ props.context.apiHost ?? guessApiHost({ ignoreChatApiUrl: true }),
+ files: [
+ {
+ file: audioFile,
+ input: {
+ sessionId: props.context.sessionId,
+ fileName: audioFile.name,
+ },
+ },
+ ],
+ onUploadProgress: setUploadProgress,
+ })
+ )
+ .filter(isDefined)
+ .map((url) => url.url)
+ props.onSubmit({
+ type: 'recording',
+ url: urls[0],
+ })
+ }
+ mediaRecorder.start()
+ }
+
+ const handleRecordingAbort = () => {
+ setIsRecording(false)
+ mediaRecorder?.stop()
+ mediaRecorder = undefined
+ recordedChunks = []
+ }
+
return (
['buttons']
+ onAbortRecording: () => void
+ onRecordingStart: (stream: MediaStream) => void
+}
+
+export const VoiceRecorder = (props: Props) => {
+ const [recordingTime, setRecordingTime] = createSignal(0)
+ let canvasElement: HTMLCanvasElement | undefined
+ let animationFrameId: number
+ let ctx: CanvasRenderingContext2D | undefined
+ let audioContext: AudioContext | undefined
+ let volumeNode: AudioWorkletNode | undefined
+ let microphone: MediaStreamAudioSourceNode | undefined
+ let stream: MediaStream | undefined
+ let bars: number[] = []
+ let recordTimeInterval: NodeJS.Timer | undefined
+ let lastFrameTime: DOMHighResTimeStamp | undefined
+
+ const fillRgb = hexToRgb(
+ props.buttonsTheme?.backgroundColor ?? defaultButtonsBackgroundColor
+ ).join(', ')
+
+ const animate = () => {
+ if (!ctx || !canvasElement || !lastFrameTime) return
+
+ const currentTime = performance.now()
+ const deltaTime = currentTime - lastFrameTime
+ lastFrameTime = currentTime
+
+ ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
+
+ // Draw init bars
+ ctx.fillStyle = `rgba(${fillRgb}, 0.2)`
+ for (
+ let i = 0;
+ i < (canvasElement.width + barGap) / (barWidth + barGap);
+ i++
+ ) {
+ const x = i * (barWidth + barGap) - offset
+ const barHeight = canvasElement.height * (initBarsHeightPercent / 100)
+ const y = (canvasElement.height - barHeight) / 2
+ ctx.beginPath()
+ ctx.roundRect(x, y, barWidth, barHeight, 5)
+ ctx.fill()
+ }
+
+ ctx.fillStyle = `rgba(${fillRgb}, 1)`
+ for (let i = 0; i < bars.length; i++) {
+ const x = canvasElement.width + (i + 1) * (barWidth + barGap) - offset
+ const barHeight = canvasElement.height * (bars[i] / 100)
+ const y = (canvasElement.height - barHeight) / 2
+ ctx.beginPath()
+ ctx.roundRect(x, y, barWidth, barHeight, 5)
+ ctx.fill()
+ }
+
+ offset += dx * (deltaTime / 1000)
+
+ animationFrameId = requestAnimationFrame(animate)
+ }
+
+ const startRecording = async () => {
+ if (!canvasElement) return
+ if (!ctx) ctx = canvasElement.getContext('2d') ?? undefined
+
+ lastFrameTime = performance.now()
+
+ animate()
+
+ recordTimeInterval = setInterval(() => {
+ setRecordingTime((prev) => (prev += 1))
+ }, 1000)
+
+ stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+
+ props.onRecordingStart(stream)
+
+ audioContext = new AudioContext()
+ volumeNode = await loadVolumeProcessorWorklet(audioContext)
+
+ microphone = audioContext.createMediaStreamSource(stream)
+
+ microphone.connect(volumeNode)
+ volumeNode.connect(audioContext.destination)
+
+ volumeNode.port.onmessage = (event) => {
+ bars.push(event.data)
+ }
+ }
+
+ const stopRecording = () => {
+ if (ctx && canvasElement)
+ ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
+ offset = 0
+ volumeNode?.disconnect()
+ volumeNode = undefined
+ microphone?.disconnect()
+ microphone = undefined
+ audioContext?.close()
+ audioContext = undefined
+ stream?.getTracks().forEach((track) => track.stop())
+ stream = undefined
+ bars = []
+ clearTimeout(recordTimeInterval)
+ setRecordingTime(0)
+
+ cancelAnimationFrame(animationFrameId)
+
+ props.onAbortRecording()
+ }
+
+ createEffect(() => {
+ if (props.isRecording) {
+ startRecording()
+ } else {
+ stopRecording()
+ }
+ })
+
+ onCleanup(() => {
+ stopRecording()
+ })
+
+ return (
+ ()
diff --git a/packages/embeds/js/src/utils/getAnswerContent.ts b/packages/embeds/js/src/utils/getAnswerContent.ts
new file mode 100644
index 000000000..694bd2433
--- /dev/null
+++ b/packages/embeds/js/src/utils/getAnswerContent.ts
@@ -0,0 +1,6 @@
+import { InputSubmitContent } from '@/types'
+
+export const getAnswerContent = (answer: InputSubmitContent): string => {
+ if (answer.type === 'text') return answer.label ?? answer.value
+ return answer.url
+}
diff --git a/packages/embeds/js/tsconfig.json b/packages/embeds/js/tsconfig.json
index 1c583257e..e1ac8718d 100644
--- a/packages/embeds/js/tsconfig.json
+++ b/packages/embeds/js/tsconfig.json
@@ -15,6 +15,8 @@
"declarationMap": true,
"outDir": "dist",
"noEmit": false,
- "emitDeclarationOnly": true
+ "emitDeclarationOnly": true,
+ "noEmitOnError": true,
+ "sourceMap": true
}
}
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 389493e7d..2beeb7d26 100644
--- a/packages/embeds/nextjs/package.json
+++ b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@typebot.io/nextjs",
- "version": "0.3.8",
+ "version": "0.3.9",
"description": "Convenient library to display typebots on your Next.js website",
"main": "dist/index.js",
"types": "dist/index.d.ts",
diff --git a/packages/embeds/nextjs/rollup.config.js b/packages/embeds/nextjs/rollup.config.js
index f14a3209b..b5896e1ad 100644
--- a/packages/embeds/nextjs/rollup.config.js
+++ b/packages/embeds/nextjs/rollup.config.js
@@ -16,6 +16,7 @@ const indexConfig = {
output: {
dir: './dist',
format: 'es',
+ sourcemap: true,
},
external: ['next/dynamic.js', 'react', 'react/jsx-runtime'],
watch: {
diff --git a/packages/embeds/nextjs/tsconfig.json b/packages/embeds/nextjs/tsconfig.json
index 3ec6e043a..a0a055f0e 100644
--- a/packages/embeds/nextjs/tsconfig.json
+++ b/packages/embeds/nextjs/tsconfig.json
@@ -10,6 +10,8 @@
"declaration": true,
"declarationMap": true,
"noEmit": false,
- "emitDeclarationOnly": true
+ "emitDeclarationOnly": true,
+ "noEmitOnError": true,
+ "sourceMap": true
}
}
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 4349b8902..7b326b0a6 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@typebot.io/react",
- "version": "0.3.8",
+ "version": "0.3.9",
"description": "Convenient library to display typebots on your React app",
"main": "dist/index.js",
"types": "dist/index.d.ts",
diff --git a/packages/embeds/react/rollup.config.js b/packages/embeds/react/rollup.config.js
index 9827a2da4..c9526c4fa 100644
--- a/packages/embeds/react/rollup.config.js
+++ b/packages/embeds/react/rollup.config.js
@@ -16,6 +16,7 @@ const indexConfig = {
output: {
file: './dist/index.js',
format: 'es',
+ sourcemap: true,
},
external: ['react', 'react/jsx-runtime'],
watch: {
diff --git a/packages/embeds/react/src/stories/assets/leadGenerationTypebot.ts b/packages/embeds/react/src/stories/assets/leadGenerationTypebot.ts
index 9fb62561b..7fc710971 100644
--- a/packages/embeds/react/src/stories/assets/leadGenerationTypebot.ts
+++ b/packages/embeds/react/src/stories/assets/leadGenerationTypebot.ts
@@ -12,7 +12,7 @@ export const leadGenerationTypebot: StartTypebot = {
version: '3',
id: 'clckrl4q5000t3b6sabwokaar',
events: null,
- publishedAt: new Date(),
+ updatedAt: new Date(),
groups: [
{
id: 'clckrl4q5000g3b6skizhd262',
diff --git a/packages/embeds/react/tsconfig.json b/packages/embeds/react/tsconfig.json
index 3ec6e043a..a0a055f0e 100644
--- a/packages/embeds/react/tsconfig.json
+++ b/packages/embeds/react/tsconfig.json
@@ -10,6 +10,8 @@
"declaration": true,
"declarationMap": true,
"noEmit": false,
- "emitDeclarationOnly": true
+ "emitDeclarationOnly": true,
+ "noEmitOnError": true,
+ "sourceMap": true
}
}
diff --git a/packages/schemas/features/blocks/inputs/text/constants.ts b/packages/schemas/features/blocks/inputs/text/constants.ts
index d2d737b0f..e759ad188 100644
--- a/packages/schemas/features/blocks/inputs/text/constants.ts
+++ b/packages/schemas/features/blocks/inputs/text/constants.ts
@@ -4,6 +4,10 @@ import { TextInputBlock } from './schema'
export const defaultTextInputOptions = {
isLong: false,
labels: { button: defaultButtonLabel, placeholder: 'Type your answer...' },
+ audioClip: {
+ isEnabled: false,
+ visibility: 'Auto',
+ },
attachments: {
isEnabled: false,
visibility: 'Auto',
diff --git a/packages/schemas/features/blocks/inputs/text/schema.ts b/packages/schemas/features/blocks/inputs/text/schema.ts
index 176c072a0..0d16d1b27 100644
--- a/packages/schemas/features/blocks/inputs/text/schema.ts
+++ b/packages/schemas/features/blocks/inputs/text/schema.ts
@@ -17,6 +17,13 @@ export const textInputOptionsSchema = textInputOptionsBaseSchema
.merge(
z.object({
isLong: z.boolean().optional(),
+ audioClip: z
+ .object({
+ isEnabled: z.boolean().optional(),
+ saveVariableId: z.string().optional(),
+ visibility: z.enum(fileVisibilityOptions).optional(),
+ })
+ .optional(),
attachments: z
.object({
isEnabled: z.boolean().optional(),
diff --git a/packages/schemas/features/chat/schema.ts b/packages/schemas/features/chat/schema.ts
index 7760c51a4..6fed87738 100644
--- a/packages/schemas/features/chat/schema.ts
+++ b/packages/schemas/features/chat/schema.ts
@@ -42,6 +42,14 @@ export const messageSchema = z.preprocess(
'Can only be provided if current input block is a text input block that allows attachments'
),
}),
+ z
+ .object({
+ type: z.literal('audio'),
+ url: z.string(),
+ })
+ .describe(
+ 'Can only be provided if current input block is a text input that allows audio clips'
+ ),
])
)
export type Message = z.infer
diff --git a/packages/schemas/features/chat/sessionState.ts b/packages/schemas/features/chat/sessionState.ts
index b8b8ff53b..64ff0a8d3 100644
--- a/packages/schemas/features/chat/sessionState.ts
+++ b/packages/schemas/features/chat/sessionState.ts
@@ -118,10 +118,11 @@ export const sessionStateSchema = z
])
.transform((state): SessionState => {
if (state.version === '3') return state
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
let migratedState: any = state
if (!state.version) migratedState = migrateFromV1ToV2(state)
return migrateFromV2ToV3(migratedState)
- })
+ }) as z.ZodType
const migrateFromV1ToV2 = (
state: z.infer
diff --git a/packages/schemas/package.json b/packages/schemas/package.json
index 41172a788..e5ae6b519 100644
--- a/packages/schemas/package.json
+++ b/packages/schemas/package.json
@@ -14,6 +14,8 @@
"@typebot.io/forge-repository": "workspace:*",
"@typebot.io/prisma": "workspace:*",
"@typebot.io/tsconfig": "workspace:*",
- "typescript": "5.4.5"
+ "typescript": "5.4.5",
+ "eslint": "8.44.0",
+ "eslint-config-custom": "workspace:*"
}
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d76367641..6f5eba7dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1032,7 +1032,7 @@ importers:
version: 0.0.12(zod@3.22.4)
'@ark-ui/solid':
specifier: 3.3.0
- version: 3.3.0(@internationalized/date@3.5.4)(solid-js@1.7.8)
+ version: 3.3.0(@internationalized/date@3.5.5)(solid-js@1.7.8)
'@stripe/stripe-js':
specifier: 1.54.1
version: 1.54.1
@@ -1966,6 +1966,12 @@ importers:
'@typebot.io/tsconfig':
specifier: workspace:*
version: link:../tsconfig
+ eslint:
+ specifier: 8.44.0
+ version: 8.44.0
+ eslint-config-custom:
+ specifier: workspace:*
+ version: link:../eslint-config-custom
typescript:
specifier: 5.4.5
version: 5.4.5
@@ -13361,7 +13367,7 @@ snapshots:
call-me-maybe: 1.0.2
openapi-types: 12.1.3
- '@ark-ui/anatomy@3.5.0(@internationalized/date@3.5.4)':
+ '@ark-ui/anatomy@3.5.0(@internationalized/date@3.5.5)':
dependencies:
'@zag-js/accordion': 0.62.1
'@zag-js/anatomy': 0.62.1
@@ -13374,7 +13380,7 @@ snapshots:
'@zag-js/color-utils': 0.62.1
'@zag-js/combobox': 0.62.1
'@zag-js/date-picker': 0.62.1
- '@zag-js/date-utils': 0.62.1(@internationalized/date@3.5.4)
+ '@zag-js/date-utils': 0.62.1(@internationalized/date@3.5.5)
'@zag-js/dialog': 0.62.1
'@zag-js/editable': 0.62.1
'@zag-js/file-upload': 0.62.1
@@ -13404,9 +13410,9 @@ snapshots:
transitivePeerDependencies:
- '@internationalized/date'
- '@ark-ui/solid@3.3.0(@internationalized/date@3.5.4)(solid-js@1.7.8)':
+ '@ark-ui/solid@3.3.0(@internationalized/date@3.5.5)(solid-js@1.7.8)':
dependencies:
- '@ark-ui/anatomy': 3.5.0(@internationalized/date@3.5.4)
+ '@ark-ui/anatomy': 3.5.0(@internationalized/date@3.5.5)
'@zag-js/accordion': 0.56.1
'@zag-js/avatar': 0.56.1
'@zag-js/carousel': 0.56.1
@@ -18882,10 +18888,6 @@ snapshots:
dependencies:
'@internationalized/date': 3.5.4
- '@zag-js/date-utils@0.62.1(@internationalized/date@3.5.4)':
- dependencies:
- '@internationalized/date': 3.5.4
-
'@zag-js/date-utils@0.62.1(@internationalized/date@3.5.5)':
dependencies:
'@internationalized/date': 3.5.5
{
: undefined,
}}
>
-
+
+
+
+
+
+
+
+
+ )
+}
+
+const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
+ const [clickedImageSrc, setClickedImageSrc] = createSignal
- 0}>
-
-
+
-
- attachment.type.startsWith('image')
- )}
- >
- {(attachment, idx) => (
- 
- attachment.type.startsWith('image')
- ).length > 1 && 'max-w-[90%]'
- )}
- onClick={() => setClickedImageSrc(attachment.url)}
- />
- )}
-
-
-
- !attachment.type.startsWith('image')
- )}
- >
- {(attachment) => (
-
-
-
-
- {props.message.text}
-
-
-
+ 0}>
+
+ setClickedImageSrc(undefined)}
@@ -97,9 +121,19 @@ export const GuestBubble = (props: Props) => {
style={{ 'border-radius': '6px' }}
/>
-
-
+
+ )
+}
+
+const AudioGuestBubble = (props: { answer: RecordingInputSubmitContent }) => {
+ return (
+
+
+ attachment.type.startsWith('image')
+ )}
+ >
+ {(attachment, idx) => (
+
+ attachment.type.startsWith('image')
+ ).length > 1 && 'max-w-[90%]'
+ )}
+ onClick={() => setClickedImageSrc(attachment.url)}
+ />
+ )}
+
+
+
+ !attachment.type.startsWith('image')
+ )}
+ >
+ {(attachment) => (
+
+
+
+
+
+ {props.answer.label ?? props.answer.value}
+
+
+
+
)
}
diff --git a/packages/embeds/js/src/components/bubbles/HostBubble.tsx b/packages/embeds/js/src/components/bubbles/HostBubble.tsx
index 6c883843d..251f25d65 100644
--- a/packages/embeds/js/src/components/bubbles/HostBubble.tsx
+++ b/packages/embeds/js/src/components/bubbles/HostBubble.tsx
@@ -4,6 +4,7 @@ import { CustomEmbedBubble } from '@/features/blocks/bubbles/embed/components/Cu
import { ImageBubble } from '@/features/blocks/bubbles/image'
import { TextBubble } from '@/features/blocks/bubbles/textBubble'
import { VideoBubble } from '@/features/blocks/bubbles/video'
+import { InputSubmitContent } from '@/types'
import type {
AudioBubbleBlock,
ChatMessage,
@@ -22,7 +23,7 @@ type Props = {
typingEmulation: Settings['typingEmulation']
isTypingSkipped: boolean
onTransitionEnd?: (ref?: HTMLDivElement) => void
- onCompleted: (reply?: string) => void
+ onCompleted: (reply?: InputSubmitContent) => void
}
export const HostBubble = (props: Props) => (
diff --git a/packages/embeds/js/src/components/icons/MicrophoneIcon.tsx b/packages/embeds/js/src/components/icons/MicrophoneIcon.tsx
new file mode 100644
index 000000000..59e41427a
--- /dev/null
+++ b/packages/embeds/js/src/components/icons/MicrophoneIcon.tsx
@@ -0,0 +1,12 @@
+import { JSX } from 'solid-js/jsx-runtime'
+
+export const MicrophoneIcon = (props: JSX.SvgSVGAttributes
+
+
{
>
- {props.block.options?.labels?.button}
-
+
+
+
+
+
+
+ {props.block.options?.labels?.button}
+
+
+
)
}
diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx
new file mode 100644
index 000000000..fcb2b9613
--- /dev/null
+++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VoiceRecorder.tsx
@@ -0,0 +1,178 @@
+import { createEffect, createSignal, onCleanup } from 'solid-js'
+import { volumeProcessorCode } from './VolumeProcessor'
+import clsx from 'clsx'
+import { CloseIcon } from '@/components/icons/CloseIcon'
+import { Theme } from '@typebot.io/schemas'
+import { hexToRgb } from '@typebot.io/lib/hexToRgb'
+import { defaultButtonsBackgroundColor } from '@typebot.io/schemas/features/typebot/theme/constants'
+
+const barWidth = 3
+const barGap = 3
+const dx = 53.5
+let offset = 0
+const initBarsHeightPercent = 10
+
+type Props = {
+ isRecording: boolean
+ buttonsTheme: NonNullable
-
+
+
+
-
-
-
+
+ {(file, index) => (
+ removeSelectedFile(index())}
+ />
+ )}
+
+
+
-
- {(file, index) => (
- removeSelectedFile(index())}
- />
- )}
-
+ {props.block.options?.isLong ? (
+
+ ) : (
+
+
- {props.block.options?.isLong ? (
-
- ) : (
-
-
-
+
+
+ )
+}
+
+const loadVolumeProcessorWorklet = async (audioContext: AudioContext) => {
+ const blob = new Blob([volumeProcessorCode], {
+ type: 'application/javascript',
+ })
+ const volumeProcessorCodeUrl = URL.createObjectURL(blob)
+ await audioContext.audioWorklet.addModule(volumeProcessorCodeUrl)
+ return new AudioWorkletNode(audioContext, 'volume-processor')
+}
+
+const formatTimeLabel = (seconds: number): string => {
+ const minutes = Math.floor(seconds / 60)
+ const remainingSeconds = seconds % 60
+ const formattedSeconds = remainingSeconds.toString().padStart(2, '0')
+ return `${minutes}:${formattedSeconds}`
+}
diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/VolumeProcessor.ts b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VolumeProcessor.ts
new file mode 100644
index 000000000..4375e6886
--- /dev/null
+++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/VolumeProcessor.ts
@@ -0,0 +1,41 @@
+export const volumeProcessorCode = `
+const throttleMs = 110;
+const maxVolumePercent = 80;
+const volumeMultiplier = 3;
+
+class VolumeProcessor extends AudioWorkletProcessor {
+ constructor() {
+ super();
+ this.lastUpdateTime = 0;
+ this.volumeSum = 0;
+ this.volumeCount = 1;
+ }
+
+ process(inputs) {
+ const input = inputs[0];
+ const currentTime = new Date().getTime();
+ if (input.length > 0) {
+ const channelData = input[0];
+ let sum = 0;
+ for (let i = 0; i < channelData.length; i++) {
+ sum += channelData[i] * channelData[i];
+ }
+ const rms = Math.sqrt(sum / channelData.length);
+ const volumePercent = rms * 100;
+ this.volumeSum += volumePercent;
+ this.volumeCount += 1;
+ }
+ if (currentTime - this.lastUpdateTime >= throttleMs) {
+ const averageVolume = 1 + this.volumeSum / this.volumeCount;
+ this.port.postMessage(Math.min(averageVolume * volumeMultiplier, maxVolumePercent));
+ this.volumeSum = 0;
+ this.volumeCount = 1;
+ this.lastUpdateTime = currentTime;
+ }
+ return true;
+ }
+}
+
+registerProcessor("volume-processor", VolumeProcessor);
+
+`
diff --git a/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx b/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
index 33f7b41a7..b91016fdd 100644
--- a/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
@@ -28,7 +28,7 @@ export const UrlInput = (props: Props) => {
if (inputRef && !inputRef?.value.startsWith('http'))
inputRef.value = `https://${inputRef.value}`
if (checkIfInputIsValid())
- props.onSubmit({ value: inputRef?.value ?? inputValue() })
+ props.onSubmit({ type: 'text', value: inputRef?.value ?? inputValue() })
else inputRef?.focus()
}
diff --git a/packages/embeds/js/src/types.ts b/packages/embeds/js/src/types.ts
index ab74dceb0..5a7d899a5 100644
--- a/packages/embeds/js/src/types.ts
+++ b/packages/embeds/js/src/types.ts
@@ -1,11 +1,5 @@
import { ContinueChatResponse, StartChatResponse } from '@typebot.io/schemas'
-export type InputSubmitContent = {
- label?: string
- value: string
- attachments?: Answer['attachments']
-}
-
export type BotContext = {
typebot: StartChatResponse['typebot']
resultId?: string
@@ -33,10 +27,23 @@ export type ChatChunk = Pick<
streamingMessageId?: string
}
-export type Answer = {
- text: string
- attachments?: {
- type: string
- url: string
- }[]
+export type Attachment = {
+ type: string
+ url: string
}
+
+export type TextInputSubmitContent = {
+ type: 'text'
+ value: string
+ label?: string
+ attachments?: Attachment[]
+}
+
+export type RecordingInputSubmitContent = {
+ type: 'recording'
+ url: string
+}
+
+export type InputSubmitContent =
+ | TextInputSubmitContent
+ | RecordingInputSubmitContent
diff --git a/packages/embeds/js/src/utils/botContainerSignal.ts b/packages/embeds/js/src/utils/botContainerSignal.ts
new file mode 100644
index 000000000..7c2631874
--- /dev/null
+++ b/packages/embeds/js/src/utils/botContainerSignal.ts
@@ -0,0 +1,3 @@
+import { createSignal } from 'solid-js'
+
+export const [botContainer, setBotContainer] = createSignal
+
+
+
+
+ {formatTimeLabel(recordingTime())}
+