@asgard-js/react 0.0.2 → 0.0.3-8.canary-1

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 (242) hide show
  1. package/.babelrc +12 -0
  2. package/README.md +523 -4
  3. package/dist/components/chatbot/chatbot-body/chatbot-body.d.ts.map +1 -0
  4. package/dist/components/{conversation-message-renderer → chatbot/chatbot-body}/conversation-message-renderer.d.ts +2 -2
  5. package/dist/components/chatbot/chatbot-body/conversation-message-renderer.d.ts.map +1 -0
  6. package/dist/components/chatbot/chatbot-body/index.d.ts +2 -0
  7. package/dist/components/chatbot/chatbot-body/index.d.ts.map +1 -0
  8. package/dist/components/chatbot/chatbot-container/chatbot-container.d.ts +10 -0
  9. package/dist/components/chatbot/chatbot-container/chatbot-container.d.ts.map +1 -0
  10. package/dist/components/chatbot/chatbot-container/chatbot-full-screen-container.d.ts +4 -0
  11. package/dist/components/chatbot/chatbot-container/chatbot-full-screen-container.d.ts.map +1 -0
  12. package/dist/components/chatbot/chatbot-footer/chatbot-footer.d.ts.map +1 -0
  13. package/dist/components/chatbot/chatbot-footer/index.d.ts +2 -0
  14. package/dist/components/chatbot/chatbot-footer/index.d.ts.map +1 -0
  15. package/dist/components/chatbot/chatbot-footer/speech-input-button.d.ts +10 -0
  16. package/dist/components/chatbot/chatbot-footer/speech-input-button.d.ts.map +1 -0
  17. package/dist/components/chatbot/chatbot-header/chatbot-header.d.ts +12 -0
  18. package/dist/components/chatbot/chatbot-header/chatbot-header.d.ts.map +1 -0
  19. package/dist/components/chatbot/chatbot-header/index.d.ts +2 -0
  20. package/dist/components/chatbot/chatbot-header/index.d.ts.map +1 -0
  21. package/dist/components/chatbot/chatbot.d.ts +25 -8
  22. package/dist/components/chatbot/chatbot.d.ts.map +1 -1
  23. package/dist/components/chatbot/profile-icon.d.ts +5 -1
  24. package/dist/components/chatbot/profile-icon.d.ts.map +1 -1
  25. package/dist/components/index.d.ts +1 -0
  26. package/dist/components/index.d.ts.map +1 -1
  27. package/dist/components/templates/avatar/avatar.d.ts +5 -1
  28. package/dist/components/templates/avatar/avatar.d.ts.map +1 -1
  29. package/dist/components/templates/button-template/button-template.d.ts +2 -2
  30. package/dist/components/templates/button-template/button-template.d.ts.map +1 -1
  31. package/dist/components/templates/button-template/card.d.ts +8 -2
  32. package/dist/components/templates/button-template/card.d.ts.map +1 -1
  33. package/dist/components/templates/carousel-template/carousel-template.d.ts +2 -2
  34. package/dist/components/templates/carousel-template/carousel-template.d.ts.map +1 -1
  35. package/dist/components/templates/chart-template/chart-template.d.ts +9 -0
  36. package/dist/components/templates/chart-template/chart-template.d.ts.map +1 -0
  37. package/dist/components/templates/chart-template/index.d.ts +2 -0
  38. package/dist/components/templates/chart-template/index.d.ts.map +1 -0
  39. package/dist/components/templates/hint-template/hint-template.d.ts +2 -2
  40. package/dist/components/templates/hint-template/hint-template.d.ts.map +1 -1
  41. package/dist/components/templates/image-template/image-template.d.ts +9 -0
  42. package/dist/components/templates/image-template/image-template.d.ts.map +1 -0
  43. package/dist/components/templates/image-template/index.d.ts +2 -0
  44. package/dist/components/templates/image-template/index.d.ts.map +1 -0
  45. package/dist/components/templates/index.d.ts +2 -1
  46. package/dist/components/templates/index.d.ts.map +1 -1
  47. package/dist/components/templates/quick-replies/quick-replies.d.ts.map +1 -1
  48. package/dist/components/templates/template-box/template-box-content.d.ts.map +1 -1
  49. package/dist/components/templates/template-box/template-box.d.ts +5 -1
  50. package/dist/components/templates/template-box/template-box.d.ts.map +1 -1
  51. package/dist/components/templates/{bot-typing-box → text-template}/bot-typing-box.d.ts +2 -2
  52. package/dist/components/templates/text-template/bot-typing-box.d.ts.map +1 -0
  53. package/dist/components/templates/text-template/bot-typing-placeholder.d.ts +8 -0
  54. package/dist/components/templates/text-template/bot-typing-placeholder.d.ts.map +1 -0
  55. package/dist/components/templates/text-template/index.d.ts +2 -0
  56. package/dist/components/templates/text-template/index.d.ts.map +1 -1
  57. package/dist/components/templates/text-template/text-template.d.ts +2 -2
  58. package/dist/components/templates/text-template/text-template.d.ts.map +1 -1
  59. package/dist/components/templates/time/time.d.ts.map +1 -1
  60. package/dist/context/asgard-app-initialization-context.d.ts +54 -0
  61. package/dist/context/asgard-app-initialization-context.d.ts.map +1 -0
  62. package/dist/context/asgard-service-context.d.ts +22 -13
  63. package/dist/context/asgard-service-context.d.ts.map +1 -1
  64. package/dist/context/asgard-template-context.d.ts +28 -0
  65. package/dist/context/asgard-template-context.d.ts.map +1 -0
  66. package/dist/context/asgard-theme-context.d.ts +127 -0
  67. package/dist/context/asgard-theme-context.d.ts.map +1 -0
  68. package/dist/context/index.d.ts +5 -0
  69. package/dist/context/index.d.ts.map +1 -0
  70. package/dist/hooks/index.d.ts +8 -0
  71. package/dist/hooks/index.d.ts.map +1 -1
  72. package/dist/hooks/use-asgard-service-client.d.ts +1 -1
  73. package/dist/hooks/use-asgard-service-client.d.ts.map +1 -1
  74. package/dist/hooks/use-channel.d.ts +15 -10
  75. package/dist/hooks/use-channel.d.ts.map +1 -1
  76. package/dist/hooks/use-deep-compare-memo.d.ts +7 -0
  77. package/dist/hooks/use-deep-compare-memo.d.ts.map +1 -0
  78. package/dist/hooks/use-is-on-screen-keyboard-open.d.ts +2 -0
  79. package/dist/hooks/use-is-on-screen-keyboard-open.d.ts.map +1 -0
  80. package/dist/hooks/use-on-screen-keyboard-scroll-fix.d.ts +2 -0
  81. package/dist/hooks/use-on-screen-keyboard-scroll-fix.d.ts.map +1 -0
  82. package/dist/hooks/use-prevent-over-scrolling.d.ts +4 -0
  83. package/dist/hooks/use-prevent-over-scrolling.d.ts.map +1 -0
  84. package/dist/hooks/use-react-markdown-renderer.d.ts +11 -0
  85. package/dist/hooks/use-react-markdown-renderer.d.ts.map +1 -0
  86. package/dist/hooks/use-resize-observer.d.ts +9 -0
  87. package/dist/hooks/use-resize-observer.d.ts.map +1 -0
  88. package/dist/hooks/use-update-vh.d.ts +4 -0
  89. package/dist/hooks/use-update-vh.d.ts.map +1 -0
  90. package/dist/hooks/use-viewport-size.d.ts +6 -0
  91. package/dist/hooks/use-viewport-size.d.ts.map +1 -0
  92. package/dist/index.d.ts +2 -0
  93. package/dist/index.d.ts.map +1 -1
  94. package/dist/index.js +77820 -503
  95. package/dist/models/bot-provider.d.ts +26 -0
  96. package/dist/models/bot-provider.d.ts.map +1 -0
  97. package/dist/style.css +1 -1
  98. package/dist/test-setup.d.ts +2 -0
  99. package/dist/test-setup.d.ts.map +1 -0
  100. package/dist/utils/deep-merge.d.ts +3 -0
  101. package/dist/utils/deep-merge.d.ts.map +1 -0
  102. package/dist/utils/extractors.d.ts +2 -0
  103. package/dist/utils/extractors.d.ts.map +1 -0
  104. package/dist/utils/is.d.ts +8 -0
  105. package/dist/utils/is.d.ts.map +1 -0
  106. package/dist/utils/selectors.d.ts +4 -0
  107. package/dist/utils/selectors.d.ts.map +1 -0
  108. package/dist/utils/uri-validation.d.ts +20 -0
  109. package/dist/utils/uri-validation.d.ts.map +1 -0
  110. package/eslint.config.cjs +12 -0
  111. package/package.json +39 -3
  112. package/src/components/chatbot/chatbot-body/chatbot-body.module.scss +13 -0
  113. package/src/components/chatbot/chatbot-body/chatbot-body.tsx +45 -0
  114. package/src/components/chatbot/chatbot-body/conversation-message-renderer.tsx +55 -0
  115. package/src/components/chatbot/chatbot-body/index.ts +1 -0
  116. package/src/components/chatbot/chatbot-container/chatbot-container.module.scss +41 -0
  117. package/src/components/chatbot/chatbot-container/chatbot-container.tsx +49 -0
  118. package/src/components/chatbot/chatbot-container/chatbot-full-screen-container.tsx +54 -0
  119. package/src/components/chatbot/chatbot-footer/chatbot-footer.module.scss +67 -0
  120. package/src/components/chatbot/chatbot-footer/chatbot-footer.tsx +140 -0
  121. package/src/components/chatbot/chatbot-footer/index.ts +1 -0
  122. package/src/components/chatbot/chatbot-footer/speech-input-button.tsx +132 -0
  123. package/src/components/chatbot/chatbot-header/chatbot-header.module.scss +48 -0
  124. package/src/components/chatbot/chatbot-header/chatbot-header.tsx +98 -0
  125. package/src/components/chatbot/chatbot-header/index.ts +1 -0
  126. package/src/components/chatbot/chatbot.spec.tsx +8 -0
  127. package/src/components/chatbot/chatbot.tsx +121 -0
  128. package/src/components/chatbot/profile-icon.tsx +26 -0
  129. package/src/components/index.ts +2 -0
  130. package/src/components/templates/avatar/avatar.module.scss +6 -0
  131. package/src/components/templates/avatar/avatar.tsx +28 -0
  132. package/src/components/templates/avatar/index.ts +1 -0
  133. package/src/components/templates/button-template/button-template.module.scss +0 -0
  134. package/src/components/templates/button-template/button-template.tsx +45 -0
  135. package/src/components/templates/button-template/card.module.scss +58 -0
  136. package/src/components/templates/button-template/card.spec.tsx +213 -0
  137. package/src/components/templates/button-template/card.tsx +123 -0
  138. package/src/components/templates/button-template/index.ts +1 -0
  139. package/src/components/templates/carousel-template/carousel-template.module.scss +15 -0
  140. package/src/components/templates/carousel-template/carousel-template.tsx +49 -0
  141. package/src/components/templates/carousel-template/index.ts +1 -0
  142. package/src/components/templates/chart-template/chart-template.module.scss +52 -0
  143. package/src/components/templates/chart-template/chart-template.tsx +75 -0
  144. package/src/components/templates/chart-template/index.ts +1 -0
  145. package/src/components/templates/hint-template/hint-template.module.scss +39 -0
  146. package/src/components/templates/hint-template/hint-template.tsx +71 -0
  147. package/src/components/templates/hint-template/index.ts +1 -0
  148. package/src/components/templates/image-template/image-template.module.scss +67 -0
  149. package/src/components/templates/image-template/image-template.tsx +58 -0
  150. package/src/components/templates/image-template/index.ts +1 -0
  151. package/src/components/templates/index.ts +10 -0
  152. package/src/components/templates/quick-replies/index.ts +1 -0
  153. package/src/components/templates/quick-replies/quick-replies.module.scss +16 -0
  154. package/src/components/templates/quick-replies/quick-replies.tsx +44 -0
  155. package/src/components/templates/template-box/index.ts +2 -0
  156. package/src/components/templates/template-box/template-box-content.module.scss +13 -0
  157. package/src/components/templates/template-box/template-box-content.tsx +30 -0
  158. package/src/components/templates/template-box/template-box.module.scss +19 -0
  159. package/src/components/templates/template-box/template-box.tsx +48 -0
  160. package/src/components/templates/text-template/bot-typing-box.tsx +81 -0
  161. package/src/components/templates/text-template/bot-typing-placeholder.tsx +28 -0
  162. package/src/components/templates/text-template/index.ts +3 -0
  163. package/src/components/templates/text-template/text-template.module.scss +131 -0
  164. package/src/components/templates/text-template/text-template.tsx +90 -0
  165. package/src/components/templates/text-template/use-react-markdown-renderer.spec.tsx +758 -0
  166. package/src/components/templates/time/index.ts +1 -0
  167. package/src/components/templates/time/time.module.scss +6 -0
  168. package/src/components/templates/time/time.tsx +34 -0
  169. package/src/context/asgard-app-initialization-context.tsx +154 -0
  170. package/src/context/asgard-service-context.tsx +145 -0
  171. package/src/context/asgard-template-context.tsx +83 -0
  172. package/src/context/asgard-theme-context.tsx +401 -0
  173. package/src/context/index.ts +4 -0
  174. package/src/hooks/index.ts +11 -0
  175. package/src/hooks/use-asgard-service-client.ts +68 -0
  176. package/src/hooks/use-channel.ts +154 -0
  177. package/src/hooks/use-debounce.ts +18 -0
  178. package/src/hooks/use-deep-compare-memo.ts +19 -0
  179. package/src/hooks/use-is-on-screen-keyboard-open.ts +43 -0
  180. package/src/hooks/use-on-screen-keyboard-scroll-fix.ts +15 -0
  181. package/src/hooks/use-prevent-over-scrolling.ts +77 -0
  182. package/src/hooks/use-react-markdown-renderer.tsx +266 -0
  183. package/src/hooks/use-resize-observer.tsx +27 -0
  184. package/src/hooks/use-update-vh.ts +30 -0
  185. package/src/hooks/use-viewport-size.ts +51 -0
  186. package/src/icons/add_a_photo.svg +3 -0
  187. package/src/icons/bot.svg +14 -0
  188. package/src/icons/close.svg +3 -0
  189. package/src/icons/distance.svg +3 -0
  190. package/src/icons/mic.svg +3 -0
  191. package/src/icons/photo_library.svg +3 -0
  192. package/src/icons/profile.svg +28 -0
  193. package/src/icons/refresh.svg +3 -0
  194. package/src/icons/send.svg +3 -0
  195. package/src/icons/stop.svg +22 -0
  196. package/src/icons/volume_up.svg +3 -0
  197. package/src/index.ts +4 -0
  198. package/src/models/bot-provider.ts +108 -0
  199. package/src/styles/_index.scss +1 -0
  200. package/src/styles/_styles.scss +11 -0
  201. package/src/styles/colors/_colors.scss +10 -0
  202. package/src/styles/colors/_index.scss +1 -0
  203. package/src/styles/colors/_variables.scss +72 -0
  204. package/src/styles/palette/_index.scss +1 -0
  205. package/src/styles/palette/_palette.scss +42 -0
  206. package/src/styles/palette/_variables.scss +40 -0
  207. package/src/styles/radius/_index.scss +1 -0
  208. package/src/styles/radius/_radius.scss +8 -0
  209. package/src/styles/radius/_variables.scss +12 -0
  210. package/src/styles/spacing/_index.scss +1 -0
  211. package/src/styles/spacing/_spacing.scss +8 -0
  212. package/src/styles/spacing/_variables.scss +13 -0
  213. package/src/styles/utils/_index.scss +1 -0
  214. package/src/styles/utils/_map.scss +22 -0
  215. package/src/test-setup.ts +1 -0
  216. package/src/utils/deep-merge.ts +26 -0
  217. package/src/utils/extractors.ts +20 -0
  218. package/src/utils/format-time.ts +8 -0
  219. package/src/utils/index.ts +1 -0
  220. package/src/utils/is.ts +72 -0
  221. package/src/utils/selectors.ts +7 -0
  222. package/src/utils/uri-validation.spec.ts +208 -0
  223. package/src/utils/uri-validation.ts +103 -0
  224. package/tsconfig.json +16 -0
  225. package/tsconfig.lib.json +63 -0
  226. package/tsconfig.spec.json +36 -0
  227. package/tsconfig.tsbuildinfo +1 -0
  228. package/vite.config.ts +63 -0
  229. package/dist/components/chatbot/chatbot-body.d.ts.map +0 -1
  230. package/dist/components/chatbot/chatbot-footer.d.ts.map +0 -1
  231. package/dist/components/chatbot/chatbot-header.d.ts +0 -8
  232. package/dist/components/chatbot/chatbot-header.d.ts.map +0 -1
  233. package/dist/components/conversation-message-renderer/conversation-message-renderer.d.ts.map +0 -1
  234. package/dist/components/conversation-message-renderer/index.d.ts +0 -2
  235. package/dist/components/conversation-message-renderer/index.d.ts.map +0 -1
  236. package/dist/components/templates/bot-typing-box/bot-typing-box.d.ts.map +0 -1
  237. package/dist/components/templates/bot-typing-box/index.d.ts +0 -2
  238. package/dist/components/templates/bot-typing-box/index.d.ts.map +0 -1
  239. package/dist/components/templates/bot-typing-box/resize-observer-box.d.ts +0 -9
  240. package/dist/components/templates/bot-typing-box/resize-observer-box.d.ts.map +0 -1
  241. /package/dist/components/chatbot/{chatbot-body.d.ts → chatbot-body/chatbot-body.d.ts} +0 -0
  242. /package/dist/components/chatbot/{chatbot-footer.d.ts → chatbot-footer/chatbot-footer.d.ts} +0 -0
