@botpress/webchat 1.0.0 → 1.0.1

package/src/components/renderers/Button.tsx

@@ -1,59 +0,0 @@
-import { ComponentProps, useEffect, useState } from 'react'
-import { ButtonBlock, CommonBlockProps } from '../../types'
-import { useWebchatContext } from '../../contexts'
-
-type Props = CommonBlockProps & ButtonBlock
-export const Button = ({ text, buttonValue, type, styles, variant, groupId, reusable, ...props }: Props) => {
-  const { eventEmitter, client } = useWebchatContext()
-  const [activated, setActivated] = useState(false)
-  const [groupActivated, setGroupActivated] = useState(false)
-  const [disabled, setDisabled] = useState(false)
-
-  useEffect(() => {
-    if (!groupId) return
-    return eventEmitter.on(`button-group-${groupId}-click`, () => {
-      setGroupActivated(true)
-      if (!reusable) setDisabled(true)
-    })
-  }, [eventEmitter, groupId, reusable])
-
-  function onClick() {
-    if (groupId) {
-      eventEmitter.emit(`button-group-${groupId}-click`)
-    }
-    setActivated(true)
-    if (!reusable) setDisabled(true)
-    if (variant === 'link') return
-    client.sendMessage(buttonValue)
-  }
-
-  return (
-    <ButtonOrAnchor
-      {...props}
-      variant={variant}
-      onClick={onClick}
-      disabled={disabled}
-      data-activated={activated ? '' : undefined}
-      data-group-activated={groupActivated ? '' : undefined}
-      data-type={variant}
-      value={buttonValue}
-      {...styles?.[type]}
-    >
-      {text}
-    </ButtonOrAnchor>
-  )
-}
-type ButtonOrAnchorProps =
-  | ({ variant: 'action' } & ComponentProps<'button'>)
-  | ({ variant: 'link'; value: string } & ComponentProps<'a'>)
-const ButtonOrAnchor = (props: ButtonOrAnchorProps) => {
-  if (props.variant === 'link') {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, variant, ...rest } = props
-    return <a {...rest} href={value} target="_blank" rel="noopener noreferrer" />
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { variant, ...rest } = props
-  return <button {...rest} />
-}

package/src/components/renderers/Carousel.tsx

@@ -1,51 +0,0 @@
-import { forwardRef, useCallback, useEffect, useState } from 'react'
-import { CarouselBlock, CommonBlockProps } from '../../types'
-import useEmblaCarousel, { EmblaCarouselType } from 'embla-carousel-react'
-import { Block } from '../Block'
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/solid'
-
-type Props = CommonBlockProps & CarouselBlock
-export const Carousel = forwardRef<HTMLDivElement, Props>(({ type, styles, blocks }, ref) => {
-  const [emblaRef, emblaApi] = useEmblaCarousel({ skipSnaps: true })
-
-  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
-  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
-
-  const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi])
-  const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi])
-
-  const carouselStyles = styles?.[type]
-
-  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
-    setPrevBtnDisabled(!emblaApi.canScrollPrev())
-    setNextBtnDisabled(!emblaApi.canScrollNext())
-  }, [])
-
-  useEffect(() => {
-    if (!emblaApi) return
-    onSelect(emblaApi)
-    emblaApi.on('reInit', onSelect)
-    emblaApi.on('select', onSelect)
-  }, [emblaApi, onSelect])
-
-  return (
-    <div {...carouselStyles?.container} data-container="carousel" ref={emblaRef}>
-      <div ref={ref} {...carouselStyles?.slidesContainer}>
-        {blocks.map((block, index) => (
-          <Block key={index} styles={styles} block={block} />
-        ))}
-      </div>
-      <ChevronLeftIcon
-        {...carouselStyles?.backButton}
-        data-disabled={prevBtnDisabled ? '' : undefined}
-        onClick={scrollPrev}
-      />
-
-      <ChevronRightIcon
-        {...carouselStyles?.nextButton}
-        data-disabled={nextBtnDisabled ? '' : undefined}
-        onClick={scrollNext}
-      />
-    </div>
-  )
-})

package/src/components/renderers/Column.tsx

@@ -1,22 +0,0 @@
-import { ComponentProps, forwardRef } from 'react'
-import { ColumnBlock, CommonBlockProps } from '../../types'
-import { Block } from '../Block'
-
-type Props = CommonBlockProps & ColumnBlock & ComponentProps<'div'>
-export const Column = forwardRef<HTMLDivElement, Props>(
-  ({ blocks, styles, type, horizontalAlignment, verticalAlignment, ...props }, ref) => {
-    return (
-      <div
-        data-horizontal={horizontalAlignment}
-        data-vertical={verticalAlignment}
-        {...props}
-        {...styles?.[type]}
-        ref={ref}
-      >
-        {blocks.map((block, index) => (
-          <Block key={index} styles={styles} block={block} />
-        ))}
-      </div>
-    )
-  }
-)

