@botpress/webchat 1.0.0 → 1.0.2

package/src/client/adapters/Text.ts

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

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

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

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

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

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

package/src/components/Avatar.tsx

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

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

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

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

package/src/components/Header.tsx

@@ -1,141 +0,0 @@
-import * as Collapsible from '@radix-ui/react-collapsible'
-import { ComponentProps, FC, PropsWithChildren, ReactNode, forwardRef, memo, useState } from 'react'
-import { Avatar, AvatarFallback, AvatarImage } from '.'
-import { StyleOptions, useWebchatContext } from '../contexts'
-import { ReactComponent as ShareIcon } from '../assets/share-04.svg'
-import { copyToClipboard } from '../services'
-
-type HeaderProps = {
-  defaultOpen?: boolean
-  open?: boolean
-  disabled?: boolean
-  onOpenChange?(open: boolean): void
-} & ComponentProps<'div'>
-const Header = memo(
-  forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
-    const {
-      theme: { header },
-    } = useWebchatContext()
-    const [open, setOpen] = useState(false)
-    return <Collapsible.Root {...props} {...header?.container} open={open} onOpenChange={setOpen} ref={ref} />
-  })
-)
-
-type ContentProps = {
-  asChild?: true | undefined
-} & ComponentProps<'button'>
-const Content = forwardRef<HTMLButtonElement, ContentProps>((props, ref) => {
-  const {
-    theme: { header },
-  } = useWebchatContext()
-  return <Collapsible.Trigger {...props} {...header?.content?.container} ref={ref} />
-})
-
-type ExpandedContentProps = {
-  asChild?: true | undefined
-  forceMount?: true | undefined
-} & ComponentProps<'div'>
-const ExpandedContent = forwardRef<HTMLDivElement, ExpandedContentProps>((props, ref) => {
-  const {
-    theme: { header },
-  } = useWebchatContext()
-  return <Collapsible.Content {...props} {...header?.expandedContent?.container} ref={ref} />
-})
-
-type HeaderAvatarProps = PropsWithChildren<{
-  src?: string
-}>
-const HeaderAvatar = forwardRef<HTMLSpanElement, HeaderAvatarProps>(({ src, children }, ref) => {
-  const {
-    theme: { header },
-  } = useWebchatContext()
-  return (
-    <Avatar ref={ref} {...header?.content?.avatar?.container}>
-      <AvatarImage {...header?.content?.avatar?.image} src={src} />
-      <AvatarFallback {...header?.content?.avatar?.fallback}>{children}</AvatarFallback>
-    </Avatar>
-  )
-})
-
-const Title = forwardRef<HTMLHeadingElement, ComponentProps<'h2'>>((props, ref) => {
-  const {
-    theme: { header },
-  } = useWebchatContext()
-  return <h2 {...props} {...header?.content?.title} ref={ref} />
-})
-
-const Description = forwardRef<HTMLParagraphElement, ComponentProps<'p'>>((props, ref) => {
-  const {
-    theme: { header },
-  } = useWebchatContext()
-  return <p {...props} {...header?.content?.description} ref={ref} />
-})
-
-const Actions = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props, ref) => {
-  const {
-    theme: { header },
-  } = useWebchatContext()
-  return <div {...props} {...header?.content?.actions?.container} ref={ref} />
-})
-
-type DescriptionItemProps = {
-  title?: ReactNode
-  icon?: FC<StyleOptions>
-  link?: string
-}
-const DescriptionItem = ({ icon, title, link, ...props }: DescriptionItemProps) => {
-  const {
-    theme: { header },
-  } = useWebchatContext()
-  const Icon = icon ?? ShareIcon
-
-  const handleClick = (value: string | null) => {
-    if (value) {
-      copyToClipboard(value)
-    }
-  }
-
-  if (!link && !title) {
-    return null
-  }
-
-  //TODO: This can be refactored to be more generic
-  if (link) {
-    return (
-      <a
-        {...props}
-        {...header?.expandedContent?.descriptionItems?.container}
-        href={link}
-        target="_blank"
-        rel="noopener"
-      >
-        <Icon {...header?.expandedContent?.descriptionItems?.icon} />
-        <p {...header?.expandedContent?.descriptionItems?.link}>{title}</p>
-      </a>
-    )
-  }
-
-  return (
-    <div
-      {...props}
-      {...header?.expandedContent?.descriptionItems?.container}
-      onClick={(e) => {
-        handleClick(e.currentTarget.textContent)
-      }}
-    >
-      <Icon {...header?.expandedContent?.descriptionItems?.icon} />
-      <p {...header?.expandedContent?.descriptionItems?.text}>{title}</p>
-    </div>
-  )
-}
-
-const HeaderNamespace = Object.assign(Header, {
-  Content,
-  ExpandedContent,
-  Avatar: HeaderAvatar,
-  Description,
-  Title,
-  Actions,
-  DescriptionItem,
-})
-export { HeaderNamespace as Header }

