@botpress/webchat 1.0.0 → 1.0.2

package/src/components/Webchat.tsx

@@ -1,68 +0,0 @@
-import { Container } from './Container'
-import { Header } from './Header'
-import { RestartConversation } from './RestartConversation'
-import { MessageList } from './MessageList'
-import { Composer, ComposerButton, ComposerInput } from './Composer'
-import { DocumentTextIcon, EnvelopeIcon, GlobeAltIcon, LockClosedIcon, PhoneIcon } from '@heroicons/react/24/solid'
-import { Configuration } from '../contexts'
-
-type Props = {
-  configuration: Configuration
-}
-
-export const Webchat = ({ configuration }: Props) => {
-  return (
-    <Container>
-      <Header>
-        <Header.Content>
-          <Header.Avatar src={configuration.botAvatar}>{(configuration.botName || 'My Bot').slice(0, 2)}</Header.Avatar>
-          <Header.Title>{configuration.botName || 'My Bot'}</Header.Title>
-          <Header.Description>{configuration.botDescription}</Header.Description>
-          <Header.Actions>
-            <RestartConversation />
-          </Header.Actions>
-        </Header.Content>
-        <Header.ExpandedContent>
-          <Header.DescriptionItem
-            data-email=""
-            icon={EnvelopeIcon}
-            title={configuration.email?.title}
-            link={configuration.email?.link}
-          />
-
-          <Header.DescriptionItem
-            data-phone=""
-            icon={PhoneIcon}
-            title={configuration.phone?.title}
-            link={configuration.phone?.link}
-          />
-
-          <Header.DescriptionItem
-            data-website=""
-            link={configuration.website?.link}
-            icon={GlobeAltIcon}
-            title={configuration.website?.title}
-          />
-
-          <Header.DescriptionItem
-            data-terms=""
-            link={configuration.termsOfService?.link}
-            icon={DocumentTextIcon}
-            title={configuration.termsOfService?.title}
-          />
-          <Header.DescriptionItem
-            data-privacy=""
-            link={configuration.privacyPolicy?.link}
-            icon={LockClosedIcon}
-            title={configuration.privacyPolicy?.title}
-          />
-        </Header.ExpandedContent>
-      </Header>
-      <MessageList />
-      <Composer>
-        <ComposerInput placeholder={configuration.composerPlaceholder || 'Type your message'} />
-        <ComposerButton />
-      </Composer>
-    </Container>
-  )
-}

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

@@ -1,496 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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>
-  )
-})