package/src/components/renderers/Dropdown.tsx

@@ -1,170 +0,0 @@
-// export const Dropdown = ({ styles, type, options, label, ...props }: Props) => {
-import * as React from 'react'
-import {
-  useFloating,
-  useClick,
-  useDismiss,
-  useRole,
-  useListNavigation,
-  useInteractions,
-  FloatingFocusManager,
-  useTypeahead,
-  offset,
-  flip,
-  size,
-  autoUpdate,
-  FloatingPortal,
-} from '@floating-ui/react'
-import { CommonBlockProps, DropdownBlock } from '../../types'
-import { ComponentProps } from 'react'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { clsx } from 'clsx'
-import { useWebchatContext } from '../../contexts'
-
-// const options = ['Red', 'Orange', 'Yellow', 'Green', 'Cyan', 'Blue', 'Purple', 'Pink', 'Maroon', 'Black', 'White']
-type Props = CommonBlockProps & DropdownBlock & ComponentProps<'div'>
-
-export const Dropdown = ({ styles, type, options, label, reusable }: Props) => {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [activeIndex, setActiveIndex] = React.useState<number | null>(null)
-  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null)
-  const { client } = useWebchatContext()
-
-  const optionsDict = options.reduce((acc, option) => {
-    acc[option.label] = option.value
-    return acc
-  }, {} as { [key: string]: string })
-
-  const labels = optionsDict ? Object.keys(optionsDict) : []
-
-  const onOpenChange = (open: boolean) => {
-    if (selectedIndex !== null && !reusable) {
-      setIsOpen(false)
-    } else {
-      setIsOpen(open)
-    }
-  }
-
-  const { refs, floatingStyles, context } = useFloating({
-    placement: 'bottom-start',
-    open: isOpen,
-    onOpenChange,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(5),
-      flip({ padding: 10 }),
-      size({
-        apply({ rects, elements, availableHeight }) {
-          Object.assign(elements.floating.style, {
-            maxHeight: `${availableHeight}px`,
-            minWidth: `${rects.reference.width}px`,
-          })
-        },
-        padding: 10,
-      }),
-    ],
-  })
-
-  const listRef = React.useRef<Array<HTMLElement | null>>([])
-  const listContentRef = React.useRef(labels)
-  const isTypingRef = React.useRef(false)
-
-  const click = useClick(context, { event: 'mousedown' })
-  const dismiss = useDismiss(context)
-  const role = useRole(context, { role: 'listbox' })
-  const listNav = useListNavigation(context, {
-    listRef,
-    activeIndex,
-    selectedIndex,
-    onNavigate: setActiveIndex,
-    // This is a large list, allow looping.
-    loop: true,
-  })
-  const typeahead = useTypeahead(context, {
-    listRef: listContentRef,
-    activeIndex,
-    selectedIndex,
-    onMatch: isOpen ? setActiveIndex : setSelectedIndex,
-    onTypingChange(isTyping) {
-      isTypingRef.current = isTyping
-    },
-  })
-
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-    dismiss,
-    role,
-    listNav,
-    typeahead,
-    click,
-  ])
-
-  const handleSelect = (index: number) => {
-    setSelectedIndex(index)
-    client.sendMessage(optionsDict[labels[index]])
-    setIsOpen(false)
-  }
-
-  const selectedItemLabel = selectedIndex !== null ? labels[selectedIndex] : undefined
-
-  return (
-    <>
-      <div
-        tabIndex={0}
-        ref={refs.setReference}
-        aria-labelledby="select-label"
-        aria-autocomplete="none"
-        data-disabled={selectedIndex !== null && !reusable ? '' : undefined}
-        {...styles?.[type]?.button?.container}
-        {...getReferenceProps()}
-      >
-        <span {...styles?.[type]?.button?.text}>{selectedItemLabel || label || 'Select...'}</span>
-        <ChevronDownIcon {...styles?.[type]?.button?.icon} />
-      </div>
-      {isOpen && (
-        <FloatingPortal>
-          <FloatingFocusManager context={context} modal={false}>
-            <div
-              ref={refs.setFloating}
-              className={styles?.[type]?.content?.container?.className}
-              // className="min-w-[100px] overflow-y-auto rounded-md border border-gray-200 bg-white text-sm text-gray-700 outline-none"
-              style={{ ...floatingStyles, ...styles?.[type]?.content?.container?.style }}
-              {...getFloatingProps()}
-            >
-              {labels.map((value, i) => (
-                <div
-                  key={value}
-                  ref={(node) => {
-                    listRef.current[i] = node
-                  }}
-                  role="option"
-                  tabIndex={i === activeIndex ? 0 : -1}
-                  aria-selected={i === selectedIndex && i === activeIndex}
-                  data-active={i === activeIndex ? '' : undefined}
-                  {...styles?.[type]?.content?.item}
-                  {...getItemProps({
-                    onClick() {
-                      handleSelect(i)
-                    },
-                    onKeyDown(event) {
-                      if (event.key === 'Enter') {
-                        event.preventDefault()
-                        handleSelect(i)
-                      }
-
-                      if (event.key === ' ' && !isTypingRef.current) {
-                        event.preventDefault()
-                        handleSelect(i)
-                      }
-                    },
-                  })}
-                >
-                  {value}
-                </div>
-              ))}
-            </div>
-          </FloatingFocusManager>
-        </FloatingPortal>
-      )}
-    </>
-  )
-}