package/src/components/LoadingIndicator.tsx

@@ -1,15 +0,0 @@
-import { useWebchatContext } from '../contexts'
-import { ComponentProps, memo } from 'react'
-import { clsx } from 'clsx'
-
-export const LoadingIndicator = memo(({ ...props }: ComponentProps<'div'>) => {
-  const {
-    theme: { loadingIndicator },
-  } = useWebchatContext()
-
-  return (
-    <div {...props} {...loadingIndicator?.container}>
-      <div {...loadingIndicator?.loader} />
-    </div>
-  )
-})

package/src/components/Message.tsx

@@ -1,52 +0,0 @@
-import { ComponentProps, forwardRef, useEffect, useState } from 'react'
-import { useMount } from 'react-use'
-import { Avatar, AvatarFallback, AvatarImage } from '.'
-import { MessageContext } from '../contexts'
-import { useWebchatContext } from '../contexts'
-import type { MessageObject } from '../types'
-import { Block } from './Block'
-
-type MessageProps = {
-  scroll: () => void
-} & Partial<MessageObject> &
-  ComponentProps<'div'>
-export const Message = forwardRef<HTMLDivElement, MessageProps>(
-  ({ direction, block, scroll, disableInput, children, sender, ...props }, ref) => {
-    const [isLoading, setIsLoading] = useState<string[]>([])
-
-    const {
-      theme: { message: styles },
-      configuration: { botAvatar, botName },
-    } = useWebchatContext()
-
-    useMount(() => {
-      scroll()
-    })
-
-    useEffect(() => {
-      if (isLoading.length === 0) {
-        scroll()
-      }
-    }, [isLoading.length])
-
-    return (
-      <MessageContext.Provider value={{ isLoading, setIsLoading }}>
-        <div
-          {...props}
-          {...styles?.container}
-          data-loaded={isLoading.length === 0}
-          data-disable-input={!!disableInput}
-          data-direction={direction}
-          ref={ref}
-        >
-          <Avatar {...styles?.avatar?.container}>
-            <AvatarImage {...styles?.avatar?.image} src={sender?.avatar ?? botAvatar} />
-            <AvatarFallback {...styles?.avatar?.fallback}>{sender?.name[0] ?? botName?.[0]}</AvatarFallback>
-          </Avatar>
-          {block && <Block block={block} styles={styles?.blocks} />}
-          {children}
-        </div>
-      </MessageContext.Provider>
-    )
-  }
-)

package/src/components/MessageList.tsx