package/.babelrc ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "presets": [
3
+ [
4
+ "@nx/react/babel",
5
+ {
6
+ "runtime": "automatic",
7
+ "useBuiltIns": "usage"
8
+ }
9
+ ]
10
+ ],
11
+ "plugins": []
12
+ }
package/README.md CHANGED
@@ -1,7 +1,526 @@
1
- # @asgard-js/react
1
+ # AsgardJs React
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ This package provides React components and hooks for integrating with the Asgard AI platform, allowing you to build interactive chat interfaces.
4
4
 
5
- ## Running unit tests
5
+ ## Installation
6
6
 
7
- Run `nx test @asgard-js/react` to execute the unit tests via [Vitest](https://vitest.dev/).
7
+ To install the React package, use the following command:
8
+
9
+ ```sh
10
+ yarn add @asgard-js/core @asgard-js/react
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ Here's a basic example of how to use the React components:
16
+
17
+ ```javascript
18
+ import React, { useRef } from 'react';
19
+ import { Chatbot } from '@asgard-js/react';
20
+
21
+ const chatbotRef = useRef(null);
22
+
23
+ const App = () => {
24
+ return (
25
+ <div style={{ width: '800px', position: 'relative' }}>
26
+ <button
27
+ style={{
28
+ position: 'absolute',
29
+ top: '80px',
30
+ right: '50%',
31
+ transform: 'translateX(50%)',
32
+ zIndex: 10,
33
+ border: '1px solid white',
34
+ borderRadius: '5px',
35
+ color: 'white',
36
+ backgroundColor: 'transparent',
37
+ cursor: 'pointer',
38
+ padding: '0.5rem 1rem',
39
+ }}
40
+ onClick={() =>
41
+ chatbotRef.current?.serviceContext?.sendMessage?.({ text: 'Hello' })
42
+ }
43
+ >
44
+ Send a message from outside of chatbot
45
+ </button>
46
+ <Chatbot
47
+ ref={chatbotRef}
48
+ title="Asgard AI Chatbot"
49
+ config={{
50
+ apiKey: 'your-api-key',
51
+ botProviderEndpoint:
52
+ 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
53
+ debugMode: true, // Enable to see deprecation warnings
54
+ transformSsePayload: (payload) => {
55
+ return payload;
56
+ },
57
+ }}
58
+ enableLoadConfigFromService={true}
59
+ customChannelId="your-channel-id"
60
+ initMessages={[]}
61
+ debugMode={false}
62
+ fullScreen={false}
63
+ avatar="https://example.com/avatar.png"
64
+ botTypingPlaceholder="Bot is typing..."
65
+ defaultLinkTarget="_blank"
66
+ onReset={() => {
67
+ console.log('Chat reset');
68
+ }}
69
+ onClose={() => {
70
+ console.log('Chat closed');
71
+ }}
72
+ onSseMessage={(response, ctx) => {
73
+ if (response.eventType === 'asgard.run.done') {
74
+ console.log('onSseMessage', response, ctx.conversation);
75
+
76
+ setTimeout(() => {
77
+ // delay some time to wait for the serviceContext to be available
78
+ chatbotRef.current?.serviceContext?.sendMessage?.({
79
+ text: 'Say hi after 5 seconds',
80
+ });
81
+ }, 5000);
82
+ }
83
+ }}
84
+ />
85
+ </div>
86
+ );
87
+ };
88
+
89
+ export default App;
90
+ ```
91
+
92
+ ## Migration from `endpoint` to `botProviderEndpoint`
93
+
94
+ **Important**: The `endpoint` configuration option is deprecated. Use `botProviderEndpoint` instead for simplified configuration.
95
+
96
+ ### Before (Deprecated)
97
+
98
+ ```javascript
99
+ config: {
100
+ apiKey: 'your-api-key',
101
+ endpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}/message/sse',
102
+ botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
103
+ }
104
+ ```
105
+
106
+ ### After (Recommended)
107
+
108
+ ```javascript
109
+ config: {
110
+ apiKey: 'your-api-key',
111
+ botProviderEndpoint: 'https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}',
112
+ // SSE endpoint is automatically derived as: botProviderEndpoint + '/message/sse'
113
+ }
114
+ ```
115
+
116
+ **Benefits:**
117
+
118
+ - Simplified configuration with single endpoint
119
+ - Reduced chance of configuration errors
120
+ - Automatic endpoint derivation
121
+
122
+ **Backward Compatibility:** Existing code using `endpoint` will continue to work but may show deprecation warnings when `debugMode` is enabled.
123
+
124
+ ### Chatbot Component Props
125
+
126
+ - **title?**: `string` - The title of the chatbot (optional). If not provided, will use the value from the API if available.
127
+ - **config**: `ClientConfig` - Configuration object for the Asgard service client, including:
128
+ - `apiKey`: `string` (required) - API key for authentication
129
+ - `botProviderEndpoint`: `string` (required) - Bot provider endpoint URL (SSE endpoint will be auto-derived)
130
+ - `endpoint?`: `string` (deprecated) - Legacy API endpoint URL. Use `botProviderEndpoint` instead.
131
+ - `transformSsePayload?`: `(payload: FetchSsePayload) => FetchSsePayload` - SSE payload transformer
132
+ - `debugMode?`: `boolean` - Enable debug mode, defaults to `false`
133
+ - `onRunInit?`: `InitEventHandler` - Handler for run initialization events
134
+ - `onMessage?`: `MessageEventHandler` - Handler for message events
135
+ - `onToolCall?`: `ToolCallEventHandler` - Handler for tool call events
136
+ - `onProcess?`: `ProcessEventHandler` - Handler for process events
137
+ - `onRunDone?`: `DoneEventHandler` - Handler for run completion events
138
+ - `onRunError?`: `ErrorEventHandler` - Error handler for execution errors
139
+ - **customActions?**: `ReactNode[]` - Custom actions to display on the chatbot header
140
+ - **enableLoadConfigFromService?**: `boolean` - Enable loading configuration from service
141
+ - **maintainConnectionWhenClosed?**: `boolean` - Maintain connection when chat is closed, defaults to `false`
142
+ - **loadingComponent?**: `ReactNode` - Custom loading component
143
+ - **asyncInitializers?**: `Record<string, () => Promise<unknown>>` - Asynchronous initializers for app initialization before rendering any component. Good for loading data or other async operations as the initial state. It only works when `enableLoadConfigFromService` is set to `true`.
144
+ - **customChannelId**: `string` - Custom channel identifier for the chat session
145
+ - **initMessages**: `ConversationMessage[]` - Initial messages to display in the chat
146
+ - **fullScreen**: `boolean` - Display chatbot in full screen mode, defaults to `false`
147
+ - **avatar**: `string` - URL for the chatbot's avatar image
148
+ - **botTypingPlaceholder**: `string` - Text to display while the bot is typing
149
+ - **defaultLinkTarget?**: `'_blank' | '_self' | '_parent' | '_top'` - Default target for opening URIs when not specified by the API. Defaults to `'_blank'` (opens in new tab).
150
+ - **theme**: `Partial<AsgardThemeContextValue>` - Custom theme configuration
151
+ - **onReset**: `() => void` - Callback function when chat is reset
152
+ - **onClose**: `() => void` - Callback function when chat is closed
153
+ - **onSseMessage**: `(response: SseResponse, ctx: AsgardServiceContextValue) => void` - Callback function when SSE message is received. It would be helpful if using with the ref to provide some context and conversation data and do some proactively actions like sending messages to the bot.
154
+ - **ref**: `ForwardedRef<ChatbotRef>` - Forwarded ref to access the chatbot instance. It can be used to access the chatbot instance and do some actions like sending messages to the bot. ChatbotRef extends the ref of the chatbot instance and provides some additional methods like `serviceContext.sendMessage` to interact with the chatbot instance.
155
+
156
+ ### Theme Configuration
157
+
158
+ The theme configuration can be obtained from the bot provider metadata of `annotations` field and `theme` props.
159
+
160
+ The priority of themes is as follows (high to low):
161
+
162
+ 1. Theme from props
163
+ 2. Theme from annotations from bot provider metadata
164
+ 3. Default theme
165
+
166
+ ```typescript
167
+ export interface AsgardThemeContextValue {
168
+ chatbot: Pick<
169
+ CSSProperties,
170
+ | 'width'
171
+ | 'height'
172
+ | 'maxWidth'
173
+ | 'minWidth'
174
+ | 'maxHeight'
175
+ | 'minHeight'
176
+ | 'backgroundColor'
177
+ | 'borderColor'
178
+ | 'borderRadius'
179
+ > & {
180
+ contentMaxWidth?: CSSProperties['maxWidth'];
181
+ backgroundColor?: CSSProperties['backgroundColor'];
182
+ borderColor?: CSSProperties['borderColor'];
183
+ inactiveColor?: CSSProperties['color'];
184
+ primaryComponent?: {
185
+ mainColor?: CSSProperties['color'];
186
+ secondaryColor?: CSSProperties['color'];
187
+ };
188
+ style?: CSSProperties;
189
+ header?: Partial<{
190
+ style: CSSProperties;
191
+ title: {
192
+ style: CSSProperties;
193
+ };
194
+ actionButton?: {
195
+ style: CSSProperties;
196
+ };
197
+ }>;
198
+ body?: Partial<{
199
+ style: CSSProperties;
200
+ }>;
201
+ footer?: Partial<{
202
+ style: CSSProperties;
203
+ textArea: {
204
+ style: CSSProperties;
205
+ '::placeholder': CSSProperties;
206
+ };
207
+ submitButton: {
208
+ style: CSSProperties;
209
+ };
210
+ speechInputButton: {
211
+ style: CSSProperties;
212
+ };
213
+ }>;
214
+ };
215
+ botMessage: Pick<CSSProperties, 'color' | 'backgroundColor'>;
216
+ userMessage: Pick<CSSProperties, 'color' | 'backgroundColor'>;
217
+ template?: Partial<{
218
+ /**
219
+ * first level for common/shared properties.
220
+ * Check MessageTemplate type for more details (packages/core/src/types/sse-response.ts).
221
+ */
222
+ quickReplies?: Partial<{
223
+ style: CSSProperties;
224
+ button: {
225
+ style: CSSProperties;
226
+ };
227
+ }>;
228
+ time?: Partial<{
229
+ style: CSSProperties;
230
+ }>;
231
+ TextMessageTemplate: Partial<{ style: CSSProperties }>;
232
+ HintMessageTemplate: Partial<{ style: CSSProperties }>;
233
+ ImageMessageTemplate: Partial<{ style: CSSProperties }>;
234
+ ChartMessageTemplate: Partial<{ style: CSSProperties }>;
235
+ ButtonMessageTemplate: Partial<{
236
+ style: CSSProperties;
237
+ button?: {
238
+ style: CSSProperties;
239
+ };
240
+ }>;
241
+ CarouselMessageTemplate: Partial<{
242
+ style: CSSProperties;
243
+ card: {
244
+ style: CSSProperties;
245
+ button?: {
246
+ style: CSSProperties;
247
+ };
248
+ };
249
+ }>;
250
+
251
+ // Didn't implement yet
252
+ VideoMessageTemplate: Partial<{ style: CSSProperties }>;
253
+ AudioMessageTemplate: Partial<{ style: CSSProperties }>;
254
+ LocationMessageTemplate: Partial<{ style: CSSProperties }>;
255
+ }>;
256
+ }
257
+ ```
258
+
259
+ ### Default Theme
260
+
261
+ The default theme uses CSS variables for consistent styling:
262
+
263
+ ```javascript
264
+ const defaultTheme = {
265
+ chatbot: {
266
+ width: '375px',
267
+ height: '640px',
268
+ backgroundColor: 'var(--asg-color-bg)',
269
+ borderColor: 'var(--asg-color-border)',
270
+ borderRadius: 'var(--asg-radius-md)',
271
+ contentMaxWidth: '1200px',
272
+ style: {},
273
+ header: {
274
+ style: {},
275
+ title: {
276
+ style: {},
277
+ },
278
+ actionButton: {
279
+ style: {},
280
+ },
281
+ },
282
+ body: {
283
+ style: {},
284
+ },
285
+ footer: {
286
+ style: {},
287
+ textArea: {
288
+ style: {},
289
+ '::placeholder': {
290
+ color: 'var(--asg-color-text-placeholder)',
291
+ },
292
+ },
293
+ submitButton: {
294
+ style: {},
295
+ },
296
+ speechInputButton: {
297
+ style: {},
298
+ },
299
+ },
300
+ },
301
+ botMessage: {
302
+ color: 'var(--asg-color-text)',
303
+ backgroundColor: 'var(--asg-color-secondary)',
304
+ },
305
+ userMessage: {
306
+ color: 'var(--asg-color-text)',
307
+ backgroundColor: 'var(--asg-color-primary)',
308
+ },
309
+ template: {
310
+ quickReplies: {
311
+ style: {},
312
+ button: {
313
+ style: {},
314
+ },
315
+ },
316
+ time: {
317
+ style: {},
318
+ },
319
+ TextMessageTemplate: {
320
+ style: {},
321
+ },
322
+ HintMessageTemplate: {
323
+ style: {},
324
+ },
325
+ ImageMessageTemplate: {
326
+ style: {},
327
+ },
328
+ VideoMessageTemplate: {
329
+ style: {},
330
+ },
331
+ AudioMessageTemplate: {
332
+ style: {},
333
+ },
334
+ LocationMessageTemplate: {
335
+ style: {},
336
+ },
337
+ ChartMessageTemplate: {
338
+ style: {},
339
+ },
340
+ ButtonMessageTemplate: {
341
+ style: {},
342
+ button: {
343
+ style: {
344
+ border: '1px solid var(--asg-color-border)',
345
+ },
346
+ },
347
+ },
348
+ CarouselMessageTemplate: {
349
+ style: {},
350
+ card: {
351
+ style: {},
352
+ button: {
353
+ style: {
354
+ border: '1px solid var(--asg-color-border)',
355
+ },
356
+ },
357
+ },
358
+ },
359
+ },
360
+ };
361
+ ```
362
+
363
+ ### Usage Example
364
+
365
+ ```javascript
366
+ const App = () => {
367
+ const customTheme = {
368
+ chatbot: {
369
+ width: '400px',
370
+ height: '600px',
371
+ backgroundColor: '#ffffff',
372
+ borderRadius: '12px',
373
+ },
374
+ botMessage: {
375
+ backgroundColor: '#f0f0f0',
376
+ },
377
+ userMessage: {
378
+ backgroundColor: '#007bff',
379
+ color: '#ffffff',
380
+ },
381
+ };
382
+
383
+ return (
384
+ <Chatbot
385
+ // ... other props
386
+ theme={customTheme}
387
+ />
388
+ );
389
+ };
390
+ ```
391
+
392
+ Note: When `fullScreen` prop is set to `true`, the chatbot's width and height will be set to `100vw` and `100vh` respectively, and `borderRadius` will be set to zero, regardless of theme settings.
393
+
394
+ ## Testing
395
+
396
+ The React package includes comprehensive tests using Vitest and React Testing Library.
397
+
398
+ ### Running Tests
399
+
400
+ ```sh
401
+ # Run tests once
402
+ yarn test:react
403
+
404
+ # Run tests in watch mode
405
+ yarn test:react:watch
406
+
407
+ # Run tests with UI
408
+ yarn test:react:ui
409
+
410
+ # Run tests with coverage
411
+ yarn test:react:coverage
412
+ ```
413
+
414
+ ### Test Structure
415
+
416
+ Tests are located alongside source files with `.spec.tsx` extensions:
417
+
418
+ - `src/components/chatbot/chatbot.spec.tsx` - React component tests
419
+ - Test environment: jsdom with React Testing Library
420
+ - Setup file: `src/test-setup.ts` (includes jest-dom)
421
+ - Coverage reports available in `test-output/vitest/coverage/`
422
+
423
+ ### Writing Tests
424
+
425
+ The package uses Vitest for testing with the following setup:
426
+
427
+ - TypeScript support
428
+ - jsdom environment for DOM APIs
429
+ - React Testing Library for component testing
430
+ - jest-dom matchers for enhanced assertions
431
+ - ESLint integration
432
+ - Coverage reporting with v8 provider
433
+
434
+ Example test structure:
435
+
436
+ ```javascript
437
+ import { describe, it, expect } from 'vitest';
438
+ import { render } from '@testing-library/react';
439
+ import '@testing-library/jest-dom';
440
+ import { Chatbot } from './chatbot';
441
+
442
+ describe('Chatbot Component', () => {
443
+ it('should render without crashing', () => {
444
+ const config = {
445
+ botProviderEndpoint: 'https://api.example.com/bot-provider/bp-123',
446
+ apiKey: 'test-key',
447
+ };
448
+
449
+ const { container } = render(
450
+ <Chatbot
451
+ title="Test Chatbot"
452
+ config={config}
453
+ customChannelId="test-channel"
454
+ />
455
+ );
456
+
457
+ expect(container).toBeInTheDocument();
458
+ });
459
+ });
460
+ ```
461
+
462
+ ## Development
463
+
464
+ To develop the React package locally, follow these steps:
465
+
466
+ 1. Clone the repository and navigate to the project root directory.
467
+
468
+ 2. Install dependencies:
469
+
470
+ ```sh
471
+ yarn install
472
+ ```
473
+
474
+ 3. Start development:
475
+
476
+ You can use the following commands to work with the React package:
477
+
478
+ ```sh
479
+ # Lint the React package
480
+ yarn lint:react
481
+
482
+ # Run tests
483
+ yarn test:react
484
+
485
+ # Build the package
486
+ yarn build:react
487
+
488
+ # Watch mode for development
489
+ yarn watch:react
490
+
491
+ # Run the demo application
492
+ yarn serve:react-demo
493
+ ```
494
+
495
+ Setup your npm registry token for yarn publishing:
496
+
497
+ ```sh
498
+ cd ~/
499
+ touch .npmrc
500
+ echo "//registry.npmjs.org/:_authToken={{YOUR_TOKEN}}" >> .npmrc
501
+ ```
502
+
503
+ For working with both core and React packages:
504
+
505
+ ```sh
506
+ # Lint both packages
507
+ yarn lint:packages
508
+
509
+ # Build core package (required for React package)
510
+ yarn build:core
511
+ yarn build:react
512
+
513
+ # Release packages
514
+ yarn release:core # Release core package
515
+ yarn release:react # Release React package
516
+ ```
517
+
518
+ All builds will be available in the `dist` directory of their respective packages.
519
+
520
+ ## Contributing
521
+
522
+ We welcome contributions! Please read our [contributing guide](../../CONTRIBUTING.md) to get started.
523
+
524
+ ## License
525
+
526
+ This project is licensed under the MIT License - see the [LICENSE](../../LICENSE) file for details.
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chatbot-body.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-body/chatbot-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,OAAO,CAAC;AAQtD,wBAAgB,WAAW,IAAI,SAAS,CAoCvC"}
@@ -1,8 +1,8 @@
1
- import { ConversationMessage } from '@asgard-js/core';
1
+ import { ConversationMessage } from '../../../../../core/src/index.ts';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  interface ConversationMessageRendererProps {
5
- conversationMessage: ConversationMessage;
5
+ message: ConversationMessage;
6
6
  }
7
7
  export declare function ConversationMessageRenderer(props: ConversationMessageRendererProps): ReactNode;
8
8
  export {};
@@ -0,0 +1 @@
1
+ {"version":3,"file":"conversation-message-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-body/conversation-message-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAuB,MAAM,iBAAiB,CAAC;AAW3E,UAAU,gCAAgC;IACxC,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAED,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,GACtC,SAAS,CAoCX"}
@@ -0,0 +1,2 @@
1
+ export * from './chatbot-body';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-body/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { PropsWithChildren, ReactNode, CSSProperties } from 'react';
2
+
3
+ interface ChatbotContainerProps extends PropsWithChildren {
4
+ className?: string;
5
+ style?: CSSProperties;
6
+ fullScreen?: boolean;
7
+ }
8
+ export declare function ChatbotContainer(props: ChatbotContainerProps): ReactNode;
9
+ export {};
10
+ //# sourceMappingURL=chatbot-container.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chatbot-container.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-container/chatbot-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAU,aAAa,EAAE,MAAM,OAAO,CAAC;AAO5E,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAmCxE"}
@@ -0,0 +1,4 @@
1
+ import { PropsWithChildren, ReactNode } from 'react';
2
+
3
+ export declare function ChatbotFullScreenContainer(props: PropsWithChildren): ReactNode;
4
+ //# sourceMappingURL=chatbot-full-screen-container.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chatbot-full-screen-container.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-container/chatbot-full-screen-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAWtE,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,iBAAiB,GACvB,SAAS,CAwCX"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chatbot-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-footer/chatbot-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAMV,MAAM,OAAO,CAAC;AAQf,wBAAgB,aAAa,IAAI,SAAS,CA0HzC"}
@@ -0,0 +1,2 @@
1
+ export * from './chatbot-footer';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-footer/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { Dispatch, ReactNode, SetStateAction, CSSProperties } from 'react';
2
+
3
+ interface SpeechInputButtonProps {
4
+ setValue: Dispatch<SetStateAction<string>>;
5
+ className?: string;
6
+ style?: CSSProperties;
7
+ }
8
+ export declare function SpeechInputButton(props: SpeechInputButtonProps): ReactNode;
9
+ export {};
10
+ //# sourceMappingURL=speech-input-button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"speech-input-button.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-footer/speech-input-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAER,SAAS,EACT,cAAc,EAMd,aAAa,EACd,MAAM,OAAO,CAAC;AAIf,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,SAAS,CA8G1E"}
@@ -0,0 +1,12 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ interface ChatbotHeaderProps {
4
+ title?: string;
5
+ customActions?: ReactNode[];
6
+ maintainConnectionWhenClosed?: boolean;
7
+ onClose?: () => void;
8
+ onReset?: () => void;
9
+ }
10
+ export declare function ChatbotHeader(props: ChatbotHeaderProps): ReactNode;
11
+ export {};
12
+ //# sourceMappingURL=chatbot-header.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chatbot-header.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-header/chatbot-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAY3E,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CA6ElE"}
@@ -0,0 +1,2 @@
1
+ export * from './chatbot-header';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chatbot/chatbot-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}