package/src/components/renderers/File.tsx

@@ -1,13 +0,0 @@
-import { forwardRef } from 'react'
-import { CommonBlockProps, FileBlock } from '../../types'
-import { DocumentArrowDownIcon } from '@heroicons/react/20/solid'
-
-type Props = CommonBlockProps & FileBlock
-export const File = forwardRef<HTMLAnchorElement, Props>(({ type, title, styles, url, ...props }, ref) => {
-  return (
-    <a {...props} {...styles?.[type]?.container} href={url} download ref={ref}>
-      <p {...styles?.[type]?.title}>{title || url}</p>
-      <DocumentArrowDownIcon {...styles?.[type]?.icon} />
-    </a>
-  )
-})

package/src/components/renderers/Image.tsx

@@ -1,63 +0,0 @@
-import { forwardRef, useEffect, useId, useLayoutEffect, useState } from 'react'
-import { CommonBlockProps, ImageBlock } from '../../types'
-import { useMessageContext } from '../../contexts'
-import { getImageSize } from '../../services'
-
-type Props = CommonBlockProps & ImageBlock
-export const Image = forwardRef<HTMLImageElement, Props>(
-  ({ url, type, styles, orientation = 'auto', ...props }, ref) => {
-    const id = useId()
-    const { setIsLoading } = useMessageContext()
-    const [imageOrientation, setImageOrientation] = useState(orientation)
-    const [loaded, setLoaded] = useState(false)
-
-    useLayoutEffect(() => {
-      setIsLoading((prev) => [...prev, id])
-    }, [])
-
-    useEffect(() => {
-      if (!url) return
-      if (imageOrientation === 'auto') {
-        getImageSize(url).then(({ width, height }) => {
-          setImageOrientation(getClosestAspectRatio(width, height))
-          setIsLoading((prev) => {
-            return prev.filter((currId) => currId !== id)
-          })
-        })
-      }
-    }, [url])
-
-    return (
-      <>
-        {loaded ? null : <div data-orientation={imageOrientation} {...styles?.[type]?.placeholder} />}
-        <img
-          data-orientation={imageOrientation}
-          data-loaded={loaded}
-          {...props}
-          {...styles?.[type]?.image}
-          src={url}
-          alt=""
-          ref={ref}
-          loading="lazy"
-          onLoad={() => {
-            setLoaded(true)
-          }}
-        />
-      </>
-    )
-  }
-)
-
-function getClosestAspectRatio(width: number, height: number) {
-  type aspects = keyof typeof aspects
-  const aspects = {
-    square: 1,
-    portrait: 3 / 4,
-    landscape: 4 / 3,
-  } as const
-  const aspect = width / height
-  const closest = (Object.keys(aspects) as aspects[]).reduce((prev, curr) => {
-    return Math.abs(aspects[curr] - aspect) < Math.abs(aspects[prev] - aspect) ? curr : prev
-  })
-  return closest
-}

package/src/components/renderers/Location.tsx

@@ -1,16 +0,0 @@
-import { forwardRef } from 'react'
-import { CommonBlockProps, LocationBlock } from '../../types'
-import { MapPinIcon } from '@heroicons/react/20/solid'
-
-type Props = CommonBlockProps & LocationBlock
-export const Location = forwardRef<HTMLAnchorElement, Props>(
-  ({ type, latitude, longitude, title, styles, ...props }, ref) => {
-    const link = `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`
-    return (
-      <a {...props} {...styles?.[type]?.container} href={link} type="_blank" rel="noopener" ref={ref}>
-        <p {...styles?.[type]?.title}>{title}</p>
-        <MapPinIcon {...styles?.[type]?.icon} />
-      </a>
-    )
-  }
-)

