@memori.ai/memori-react 2.12.0 → 2.13.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.
- package/CHANGELOG.md +18 -0
- package/README.md +51 -0
- package/dist/components/Chat/Chat.css +3 -3
- package/dist/components/Chat/Chat.d.ts +2 -1
- package/dist/components/Chat/Chat.js +8 -3
- package/dist/components/Chat/Chat.js.map +1 -1
- package/dist/components/ChatBubble/ChatBubble.css +10 -5
- package/dist/components/MemoriWidget/MemoriWidget.d.ts +6 -4
- package/dist/components/MemoriWidget/MemoriWidget.js +20 -17
- package/dist/components/MemoriWidget/MemoriWidget.js.map +1 -1
- package/dist/components/Typing/Typing.d.ts +7 -0
- package/dist/components/Typing/Typing.js +46 -0
- package/dist/components/Typing/Typing.js.map +1 -0
- package/dist/components/Typing/Typing.test.d.ts +1 -0
- package/dist/components/Typing/Typing.test.js +23 -0
- package/dist/components/Typing/Typing.test.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/esm/components/Chat/Chat.css +3 -3
- package/esm/components/Chat/Chat.d.ts +2 -1
- package/esm/components/Chat/Chat.js +8 -3
- package/esm/components/Chat/Chat.js.map +1 -1
- package/esm/components/ChatBubble/ChatBubble.css +10 -5
- package/esm/components/MemoriWidget/MemoriWidget.d.ts +6 -4
- package/esm/components/MemoriWidget/MemoriWidget.js +21 -18
- package/esm/components/MemoriWidget/MemoriWidget.js.map +1 -1
- package/esm/components/Typing/Typing.d.ts +7 -0
- package/esm/components/Typing/Typing.js +44 -0
- package/esm/components/Typing/Typing.js.map +1 -0
- package/esm/components/Typing/Typing.test.d.ts +1 -0
- package/esm/components/Typing/Typing.test.js +20 -0
- package/esm/components/Typing/Typing.test.js.map +1 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +2 -2
- package/esm/index.js.map +1 -1
- package/package.json +10 -10
- package/src/components/Chat/Chat.css +3 -3
- package/src/components/Chat/Chat.tsx +20 -11
- package/src/components/Chat/__snapshots__/Chat.test.tsx.snap +14 -10
- package/src/components/ChatBubble/ChatBubble.css +10 -5
- package/src/components/MemoriWidget/MemoriWidget.tsx +34 -17
- package/src/components/Typing/Typing.stories.tsx +55 -0
- package/src/components/Typing/Typing.test.tsx +24 -0
- package/src/components/Typing/Typing.tsx +70 -0
- package/src/components/Typing/__snapshots__/Typing.test.tsx.snap +106 -0
- package/src/index.tsx +3 -0
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,YAEN,MAAM,wCAAwC,CAAC;AAEhD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,YAEN,MAAM,wCAAwC,CAAC;AAEhD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAmC/C,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,MAAM,eAAe,GAAG,SAAS,CAAC,QAAQ,CAAC;IAC3C,IAAI,eAAe,EAAE;QACnB,IAAI,GAAG,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC9B,OAAO;gBACL,GAAG;gBACH,WAAW,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;aACxC,CAAC;SACH;KACF;IACD,OAAO;QACL,GAAG,EAAE,IAAI;QACT,WAAW,EAAE,IAAI;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAoB,CAAC,EAC/B,aAAa,EACb,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,WAAW,EACX,SAAS,EACT,MAAM,GAAG,SAAS,EAClB,YAAY,EACZ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,MAAM,GAAG,MAAM,EACf,OAAO,EACP,MAAM,GAAG,2BAA2B,EACpC,GAAG,EACH,GAAG,EACH,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACV,YAAY,EACZ,SAAS,EACT,gCAAgC,EAChC,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,EAAE,EAAE;;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAW,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,gCAAgC,CACjC,CAAC;IACF,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/B,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,CAAC,EAAE;QACjE,MAAM,IAAI,KAAK,CACb,0GAA0G,CAC3G,CAAC;KACH;IAED,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAEvC,MAAM,cAAc,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC5C,MAAM,GAAG,GACP,OAAO;YACP,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;QACvE,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,GAAG,GAAG,gBAAgB,CAAC,CAAC;QACnD,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,IAAI,EAAE,CAAC;QAEjC,IAAI,IAAI,CAAC,gCAAgC,EAAE;YACzC,YAAY,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;SACrD;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,gCAAgC,EAAE;YACrC,cAAc,EAAE,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC,CAAC;IAKvC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACzC,IAAI,QAAQ,IAAI,WAAW,EAAE;YAC3B,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,oBAAoB,CACnE,QAAQ,EACR,WAAW,EACX,QAAQ,CACT,CAAC;YAEF,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE;gBACrC,SAAS,CAAC,MAAM,CAAC,CAAC;aACnB;iBAAM;gBACL,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;aACzC;SACF;aAAM,IAAI,UAAU,IAAI,aAAa,EAAE;YACtC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CACxD,QAAQ,EACR,aAAa,EACb,UAAU,CACX,CAAC;YAEF,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE;gBACrC,SAAS,CAAC,MAAM,CAAC,CAAC;aACnB;iBAAM;gBACL,OAAO,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;aACzC;SACF;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IACjE,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAK5B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YAEV,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;SAC3C;aAAM;YACL,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,qBAAqB,EAAE,CAAC;YAErD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;gBAElC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,YAAY,IACX,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,EACd,OAAO,EACL,OAAO;YACP,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,QAAQ,EAAE,CAAC,EAEtE,MAAM,EAAE,MAAM,EACd,MAAM,EAAE;YACN,GAAG,MAAM;YACT,WAAW;SACZ,EACD,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAA,MAAA,MAAM,CAAC,OAAO,0CAAE,KAAK,CAAC,GAAG,CAAC,0CAAG,CAAC,CAAC,EACzD,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE;YACN,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE;gBACN,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,KAAK;gBAClB,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa;aACxC;SACF,EACD,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAC1C,aAAa;YACX,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,aAAa;YACnC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,oBAAoB,CACnD,EACD,kBAAkB,EAAE,OAAO,EAC3B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,gCAAgC,EAC9B,SAAS,IAAI,gCAAgC,EAE/C,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE,mBAAmB,EACxC,kBAAkB,EAAE,kBAAkB,KAClC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACzD,CACH,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SACzB,YAED,aAAG,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,aACnD,CAAC,CAAC,SAAS,CAAC,WACX,GACA,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IACjB,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,QAAQ,EAAE,SAAS,CAAC,MAAM;IAC1B,aAAa,EAAE,SAAS,CAAC,MAAM;IAC/B,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,aAAa,EAAE,SAAS,CAAC,MAAM;IAC/B,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACrC,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,SAAS,EAAE,SAAS,CAAC,IAAI;IACzB,YAAY,EAAE,SAAS,CAAC,IAAI;IAC5B,YAAY,EAAE,SAAS,CAAC,IAAI;IAC5B,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IACjE,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACjE,OAAO,EAAE,SAAS,CAAC,MAAM;IACzB,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,GAAG,EAAE,SAAS,CAAC,MAAM;IACrB,GAAG,EAAE,SAAS,CAAC,MAAM;IACrB,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IAC1C,eAAe,EAAE,SAAS,CAAC,MAAM;IACjC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACrC,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,gCAAgC,EAAE,SAAS,CAAC,MAAM;IAClD,aAAa,EAAE,SAAS,CAAC,IAAI;CAC9B,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.
|
|
2
|
+
"version": "2.13.0",
|
|
3
3
|
"name": "@memori.ai/memori-react",
|
|
4
4
|
"author": "Memori Srl",
|
|
5
5
|
"main": "dist/index.js",
|
|
@@ -223,13 +223,13 @@
|
|
|
223
223
|
"@commitlint/config-conventional": "17.3.0",
|
|
224
224
|
"@release-it/conventional-changelog": "5.1.1",
|
|
225
225
|
"@size-limit/preset-small-lib": "8.1.0",
|
|
226
|
-
"@storybook/addon-essentials": "7.
|
|
226
|
+
"@storybook/addon-essentials": "7.3.2",
|
|
227
227
|
"@storybook/addon-info": "5.3.21",
|
|
228
|
-
"@storybook/addon-links": "7.
|
|
229
|
-
"@storybook/addon-mdx-gfm": "7.
|
|
230
|
-
"@storybook/addons": "7.
|
|
231
|
-
"@storybook/react": "7.
|
|
232
|
-
"@storybook/react-webpack5": "7.
|
|
228
|
+
"@storybook/addon-links": "7.3.2",
|
|
229
|
+
"@storybook/addon-mdx-gfm": "7.3.2",
|
|
230
|
+
"@storybook/addons": "7.3.2",
|
|
231
|
+
"@storybook/react": "7.3.2",
|
|
232
|
+
"@storybook/react-webpack5": "7.3.2",
|
|
233
233
|
"@testing-library/jest-dom": "5.16.5",
|
|
234
234
|
"@testing-library/react": "13.4.0",
|
|
235
235
|
"@types/jest": "29.2.4",
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
"eslint-plugin-prettier": "4.2.1",
|
|
253
253
|
"eslint-plugin-react": "7.31.11",
|
|
254
254
|
"eslint-plugin-react-hooks": "4.6.0",
|
|
255
|
-
"eslint-plugin-storybook": "0.6.
|
|
255
|
+
"eslint-plugin-storybook": "0.6.13",
|
|
256
256
|
"husky": "8.0.2",
|
|
257
257
|
"identity-obj-proxy": "3.0.0",
|
|
258
258
|
"is-ci": "3.0.1",
|
|
@@ -267,7 +267,7 @@
|
|
|
267
267
|
"release-it": "15.5.0",
|
|
268
268
|
"rimraf": "3.0.2",
|
|
269
269
|
"size-limit": "8.1.0",
|
|
270
|
-
"storybook": "7.
|
|
270
|
+
"storybook": "7.3.2",
|
|
271
271
|
"stylelint": "14.15.0",
|
|
272
272
|
"stylelint-config-idiomatic-order": "9.0.0",
|
|
273
273
|
"stylelint-config-prettier": "9.0.4",
|
|
@@ -283,7 +283,7 @@
|
|
|
283
283
|
"dependencies": {
|
|
284
284
|
"@fontsource/exo-2": "^4.5.10",
|
|
285
285
|
"@headlessui/react": "1.7.4",
|
|
286
|
-
"@memori.ai/memori-api-client": "^2.2.
|
|
286
|
+
"@memori.ai/memori-api-client": "^2.2.2",
|
|
287
287
|
"@react-three/drei": "8.20.2",
|
|
288
288
|
"@react-three/fiber": "7.0.25",
|
|
289
289
|
"antd": "4.18.9",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
border-top-right-radius: 3px;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
.memori-chat--cover
|
|
52
|
+
.memori-chat--cover+.memori-chat--bubble-initial {
|
|
53
53
|
display: none;
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
white-space: nowrap;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
-
.memori-chat--context-tag
|
|
106
|
+
.memori-chat--context-tag+.memori-chat--context-tag {
|
|
107
107
|
margin-top: 0.5rem;
|
|
108
108
|
}
|
|
109
109
|
|
|
@@ -115,4 +115,4 @@
|
|
|
115
115
|
|
|
116
116
|
.memori-chat--known-tag {
|
|
117
117
|
margin-right: 0.5rem;
|
|
118
|
-
}
|
|
118
|
+
}
|
|
@@ -15,6 +15,7 @@ import MediaWidget, {
|
|
|
15
15
|
import Button from '../ui/Button';
|
|
16
16
|
import memoriApiClient from '@memori.ai/memori-api-client';
|
|
17
17
|
import ChatInputs from '../ChatInputs/ChatInputs';
|
|
18
|
+
import Typing from '../Typing/Typing';
|
|
18
19
|
|
|
19
20
|
export interface Props {
|
|
20
21
|
memori: Memori;
|
|
@@ -23,7 +24,8 @@ export interface Props {
|
|
|
23
24
|
translateTo?: string;
|
|
24
25
|
baseUrl?: string;
|
|
25
26
|
apiUrl?: string;
|
|
26
|
-
memoriTyping?: boolean;
|
|
27
|
+
memoriTyping?: boolean | string;
|
|
28
|
+
showTypingText?: boolean;
|
|
27
29
|
history: Message[];
|
|
28
30
|
authToken?: string;
|
|
29
31
|
dialogState?: DialogState;
|
|
@@ -64,6 +66,7 @@ const Chat: React.FC<Props> = ({
|
|
|
64
66
|
apiUrl,
|
|
65
67
|
translateTo,
|
|
66
68
|
memoriTyping,
|
|
69
|
+
showTypingText = false,
|
|
67
70
|
history = [],
|
|
68
71
|
authToken,
|
|
69
72
|
dialogState,
|
|
@@ -258,16 +261,6 @@ const Chat: React.FC<Props> = ({
|
|
|
258
261
|
</React.Fragment>
|
|
259
262
|
))}
|
|
260
263
|
|
|
261
|
-
{memoriTyping && (
|
|
262
|
-
<div className="memori-chat--bubble">
|
|
263
|
-
<div id="wave">
|
|
264
|
-
<span className="dot"></span>
|
|
265
|
-
<span className="dot"></span>
|
|
266
|
-
<span className="dot"></span>
|
|
267
|
-
</div>
|
|
268
|
-
</div>
|
|
269
|
-
)}
|
|
270
|
-
|
|
271
264
|
{dialogState?.hints && dialogState.hints.length > 0 && (
|
|
272
265
|
<MediaWidget
|
|
273
266
|
simulateUserPrompt={simulateUserPrompt}
|
|
@@ -281,6 +274,22 @@ const Chat: React.FC<Props> = ({
|
|
|
281
274
|
}
|
|
282
275
|
/>
|
|
283
276
|
)}
|
|
277
|
+
|
|
278
|
+
{!!memoriTyping && (
|
|
279
|
+
<Typing
|
|
280
|
+
useDefaultSentences={showTypingText}
|
|
281
|
+
lang={
|
|
282
|
+
translateTo
|
|
283
|
+
? translateTo.toLowerCase() === 'it'
|
|
284
|
+
? 'it'
|
|
285
|
+
: 'en'
|
|
286
|
+
: 'en'
|
|
287
|
+
}
|
|
288
|
+
sentence={
|
|
289
|
+
typeof memoriTyping === 'string' ? memoriTyping : undefined
|
|
290
|
+
}
|
|
291
|
+
/>
|
|
292
|
+
)}
|
|
284
293
|
<div id="end-messages-ref" />
|
|
285
294
|
</div>
|
|
286
295
|
</div>
|
|
@@ -3506,17 +3506,21 @@ exports[`renders Chat with memori typing unchanged 1`] = `
|
|
|
3506
3506
|
class="memori-chat--bubble"
|
|
3507
3507
|
>
|
|
3508
3508
|
<div
|
|
3509
|
-
|
|
3509
|
+
class="memori-chat--bubble-typing"
|
|
3510
3510
|
>
|
|
3511
|
-
<
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3511
|
+
<div
|
|
3512
|
+
id="wave"
|
|
3513
|
+
>
|
|
3514
|
+
<span
|
|
3515
|
+
class="dot"
|
|
3516
|
+
/>
|
|
3517
|
+
<span
|
|
3518
|
+
class="dot"
|
|
3519
|
+
/>
|
|
3520
|
+
<span
|
|
3521
|
+
class="dot"
|
|
3522
|
+
/>
|
|
3523
|
+
</div>
|
|
3520
3524
|
</div>
|
|
3521
3525
|
</div>
|
|
3522
3526
|
<div
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
.memori-chat--bubble #wave {
|
|
37
37
|
position: relative;
|
|
38
|
-
width:
|
|
38
|
+
width: 50px;
|
|
39
39
|
margin-right: auto;
|
|
40
40
|
margin-left: auto;
|
|
41
41
|
text-align: center;
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
|
|
44
44
|
.memori-chat--bubble #wave .dot {
|
|
45
45
|
display: inline-block;
|
|
46
|
-
width:
|
|
47
|
-
height:
|
|
46
|
+
width: 6px;
|
|
47
|
+
height: 6px;
|
|
48
48
|
border-radius: 50%;
|
|
49
49
|
margin-right: 3px;
|
|
50
50
|
animation: wave 1.5s linear infinite;
|
|
@@ -59,12 +59,16 @@
|
|
|
59
59
|
animation-delay: -1.1s;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
.memori-chat--bubble-typing {
|
|
63
|
+
display: flex;
|
|
64
|
+
}
|
|
65
|
+
|
|
62
66
|
.memori-chat--bubble p {
|
|
63
67
|
margin-top: 0;
|
|
64
68
|
margin-bottom: 0;
|
|
65
69
|
}
|
|
66
70
|
|
|
67
|
-
.memori-chat--bubble p
|
|
71
|
+
.memori-chat--bubble p+p {
|
|
68
72
|
margin-top: 0.5em;
|
|
69
73
|
}
|
|
70
74
|
|
|
@@ -215,6 +219,7 @@
|
|
|
215
219
|
}
|
|
216
220
|
|
|
217
221
|
@keyframes wave {
|
|
222
|
+
|
|
218
223
|
0%,
|
|
219
224
|
60%,
|
|
220
225
|
100% {
|
|
@@ -224,4 +229,4 @@
|
|
|
224
229
|
30% {
|
|
225
230
|
transform: translateY(-10px);
|
|
226
231
|
}
|
|
227
|
-
}
|
|
232
|
+
}
|
|
@@ -29,7 +29,6 @@ import React, {
|
|
|
29
29
|
useCallback,
|
|
30
30
|
CSSProperties,
|
|
31
31
|
useRef,
|
|
32
|
-
memo,
|
|
33
32
|
} from 'react';
|
|
34
33
|
import { useTranslation } from 'react-i18next';
|
|
35
34
|
import memoriApiClient from '@memori.ai/memori-api-client';
|
|
@@ -99,25 +98,31 @@ type MemoriTextEnteredEvent = CustomEvent<{
|
|
|
99
98
|
text: string;
|
|
100
99
|
waitForPrevious?: boolean;
|
|
101
100
|
hidden?: boolean;
|
|
101
|
+
typingText?: string;
|
|
102
102
|
}>;
|
|
103
103
|
|
|
104
104
|
const typeMessage = (
|
|
105
105
|
message: string,
|
|
106
106
|
waitForPrevious = true,
|
|
107
|
-
hidden = false
|
|
107
|
+
hidden = false,
|
|
108
|
+
typingText?: string
|
|
108
109
|
) => {
|
|
109
110
|
const e: MemoriTextEnteredEvent = new CustomEvent('MemoriTextEntered', {
|
|
110
111
|
detail: {
|
|
111
112
|
text: message,
|
|
112
113
|
waitForPrevious,
|
|
113
114
|
hidden,
|
|
115
|
+
typingText,
|
|
114
116
|
},
|
|
115
117
|
});
|
|
116
118
|
|
|
117
119
|
document.dispatchEvent(e);
|
|
118
120
|
};
|
|
119
|
-
const typeMessageHidden = (
|
|
120
|
-
|
|
121
|
+
const typeMessageHidden = (
|
|
122
|
+
message: string,
|
|
123
|
+
waitForPrevious = true,
|
|
124
|
+
typingText?: string
|
|
125
|
+
) => typeMessage(message, waitForPrevious, true, typingText);
|
|
121
126
|
|
|
122
127
|
interface CustomEventMap {
|
|
123
128
|
MemoriTextEntered: MemoriTextEnteredEvent;
|
|
@@ -190,6 +195,7 @@ export interface Props {
|
|
|
190
195
|
showDates?: boolean;
|
|
191
196
|
showContextPerLine?: boolean;
|
|
192
197
|
showSettings?: boolean;
|
|
198
|
+
showTypingText?: boolean;
|
|
193
199
|
preview?: boolean;
|
|
194
200
|
embed?: boolean;
|
|
195
201
|
height?: number | string;
|
|
@@ -230,6 +236,7 @@ const MemoriWidget = ({
|
|
|
230
236
|
showDates = false,
|
|
231
237
|
showContextPerLine = false,
|
|
232
238
|
showSettings = true,
|
|
239
|
+
showTypingText = false,
|
|
233
240
|
height = '100vh',
|
|
234
241
|
secret,
|
|
235
242
|
baseUrl = 'https://app.twincreator.com',
|
|
@@ -294,7 +301,7 @@ const MemoriWidget = ({
|
|
|
294
301
|
);
|
|
295
302
|
|
|
296
303
|
const [loading, setLoading] = useState(false);
|
|
297
|
-
const [memoriTyping, setMemoriTyping] = useState(false);
|
|
304
|
+
const [memoriTyping, setMemoriTyping] = useState<boolean | string>(false);
|
|
298
305
|
|
|
299
306
|
const selectedLayout = layout || integrationConfig?.layout || 'DEFAULT';
|
|
300
307
|
|
|
@@ -419,7 +426,8 @@ const MemoriWidget = ({
|
|
|
419
426
|
newSessionId?: string,
|
|
420
427
|
translate: boolean = true,
|
|
421
428
|
translatedText?: string,
|
|
422
|
-
hidden: boolean = false
|
|
429
|
+
hidden: boolean = false,
|
|
430
|
+
typingText?: string
|
|
423
431
|
) => {
|
|
424
432
|
const sessionID =
|
|
425
433
|
newSessionId ||
|
|
@@ -438,7 +446,7 @@ const MemoriWidget = ({
|
|
|
438
446
|
: !!newSessionId,
|
|
439
447
|
});
|
|
440
448
|
|
|
441
|
-
setMemoriTyping(true);
|
|
449
|
+
setMemoriTyping(typingText ?? true);
|
|
442
450
|
|
|
443
451
|
let msg = text;
|
|
444
452
|
|
|
@@ -748,6 +756,7 @@ const MemoriWidget = ({
|
|
|
748
756
|
...params,
|
|
749
757
|
additionalInfo: {
|
|
750
758
|
...(additionalInfo || {}),
|
|
759
|
+
loginToken: additionalInfo?.loginToken ?? authToken,
|
|
751
760
|
language: getCultureCodeByLanguage(userLang),
|
|
752
761
|
referral: referral,
|
|
753
762
|
},
|
|
@@ -835,6 +844,7 @@ const MemoriWidget = ({
|
|
|
835
844
|
birthDate: birthDate || storageBirthDate || undefined,
|
|
836
845
|
additionalInfo: {
|
|
837
846
|
...(additionalInfo || {}),
|
|
847
|
+
loginToken: additionalInfo?.loginToken ?? authToken,
|
|
838
848
|
language: getCultureCodeByLanguage(userLang),
|
|
839
849
|
referral: referral,
|
|
840
850
|
},
|
|
@@ -955,6 +965,7 @@ const MemoriWidget = ({
|
|
|
955
965
|
birthDate: birthDate || storageBirthDate || undefined,
|
|
956
966
|
additionalInfo: {
|
|
957
967
|
...(additionalInfo || {}),
|
|
968
|
+
loginToken: additionalInfo?.loginToken ?? authToken,
|
|
958
969
|
language: getCultureCodeByLanguage(userLang),
|
|
959
970
|
referral: referral,
|
|
960
971
|
},
|
|
@@ -1030,7 +1041,7 @@ const MemoriWidget = ({
|
|
|
1030
1041
|
!!speechSynthesizer ||
|
|
1031
1042
|
isPlayingAudio ||
|
|
1032
1043
|
!!userMessage.length ||
|
|
1033
|
-
memoriTyping ||
|
|
1044
|
+
!!memoriTyping ||
|
|
1034
1045
|
listening
|
|
1035
1046
|
) {
|
|
1036
1047
|
resetInteractionTimeout();
|
|
@@ -1096,7 +1107,7 @@ const MemoriWidget = ({
|
|
|
1096
1107
|
timeoutRef.current = uiTimeout;
|
|
1097
1108
|
};
|
|
1098
1109
|
useEffect(() => {
|
|
1099
|
-
if (!!userMessage.length || isPlayingAudio || memoriTyping)
|
|
1110
|
+
if (!!userMessage.length || isPlayingAudio || !!memoriTyping)
|
|
1100
1111
|
clearInteractionTimeout();
|
|
1101
1112
|
if (sessionId && !!!userMessage.length) resetInteractionTimeout();
|
|
1102
1113
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -1997,17 +2008,14 @@ const MemoriWidget = ({
|
|
|
1997
2008
|
// to use in integrations or snippets
|
|
1998
2009
|
const memoriTextEnteredHandler = useCallback(
|
|
1999
2010
|
(e: MemoriTextEnteredEvent) => {
|
|
2000
|
-
const { text, waitForPrevious, hidden } = e.detail;
|
|
2001
|
-
|
|
2002
|
-
const sessionID =
|
|
2003
|
-
sessionId || (window.getMemoriState() as MemoriSession)?.sessionID;
|
|
2011
|
+
const { text, waitForPrevious, hidden, typingText } = e.detail;
|
|
2004
2012
|
|
|
2005
2013
|
if (text) {
|
|
2006
2014
|
// wait to finish reading previous emission
|
|
2007
2015
|
if (
|
|
2008
2016
|
waitForPrevious &&
|
|
2009
2017
|
!speakerMuted &&
|
|
2010
|
-
(memoriSpeaking || memoriTyping)
|
|
2018
|
+
(memoriSpeaking || !!memoriTyping)
|
|
2011
2019
|
) {
|
|
2012
2020
|
setTimeout(() => {
|
|
2013
2021
|
memoriTextEnteredHandler(e);
|
|
@@ -2015,7 +2023,15 @@ const MemoriWidget = ({
|
|
|
2015
2023
|
} else {
|
|
2016
2024
|
stopListening();
|
|
2017
2025
|
stopAudio();
|
|
2018
|
-
sendMessage(
|
|
2026
|
+
sendMessage(
|
|
2027
|
+
text,
|
|
2028
|
+
undefined,
|
|
2029
|
+
undefined,
|
|
2030
|
+
undefined,
|
|
2031
|
+
undefined,
|
|
2032
|
+
hidden,
|
|
2033
|
+
typingText
|
|
2034
|
+
);
|
|
2019
2035
|
}
|
|
2020
2036
|
}
|
|
2021
2037
|
},
|
|
@@ -2371,7 +2387,7 @@ const MemoriWidget = ({
|
|
|
2371
2387
|
setAvatar3dVisible,
|
|
2372
2388
|
hasUserActivatedSpeak,
|
|
2373
2389
|
isPlayingAudio,
|
|
2374
|
-
loading: memoriTyping,
|
|
2390
|
+
loading: !!memoriTyping,
|
|
2375
2391
|
baseUrl,
|
|
2376
2392
|
apiUrl,
|
|
2377
2393
|
};
|
|
@@ -2412,6 +2428,7 @@ const MemoriWidget = ({
|
|
|
2412
2428
|
baseUrl,
|
|
2413
2429
|
apiUrl,
|
|
2414
2430
|
memoriTyping,
|
|
2431
|
+
showTypingText,
|
|
2415
2432
|
history: layout === 'TOTEM' ? history.slice(-2) : history,
|
|
2416
2433
|
authToken: loginToken,
|
|
2417
2434
|
dialogState: currentDialogState,
|
|
@@ -2747,4 +2764,4 @@ const MemoriWidget = ({
|
|
|
2747
2764
|
);
|
|
2748
2765
|
};
|
|
2749
2766
|
|
|
2750
|
-
export default
|
|
2767
|
+
export default MemoriWidget;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Meta, Story } from '@storybook/react';
|
|
3
|
+
import Typing, { Props } from './Typing';
|
|
4
|
+
|
|
5
|
+
const meta: Meta = {
|
|
6
|
+
title: 'Widget/Typing',
|
|
7
|
+
component: Typing,
|
|
8
|
+
argTypes: {
|
|
9
|
+
useDefaultSentences: {
|
|
10
|
+
control: {
|
|
11
|
+
type: 'boolean',
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
lang: {
|
|
15
|
+
control: {
|
|
16
|
+
type: 'select',
|
|
17
|
+
options: ['en', 'it'],
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
sentence: {
|
|
21
|
+
control: {
|
|
22
|
+
type: 'text',
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
parameters: {
|
|
27
|
+
controls: { expanded: false },
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export default meta;
|
|
32
|
+
|
|
33
|
+
const Template: Story<Props> = args => <Typing {...args} />;
|
|
34
|
+
|
|
35
|
+
// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
|
|
36
|
+
// https://storybook.js.org/docs/react/workflows/unit-testing
|
|
37
|
+
export const Default = Template.bind({});
|
|
38
|
+
Default.args = {};
|
|
39
|
+
|
|
40
|
+
export const WithLoadingTextIT = Template.bind({});
|
|
41
|
+
WithLoadingTextIT.args = {
|
|
42
|
+
useDefaultSentences: true,
|
|
43
|
+
lang: 'it',
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export const WithLoadingTextEN = Template.bind({});
|
|
47
|
+
WithLoadingTextEN.args = {
|
|
48
|
+
useDefaultSentences: true,
|
|
49
|
+
lang: 'en',
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export const WithCustomLoadingText = Template.bind({});
|
|
53
|
+
WithCustomLoadingText.args = {
|
|
54
|
+
sentence: 'Chiedo agli unicorni cosa ne pensano...',
|
|
55
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { render } from '@testing-library/react';
|
|
2
|
+
import Typing from './Typing';
|
|
3
|
+
|
|
4
|
+
it('renders Typing unchanged', () => {
|
|
5
|
+
const { container } = render(<Typing />);
|
|
6
|
+
expect(container).toMatchSnapshot();
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
it('renders Typing with default loading text unchanged', () => {
|
|
10
|
+
const { container } = render(<Typing useDefaultSentences lang="en" />);
|
|
11
|
+
expect(container).toMatchSnapshot();
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it('renders Typing with default italian loading text unchanged', () => {
|
|
15
|
+
const { container } = render(<Typing useDefaultSentences lang="it" />);
|
|
16
|
+
expect(container).toMatchSnapshot();
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('renders Typing with custom loading text unchanged', () => {
|
|
20
|
+
const { container } = render(
|
|
21
|
+
<Typing sentence="Chiedo agli unicorni cosa ne pensano..." />
|
|
22
|
+
);
|
|
23
|
+
expect(container).toMatchSnapshot();
|
|
24
|
+
});
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
const separator = ' ';
|
|
4
|
+
const sentences = {
|
|
5
|
+
en: [
|
|
6
|
+
'Generating an accurate and fancy response...',
|
|
7
|
+
'Generating a response that will blow your mind...',
|
|
8
|
+
'Generating a response that will make you smile...',
|
|
9
|
+
'Thinking of a response...',
|
|
10
|
+
'Thinking of a response that will make you smile...',
|
|
11
|
+
'Gathering my thoughts...',
|
|
12
|
+
'Gathering my thoughts to give you a response...',
|
|
13
|
+
],
|
|
14
|
+
it: [
|
|
15
|
+
'Sto generando una risposta accurata e fantasiosa...',
|
|
16
|
+
'Sto generando una risposta che ti farà impazzire...',
|
|
17
|
+
'Sto generando una risposta che ti farà sorridere...',
|
|
18
|
+
'Sto pensando ad una risposta...',
|
|
19
|
+
'Sto pensando ad una risposta che ti farà sorridere...',
|
|
20
|
+
'Sto raccogliendo i miei pensieri...',
|
|
21
|
+
'Sto raccogliendo i miei pensieri per darti una risposta...',
|
|
22
|
+
],
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export interface Props {
|
|
26
|
+
useDefaultSentences?: boolean;
|
|
27
|
+
lang?: 'en' | 'it';
|
|
28
|
+
sentence?: string;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const Typing = ({
|
|
32
|
+
useDefaultSentences = false,
|
|
33
|
+
lang = 'en',
|
|
34
|
+
sentence,
|
|
35
|
+
}: Props) => {
|
|
36
|
+
const [text, setText] = useState(sentence ? `${sentence}${separator}` : '');
|
|
37
|
+
const [shownText, setShownText] = useState('');
|
|
38
|
+
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
const interval = setInterval(() => {
|
|
41
|
+
const letter = text[shownText.length];
|
|
42
|
+
if (letter !== undefined && text.length > 0) {
|
|
43
|
+
setShownText(prev => prev + letter);
|
|
44
|
+
} else if (!sentence && useDefaultSentences) {
|
|
45
|
+
setShownText('');
|
|
46
|
+
setText(
|
|
47
|
+
sentences[lang][Math.floor(Math.random() * sentences[lang].length)] +
|
|
48
|
+
separator
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
}, 50);
|
|
52
|
+
|
|
53
|
+
return () => clearInterval(interval);
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div className="memori-chat--bubble">
|
|
58
|
+
<div className="memori-chat--bubble-typing">
|
|
59
|
+
<div id="wave">
|
|
60
|
+
<span className="dot"></span>
|
|
61
|
+
<span className="dot"></span>
|
|
62
|
+
<span className="dot"></span>
|
|
63
|
+
</div>
|
|
64
|
+
{text.length > 0 && <p>{shownText}</p>}
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export default Typing;
|