@botpress/webchat 0.5.0 → 1.0.0

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 (295) hide show
  1. package/dist/App.d.ts +10 -0
  2. package/dist/Utils/colors.d.ts +18 -0
  3. package/dist/Utils/eventEmitter.d.ts +12 -0
  4. package/dist/Utils/index.d.ts +2 -0
  5. package/dist/client/MessagingClient.d.ts +27 -0
  6. package/dist/client/adapters/Audio.d.ts +19 -0
  7. package/dist/client/adapters/Card.d.ts +188 -0
  8. package/dist/client/adapters/Carousel.d.ts +147 -0
  9. package/dist/client/adapters/Choice.d.ts +45 -0
  10. package/dist/client/adapters/Dropdown.d.ts +46 -0
  11. package/dist/client/adapters/File.d.ts +19 -0
  12. package/dist/client/adapters/Image.d.ts +19 -0
  13. package/dist/client/adapters/Location.d.ts +27 -0
  14. package/dist/client/adapters/Message.d.ts +433 -0
  15. package/dist/client/adapters/Text.d.ts +20 -0
  16. package/dist/client/adapters/Utils.d.ts +5 -0
  17. package/dist/client/adapters/Video.d.ts +19 -0
  18. package/dist/client/adapters/Voice.d.ts +15 -0
  19. package/dist/client/adapters/index.d.ts +12 -0
  20. package/dist/client/index.d.ts +2 -0
  21. package/dist/components/Avatar.d.ts +6 -0
  22. package/dist/components/Block.d.ts +4 -0
  23. package/dist/components/Composer.d.ts +12 -14
  24. package/dist/components/Container.d.ts +2 -12
  25. package/dist/components/Header.d.ts +36 -26
  26. package/dist/components/LoadingIndicator.d.ts +2 -0
  27. package/dist/components/Message.d.ts +7 -0
  28. package/dist/components/MessageList.d.ts +2 -0
  29. package/dist/components/Modal.d.ts +17 -0
  30. package/dist/components/RestartConversation.d.ts +5 -0
  31. package/dist/components/Webchat.d.ts +6 -0
  32. package/dist/components/dev-tools/DevTools.d.ts +1 -0
  33. package/dist/components/dev-tools/configuration.d.ts +2 -0
  34. package/dist/components/dev-tools/helpers.d.ts +5 -0
  35. package/dist/components/index.d.ts +12 -0
  36. package/dist/components/renderers/Audio.d.ts +3 -0
  37. package/dist/components/renderers/Bubble.d.ts +5 -0
  38. package/dist/components/renderers/Button.d.ts +4 -0
  39. package/dist/components/renderers/Carousel.d.ts +3 -0
  40. package/dist/components/renderers/Column.d.ts +5 -0
  41. package/dist/components/renderers/Dropdown.d.ts +5 -0
  42. package/dist/components/renderers/File.d.ts +3 -0
  43. package/dist/components/renderers/Image.d.ts +3 -0
  44. package/dist/components/renderers/Location.d.ts +3 -0
  45. package/dist/components/renderers/Row.d.ts +5 -0
  46. package/dist/components/renderers/Text.d.ts +4 -0
  47. package/dist/components/renderers/Video.d.ts +3 -0
  48. package/dist/components/renderers/index.d.ts +2 -0
  49. package/dist/contexts/ComposerContext.d.ts +8 -0
  50. package/dist/contexts/MessageContext.d.ts +8 -0
  51. package/dist/contexts/ModalContext.d.ts +14 -0
  52. package/dist/contexts/WebchatContext.d.ts +56 -0
  53. package/dist/contexts/index.d.ts +4 -0
  54. package/dist/hooks/index.d.ts +3 -0
  55. package/dist/hooks/useImageSize.d.ts +2 -0
  56. package/dist/hooks/useRefresh.d.ts +10 -0
  57. package/dist/hooks/useWebchatStore.d.ts +30 -0
  58. package/dist/index.d.ts +3 -17
  59. package/dist/index.js +43569 -48
  60. package/dist/index.umd.cjs +702 -0
  61. package/dist/main.d.ts +11 -13
  62. package/dist/providers/ModalProvider.d.ts +8 -0
  63. package/dist/providers/WebchatProvider.d.ts +13 -0
  64. package/dist/providers/index.d.ts +2 -0
  65. package/dist/schemas/index.d.ts +1 -0
  66. package/dist/schemas/theme.d.ts +3371 -0
  67. package/dist/services/clipboard.d.ts +1 -0
  68. package/dist/services/images.d.ts +2 -0
  69. package/dist/services/index.d.ts +3 -0
  70. package/dist/services/toast.d.ts +17 -0
  71. package/dist/themes/dawn.d.ts +2 -0
  72. package/dist/themes/duskTheme.d.ts +2 -0
  73. package/dist/themes/eggplant.d.ts +2 -0
  74. package/dist/themes/galaxy.d.ts +2 -0
  75. package/dist/themes/index.d.ts +6 -0
  76. package/dist/themes/midnight.d.ts +2 -0
  77. package/dist/themes/prism.d.ts +2 -0
  78. package/dist/twind.config.d.ts +9 -0
  79. package/dist/types/block-type.d.ts +93 -0
  80. package/dist/types/image.d.ts +11 -0
  81. package/dist/types/index.d.ts +2 -0
  82. package/dist/vite.svg +1 -0
  83. package/index.html +18 -0
  84. package/package.json +60 -48
  85. package/public/vite.svg +1 -0
  86. package/src/App.tsx +41 -0
  87. package/src/Utils/colors.ts +45 -0
  88. package/src/Utils/eventEmitter.ts +31 -0
  89. package/src/Utils/index.ts +2 -0
  90. package/src/assets/check-circle-bold.svg +5 -0
  91. package/src/assets/chevron-up.svg +3 -0
  92. package/src/assets/file-05.svg +6 -0
  93. package/src/assets/globe-02.svg +6 -0
  94. package/src/assets/help-circle.svg +3 -0
  95. package/src/assets/info-circle.svg +3 -0
  96. package/src/assets/lock-01.svg +4 -0
  97. package/src/assets/mail-01.svg +6 -0
  98. package/src/assets/minus-circle.svg +3 -0
  99. package/src/assets/phone.svg +6 -0
  100. package/src/assets/send-03.svg +4 -0
  101. package/src/assets/share-04.svg +5 -0
  102. package/src/assets/slash-circle-01.svg +3 -0
  103. package/src/assets/x-circle-bold.svg +5 -0
  104. package/src/assets/x-close.svg +3 -0
  105. package/src/assets/x.svg +3 -0
  106. package/src/client/MessagingClient.ts +87 -0
  107. package/src/client/adapters/Audio.ts +10 -0
  108. package/src/client/adapters/Card.ts +104 -0
  109. package/src/client/adapters/Carousel.ts +11 -0
  110. package/src/client/adapters/Choice.ts +48 -0
  111. package/src/client/adapters/Dropdown.ts +39 -0
  112. package/src/client/adapters/File.ts +10 -0
  113. package/src/client/adapters/Image.ts +10 -0
  114. package/src/client/adapters/Location.ts +18 -0
  115. package/src/client/adapters/Message.ts +26 -0
  116. package/src/client/adapters/Text.ts +11 -0
  117. package/src/client/adapters/Utils.ts +11 -0
  118. package/src/client/adapters/Video.ts +10 -0
  119. package/src/client/adapters/Voice.ts +9 -0
  120. package/src/client/adapters/index.ts +12 -0
  121. package/src/client/index.ts +2 -0
  122. package/src/components/Avatar.tsx +22 -0
  123. package/src/components/Block.tsx +17 -0
  124. package/src/components/Composer.tsx +115 -0
  125. package/src/components/Container.tsx +17 -0
  126. package/src/components/Header.tsx +141 -0
  127. package/src/components/LoadingIndicator.tsx +15 -0
  128. package/src/components/Message.tsx +52 -0
  129. package/src/components/MessageList.tsx +75 -0
  130. package/src/components/Modal.tsx +49 -0
  131. package/src/components/RestartConversation.tsx +52 -0
  132. package/src/components/Webchat.tsx +68 -0
  133. package/src/components/dev-tools/DevTools.tsx +496 -0
  134. package/src/components/dev-tools/configuration.tsx +27 -0
  135. package/src/components/dev-tools/helpers.ts +21 -0
  136. package/src/components/index.ts +12 -0
  137. package/src/components/renderers/Audio.tsx +11 -0
  138. package/src/components/renderers/Bubble.tsx +12 -0
  139. package/src/components/renderers/Button.tsx +59 -0
  140. package/src/components/renderers/Carousel.tsx +51 -0
  141. package/src/components/renderers/Column.tsx +22 -0
  142. package/src/components/renderers/Dropdown.tsx +170 -0
  143. package/src/components/renderers/File.tsx +13 -0
  144. package/src/components/renderers/Image.tsx +63 -0
  145. package/src/components/renderers/Location.tsx +16 -0
  146. package/src/components/renderers/Row.tsx +22 -0
  147. package/src/components/renderers/Text.tsx +32 -0
  148. package/src/components/renderers/Video.tsx +11 -0
  149. package/src/components/renderers/index.ts +28 -0
  150. package/src/contexts/ComposerContext.ts +16 -0
  151. package/src/contexts/MessageContext.ts +16 -0
  152. package/src/contexts/ModalContext.ts +19 -0
  153. package/src/contexts/WebchatContext.ts +61 -0
  154. package/src/contexts/index.ts +4 -0
  155. package/src/hooks/index.ts +3 -0
  156. package/src/hooks/useImageSize.ts +30 -0
  157. package/src/hooks/useRefresh.ts +33 -0
  158. package/src/hooks/useWebchatStore.ts +45 -0
  159. package/src/index.css +18 -0
  160. package/src/index.ts +3 -0
  161. package/src/main.tsx +33 -0
  162. package/src/providers/ModalProvider.tsx +35 -0
  163. package/src/providers/WebchatProvider.tsx +107 -0
  164. package/src/providers/index.ts +2 -0
  165. package/src/schemas/index.ts +1 -0
  166. package/src/schemas/theme.ts +188 -0
  167. package/src/services/clipboard.ts +8 -0
  168. package/src/services/images.ts +39 -0
  169. package/src/services/index.ts +3 -0
  170. package/src/services/toast.tsx +71 -0
  171. package/src/themes/dawn.ts +277 -0
  172. package/src/themes/duskTheme.ts +349 -0
  173. package/src/themes/eggplant.ts +353 -0
  174. package/src/themes/galaxy.ts +323 -0
  175. package/src/themes/index.ts +6 -0
  176. package/src/themes/midnight.ts +276 -0
  177. package/src/themes/prism.ts +349 -0
  178. package/src/twind.config.ts +31 -0
  179. package/src/types/block-type.ts +150 -0
  180. package/src/types/image.ts +10 -0
  181. package/src/types/index.ts +2 -0
  182. package/src/vite-env.d.ts +1 -0
  183. package/tailwind.config.js +0 -0
  184. package/tsconfig.json +30 -0
  185. package/tsconfig.node.json +10 -0
  186. package/vite.config.ts +31 -0
  187. package/README.md +0 -31
  188. package/assets/fonts/roboto/roboto.woff2 +0 -0
  189. package/assets/fonts/roboto/roboto500.woff2 +0 -0
  190. package/assets/fonts/roboto.css +0 -128
  191. package/assets/notification.mp3 +0 -0
  192. package/dist/components/Composer.js +0 -118
  193. package/dist/components/Container.js +0 -62
  194. package/dist/components/ConversationList.d.ts +0 -10
  195. package/dist/components/ConversationList.js +0 -41
  196. package/dist/components/Footer.d.ts +0 -3
  197. package/dist/components/Footer.js +0 -21
  198. package/dist/components/Header.js +0 -181
  199. package/dist/components/VoiceRecorder.d.ts +0 -10
  200. package/dist/components/VoiceRecorder.js +0 -137
  201. package/dist/components/common/Avatar/index.d.ts +0 -9
  202. package/dist/components/common/Avatar/index.js +0 -13
  203. package/dist/components/common/BotInfo/index.d.ts +0 -10
  204. package/dist/components/common/BotInfo/index.js +0 -102
  205. package/dist/components/common/BotInfo/style.scss +0 -88
  206. package/dist/components/common/ConfirmDialog/index.d.ts +0 -11
  207. package/dist/components/common/ConfirmDialog/index.js +0 -78
  208. package/dist/components/common/ConfirmDialog/style.module.scss +0 -48
  209. package/dist/components/common/Dialog/index.d.ts +0 -17
  210. package/dist/components/common/Dialog/index.js +0 -57
  211. package/dist/components/common/Dialog/style.module.scss +0 -29
  212. package/dist/components/common/ToolTip/index.d.ts +0 -10
  213. package/dist/components/common/ToolTip/index.js +0 -163
  214. package/dist/components/common/ToolTip/style.module.scss +0 -108
  215. package/dist/components/common/ToolTip/utils.d.ts +0 -15
  216. package/dist/components/common/ToolTip/utils.js +0 -78
  217. package/dist/components/common/variables.scss +0 -38
  218. package/dist/components/messages/InlineFeedback.d.ts +0 -11
  219. package/dist/components/messages/InlineFeedback.js +0 -56
  220. package/dist/components/messages/Message.d.ts +0 -11
  221. package/dist/components/messages/Message.js +0 -106
  222. package/dist/components/messages/MessageGroup.d.ts +0 -23
  223. package/dist/components/messages/MessageGroup.js +0 -63
  224. package/dist/components/messages/MessageList.d.ts +0 -10
  225. package/dist/components/messages/MessageList.js +0 -154
  226. package/dist/core/api.d.ts +0 -23
  227. package/dist/core/api.js +0 -117
  228. package/dist/core/constants.d.ts +0 -14
  229. package/dist/core/constants.js +0 -29
  230. package/dist/core/socket.d.ts +0 -14
  231. package/dist/core/socket.js +0 -57
  232. package/dist/declaration.d.ts +0 -1
  233. package/dist/declaration.js +0 -1
  234. package/dist/fonts/roboto.d.ts +0 -4
  235. package/dist/fonts/roboto.js +0 -9
  236. package/dist/globals.d.ts +0 -7
  237. package/dist/globals.js +0 -2
  238. package/dist/icons/Add.d.ts +0 -6
  239. package/dist/icons/Add.js +0 -10
  240. package/dist/icons/Cancel.d.ts +0 -5
  241. package/dist/icons/Cancel.js +0 -10
  242. package/dist/icons/Chat.d.ts +0 -6
  243. package/dist/icons/Chat.js +0 -9
  244. package/dist/icons/Close.d.ts +0 -3
  245. package/dist/icons/Close.js +0 -10
  246. package/dist/icons/Delete.d.ts +0 -3
  247. package/dist/icons/Delete.js +0 -11
  248. package/dist/icons/Download.d.ts +0 -3
  249. package/dist/icons/Download.js +0 -10
  250. package/dist/icons/Email.d.ts +0 -3
  251. package/dist/icons/Email.js +0 -8
  252. package/dist/icons/Information.d.ts +0 -3
  253. package/dist/icons/Information.js +0 -12
  254. package/dist/icons/List.d.ts +0 -3
  255. package/dist/icons/List.js +0 -15
  256. package/dist/icons/Microphone.d.ts +0 -5
  257. package/dist/icons/Microphone.js +0 -12
  258. package/dist/icons/Phone.d.ts +0 -3
  259. package/dist/icons/Phone.js +0 -8
  260. package/dist/icons/Reload.d.ts +0 -3
  261. package/dist/icons/Reload.js +0 -10
  262. package/dist/icons/ThumbsDown.d.ts +0 -3
  263. package/dist/icons/ThumbsDown.js +0 -11
  264. package/dist/icons/ThumbsUp.d.ts +0 -3
  265. package/dist/icons/ThumbsUp.js +0 -11
  266. package/dist/icons/Website.d.ts +0 -3
  267. package/dist/icons/Website.js +0 -8
  268. package/dist/main.js +0 -336
  269. package/dist/store/composer.d.ts +0 -17
  270. package/dist/store/composer.js +0 -98
  271. package/dist/store/index.d.ts +0 -82
  272. package/dist/store/index.js +0 -576
  273. package/dist/store/view.d.ts +0 -61
  274. package/dist/store/view.js +0 -361
  275. package/dist/translations/ar.json +0 -30
  276. package/dist/translations/de.json +0 -32
  277. package/dist/translations/en.json +0 -40
  278. package/dist/translations/es.json +0 -19
  279. package/dist/translations/fr.json +0 -40
  280. package/dist/translations/index.d.ts +0 -9
  281. package/dist/translations/index.js +0 -95
  282. package/dist/translations/it.json +0 -38
  283. package/dist/translations/pt.json +0 -19
  284. package/dist/translations/ru.json +0 -24
  285. package/dist/translations/uk.json +0 -24
  286. package/dist/typings.d.ts +0 -378
  287. package/dist/typings.js +0 -2
  288. package/dist/utils/analytics.d.ts +0 -5
  289. package/dist/utils/analytics.js +0 -37
  290. package/dist/utils/index.d.ts +0 -3
  291. package/dist/utils/index.js +0 -27
  292. package/dist/utils/storage.d.ts +0 -16
  293. package/dist/utils/storage.js +0 -129
  294. package/dist/utils/webchatEvents.d.ts +0 -2
  295. package/dist/utils/webchatEvents.js +0 -14