package/src/components/renderers/Row.tsx

@@ -1,22 +0,0 @@
-import { ComponentProps, forwardRef } from 'react'
-import { RowBlock, CommonBlockProps } from '../../types'
-import { Block } from '../Block'
-
-type Props = CommonBlockProps & RowBlock & ComponentProps<'div'>
-export const Row = forwardRef<HTMLDivElement, Props>(
-  ({ blocks, styles, type, horizontalAlignment, verticalAlignment, ...props }, ref) => {
-    return (
-      <div
-        data-horizontal={horizontalAlignment}
-        data-vertical={verticalAlignment}
-        {...props}
-        {...styles?.[type]}
-        ref={ref}
-      >
-        {blocks.map((block, index) => (
-          <Block key={index} styles={styles} block={block} />
-        ))}
-      </div>
-    )
-  }
-)

package/src/components/renderers/Text.tsx

@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { CommonBlockProps, TextBlock } from '../../types'
-import ReactMarkdown from 'react-markdown'
-
-import { ComponentProps } from 'react'
-
-type Props = CommonBlockProps & TextBlock
-export const Text = ({ text, type, styles }: Props) => {
-  const markdownStyles = styles?.[type]
-
-  const markdownComponents: ComponentProps<typeof ReactMarkdown>['components'] = {
-    h1: ({ node, ...props }) => <h1 {...props} {...markdownStyles?.heading1} />,
-    h2: ({ node, ...props }) => <h2 {...props} {...markdownStyles?.heading2} />,
-    h3: ({ node, ...props }) => <h3 {...props} {...markdownStyles?.heading3} />,
-    h4: 'h3',
-    h5: 'h3',
-    h6: 'h3',
-    em: ({ node, ...props }) => <em {...props} {...markdownStyles?.italic} />,
-    strong: ({ node, ...props }) => <strong {...props} {...markdownStyles?.bold} />,
-    p: ({ node, ...props }) => <p {...props} {...markdownStyles?.text} />,
-    hr: ({ node, ...props }) => <hr {...props} {...markdownStyles?.horizontalRule} />,
-    a: ({ node, ...props }) => <a {...props} {...markdownStyles?.link} />,
-    ol: ({ node, ordered, ...props }) => <ol {...props} {...markdownStyles?.orderedList} />,
-    ul: ({ node, ordered, ...props }) => <ul {...props} {...markdownStyles?.unorderedList} />,
-    li: ({ node, ordered, ...props }) => <li {...props} {...markdownStyles?.listItem} />,
-    br: ({ node, ...props }) => <br {...props} {...markdownStyles?.lineBreak} />,
-    img: () => null,
-    pre: () => null,
-  }
-
-  return <ReactMarkdown components={markdownComponents}>{text}</ReactMarkdown>
-}

package/src/components/renderers/Video.tsx

@@ -1,11 +0,0 @@
-import { forwardRef } from 'react'
-import { CommonBlockProps, VideoBlock } from '../../types'
-
-type Props = CommonBlockProps & VideoBlock
-export const Video = forwardRef<HTMLVideoElement, Props>(({ url, type, styles, ...props }, ref) => {
-  return (
-    <div>
-      <video {...props} controls src={url} {...styles?.[type]} ref={ref} />
-    </div>
-  )
-})

package/src/components/renderers/index.ts

@@ -1,28 +0,0 @@
-import { Text } from './Text'
-import { Button } from './Button'
-import { Bubble } from './Bubble'
-import { Renderers } from '../../contexts'
-import { Image } from './Image'
-import { Video } from './Video'
-import { Audio } from './Audio'
-import { Location } from './Location'
-import { Column } from './Column'
-import { Row } from './Row'
-import { Carousel } from './Carousel'
-import { Dropdown } from './Dropdown'
-import { File } from './File'
-
-export const renderers: Renderers = {
-  text: Text,
-  button: Button,
-  bubble: Bubble,
-  audio: Audio,
-  column: Column,
-  file: File,
-  image: Image,
-  location: Location,
-  row: Row,
-  video: Video,
-  carousel: Carousel,
-  dropdown: Dropdown,
-}

package/src/contexts/ComposerContext.ts

