@botpress/webchat 0.5.1 → 1.0.0

package/src/themes/dawn.ts

@@ -0,0 +1,277 @@
+import { clsx } from 'clsx'
+import { Theme } from '../schemas'
+import { buildColorPalette, selectGrayFromColor } from '../Utils'
+
+export function buildDawnTheme(color: string): Theme {
+  const { primary, primaryHover, onPrimary, primaryHoverDark, primaryContainer, onPrimaryContainer } =
+    buildColorPalette(color)
+
+  const gray = selectGrayFromColor(color)
+
+  const textBoldColor = `${gray}-900`
+  const textSemiBoldColor = `${gray}-800`
+  const textMediumColor = `${gray}-700`
+  const textLightColor = `${gray}-600`
+  const textExtraLightColor = `${gray}-500`
+  const textPlaceholderColor = `${gray}-400`
+  const focusColor = `${gray}-300`
+  const borderColor = `${gray}-200`
+  const bgLightColor = `${gray}-100`
+  const bgColor = 'white'
+
+  return {
+    container: {
+      className: `w-full bg-${bgColor} h-full border border-${borderColor} rounded-lg flex flex-col @container relative overflow-hidden`,
+    },
+    modal: {
+      container: {
+        className: `absolute inset-0 z-30 flex p-2 pointer-events-none`,
+      },
+      overlay: {
+        className: `absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]`,
+      },
+      dialog: {
+        container: {
+          className: `mx-auto mt-auto rounded-md bg-${bgColor} p-6 text-${textBoldColor} shadow w-full @md:(w-auto mb-auto) pointer-events-auto bg-${color}-500`,
+        },
+        title: {
+          container: {
+            className: `flex items-center justify-between mb-2`,
+          },
+          text: {
+            className: `text-(base ${textBoldColor})`,
+          },
+          closeIcon: {
+            className: `h-5 cursor-pointer text-(${textExtraLightColor} hover:${textMediumColor})`,
+          },
+        },
+        content: {
+          className: `text-sm text-${textLightColor} flex flex-col`,
+        },
+      },
+    },
+    notification: {
+      container: {
+        className: `group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-${borderColor} bg-${bgColor} p-4 shadow-md`,
+      },
+      title: {
+        className: `col-start-2 text-sm font-medium text-${textBoldColor}`,
+      },
+      description: {
+        className: `col-start-2 mt-1 text-sm text-${textExtraLightColor}`,
+      },
+      icon: {
+        className: `aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500`,
+      },
+      closeIcon: {
+        className: `col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer`,
+      },
+    },
+    header: {
+      container: {
+        className: `rounded-t-md p-1 mb-auto group/header flex flex-col shadow bg-[${primary}]`,
+      },
+      content: {
+        container: {
+          className: `grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 text-left transition-colors hover:bg-[${primaryHover}] text-[${onPrimary}]`,
+        },
+        title: { className: `text-base font-medium` },
+        description: {
+          className: `text-sm group-data-[state=closed]/header:hidden col-start-2`,
+        },
+        avatar: {
+          container: {
+            className: `row-span-1 group-data-[state=open]/header:row-span-2 mr-2 p-px pl-2 rounded-full overflow-hidden group-data-[state=open]/header:m-2`,
+          },
+          image: {
+            className: `aspect-square h-8 rounded-full group-data-[state=open]/header:h-12`,
+          },
+          fallback: {
+            className: `bg-${borderColor} flex h-full w-full items-center justify-center rounded-full`,
+          },
+        },
+        actions: {
+          container: {
+            className: `col-start-3 row-span-1 group-data-[state=open]/header:row-span-2 !row-start-1 flex`,
+          },
+          icons: {
+            className: `h-9 w-9 cursor-pointer rounded-md p-2 text-[${onPrimary}]  transition-colors hover:bg-[${primaryHoverDark}]`,
+          },
+        },
+      },
+      expandedContent: {
+        container: {
+          className: `flex justify-center @md:justify-start @md:ml-[5.5rem] gap-4 text-sm items-center group-data-[state=open]/header:py-4`,
+        },
+        descriptionItems: {
+          container: {
+            className: `flex data-[email]:col-span-2 cursor-pointer`,
+          },
+          icon: {
+            className: `mr-3 h-5 w-5 text-[${onPrimary}]`,
+          },
+          text: {
+            className: `hidden`,
+          },
+          link: {
+            className: `hidden`,
+          },
+        },
+      },
+    },
+    composer: {
+      container: {
+        className: `group/composer-container shadow border border-(${bgLightColor} focus-within:${focusColor}) m-2 rounded-md transition-colors flex items-center `,
+      },
+      input: {
+        className: `flex-grow outline-none px-2 m-0.5 rounded-md placeholder-${textPlaceholderColor} text-sm resize-none h-[3em]`,
+      },
+      button: {
+        container: {
+          className: `group-data-[disabled=true]/composer-container:hidden h-11 p-2 rounded-full transition-colors text-([${primary}] hover:[${primaryHover}]) disabled:hidden flex items-center justify-center`,
+        },
+        icon: {
+          className: `h-full w-full`,
+        },
+      },
+    },
+    messageList: {
+      className: `flex flex-col gap-2 p-4 overflow-y-auto overflow-x-hidden scroll-smooth`,
+    },
+    message: {
+      container: {
+        className: clsx(
+          `flex group gap-2 text-sm text-${textMediumColor}`,
+          `data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden`
+        ),
+      },
+      avatar: {
+        container: {
+          className: `relative h-6 w-6 shrink-0 overflow-hidden rounded-full hidden self-end group-data-[direction=incoming]:flex`,
+        },
+        image: {
+          className: `aspect-square h-full w-full`,
+        },
+        fallback: {
+          className: `bg-${borderColor} flex h-full w-full items-center justify-center rounded-full`,
+        },
+      },
+      blocks: {
+        text: {
+          heading1: {
+            className: `text-xl font-medium text-${textBoldColor} group-data-[direction=outgoing]:text-[${onPrimaryContainer}]`,
+          },
+          heading2: {
+            className: `text-lg text-${textBoldColor} group-data-[direction=outgoing]:text-[${onPrimaryContainer}]`,
+          },
+          heading3: {
+            className: `text-base`,
+          },
+          unorderedList: {
+            className: `list-disc list-inside marker:text-${textExtraLightColor} group-data-[direction=outgoing]:marker:text-[${onPrimaryContainer}]`,
+          },
+          orderedList: {
+            className: `list-decimal list-inside marker:text-${textLightColor} group-data-[direction=outgoing]:marker:text-[${onPrimaryContainer}]`,
+          },
+        },
+        button: {
+          className: `bg-[${primary}] rounded-2xl p-1 text-sm px-3 text-[${onPrimary}]  data-[activated]:hidden data-[group-activated]:hidden`,
+        },
+        image: {
+          image: {
+            className: clsx(
+              `border border-${borderColor} rounded-2xl object-cover w-[95%]`,
+              `data-[orientation=landscape]:aspect-[4/3]`,
+              `data-[orientation=portrait]:aspect-[3/4]`,
+              `data-[orientation=square]:aspect-square`,
+              `@xs:w-56`,
+              `data-[loaded=false]:hidden`
+            ),
+          },
+          placeholder: {
+            className: clsx(
+              `border border-${borderColor} rounded-2xl bg-${bgLightColor} animate-pulse`,
+              `data-[orientation=landscape]:aspect-[4/3]`,
+              `data-[orientation=portrait]:aspect-[3/4]`,
+              `data-[orientation=square]:aspect-square`,
+              `@xs:w-56`
+            ),
+          },
+        },
+        video: {
+          className: `border border-${borderColor} rounded-2xl`,
+        },
+        location: {
+          container: {
+            className: `flex gap-2 group items-center p-1`,
+          },
+          title: {
+            className: `text-sm text-[${primaryHover}] font-medium group-hover:underline`,
+          },
+          icon: {
+            className: `h-5 w-5 text-[${primary}]`,
+          },
+        },
+        row: {
+          className: clsx(
+            `flex gap-2 flex-wrap`,
+            `data-[horizontal=center]:justify-center`,
+            `data-[horizontal=right]:justify-end`,
+            `data-[horizontal=stretch]:justify-between`,
+            `data-[vertical=center]:items-center`,
+            `data-[vertical=bottom]:items-end`
+          ),
+        },
+        column: {
+          className: clsx(
+            `flex flex-col gap-2 w-fit group/container`,
+            `data-[horizontal=center]:items-center`,
+            `data-[horizontal=right]:items-end`,
+            `data-[vertical=center]:justify-center`,
+            `data-[vertical=bottom]:justify-end`,
+            `data-[vertical=stretch]:justify-between`
+          ),
+        },
+        bubble: {
+          className: clsx(
+            'rounded-2xl p-2 max-w-[85%]',
+            `group-data-[direction=incoming]:(rounded-bl-sm bg-${bgLightColor} border-${borderColor} text-${textSemiBoldColor})`,
+            `group-data-[direction=outgoing]:(rounded-br-sm text-[${onPrimaryContainer}]) bg-[${primaryContainer}]`
+          ),
+        },
+        carousel: {
+          container: {
+            className: `group relative overflow-hidden`,
+          },
+          slidesContainer: {
+            className: `grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]`,
+          },
+          backButton: {
+            className: clsx(
+              `absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-${textMediumColor} bg-opacity-20 p-0.5 text-${borderColor} shadow transition-all`,
+              `hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-${bgLightColor}) data-[disabled]:hidden`
+            ),
+          },
+          nextButton: {
+            className: clsx(
+              `absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-${textMediumColor} bg-opacity-20 p-0.5 text-${borderColor} shadow transition-all`,
+              `hover:(scale-110 cursor-pointer) group-hover:(bg-opacity-80 text-${bgLightColor}) data-[disabled]:hidden`
+            ),
+          },
+        },
+      },
+    },
+    loadingIndicator: {
+      container: {
+        className: clsx(
+          `flex items-end gap-1.5 border bg-${bgLightColor} border-${borderColor} rounded-lg p-2`,
+          `before:(animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor})`,
+          `after:(animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor} [animation-delay:0.2s])`
+        ),
+      },
+      loader: {
+        className: clsx(`animate-jump h-1.5 w-1.5 rounded-full bg-${textMediumColor} [animation-delay:0.1s]`),
+      },
+    },
+  }
+}

