@botpress/webchat 0.5.1 → 1.0.0

package/src/client/MessagingClient.ts

@@ -0,0 +1,87 @@
+import {
+  MessagingSocket,
+  type MessagingSocketOptions,
+  type UserCredentials,
+  type Message,
+} from '@botpress/messaging-socket'
+import { EventEmitter } from '../Utils'
+
+type Events = {
+  connect: UserCredentials
+  disconnect: undefined
+  user: string | undefined
+  conversation: string | undefined
+  message: Message
+  messageSent: string
+  startTyping: undefined
+  stopTyping: undefined
+}
+export class WebchatClient {
+  private socket: MessagingSocket
+  public userId: string | undefined
+  private conversationId: string | undefined
+  private userToken: string | undefined
+  private connected = false
+  private readonly emitter: EventEmitter<Events>
+  public on: EventEmitter<Events>['on']
+
+  constructor(options: MessagingSocketOptions) {
+    this.socket = new MessagingSocket(options)
+    this.emitter = new EventEmitter()
+
+    this.on = this.emitter.on.bind(this.emitter)
+
+    this.socket.on('connect', (event) => {
+      this.emitter.emit('connect', event)
+    })
+
+    this.socket.on('disconnect', (event) => {
+      this.emitter.emit('disconnect', event)
+    })
+
+    this.socket.on('message', (message) => {
+      this.emitter.emit('message', message)
+    })
+
+    this.socket.on('conversation', (conversation) => {
+      this.emitter.emit('conversation', conversation)
+    })
+    this.socket.on('user', (user) => {
+      this.emitter.emit('user', user)
+    })
+  }
+
+  public async connect(creds?: UserCredentials) {
+    if (this.connected) {
+      return
+    }
+    this.connected = true
+    const user = await this.socket.connect(creds).catch((err) => {
+      this.connected = false
+      throw err
+    })
+    this.userId = user.userId
+    this.userToken = user.userToken
+
+    return user
+  }
+
+  public async disconnect() {
+    await this.socket.disconnect()
+    this.connected = false
+  }
+
+  public async sendMessage(message: string) {
+    if (!this.conversationId) {
+      await this.newConversation()
+    }
+
+    await this.socket.sendText(message)
+    this.emitter.emit('messageSent', message)
+  }
+
+  public async newConversation() {
+    const { id } = await this.socket.createConversation()
+    this.conversationId = id
+  }
+}

package/src/client/adapters/Audio.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import { AudioBlock } from '../../types'
+
+export const AudioSchema = z
+  .object({
+    type: z.literal('audio'),
+    audio: z.string(),
+    title: z.string().optional(),
+  })
+  .transform<AudioBlock>(({ type, audio }) => ({ type, url: audio }))

package/src/client/adapters/Card.ts

@@ -0,0 +1,104 @@
+import { z } from 'zod'
+import { ButtonBlock, ColumnBlock, ImageBlock, TextBlock } from '../../types'
+import { WithBubble, withBubble } from './Utils'
+
+const ActionSaySomethingSchema = z
+  .object({
+    title: z.string(),
+    action: z.literal('Say something'),
+    text: z.string(),
+  })
+  .transform<ButtonBlock>(({ title, text }) => ({
+    type: 'button',
+    variant: 'action',
+    text: title,
+    buttonValue: text,
+    reusable: true,
+  }))
+
+const ActionOpenURLSchema = z
+  .object({
+    title: z.string(),
+    action: z.literal('Open URL'),
+    url: z.string(),
+  })
+  .transform<ButtonBlock>(({ title, url }) => ({
+    type: 'button',
+    variant: 'link',
+    text: title,
+    buttonValue: url,
+    reusable: true,
+  }))
+
+const ActionPostbackSchema = z
+  .object({
+    title: z.string(),
+    action: z.literal('Postback'),
+    payload: z.string(),
+  })
+  .transform<ButtonBlock>(({ title, payload }) => ({
+    type: 'button',
+    variant: 'action',
+    text: title,
+    buttonValue: payload,
+    reusable: true,
+  }))
+
+const ActionButtonSchema = z.union([ActionSaySomethingSchema, ActionOpenURLSchema, ActionPostbackSchema])
+
+export type CardBlockType = { blocks: CardBlocks } & Omit<ColumnBlock, 'blocks'>
+type CardBlocks = (ImageBlock | TextBlock | { type: 'row'; blocks: ButtonBlock[] })[]
+
+export const BaseCardSchema = z.object({
+  type: z.literal('card'),
+  title: z.string().optional(),
+  subtitle: z.string().optional(),
+  image: z.string().optional(),
+  actions: z.array(ActionButtonSchema),
+})
+
+export const CardSchemaTransform = ({
+  title,
+  image,
+  actions,
+  subtitle,
+}: Omit<z.infer<typeof BaseCardSchema>, 'type'>): CardBlockType => {
+  const cardBlocks: CardBlocks = []
+
+  if (image) {
+    cardBlocks.push({
+      type: 'image',
+      url: image,
+    })
+  }
+
+  if (title) {
+    cardBlocks.push({
+      type: 'text',
+      text: `## ${title}`,
+    })
+  }
+  if (subtitle) {
+    cardBlocks.push({
+      type: 'text',
+      text: subtitle,
+    })
+  }
+
+  if (actions.length > 0) {
+    cardBlocks.push({
+      type: 'row',
+      blocks: actions,
+    })
+  }
+
+  return {
+    type: 'column',
+    horizontalAlignment: 'center',
+    blocks: [...cardBlocks],
+  }
+}
+
+export const CardSchema = BaseCardSchema.transform<WithBubble<CardBlockType>>((card) =>
+  withBubble(CardSchemaTransform(card))
+)