@@ -1,16 +0,0 @@
-import { createContext, useContext } from 'react'
-
-type ComposerContextValue = {
-  value: string
-  setValue: (value: string) => void
-}
-
-export const ComposerContext = createContext<ComposerContextValue | null>(null)
-
-export function useComposerContext() {
-  const context = useContext(ComposerContext)
-  if (!context) {
-    throw new Error('useComposerContext must be used within a Message')
-  }
-  return context
-}

package/src/contexts/MessageContext.ts

@@ -1,16 +0,0 @@
-import { Dispatch, SetStateAction, createContext, useContext } from 'react'
-
-type MessageContextVaue = {
-  isLoading: string[]
-  setIsLoading: Dispatch<SetStateAction<string[]>>
-}
-
-export const MessageContext = createContext<MessageContextVaue | null>(null)
-
-export function useMessageContext() {
-  const context = useContext(MessageContext)
-  if (!context) {
-    throw new Error('useMessageContext must be used within a Message')
-  }
-  return context
-}

package/src/contexts/ModalContext.ts

@@ -1,19 +0,0 @@
-import { ReactNode, createContext, useContext } from 'react'
-
-type ModalContextVaue = {
-  open: boolean
-  showModal: (props: { title: string; content: ReactNode }) => void
-  hideModal: () => void
-  title: string
-  content: ReactNode | null
-}
-
-export const ModalContext = createContext<ModalContextVaue | null>(null)
-
-export function useModalContext() {
-  const context = useContext(ModalContext)
-  if (!context) {
-    throw new Error('useModalContext must be used within a ModalProvider')
-  }
-  return context
-}

package/src/contexts/WebchatContext.ts

@@ -1,61 +0,0 @@
-import { CSSProperties, FC, ReactNode, createContext, useContext } from 'react'
-import type { BlockObject, BlockStyles, MessageObject } from '../types'
-import { EventEmitter, Events } from '../Utils'
-import { Theme } from '../schemas'
-import { type WebchatClient } from '../client'
-
-export type StyleOptions = {
-  className?: string
-  style?: CSSProperties
-}
-
-type DescriptionItem = {
-  title: string
-  link?: string
-}
-
-export type Configuration = {
-  composerPlaceholder?: string
-  botName?: string
-  botAvatar?: string
-  botDescription?: string
-  website?: DescriptionItem
-  email?: DescriptionItem
-  phone?: DescriptionItem
-  privacyPolicy?: DescriptionItem
-  termsOfService?: DescriptionItem
-}
-
-export type Renderers<P extends BlockObject = BlockObject> = {
-  [T in P['type']]: FC<Extract<P, { type: T }> & { styles: BlockStyles }>
-}
-
-export type ModalProps = {
-  title: string | null
-  content: ReactNode | null
-}
-
-type ContextVaue = {
-  theme: Theme
-  renderers: Renderers
-  messages: MessageObject[]
-  eventEmitter: EventEmitter<Events>
-  configuration: Configuration
-  setConfiguration: React.Dispatch<React.SetStateAction<Configuration>>
-  state: {
-    disableComposer: boolean
-  }
-  client: { on: WebchatClient['on']; sendMessage: WebchatClient['sendMessage']; restartConversation: () => void }
-  setState: (state: Partial<ContextVaue['state']>) => void
-  setTheme: (styles: Partial<Theme>) => void // Temporary while I decide how to do the theme switching in dev mode
-}
-
-export const WebchatContext = createContext<ContextVaue | null>(null)
-
-export function useWebchatContext() {
-  const context = useContext(WebchatContext)
-  if (!context) {
-    throw new Error('useWebchatContext must be used within a WebchatProvider')
-  }
-  return context
-}

package/src/contexts/index.ts

@@ -1,4 +0,0 @@
-export * from './ComposerContext'
-export * from './MessageContext'
-export * from './ModalContext'
-export * from './WebchatContext'

package/src/hooks/index.ts

@@ -1,3 +0,0 @@
-export * from './useImageSize'
-export * from './useWebchatStore'
-export * from './useRefresh.ts'

package/src/hooks/useImageSize.ts

@@ -1,30 +0,0 @@
-import { useState, useEffect } from 'react'
-import { getImageSize } from '../services'
-import { Dimensions, Options, UseImageSizeResult } from '../types'
-
-export const useImageSize = (url: string, options?: Options): UseImageSizeResult => {
-  const [dimensions, setDimensions] = useState<Dimensions | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    const fetch = async () => {
-      setLoading(true)
-      setDimensions(null)
-
-      try {
-        const { width, height } = await getImageSize(url, options)
-
-        setDimensions({ width, height })
-      } catch (error: unknown) {
-        setError((error as string).toString())
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetch()
-  }, [url, options])
-
-  return [dimensions, { loading, error }]
-}