+
+For published typebot execution, you need to provide the public typebot ID available here:
+
+
diff --git a/apps/docs/static/img/api/publicId.png b/apps/docs/static/img/api/publicId.png
new file mode 100644
index 000000000..85c4a8f83
Binary files /dev/null and b/apps/docs/static/img/api/publicId.png differ
diff --git a/apps/viewer/src/components/TypebotPageV2.tsx b/apps/viewer/src/components/TypebotPageV2.tsx
index 23db2e433..8887c31d8 100644
--- a/apps/viewer/src/components/TypebotPageV2.tsx
+++ b/apps/viewer/src/components/TypebotPageV2.tsx
@@ -1,33 +1,22 @@
-import { getInitialChatReplyQuery } from '@/queries/getInitialChatReplyQuery'
-import {
- getExistingResultFromSession,
- setResultInSession,
-} from '@/utils/sessionStorage'
import { Standard } from '@typebot.io/react'
-import { BackgroundType, InitialChatReply, Typebot } from 'models'
+import { BackgroundType, Typebot } from 'models'
import { useRouter } from 'next/router'
-import { useCallback, useEffect, useState } from 'react'
-import { ErrorPage } from './ErrorPage'
import { SEO } from './Seo'
export type TypebotPageV2Props = {
url: string
typebot: Pick<
Typebot,
- 'settings' | 'theme' | 'id' | 'name' | 'isClosed' | 'isArchived'
+ 'settings' | 'theme' | 'name' | 'isClosed' | 'isArchived' | 'publicId'
>
}
-let hasInitializedChat = false
-
export const TypebotPageV2 = ({ url, typebot }: TypebotPageV2Props) => {
const { asPath, push } = useRouter()
- const [initialChatReply, setInitialChatReply] = useState {
typebotName={typebot.name}
metadata={typebot.settings.metadata}
/>
- {initialChatReply && (
-
)
}
-
-const extractPrefilledVariables = () => {
- const urlParams = new URLSearchParams(location.search)
-
- const prefilledVariables: { [key: string]: string } = {}
- urlParams.forEach((value, key) => {
- prefilledVariables[key] = value
- })
-
- return prefilledVariables
-}
diff --git a/apps/viewer/src/features/blocks/inputs/buttons/api/utils/validateButtonInput.ts b/apps/viewer/src/features/blocks/inputs/buttons/api/utils/validateButtonInput.ts
index c66e3e98c..463f2ac06 100644
--- a/apps/viewer/src/features/blocks/inputs/buttons/api/utils/validateButtonInput.ts
+++ b/apps/viewer/src/features/blocks/inputs/buttons/api/utils/validateButtonInput.ts
@@ -3,4 +3,9 @@ import { ChoiceInputBlock } from 'models'
export const validateButtonInput = (
buttonBlock: ChoiceInputBlock,
input: string
-) => buttonBlock.items.some((item) => item.content === input)
+) =>
+ input
+ .split(',')
+ .every((value) =>
+ buttonBlock.items.some((item) => item.content === value.trim())
+ )
diff --git a/apps/viewer/src/features/chat/api/procedures/sendMessageProcedure.ts b/apps/viewer/src/features/chat/api/procedures/sendMessageProcedure.ts
index b30aa351d..bf99830d7 100644
--- a/apps/viewer/src/features/chat/api/procedures/sendMessageProcedure.ts
+++ b/apps/viewer/src/features/chat/api/procedures/sendMessageProcedure.ts
@@ -2,6 +2,7 @@ import { checkChatsUsage } from '@/features/usage'
import {
parsePrefilledVariables,
deepParseVariable,
+ parseVariables,
} from '@/features/variables'
import prisma from '@/lib/prisma'
import { publicProcedure } from '@/utils/server/trpc'
@@ -11,15 +12,17 @@ import {
ChatReply,
chatReplySchema,
ChatSession,
- PublicTypebot,
Result,
sendMessageInputSchema,
SessionState,
StartParams,
+ StartTypebot,
+ Theme,
Typebot,
Variable,
} from 'models'
import { continueBotFlow, getSession, startBotFlow } from '../utils'
+import { omit } from 'utils'
export const sendMessageProcedure = publicProcedure
.meta({
@@ -37,12 +40,13 @@ export const sendMessageProcedure = publicProcedure
const session = sessionId ? await getSession(sessionId) : null
if (!session) {
- const { sessionId, typebot, messages, input, resultId } =
+ const { sessionId, typebot, messages, input, resultId, dynamicTheme } =
await startSession(startParams)
return {
sessionId,
typebot: typebot
? {
+ id: typebot.id,
theme: typebot.theme,
settings: typebot.settings,
}
@@ -50,6 +54,7 @@ export const sendMessageProcedure = publicProcedure
messages,
input,
resultId,
+ dynamicTheme,
}
} else {
const { messages, input, logic, newSessionState, integrations } =
@@ -67,89 +72,35 @@ export const sendMessageProcedure = publicProcedure
input,
logic,
integrations,
+ dynamicTheme: parseDynamicThemeReply(newSessionState),
}
}
})
const startSession = async (startParams?: StartParams) => {
- if (!startParams?.typebotId)
+ if (!startParams?.typebot)
throw new TRPCError({
code: 'BAD_REQUEST',
- message: 'No typebotId provided in startParams',
- })
- const typebotQuery = startParams.isPreview
- ? await prisma.typebot.findUnique({
- where: { id: startParams.typebotId },
- select: {
- groups: true,
- edges: true,
- settings: true,
- theme: true,
- variables: true,
- isArchived: true,
- },
- })
- : await prisma.typebot.findUnique({
- where: { id: startParams.typebotId },
- select: {
- publishedTypebot: {
- select: {
- groups: true,
- edges: true,
- settings: true,
- theme: true,
- variables: true,
- },
- },
- name: true,
- isClosed: true,
- isArchived: true,
- id: true,
- },
- })
-
- const typebot =
- typebotQuery && 'publishedTypebot' in typebotQuery
- ? (typebotQuery.publishedTypebot as Pick<
- PublicTypebot,
- 'groups' | 'edges' | 'settings' | 'theme' | 'variables'
- >)
- : (typebotQuery as Pick<
- Typebot,
- 'groups' | 'edges' | 'settings' | 'theme' | 'variables' | 'isArchived'
- >)
-
- if (!typebot)
- throw new TRPCError({
- code: 'NOT_FOUND',
- message: 'Typebot not found',
+ message: 'No typebot provided in startParams',
})
- if ('isClosed' in typebot && typebot.isClosed)
- throw new TRPCError({
- code: 'BAD_REQUEST',
- message: 'Typebot is closed',
- })
-
- const hasReachedLimit = !startParams.isPreview
- ? await checkChatsUsage(startParams.typebotId)
- : false
-
- if (hasReachedLimit)
- throw new TRPCError({
- code: 'FORBIDDEN',
- message: 'Your workspace reached its chat limit',
- })
+ const typebot = await getTypebot(startParams)
const startVariables = startParams.prefilledVariables
? parsePrefilledVariables(typebot.variables, startParams.prefilledVariables)
: typebot.variables
- const result = await getResult({ ...startParams, startVariables })
+ const result = await getResult({
+ ...startParams,
+ typebot: typebot.id,
+ startVariables,
+ isNewResultOnRefreshEnabled:
+ typebot.settings.general.isNewResultOnRefreshEnabled ?? false,
+ })
const initialState: SessionState = {
typebot: {
- id: startParams.typebotId,
+ id: typebot.id,
groups: typebot.groups,
edges: typebot.edges,
variables: startVariables,
@@ -161,8 +112,9 @@ const startSession = async (startParams?: StartParams) => {
result: result
? { id: result.id, variables: result.variables, hasStarted: false }
: undefined,
- isPreview: false,
- currentTypebotId: startParams.typebotId,
+ isPreview: startParams.isPreview || typeof startParams.typebot !== 'string',
+ currentTypebotId: typebot.id,
+ dynamicTheme: parseDynamicThemeInState(typebot.theme),
}
const {
@@ -170,16 +122,26 @@ const startSession = async (startParams?: StartParams) => {
input,
logic,
newSessionState: newInitialState,
- } = await startBotFlow(initialState)
+ } = await startBotFlow(initialState, startParams.startGroupId)
if (!input)
return {
messages,
logic,
+ typebot: {
+ id: typebot.id,
+ settings: deepParseVariable(newInitialState.typebot.variables)(
+ typebot.settings
+ ),
+ theme: deepParseVariable(newInitialState.typebot.variables)(
+ typebot.theme
+ ),
+ },
+ dynamicTheme: parseDynamicThemeReply(newInitialState),
}
const sessionState: ChatSession['state'] = {
- ...(newInitialState ?? initialState),
+ ...newInitialState,
currentBlock: {
groupId: input.groupId,
blockId: input.id,
@@ -196,27 +158,122 @@ const startSession = async (startParams?: StartParams) => {
resultId: result?.id,
sessionId: session.id,
typebot: {
- settings: deepParseVariable(typebot.variables)(typebot.settings),
- theme: deepParseVariable(typebot.variables)(typebot.theme),
+ id: typebot.id,
+ settings: deepParseVariable(newInitialState.typebot.variables)(
+ typebot.settings
+ ),
+ theme: deepParseVariable(newInitialState.typebot.variables)(
+ typebot.theme
+ ),
},
messages,
input,
logic,
+ dynamicTheme: parseDynamicThemeReply(newInitialState),
} satisfies ChatReply
}
+const getTypebot = async ({
+ typebot,
+ isPreview,
+}: Pickprocess.env.NEXT_PUBLIC_VIEWER_URL is missing in env
- )} - > + <> + +
-
-
+ & {
settings: Settings
inputIndex: number
context: BotContext
+ onScrollToBottom: () => void
onSubmit: (input: string) => void
+ onEnd?: () => void
onSkip: () => void
}
@@ -23,6 +25,9 @@ export const ChatChunk = (props: Props) => {
? displayedMessageIndex()
: displayedMessageIndex() + 1
)
+ props.onScrollToBottom()
+ if (!props.input && displayedMessageIndex() === props.messages.length)
+ return props.onEnd?.()
}
return (
diff --git a/packages/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/js/src/components/ConversationContainer/ConversationContainer.tsx
index fb94e3a95..798f1e962 100644
--- a/packages/js/src/components/ConversationContainer/ConversationContainer.tsx
+++ b/packages/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -1,31 +1,73 @@
-import { ChatReply, InitialChatReply } from 'models'
+import { ChatReply, Theme } from 'models'
import { createSignal, For } from 'solid-js'
import { sendMessageQuery } from '@/queries/sendMessageQuery'
import { ChatChunk } from './ChatChunk'
-import { BotContext } from '@/types'
+import { BotContext, InitialChatReply } from '@/types'
import { executeIntegrations } from '@/utils/executeIntegrations'
import { executeLogic } from '@/utils/executeLogic'
+const parseDynamicTheme = (
+ theme: Theme,
+ dynamicTheme: ChatReply['dynamicTheme']
+): Theme => ({
+ ...theme,
+ chat: {
+ ...theme.chat,
+ hostAvatar: theme.chat.hostAvatar
+ ? {
+ ...theme.chat.hostAvatar,
+ url: dynamicTheme?.hostAvatarUrl,
+ }
+ : undefined,
+ guestAvatar: theme.chat.guestAvatar
+ ? {
+ ...theme.chat.guestAvatar,
+ url: dynamicTheme?.guestAvatarUrl,
+ }
+ : undefined,
+ },
+})
+
type Props = {
initialChatReply: InitialChatReply
context: BotContext
+ onNewInputBlock?: (ids: { id: string; groupId: string }) => void
+ onAnswer?: (answer: { message: string; blockId: string }) => void
+ onEnd?: () => void
}
export const ConversationContainer = (props: Props) => {
+ let bottomSpacer: HTMLDivElement | undefined
const [chatChunks, setChatChunks] = createSignal([
{
input: props.initialChatReply.input,
messages: props.initialChatReply.messages,
},
])
+ const [theme, setTheme] = createSignal(
+ parseDynamicTheme(
+ props.initialChatReply.typebot.theme,
+ props.initialChatReply.dynamicTheme
+ )
+ )
const sendMessage = async (message: string) => {
+ const currentBlockId = chatChunks().at(-1)?.input?.id
+ if (currentBlockId && props.onAnswer)
+ props.onAnswer({ message, blockId: currentBlockId })
const data = await sendMessageQuery({
apiHost: props.context.apiHost,
sessionId: props.initialChatReply.sessionId,
message,
})
if (!data) return
+ if (data.dynamicTheme) applyDynamicTheme(data.dynamicTheme)
+ if (data.input?.id && props.onNewInputBlock) {
+ props.onNewInputBlock({
+ id: data.input.id,
+ groupId: data.input.groupId,
+ })
+ }
if (data.integrations) {
executeIntegrations(data.integrations)
}
@@ -41,6 +83,17 @@ export const ConversationContainer = (props: Props) => {
])
}
+ const applyDynamicTheme = (dynamicTheme: ChatReply['dynamicTheme']) => {
+ setTheme((theme) => parseDynamicTheme(theme, dynamicTheme))
+ }
+
+ const autoScrollToBottom = () => {
+ if (!bottomSpacer) return
+ setTimeout(() => {
+ bottomSpacer?.scrollIntoView({ behavior: 'smooth' })
+ }, 200)
+ }
+
return (
@@ -49,16 +102,26 @@ export const ConversationContainer = (props: Props) => {
inputIndex={index()}
messages={chatChunk.messages}
input={chatChunk.input}
- theme={props.initialChatReply.typebot.theme}
+ theme={theme()}
settings={props.initialChatReply.typebot.settings}
onSubmit={sendMessage}
+ onScrollToBottom={autoScrollToBottom}
onSkip={() => {
// TODO: implement skip
}}
+ onEnd={props.onEnd}
context={props.context}
/>
)}
+
diff --git a/packages/js/src/components/LiteBadge.tsx b/packages/js/src/components/LiteBadge.tsx
index e7343e9cf..af153bb40 100644
--- a/packages/js/src/components/LiteBadge.tsx
+++ b/packages/js/src/components/LiteBadge.tsx
@@ -38,7 +38,7 @@ export const LiteBadge = (props: Props) => {
href={'https://www.typebot.io/?utm_source=litebadge'}
target="_blank"
rel="noopener noreferrer"
- class="fixed py-1 px-2 bg-white z-50 rounded shadow-md lite-badge"
+ class="absolute py-1 px-2 bg-white z-50 rounded shadow-md lite-badge text-gray-900"
style={{ bottom: '20px' }}
id="lite-badge"
>
diff --git a/packages/js/src/components/avatars/Avatar.tsx b/packages/js/src/components/avatars/Avatar.tsx
index 7a1cdd3da..22746b048 100644
--- a/packages/js/src/components/avatars/Avatar.tsx
+++ b/packages/js/src/components/avatars/Avatar.tsx
@@ -1,24 +1,25 @@
import { isMobile } from '@/utils/isMobileSignal'
import { Show } from 'solid-js'
+import { isNotEmpty } from 'utils'
import { DefaultAvatar } from './DefaultAvatar'
export const Avatar = (props: { avatarSrc?: string }) => (
-
-
- 
-
- )}
-
+
+ 
+
)
diff --git a/packages/js/src/components/inputs/ShortTextInput.tsx b/packages/js/src/components/inputs/ShortTextInput.tsx
index e4948fccd..1cc05f10c 100644
--- a/packages/js/src/components/inputs/ShortTextInput.tsx
+++ b/packages/js/src/components/inputs/ShortTextInput.tsx
@@ -1,4 +1,3 @@
-import { isMobile } from '@/utils/isMobileSignal'
import { splitProps } from 'solid-js'
import { JSX } from 'solid-js/jsx-runtime'
@@ -9,13 +8,13 @@ type ShortTextInputProps = {
export const ShortTextInput = (props: ShortTextInputProps) => {
const [local, others] = splitProps(props, ['ref', 'onInput'])
+
return (
local.onInput(e.currentTarget.value)}
{...others}
/>
diff --git a/packages/js/src/demo/App.tsx b/packages/js/src/demo/App.tsx
index 355848cae..14ee399c0 100644
--- a/packages/js/src/demo/App.tsx
+++ b/packages/js/src/demo/App.tsx
@@ -3,9 +3,6 @@ import type { Component } from 'solid-js'
export const App: Component = () => {
return (
-
-
-
+
+
+
)
}
diff --git a/packages/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/js/src/components/ConversationContainer/ChatChunk.tsx
index e80138b16..70796cb10 100644
--- a/packages/js/src/components/ConversationContainer/ChatChunk.tsx
+++ b/packages/js/src/components/ConversationContainer/ChatChunk.tsx
@@ -10,7 +10,9 @@ type Props = Pick
+
-
+
+
+ )
+}
diff --git a/packages/js/src/components/InputChatBlock.tsx b/packages/js/src/components/InputChatBlock.tsx
index 2dcd06545..80d679648 100644
--- a/packages/js/src/components/InputChatBlock.tsx
+++ b/packages/js/src/components/InputChatBlock.tsx
@@ -44,7 +44,7 @@ export const InputChatBlock = (props: Props) => {
const handleSubmit = async ({ label, value }: InputSubmitContent) => {
setAnswer(label ?? value)
- props.onSubmit(value)
+ props.onSubmit(value ?? label)
}
return (
@@ -96,37 +96,40 @@ const Input = (props: {
{props.error.message}
+
+