@@ -1,75 +0,0 @@
-import { ComponentProps, memo, useEffect, useRef, useState } from 'react'
-import { Message } from '.'
-import { useWebchatContext } from '../contexts'
-import { useEffectOnce, useScroll } from 'react-use'
-import { LoadingIndicator } from './LoadingIndicator.tsx'
-import { useRefresh } from '../hooks'
-
-const TYPING_DELAY = 10000 // 10 seconds
-
-export const MessageList = memo(({ ...props }: ComponentProps<'ul'>) => {
-  const {
-    theme: { messageList },
-  } = useWebchatContext()
-  const { messages, setState, client } = useWebchatContext()
-  const [isAtBottom, setIsAtBottom] = useState(true)
-
-  const containerRef = useRef<HTMLUListElement>(null)
-  const { y } = useScroll(containerRef)
-
-  const [isTyping, setIsTyping] = useState(false)
-
-  const [onRefresh, setRefreshDate] = useRefresh()
-
-  const scroll = () => {
-    if (!containerRef.current) return
-    const { scrollHeight } = containerRef.current
-    if (isAtBottom) {
-      containerRef.current.scrollTo({ top: scrollHeight })
-    }
-  }
-
-  useEffect(() => {
-    const NineSecondsAgo = new Date(Date.now() - TYPING_DELAY + 2000)
-    if (messages.length > 0 && messages[messages.length - 1].timestamp < NineSecondsAgo) {
-      setIsTyping(false)
-    }
-  }, [onRefresh])
-
-  useEffectOnce(() => {
-    return client.on('messageSent', () => {
-      setIsTyping(true)
-      setRefreshDate(new Date(Date.now() + TYPING_DELAY))
-    })
-  })
-
-  useEffectOnce(() => {
-    return client.on('message', () => {
-      setIsTyping(false)
-    })
-  })
-
-  useEffect(() => {
-    const lastMessage = messages[messages.length - 1]
-    setState({ disableComposer: !!lastMessage?.disableInput })
-  }, [messages.length])
-
-  useEffect(() => {
-    if (!containerRef.current) return
-    const { offsetHeight, scrollHeight, scrollTop } = containerRef.current
-    setIsAtBottom(scrollHeight <= scrollTop + offsetHeight + 100)
-  }, [y])
-
-  return (
-    <ul {...props} {...messageList} ref={containerRef}>
-      {messages.map((message, index) => (
-        <Message scroll={scroll} key={index} {...message} />
-      ))}
-      {isTyping && (
-        <Message scroll={scroll} direction={'incoming'}>
-          <LoadingIndicator />
-        </Message>
-      )}
-    </ul>
-  )
-})

package/src/components/Modal.tsx

@@ -1,49 +0,0 @@
-import * as Dialog from '@radix-ui/react-dialog'
-import { ReactNode } from 'react'
-import { useWebchatContext } from '../contexts'
-import { XMarkIcon } from '@heroicons/react/24/outline'
-
-export function Modal({
-  open,
-  onOpenChange,
-  children,
-}: {
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  children: ReactNode
-}) {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      {children}
-    </Dialog.Root>
-  )
-}
-
-function ModalContent({ title, children }: { title: string; children: ReactNode }) {
-  const {
-    theme: { modal },
-  } = useWebchatContext()
-
-  return (
-    // <Dialog.Portal>
-    <>
-      <Dialog.Overlay {...modal?.overlay} />
-      <div {...modal?.container}>
-        <Dialog.Content {...modal?.dialog?.container}>
-          <div {...modal?.dialog?.title?.container}>
-            <Dialog.Title {...modal?.dialog?.title?.text}>{title}</Dialog.Title>
-            <Dialog.Close>
-              <XMarkIcon role="button" tabIndex={0} {...modal?.dialog?.title?.closeIcon} />
-            </Dialog.Close>
-          </div>
-          <div {...modal?.dialog?.content}>{children}</div>
-        </Dialog.Content>
-      </div>
-    </>
-    // </Dialog.Portal>
-  )
-}
-
-Modal.Button = Dialog.Trigger
-Modal.Close = Dialog.Close
-Modal.Content = ModalContent

package/src/components/RestartConversation.tsx

@@ -1,52 +0,0 @@
-import { ArrowPathIcon } from '@heroicons/react/20/solid'
-import { ComponentProps } from 'react'
-import { useModalContext, useWebchatContext } from '../contexts'
-import { Modal } from '.'
-
-type Props = {
-  // onConfirm: () => void
-} & ComponentProps<typeof ArrowPathIcon>
-
-export const RestartConversation = ({ ...props }: Props) => {
-  //TODO: Fix this, this was done quick to avoid the app component re-rendering
-  const {
-    theme: { header },
-    client: { restartConversation: onConfirm },
-  } = useWebchatContext()
-
-  const { showModal } = useModalContext()
-
-  const onSelect = (e: React.SyntheticEvent) => {
-    e.stopPropagation()
-    showModal({
-      title: 'Restart Conversation',
-      content: (
-        <>
-          <p>Are you sure you want to restart a new conversation?</p>
-          <Modal.Close asChild>
-            <button
-              className="ml-auto mt-4 rounded-md border border-blue-700 bg-blue-600 px-2 py-1 text-white"
-              onClick={onConfirm}
-            >
-              clear
-            </button>
-          </Modal.Close>
-        </>
-      ),
-    })
-  }
-  return (
-    <ArrowPathIcon
-      {...props}
-      {...header?.content?.actions?.icons}
-      role="button"
-      tabIndex={0}
-      onClick={onSelect}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') {
-          onSelect(e)
-        }
-      }}
-    />
-  )
-}