@botpress/webchat 0.5.0 → 1.0.0

package/src/main.tsx

@@ -0,0 +1,33 @@
+import ReactDOM from 'react-dom/client'
+import { App } from './App.tsx'
+import './index.css'
+
+import { StrictMode } from 'react'
+
+import { install } from '@twind/core'
+import { config } from './twind.config.ts'
+import { ThemeSchema } from './schemas'
+import { prismTheme } from './themes'
+import { WebchatClient } from './client/MessagingClient.ts'
+
+export const twObject = install(config)
+
+export const webchatClient = new WebchatClient({
+  url: 'https://messaging.botpress.cloud',
+  clientId: 'b390bfce-4eed-4078-b180-655f8202a12d',
+})
+
+//bot a louis
+// 09d8ea5b-2781-4fe4-a0b5-d75798b24c50
+
+//hello sarah
+// b390bfce-4eed-4078-b180-655f8202a12d
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <div className="grid h-screen w-screen grid-flow-col grid-cols-[24rem_1fr] grid-rows-[auto_1fr] gap-8 p-8">
+      <App theme={ThemeSchema.parse(prismTheme)} client={webchatClient} />
+      <App theme={ThemeSchema.parse(prismTheme)} client={webchatClient} />
+    </div>
+  </StrictMode>
+)

package/src/providers/ModalProvider.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren, ReactNode, useState } from 'react'
+import { Modal } from '../components'
+import { ModalContext } from '../contexts'
+
+export type ModalProps = {
+  title: string | null
+  content: ReactNode | null
+}
+
+type Props = PropsWithChildren
+
+export const ModalProvider = ({ children }: Props) => {
+  const [open, setOpen] = useState(false)
+  const [title, setTitle] = useState<string>('')
+  const [content, setContent] = useState<ReactNode | null>(null)
+
+  const showModal = ({ title, content }: { title: string; content: ReactNode }) => {
+    setTitle(title)
+    setContent(content)
+    setOpen(true)
+  }
+
+  const hideModal = () => {
+    setOpen(false)
+  }
+
+  return (
+    <ModalContext.Provider value={{ hideModal, showModal, title, content, open }}>
+      <Modal open={open} onOpenChange={setOpen}>
+        <Modal.Content title={title}>{content}</Modal.Content>
+      </Modal>
+      {children}
+    </ModalContext.Provider>
+  )
+}

package/src/providers/WebchatProvider.tsx

@@ -0,0 +1,107 @@
+import { ComponentProps, ReactNode, useState } from 'react'
+import { Configuration, Renderers, WebchatContext } from '../contexts'
+import { eventEmitter } from '../Utils'
+import { renderers as defaultRenderers } from '../components'
+import { defaultConfiguration } from '../components/dev-tools/configuration'
+import { MessageObject } from '../types'
+import { Theme } from '../schemas'
+import { useAsync, useEffectOnce } from 'react-use'
+import { type WebchatClient, MessageContentSchema } from '../client'
+import { Message } from '@botpress/messaging-socket'
+import { useWebchatStore } from '../hooks'
+
+type Props = {
+  styles?: Theme
+  renderers?: Renderers
+  client: WebchatClient
+  configuration: Configuration
+  children?: ReactNode | ((configuration: Configuration) => ReactNode)
+} & Omit<ComponentProps<typeof WebchatContext.Provider>, 'value' | 'children'>
+
+export const WebchatProvider = ({ styles = {}, renderers, client, children, configuration, ...props }: Props) => {
+  const [messages, setMessages] = useState<MessageObject[]>([])
+  const [state, setWebchatState] = useState({ disableComposer: false })
+  const [config, setConfig] = useState(configuration)
+  const [theme, setTheme] = useState<Theme>(styles) // TODO: remove this once dev theme switching is figured out
+  const addMessageToHistory = useWebchatStore((state) => state.addMessageToHistory)
+  const setConversationId = useWebchatStore((state) => state.setConversationId)
+  const user = useWebchatStore((state) => state.user)
+  const setUser = useWebchatStore((state) => state.setUser)
+
+  const providerProps = {
+    ...props,
+    value: {
+      theme,
+      renderers: { ...defaultRenderers, ...renderers },
+      messages,
+      eventEmitter,
+      configuration,
+      setConfiguration: setConfig,
+      state,
+      setState: (newState: Partial<typeof state>) => setWebchatState({ ...state, ...newState }),
+      setTheme,
+      client: {
+        sendMessage: async (message: string) => {
+          await client.sendMessage(message)
+          setMessages((messages) => [
+            ...messages,
+            {
+              direction: 'outgoing',
+              sender: { name: 'You' },
+              timestamp: new Date(),
+              block: { type: 'bubble', block: { type: 'text', text: message } },
+            },
+          ])
+
+          if (client.userId) {
+            addMessageToHistory({ message, userId: client.userId })
+          }
+        },
+        on: client.on,
+        restartConversation: async () => {
+          await client.newConversation()
+          setMessages([])
+        },
+      },
+    },
+  }
+
+  useEffectOnce(() => {
+    return client.on('message', (message: Message) => {
+      try {
+        const payload = MessageContentSchema.parse(message.payload)
+        setMessages((messages) => [
+          ...messages,
+          {
+            direction: 'incoming',
+            sender: { name: 'Bot', avatar: config.botAvatar },
+            timestamp: message.sentOn,
+            block: payload,
+          },
+        ])
+      } catch (err) {
+        console.error('Invalid message payload')
+      }
+    })
+  })
+
+  useEffectOnce(() => {
+    return client.on('conversation', (conversationId) => {
+      setConversationId(conversationId)
+    })
+  })
+
+  useAsync(async () => {
+    const newUser = await client.connect(user)
+    setUser(newUser)
+    return () => {
+      client.disconnect()
+    }
+  }, [])
+
+  return (
+    <WebchatContext.Provider {...providerProps}>
+      {typeof children === 'function' ? children(config) : children}
+    </WebchatContext.Provider>
+  )
+}

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './ModalProvider'
+export * from './WebchatProvider'

