@botpress/webchat 0.5.0 → 1.0.0

package/src/components/dev-tools/DevTools.tsx

@@ -0,0 +1,496 @@
+import { tx } from '@twind/core'
+import { useState } from 'react'
+import { HexColorPicker } from 'react-colorful'
+import { z } from 'zod'
+import { useWebchatContext } from '../../contexts'
+import { ThemeSchema } from '../../schemas'
+import { buildDawnTheme, buildMidnightTheme, duskTheme, eggplantTheme, galaxyTheme, prismTheme } from '../../themes'
+import { MessageObject } from '../../types'
+import { messageInBubble } from './helpers'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const messagesToSend: Record<string, MessageObject> = {
+  shortText: messageInBubble({
+    type: 'text',
+    text: 'Hello, World!',
+  }),
+  md: messageInBubble({
+    type: 'text',
+    //text example using multiple markdown features
+    text: '# Hello, World! \n ## This is a markdown message. \n\n ### Heading 3 \n\n You can use **bold**, _italic_, and `code`.\n\nYou can also use [links](https://www.google.com) and\n\n- Lists\n- Like\n- This\n\nAnd even\n1. Numbered\n2. Lists\n3. Like\n4. This',
+  }),
+  longText: messageInBubble({
+    type: 'text',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget tempor aliquam, nisl nisl aliquet nisl, eget aliquam nisl nisl eget nisl. Donec euismod, nisl eget tempor aliquam, nisl nisl aliquet nisl, eget aliquam nisl nisl eget nisl.',
+  }),
+  portraitImage: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+
+    block: {
+      type: 'image',
+      url: `https://picsum.photos/1080/1920`,
+    },
+  },
+  landscapeImage: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'image',
+      url: `https://picsum.photos/1920/1080`,
+    },
+  },
+  squareImage: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+
+    block: {
+      type: 'image',
+      url: `https://picsum.photos/1920/1920`,
+    },
+  },
+  video: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'video',
+      url: 'https://spg-test-public-files.s3.us-east-1.amazonaws.com/sample-mp4-file-small.mp4',
+    },
+  },
+  audio: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'audio',
+      url: 'https://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3',
+    },
+  },
+  button: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'button',
+      variant: 'action',
+      text: 'Button',
+      buttonValue: 'Hello, World!',
+    },
+  },
+  disableInput: {
+    direction: 'incoming',
+    disableInput: true,
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'button',
+      variant: 'action',
+      text: 'Button',
+      buttonValue: 'Hello, World!',
+    },
+  },
+  location: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'location',
+      latitude: 40.7128,
+      longitude: -74.006,
+      title: 'New York, NY',
+    },
+  },
+  rowOfButtons: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'row',
+      blocks: [
+        {
+          type: 'button',
+          variant: 'action',
+          groupId: 'group1',
+          text: 'Button 1',
+          buttonValue: 'Button 1',
+        },
+        {
+          type: 'button',
+          variant: 'action',
+          groupId: 'group1',
+          text: 'Button 2',
+          buttonValue: 'Button 2',
+        },
+        {
+          type: 'button',
+          variant: 'link',
+          groupId: 'group1',
+          text: 'Button 3',
+          buttonValue: 'Button 3',
+        },
+      ],
+    },
+  },
+  card: messageInBubble({
+    type: 'column',
+    horizontalAlignment: 'center',
+    blocks: [
+      {
+        type: 'image',
+        url: 'https://picsum.photos/700/350',
+      },
+      {
+        type: 'text',
+        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      },
+      {
+        type: 'row',
+        horizontalAlignment: 'center',
+        blocks: [
+          {
+            type: 'button',
+            text: 'Button A',
+            variant: 'action',
+            groupId: 'group1',
+            buttonValue: 'Button A',
+          },
+          {
+            type: 'button',
+            text: 'Button B',
+            variant: 'action',
+            groupId: 'group1',
+            buttonValue: 'Button B',
+          },
+          {
+            type: 'button',
+            text: 'Button C',
+            variant: 'link',
+            groupId: 'group1',
+            buttonValue: 'Button C',
+          },
+        ],
+      },
+    ],
+  }),
+  carousel: {
+    direction: 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'carousel',
+      blocks: [
+        {
+          type: 'image',
+          url: `https://picsum.photos/${Math.floor(Math.random() * 1920)}/${Math.floor(Math.random() * 1920)}`,
+        },
+        {
+          type: 'image',
+          url: `https://picsum.photos/${Math.floor(Math.random() * 1920)}/${Math.floor(Math.random() * 1920)}`,
+        },
+        {
+          type: 'image',
+          url: `https://picsum.photos/${Math.floor(Math.random() * 1920)}/${Math.floor(Math.random() * 1920)}`,
+        },
+        {
+          type: 'image',
+          url: `https://picsum.photos/${Math.floor(Math.random() * 1920)}/${Math.floor(Math.random() * 1920)}`,
+        },
+        {
+          type: 'image',
+          url: `https://picsum.photos/${Math.floor(Math.random() * 1920)}/${Math.floor(Math.random() * 1920)}`,
+        },
+        {
+          type: 'image',
+          url: `https://picsum.photos/${Math.floor(Math.random() * 1920)}/${Math.floor(Math.random() * 1920)}`,
+        },
+        {
+          type: 'column',
+          horizontalAlignment: 'center',
+          blocks: [
+            {
+              type: 'image',
+              url: 'https://picsum.photos/300/350',
+            },
+            {
+              type: 'text',
+              text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+            },
+            {
+              type: 'row',
+              horizontalAlignment: 'center',
+              blocks: [
+                {
+                  type: 'button',
+                  text: 'Button A',
+                  variant: 'action',
+                  groupId: 'group1',
+                  buttonValue: 'Button A',
+                },
+                {
+                  type: 'button',
+                  text: 'Button B',
+                  variant: 'action',
+                  groupId: 'group1',
+                  buttonValue: 'Button B',
+                },
+                {
+                  type: 'button',
+                  text: 'Button C',
+                  variant: 'link',
+                  groupId: 'group1',
+                  buttonValue: 'Button C',
+                },
+                {
+                  type: 'button',
+                  text: 'Button C',
+                  variant: 'link',
+                  groupId: 'group1',
+                  buttonValue: 'Button C',
+                },
+                {
+                  type: 'button',
+                  text: 'Button C',
+                  variant: 'link',
+                  groupId: 'group1',
+                  buttonValue: 'Button C',
+                },
+                {
+                  type: 'button',
+                  text: 'Button C',
+                  variant: 'link',
+                  groupId: 'group1',
+                  buttonValue: 'Button C',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+}
+
+const configSchema = z
+  .object({
+    composerPlaceholder: z.string().optional(),
+    botConversationDescription: z.string().optional(),
+    botId: z.string().optional(),
+    hostUrl: z.string().optional(),
+    messagingUrl: z.string(),
+    clientId: z.string(),
+    lazySocket: z.boolean().optional(),
+    botName: z.string().optional(),
+    avatarUrl: z.string().optional(),
+    phoneNumber: z
+      .string()
+      .optional()
+      .transform((val) => {
+        if (val) {
+          return { title: val }
+        }
+      }),
+    termsConditions: z
+      .string()
+      .optional()
+      .transform((val) => {
+        if (val) {
+          return { title: val, link: val }
+        }
+      }),
+    privacyPolicy: z
+      .string()
+      .optional()
+      .transform((val) => {
+        if (val) {
+          return { title: val, link: val }
+        }
+      }),
+    emailAddress: z
+      .string()
+      .optional()
+      .transform((val) => {
+        if (val) {
+          return { title: val }
+        }
+      }),
+    website: z
+      .string()
+      .optional()
+      .transform((val) => {
+        if (val) {
+          return { title: val, link: val }
+        }
+      }),
+    showPoweredBy: z.boolean().optional(),
+  })
+  .transform((val) => {
+    console.log(val)
+    return {
+      ...val,
+      ...(val.avatarUrl && { botAvatar: val.avatarUrl }),
+      ...(val.botConversationDescription && { botDescription: val.botConversationDescription }),
+      ...(val.emailAddress && { email: val.emailAddress }),
+      ...(val.termsConditions && { termsOfService: val.termsConditions }),
+      ...(val.phoneNumber && { phone: val.phoneNumber }),
+    }
+  })
+
+function parseWebchatScript(script: string) {
+  const scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/gm
+  const initRegex = /window\.botpressWebChat\.init\(([\s\S]*?)\);/gm
+
+  let match
+  let initObject
+
+  while ((match = scriptRegex.exec(script)) !== null) {
+    const scriptContent = match[1]
+    const initMatch = initRegex.exec(scriptContent)
+
+    if (initMatch !== null) {
+      initObject = JSON.parse(initMatch[1])
+      break
+    }
+  }
+
+  const config = configSchema.parse(initObject)
+
+  return config
+}
+
+export const DevTools = () => {
+  const [newMessageDirection, setNewMessageDirection] = useState<MessageObject['direction']>('incoming')
+  const { setTheme: setStyles, setConfiguration } = useWebchatContext()
+  const [currentTheme, setCurrentTheme] = useState<'dawn' | 'midnight' | 'prism' | 'galaxy' | 'eggplant' | 'dusk'>(
+    'prism'
+  )
+  const [color, setColor] = useState<string>()
+
+  const [webchatScript, setWebchatScript] = useState('')
+
+  const themes = {
+    dawn: buildDawnTheme('#dc2626'),
+    midnight: buildMidnightTheme('#dc2626'),
+    prism: prismTheme,
+    galaxy: galaxyTheme,
+    eggplant: eggplantTheme,
+    dusk: duskTheme,
+  } as const
+
+  return (
+    <div>
+      <div className="item flex flex-wrap gap-4 rounded-lg border border-gray-200 bg-gray-50 p-2">
+        <div className="flex w-fit items-center">
+          <input
+            type="checkbox"
+            className="mr-2 h-4 w-4 rounded"
+            checked={newMessageDirection === 'outgoing'}
+            onChange={() => setNewMessageDirection((direction) => (direction === 'incoming' ? 'outgoing' : 'incoming'))}
+          />
+          <label className="font-medium capitalize text-gray-700">{newMessageDirection}</label>
+        </div>
+        <div className="flex w-fit items-center">
+          <label className="font-medium capitalize text-gray-700">Theme</label>
+          <select
+            className="ml-2 rounded-lg border border-gray-200 bg-gray-50 p-1 px-3 text-sm capitalize"
+            onChange={(e) => {
+              setStyles(ThemeSchema.parse(themes[e.target.value as keyof typeof themes]))
+              setCurrentTheme(e.target.value as keyof typeof themes)
+            }}
+          >
+            <option value="prism">Prism</option>
+            <option value="galaxy">Galaxy</option>
+            <option value="eggplant">Eggplant</option>
+            <option value="dusk">Dusk</option>
+            <option value="dawn">Dawn</option>
+            <option value="midnight">Midnight</option>
+          </select>
+        </div>
+
+        {/* {Object.entries(messagesToSend).map(([key, message]) => (
+          <button
+            key={key}
+            className={tx(' rounded-lg border p-1 px-3 text-sm capitalize', {
+              'border-gray-200 bg-white text-gray-800': newMessageDirection === 'incoming',
+              'border-blue-600 bg-blue-600 font-medium text-white': newMessageDirection === 'outgoing',
+            })}
+            onClick={() => client.addMessage({ ...message, direction: newMessageDirection })}
+          >
+            {splitCamelCase(key)}
+          </button>
+        ))}
+        <button className="rounded-lg  p-1 px-3 font-medium text-red-600" onClick={() => client.clearMessages()}>
+          Clear
+        </button> */}
+      </div>
+      <div className="flex items-center gap-6">
+        <textarea
+          value={webchatScript}
+          onChange={(e) => setWebchatScript(e.target.value)}
+          className="grow whitespace-pre-wrap border border-gray-300 bg-gray-50 font-mono"
+        />
+        <button
+          onClick={() => {
+            try {
+              const config = parseWebchatScript(webchatScript)
+              console.log(config)
+              // setClient(new WebchatClient({ clientId: config.clientId, url: config.messagingUrl }))
+              setConfiguration((prevConfig) => {
+                return {
+                  ...prevConfig,
+                  ...config,
+                }
+              })
+            } catch (err) {
+              console.error(err)
+            }
+          }}
+          className={tx(
+            'h-fit rounded-lg border p-1 px-3 py-2 text-sm capitalize hover:bg-gray-100 active:bg-gray-200',
+            {
+              'border-gray-200 bg-white text-gray-800': newMessageDirection === 'incoming',
+              'border-blue-600 bg-blue-600 font-medium text-white': newMessageDirection === 'outgoing',
+            }
+          )}
+        >
+          Update webchat
+        </button>
+      </div>
+      {(currentTheme === 'dawn' || currentTheme === 'midnight') && (
+        <div className="flex w-fit flex-wrap items-center gap-4">
+          <HexColorPicker
+            color={color}
+            onChange={(color) => {
+              setColor(color)
+              currentTheme === 'dawn' && setStyles(buildDawnTheme(color))
+              currentTheme === 'midnight' && setStyles(buildMidnightTheme(color))
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/dev-tools/configuration.tsx

@@ -0,0 +1,27 @@
+import { Configuration } from '../../contexts'
+
+export const defaultConfiguration: Configuration = {
+  composerPlaceholder: 'What would you like to know?',
+  botName: 'Customer service',
+  botAvatar: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50',
+  botDescription:
+    'Welcome to webchat this is some description talking about what it is. This might be a bit longer when expanded.',
+  email: {
+    title: 'christophe.sirois@botpress.com',
+  },
+  phone: {
+    title: '581-456-8631',
+  },
+  website: {
+    title: 'https://botpress.com',
+    link: 'https://botpress.com',
+  },
+  termsOfService: {
+    title: 'Terms of service',
+    link: 'https://botpress.com/terms',
+  },
+  privacyPolicy: {
+    title: 'Privacy policy',
+    link: 'https://botpress.com/privacy',
+  },
+} as const

package/src/components/dev-tools/helpers.ts

@@ -0,0 +1,21 @@
+import { BlockObject, MessageObject } from '../../types'
+
+type Direction = 'incoming' | 'outgoing' | 'system'
+
+export function messageInBubble(block: BlockObject, direction?: Direction): MessageObject {
+  return {
+    direction: direction || 'incoming',
+    sender: {
+      name: 'Bot',
+    },
+    timestamp: new Date(),
+    block: {
+      type: 'bubble',
+      block,
+    },
+  }
+}
+
+export function splitCamelCase(text: string): string {
+  return text.replace(/([a-z])([A-Z])/g, '$1 $2')
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export * from './Avatar'
+export * from './Block'
+export * from './Composer'
+export * from './Container'
+export * from './Header'
+export * from './LoadingIndicator'
+export * from './Message'
+export * from './MessageList'
+export * from './Modal'
+export * from './RestartConversation'
+export * from './Webchat'
+export * from './renderers'

package/src/components/renderers/Audio.tsx

@@ -0,0 +1,11 @@
+import { forwardRef } from 'react'
+import { CommonBlockProps, AudioBlock } from '../../types'
+
+type Props = CommonBlockProps & AudioBlock
+export const Audio = forwardRef<HTMLAudioElement, Props>(({ url, type, styles, ...props }, ref) => {
+  return (
+    <div>
+      <audio {...props} controls src={url} {...styles?.[type]} ref={ref} />
+    </div>
+  )
+})

package/src/components/renderers/Bubble.tsx

@@ -0,0 +1,12 @@
+import { ComponentProps, forwardRef } from 'react'
+import { BubbleBlock, CommonBlockProps } from '../../types'
+import { Block } from '../Block'
+
+type Props = CommonBlockProps & BubbleBlock & ComponentProps<'div'>
+export const Bubble = forwardRef<HTMLDivElement, Props>(({ block, styles, type, ...props }, ref) => {
+  return (
+    <div {...props} {...styles?.[type]} ref={ref}>
+      <Block styles={styles} block={block} />
+    </div>
+  )
+})

package/src/components/renderers/Button.tsx

@@ -0,0 +1,59 @@
+import { ComponentProps, useEffect, useState } from 'react'
+import { ButtonBlock, CommonBlockProps } from '../../types'
+import { useWebchatContext } from '../../contexts'
+
+type Props = CommonBlockProps & ButtonBlock
+export const Button = ({ text, buttonValue, type, styles, variant, groupId, reusable, ...props }: Props) => {
+  const { eventEmitter, client } = useWebchatContext()
+  const [activated, setActivated] = useState(false)
+  const [groupActivated, setGroupActivated] = useState(false)
+  const [disabled, setDisabled] = useState(false)
+
+  useEffect(() => {
+    if (!groupId) return
+    return eventEmitter.on(`button-group-${groupId}-click`, () => {
+      setGroupActivated(true)
+      if (!reusable) setDisabled(true)
+    })
+  }, [eventEmitter, groupId, reusable])
+
+  function onClick() {
+    if (groupId) {
+      eventEmitter.emit(`button-group-${groupId}-click`)
+    }
+    setActivated(true)
+    if (!reusable) setDisabled(true)
+    if (variant === 'link') return
+    client.sendMessage(buttonValue)
+  }
+
+  return (
+    <ButtonOrAnchor
+      {...props}
+      variant={variant}
+      onClick={onClick}
+      disabled={disabled}
+      data-activated={activated ? '' : undefined}
+      data-group-activated={groupActivated ? '' : undefined}
+      data-type={variant}
+      value={buttonValue}
+      {...styles?.[type]}
+    >
+      {text}
+    </ButtonOrAnchor>
+  )
+}
+type ButtonOrAnchorProps =
+  | ({ variant: 'action' } & ComponentProps<'button'>)
+  | ({ variant: 'link'; value: string } & ComponentProps<'a'>)
+const ButtonOrAnchor = (props: ButtonOrAnchorProps) => {
+  if (props.variant === 'link') {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { value, variant, ...rest } = props
+    return <a {...rest} href={value} target="_blank" rel="noopener noreferrer" />
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { variant, ...rest } = props
+  return <button {...rest} />
+}

package/src/components/renderers/Carousel.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useCallback, useEffect, useState } from 'react'
+import { CarouselBlock, CommonBlockProps } from '../../types'
+import useEmblaCarousel, { EmblaCarouselType } from 'embla-carousel-react'
+import { Block } from '../Block'
+import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/solid'
+
+type Props = CommonBlockProps & CarouselBlock
+export const Carousel = forwardRef<HTMLDivElement, Props>(({ type, styles, blocks }, ref) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ skipSnaps: true })
+
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+
+  const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi])
+  const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi])
+
+  const carouselStyles = styles?.[type]
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev())
+    setNextBtnDisabled(!emblaApi.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    onSelect(emblaApi)
+    emblaApi.on('reInit', onSelect)
+    emblaApi.on('select', onSelect)
+  }, [emblaApi, onSelect])
+
+  return (
+    <div {...carouselStyles?.container} data-container="carousel" ref={emblaRef}>
+      <div ref={ref} {...carouselStyles?.slidesContainer}>
+        {blocks.map((block, index) => (
+          <Block key={index} styles={styles} block={block} />
+        ))}
+      </div>
+      <ChevronLeftIcon
+        {...carouselStyles?.backButton}
+        data-disabled={prevBtnDisabled ? '' : undefined}
+        onClick={scrollPrev}
+      />
+
+      <ChevronRightIcon
+        {...carouselStyles?.nextButton}
+        data-disabled={nextBtnDisabled ? '' : undefined}
+        onClick={scrollNext}
+      />
+    </div>
+  )
+})