package/src/client/adapters/Carousel.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod'
+import { BaseCardSchema, CardBlockType, CardSchemaTransform } from './Card'
+import { CarouselBlock } from '../../types'
+
+type CarouselBlockType = { blocks: CardBlockType[] } & Omit<CarouselBlock, 'blocks'>
+export const CarouselSchema = z
+  .object({
+    type: z.literal('carousel'),
+    items: z.array(BaseCardSchema.omit({ type: true }).transform<CardBlockType>(CardSchemaTransform)),
+  })
+  .transform<CarouselBlockType>(({ items }) => ({ type: 'carousel', blocks: items }))

package/src/client/adapters/Choice.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod'
+import { v4 } from 'uuid'
+import { ButtonBlock, ColumnBlock, RowBlock, TextBlock } from '../../types'
+import { WithBubble, withBubble } from './Utils'
+
+//TODO: Fix choice title that will not show up
+type ButtonBlocks = { blocks: ButtonBlock[] } & Omit<RowBlock, 'blocks'>
+
+type ChoiceBlockType = { blocks: (ButtonBlocks | TextBlock)[] } & Omit<ColumnBlock, 'blocks'>
+export const ChoiceSchema = z
+  .object({
+    type: z.literal('single-choice'),
+    text: z.string(),
+    choices: z.array(
+      z.object({
+        title: z.string(),
+        value: z.string(),
+      })
+    ),
+  })
+  .transform<WithBubble<ChoiceBlockType>>(({ choices, text }) => {
+    const groupId = v4()
+
+    const blocks: (ButtonBlocks | TextBlock)[] = [
+      {
+        type: 'row',
+        blocks: choices.map(({ title, value }) => ({
+          type: 'button',
+          variant: 'action',
+          text: title,
+          buttonValue: value,
+          groupId,
+        })),
+      },
+    ]
+
+    if (text) {
+      blocks.unshift({
+        type: 'text',
+        text,
+      })
+    }
+
+    return withBubble({
+      type: 'column',
+      blocks,
+    })
+  })

package/src/client/adapters/Dropdown.ts

@@ -0,0 +1,39 @@
+import { z } from 'zod'
+import { v4 } from 'uuid'
+import { ButtonBlock, ColumnBlock, DropdownBlock, RowBlock, TextBlock } from '../../types'
+import { WithBubble, withBubble } from './Utils'
+
+type DropdownBlockType = { blocks: (DropdownBlock | TextBlock)[] } & Omit<ColumnBlock, 'blocks'>
+export const DropdownSchema = z
+  .object({
+    type: z.literal('dropdown'),
+    text: z.string().optional(),
+    message: z.string().optional(),
+    options: z.array(
+      z.object({
+        label: z.string(),
+        value: z.string(),
+      })
+    ),
+  })
+  .transform<WithBubble<DropdownBlockType>>(({ options, text }) => {
+    const blocks: (DropdownBlock | TextBlock)[] = [
+      {
+        type: 'dropdown',
+        label: text ?? 'Select an option',
+        options,
+      },
+    ]
+
+    if (text) {
+      blocks.unshift({
+        type: 'text',
+        text,
+      })
+    }
+
+    return withBubble({
+      type: 'column',
+      blocks,
+    })
+  })

package/src/client/adapters/File.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import { FileBlock } from '../../types'
+
+export const FileSchema = z
+  .object({
+    type: z.literal('file'),
+    file: z.string(),
+    title: z.string().optional(),
+  })
+  .transform<FileBlock>(({ file, ...props }) => ({ url: file, ...props }))