package/src/schemas/index.ts

@@ -0,0 +1 @@
+export * from './theme'

package/src/schemas/theme.ts

@@ -0,0 +1,188 @@
+import { CSSProperties } from 'react'
+import { markdownTypes } from '../types'
+import { z } from 'zod'
+import { tw } from '@twind/core'
+
+const StyleOptionSchema = z.object({
+  className: z
+    .string()
+    .optional()
+    .transform((val) => {
+      if (val) {
+        return tw(val)
+      }
+    }),
+  style: z
+    .object({})
+    .passthrough()
+    .optional()
+    .transform((val) => {
+      if (val) {
+        return val as CSSProperties
+      }
+    }),
+})
+
+export const BlocksSchema = z.object({
+  button: StyleOptionSchema.optional(),
+  text: z.record(z.enum(markdownTypes), StyleOptionSchema.optional()),
+  image: z
+    .object({
+      image: StyleOptionSchema.optional(),
+      placeholder: StyleOptionSchema.optional(),
+    })
+    .optional(),
+  audio: StyleOptionSchema.optional(),
+  video: StyleOptionSchema.optional(),
+  file: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      title: StyleOptionSchema.optional(),
+      icon: StyleOptionSchema.optional(),
+    })
+    .optional(),
+  location: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      title: StyleOptionSchema.optional(),
+      icon: StyleOptionSchema.optional(),
+    })
+    .optional(),
+  column: StyleOptionSchema.optional(),
+  row: StyleOptionSchema.optional(),
+  bubble: StyleOptionSchema.optional(),
+  carousel: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      slidesContainer: StyleOptionSchema.optional(),
+      backButton: StyleOptionSchema.optional(),
+      nextButton: StyleOptionSchema.optional(),
+    })
+    .optional(),
+  dropdown: z
+    .object({
+      button: z
+        .object({
+          container: StyleOptionSchema.optional(),
+          icon: StyleOptionSchema.optional(),
+          text: StyleOptionSchema.optional(),
+        })
+        .optional(),
+      content: z
+        .object({
+          container: StyleOptionSchema.optional(),
+          item: StyleOptionSchema.optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+})
+
+export type Theme = z.infer<typeof ThemeSchema>
+export const ThemeSchema = z.object({
+  container: StyleOptionSchema.optional(),
+  modal: z
+    .object({
+      overlay: StyleOptionSchema.optional(),
+      container: StyleOptionSchema.optional(),
+      dialog: z
+        .object({
+          container: StyleOptionSchema.optional(),
+          title: z
+            .object({
+              container: StyleOptionSchema.optional(),
+              text: StyleOptionSchema.optional(),
+              closeIcon: StyleOptionSchema.optional(),
+            })
+            .optional(),
+          content: StyleOptionSchema.optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+  notification: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      title: StyleOptionSchema.optional(),
+      description: StyleOptionSchema.optional(),
+      icon: StyleOptionSchema.optional(),
+      closeIcon: StyleOptionSchema.optional(),
+    })
+    .optional(),
+  header: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      content: z.object({
+        container: StyleOptionSchema.optional(),
+        title: StyleOptionSchema.optional(),
+        description: StyleOptionSchema.optional(),
+        avatar: z
+          .object({
+            container: StyleOptionSchema.optional(),
+            image: StyleOptionSchema.optional(),
+            fallback: StyleOptionSchema.optional(),
+          })
+          .optional(),
+        actions: z
+          .object({
+            container: StyleOptionSchema.optional(),
+            icons: StyleOptionSchema.optional(),
+          })
+          .optional(),
+      }),
+      expandedContent: z
+        .object({
+          container: StyleOptionSchema.optional(),
+          descriptionItems: z
+            .object({
+              container: StyleOptionSchema.optional(),
+              icon: StyleOptionSchema.optional(),
+              text: StyleOptionSchema.optional(),
+              link: StyleOptionSchema.optional(),
+            })
+            .optional(),
+        })
+        .optional(),
+      description: z
+        .object({
+          container: StyleOptionSchema.optional(),
+          title: StyleOptionSchema.optional(),
+          subtitle: StyleOptionSchema.optional(),
+        })
+        .optional(),
+      newConversationIcon: StyleOptionSchema.optional(),
+    })
+    .optional(),
+  composer: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      input: StyleOptionSchema.optional(),
+      button: z
+        .object({
+          container: StyleOptionSchema.optional(),
+          icon: StyleOptionSchema.optional(),
+        })
+        .optional(),
+    })
+    .optional(),
+  messageList: StyleOptionSchema.optional(),
+  message: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      avatar: z
+        .object({
+          container: StyleOptionSchema.optional(),
+          image: StyleOptionSchema.optional(),
+          fallback: StyleOptionSchema.optional(),
+        })
+        .optional(),
+      blocks: BlocksSchema.optional(),
+    })
+    .optional(),
+  loadingIndicator: z
+    .object({
+      container: StyleOptionSchema.optional(),
+      loader: StyleOptionSchema.optional(),
+    })
+    .optional(),
+})