@@ -0,0 +1,150 @@
1
+ import type { Theme } from '../schemas'
2
+
3
+ export const blockTypes = [
4
+ 'button',
5
+ 'text',
6
+ 'image',
7
+ 'audio',
8
+ 'video',
9
+ 'file',
10
+ 'location',
11
+ 'column',
12
+ 'row',
13
+ 'bubble',
14
+ 'carousel',
15
+ 'dropdown',
16
+ ] as const
17
+
18
+ export const markdownTypes = [
19
+ 'heading1',
20
+ 'heading2',
21
+ 'heading3',
22
+ 'text',
23
+ 'horizontalRule',
24
+ 'link',
25
+ 'italic',
26
+ 'bold',
27
+ 'orderedList',
28
+ 'unorderedList',
29
+ 'listItem',
30
+ 'lineBreak',
31
+ 'pre',
32
+ ] as const
33
+
34
+ export type MarkdownTypes = (typeof markdownTypes)[number]
35
+
36
+ export type BlockTypes = (typeof blockTypes)[number]
37
+ export type BlockStyles = NonNullable<Theme['message']>['blocks']
38
+
39
+ export type BlockObject =
40
+ | DropdownBlock
41
+ | ButtonBlock
42
+ | TextBlock
43
+ | ImageBlock
44
+ | AudioBlock
45
+ | VideoBlock
46
+ | FileBlock
47
+ | LocationBlock
48
+ | ColumnBlock
49
+ | RowBlock
50
+ | BubbleBlock
51
+ | CarouselBlock
52
+
53
+ export type Sender = {
54
+ name: string
55
+ avatar?: string
56
+ }
57
+
58
+ export type MessageObject = {
59
+ direction: 'incoming' | 'outgoing' | 'system'
60
+ disableInput?: boolean
61
+ sender: Sender
62
+ timestamp: Date
63
+ block: BlockObject
64
+ }
65
+
66
+ export type ButtonBlock = {
67
+ type: 'button'
68
+ variant: 'action' | 'link'
69
+ reusable?: boolean
70
+ groupId?: string
71
+ text: string
72
+ buttonValue: string
73
+ }
74
+
75
+ export type TextBlock = {
76
+ type: 'text'
77
+ text: string
78
+ }
79
+
80
+ export type ImageBlock = {
81
+ type: 'image'
82
+ orientation?: 'portrait' | 'landscape' | 'square' | 'auto'
83
+ url: string
84
+ }
85
+
86
+ export type AudioBlock = {
87
+ type: 'audio'
88
+ url: string
89
+ }
90
+
91
+ export type VideoBlock = {
92
+ type: 'video'
93
+ url: string
94
+ }
95
+
96
+ export type FileBlock = {
97
+ type: 'file'
98
+ url: string
99
+ title?: string
100
+ }
101
+
102
+ type DropdownChoice = {
103
+ label: string
104
+ value: string
105
+ }
106
+ export type DropdownBlock = {
107
+ label?: string
108
+ type: 'dropdown'
109
+ reusable?: boolean
110
+ options: DropdownChoice[]
111
+ }
112
+
113
+ export type LocationBlock = {
114
+ type: 'location'
115
+ latitude: number
116
+ longitude: number
117
+ title?: string
118
+ }
119
+
120
+ export type ColumnBlock = {
121
+ type: 'column'
122
+ blocks: BlockObject[]
123
+ horizontalAlignment?: 'left' | 'center' | 'right'
124
+ verticalAlignment?: 'top' | 'center' | 'bottom' | 'stretch'
125
+ }
126
+
127
+ export type RowBlock = {
128
+ type: 'row'
129
+ blocks: BlockObject[]
130
+ horizontalAlignment?: 'left' | 'center' | 'right' | 'stretch'
131
+ verticalAlignment?: 'top' | 'center' | 'bottom'
132
+ }
133
+
134
+ export type CarouselBlock = {
135
+ type: 'carousel'
136
+ blocks: BlockObject[]
137
+ }
138
+
139
+ export type BubbleBlock = {
140
+ type: 'bubble'
141
+ block: BlockObject
142
+ }
143
+
144
+ export type CommonBlockProps = {
145
+ styles?: BlockStyles
146
+ }
147
+
148
+ export type BlockMap<P extends BlockObject = BlockObject> = {
149
+ [T in P['type']]: Extract<P, { type: T }>
150
+ }
@@ -0,0 +1,10 @@
1
+ export type Options = {
2
+ timeout?: number
3
+ }
4
+
5
+ export type Dimensions = {
6
+ width: number
7
+ height: number
8
+ }
9
+
10
+ export type UseImageSizeResult = [Dimensions | null, { loading: boolean; error: string | null }]
@@ -0,0 +1,2 @@
1
+ export * from './block-type'
2
+ export * from './image'
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
File without changes
package/tsconfig.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "useDefineForClassFields": true,
5
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
6
+ "module": "ESNext",
7
+ "skipLibCheck": true,
8
+ "esModuleInterop": true,
9
+
10
+ /* Bundler mode */
11
+ "moduleResolution": "bundler",
12
+ "allowImportingTsExtensions": true,
13
+ "resolveJsonModule": true,
14
+ "isolatedModules": true,
15
+ "noEmit": true,
16
+ "jsx": "react-jsx",
17
+
18
+ /* Linting */
19
+ "strict": true,
20
+ "noUnusedLocals": false,
21
+ "noUnusedParameters": true,
22
+ "noFallthroughCasesInSwitch": true,
23
+ "forceConsistentCasingInFileNames": false,
24
+
25
+ "typeRoots": ["./node_modules/@types"],
26
+ "outDir": "./dist"
27
+ },
28
+ "include": ["src"],
29
+ "references": [{ "path": "./tsconfig.node.json" }]
30
+ }
@@ -0,0 +1,10 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "skipLibCheck": true,
5
+ "module": "ESNext",
6
+ "moduleResolution": "bundler",
7
+ "allowSyntheticDefaultImports": true
8
+ },
9
+ "include": ["vite.config.ts"]
10
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { defineConfig } from 'vite'
2
+ import react from '@vitejs/plugin-react-swc'
3
+ import svgr from 'vite-plugin-svgr'
4
+ import path from 'path'
5
+ import dts from 'vite-plugin-dts'
6
+
7
+ // https://vitejs.dev/config/
8
+ export default defineConfig({
9
+ plugins: [react(), svgr({ include: '**/*.svg' }), dts()],
10
+ build: {
11
+ lib: {
12
+ // Could also be a dictionary or array of multiple entry points
13
+ entry: path.join(__dirname, 'src/index.ts'),
14
+ name: 'Webchat',
15
+ // the proper extensions will be added
16
+ fileName: 'index',
17
+ },
18
+ rollupOptions: {
19
+ // make sure to externalize deps that shouldn't be bundled
20
+ // into your library
21
+ external: ['react'],
22
+ output: {
23
+ // Provide global variables to use in the UMD build
24
+ // for externalized deps
25
+ globals: {
26
+ react: 'React',
27
+ },
28
+ },
29
+ },
30
+ },
31
+ })
package/README.md DELETED
@@ -1,31 +0,0 @@
1
- # Webchat
2
-
3
- ### Sending
4
-
5
- | Channels | Webchat | Details |
6
- | -------- | :-----: | :------ |
7
- | Text | ✅ | |
8
- | Image | ✅ | |
9
- | Choice | ✅ | |
10
- | Dropdown | ✅ | |
11
- | Card | ✅ | |
12
- | Carousel | ✅ | |
13
- | File | ✅ | |
14
- | Audio | ✅ | |
15
- | Video | ✅ | |
16
- | Location | ❌ | |
17
-
18
- ### Receiving
19
-
20
- | Channels | Webchat | Details |
21
- | ------------- | :-----: | :------ |
22
- | Text | ✅ | |
23
- | Quick Reply | ✅ | |
24
- | Postback | ✅ | |
25
- | Say Something | ✅ | |
26
- | Voice | ❌ | |
27
- | Image | ❌ | |
28
- | File | ❌ | |
29
- | Audio | ❌ | |
30
- | Video | ❌ | |
31
- | Location | ❌ | |
Binary file
Binary file
@@ -1,128 +0,0 @@
1
- /* cyrillic-ext */
2
- @font-face {
3
- font-family: 'Roboto';
4
- font-style: normal;
5
- font-weight: 400;
6
- font-display: swap;
7
- src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
8
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
9
- }
10
- /* cyrillic */
11
- @font-face {
12
- font-family: 'Roboto';
13
- font-style: normal;
14
- font-weight: 400;
15
- font-display: swap;
16
- src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
17
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
18
- }
19
- /* greek-ext */
20
- @font-face {
21
- font-family: 'Roboto';
22
- font-style: normal;
23
- font-weight: 400;
24
- font-display: swap;
25
- src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
26
- unicode-range: U+1F00-1FFF;
27
- }
28
- /* greek */
29
- @font-face {
30
- font-family: 'Roboto';
31
- font-style: normal;
32
- font-weight: 400;
33
- font-display: swap;
34
- src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
35
- unicode-range: U+0370-03FF;
36
- }
37
- /* vietnamese */
38
- @font-face {
39
- font-family: 'Roboto';
40
- font-style: normal;
41
- font-weight: 400;
42
- font-display: swap;
43
- src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
44
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
45
- }
46
- /* latin-ext */
47
- @font-face {
48
- font-family: 'Roboto';
49
- font-style: normal;
50
- font-weight: 400;
51
- font-display: swap;
52
- src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
53
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
54
- }
55
- /* latin */
56
- @font-face {
57
- font-family: 'Roboto';
58
- font-style: normal;
59
- font-weight: 400;
60
- font-display: swap;
61
- src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto.woff2) format('woff2');
62
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
63
- U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
64
- }
65
- /* cyrillic-ext */
66
- @font-face {
67
- font-family: 'Roboto';
68
- font-style: normal;
69
- font-weight: 500;
70
- font-display: swap;
71
- src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
72
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
73
- }
74
- /* cyrillic */
75
- @font-face {
76
- font-family: 'Roboto';
77
- font-style: normal;
78
- font-weight: 500;
79
- font-display: swap;
80
- src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
81
- unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
82
- }
83
- /* greek-ext */
84
- @font-face {
85
- font-family: 'Roboto';
86
- font-style: normal;
87
- font-weight: 500;
88
- font-display: swap;
89
- src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
90
- unicode-range: U+1F00-1FFF;
91
- }
92
- /* greek */
93
- @font-face {
94
- font-family: 'Roboto';
95
- font-style: normal;
96
- font-weight: 500;
97
- font-display: swap;
98
- src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
99
- unicode-range: U+0370-03FF;
100
- }
101
- /* vietnamese */
102
- @font-face {
103
- font-family: 'Roboto';
104
- font-style: normal;
105
- font-weight: 500;
106
- font-display: swap;
107
- src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
108
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
109
- }
110
- /* latin-ext */
111
- @font-face {
112
- font-family: 'Roboto';
113
- font-style: normal;
114
- font-weight: 500;
115
- font-display: swap;
116
- src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
117
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
118
- }
119
- /* latin */
120
- @font-face {
121
- font-family: 'Roboto';
122
- font-style: normal;
123
- font-weight: 500;
124
- font-display: swap;
125
- src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto500.woff2) format('woff2');
126
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
127
- U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
128
- }
Binary file
@@ -1,118 +0,0 @@
1
- "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
- var __importDefault = (this && this.__importDefault) || function (mod) {
12
- return (mod && mod.__esModule) ? mod : { "default": mod };
13
- };
14
- Object.defineProperty(exports, "__esModule", { value: true });
15
- const mobx_1 = require("mobx");
16
- const mobx_react_1 = require("mobx-react");
17
- const react_1 = __importDefault(require("react"));
18
- const react_intl_1 = require("react-intl");
19
- const ToolTip_1 = __importDefault(require("./common/ToolTip"));
20
- const VoiceRecorder_1 = __importDefault(require("./VoiceRecorder"));
21
- class Composer extends react_1.default.Component {
22
- constructor(props) {
23
- super(props);
24
- this.focus = () => {
25
- setTimeout(() => {
26
- var _a;
27
- (_a = this.textInput.current) === null || _a === void 0 ? void 0 : _a.focus();
28
- }, 50);
29
- };
30
- this.handleKeyPress = (e) => __awaiter(this, void 0, void 0, function* () {
31
- if (e.key === 'Enter') {
32
- e.preventDefault();
33
- yield this.props.sendMessage();
34
- }
35
- });
36
- this.handleKeyDown = (e) => {
37
- if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
38
- this.props.recallHistory(e.key);
39
- }
40
- };
41
- this.handleMessageChanged = (e) => this.props.updateMessage(e.target.value);
42
- this.isLastMessageFromBot = () => {
43
- var _a, _b, _c, _d;
44
- return ((_d = (_c = (_b = (_a = this.props.currentConversation) === null || _a === void 0 ? void 0 : _a.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.authorId) === undefined;
45
- };
46
- this.onVoiceStart = () => {
47
- this.setState({ isRecording: true });
48
- };
49
- this.onVoiceEnd = (voice, ext) => __awaiter(this, void 0, void 0, function* () {
50
- this.setState({ isRecording: false });
51
- yield this.props.sendVoiceMessage(voice, ext);
52
- });
53
- this.onVoiceNotAvailable = () => {
54
- console.warn('Voice input is not available on this browser. Please check https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder for compatibility');
55
- };
56
- this.textInput = react_1.default.createRef();
57
- this.state = { isRecording: false };
58
- }
59
- componentDidMount() {
60
- this.focus();
61
- (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
62
- var _a;
63
- focus.newValue === 'input' && ((_a = this.textInput.current) === null || _a === void 0 ? void 0 : _a.focus());
64
- });
65
- }
66
- componentWillReceiveProps(newProps) {
67
- // Focus on the composer when it's unlocked
68
- if (this.props.composerLocked === true && newProps.composerLocked === false) {
69
- this.focus();
70
- }
71
- }
72
- render() {
73
- if (this.props.composerHidden) {
74
- return null;
75
- }
76
- const placeholder = this.props.composerPlaceholder ||
77
- this.props.intl.formatMessage({
78
- id: this.isLastMessageFromBot() ? 'composer.placeholder' : 'composer.placeholderInit'
79
- }, { name: this.props.botName });
80
- return (react_1.default.createElement("div", { role: "region", className: 'bpw-composer' },
81
- react_1.default.createElement("div", { className: 'bpw-composer-inner' },
82
- react_1.default.createElement("textarea", { ref: this.textInput, id: "input-message", onFocus: this.props.setFocus.bind(this, 'input'), placeholder: placeholder, onChange: this.handleMessageChanged, value: this.props.message, onKeyPress: this.handleKeyPress, onKeyDown: this.handleKeyDown, "aria-label": this.props.intl.formatMessage({
83
- id: 'composer.message',
84
- defaultMessage: 'Message to send'
85
- }), disabled: this.props.composerLocked }),
86
- react_1.default.createElement("label", { htmlFor: "input-message", style: { display: 'none' } }, placeholder),
87
- react_1.default.createElement("div", { className: 'bpw-send-buttons' },
88
- this.props.enableVoiceComposer && (react_1.default.createElement(VoiceRecorder_1.default, { onStart: this.onVoiceStart, onDone: this.onVoiceEnd, onNotAvailable: this.onVoiceNotAvailable })),
89
- react_1.default.createElement(ToolTip_1.default, { childId: "btn-send", content: this.props.intl.formatMessage({
90
- id: 'composer.sendMessage',
91
- defaultMessage: 'Send Message'
92
- }) },
93
- react_1.default.createElement("button", { className: 'bpw-send-button', disabled: !this.props.message.length || this.props.composerLocked || this.state.isRecording, onClick: this.props.sendMessage.bind(this, undefined), "aria-label": this.props.intl.formatMessage({
94
- id: 'composer.send',
95
- defaultMessage: 'Send'
96
- }), id: "btn-send" },
97
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'composer.send' })))))));
98
- }
99
- }
100
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
101
- enableVoiceComposer: store.config.enableVoiceComposer,
102
- message: store.composer.message,
103
- composerLocked: store.composer.locked,
104
- composerHidden: store.composer.hidden,
105
- composerPlaceholder: store.composer.composerPlaceholder,
106
- updateMessage: store.composer.updateMessage,
107
- recallHistory: store.composer.recallHistory,
108
- intl: store.intl,
109
- sendMessage: store.sendMessage,
110
- sendVoiceMessage: store.sendVoiceMessage,
111
- botName: store.botName,
112
- setFocus: store.view.setFocus,
113
- focusedArea: store.view.focusedArea,
114
- focusPrevious: store.view.focusPrevious,
115
- focusNext: store.view.focusNext,
116
- currentConversation: store.currentConversation,
117
- preferredLanguage: store.preferredLanguage
118
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Composer)));
@@ -1,62 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const messaging_components_1 = require("@botpress/messaging-components");
7
- const classnames_1 = __importDefault(require("classnames"));
8
- const mobx_react_1 = require("mobx-react");
9
- const react_1 = __importDefault(require("react"));
10
- const react_intl_1 = require("react-intl");
11
- const BotInfo_1 = __importDefault(require("./common/BotInfo"));
12
- const Composer_1 = __importDefault(require("./Composer"));
13
- const ConversationList_1 = __importDefault(require("./ConversationList"));
14
- const Footer_1 = __importDefault(require("./Footer"));
15
- const Header_1 = __importDefault(require("./Header"));
16
- const MessageList_1 = __importDefault(require("./messages/MessageList"));
17
- class Container extends react_1.default.Component {
18
- renderBody() {
19
- if (!this.props.isInitialized) {
20
- return (react_1.default.createElement("div", { className: "bpw-msg-list-container bpw-msg-list-container-loading" },
21
- react_1.default.createElement("div", { className: "bpw-msg-list-loading" })));
22
- }
23
- if (this.props.isConversationsDisplayed) {
24
- return react_1.default.createElement(ConversationList_1.default, null);
25
- }
26
- else if (this.props.isBotInfoDisplayed) {
27
- return react_1.default.createElement(BotInfo_1.default, null);
28
- }
29
- else {
30
- return (react_1.default.createElement("div", { className: (0, classnames_1.default)('bpw-msg-list-container', {
31
- 'bpw-rtl': this.props.rtl
32
- }) },
33
- react_1.default.createElement(MessageList_1.default, null),
34
- react_1.default.createElement(messaging_components_1.Keyboard, null,
35
- react_1.default.createElement(Composer_1.default, null))));
36
- }
37
- }
38
- render() {
39
- const classNames = (0, classnames_1.default)('bpw-layout', 'bpw-chat-container', {
40
- 'bpw-layout-fullscreen': this.props.isFullscreen && 'fullscreen',
41
- [`bpw-anim-${this.props.sideTransition}`]: true
42
- });
43
- return (react_1.default.createElement(react_1.default.Fragment, null,
44
- react_1.default.createElement("div", { className: classNames, style: { width: this.props.dimensions.layout } },
45
- react_1.default.createElement(Header_1.default, null),
46
- this.renderBody(),
47
- this.props.isPoweredByDisplayed && react_1.default.createElement(Footer_1.default, null))));
48
- }
49
- }
50
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
51
- store,
52
- isConversationsDisplayed: store.view.isConversationsDisplayed,
53
- isBotInfoDisplayed: store.view.isBotInfoDisplayed,
54
- isFullscreen: store.view.isFullscreen,
55
- sideTransition: store.view.sideTransition,
56
- dimensions: store.view.dimensions,
57
- isInitialized: store.isInitialized,
58
- isPoweredByDisplayed: store.view.isPoweredByDisplayed,
59
- config: store.config,
60
- botName: store.botName,
61
- rtl: store.rtl
62
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Container)));
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { WrappedComponentProps } from 'react-intl';
3
- import { StoreDef } from '../store';
4
- declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<ConversationListProps, "intl"> & {
5
- forwardedRef?: React.Ref<any> | undefined;
6
- } & React.RefAttributes<any>> & {
7
- WrappedComponent: React.ComponentType<ConversationListProps>;
8
- } & import("mobx-react").IWrappedComponent<unknown>;
9
- export default _default;
10
- declare type ConversationListProps = WrappedComponentProps & Pick<StoreDef, 'conversations' | 'fetchConversation' | 'createConversation'>;
@@ -1,41 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const intl_utils_1 = require("@formatjs/intl-utils");
7
- const mobx_react_1 = require("mobx-react");
8
- const react_1 = __importDefault(require("react"));
9
- const react_intl_1 = require("react-intl");
10
- const Add_1 = __importDefault(require("../icons/Add"));
11
- const ConversationListItem = (0, react_intl_1.injectIntl)(({ conversation, onClick, intl }) => {
12
- var _a, _b, _c;
13
- const title = intl.formatMessage({ id: 'conversationList.title' }, { id: conversation.id });
14
- const { value, unit } = (0, intl_utils_1.selectUnit)(new Date(((_a = conversation.lastMessage) === null || _a === void 0 ? void 0 : _a.sentOn) || conversation.createdOn));
15
- const date = intl.formatRelativeTime(value, unit);
16
- const message = ((_c = (_b = conversation.lastMessage) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.text) || '...';
17
- return (react_1.default.createElement("div", { className: 'bpw-convo-item', onClick: onClick },
18
- react_1.default.createElement("div", { className: 'bpw-align-right' },
19
- react_1.default.createElement("div", { className: 'bpw-title' },
20
- react_1.default.createElement("div", null, title),
21
- react_1.default.createElement("div", { className: 'bpw-date' },
22
- react_1.default.createElement("span", null, date))),
23
- react_1.default.createElement("div", { className: 'bpw-convo-preview' }, message))));
24
- });
25
- class ConversationList extends react_1.default.Component {
26
- componentDidMount() {
27
- this.main.focus();
28
- }
29
- render() {
30
- const { conversations, createConversation, fetchConversation } = this.props;
31
- return (react_1.default.createElement("div", { tabIndex: 0, ref: (el) => (this.main = el), className: 'bpw-convo-list' },
32
- conversations.map((conversation, idx) => (react_1.default.createElement(ConversationListItem, { key: conversation.id, conversation: conversation, onClick: fetchConversation.bind(this, conversation.id) }))),
33
- react_1.default.createElement("button", { id: "btn-convo-add", className: 'bpw-convo-add-btn', onClick: createConversation.bind(this, undefined) },
34
- react_1.default.createElement(Add_1.default, { width: 15, height: 15 }))));
35
- }
36
- }
37
- exports.default = (0, mobx_react_1.inject)(({ store }) => ({
38
- conversations: store.conversations,
39
- createConversation: store.createConversation,
40
- fetchConversation: store.fetchConversation
41
- }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(ConversationList)));
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const Footer: () => JSX.Element;
3
- export default Footer;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- const react_intl_1 = require("react-intl");
8
- const Footer = () => {
9
- return (react_1.default.createElement("span", null,
10
- react_1.default.createElement("div", { className: 'bpw-powered' },
11
- react_1.default.createElement("span", null,
12
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "footer.poweredBy", defaultMessage: "We're {icon} by {link}", values: {
13
- icon: (react_1.default.createElement("i", null,
14
- react_1.default.createElement("svg", { width: "7", height: "13", viewBox: "0 0 7 13", xmlns: "http://www.w3.org/2000/svg" },
15
- react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
16
- react_1.default.createElement("path", { d: "M4.127.496C4.51-.12 5.37.356 5.16 1.07L3.89 5.14H6.22c.483 0 .757.616.464 1.044l-4.338 6.34c-.407.595-1.244.082-1.01-.618L2.72 7.656H.778c-.47 0-.748-.59-.48-1.02L4.13.495z", fill: "#F6A623" }),
17
- react_1.default.createElement("path", { fill: "#FEF79E", d: "M4.606.867L.778 7.007h2.807l-1.7 5.126 4.337-6.34H3.16" }))))),
18
- link: (react_1.default.createElement("a", { href: 'https://botpress.com', target: "_blank" }, 'Botpress'))
19
- } })))));
20
- };
21
- exports.default = Footer;