package/src/themes/duskTheme.ts

@@ -0,0 +1,349 @@
+import { Theme } from '../schemas'
+
+import { clsx } from 'clsx'
+
+export const duskTheme: Theme = {
+  container: {
+    className:
+      'w-full h-full border  border-zinc-700 bg-zinc-800 rounded-lg flex flex-col @container relative overflow-hidden font-plex [color-scheme:dark]',
+  },
+  modal: {
+    container: {
+      className: 'absolute inset-0 z-30 flex p-2 pointer-events-none',
+    },
+    overlay: {
+      className: 'absolute inset-0 z-30 bg-black/30 backdrop-blur-[1px]',
+    },
+    dialog: {
+      container: {
+        className:
+          'mx-auto mt-auto rounded-md bg-white p-6 text-zinc-900 shadow w-full @md:w-auto @md:mb-auto pointer-events-auto',
+      },
+      title: {
+        container: {
+          className: 'flex items-center justify-between mb-2',
+        },
+        text: {
+          className: 'text-base text-zinc-900',
+        },
+        closeIcon: {
+          className: ' h-5 cursor-pointer text-zinc-500 hover:text-zinc-700',
+        },
+      },
+      content: {
+        className: 'text-sm text-zinc-600 flex flex-col',
+      },
+    },
+  },
+  notification: {
+    container: {
+      className:
+        'group/toast grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md border border-zinc-200 bg-white p-4 shadow-md',
+    },
+    title: {
+      className: 'col-start-2 text-sm font-medium text-zinc-900',
+    },
+    description: {
+      className: 'col-start-2 mt-1 text-sm text-zinc-500',
+    },
+    icon: {
+      className:
+        'aspect-square h-5 group-data-[type=error]/toast:text-red-500 group-data-[type=success]/toast:text-green-500',
+    },
+    closeIcon: {
+      className: 'col-start-3 row-start-1 aspect-square h-5 hover:cursor-pointer',
+    },
+  },
+  header: {
+    container: {
+      className: 'rounded-t-md p-1 mb-auto group/header flex flex-col shadow border-b border-zinc-700',
+    },
+    content: {
+      container: {
+        className: clsx(
+          'grid grow cursor-pointer grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-md p-1 px-3 text-left transition-colors hover:bg-zinc-700 ',
+          'group-data-[state=open]/header:grid-cols-1',
+          'group-data-[state=open]/header:justify-items-center'
+        ),
+      },
+      title: { className: 'text-base text-zinc-100 py-0.5 font-medium' },
+      description: {
+        className: clsx(
+          'text-sm text-zinc-300 py-0.5',
+          'group-data-[state=closed]/header:truncate',
+          'group-data-[state=closed]/header:col-start-2',
+          'group-data-[state=open]/header:text-center'
+        ),
+      },
+      avatar: {
+        container: {
+          className: clsx(
+            'mr-2 p-px rounded-full overflow-hidden',
+            'group-data-[state=closed]/header:row-span-2',
+            'group-data-[state=open]/header:mt-6',
+            'group-data-[state=open]/header:mb-2'
+          ),
+        },
+        image: {
+          className: 'aspect-square h-8 rounded-full group-data-[state=open]/header:h-16',
+        },
+        fallback: {
+          className: 'bg-zinc-400 flex h-full w-full items-center justify-center rounded-full',
+        },
+      },
+      actions: {
+        container: {
+          className: clsx(
+            'flex',
+            'group-data-[state=closed]/header:col-start-3',
+            'group-data-[state=closed]/header:row-span-2',
+            'group-data-[state=open]/header:hidden',
+            'group-data-[state=closed]/header:!row-start-1'
+          ),
+        },
+        icons: {
+          className: 'h-9 w-9 cursor-pointer rounded-md p-2 text-zinc-300  transition-colors hover:bg-zinc-600 ',
+        },
+      },
+    },
+    expandedContent: {
+      container: {
+        className:
+          'grid grid-cols-[auto_auto] gap-y-2 text-sm items-center group-data-[state=open]/header:py-2 mx-auto ',
+      },
+      descriptionItems: {
+        container: {
+          className: clsx(
+            'flex items-center gap-2 group/description-item peer text-sm text-indigo-100 col-span-2 hover:cursor-pointer relative',
+            'data-[terms]:col-span-1',
+            'data-[terms]:justify-self-end',
+            'data-[terms]:pr-2',
+            'data-[terms]:mt-4',
+            'data-[terms]:text-xs',
+            'data-[terms]:text-indigo-300',
+            'data-[terms]:last-of-type:col-span-full',
+            'data-[terms]:last-of-type:justify-self-center',
+            'data-[privacy]:justify-self-center',
+            'data-[privacy]:col-span-full',
+            'data-[privacy]:mt-4',
+            'data-[privacy]:text-xs',
+            'data-[privacy]:text-indigo-300',
+            'data-[privacy]:peer-data-[terms]:justify-self-start',
+            'data-[privacy]:peer-data-[terms]:col-span-1',
+            'data-[privacy]:peer-data-[terms]:pl-2',
+            'data-[privacy]:peer-data-[terms]:before:absolute',
+            'data-[privacy]:peer-data-[terms]:before:w-px',
+            'data-[privacy]:peer-data-[terms]:before:h-2/3',
+            'data-[privacy]:peer-data-[terms]:before:bg-zinc-300',
+            'data-[privacy]:peer-data-[terms]:before:left-0',
+            'data-[privacy]:peer-data-[terms]:before:bg-indigo-300',
+            'data-[privacy]:peer-data-[terms]:before:inset-auto'
+          ),
+        },
+        icon: {
+          className: clsx(
+            'h-5 text-indigo-200 rounded-full',
+            'group-data-[terms]/description-item:hidden',
+            'group-data-[privacy]/description-item:hidden'
+          ),
+        },
+        text: {
+          className: clsx(
+            'truncate pt-1',
+            'group-data-[terms]/description-item:pt-0',
+            'group-data-[privacy]/description-item:pt-0'
+          ),
+        },
+        link: {
+          className: clsx(
+            'truncate group-hover/description-item:underline pt-1',
+            'group-data-[terms]/description-item:pt-0',
+            'group-data-[privacy]/description-item:pt-0'
+          ),
+        },
+      },
+    },
+    newConversationIcon: {
+      className:
+        'h-9 w-9 text-zinc-500 p-2 cursor-pointer ml-auto hover:text-zinc-700 transition-colors row-span-2 row-start-1 col-start-6',
+    },
+  },
+  composer: {
+    container: {
+      className:
+        'group/composer-container shadow border border-transparent bg-zinc-700 m-2 text-zinc-100 rounded transition-colors flex gap-2 items-center focus-within:border-zinc-500',
+    },
+    input: {
+      className:
+        'flex-grow outline-none bg-inherit px-2 m-3 rounded-md placeholder-zinc-400 text-sm resize-none h-[1.5em]',
+    },
+    button: {
+      container: {
+        className: clsx(
+          'relative transition-colors bg-indigo-300 flex items-center justify-center px-2 py-1 rounded text-sm font-medium text-indigo-900 m-2',
+          'hover:bg-indigo-200 hover:cursor-pointer',
+          'group-data-[disabled=true]/composer-container:hidden',
+          "after:content-['Send']",
+          'disabled:hidden '
+        ),
+      },
+      icon: {
+        className: 'hidden',
+      },
+    },
+  },
+  messageList: {
+    className: 'flex flex-col gap-2 p-2 overflow-y-auto overflow-x-hidden scroll-smooth ',
+  },
+  message: {
+    container: {
+      className: clsx(
+        'flex group gap-2 text-sm text-zinc-100',
+        'data-[direction=incoming]:justify-start data-[direction=outgoing]:justify-end data-[loaded=false]:hidden'
+      ),
+    },
+    avatar: {
+      container: {
+        className:
+          'relative h-7 w-7 shrink-0 overflow-hidden rounded-full hidden q group-data-[direction=incoming]:flex',
+      },
+      image: {
+        className: 'aspect-square h-full w-full',
+      },
+      fallback: {
+        className: 'bg-zinc-200 flex h-full w-full items-center justify-center rounded-full',
+      },
+    },
+    blocks: {
+      text: {
+        heading1: {
+          className: 'text-xl font-medium text-zinc-50 group-data-[direction=outgoing]:text-indigo-100',
+        },
+        heading2: {
+          className: 'text-lg text-zinc-50 group-data-[direction=outgoing]:text-indigo-100',
+        },
+        heading3: {
+          className: 'text-base',
+        },
+        unorderedList: {
+          className:
+            'list-disc list-inside marker:text-zinc-200 group-data-[direction=outgoing]:marker:text-indigo-100',
+        },
+        orderedList: {
+          className:
+            'list-decimal list-inside marker:text-zinc-300 group-data-[direction=outgoing]:marker:text-indigo-100',
+        },
+      },
+      button: {
+        className: clsx(
+          'bg-indigo-300 hover:bg-indigo-200 rounded p-1 text-sm font-medium px-2 text-indigo-800',
+          'data-[activated]:text-indigo-100',
+          'data-[activated]:bg-indigo-500',
+          'data-[activated]:font-normal',
+          'data-[group-activated]:text-zinc-400',
+          'data-[group-activated]:bg-zinc-600',
+          'data-[group-activated]:font-normal'
+        ),
+      },
+      image: {
+        image: {
+          className: clsx(
+            'rounded-2xl object-cover w-[95%]',
+            'data-[orientation=landscape]:aspect-[4/3]',
+            'data-[orientation=portrait]:aspect-[3/4]',
+            'data-[orientation=square]:aspect-square',
+            '@xs:w-56',
+            'data-[loaded=false]:hidden'
+          ),
+        },
+        placeholder: {
+          className: clsx(
+            'border border-zinc-200 rounded-2xl bg-red-300 animate-pulse',
+            'data-[orientation=landscape]:aspect-[4/3]',
+            'data-[orientation=portrait]:aspect-[3/4]',
+            'data-[orientation=square]:aspect-square',
+            '@xs:w-56'
+          ),
+        },
+      },
+      video: {
+        className: 'border border-zinc-200 rounded-2xl',
+      },
+      location: {
+        container: {
+          className: 'flex gap-2 group items-center p-1 bg-zinc-700 py-2 px-4 rounded',
+        },
+        title: {
+          className: 'text-indigo-200 group-hover:underline mt-1',
+        },
+        icon: {
+          className: 'h-5 w-5 text-indigo-400',
+        },
+      },
+      row: {
+        className: clsx(
+          'flex gap-2 flex-wrap',
+          'data-[horizontal=center]:justify-center',
+          'data-[horizontal=right]:justify-end',
+          'data-[horizontal=stretch]:justify-between',
+          'data-[vertical=center]:items-center',
+          'data-[vertical=bottom]:items-end'
+        ),
+      },
+      column: {
+        className: clsx(
+          'flex flex-col gap-2 w-fit group/container',
+          'data-[horizontal=center]:items-center',
+          'data-[horizontal=right]:items-end',
+          'data-[vertical=center]:justify-center',
+          'data-[vertical=bottom]:justify-end',
+          'data-[vertical=stretch]:justify-between'
+        ),
+      },
+      bubble: {
+        className: clsx(
+          'rounded p-2 px-4 max-w-[85%]',
+          'group-data-[direction=outgoing]:bg-indigo-800',
+          'group-data-[direction=outgoing]:text-indigo-100',
+          'group-data-[direction=outgoing]:rounded-br-md',
+          'group-data-[direction=incoming]:rounded-bl-md',
+          'group-data-[direction=incoming]:bg-zinc-700',
+          'group-data-[direction=incoming]:text-zinc-100'
+        ),
+      },
+      carousel: {
+        container: {
+          className: 'group relative overflow-hidden',
+        },
+        slidesContainer: {
+          className:
+            'grid auto-cols-[90%] grid-flow-col gap-x-2 object-cover px-2 @md:auto-cols-max [&>*]:max-w-[26rem]',
+        },
+        backButton: {
+          className: clsx(
+            'absolute left-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-zinc-700 bg-opacity-20 p-0.5 text-zinc-200 shadow transition-all',
+            'hover:scale-110 hover:cursor-pointer group-hover:bg-opacity-80 group-hover:text-zinc-100 data-[disabled]:hidden'
+          ),
+        },
+        nextButton: {
+          className: clsx(
+            'absolute right-1 top-1/2 h-7 -translate-y-1/2 rounded-full bg-zinc-700 bg-opacity-20 p-0.5 text-zinc-200 shadow transition-all',
+            'hover:scale-110 hover:cursor-pointer group-hover:bg-opacity-80 group-hover:text-zinc-100 data-[disabled]:hidden'
+          ),
+        },
+      },
+    },
+  },
+  loadingIndicator: {
+    container: {
+      className: clsx(
+        'flex items-end gap-1.5 bg-zinc-700 rounded p-2',
+        'before:(animate-jump h-1.5 w-1.5 rounded-full bg-zinc-400)',
+        'after:(animate-jump h-1.5 w-1.5 rounded-full bg-zinc-400 [animation-delay:0.2s])'
+      ),
+    },
+    loader: {
+      className: clsx('animate-jump h-1.5 w-1.5 rounded-full bg-zinc-400 [animation-delay:0.1s]'),
+    },
+  },
+}