package/src/services/clipboard.ts

@@ -0,0 +1,8 @@
+import { showToast } from '.'
+
+export function copyToClipboard(value: string, description?: string) {
+  const message = description ? `The ${description} has been copied to your clipboard.` : 'Copied to clipboard.'
+  return navigator.clipboard.writeText(value).then(() => {
+    return showToast({ title: message, type: 'success' })
+  })
+}

package/src/services/images.ts

@@ -0,0 +1,39 @@
+import { Dimensions, Options } from '../types'
+
+export const getImageSize = (url: string, options: Options = {}): Promise<Dimensions> => {
+  return new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      return reject('Window is not defined')
+    }
+
+    if (!url) {
+      return reject('Url is not defined')
+    }
+
+    let timer: number | null = null
+
+    const img = new Image()
+
+    img.addEventListener('load', () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+
+      resolve({ width: img.naturalWidth, height: img.naturalHeight })
+    })
+
+    img.addEventListener('error', (event) => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+
+      reject(`${event.type}: ${event.message}`)
+    })
+
+    img.src = url
+
+    if (options.timeout) {
+      timer = setTimeout(() => reject('Timeout'), options.timeout)
+    }
+  })
+}

package/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from './clipboard'
+export * from './images'
+export * from './toast'

package/src/services/toast.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable react-refresh/only-export-components */
+import { toast } from 'react-hot-toast'
+import { Transition } from '@headlessui/react'
+import { ReactComponent as CircleCheckIcon } from '../assets/check-circle-bold.svg'
+import { ReactComponent as XCloseIcon } from '../assets/x-close.svg'
+import { ReactComponent as CircleXIcon } from '../assets/x-circle-bold.svg'
+import { FC, PropsWithChildren, ReactNode } from 'react'
+import { useWebchatContext } from '../contexts'
+
+type ToastType = ToastProps['type'] | CustomToastProps['type']
+type CustomToastProps = {
+  type: 'custom'
+  content?: ReactNode
+}
+type ToastProps = {
+  type?: 'success' | 'error' | 'neutral'
+  title: string
+  icon?: FC<{ className?: string; type?: ToastType }>
+  description?: string
+}
+
+export function showToast(props: ToastProps | CustomToastProps) {
+  return toast.custom((t) => (
+    <ToastContainer type={props.type} show={t.visible}>
+      {props.type === 'custom' ? props.content : <ToastContent {...props} toastId={t.id} />}
+    </ToastContainer>
+  ))
+}
+
+type ToastContentProps = ToastProps & { toastId: string }
+const ToastContent = ({ icon: Icon, type, title, description, toastId }: ToastContentProps) => {
+  const {
+    theme: { notification: styles },
+  } = useWebchatContext()
+
+  return (
+    <>
+      {Icon ? <Icon {...styles?.icon} /> : <ToastIcon {...styles?.icon} type={type} />}
+      <p {...styles?.title}>{title}</p>
+      {description ? <p {...styles?.description}>{description}</p> : null}
+      <XCloseIcon {...styles?.closeIcon} onClick={() => toast.dismiss(toastId)} />
+    </>
+  )
+}
+
+type ToastContainerProps = PropsWithChildren<{
+  type?: ToastType
+  show: boolean
+}>
+const ToastContainer = ({ type, ...props }: ToastContainerProps) => {
+  const {
+    theme: { notification: styles },
+  } = useWebchatContext()
+
+  return <Transition {...props} {...styles?.container} appear data-type={type ?? 'neutral'} />
+}
+
+type ToastIconProps = {
+  type?: ToastType
+  className?: string
+}
+const ToastIcon = ({ type, className }: ToastIconProps) => {
+  switch (type) {
+    case 'success':
+      return <CircleCheckIcon className={className} />
+    case 'error':
+      return <CircleXIcon className={className} />
+    default:
+      return null
+  }
+}