quickblox-react-ui-kit 0.4.0-beta.1 → 0.4.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 (34) hide show
  1. package/README.md +0 -324
  2. package/dist/Data/source/remote/IRemoteDataSource.d.ts +1 -2
  3. package/dist/Data/source/remote/RemoteDataSource.d.ts +2 -2
  4. package/dist/Presentation/ui-components/TextField/TextField.d.ts +1 -1
  5. package/dist/index-ui.js +15 -3
  6. package/dist/index-ui.js.map +1 -1
  7. package/dist/qb-api-calls/index.d.ts +1 -4
  8. package/package.json +3 -5
  9. package/src/Data/DefaultConfigurations.ts +1 -1
  10. package/src/Data/source/remote/IRemoteDataSource.ts +1 -5
  11. package/src/Data/source/remote/RemoteDataSource.ts +1 -1
  12. package/src/Domain/use_cases/ai/AIAnswerAssistWithSDKUseCase.ts +6 -8
  13. package/src/Domain/use_cases/ai/AITranslateWithSDKUseCase.ts +1 -1
  14. package/src/Presentation/Views/Dialog/AIWidgets/UseDefaultAIAssistAnswerWidgetWithSDK.tsx +12 -4
  15. package/src/qb-api-calls/index.ts +4 -3
  16. package/storybook-static/{703.776b9f13.iframe.bundle.js → 703.f12f2e71.iframe.bundle.js} +2 -2
  17. package/storybook-static/{703.776b9f13.iframe.bundle.js.map → 703.f12f2e71.iframe.bundle.js.map} +1 -1
  18. package/storybook-static/docs-Introduction-mdx.9dc275f1.iframe.bundle.js +10 -0
  19. package/storybook-static/{docs-Introduction-mdx.bcb06844.iframe.bundle.js.map → docs-Introduction-mdx.9dc275f1.iframe.bundle.js.map} +1 -1
  20. package/storybook-static/docs-Styling-mdx.72149f36.iframe.bundle.js +10 -0
  21. package/storybook-static/{docs-Styling-mdx.1d6c1212.iframe.bundle.js.map → docs-Styling-mdx.72149f36.iframe.bundle.js.map} +1 -1
  22. package/storybook-static/iframe.html +1 -1
  23. package/storybook-static/index.html +4 -8
  24. package/storybook-static/project.json +1 -1
  25. package/storybook-static/{runtime~main.3464b25a.iframe.bundle.js → runtime~main.72d6302b.iframe.bundle.js} +1 -1
  26. package/tsconfig.buildlib.json +33 -0
  27. package/storybook-static/docs-Introduction-mdx.bcb06844.iframe.bundle.js +0 -10
  28. package/storybook-static/docs-Styling-mdx.1d6c1212.iframe.bundle.js +0 -10
  29. package/storybook-static/sb-addons/onboarding-7/manager-bundle.js +0 -503
  30. package/storybook-static/sb-addons/onboarding-7/manager-bundle.js.LEGAL.txt +0 -48
  31. /package/storybook-static/sb-addons/{interactions-8 → interactions-7}/manager-bundle.js +0 -0
  32. /package/storybook-static/sb-addons/{interactions-8 → interactions-7}/manager-bundle.js.LEGAL.txt +0 -0
  33. /package/storybook-static/sb-addons/{viewport-9 → viewport-8}/manager-bundle.js +0 -0
  34. /package/storybook-static/sb-addons/{viewport-9 → viewport-8}/manager-bundle.js.LEGAL.txt +0 -0
