@botpress/webchat 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/package.json +2 -1
  2. package/dist/vite.svg +0 -1
  3. package/index.html +0 -18
  4. package/public/vite.svg +0 -1
  5. package/src/App.tsx +0 -41
  6. package/src/Utils/colors.ts +0 -45
  7. package/src/Utils/eventEmitter.ts +0 -31
  8. package/src/Utils/index.ts +0 -2
  9. package/src/assets/check-circle-bold.svg +0 -5
  10. package/src/assets/chevron-up.svg +0 -3
  11. package/src/assets/file-05.svg +0 -6
  12. package/src/assets/globe-02.svg +0 -6
  13. package/src/assets/help-circle.svg +0 -3
  14. package/src/assets/info-circle.svg +0 -3
  15. package/src/assets/lock-01.svg +0 -4
  16. package/src/assets/mail-01.svg +0 -6
  17. package/src/assets/minus-circle.svg +0 -3
  18. package/src/assets/phone.svg +0 -6
  19. package/src/assets/send-03.svg +0 -4
  20. package/src/assets/share-04.svg +0 -5
  21. package/src/assets/slash-circle-01.svg +0 -3
  22. package/src/assets/x-circle-bold.svg +0 -5
  23. package/src/assets/x-close.svg +0 -3
  24. package/src/assets/x.svg +0 -3
  25. package/src/client/MessagingClient.ts +0 -87
  26. package/src/client/adapters/Audio.ts +0 -10
  27. package/src/client/adapters/Card.ts +0 -104
  28. package/src/client/adapters/Carousel.ts +0 -11
  29. package/src/client/adapters/Choice.ts +0 -48
  30. package/src/client/adapters/Dropdown.ts +0 -39
  31. package/src/client/adapters/File.ts +0 -10
  32. package/src/client/adapters/Image.ts +0 -10
  33. package/src/client/adapters/Location.ts +0 -18
  34. package/src/client/adapters/Message.ts +0 -26
  35. package/src/client/adapters/Text.ts +0 -11
  36. package/src/client/adapters/Utils.ts +0 -11
  37. package/src/client/adapters/Video.ts +0 -10
  38. package/src/client/adapters/Voice.ts +0 -9
  39. package/src/client/adapters/index.ts +0 -12
  40. package/src/client/index.ts +0 -2
  41. package/src/components/Avatar.tsx +0 -22
  42. package/src/components/Block.tsx +0 -17
  43. package/src/components/Composer.tsx +0 -115
  44. package/src/components/Container.tsx +0 -17
  45. package/src/components/Header.tsx +0 -141
  46. package/src/components/LoadingIndicator.tsx +0 -15
  47. package/src/components/Message.tsx +0 -52
  48. package/src/components/MessageList.tsx +0 -75
  49. package/src/components/Modal.tsx +0 -49
  50. package/src/components/RestartConversation.tsx +0 -52
  51. package/src/components/Webchat.tsx +0 -68
  52. package/src/components/dev-tools/DevTools.tsx +0 -496
  53. package/src/components/dev-tools/configuration.tsx +0 -27
  54. package/src/components/dev-tools/helpers.ts +0 -21
  55. package/src/components/index.ts +0 -12
  56. package/src/components/renderers/Audio.tsx +0 -11
  57. package/src/components/renderers/Bubble.tsx +0 -12
  58. package/src/components/renderers/Button.tsx +0 -59
  59. package/src/components/renderers/Carousel.tsx +0 -51
  60. package/src/components/renderers/Column.tsx +0 -22
  61. package/src/components/renderers/Dropdown.tsx +0 -170
  62. package/src/components/renderers/File.tsx +0 -13
  63. package/src/components/renderers/Image.tsx +0 -63
  64. package/src/components/renderers/Location.tsx +0 -16
  65. package/src/components/renderers/Row.tsx +0 -22
  66. package/src/components/renderers/Text.tsx +0 -32
  67. package/src/components/renderers/Video.tsx +0 -11
  68. package/src/components/renderers/index.ts +0 -28
  69. package/src/contexts/ComposerContext.ts +0 -16
  70. package/src/contexts/MessageContext.ts +0 -16
  71. package/src/contexts/ModalContext.ts +0 -19
  72. package/src/contexts/WebchatContext.ts +0 -61
  73. package/src/contexts/index.ts +0 -4
  74. package/src/hooks/index.ts +0 -3
  75. package/src/hooks/useImageSize.ts +0 -30
  76. package/src/hooks/useRefresh.ts +0 -33
  77. package/src/hooks/useWebchatStore.ts +0 -45
  78. package/src/index.css +0 -18
  79. package/src/index.ts +0 -3
  80. package/src/main.tsx +0 -33
  81. package/src/providers/ModalProvider.tsx +0 -35
  82. package/src/providers/WebchatProvider.tsx +0 -107
  83. package/src/providers/index.ts +0 -2
  84. package/src/schemas/index.ts +0 -1
  85. package/src/schemas/theme.ts +0 -188
  86. package/src/services/clipboard.ts +0 -8
  87. package/src/services/images.ts +0 -39
  88. package/src/services/index.ts +0 -3
  89. package/src/services/toast.tsx +0 -71
  90. package/src/themes/dawn.ts +0 -277
  91. package/src/themes/duskTheme.ts +0 -349
  92. package/src/themes/eggplant.ts +0 -353
  93. package/src/themes/galaxy.ts +0 -323
  94. package/src/themes/index.ts +0 -6
  95. package/src/themes/midnight.ts +0 -276
  96. package/src/themes/prism.ts +0 -349
  97. package/src/twind.config.ts +0 -31
  98. package/src/types/block-type.ts +0 -150
  99. package/src/types/image.ts +0 -10
  100. package/src/types/index.ts +0 -2
  101. package/src/vite-env.d.ts +0 -1
  102. package/tailwind.config.js +0 -0
  103. package/tsconfig.json +0 -30
  104. package/tsconfig.node.json +0 -10
  105. package/vite.config.ts +0 -31
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@botpress/webchat",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "type": "module",
5
+ "license": "MIT",
5
6
  "main": "./dist/index.umd.cjs",
6
7
  "module": "./dist/index.js",
7
8
  "exports": {
package/dist/vite.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/index.html DELETED
@@ -1,18 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="preconnect" href="https://fonts.googleapis.com" />
6
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7
- <link
8
- href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
9
- rel="stylesheet"
10
- />
11
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12
- <title>Echo</title>
13
- </head>
14
- <body>
15
- <div id="root"></div>
16
- <script type="module" src="/src/main.tsx"></script>
17
- </body>
18
- </html>
package/public/vite.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/App.tsx DELETED
@@ -1,41 +0,0 @@
1
- /// <reference types="vite-plugin-svgr/client" />
2
-
3
- import { GlobeAltIcon } from '@heroicons/react/24/outline'
4
- import { DocumentTextIcon, EnvelopeIcon, LockClosedIcon, PhoneIcon } from '@heroicons/react/24/solid'
5
- import { ComponentProps } from 'react'
6
- import { Toaster } from 'react-hot-toast'
7
- import { WebchatClient } from './client'
8
- import {
9
- Composer,
10
- ComposerButton,
11
- ComposerInput,
12
- Container,
13
- Header,
14
- MessageList,
15
- RestartConversation,
16
- Webchat,
17
- } from './components'
18
- import { WebchatProvider } from './providers'
19
- import { Theme } from './schemas'
20
- import { DevTools } from './components/dev-tools/DevTools'
21
- import { defaultConfiguration } from './components/dev-tools/configuration'
22
- // import { getSheet, stringify } from '@twind/core'
23
- // import { twObject } from './main'
24
-
25
- type Props = {
26
- theme: Theme
27
- client: WebchatClient
28
- } & ComponentProps<typeof Container>
29
-
30
- export const App = ({ theme, client }: Props) => {
31
- return (
32
- <WebchatProvider client={client} styles={theme} configuration={defaultConfiguration}>
33
- {(configuration) => (
34
- <>
35
- <DevTools />
36
- <Webchat configuration={configuration} />
37
- </>
38
- )}
39
- </WebchatProvider>
40
- )
41
- }
@@ -1,45 +0,0 @@
1
- import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities'
2
- import convert from 'color-convert'
3
- import colors from 'tailwindcss/colors'
4
-
5
- export function buildColorPalette(color: string, theme: 'light' | 'dark' = 'light') {
6
- const {
7
- palettes: { primary: primaryPalette, secondary: secondaryPalette },
8
- schemes,
9
- } = themeFromSourceColor(argbFromHex(color))
10
-
11
- const scheme = schemes[theme]
12
-
13
- return {
14
- primary: hexFromArgb(scheme.primary),
15
- primaryHover: hexFromArgb(primaryPalette.tone(theme === 'light' ? 30 : 90)),
16
- primaryHoverDark: hexFromArgb(primaryPalette.tone(theme === 'light' ? 20 : 95)),
17
- onPrimary: hexFromArgb(scheme.onPrimary),
18
- primaryContainer: hexFromArgb(scheme.primaryContainer),
19
- primaryContainerHover: hexFromArgb(primaryPalette.tone(theme === 'light' ? 80 : 40)),
20
- onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
21
- secondary: hexFromArgb(scheme.secondary),
22
- secondaryHover: hexFromArgb(secondaryPalette.tone(theme === 'light' ? 30 : 90)),
23
- onSecondary: hexFromArgb(scheme.onSecondary),
24
- secondaryContainer: hexFromArgb(scheme.secondaryContainer),
25
- secondaryContainerHover: hexFromArgb(secondaryPalette.tone(theme === 'light' ? 80 : 40)),
26
- onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
27
- }
28
- }
29
-
30
- type Grays = 'gray' | 'stone' | 'slate' | 'zinc' | 'neutral'
31
- export function selectGrayFromColor(color: string, omit?: Grays[]) {
32
- const [primaryHue, ,] = convert.hex.hsl(color)
33
-
34
- const grays: { name: Grays; HSL: [number, number, number] }[] = [
35
- { name: 'gray' as const, HSL: convert.hex.hsl(colors.gray[500]) },
36
- { name: 'stone' as const, HSL: convert.hex.hsl(colors.stone[500]) },
37
- { name: 'slate' as const, HSL: convert.hex.hsl(colors.slate[500]) },
38
- { name: 'zinc' as const, HSL: convert.hex.hsl(colors.zinc[500]) },
39
- { name: 'neutral' as const, HSL: convert.hex.hsl(colors.neutral[500]) },
40
- ].filter((gray) => !omit?.includes(gray.name))
41
-
42
- const hueDiffs = grays.map((gray) => Math.abs(gray.HSL[0] - primaryHue))
43
- const closestHueIndex = hueDiffs.indexOf(Math.min(...hueDiffs))
44
- return grays[closestHueIndex].name
45
- }
@@ -1,31 +0,0 @@
1
- type CallbackFn<T> = (args: T) => void
2
-
3
- export class EventEmitter<T extends Record<string, any>> {
4
- private readonly eventMap: Partial<Record<keyof T, Set<CallbackFn<any>>>>
5
-
6
- constructor() {
7
- this.eventMap = {}
8
- }
9
-
10
- on<U extends keyof T>(event: U, callback: CallbackFn<T[U]>): () => void {
11
- if (!this.eventMap[event]) {
12
- this.eventMap[event] = new Set<CallbackFn<T[U]>>()
13
- }
14
- this.eventMap[event]?.add(callback)
15
-
16
- return () => {
17
- this.eventMap[event]?.delete(callback)
18
- }
19
- }
20
-
21
- emit<U extends keyof T>(event: U, arg?: T[U]): void {
22
- this.eventMap[event]?.forEach((callback) => {
23
- callback(arg)
24
- })
25
- }
26
- }
27
-
28
- export type Events = {
29
- [key: string]: undefined
30
- }
31
- export const eventEmitter = new EventEmitter<Events>()
@@ -1,2 +0,0 @@
1
- export * from './colors'
2
- export * from './eventEmitter'
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"
2
- stroke-width="1.5">
3
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
4
- d="m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" />
5
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m18 15-6-6-6 6" />
3
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"
2
- stroke-width="1.5"
3
- >
4
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
5
- d="M14 2.27V6.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437c.214.11.494.11 1.054.11h4.13M14 17H8m8-4H8m12-3.012V17.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C17.72 22 16.88 22 15.2 22H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 19.72 4 18.88 4 17.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 2 7.12 2 8.8 2h3.212c.733 0 1.1 0 1.446.083.306.073.598.195.867.36.303.185.562.444 1.08.963l3.19 3.188c.518.519.777.778.963 1.081a3 3 0 0 1 .36.867c.082.346.082.712.082 1.446Z" />
6
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="18" stroke-width="1.5" height="18" fill="none"
2
- viewBox="0 0 18 18"
3
- >
4
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
5
- d="M9 .667A12.75 12.75 0 0 1 12.333 9 12.75 12.75 0 0 1 9 17.333M9 .667A12.75 12.75 0 0 0 5.667 9 12.75 12.75 0 0 0 9 17.333M9 .667a8.333 8.333 0 0 0 0 16.666M9 .667a8.333 8.333 0 0 1 0 16.666M1.083 6.5h15.834m-15.834 5h15.834" />
6
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
3
- d="M17 10V8A5 5 0 0 0 7 8v2m5 4.5v2M8.8 21h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 18.72 20 17.88 20 16.2v-1.4c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C17.72 10 16.88 10 15.2 10H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C4 12.28 4 13.12 4 14.8v1.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C6.28 21 7.12 21 8.8 21Z" />
4
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" width="18" height="16" fill="none"
2
- viewBox="0 0 18 16"
3
- >
4
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
5
- d="M.667 3.833 7.47 8.596c.55.386.826.579 1.126.653.265.066.541.066.806 0 .3-.074.575-.267 1.126-.653l6.804-4.763M4.667 14.667h8.666c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092c.272-.535.272-1.235.272-2.635V5.333c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.092c-.534-.273-1.235-.273-2.635-.273H4.667c-1.4 0-2.1 0-2.635.273A2.5 2.5 0 0 0 .939 2.698C.667 3.233.667 3.933.667 5.333v5.334c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092c.534.273 1.234.273 2.635.273Z" />
6
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 12h8m6 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
3
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" width="18" height="18" fill="none"
2
- viewBox="0 0 18 18"
3
- >
4
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
5
- d="M5.984 6.378c.58 1.208 1.37 2.34 2.372 3.341a12.17 12.17 0 0 0 3.341 2.372c.104.05.156.075.222.094a.87.87 0 0 0 .718-.122c.056-.04.103-.088.199-.183.29-.291.437-.437.583-.532a1.667 1.667 0 0 1 1.817 0c.146.095.292.24.584.532l.162.162c.443.443.664.665.785.903a1.667 1.667 0 0 1 0 1.504c-.12.238-.342.46-.785.902l-.131.131c-.442.442-.662.663-.963.831-.332.187-.85.322-1.231.32-.344 0-.58-.067-1.05-.2a15.866 15.866 0 0 1-6.903-4.062 15.866 15.866 0 0 1-4.061-6.903c-.134-.47-.2-.706-.202-1.05a2.814 2.814 0 0 1 .32-1.232c.17-.3.39-.52.831-.962l.132-.131c.443-.443.664-.664.902-.785a1.667 1.667 0 0 1 1.504 0c.238.12.46.342.902.785l.163.162c.291.292.437.437.532.584.36.552.36 1.264 0 1.817-.095.146-.24.292-.532.583a1.682 1.682 0 0 0-.183.199.872.872 0 0 0-.122.718c.019.066.044.118.094.222Z" />
6
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
3
- d="M10.5 12H5m-.084.291L2.58 19.267c-.184.548-.275.822-.21.99a.5.5 0 0 0 .332.3c.174.05.438-.07.965-.306l16.711-7.52c.515-.232.772-.348.851-.508a.5.5 0 0 0 0-.444c-.08-.16-.336-.276-.85-.508L3.661 3.748c-.525-.237-.788-.355-.962-.306a.5.5 0 0 0-.332.299c-.066.168.025.442.206.988l2.342 7.057c.032.094.047.14.053.188a.5.5 0 0 1 0 .129c-.006.048-.022.095-.053.188Z" />
4
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"
2
- >
3
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
4
- d="M15.5 5.5v-5m0 0h-5m5 0L8.833 7.167m-2.5-5H4.5c-1.4 0-2.1 0-2.635.272A2.5 2.5 0 0 0 .772 3.532C.5 4.066.5 4.767.5 6.167V11.5c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.092C2.4 15.5 3.1 15.5 4.5 15.5h5.333c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.093-1.092c.272-.535.272-1.235.272-2.635V9.667" />
5
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4.93 4.93 14.14 14.14M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"/>
3
- </svg>
@@ -1,5 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"
2
- stroke-width="1.5">
3
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
4
- d="m15 9-6 6m0-6 6 6m7-3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" />
5
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18 6 6 18M6 6l12 12"/>
3
- </svg>
package/src/assets/x.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
2
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17 7 7 17M7 7l10 10"/>
3
- </svg>
@@ -1,87 +0,0 @@
1
- import {
2
- MessagingSocket,
3
- type MessagingSocketOptions,
4
- type UserCredentials,
5
- type Message,
6
- } from '@botpress/messaging-socket'
7
- import { EventEmitter } from '../Utils'
8
-
9
- type Events = {
10
- connect: UserCredentials
11
- disconnect: undefined
12
- user: string | undefined
13
- conversation: string | undefined
14
- message: Message
15
- messageSent: string
16
- startTyping: undefined
17
- stopTyping: undefined
18
- }
19
- export class WebchatClient {
20
- private socket: MessagingSocket
21
- public userId: string | undefined
22
- private conversationId: string | undefined
23
- private userToken: string | undefined
24
- private connected = false
25
- private readonly emitter: EventEmitter<Events>
26
- public on: EventEmitter<Events>['on']
27
-
28
- constructor(options: MessagingSocketOptions) {
29
- this.socket = new MessagingSocket(options)
30
- this.emitter = new EventEmitter()
31
-
32
- this.on = this.emitter.on.bind(this.emitter)
33
-
34
- this.socket.on('connect', (event) => {
35
- this.emitter.emit('connect', event)
36
- })
37
-
38
- this.socket.on('disconnect', (event) => {
39
- this.emitter.emit('disconnect', event)
40
- })
41
-
42
- this.socket.on('message', (message) => {
43
- this.emitter.emit('message', message)
44
- })
45
-
46
- this.socket.on('conversation', (conversation) => {
47
- this.emitter.emit('conversation', conversation)
48
- })
49
- this.socket.on('user', (user) => {
50
- this.emitter.emit('user', user)
51
- })
52
- }
53
-
54
- public async connect(creds?: UserCredentials) {
55
- if (this.connected) {
56
- return
57
- }
58
- this.connected = true
59
- const user = await this.socket.connect(creds).catch((err) => {
60
- this.connected = false
61
- throw err
62
- })
63
- this.userId = user.userId
64
- this.userToken = user.userToken
65
-
66
- return user
67
- }
68
-
69
- public async disconnect() {
70
- await this.socket.disconnect()
71
- this.connected = false
72
- }
73
-
74
- public async sendMessage(message: string) {
75
- if (!this.conversationId) {
76
- await this.newConversation()
77
- }
78
-
79
- await this.socket.sendText(message)
80
- this.emitter.emit('messageSent', message)
81
- }
82
-
83
- public async newConversation() {
84
- const { id } = await this.socket.createConversation()
85
- this.conversationId = id
86
- }
87
- }
@@ -1,10 +0,0 @@
1
- import { z } from 'zod'
2
- import { AudioBlock } from '../../types'
3
-
4
- export const AudioSchema = z
5
- .object({
6
- type: z.literal('audio'),
7
- audio: z.string(),
8
- title: z.string().optional(),
9
- })
10
- .transform<AudioBlock>(({ type, audio }) => ({ type, url: audio }))
@@ -1,104 +0,0 @@
1
- import { z } from 'zod'
2
- import { ButtonBlock, ColumnBlock, ImageBlock, TextBlock } from '../../types'
3
- import { WithBubble, withBubble } from './Utils'
4
-
5
- const ActionSaySomethingSchema = z
6
- .object({
7
- title: z.string(),
8
- action: z.literal('Say something'),
9
- text: z.string(),
10
- })
11
- .transform<ButtonBlock>(({ title, text }) => ({
12
- type: 'button',
13
- variant: 'action',
14
- text: title,
15
- buttonValue: text,
16
- reusable: true,
17
- }))
18
-
19
- const ActionOpenURLSchema = z
20
- .object({
21
- title: z.string(),
22
- action: z.literal('Open URL'),
23
- url: z.string(),
24
- })
25
- .transform<ButtonBlock>(({ title, url }) => ({
26
- type: 'button',
27
- variant: 'link',
28
- text: title,
29
- buttonValue: url,
30
- reusable: true,
31
- }))
32
-
33
- const ActionPostbackSchema = z
34
- .object({
35
- title: z.string(),
36
- action: z.literal('Postback'),
37
- payload: z.string(),
38
- })
39
- .transform<ButtonBlock>(({ title, payload }) => ({
40
- type: 'button',
41
- variant: 'action',
42
- text: title,
43
- buttonValue: payload,
44
- reusable: true,
45
- }))
46
-
47
- const ActionButtonSchema = z.union([ActionSaySomethingSchema, ActionOpenURLSchema, ActionPostbackSchema])
48
-
49
- export type CardBlockType = { blocks: CardBlocks } & Omit<ColumnBlock, 'blocks'>
50
- type CardBlocks = (ImageBlock | TextBlock | { type: 'row'; blocks: ButtonBlock[] })[]
51
-
52
- export const BaseCardSchema = z.object({
53
- type: z.literal('card'),
54
- title: z.string().optional(),
55
- subtitle: z.string().optional(),
56
- image: z.string().optional(),
57
- actions: z.array(ActionButtonSchema),
58
- })
59
-
60
- export const CardSchemaTransform = ({
61
- title,
62
- image,
63
- actions,
64
- subtitle,
65
- }: Omit<z.infer<typeof BaseCardSchema>, 'type'>): CardBlockType => {
66
- const cardBlocks: CardBlocks = []
67
-
68
- if (image) {
69
- cardBlocks.push({
70
- type: 'image',
71
- url: image,
72
- })
73
- }
74
-
75
- if (title) {
76
- cardBlocks.push({
77
- type: 'text',
78
- text: `## ${title}`,
79
- })
80
- }
81
- if (subtitle) {
82
- cardBlocks.push({
83
- type: 'text',
84
- text: subtitle,
85
- })
86
- }
87
-
88
- if (actions.length > 0) {
89
- cardBlocks.push({
90
- type: 'row',
91
- blocks: actions,
92
- })
93
- }
94
-
95
- return {
96
- type: 'column',
97
- horizontalAlignment: 'center',
98
- blocks: [...cardBlocks],
99
- }
100
- }
101
-
102
- export const CardSchema = BaseCardSchema.transform<WithBubble<CardBlockType>>((card) =>
103
- withBubble(CardSchemaTransform(card))
104
- )
@@ -1,11 +0,0 @@
1
- import { z } from 'zod'
2
- import { BaseCardSchema, CardBlockType, CardSchemaTransform } from './Card'
3
- import { CarouselBlock } from '../../types'
4
-
5
- type CarouselBlockType = { blocks: CardBlockType[] } & Omit<CarouselBlock, 'blocks'>
6
- export const CarouselSchema = z
7
- .object({
8
- type: z.literal('carousel'),
9
- items: z.array(BaseCardSchema.omit({ type: true }).transform<CardBlockType>(CardSchemaTransform)),
10
- })
11
- .transform<CarouselBlockType>(({ items }) => ({ type: 'carousel', blocks: items }))
@@ -1,48 +0,0 @@
1
- import { z } from 'zod'
2
- import { v4 } from 'uuid'
3
- import { ButtonBlock, ColumnBlock, RowBlock, TextBlock } from '../../types'
4
- import { WithBubble, withBubble } from './Utils'
5
-
6
- //TODO: Fix choice title that will not show up
7
- type ButtonBlocks = { blocks: ButtonBlock[] } & Omit<RowBlock, 'blocks'>
8
-
9
- type ChoiceBlockType = { blocks: (ButtonBlocks | TextBlock)[] } & Omit<ColumnBlock, 'blocks'>
10
- export const ChoiceSchema = z
11
- .object({
12
- type: z.literal('single-choice'),
13
- text: z.string(),
14
- choices: z.array(
15
- z.object({
16
- title: z.string(),
17
- value: z.string(),
18
- })
19
- ),
20
- })
21
- .transform<WithBubble<ChoiceBlockType>>(({ choices, text }) => {
22
- const groupId = v4()
23
-
24
- const blocks: (ButtonBlocks | TextBlock)[] = [
25
- {
26
- type: 'row',
27
- blocks: choices.map(({ title, value }) => ({
28
- type: 'button',
29
- variant: 'action',
30
- text: title,
31
- buttonValue: value,
32
- groupId,
33
- })),
34
- },
35
- ]
36
-
37
- if (text) {
38
- blocks.unshift({
39
- type: 'text',
40
- text,
41
- })
42
- }
43
-
44
- return withBubble({
45
- type: 'column',
46
- blocks,
47
- })
48
- })
@@ -1,39 +0,0 @@
1
- import { z } from 'zod'
2
- import { v4 } from 'uuid'
3
- import { ButtonBlock, ColumnBlock, DropdownBlock, RowBlock, TextBlock } from '../../types'
4
- import { WithBubble, withBubble } from './Utils'
5
-
6
- type DropdownBlockType = { blocks: (DropdownBlock | TextBlock)[] } & Omit<ColumnBlock, 'blocks'>
7
- export const DropdownSchema = z
8
- .object({
9
- type: z.literal('dropdown'),
10
- text: z.string().optional(),
11
- message: z.string().optional(),
12
- options: z.array(
13
- z.object({
14
- label: z.string(),
15
- value: z.string(),
16
- })
17
- ),
18
- })
19
- .transform<WithBubble<DropdownBlockType>>(({ options, text }) => {
20
- const blocks: (DropdownBlock | TextBlock)[] = [
21
- {
22
- type: 'dropdown',
23
- label: text ?? 'Select an option',
24
- options,
25
- },
26
- ]
27
-
28
- if (text) {
29
- blocks.unshift({
30
- type: 'text',
31
- text,
32
- })
33
- }
34
-
35
- return withBubble({
36
- type: 'column',
37
- blocks,
38
- })
39
- })
@@ -1,10 +0,0 @@
1
- import { z } from 'zod'
2
- import { FileBlock } from '../../types'
3
-
4
- export const FileSchema = z
5
- .object({
6
- type: z.literal('file'),
7
- file: z.string(),
8
- title: z.string().optional(),
9
- })
10
- .transform<FileBlock>(({ file, ...props }) => ({ url: file, ...props }))
@@ -1,10 +0,0 @@
1
- import { z } from 'zod'
2
- import { ImageBlock } from '../../types'
3
-
4
- export const ImageSchema = z
5
- .object({
6
- type: z.literal('image'),
7
- image: z.string(),
8
- title: z.string().optional(),
9
- })
10
- .transform<ImageBlock>(({ type, image }) => ({ type, url: image }))
@@ -1,18 +0,0 @@
1
- import { z } from 'zod'
2
- import { LocationBlock } from '../../types'
3
-
4
- //TODO: Decide what to do with title and address and fix ui when they are empty
5
- export const LocationSchema = z
6
- .object({
7
- type: z.literal('location'),
8
- latitude: z.number(),
9
- longitude: z.number(),
10
- address: z.string().optional(),
11
- title: z.string().optional(),
12
- })
13
- .transform<LocationBlock>(({ type, latitude, longitude, title, address }) => ({
14
- type,
15
- latitude,
16
- longitude,
17
- title: title ?? address ?? 'View on map',
18
- }))
@@ -1,26 +0,0 @@
1
- import { z } from 'zod'
2
- import { TextSchema } from './Text'
3
- import { ImageSchema } from './Image'
4
- import { AudioSchema } from './Audio'
5
- import { VideoSchema } from './Video'
6
- import { CarouselSchema } from './Carousel'
7
- import { CardSchema } from './Card'
8
- import { LocationSchema } from './Location'
9
- import { FileSchema } from './File'
10
- import { ChoiceSchema } from './Choice'
11
- import { VoiceSchema } from './Voice'
12
- import { DropdownSchema } from './Dropdown.ts'
13
-
14
- export const MessageContentSchema = z.union([
15
- TextSchema,
16
- ImageSchema,
17
- AudioSchema,
18
- VideoSchema,
19
- CarouselSchema,
20
- CardSchema,
21
- LocationSchema,
22
- FileSchema,
23
- VoiceSchema,
24
- ChoiceSchema,
25
- DropdownSchema,
26
- ])