package/src/client/adapters/Image.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import { ImageBlock } from '../../types'
+
+export const ImageSchema = z
+  .object({
+    type: z.literal('image'),
+    image: z.string(),
+    title: z.string().optional(),
+  })
+  .transform<ImageBlock>(({ type, image }) => ({ type, url: image }))

package/src/client/adapters/Location.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod'
+import { LocationBlock } from '../../types'
+
+//TODO: Decide what to do with title and address and fix ui when they are empty
+export const LocationSchema = z
+  .object({
+    type: z.literal('location'),
+    latitude: z.number(),
+    longitude: z.number(),
+    address: z.string().optional(),
+    title: z.string().optional(),
+  })
+  .transform<LocationBlock>(({ type, latitude, longitude, title, address }) => ({
+    type,
+    latitude,
+    longitude,
+    title: title ?? address ?? 'View on map',
+  }))

package/src/client/adapters/Message.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod'
+import { TextSchema } from './Text'
+import { ImageSchema } from './Image'
+import { AudioSchema } from './Audio'
+import { VideoSchema } from './Video'
+import { CarouselSchema } from './Carousel'
+import { CardSchema } from './Card'
+import { LocationSchema } from './Location'
+import { FileSchema } from './File'
+import { ChoiceSchema } from './Choice'
+import { VoiceSchema } from './Voice'
+import { DropdownSchema } from './Dropdown.ts'
+
+export const MessageContentSchema = z.union([
+  TextSchema,
+  ImageSchema,
+  AudioSchema,
+  VideoSchema,
+  CarouselSchema,
+  CardSchema,
+  LocationSchema,
+  FileSchema,
+  VoiceSchema,
+  ChoiceSchema,
+  DropdownSchema,
+])

package/src/client/adapters/Text.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod'
+import { TextBlock } from '../../types'
+import { WithBubble, withBubble } from './Utils'
+
+export const TextSchema = z
+  .object({
+    type: z.literal('text'),
+    text: z.string(),
+    markdown: z.boolean().optional(),
+  })
+  .transform<WithBubble<TextBlock>>(({ type, text }) => withBubble({ type, text }))

package/src/client/adapters/Utils.ts

@@ -0,0 +1,11 @@
+import { BlockObject, BubbleBlock } from '../../types'
+
+export type WithBubble<T extends BlockObject> = { block: T } & Omit<BubbleBlock, 'block'>
+
+//with bubble function with a generic type param
+export function withBubble<T extends BlockObject>(block: T): WithBubble<T> {
+  return {
+    block,
+    type: 'bubble',
+  }
+}

package/src/client/adapters/Video.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import { VideoBlock } from '../../types'
+
+export const VideoSchema = z
+  .object({
+    type: z.literal('video'),
+    video: z.string(),
+    title: z.string().optional(),
+  })
+  .transform<VideoBlock>(({ type, video }) => ({ type, url: video }))

package/src/client/adapters/Voice.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+import { AudioBlock } from '../../types'
+
+export const VoiceSchema = z
+  .object({
+    type: z.literal('voice'),
+    audio: z.string(),
+  })
+  .transform<AudioBlock>(({ audio }) => ({ type: 'audio', url: audio }))

package/src/client/adapters/index.ts

@@ -0,0 +1,12 @@
+export * from './Audio'
+export * from './Card'
+export * from './Carousel'
+export * from './Choice'
+export * from './File'
+export * from './Image'
+export * from './Location'
+export * from './Message'
+export * from './Text'
+export * from './Utils'
+export * from './Video'
+export * from './Voice'

package/src/client/index.ts

@@ -0,0 +1,2 @@
+export * from './adapters'
+export * from './MessagingClient'

package/src/components/Avatar.tsx

@@ -0,0 +1,22 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
+
+const Avatar = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>((props, ref) => <AvatarPrimitive.Root ref={ref} {...props} />)
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Image>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>((props, ref) => <AvatarPrimitive.Image ref={ref} {...props} />)
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Fallback>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>((props, ref) => <AvatarPrimitive.Fallback ref={ref} {...props} />)
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/components/Block.tsx

@@ -0,0 +1,17 @@
+import { ComponentType } from 'react'
+import { BlockMap, BlockTypes, CommonBlockProps } from '../types'
+import { renderers } from './renderers/index.ts'
+import { Renderers } from '../contexts/WebchatContext.ts'
+
+export const Block = <T extends BlockTypes>({
+  block,
+  styles,
+  ...props
+}: {
+  block: BlockMap[T]
+} & CommonBlockProps): JSX.Element => {
+  const Block = renderers[block.type] as ComponentType<Renderers[T]>
+
+  // This is a hack to get the types to work, this returns the correct component based on the block type.
+  return <Block {...props} {...(block as any)} styles={styles} />
+}

