blsmedia/bot
2
0
Fork 0
Code Activity

✨ Automatically parse markdown from variables in text bubbles

Browse Source 
Closes #539
This commit is contained in:
Baptiste Arnaud
2023-10-05 16:50:17 +02:00
parent 9e6a1f7dc0
commit cfc5f641a6
12 changed files with 1120 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/bot-engine/executeGroup.ts
View File

@ -11,6 +11,7 @@ import {
} from '@typebot.io/schemas'
import {
isBubbleBlock,
isEmpty,
isInputBlock,
isIntegrationBlock,
isLogicBlock,
@ -26,6 +27,12 @@ import { getPrefilledInputValue } from './getPrefilledValue'
import { parseDateInput } from './blocks/inputs/date/parseDateInput'
import { deepParseVariables } from './variables/deepParseVariables'
import { parseVideoUrl } from '@typebot.io/lib/parseVideoUrl'
import { TDescendant, createPlateEditor } from '@udecode/plate-common'
import {
createDeserializeMdPlugin,
deserializeMd,
} from '@udecode/plate-serializer-md'
import { getVariablesToParseInfoInText } from './variables/parseVariables'
export const executeGroup =
(
@ -158,12 +165,19 @@ const parseBubbleBlock =
(variables: Variable[]) =>
(block: BubbleBlock): ChatReply['messages'][0] => {
switch (block.type) {
case BubbleBlockType.TEXT:
return deepParseVariables(
variables,
{},
{ takeLatestIfList: true }
)(block)
case BubbleBlockType.TEXT: {
return {
...block,
content: {
...block.content,
richText: parseVariablesInRichText(
block.content.richText,
variables
),
},
}
}
case BubbleBlockType.EMBED: {
const message = deepParseVariables(variables)(block)
return {
@ -189,6 +203,82 @@ const parseBubbleBlock =
}
}
const parseVariablesInRichText = (
elements: TDescendant[],
variables: Variable[]
): TDescendant[] => {
const parsedElements: TDescendant[] = []
for (const element of elements) {
if ('text' in element) {
const text = element.text as string
if (isEmpty(text)) {
parsedElements.push(element)
continue
}
const variablesInText = getVariablesToParseInfoInText(text, variables)
if (variablesInText.length === 0) {
parsedElements.push(element)
continue
}
for (const variableInText of variablesInText) {
const textBeforeVariable = text.substring(0, variableInText.startIndex)
const textAfterVariable = text.substring(variableInText.endIndex)
const isStandaloneElement =
isEmpty(textBeforeVariable) && isEmpty(textAfterVariable)
const variableElements = convertMarkdownToRichText(
isStandaloneElement
? variableInText.value
: variableInText.value.replace(/[\n]+/g, ' ')
)
if (isStandaloneElement) {
parsedElements.push(...variableElements)
continue
}
const children: TDescendant[] = []
if (isNotEmpty(textBeforeVariable))
children.push({
text: textBeforeVariable,
})
children.push({
type: 'inline-variable',
children: variableElements,
})
if (isNotEmpty(textAfterVariable))
children.push({
...element,
text: textAfterVariable,
})
parsedElements.push(...children)
}
continue
}
const type =
element.children.length === 1 &&
'text' in element.children[0] &&
(element.children[0].text as string).startsWith('{{') &&
(element.children[0].text as string).endsWith('}}')
? 'variable'
: element.type
parsedElements.push({
...element,
type,
children: parseVariablesInRichText(
element.children as TDescendant[],
variables
),
})
}
return parsedElements
}
const convertMarkdownToRichText = (text: string): TDescendant[] => {
const plugins = [createDeserializeMdPlugin()]
//@ts-ignore
return deserializeMd(createPlateEditor({ plugins }), text)
}
export const parseInput =
(state: SessionState) =>
async (block: InputBlock): Promise<ChatReply['input']> => {

1
packages/bot-engine/package.json
View File

@ -17,6 +17,7 @@
"@typebot.io/schemas": "workspace:*",
"@typebot.io/tsconfig": "workspace:*",
"@udecode/plate-common": "^21.1.5",
"@udecode/plate-serializer-md": "^24.4.0",
"ai": "2.1.32",
"chrono-node": "2.6.6",
"date-fns": "^2.30.0",

29
packages/bot-engine/variables/parseVariables.ts
View File

@ -55,6 +55,35 @@ export const parseVariables =
)
}
type VariableToParseInformation = {
startIndex: number
endIndex: number
textToReplace: string
value: string
}
export const getVariablesToParseInfoInText = (
text: string,
variables: Variable[]
): VariableToParseInformation[] => {
const pattern = /\{\{([^{}]+)\}\}|(\$)\{\{([^{}]+)\}\}/g
const variablesToParseInfo: VariableToParseInformation[] = []
let match
while ((match = pattern.exec(text)) !== null) {
const matchedVarName = match[1] ?? match[3]
const variable = variables.find((variable) => {
return matchedVarName === variable.name && isDefined(variable.value)
}) as VariableWithValue | undefined
variablesToParseInfo.push({
startIndex: match.index,
endIndex: match.index + match[0].length,
textToReplace: match[0],
value: safeStringify(variable?.value) ?? '',
})
}
return variablesToParseInfo
}
const parseVariableValueInJson = (value: VariableWithValue['value']) => {
const stringifiedValue = JSON.stringify(value)
if (typeof value === 'string') return stringifiedValue.slice(1, -1)

9
packages/embeds/js/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@typebot.io/js",
"version": "0.1.33",
"version": "0.1.34",
"description": "Javascript library to display typebots on your website",
"type": "module",
"main": "dist/index.js",
@ -14,7 +14,9 @@
"dependencies": {
"@stripe/stripe-js": "1.54.1",
"@udecode/plate-common": "^21.1.5",
"dompurify": "^3.0.6",
"eventsource-parser": "^1.0.0",
"marked": "^9.0.3",
"solid-element": "1.7.1",
"solid-js": "1.7.8"
},
@ -24,11 +26,12 @@
"@rollup/plugin-node-resolve": "15.1.0",
"@rollup/plugin-terser": "0.4.3",
"@rollup/plugin-typescript": "11.1.2",
"@typebot.io/lib": "workspace:*",
"@typebot.io/bot-engine": "workspace:*",
"@typebot.io/env": "workspace:*",
"@typebot.io/lib": "workspace:*",
"@typebot.io/schemas": "workspace:*",
"@typebot.io/tsconfig": "workspace:*",
"@typebot.io/bot-engine": "workspace:*",
"@types/dompurify": "^3.0.3",
"autoprefixer": "10.4.14",
"babel-preset-solid": "1.7.7",
"clsx": "2.0.0",

6
packages/embeds/js/src/assets/index.css
View File

@ -94,14 +94,10 @@ textarea {
font-weight: 300;
}
.slate-a {
a {
text-decoration: underline;
}
.slate-html-container > div {
min-height: 24px;
}
.slate-bold {
font-weight: bold;
}

24
packages/embeds/js/src/components/bubbles/StreamingBubble.tsx
View File

@ -1,21 +1,32 @@
import { streamingMessage } from '@/utils/streamingMessageSignal'
import { createEffect, createSignal } from 'solid-js'
import { marked } from 'marked'
import domPurify from 'dompurify'
type Props = {
streamingMessageId: string
}
marked.use({
renderer: {
link: (href, _title, text) => {
return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
},
},
})
export const StreamingBubble = (props: Props) => {
let ref: HTMLDivElement | undefined
const [content, setContent] = createSignal<string>('')
createEffect(() => {
if (streamingMessage()?.id === props.streamingMessageId)
setContent(streamingMessage()?.content ?? '')
setContent(
domPurify.sanitize(marked.parse(streamingMessage()?.content ?? ''))
)
})
return (
<div class="flex flex-col animate-fade-in" ref={ref}>
<div class="flex flex-col animate-fade-in">
<div class="flex w-full items-center">
<div class="flex relative items-start typebot-host-bubble">
<div
@ -28,11 +39,10 @@ export const StreamingBubble = (props: Props) => {
/>
<div
class={
'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis opacity-100 h-full'
'flex flex-col overflow-hidden text-fade-in mx-4 my-2 relative text-ellipsis h-full gap-6'
}
>
{content()}
</div>
innerHTML={content()}
/>
</div>
</div>
</div>

4
packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
View File

@ -1,7 +1,7 @@
import { TypingBubble } from '@/components'
import type { TextBubbleContent, TypingEmulation } from '@typebot.io/schemas'
import { For, createSignal, onCleanup, onMount } from 'solid-js'
import { PlateBlock } from './plate/PlateBlock'
import { PlateElement } from './plate/PlateBlock'
import { computePlainText } from '../helpers/convertRichTextToPlainText'
import { clsx } from 'clsx'
import { isMobile } from '@/utils/isMobileSignal'
@ -70,7 +70,7 @@ export const TextBubble = (props: Props) => {
}}
>
<For each={props.content.richText}>
{(element) => <PlateBlock element={element} />}
{(element) => <PlateElement element={element} />}
</For>
</div>
</div>

97
packages/embeds/js/src/features/blocks/bubbles/textBubble/components/plate/PlateBlock.tsx
View File

@ -1,30 +1,89 @@
import type { TElement, TText, TDescendant } from '@udecode/plate-common'
import { PlateText, PlateTextProps } from './PlateText'
import { For, Match, Show, Switch } from 'solid-js'
import { For, Match, Switch, JSXElement } from 'solid-js'
import { isDefined } from '@typebot.io/lib/utils'
import clsx from 'clsx'
type Props = { element: TElement | TText }
export const PlateBlock = (props: Props) => (
<Show
when={!props.element.text}
fallback={<PlateText {...(props.element as PlateTextProps)} />}
>
<Switch
fallback={
<div>
<For each={props.element.children as TDescendant[]}>
{(child) => <PlateBlock element={child} />}
</For>
</div>
type Props = {
element: TElement | TText
isUniqueChild?: boolean
inElement?: boolean
}
>
export const PlateElement = (props: Props) => (
<Switch>
<Match when={isDefined(props.element.text)}>
<PlateText
{...(props.element as PlateTextProps)}
isUniqueChild={props.isUniqueChild ?? false}
/>
</Match>
<Match when={props.element.type}>
<Switch>
<Match when={props.element.type === 'a'}>
<a href={props.element.url as string} target="_blank" class="slate-a">
<a
href={props.element.url as string}
target="_blank"
rel="noopener noreferrer"
>
<For each={props.element.children as TDescendant[]}>
{(child) => <PlateBlock element={child} />}
{(child) => (
<PlateElement
element={child}
isUniqueChild={
(props.element.children as TDescendant[])?.length === 1
}
inElement={true}
/>
)}
</For>
</a>
</Match>
<Match when={props.element.type !== 'a'}>
<ElementRoot
element={props.element as TElement}
inElement={props.inElement ?? false}
>
<For each={props.element.children as TDescendant[]}>
{(child) => (
<PlateElement
element={child}
isUniqueChild={
(props.element.children as TDescendant[])?.length === 1
}
inElement={true}
/>
)}
</For>
</ElementRoot>
</Match>
</Switch>
</Match>
</Switch>
</Show>
)
type ElementRootProps = {
element: TElement
inElement: boolean
children: JSXElement
}
const ElementRoot = (props: ElementRootProps) => {
return (
<Switch>
<Match when={props.inElement}>
<span data-element-type={props.element.type}>{props.children}</span>
</Match>
<Match when={!props.inElement}>
<div
data-element-type={props.element.type}
class={clsx(
props.element.type === 'variable' && 'flex flex-col gap-6'
)}
>
{props.children}
</div>
</Match>
</Switch>
)
}

13
packages/embeds/js/src/features/blocks/bubbles/textBubble/components/plate/PlateText.tsx
View File

@ -1,7 +1,9 @@
import { isEmpty } from '@typebot.io/lib'
import { Show } from 'solid-js'
export type PlateTextProps = {
text: string
isUniqueChild: boolean
bold?: boolean
italic?: boolean
underline?: boolean
@ -20,11 +22,10 @@ const computeClassNames = (
}
export const PlateText = (props: PlateTextProps) => (
<Show
when={computeClassNames(props.bold, props.italic, props.underline)}
keyed
fallback={<>{props.text}</>}
>
{(className) => <span class={className}>{props.text}</span>}
<span class={computeClassNames(props.bold, props.italic, props.underline)}>
{props.text}
<Show when={props.isUniqueChild && isEmpty(props.text)}>
<br />
</Show>
</span>
)

2
packages/embeds/nextjs/package.json
View File

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

2
packages/embeds/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@typebot.io/react",
"version": "0.1.33",
"version": "0.1.34",
"description": "Convenient library to display typebots on your React app",
"main": "dist/index.js",
"types": "dist/index.d.ts",

877
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff