@botpress/webchat 1.0.0 → 1.0.2

package/src/hooks/useRefresh.ts

@@ -1,33 +0,0 @@
-import { useState } from 'react'
-import { useAsync } from 'react-use'
-
-export const defaultGetRefreshTime = (expiresAt: Date) => {
-  const now = new Date()
-  return expiresAt.getTime() - now.getTime()
-}
-
-/**
- * Utility hooks to force a state fresh based on a date
- * @example
- * const [onRefresh, setDate] = useDateRefresh()
- * useEffect(() => {}, [onRefresh])
- * setDate(futureDate) // The refresh function will trigger when the date passes
- * @returns value to observe for refreshing and a function that set the refresh date
- */
-export const useRefresh = (getRefreshTimeInMs = defaultGetRefreshTime): [number, (date: Date) => void] => {
-  const [onRefresh, setOnRefresh] = useState(0)
-  const [refreshDate, setRefreshDate] = useState<Date>()
-
-  const incrementRefresh = () => setOnRefresh((onRefresh) => onRefresh + 1)
-
-  useAsync(async () => {
-    if (refreshDate) {
-      const refreshTimeout = setTimeout(incrementRefresh, getRefreshTimeInMs(refreshDate))
-      return () => {
-        clearTimeout(refreshTimeout)
-      }
-    }
-  }, [refreshDate])
-
-  return [onRefresh, setRefreshDate]
-}

package/src/hooks/useWebchatStore.ts

@@ -1,45 +0,0 @@
-import { UserCredentials } from '@botpress/messaging-socket'
-import { create } from 'zustand'
-import { devtools, persist } from 'zustand/middleware'
-
-type WebchatState = {
-  messageHistory: {
-    [key: string]: string[]
-  }
-  user?: UserCredentials
-  conversationId?: string
-  addMessageToHistory: (props: { userId: string; message: string }) => void
-  setUser: (userId?: UserCredentials) => void
-  setConversationId: (conversationId?: string) => void
-}
-
-export const useWebchatStore = create<WebchatState>()(
-  devtools(
-    persist(
-      (set) => ({
-        messageHistory: {},
-        addMessageToHistory: ({ userId, message }) =>
-          set((state) => ({
-            ...state,
-            messageHistory: {
-              ...state.messageHistory,
-              [userId]: [message, ...(state.messageHistory[userId] ?? []).slice(0, 100)],
-            },
-          })),
-        setUser: (user) =>
-          set((state) => ({
-            ...state,
-            user,
-          })),
-        setConversationId: (conversationId) =>
-          set((state) => ({
-            ...state,
-            conversationId,
-          })),
-      }),
-      {
-        name: 'botpress-webchat',
-      }
-    )
-  )
-)

package/src/index.css

@@ -1,18 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-
-  /* font-family: 'Fira Code', monospace;
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-family: 'Rubik', sans-serif; */
-  font-family: 'Inter', sans-serif;
-
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './components'
-export * from './providers'
-export * from './types'

package/src/main.tsx

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

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

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

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

package/src/schemas/index.ts

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

package/src/schemas/theme.ts

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

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

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

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

package/src/services/toast.tsx

@@ -1,71 +0,0 @@
-/* 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
-  }
-}