package/src/components/Composer.tsx

@@ -0,0 +1,115 @@
+import { ComponentProps, FC, forwardRef, memo, useEffect, useRef, useState } from 'react'
+import { useWebchatContext, type StyleOptions, ComposerContext, useComposerContext } from '../contexts'
+import { ArrowUpCircleIcon } from '@heroicons/react/20/solid'
+import { Theme } from '../schemas'
+import { useWebchatStore } from '../hooks'
+
+const Composer = memo(
+  forwardRef<HTMLDivElement, ComponentProps<'div'>>((props, ref) => {
+    const {
+      state,
+      theme: { composer },
+    } = useWebchatContext()
+
+    const [value, setValue] = useState('')
+
+    return (
+      <ComposerContext.Provider value={{ value, setValue }}>
+        <div data-disabled={state.disableComposer} {...props} {...composer?.container} ref={ref} />
+      </ComposerContext.Provider>
+    )
+  })
+)
+
+const ComposerInput = memo(({ ...props }: ComponentProps<'textarea'>) => {
+  const {
+    state,
+    theme: { composer },
+    client,
+  } = useWebchatContext()
+  const { value, setValue } = useComposerContext()
+
+  const ref = useRef<HTMLTextAreaElement>(null)
+
+  const [historyIndex, setHistoryIndex] = useState(-1)
+  const currentUser = useWebchatStore((state) => state.user)
+  const messageHistory = useWebchatStore((state) => state.messageHistory)
+
+  const sendComposerMessage = () => {
+    if (!value) return
+    void client.sendMessage(value)
+    setValue('')
+  }
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.selectionStart = ref.current.value.length
+      ref.current.selectionEnd = ref.current.value.length
+    }
+  }, [value])
+
+  return (
+    <textarea
+      {...composer?.input}
+      disabled={state.disableComposer}
+      ref={ref}
+      value={value}
+      data-has-value={!!value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={(e) => {
+        if (state.disableComposer) return
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          sendComposerMessage()
+          setHistoryIndex(-1)
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault()
+          const userHistory = messageHistory[currentUser?.userId ?? ''] ?? []
+          if (historyIndex < userHistory.length - 1) {
+            setValue(userHistory[historyIndex + 1])
+          }
+          setHistoryIndex(() => Math.min(historyIndex + 1, userHistory.length - 1))
+        }
+        if (e.key === 'ArrowDown') {
+          e.preventDefault()
+          const userHistory = messageHistory[currentUser?.userId ?? ''] ?? []
+          if (historyIndex === 0) {
+            setValue('')
+          } else {
+            setValue(userHistory[historyIndex - 1])
+          }
+          setHistoryIndex(() => Math.max(historyIndex - 1, -1))
+        }
+      }}
+      {...props}
+    />
+  )
+})
+
+type ComposerButtonStyle = NonNullable<Theme['composer']>['button']
+type ComposerButtonProps = {
+  icon?: FC<StyleOptions>
+  styles?: ComposerButtonStyle
+} & ComponentProps<'button'>
+const ComposerButton = memo(
+  forwardRef<HTMLButtonElement, ComposerButtonProps>(({ icon: Icon = ArrowUpCircleIcon, ...props }, ref) => {
+    //TODO: This should be in the context
+    const { value, setValue } = useComposerContext()
+    const sendComposerMessage = () => {
+      if (!value) return
+      setValue('')
+    }
+
+    const {
+      theme: { composer },
+    } = useWebchatContext()
+
+    return (
+      <button ref={ref} {...props} {...composer?.button?.container} disabled={!value} onClick={sendComposerMessage}>
+        <Icon {...composer?.button?.icon} />
+      </button>
+    )
+  })
+)
+export { Composer, ComposerInput, ComposerButton }

package/src/components/Container.tsx

@@ -0,0 +1,17 @@
+import { ComponentProps, forwardRef } from 'react'
+import { useWebchatContext } from '../contexts'
+import { Toaster } from 'react-hot-toast'
+import { ModalProvider } from '../providers'
+
+export const Container = forwardRef<HTMLDivElement, ComponentProps<'div'>>(({ children, ...props }, ref) => {
+  const {
+    theme: { container },
+  } = useWebchatContext()
+
+  return (
+    <div {...props} {...container} ref={ref}>
+      <Toaster />
+      <ModalProvider>{children}</ModalProvider>
+    </div>
+  )
+})