package/README.md CHANGED
@@ -1,324 +0,0 @@
1
- <div align="center">
2
-
3
- <p>
4
- <a href="https://discord.gg/c6bxq9BC"><img src="https://img.shields.io/discord/1042743094833065985?color=5865F2&logo=discord&logoColor=white&label=QuickBlox%20Discord%20server&style=for-the-badge" alt="Discord server" /></a>
5
- </p>
6
-
7
- </div>
8
-
9
- # Overview
10
-
11
- The QuickBlox UIKit for React is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications.
12
-
13
- The main goal of the QuickBlox UIKit for React is to offer developers a streamlined and efficient way to implement chat functionality within their React applications.
14
-
15
- The QuickBlox UIKit for React offers modules that encapsulate complex chat functionalities, such as dialogs and chat management and real-time updates. These modules provide a simplified interface for integrating chat features into applications without the need for extensive knowledge of the underlying protocols or server-side infrastructure.
16
-
17
- You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
18
-
19
- # Screenshots
20
-
21
- Chat dashboard with list of dialogs and create new chat dialog;
22
-
23
- ![dashboard!](./src/Presentation/assets/img/web-doc.png "chats dashboard")
24
-
25
- ## Features
26
-
27
- QuickBlox UIKit for React provides next functionality:
28
- - List of dialogs
29
- - Create dialog(Private or Group)
30
- - Dialog screen
31
- - Send text, image, video, audio, file messages
32
- - Dialog info screen
33
- - List, invite, remove members
34
-
35
- # Send your first message
36
-
37
- The QuickBlox UIKit for React comprises a collection of pre-assembled UI components that enable effortless creation of an in-app chat equipped with all the necessary messaging functionalities. Our development kit encompasses light and dark themes, colors, and various other features. These components can be personalized to fashion an engaging messaging interface that reflects your brand's distinct identity.
38
-
39
- The QuickBlox UIKit fully supports both private and group dialogs. To initiate the process of sending a message from the ground up using Java or Kotlin, please refer to the instructions provided in the guide below.
40
- [Additional information with sample](https://docs.quickblox.com/docs/react-uikit-send-your-first-message)
41
- ## Requirements
42
-
43
- The minimum requirements for QuickBlox UIKit for React are:
44
- - JS QuickBlox SDK v2.15.5
45
- - React v.18.0
46
- - TypeScript v.4.9.3
47
-
48
- # Before you begin
49
-
50
- Register a new account following [this link](https://admin.quickblox.com/signup). Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
51
- Create the app clicking New app button.
52
- Configure the app. Type in the information about your organization into corresponding fields and click Add button.
53
- Go to Dashboard => YOUR_APP => Overview section and copy your Application ID, Authorization Key, Authorization Secret, and Account Key .
54
-
55
- ## Install QuickBlox SDK
56
-
57
- ```
58
- npm install quickblox
59
- ```
60
-
61
- ## Install QuickBlox UIKit
62
-
63
- ```
64
- npm install quickblox-react-ui-kit
65
- ```
66
-
67
- ## Init QuickBlox SDK
68
-
69
- To init QuickBlox SDK you need to pass Application ID, Authorization Key, Authorization Secret, and Account Key to the init() method.
70
-
71
- ```
72
- var APPLICATION_ID = 41;
73
- var AUTH_KEY = "lkjdueksu7392kj";
74
- var AUTH_SECRET = "iiohfdija792hj";
75
- var ACCOUNT_KEY = "sdjfnksnlk2bk1k34kb";
76
- var CONFIG = { debug: true };
77
-
78
- QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);
79
- ```
80
-
81
- ## Authentication
82
-
83
- Before sending your first message you need to authenticate users in the QuickBlox system. You can read more about different ways of authentication by [this link](https://docs.quickblox.com/docs/js-authentication).
84
- In our example we show how to authenticate user with login and password.
85
-
86
- ```
87
- import * as QB from "quickblox/quickblox";
88
- import {
89
- QuickBloxUIKitProvider,
90
- qbDataContext,
91
- QuickBloxUIKitDesktopLayout,
92
- LoginData,
93
- AuthorizationData,
94
- QBDataContextType,
95
- } from 'quickblox-ui-kit-react/dist/index-ui';
96
-
97
- var params = { login: "garry", password: "garry5santos" };
98
-
99
- QB.login(params, function(error, result) {
100
- if(error){
101
- } else {
102
- // Navigate User to the UIKit
103
- });
104
-
105
- const qbUIKitContext: QBDataContextType = React.useContext(qbDataContext);
106
- ```
107
- To order to config quickblox ui kit provider if you use SDK without session token:
108
- ```
109
- <QuickBloxUIKitProvider
110
- maxFileSize={100 * 1000000} //set max size for attachments
111
- accountData={{ ...QBConfig.credentials }}
112
- loginData={{
113
- login: params.login,
114
- password: params.password,
115
- }}
116
- >
117
- <QuickBloxUIKitDesktopLayout /> // container for DesktopLayout
118
- </QuickBloxUIKitProvider>
119
- ```
120
- To order to config quickblox ui kit provider if you use SDK with session token:
121
- ```
122
- <QuickBloxUIKitProvider
123
- maxFileSize={100 * 1000000} //set max size for attachments
124
- accountData={{ ...QBConfig.credentials }} // sessionToken was used in QBConfig
125
- >
126
- <QuickBloxUIKitDesktopLayout /> // container for DesktopLayout
127
- </QuickBloxUIKitProvider>
128
- ```
129
-
130
- # Customization
131
-
132
- The QuickBlox UIKit for React allows you to create your own unique view of the UIKit.
133
-
134
- ## Default themes
135
- The QuickBlox UIKit for React has 2 built in themes: Dark and Light.
136
- Default theme for UIKit is Light.
137
- To set theme you need to set value 'dark' to key data-theme in global styles (html[data-theme="dark”]).
138
- For example, you can use pure JavaScript:
139
-
140
- ```
141
- document.documentElement.setAttribute('data-theme', 'dark');
142
- ```
143
-
144
- ## Use your own theme
145
-
146
- There are two options how you can create your own theme:
147
- - Customize current theme using css
148
- - Create your own theme to customize selected components
149
-
150
- To customize the current theme you just need to set the new colors in css variables.
151
-
152
- Or you can create your own theme. To do this you need to create a new class that implements the UiKitTheme interface.
153
-
154
- To use your own theme using css you need to create _theme_colors_scheme.scss and set colors
155
- ```
156
- $background-overlay-light: rgba(19, 29, 40, .80);
157
- $background-overlay-dark: rgba(144, 151, 159, .80);
158
- $primary-50: #E7EFFF;
159
- $primary-100: #C4D7FE;
160
- $primary-200: #9CBCFE;
161
- $primary-300: #74A1FD;
162
- $primary-400: #578CFC;
163
- $primary-500: #3978FC;
164
- $primary-600: #3370FC;
165
- $primary-700: #2C65FB;
166
- $primary-800: #245BFB;
167
- $primary-900: #1748FA;
168
- $primary-a-100: #FFFFFF;
169
- $primary-a-200: #F7F9FF;
170
- $primary-a-400: #C4CFFF;
171
- $primary-a-700: #ABBAFF;
172
- $secondary-50: #E4E6E8;
173
- $secondary-100: #BCC1C5;
174
- $secondary-200: #90979F;
175
- $secondary-300: #636D78;
176
- $secondary-400: #414E5B;
177
- $secondary-500: #202F3E;
178
- $secondary-600: #1C2A38;
179
- $secondary-700: #182330;
180
- $secondary-800: #131D28;
181
- $secondary-900: #0B121B;
182
- $secondary-a-100: #74A1FD;
183
- $secondary-a-200: #3978FC;
184
- $secondary-a-400: #245BFB;
185
- $secondary-a-700: #0050DC;
186
- $system-green-100: #C8F1D6;
187
- $system-green-200: #A4E7BB;
188
- $system-green-300: #80DDA0;
189
- $system-green-400: #64D68B;
190
- $system-green-500: #49CF77;
191
- $error-100: #FFC4C1;
192
- $error-200: #FF9D98;
193
- $error-300: #FF766E;
194
- $error-400: #FF584F;
195
- $error-500: #FF3B30;
196
- $information: #FDB0FF;
197
- $highlight: #FFFDC1;
198
-
199
- ```
200
- To use your own new theme colors create _theme_dark.scss and _theme_light.scss files and set color variable.
201
- ```
202
- // _theme_dark.scss:
203
-
204
- html[data-theme="dark"]{
205
- --color-background-info: #{$primary-500};
206
- --tertiary-elements: #{$background-overlay-dark};
207
- --main-elements: #{$primary-300};
208
- --secondary-elements: #{$primary-a-100};
209
- --input-elements: #{$secondary-200};
210
- --disabled-elements: #{$secondary-300};
211
- --field-border: #{$secondary-200};
212
- --main-text: #{$primary-a-100};
213
- --secondary-text: #{$secondary-200};
214
- --caption: #{$secondary-100};
215
- --main-background: #{$secondary-500};
216
- --secondary-background: #{$secondary-800};
217
- --incoming-background: #{$secondary-400};
218
- --outgoing-background: #{$primary-500};
219
- --dropdown-background: #{$secondary-400};
220
- --chat-input: #{$secondary-800};
221
- --divider: #{$secondary-400};
222
- --error: #{$error-300};
223
- --hightlight: #{$highlight};
224
- }
225
-
226
- // _theme_light.scss:
227
- :root{
228
- --color-background-info:#{$primary-100};
229
- --tertiary-elements: #{$secondary-300};
230
- --main-elements: #{$primary-500};
231
- --secondary-elements: #{$secondary-500};
232
- --input-elements: #{$secondary-500};
233
- --disabled-elements: #{$secondary-100};
234
- --field-border: #{$secondary-200};
235
- --main-text: #{$secondary-900};
236
- --secondary-text: #{$secondary-300};
237
- --caption: #{$secondary-200};
238
- --main-background: #{$primary-a-100};
239
- --secondary-background: #{$primary-a-100};
240
- --secondary-background-modal: #{$background-overlay-light};
241
- --incoming-background: #{$secondary-50};
242
- --outgoing-background: #{$primary-50};
243
- --dropdown-background: #{$primary-a-100};
244
- --chat-input: #{$primary-a-200};
245
- --divider: #{$primary-50};
246
- --error: #{$error-500};
247
- --hightlight: #{$highlight};
248
- }
249
- ```
250
- To create your own theme to customize selected components you need to create a new class that implements the UiKitTheme interface.
251
- ```
252
- //DefaultTheme implements UiKitTheme
253
- export default class CustomTheme extends DefaultTheme {
254
- divider = (): string => 'var(--divider)';
255
- mainText = (): string => '#FFFFFF';
256
- fontFamily = (): string => 'Roboto';
257
- /*
258
- The DefaultTheme contains other theme methods :
259
- caption = (): string => 'var(--caption)';
260
- chatInput = (): string => 'var(--chat-input)';
261
- disabledElements = (): string => 'var(--disabled-elements)';
262
- dropdownBackground = (): string => 'var(--dropdown-background)';
263
- error = (): string => 'var(--error)';
264
- fieldBorder = (): string => 'var(--field-border)';
265
- hightlight = (): string => 'var(--hightlight)';
266
- incomingBackground = (): string => 'var(--incoming-background)';
267
- inputElements = (): string => 'var(--input-elements)';
268
- mainBackground = (): string => 'var(--main-background)';
269
- mainElements = (): string => 'var(--main-elements)';
270
- outgoingBackground = (): string => 'var(--outgoing-background)';
271
- secondaryBackground = (): string => 'var(--secondary-background)';
272
- secondaryElements = (): string => 'var(--secondary-elements)';
273
- secondaryText = (): string => 'var(--secondary-text)';
274
- */
275
- }
276
- ```
277
- and specify selected components:
278
- - desktop layout container
279
- ```
280
- <QuickBloxUIKitDesktopLayout theme={new CustomTheme()}>
281
- ```
282
- - header of dialogs
283
- ```
284
- <HeaderDialogs title="Dialog 2" theme={new CustomTheme()} />
285
- ```
286
- - item of dialogs
287
- ```
288
- <PreviewDialog
289
- theme={{ selected: true, muted: true, colorTheme={new CustomTheme()} }}
290
- title="Dialog with states"
291
- unreadMessageCount={9}
292
- message_date_time_sent="5 min ago"
293
- />
294
- ```
295
- # Sample
296
- The source code of the sample is available on GitHub:
297
- https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/react-chat-ui-kit-init-sample
298
- You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
299
-
300
- ## Video guide "How to use AI Feature"
301
- [Youtube video about AI Assistant](https://youtu.be/BneMtDagOy4)
302
- # License
303
- [](#license)
304
- MIT License [here](https://github.com/QuickBlox/react-ui-kit/blob/main/LICENSE.md).
305
-
306
- Copyright © 2023 QuickBlox.
307
-
308
- Permission is hereby granted, free of charge, to any person obtaining a copy
309
- of this software and associated documentation files (the "Software"), to deal
310
- in the Software without restriction, including without limitation the rights
311
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
312
- copies of the Software, and to permit persons to whom the Software is
313
- furnished to do so, subject to the following conditions:
314
-
315
- The above copyright notice and this permission notice shall be included in all
316
- copies or substantial portions of the Software.
317
-
318
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
319
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
320
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
321
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
322
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
323
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
324
- SOFTWARE.
@@ -1,4 +1,4 @@
1
- import { AIChatHistory } from 'quickblox';
1
+ import { AIChatHistory, AIAnswerResponse } from 'quickblox';
2
2
  import { RemoteDialogDTO } from '../../dto/dialog/RemoteDialogDTO';
3
3
  import { RemoteDialogsDTO } from '../../dto/dialog/RemoteDialogsDTO';
4
4
  import { RemoteUserDTO } from '../../dto/user/RemoteUserDTO';
@@ -9,7 +9,6 @@ import { RemoteFileDTO } from '../../dto/file/RemoteFileDTO';
9
9
  import { Pagination } from '../../../Domain/repository/Pagination';
10
10
  import { CallBackFunction } from '../../../Domain/use_cases/base/IUseCase';
11
11
  import { NotificationTypes } from '../../../Domain/entity/NotificationTypes';
12
- import { AIAnswerResponse } from "../../../qb-api-calls";
13
12
  export interface IRemoteMessaging<TArg> {
14
13
  subscribeOnSystemMessaging(notificationType: NotificationTypes, callback: CallBackFunction<TArg>): void;
15
14
  subscribeOnMessaging(callback: CallBackFunction<TArg>): void;
@@ -1,4 +1,4 @@
1
- import { AIChatHistory } from 'quickblox/quickblox';
1
+ import { AIChatHistory, AIAnswerResponse } from 'quickblox/quickblox';
2
2
  import { RemoteDialogDTO } from '../../dto/dialog/RemoteDialogDTO';
3
3
  import { RemoteDialogsDTO } from '../../dto/dialog/RemoteDialogsDTO';
4
4
  import { RemoteMessageDTO } from '../../dto/message/RemoteMessageDTO';
@@ -8,7 +8,7 @@ import { RemoteMessagesDTO } from '../../dto/message/RemoteMessagesDTO';
8
8
  import { RemoteFileDTO } from '../../dto/file/RemoteFileDTO';
9
9
  import { Pagination } from '../../../Domain/repository/Pagination';
10
10
  import { IDTOMapper } from './Mapper/IDTOMapper';
11
- import { AIAnswerResponse, QBInitParams } from '../../../qb-api-calls';
11
+ import { QBInitParams } from '../../../qb-api-calls';
12
12
  import { NotificationTypes } from '../../../Domain/entity/NotificationTypes';
13
13
  import { SubscriptionPerformer } from '../../../Domain/use_cases/base/Subscribable/SubscriptionPerformer';
14
14
  import { CallBackFunction } from '../../../Domain/use_cases/base/IUseCase';
@@ -9,5 +9,5 @@ interface TextFieldProps extends Omit<HTMLInputProps, 'onChange'> {
9
9
  value: string;
10
10
  onChange: (value: string) => void;
11
11
  }
12
- declare const TextField: import("react").ForwardRefExoticComponent<Pick<TextFieldProps, "id" | "name" | "size" | "type" | "value" | "children" | "loading" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "width" | "hidden" | "color" | "icon" | "multiple" | "disabled" | "className" | "onClick" | "key" | "height" | "translate" | "onChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "placeholder" | "readOnly" | "required" | "src" | "step" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLInputElement>>;
12
+ declare const TextField: import("react").ForwardRefExoticComponent<Pick<TextFieldProps, "id" | "name" | "size" | "type" | "value" | "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "onClick" | "key" | "color" | "height" | "translate" | "width" | "onChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "placeholder" | "readOnly" | "required" | "src" | "step" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "loading"> & import("react").RefAttributes<HTMLInputElement>>;
13
13
  export default TextField;
package/dist/index-ui.js CHANGED
@@ -10459,7 +10459,7 @@ var DefaultConfigurations = /** @class */ (function () {
10459
10459
  organizationName: 'Quickblox',
10460
10460
  openAIModel: 'gpt-3.5-turbo',
10461
10461
  smartChatAssistantId: '',
10462
- apiKey: '6633a1300fea600001bd6e71',
10462
+ apiKey: '',
10463
10463
  maxTokens: 3584,
10464
10464
  useDefault: true,
10465
10465
  defaultTone: 'Professional',
@@ -21358,6 +21358,9 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
21358
21358
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
21359
21359
  }
21360
21360
  };
21361
+ // interface AIChatMessageEx extends AIChatMessage {
21362
+ // content: string;
21363
+ // } // artik 19.05.2024
21361
21364
  var AIAnswerAssistWithSDKUseCase = /** @class */ (function () {
21362
21365
  function AIAnswerAssistWithSDKUseCase(textToSend, dialogMessages, dataSource, smartChatAssistantId) {
21363
21366
  console.log('CONSTRUCTOR AIAnswerAssistWithSDKUseCase');
@@ -21377,7 +21380,6 @@ var AIAnswerAssistWithSDKUseCase = /** @class */ (function () {
21377
21380
  return {
21378
21381
  role: msg.role,
21379
21382
  message: msg.content,
21380
- content: msg.content,
21381
21383
  };
21382
21384
  });
21383
21385
  return [4 /*yield*/, this.dataSource.createAnswer(this.textToSend, history, this.smartChatAssistantId)];
@@ -22942,9 +22944,16 @@ function UseDefaultAIAssistAnswerWidgetWithSDK(dataSource, smartChatAssistantId)
22942
22944
  useCaseAIAnswerAssist = new _Domain_use_cases_ai_AIAnswerAssistWithSDKUseCase__WEBPACK_IMPORTED_MODULE_4__.AIAnswerAssistWithSDKUseCase(textToSend,
22943
22945
  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
22944
22946
  context, dataSource, smartChatAssistantId);
22945
- return [4 /*yield*/, useCaseAIAnswerAssist.execute().then(function (data) {
22947
+ return [4 /*yield*/, useCaseAIAnswerAssist
22948
+ .execute()
22949
+ .then(function (data) {
22946
22950
  setTextFromWidgetToContent(data);
22947
22951
  return data;
22952
+ })
22953
+ .catch(function (reason) {
22954
+ console.log('SDK: ai answer assist error: ', reason);
22955
+ setTextFromWidgetToContent(JSON.stringify(reason));
22956
+ return reason;
22948
22957
  })];
22949
22958
  case 1:
22950
22959
  // eslint-disable-next-line no-return-await
@@ -33702,6 +33711,9 @@ function QBWebRTCSessionGetUserMedia(session, params) {
33702
33711
  });
33703
33712
  });
33704
33713
  }
33714
+ // export interface AIAnswerResponse {
33715
+ // answer: string;
33716
+ // } // artim 19.05.2024
33705
33717
  function QBAnswerAssist(smartChatAssistantId, messageToAssist, history) {
33706
33718
  return new Promise(function (resolve, reject) {
33707
33719
  // eslint-disable-next-line @typescript-eslint/no-unsafe-call