@botpress/webchat 0.5.0 → 1.0.0

package/src/components/Header.tsx

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

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

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

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

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

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

package/src/components/Webchat.tsx

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