♻️ Introduce typebot v6 with events (#1013)

Closes #885
This commit is contained in:
Baptiste Arnaud
2023-11-08 15:34:16 +01:00
committed by GitHub
parent 68e4fc71fb
commit 35300eaf34
634 changed files with 58971 additions and 31449 deletions

View File

@@ -11,7 +11,6 @@ import {
MenuItem,
useDisclosure,
ButtonProps,
useColorModeValue,
} from '@chakra-ui/react'
import {
ChevronLeftIcon,
@@ -21,7 +20,6 @@ import {
} from '@/components/icons'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
import { InputBlockType } from '@typebot.io/schemas'
import { useRouter } from 'next/router'
import { isNotDefined } from '@typebot.io/lib'
import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
@@ -31,6 +29,8 @@ import { useTranslate } from '@tolgee/react'
import { trpc } from '@/lib/trpc'
import { useToast } from '@/hooks/useToast'
import { parseDefaultPublicId } from '../helpers/parseDefaultPublicId'
import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
import { ConfirmModal } from '@/components/ConfirmModal'
type Props = ButtonProps & {
isMoreMenuDisabled?: boolean
@@ -40,10 +40,14 @@ export const PublishButton = ({
...props
}: Props) => {
const { t } = useTranslate()
const warningTextColor = useColorModeValue('red.300', 'red.600')
const { workspace } = useWorkspace()
const { push, query, pathname } = useRouter()
const { isOpen, onOpen, onClose } = useDisclosure()
const {
isOpen: isNewEngineWarningOpen,
onOpen: onNewEngineWarningOpen,
onClose: onNewEngineWarningClose,
} = useDisclosure()
const {
isPublished,
publishedTypebot,
@@ -52,6 +56,7 @@ export const PublishButton = ({
isSavingLoading,
updateTypebot,
save,
publishedTypebotVersion,
} = useTypebot()
const { showToast } = useToast()
@@ -133,18 +138,33 @@ export const PublishButton = ({
onClose={onClose}
type={t('billing.limitMessage.fileInput')}
/>
{publishedTypebotVersion !== typebot?.version && (
<ConfirmModal
isOpen={isNewEngineWarningOpen}
onConfirm={handlePublishClick}
onClose={onNewEngineWarningClose}
confirmButtonColor="blue"
title="⚠️ New engine version"
message={
<Stack>
<Text>
You are about to a deploy a version of your bot with an updated
engine.
</Text>
<Text fontWeight="bold">
Make sure to test it thoroughly in preview mode before
publishing.
</Text>
</Stack>
}
confirmButtonLabel={'Publish'}
/>
)}
<Tooltip
placement="bottom-end"
label={
<Stack>
{!publishedTypebot?.version ? (
<Text color={warningTextColor} fontWeight="semibold">
This will deploy your bot with an updated engine. Make sure to
test it properly in preview mode before publishing.
</Text>
) : (
<Text>There are non published changes.</Text>
)}
<Text>There are non published changes.</Text>
<Text fontStyle="italic">
Published version from{' '}
{publishedTypebot &&
@@ -159,7 +179,11 @@ export const PublishButton = ({
colorScheme="blue"
isLoading={isPublishing || isUnpublishing}
isDisabled={isPublished || isSavingLoading}
onClick={handlePublishClick}
onClick={() => {
publishedTypebot && publishedTypebotVersion !== typebot?.version
? onNewEngineWarningOpen()
: handlePublishClick()
}}
borderRightRadius={
publishedTypebot && !isMoreMenuDisabled ? 0 : undefined
}

View File

@@ -31,7 +31,7 @@ export const GtmBubbleInstructions = () => {
theme={theme}
previewMessage={previewMessage}
defaultPreviewMessageAvatar={
typebot?.theme.chat.hostAvatar?.url ?? ''
typebot?.theme.chat?.hostAvatar?.url ?? ''
}
onThemeChange={setTheme}
onPreviewMessageChange={setPreviewMessage}

View File

@@ -23,7 +23,7 @@ ${parseInitBubbleCode({
theme: {
...theme,
chatWindow: {
backgroundColor: typebot?.theme.general.background.content ?? '#fff',
backgroundColor: typebot?.theme.general?.background?.content ?? '#fff',
},
},
previewMessage,

View File

@@ -8,7 +8,7 @@ import { JavascriptBubbleSnippet } from '../JavascriptBubbleSnippet'
export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
button: {
backgroundColor: typebot?.theme.chat.buttons.backgroundColor,
backgroundColor: typebot?.theme.chat?.buttons?.backgroundColor,
},
})
@@ -25,7 +25,7 @@ export const JavascriptBubbleInstructions = () => {
<BubbleSettings
theme={theme}
previewMessage={previewMessage}
defaultPreviewMessageAvatar={typebot?.theme.chat.hostAvatar?.url ?? ''}
defaultPreviewMessageAvatar={typebot?.theme.chat?.hostAvatar?.url ?? ''}
onThemeChange={setTheme}
onPreviewMessageChange={setPreviewMessage}
/>

View File

@@ -3,7 +3,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor'
export const InstallNextjsPackageSnippet = () => {
return (
<CodeEditor
value={`npm install @typebot.io/nextjs`}
value={`npm install @typebot.io/js @typebot.io/nextjs`}
isReadOnly
lang="shell"
/>

View File

@@ -29,7 +29,7 @@ export const NextjsBubbleInstructions = () => {
theme={theme}
previewMessage={previewMessage}
defaultPreviewMessageAvatar={
typebot?.theme.chat.hostAvatar?.url ?? ''
typebot?.theme.chat?.hostAvatar?.url ?? ''
}
onThemeChange={setTheme}
onPreviewMessageChange={setPreviewMessage}

View File

@@ -3,7 +3,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor'
export const InstallReactPackageSnippet = () => {
return (
<CodeEditor
value={`npm install @typebot.io/react`}
value={`npm install @typebot.io/js @typebot.io/react`}
isReadOnly
lang="shell"
/>

View File

@@ -29,7 +29,7 @@ export const ReactBubbleInstructions = () => {
theme={theme}
previewMessage={previewMessage}
defaultPreviewMessageAvatar={
typebot?.theme.chat.hostAvatar?.url ?? ''
typebot?.theme.chat?.hostAvatar?.url ?? ''
}
onThemeChange={setTheme}
onPreviewMessageChange={setPreviewMessage}

View File

@@ -14,12 +14,11 @@ import {
export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
button: {
backgroundColor: typebot?.theme.chat.buttons.backgroundColor,
iconColor: typebot?.theme.chat.buttons.color,
backgroundColor: typebot?.theme.chat?.buttons?.backgroundColor,
iconColor: typebot?.theme.chat?.buttons?.color,
},
previewMessage: {
backgroundColor: typebot?.theme.general.background.content ?? 'white',
textColor: 'black',
backgroundColor: typebot?.theme.general?.background?.content,
},
})
@@ -47,7 +46,7 @@ ${parseInitBubbleCode({
<BubbleSettings
theme={theme}
previewMessage={previewMessage}
defaultPreviewMessageAvatar={typebot?.theme.chat.hostAvatar?.url ?? ''}
defaultPreviewMessageAvatar={typebot?.theme.chat?.hostAvatar?.url ?? ''}
onThemeChange={setTheme}
onPreviewMessageChange={setPreviewMessage}
/>

View File

@@ -26,7 +26,7 @@ export const ShopifyBubbleInstructions = () => {
<BubbleSettings
previewMessage={previewMessage}
defaultPreviewMessageAvatar={
typebot?.theme.chat.hostAvatar?.url ?? ''
typebot?.theme.chat?.hostAvatar?.url ?? ''
}
theme={theme}
onPreviewMessageChange={setPreviewMessage}

View File

@@ -25,7 +25,7 @@ export const WebflowBubbleInstructions = () => {
<BubbleSettings
previewMessage={previewMessage}
defaultPreviewMessageAvatar={
typebot?.theme.chat.hostAvatar?.url ?? ''
typebot?.theme.chat?.hostAvatar?.url ?? ''
}
theme={theme}
onPreviewMessageChange={setPreviewMessage}

View File

@@ -1,9 +1,9 @@
import { HStack, Text } from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
import { ComparisonOperators } from '@typebot.io/schemas'
import { TableListItemProps } from '@/components/TableList'
import { TextInput } from '@/components/inputs'
import { WhatsAppComparison } from '@typebot.io/schemas/features/whatsapp'
import { ComparisonOperators } from '@typebot.io/schemas/features/blocks/logic/condition/constants'
export const WhatsAppComparisonItem = ({
item,

View File

@@ -31,7 +31,7 @@ import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
import { trpc } from '@/lib/trpc'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { TableList } from '@/components/TableList'
import { Comparison, LogicalOperator } from '@typebot.io/schemas'
import { Comparison } from '@typebot.io/schemas'
import { DropdownList } from '@/components/DropdownList'
import { WhatsAppComparisonItem } from './WhatsAppComparisonItem'
import { AlertInfo } from '@/components/AlertInfo'
@@ -42,6 +42,7 @@ import { isDefined } from '@typebot.io/lib/utils'
import { hasProPerks } from '@/features/billing/helpers/hasProPerks'
import { UnlockPlanAlertInfo } from '@/components/UnlockPlanAlertInfo'
import { PlanTag } from '@/features/billing/components/PlanTag'
import { LogicalOperator } from '@typebot.io/schemas/features/blocks/logic/condition/constants'
export const WhatsAppModal = ({ isOpen, onClose }: ModalProps): JSX.Element => {
const { typebot, updateTypebot, isPublished } = useTypebot()

View File

@@ -31,7 +31,7 @@ export const WixBubbleInstructions = () => {
<BubbleSettings
previewMessage={previewMessage}
defaultPreviewMessageAvatar={
typebot?.theme.chat.hostAvatar?.url ?? ''
typebot?.theme.chat?.hostAvatar?.url ?? ''
}
theme={theme}
onPreviewMessageChange={setPreviewMessage}

View File

@@ -33,7 +33,7 @@ export const WordpressBubbleInstructions = ({ publicId }: Props) => {
theme: {
...theme,
chatWindow: {
backgroundColor: typebot?.theme.general.background.content ?? '#fff',
backgroundColor: typebot?.theme.general?.background?.content ?? '#fff',
},
},
previewMessage,
@@ -57,7 +57,7 @@ export const WordpressBubbleInstructions = ({ publicId }: Props) => {
<BubbleSettings
previewMessage={previewMessage}
defaultPreviewMessageAvatar={
typebot?.theme.chat.hostAvatar?.url ?? ''
typebot?.theme.chat?.hostAvatar?.url ?? ''
}
theme={theme}
onPreviewMessageChange={setPreviewMessage}