@postnord/pn-marketweb-components 4.1.2 → 4.2.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/cjs/pn-chat-message_2.cjs.entry.js +5 -5
- package/cjs/pn-chat-message_2.cjs.entry.js.map +1 -1
- package/cjs/pn-chat.cjs.entry.js +18 -6
- package/cjs/pn-chat.cjs.entry.js.map +1 -1
- package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.css +27 -10
- package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js +3 -3
- package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js.map +1 -1
- package/collection/components/widgets/pn-chat/pn-chat-stories-constants.js +18 -0
- package/collection/components/widgets/pn-chat/pn-chat-stories-constants.js.map +1 -1
- package/collection/components/widgets/pn-chat/pn-chat.css +24 -13
- package/collection/components/widgets/pn-chat/pn-chat.js +17 -5
- package/collection/components/widgets/pn-chat/pn-chat.js.map +1 -1
- package/collection/components/widgets/pn-chat/pn-chat.stories.js +43 -0
- package/collection/components/widgets/pn-chat/pn-chat.stories.js.map +1 -1
- package/components/pn-chat-message2.js +5 -5
- package/components/pn-chat-message2.js.map +1 -1
- package/components/pn-chat.js +18 -6
- package/components/pn-chat.js.map +1 -1
- package/esm/pn-chat-message_2.entry.js +5 -5
- package/esm/pn-chat-message_2.entry.js.map +1 -1
- package/esm/pn-chat.entry.js +18 -6
- package/esm/pn-chat.entry.js.map +1 -1
- package/package.json +14 -17
- package/pn-market-web-components/p-4a8ef165.entry.js +2 -0
- package/pn-market-web-components/p-4a8ef165.entry.js.map +1 -0
- package/pn-market-web-components/p-6f6ed930.entry.js +2 -0
- package/pn-market-web-components/p-6f6ed930.entry.js.map +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/types/components/widgets/pn-chat/pn-chat-stories-constants.d.ts +18 -0
- package/types/components/widgets/pn-chat/pn-chat.stories.d.ts +1 -0
- package/umd/modules/@postnord/web-components/cjs/pn-date-picker.cjs.entry.js +2 -2
- package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.js +2 -2
- package/umd/modules/@postnord/web-components/components/pn-date-picker.js +1 -1
- package/umd/modules/@postnord/web-components/esm/pn-date-picker.entry.js +2 -2
- package/umd/modules/@postnord/web-components/hydrate/index.js +2 -2
- package/umd/modules/@postnord/web-components/hydrate/index.mjs +2 -2
- package/umd/modules/@postnord/web-components/package.json +1 -1
- package/umd/modules/@postnord/web-components/postnord-web-components/{p-c3e851f9.entry.js → p-153311c8.entry.js} +1 -1
- package/umd/modules/@postnord/web-components/postnord-web-components/postnord-web-components.esm.js +1 -1
- package/umd/pn-marketweb-init.js +1 -1
- package/umd/pn-marketweb-salesforce.js +1 -1
- package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/animationHelper.test.js +0 -95
- package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/animationHelper.test.js.map +0 -1
- package/pn-market-web-components/p-8afc2d30.entry.js +0 -2
- package/pn-market-web-components/p-8afc2d30.entry.js.map +0 -1
- package/pn-market-web-components/p-f97e58b8.entry.js +0 -2
- package/pn-market-web-components/p-f97e58b8.entry.js.map +0 -1
- package/types/components/data-visualization/pn-stats-info/pn-stats-info-data/animationHelper.test.d.ts +0 -1
|
@@ -42,33 +42,40 @@ pn-chat-message .message-container {
|
|
|
42
42
|
border-radius: 0.8rem;
|
|
43
43
|
display: flex;
|
|
44
44
|
gap: 1rem;
|
|
45
|
-
max-width:
|
|
45
|
+
max-width: 85%;
|
|
46
46
|
overflow-x: hidden;
|
|
47
47
|
}
|
|
48
48
|
pn-chat-message .message-container .category {
|
|
49
49
|
width: 2.6rem;
|
|
50
50
|
}
|
|
51
|
-
pn-chat-message .message-container.
|
|
51
|
+
pn-chat-message .message-container.user {
|
|
52
|
+
max-width: 75%;
|
|
53
|
+
}
|
|
54
|
+
pn-chat-message .message-container.bot .message, pn-chat-message .message-container.agent .message, pn-chat-message .message-container.link .message {
|
|
52
55
|
background-color: #f3f2f2;
|
|
53
56
|
}
|
|
57
|
+
pn-chat-message .message-container.bot .category, pn-chat-message .message-container.agent .category, pn-chat-message .message-container.link .category {
|
|
58
|
+
align-self: flex-end;
|
|
59
|
+
}
|
|
54
60
|
pn-chat-message .message-container.link {
|
|
55
61
|
flex-basis: 100%;
|
|
56
62
|
}
|
|
63
|
+
pn-chat-message .message-container.link .category {
|
|
64
|
+
align-self: center;
|
|
65
|
+
}
|
|
66
|
+
pn-chat-message .message-container.link .content {
|
|
67
|
+
line-height: 1.5;
|
|
68
|
+
}
|
|
57
69
|
pn-chat-message .message-container.link .message {
|
|
58
|
-
background-color: #effbff;
|
|
59
|
-
box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
|
|
60
|
-
transition: box-shadow ease-in-out 0.5s;
|
|
61
70
|
padding: 0;
|
|
62
71
|
}
|
|
63
|
-
pn-chat-message .message-container.link .message:hover {
|
|
64
|
-
box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.2), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.23);
|
|
65
|
-
}
|
|
66
72
|
pn-chat-message .message-container.link .message a {
|
|
67
|
-
color: #
|
|
73
|
+
color: #005d92;
|
|
74
|
+
font-weight: 500;
|
|
68
75
|
display: flex;
|
|
69
76
|
justify-content: space-between;
|
|
70
77
|
padding: 1rem 1.6rem;
|
|
71
|
-
text-decoration:
|
|
78
|
+
text-decoration: underline;
|
|
72
79
|
}
|
|
73
80
|
pn-chat-message .message-container.link .business.message {
|
|
74
81
|
background-color: #fdefee;
|
|
@@ -81,6 +88,16 @@ pn-chat-message .message-container.button {
|
|
|
81
88
|
pn-chat-message .message-container.button .message {
|
|
82
89
|
padding: 0;
|
|
83
90
|
}
|
|
91
|
+
pn-chat-message .message-container.button .pn-button {
|
|
92
|
+
min-width: 18rem;
|
|
93
|
+
}
|
|
94
|
+
pn-chat-message .message-container.button .pn-button:disabled {
|
|
95
|
+
color: #969087;
|
|
96
|
+
}
|
|
97
|
+
pn-chat-message .message-container.button .pn-button:disabled .pn-button-bg {
|
|
98
|
+
border-color: #f3f2f2;
|
|
99
|
+
background-color: #f3f2f2;
|
|
100
|
+
}
|
|
84
101
|
pn-chat-message .message-container.card {
|
|
85
102
|
border: solid 1px #d3cecb;
|
|
86
103
|
border-radius: 1.6rem;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
|
-
import {
|
|
2
|
+
import { link } from "pn-design-assets/pn-assets/icons.js";
|
|
3
3
|
export class PnChatMessage {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.category = undefined;
|
|
@@ -16,7 +16,7 @@ export class PnChatMessage {
|
|
|
16
16
|
case 'Agent':
|
|
17
17
|
return this.agentName;
|
|
18
18
|
case 'Link':
|
|
19
|
-
return
|
|
19
|
+
return link;
|
|
20
20
|
}
|
|
21
21
|
return icon;
|
|
22
22
|
}
|
|
@@ -35,7 +35,7 @@ export class PnChatMessage {
|
|
|
35
35
|
render() {
|
|
36
36
|
const segmentClass = this.customerSegment?.toLowerCase() || '';
|
|
37
37
|
const categoryClass = this.category?.toLowerCase() || '';
|
|
38
|
-
return (h(Host, { key: '
|
|
38
|
+
return (h(Host, { key: 'ecf8acc954eed04ff21f75c0a371f3014c3f157e', class: this.getMessageClass() }, h("div", { key: '116ef983feb42adec2ab216af8d91301308216a8', class: `message-container ${categoryClass}` }, this.getIcon() && (h("span", { key: 'aa873a62b005f0290d9c7b8f8b7194a29582d5a8', class: "category" }, h("pn-icon", { key: 'd0ffed7af74c0729cad09ec2a74feff48be31718', icon: this.getIcon(), color: this.blue700, "aria-hidden": "true", role: "presentation" }))), h("span", { key: '61c88e4e7febf6b3da957006c5409e927aad768d', class: `message ${segmentClass}` }, h("slot", { key: '95e479cc6a6b4940ac01275affc27cc99585b8eb' })))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "pn-chat-message"; }
|
|
41
41
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pn-chat-message.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"pn-chat-message.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,IAAI,EAAQ,MAAM,qCAAqC,CAAC;AAQjE,MAAM,OAAO,aAAa;;;;;;IAKhB,SAAS,GAAW,uwDAAuwD,CAAC;IAC5xD,OAAO,GAAG,SAAS,CAAC;IAE5B,OAAO;QACL,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,eAAe;QACb,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,gBAAgB;gBACnB,OAAO,gBAAgB,CAAC;YAC1B,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,gBAAgB,CAAC;YAC1B;gBACE,OAAO,SAAS,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QACzD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAG,IAAI,CAAC,eAAe,EAAE;YAClC,4DAAK,KAAK,EAAE,qBAAqB,aAAa,EAAE;gBAC7C,IAAI,CAAC,OAAO,EAAE,IAAI,CACjB,6DAAM,KAAK,EAAC,UAAU;oBACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,iBAAc,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW,CAChG,CACR;gBACD,6DAAM,KAAK,EAAE,WAAW,YAAY,EAAE;oBACpC,8DAAa,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { link, user } from 'pn-design-assets/pn-assets/icons.js';\n\nimport { AgentMessage, CustomerSegment, MessageCategory } from '../types';\n\n@Component({\n tag: 'pn-chat-message',\n styleUrl: 'pn-chat-message.scss',\n})\nexport class PnChatMessage {\n @Prop() category!: MessageCategory;\n @Prop() customerSegment!: CustomerSegment;\n @Prop() agentName: string;\n\n private robotIcon: string = '<?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 20 20\"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141) --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id=\"clippath\"> <rect class=\"st0\" width=\"20\" height=\"20\"/> </clipPath> </defs> <g class=\"st5\"> <g> <path class=\"st2\" d=\"M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z\"/> <path class=\"st3\" d=\"M10.5,4h-.5v2.8h.5v-2.8Z\"/> <path class=\"st3\" d=\"M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st3\" d=\"M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z\"/> <path class=\"st4\" d=\"M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z\"/> <path d=\"M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z\"/> <path class=\"st4\" d=\"M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z\"/> <path class=\"st4\" d=\"M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z\"/> <path class=\"st3\" d=\"M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z\"/> <path class=\"st6\" d=\"M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z\"/> <path class=\"st1\" d=\"M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st1\" d=\"M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path d=\"M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z\"/> </g> </g> </svg>';\n private blue700 = 'blue700';\n\n getIcon() {\n let icon = null;\n \n switch (this.category) {\n case 'Bot':\n return this.robotIcon;\n case 'Agent':\n return this.agentName;\n case 'Link':\n return link;\n }\n\n return icon;\n }\n\n getMessageClass(): string {\n switch (this.category) {\n case 'ButtonResponse':\n return 'buttonresponse';\n case 'User':\n return 'user';\n case 'System':\n return 'system-message';\n default: \n return undefined;\n }\n }\n\n render() {\n const segmentClass = this.customerSegment?.toLowerCase() || '';\n const categoryClass = this.category?.toLowerCase() || '';\n return (\n <Host class={ this.getMessageClass() }>\n <div class={`message-container ${categoryClass}`}>\n {this.getIcon() && (\n <span class=\"category\">\n <pn-icon icon={this.getIcon()} color={this.blue700} aria-hidden=\"true\" role=\"presentation\"></pn-icon>\n </span>\n )}\n <span class={`message ${segmentClass}`}>\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -33,6 +33,24 @@ export const hardcodedMessages = {
|
|
|
33
33
|
"category": "Bot",
|
|
34
34
|
"content": "Om du har ett kollinummer som berör din fråga, skriv gärna det här.",
|
|
35
35
|
"messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5f"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"category": "Link",
|
|
39
|
+
"content": "Postnord.se",
|
|
40
|
+
"href": "https://www.postnord.se/",
|
|
41
|
+
"messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5t"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"category": "Button",
|
|
45
|
+
"content": "Click me",
|
|
46
|
+
"messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5l",
|
|
47
|
+
"props": "{\"appearance\": \"light\", \"variant\": \"outlined\", \"data-option-choice\": \"\", \"data-action\": \"choice\"}"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"category": "Button",
|
|
51
|
+
"content": "Click me 2",
|
|
52
|
+
"messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5l3",
|
|
53
|
+
"props": "{\"appearance\": \"light\", \"variant\": \"outlined\", \"data-option-choice\": \"\", \"data-action\": \"choice\"}"
|
|
36
54
|
}
|
|
37
55
|
]
|
|
38
56
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pn-chat-stories-constants.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat-stories-constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;;;IAGvB,CAAC;AAEL,MAAM,CAAC,MAAM,iBAAiB,GAC9B;IACE,QAAQ,EAAE;QACR,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,IAAI;KACf;IACD,UAAU,EAAE;QACV;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,gDAAgD;YAC3D,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,wJAAwJ;YACnK,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,yBAAyB;YACpC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,4BAA4B;YACvC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,qEAAqE;YAChF,WAAW,EAAE,sCAAsC;SACpD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE;QACN,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;KACF;CACF,CAAC","sourcesContent":["export const styleSample = `\n .sb-story,.sb-show-main { border: solid 1px #333; height: 500px; width: 800px; padding:40px; position: relative;}\n .pn-chat { position:absolute; right:50px ;bottom:50px; transform-origin: bottom right }\n }`;\n\nexport const hardcodedMessages = \n{\n \"header\": {\n \"body\": null,\n \"button\": null\n },\n \"messages\": [\n {\n \"category\": \"System\",\n \"content\": \"A customer service agent has entered the chat.\",\n \"messageId\": \"14584740-7784-4749-9b39-bce31455ea55\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Varmt välkommen till PostNords virtuella assistent. Jag kan hjälpa dig med frågor gällande brev och paket samt skicka dig vidare till vår kundservice.\",\n \"messageId\": \"967ddba6-ba1c-44d1-9725-386b32dc3498\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Hur kan jag hjälpa dig?\",\n \"messageId\": \"b26624af-852b-49cf-a3e6-77cc046be71f\"\n },\n {\n \"class\": null,\n \"category\": \"User\",\n \"content\": \"hejsan vart är mitt paket?\",\n \"messageId\": \"74cadc59-86ad-4f11-b4b6-a263aa9dbad9\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Om du har ett kollinummer som berör din fråga, skriv gärna det här.\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5f\"\n }\n ]\n};\n\nexport const messageObjectReal = {\n header: {\n body: null,\n button: null\n },\n messages: [\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"4a703929-4f6c-47df-bfc1-5a4ca6e31531\"\n },\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"00000000-0000-0000-0000-000000000000\"\n },\n {\n class: null,\n category: \"User\",\n content: \"m\",\n messageId: \"55d2851f-66d5-47d8-a4f7-1114a22d3d16\"\n },\n {\n class: \"\",\n props: \"1ef8d9da-316b-45de-b56a-ec595b8baef3\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"9290fec2-bf1f-4713-9060-5f88ff8a7420\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"fb0b3b50-97a0-40f7-872a-fc6d7ed0d379\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n class: \"\",\n props: \"598e284a-4480-4e09-8f69-6c7046fea704\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n }\n ]\n};\n\n"]}
|
|
1
|
+
{"version":3,"file":"pn-chat-stories-constants.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat-stories-constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;;;IAGvB,CAAC;AAEL,MAAM,CAAC,MAAM,iBAAiB,GAC9B;IACE,QAAQ,EAAE;QACR,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,IAAI;KACf;IACD,UAAU,EAAE;QACV;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,gDAAgD;YAC3D,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,wJAAwJ;YACnK,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,yBAAyB;YACpC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,4BAA4B;YACvC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,qEAAqE;YAChF,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,aAAa;YACxB,MAAM,EAAE,0BAA0B;YAClC,WAAW,EAAE,sCAAsC;SACpD;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,UAAU;YACrB,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,mHAAmH;SAC7H;QACD;YACE,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,YAAY;YACvB,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,mHAAmH;SAC7H;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE;QACN,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,MAAM;YAChB,OAAO,EAAE,GAAG;YACZ,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,sCAAsC;YAC7C,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE,sCAAsC;SAClD;QACD;YACE,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,sFAAsF;YAC/F,SAAS,EAAE,sCAAsC;SAClD;KACF;CACF,CAAC","sourcesContent":["export const styleSample = `\n .sb-story,.sb-show-main { border: solid 1px #333; height: 500px; width: 800px; padding:40px; position: relative;}\n .pn-chat { position:absolute; right:50px ;bottom:50px; transform-origin: bottom right }\n }`;\n\nexport const hardcodedMessages = \n{\n \"header\": {\n \"body\": null,\n \"button\": null\n },\n \"messages\": [\n {\n \"category\": \"System\",\n \"content\": \"A customer service agent has entered the chat.\",\n \"messageId\": \"14584740-7784-4749-9b39-bce31455ea55\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Varmt välkommen till PostNords virtuella assistent. Jag kan hjälpa dig med frågor gällande brev och paket samt skicka dig vidare till vår kundservice.\",\n \"messageId\": \"967ddba6-ba1c-44d1-9725-386b32dc3498\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Hur kan jag hjälpa dig?\",\n \"messageId\": \"b26624af-852b-49cf-a3e6-77cc046be71f\"\n },\n {\n \"class\": null,\n \"category\": \"User\",\n \"content\": \"hejsan vart är mitt paket?\",\n \"messageId\": \"74cadc59-86ad-4f11-b4b6-a263aa9dbad9\"\n },\n {\n \"category\": \"Bot\",\n \"content\": \"Om du har ett kollinummer som berör din fråga, skriv gärna det här.\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5f\"\n },\n {\n \"category\": \"Link\",\n \"content\": \"Postnord.se\",\n \"href\": \"https://www.postnord.se/\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5t\"\n },\n {\n \"category\": \"Button\",\n \"content\": \"Click me\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5l\",\n \"props\": \"{\\\"appearance\\\": \\\"light\\\", \\\"variant\\\": \\\"outlined\\\", \\\"data-option-choice\\\": \\\"\\\", \\\"data-action\\\": \\\"choice\\\"}\"\n },\n {\n \"category\": \"Button\",\n \"content\": \"Click me 2\",\n \"messageId\": \"90845d71-2a8e-4b1a-bd45-20de7a2dbe5l3\",\n \"props\": \"{\\\"appearance\\\": \\\"light\\\", \\\"variant\\\": \\\"outlined\\\", \\\"data-option-choice\\\": \\\"\\\", \\\"data-action\\\": \\\"choice\\\"}\"\n }\n ]\n};\n\nexport const messageObjectReal = {\n header: {\n body: null,\n button: null\n },\n messages: [\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"4a703929-4f6c-47df-bfc1-5a4ca6e31531\"\n },\n {\n class: null,\n category: \"User\",\n content: \"test\",\n messageId: \"00000000-0000-0000-0000-000000000000\"\n },\n {\n class: null,\n category: \"User\",\n content: \"m\",\n messageId: \"55d2851f-66d5-47d8-a4f7-1114a22d3d16\"\n },\n {\n class: \"\",\n props: \"1ef8d9da-316b-45de-b56a-ec595b8baef3\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"9290fec2-bf1f-4713-9060-5f88ff8a7420\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"4cd676a7-5e8f-4781-b263-45a5ab1bc0e1\"\n },\n {\n class: \"\",\n props: \"fb0b3b50-97a0-40f7-872a-fc6d7ed0d379\",\n category: \"Button\",\n content: \"End Chat\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n class: \"\",\n props: \"598e284a-4480-4e09-8f69-6c7046fea704\",\n category: \"Button\",\n content: \"Chat with Agent\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n },\n {\n category: \"Bot\",\n content: \"Welcome! I am the PN bot. How can I help you today?\\nPlease select an option below :\",\n messageId: \"2ecd1b25-8790-40a4-a596-efe0881f7519\"\n }\n ]\n};\n\n"]}
|
|
@@ -31,9 +31,9 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: column;
|
|
33
33
|
height: 600px;
|
|
34
|
-
width:
|
|
34
|
+
width: 400px;
|
|
35
35
|
max-width: 400px;
|
|
36
|
-
box-shadow: 0 4px
|
|
36
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 -2px 4px 0 rgba(240, 240, 240, 0.55);
|
|
37
37
|
border-radius: 1.6rem;
|
|
38
38
|
}
|
|
39
39
|
@media (max-width: 768px) {
|
|
@@ -56,13 +56,13 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
.pn-chat .chat-header {
|
|
59
|
-
background-color: #
|
|
60
|
-
color: #ffffff;
|
|
59
|
+
background-color: #ffffff;
|
|
61
60
|
padding: 0.8rem;
|
|
62
61
|
padding-left: 1.6rem;
|
|
63
62
|
display: flex;
|
|
64
63
|
justify-content: space-between;
|
|
65
64
|
align-items: center;
|
|
65
|
+
border-bottom: 1px solid #f3f2f2;
|
|
66
66
|
}
|
|
67
67
|
@media (min-width: 768px) {
|
|
68
68
|
.pn-chat .chat-header {
|
|
@@ -74,15 +74,20 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
74
74
|
}
|
|
75
75
|
.pn-chat .chat-header pn-button.minimize-btn button.pn-button {
|
|
76
76
|
padding-bottom: 0;
|
|
77
|
+
margin-right: 1rem;
|
|
77
78
|
}
|
|
78
79
|
.pn-chat .chat-header pn-button.minimize-btn button.pn-button .pn-button-content {
|
|
79
80
|
align-items: flex-end;
|
|
81
|
+
position: absolute;
|
|
82
|
+
bottom: 0px;
|
|
80
83
|
}
|
|
81
84
|
.pn-chat .chat-header #chat-title {
|
|
82
85
|
margin: 0;
|
|
83
|
-
font-size:
|
|
84
|
-
font-weight:
|
|
85
|
-
line-height: 1
|
|
86
|
+
font-size: 1.6rem;
|
|
87
|
+
font-weight: 500;
|
|
88
|
+
line-height: 1;
|
|
89
|
+
height: 100%;
|
|
90
|
+
align-content: center;
|
|
86
91
|
}
|
|
87
92
|
.pn-chat .chat-main {
|
|
88
93
|
display: flex;
|
|
@@ -92,15 +97,12 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
92
97
|
gap: 1.6rem;
|
|
93
98
|
padding: 1.6rem;
|
|
94
99
|
padding-bottom: 3.2rem;
|
|
95
|
-
border-left: 1px solid #d3cecb;
|
|
96
|
-
border-right: 1px solid #d3cecb;
|
|
97
100
|
background-color: #ffffff;
|
|
98
101
|
}
|
|
99
102
|
.pn-chat .chat-main.loading-chat-main {
|
|
100
103
|
display: flex;
|
|
101
104
|
justify-content: center;
|
|
102
105
|
align-items: center;
|
|
103
|
-
padding-bottom: 1.6rem;
|
|
104
106
|
}
|
|
105
107
|
.pn-chat .chat-loading-spinner {
|
|
106
108
|
background-color: #005d92;
|
|
@@ -147,8 +149,8 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
147
149
|
}
|
|
148
150
|
.pn-chat .chat-footer {
|
|
149
151
|
background: #ffffff;
|
|
150
|
-
border: 1px solid #
|
|
151
|
-
border-
|
|
152
|
+
border-top: 1px solid #f3f2f2;
|
|
153
|
+
border-radius: 0 0 1.6rem 1.6rem;
|
|
152
154
|
}
|
|
153
155
|
.pn-chat .chat-footer .form {
|
|
154
156
|
display: flex;
|
|
@@ -164,12 +166,12 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
164
166
|
border-radius: 6.4rem;
|
|
165
167
|
}
|
|
166
168
|
.pn-chat .chat-input-container .chat-text-input {
|
|
167
|
-
text-indent: 0.8rem;
|
|
168
169
|
border: none;
|
|
169
170
|
background: transparent;
|
|
170
171
|
width: 100%;
|
|
171
172
|
outline: 0.2rem solid transparent;
|
|
172
173
|
outline-offset: 0.2rem;
|
|
174
|
+
padding-left: 1.6rem;
|
|
173
175
|
}
|
|
174
176
|
.pn-chat .chat-input-container .chat-text-input:focus {
|
|
175
177
|
border-radius: 6.4rem;
|
|
@@ -177,6 +179,11 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
177
179
|
.pn-chat .chat-input-container .chat-text-input:focus-visible {
|
|
178
180
|
outline-color: #005d92;
|
|
179
181
|
}
|
|
182
|
+
.pn-chat .chat-input-container .chat-text-input::placeholder {
|
|
183
|
+
top: 2px;
|
|
184
|
+
position: relative;
|
|
185
|
+
color: #969087;
|
|
186
|
+
}
|
|
180
187
|
.pn-chat .chat-input-container .chat-disabled-button {
|
|
181
188
|
display: flex;
|
|
182
189
|
width: 3.5em;
|
|
@@ -230,6 +237,10 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
|
|
|
230
237
|
margin-bottom: 2rem;
|
|
231
238
|
visibility: hidden;
|
|
232
239
|
}
|
|
240
|
+
.pn-chat .minimize-btn .pn-button pn-icon .pn-icon-svg path,
|
|
241
|
+
.pn-chat .close-btn .pn-button pn-icon .pn-icon-svg path {
|
|
242
|
+
fill: #005d92;
|
|
243
|
+
}
|
|
233
244
|
|
|
234
245
|
@media (max-width: 768px) {
|
|
235
246
|
body.chat-open {
|
|
@@ -319,16 +319,28 @@ export class PnChat {
|
|
|
319
319
|
}
|
|
320
320
|
catch (error) {
|
|
321
321
|
console.error('Error parsing button props', error instanceof Error ? error.message : 'Unknown error');
|
|
322
|
+
return;
|
|
322
323
|
}
|
|
323
324
|
}
|
|
324
|
-
const handleClick = () => {
|
|
325
|
+
const handleClick = (event) => {
|
|
326
|
+
const button = event.target.closest('button');
|
|
327
|
+
if (button === null || button?.hasAttribute('disabled')) {
|
|
328
|
+
event.preventDefault();
|
|
329
|
+
event.stopPropagation();
|
|
330
|
+
return;
|
|
331
|
+
}
|
|
325
332
|
if (props['data-action'] === 'minimize') {
|
|
326
333
|
this.toggleChat();
|
|
327
334
|
}
|
|
328
|
-
if (props['
|
|
335
|
+
if (props['data-action'] === 'choice') {
|
|
329
336
|
(async () => {
|
|
330
|
-
await this.handleSendChoice(props['
|
|
337
|
+
await this.handleSendChoice(props['data-option-choice'], message.content);
|
|
331
338
|
})();
|
|
339
|
+
const choiceButtons = document.querySelectorAll('[data-action="choice"]');
|
|
340
|
+
choiceButtons.forEach(pnButton => {
|
|
341
|
+
const buttonInner = pnButton.querySelector('button');
|
|
342
|
+
buttonInner?.setAttribute('disabled', 'true');
|
|
343
|
+
});
|
|
332
344
|
}
|
|
333
345
|
};
|
|
334
346
|
return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category }, h("pn-button", { class: message.class, role: "button", ...props, onClick: handleClick, onKeyDown: e => this.handleButtonKeyDown(e) }, message.content)));
|
|
@@ -361,9 +373,9 @@ export class PnChat {
|
|
|
361
373
|
const mainId = 'chat-main';
|
|
362
374
|
const inputId = 'chat-input';
|
|
363
375
|
const headerButton = this.messagesData?.header.button;
|
|
364
|
-
return (h(Host, { key: '
|
|
376
|
+
return (h(Host, { key: 'd1b6d427a15513a46277479ece1bce7e20a1044b', class: this.customerSegment }, !this.isClosed && this.messagesData && (h("div", { key: 'ecee6b29d3730789fd4994d7a59d32166b68653e', class: `pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`, ref: el => (this.chatRef = el), role: "region", "aria-label": this.mainHeading }, !this.isMinimized && (h(Fragment, { key: '5a4fe8af5e224b59dfb53fc4c24f84041c3f8742' }, h("header", { key: 'dad77c1594f447014fcfa02dd672eb7f55d8b0d4', class: "chat-header", role: "banner" }, h("h1", { key: '2db55d9cf2e638655d5b9eb8dba92e383b81699d', id: "chat-title" }, this.mainHeading), h("div", { key: 'd5a0b03b057e16af35fc9ea61cc4e278cb3d2068', class: "chat-controls", role: "toolbar", "aria-label": this.getTranslation('chatControlsAriaLabel') }, h("pn-button", { key: '992249d07b8f6f19d6fcdf9eb4fc11efe8f63e1f', icon: minus, "icon-only": "true", class: "minimize-btn", onClick: this.toggleChat, "aria-expanded": !this.isMinimized, "aria-controls": mainId, "aria-label": this.getTranslation('minimizeChatAriaLabel'), appearance: "light", tooltip: this.getTranslation('minimizeChatAriaLabel'), small: "true" }), h("pn-button", { key: 'eeed9e762baf7ecb315e43300001f3279f14e563', icon: close, "icon-only": "true", class: "close-btn", onClick: this.closeChat, "aria-expanded": !this.isMinimized, "aria-label": this.getTranslation('closeChatAriaLabel'), appearance: "light", tooltip: this.getTranslation('closeChatAriaLabel'), small: "true" }))), (this.messagesData?.messages?.length ?? 0) > 0 ?
|
|
365
377
|
(h("main", { id: mainId, class: "chat-main", role: "main", "aria-labelledby": "chat-title" }, this.messagesData.header && (h("div", { class: "chat-overview" }, h("div", { class: "body" }, this.messagesData.header.body), headerButton && (h("pn-button", { href: headerButton.href, class: headerButton.class, appearance: headerButton.appearance, variant: headerButton.variant, small: headerButton.small, role: "button", onKeyDown: e => this.handleButtonKeyDown(e) }, headerButton.content)))), h("div", { ref: el => (this.chatMessagesContainer = el), class: "chat-messages", role: "log", "aria-live": "polite", "aria-label": this.getTranslation('chatMessagesAriaLabel') }, this.groupMessages()), h("pn-icon", { class: "indicator-icon", "aria-label": this.getTranslation('waitingForAnswerLabel'), role: "presentation" })))
|
|
366
|
-
: (h("main", { id: mainId, class: "chat-main loading-chat-main", role: "main", "aria-labelledby": "chat-title" }, h("div", { class: "chat-loading-spinner" }, h("pn-spinner", { light: "true", size: "1.5" })), h("span", { class: "chat-loading-content" }, this.getTranslation('loadingText')))), h("footer", { key: '
|
|
378
|
+
: (h("main", { id: mainId, class: "chat-main loading-chat-main", role: "main", "aria-labelledby": "chat-title" }, h("div", { class: "chat-loading-spinner" }, h("pn-spinner", { light: "true", size: "1.5" })), h("span", { class: "chat-loading-content" }, this.getTranslation('loadingText')))), h("footer", { key: '151b8cb74adc00cc941c68c14e94236e458e5b93', class: "chat-footer", role: "contentinfo" }, h("div", { key: 'f9cae25c7fdb38877a0010d01e6845e778f4658c', class: "form", role: "form", "aria-labelledby": inputId }, h("label", { key: 'b34656f59997b0e9b24f3c1e4de6df6340b260e5', htmlFor: inputId, class: "sr-only" }, this.getTranslation('writeChatMessagePlaceholder')), h("div", { key: '8c63bca6b7d0f9e9e801b7b40dff4a8d9b26e49d', class: "chat-input-container" }, h("input", { key: 'e5882f25731916a0800f4efde9a2daea72fba76d', id: inputId, class: "chat-text-input", ref: el => (this.inputRef = el), type: "text", placeholder: this.getTranslation('writeChatMessagePlaceholder'), value: this.message, onInput: (e) => (this.message = e.target.value), onKeyPress: this.handleKeyPress, maxLength: 3990 }), !this.message.trim() ? (h("div", { class: "chat-disabled-button", role: "button", "aria-label": this.getTranslation('sendButtonText'), "aria-disabled": "true", tabIndex: -1 }, h("pn-icon", { color: "gray400", icon: submit }))) : (h("pn-button", { "icon-only": "true", variant: "borderless", appearance: "light", icon: submit, onClick: this.handleSendMessage, disabled: !this.message.trim(), "aria-label": this.getTranslation('sendButtonText'), tooltip: this.getTranslation('sendButtonText') }))))))), this.isMinimized && (h("pn-button", { key: '4022adb25d86961ba4f20efd52fa8d4938f81b76', icon: talk_bubble, "icon-only": "true", class: "open-chat-btn", onClick: this.toggleChat, tooltip: this.getTranslation('openChatAriaLabel'), "aria-label": this.getTranslation('openChatAriaLabel'), "aria-expanded": !this.isMinimized }))))));
|
|
367
379
|
}
|
|
368
380
|
static get is() { return "pn-chat"; }
|
|
369
381
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pn-chat.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Listen, Fragment } from '@stencil/core';\nimport { minus, close, arrow_right, talk_bubble, submit } from 'pn-design-assets/pn-assets/icons.js';\nimport { AgentMessage, BaseMessage, ButtonMessage, CardMessage, ChatMessage, ChatMessages, CustomerSegment, LinkMessage } from './types';\nimport { LocalStorageService } from '@/globals/LocalStorageService';\nimport { JSX } from 'react';\nimport { PnChatService } from './pn-chat.service';\nimport { translations } from './translations';\nimport type { Translationsi18n } from './types';\n\n@Component({\n tag: 'pn-chat',\n styleUrl: 'pn-chat.scss',\n})\nexport class PnChat {\n @Prop() endpoint!: string;\n @Prop() customerSegment!: CustomerSegment;\n @Prop() mainHeading: string = '';\n @Prop() relatedContentAriaLabel: string;\n @Prop() chatMinimizedAriaLabel: string;\n @Prop() chatOpenedAriaLabel: string;\n @Prop() minimizeChatAriaLabel: string;\n @Prop() closeChatAriaLabel: string;\n @Prop() openChatAriaLabel: string;\n @Prop() chatControlsAriaLabel: string;\n @Prop() chatMessagesAriaLabel: string;\n @Prop() sentMessageAriaLabel: string;\n @Prop() writeChatMessagePlaceholder: string;\n @Prop() waitingForAnswerLabel: string;\n @Prop() sendButtonText: string;\n @Prop() loadingText: string;\n @Prop() carouselSlidesToShow: number = 1;\n @Prop() messages: string;\n @Prop() language: string = 'sv';\n @Prop() market: string = 'se';\n @Prop() itemId?: string = '';\n @Prop() pnChatId: string = '00000000-0000-0000-0000-000000000000';\n @Prop() forceOpen: boolean = false;\n @Prop() isLoggedIn: boolean = false;\n\n @State() private message: string = '';\n @State() private messagesData: ChatMessages;\n @State() private isMinimized: boolean = true;\n @State() private isClosed: boolean = false;\n @State() private lastMessageId: string = '';\n @State() i18n: any;\n\n private chatId: string;\n\n private readonly _defaultChatId: string = '00000000-0000-0000-0000-000000000000';\n private readonly _defaultAlternativeChatId: string = '1';\n private readonly chatLocalStorageKey = 'sf-chat-state';\n private chatMessagesContainer?: HTMLElement;\n private chatRef?: HTMLDivElement;\n private inputRef?: HTMLInputElement;\n private storage: LocalStorageService = new LocalStorageService();\n private _chatService: PnChatService;\n private _chatSegment: string = \"#chat\";\n private _forceClose: boolean = false;\n\n componentWillLoad(): void {\n this._forceClose = false;\n this._chatService = new PnChatService(this.endpoint, this.market, this.language);\n this.messagesData = {\n header: {},\n messages: [],\n };\n\n let storageId = this.storage.get(this.chatLocalStorageKey);\n\n if (storageId && storageId.isLoggedIn === !this.isLoggedIn) {\n this.storage.remove(this.chatLocalStorageKey);\n }\n else if (storageId && storageId.chatId) {\n this.chatId = storageId?.chatId ?? this.chatId;\n }\n\n this.setTranslations();\n\n setInterval(() => {\n this.updateChat();\n }, 1500);\n }\n\n setTranslations() {\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\nprivate getTranslation(key: keyof Translationsi18n): string {\n const value = this[key];\n if (value === undefined || value === null || value === '') {\n return translations[this.language]?.[key] ?? translations['en'][key];\n }\n return value;\n}\n\n private async updateChat() {\n if (this.isMinimized || this.isClosed) {\n return;\n }\n\n let prevLastMessageId = this.lastMessageId;\n\n await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {\n this.lastMessageId = this._chatService.GetLastMessageId(newMessages?.messages, this.lastMessageId);\n let htmlCollection = document.getElementsByClassName('pn-chat-before');\n let elements = Array.from(htmlCollection);\n\n newMessages.messages.forEach(message => {\n elements.forEach(element => {\n if (message.content != null && (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim()))) {\n element.remove();\n }\n });\n this.renderMessage(message);\n });\n\n if (prevLastMessageId !== this.lastMessageId) {\n this._chatService.updateLastMessageId(this.chatId, this.lastMessageId);\n this.messagesData = newMessages;\n newMessages.messages.forEach(message => {\n this.renderMessage(message);\n });\n }\n });\n }\n\n private async setStartValues() {\n if (this._forceClose) {\n this._forceClose = false;\n return;\n }\n\n if ((!this.chatId || this.chatId === this._defaultChatId || this.chatId === this._defaultAlternativeChatId) && !this.isMinimized) {\n this.chatId = await this._chatService.startChat(this.pnChatId, this.itemId);\n this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });\n }\n\n if (this.chatId) {\n this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });\n await this.fetchMessages();\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n }\n }\n\n private async fetchMessages() {\n let newMessages = await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n this.messagesData = newMessages;\n let htmlCollection = document.getElementsByClassName('pn-chat-before');\n let elements = Array.from(htmlCollection);\n\n newMessages.messages.forEach(message => {\n elements.forEach(element => {\n if (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim())) {\n element.remove();\n }\n });\n this.renderMessage(message);\n });\n return newMessages;\n });\n }\n\n private async handleSend() {\n if (!this.message?.trim()) {\n return;\n }\n\n let message = this.message;\n this.message = '';\n this.createBeforeElement(message);\n\n let responseId = await this._chatService.sendMessage(message, this.itemId, this.chatId, this.lastMessageId, 'Text');\n this.lastMessageId = responseId;\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n\n this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));\n };\n\n private groupMessages(): JSX.Element[] {\n const result: JSX.Element[] = [];\n let currentCardGroup: CardMessage[] = [];\n\n const flushCardGroup = () => {\n if (currentCardGroup.length > 0) {\n const carouselData = {\n slides: currentCardGroup.map(card => {\n const cardHtml = `\n <pn-chat-message customerSegment=${this.customerSegment} data-card role=\"article\" category=${card.category}>\n <h2 class=\"card-heading\">${card.heading}</h2>\n <p>${card.content}</p>\n ${card.buttons\n ?.map(\n button => `\n <pn-button\n href=\"${button.href}\"\n class=\"${button.class}\"\n appearance=\"${button.appearance}\"\n variant=\"${button.variant}\"\n small=\"${button.small}\"\n role=\"button\"\n >\n ${button.content}\n </pn-button>\n `,\n )\n .join('') || ''\n }\n </pn-chat-message>\n `;\n return cardHtml;\n }),\n };\n result.push(\n <pn-marketweb-carousel\n class=\"card-container\"\n nextButtonLabel=\"Next\"\n previousButtonLabel=\"Previous\"\n ariaNavigationLabel={this.getTranslation('relatedContentAriaLabel')}\n slidesToShow={this.carouselSlidesToShow}\n source={JSON.stringify(carouselData)}\n ></pn-marketweb-carousel>,\n );\n currentCardGroup = [];\n }\n };\n\n this.messagesData.messages.forEach((message, index) => {\n if (message.category === 'Card') {\n currentCardGroup.push(message as CardMessage);\n\n if (index === this.messagesData.messages.length - 1 || this.messagesData.messages[index + 1]?.category !== 'Card') {\n flushCardGroup();\n }\n } else {\n flushCardGroup();\n result.push(this.renderMessage(message));\n }\n });\n\n return result;\n }\n\n private handleKeyPress = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && this.message.trim()) {\n event.preventDefault();\n this.handleSend();\n }\n };\n\n private handleSendMessage = (event: MouseEvent) => {\n if (this.message.trim()) {\n event.preventDefault();\n this.handleSend();\n }\n }\n\n private handleButtonKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n (event.target as HTMLElement).click();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.isMinimized && !this.isClosed) {\n this.toggleChat();\n }\n }\n\n @Watch('messages')\n handleMessagesChange(newMessage: string): void {\n if (newMessage) {\n this.handleSend();\n }\n }\n\n @Watch('pnChatId')\n handleNewChatId() {\n this.chatId = this.pnChatId === this._defaultAlternativeChatId ? this._defaultChatId : this.pnChatId;\n this.messagesData.messages = [];\n this.isMinimized = false;\n this.setStartValues();\n }\n\n @Watch('forceOpen')\n handleSameChatId() {\n this.isMinimized = false;\n }\n\n @Watch('isMinimized')\n scrollToBottom() {\n const observer = new MutationObserver((_, obs) => {\n const chatMain = document.getElementById('chat-main');\n if (chatMain) {\n setTimeout(() => {\n chatMain.scrollTo({\n top: chatMain.scrollHeight,\n behavior: 'smooth'\n });\n }, 500)\n obs.disconnect();\n }\n });\n observer.observe(document.body, { childList: true, subtree: true, });\n }\n\n private closeChat = () => {\n this._forceClose = true;\n this.storage.remove(this.chatLocalStorageKey);\n this.chatId = null;\n this.pnChatId = this._defaultChatId;\n let chatElement = document.getElementsByTagName('pn-chat')[0];\n chatElement.setAttribute('item-id', '');\n\n let hasActiveShipmentInUrl = window.location.href.includes(this._chatSegment);\n if (hasActiveShipmentInUrl) {\n this.isMinimized = !this.isMinimized;\n this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));\n document.body.classList.toggle('chat-open');\n window.location.href = window.location.href.split(this._chatSegment)[0];\n }\n else {\n this._forceClose = false;\n this.toggleChat();\n }\n }\n\n private toggleChat = () => {\n this.isMinimized = !this.isMinimized;\n this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));\n document.body.classList.toggle('chat-open');\n\n if (!this.isMinimized && !this.chatId) {\n this.setStartValues();\n }\n };\n\n private announceToScreenReader(message: string) {\n const announcement = document.createElement('div');\n announcement.setAttribute('role', 'status');\n announcement.setAttribute('aria-live', 'polite');\n announcement.classList.add('sr-only');\n announcement.textContent = message;\n document.body.appendChild(announcement);\n setTimeout(() => announcement.remove(), 1000);\n }\n\n private renderMessage(message: ChatMessage): JSX.Element {\n switch (message.category) {\n case 'Bot':\n return this.renderBaseMessage(message);\n case 'Button':\n return this.renderButtonMessage(message);\n case 'ButtonResponse':\n return this.renderBaseMessage(message);\n case 'Link':\n return this.renderLinkMessage(message);\n case 'Card':\n return this.renderCardMessage(message);\n case 'User':\n return this.renderBaseMessage(message);\n case 'Agent':\n return this.renderAgentMessage(message);\n case 'System':\n return this.renderBaseMessage(message);\n }\n }\n\n private renderBaseMessage(message: BaseMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category} agentName='' role=\"log\" aria-live=\"polite\">\n {message.content}\n </pn-chat-message>\n );\n }\n\n private renderAgentMessage(message: AgentMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category} agentName={message.agentName} role=\"log\" aria-live=\"polite\">\n {message.content}\n </pn-chat-message>\n );\n }\n\n private renderButtonMessage(message: ButtonMessage): JSX.Element {\n let props = {};\n\n if (message?.props) {\n try {\n props = JSON.parse(message.props);\n } catch (error) {\n console.error('Error parsing button props', error instanceof Error ? error.message : 'Unknown error');\n }\n }\n\n const handleClick = () => {\n if (props['data-action'] === 'minimize') {\n this.toggleChat();\n }\n if (props['dataAction'] === 'choice' && props['dataOptionChoice']) {\n (async () => {\n await this.handleSendChoice(props['dataOptionChoice'], message.content);\n })();\n }\n };\n\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category}>\n <pn-button class={message.class} role=\"button\" {...props} onClick={handleClick} onKeyDown={e => this.handleButtonKeyDown(e)}>\n {message.content}\n </pn-button>\n </pn-chat-message>\n );\n }\n\n private createBeforeElement(content: string) {\n const targetElement = this.chatMessagesContainer;\n const chatMessage = document.createElement('pn-chat-message');\n chatMessage.setAttribute('customerSegment', this.customerSegment);\n chatMessage.setAttribute('category', 'User');\n chatMessage.classList.add('pn-chat-before');\n chatMessage.textContent = content;\n\n targetElement.appendChild(chatMessage);\n this.scrollToBottom();\n chatMessage.scrollIntoView();\n }\n\n private async handleSendChoice(choiceId: string, content: string) {\n this.createBeforeElement(content);\n\n let responseId = await this._chatService.sendMessage(choiceId, this.itemId, this.chatId, this.lastMessageId, 'Choice');\n this.lastMessageId = responseId;\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n\n this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));\n }\n\n private renderLinkMessage(message: LinkMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category}>\n <a href={message.href} role=\"link\" rel=\"noopener noreferrer\">\n <span class=\"content\">{message.content}</span>\n <pn-icon icon={arrow_right} color=\"blue700\" aria-hidden=\"true\" role=\"presentation\" />\n </a>\n </pn-chat-message>\n );\n }\n\n private renderCardMessage(message: CardMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category} data-card role=\"article\">\n <h2 class=\"card-heading\">{message.heading}</h2>\n <p>{message.content}</p>\n {message.buttons && (\n <div class=\"cta\">\n {message.buttons?.map(button => (\n <pn-button\n href={button.href}\n class={button.class}\n appearance={button.appearance}\n variant={button.variant}\n small={button.small}\n role=\"button\"\n onKeyDown={e => this.handleButtonKeyDown(e)}\n >\n {button.content}\n </pn-button>\n ))}\n </div>\n )}\n </pn-chat-message>\n );\n }\n\n render() {\n const mainId = 'chat-main';\n const inputId = 'chat-input';\n const headerButton = this.messagesData?.header.button;\n\n return (\n <Host class={this.customerSegment}>\n {!this.isClosed && this.messagesData && (\n <div\n class={`pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`}\n ref={el => (this.chatRef = el as HTMLDivElement)}\n role=\"region\"\n aria-label={this.mainHeading}\n >\n {!this.isMinimized && (\n <Fragment>\n <header class=\"chat-header\" role=\"banner\">\n <h1 id=\"chat-title\">{this.mainHeading}</h1>\n <div class=\"chat-controls\" role=\"toolbar\" aria-label={this.getTranslation('chatControlsAriaLabel')}>\n <pn-button\n icon={minus}\n icon-only=\"true\"\n class=\"minimize-btn\"\n onClick={this.toggleChat}\n aria-expanded={!this.isMinimized}\n aria-controls={mainId}\n aria-label={this.getTranslation('minimizeChatAriaLabel')}\n variant=\"borderless\"\n tooltip={this.getTranslation('minimizeChatAriaLabel')}\n />\n <pn-button\n icon={close}\n icon-only=\"true\"\n class=\"close-btn\"\n onClick={this.closeChat}\n aria-expanded={!this.isMinimized}\n aria-label={this.getTranslation('closeChatAriaLabel')}\n variant=\"borderless\"\n tooltip={this.getTranslation('closeChatAriaLabel')}\n />\n </div>\n </header>\n {(this.messagesData?.messages?.length ?? 0) > 0 ?\n (<main id={mainId} class=\"chat-main\" role=\"main\" aria-labelledby=\"chat-title\">\n {this.messagesData.header && (\n <div class=\"chat-overview\">\n <div class=\"body\">{this.messagesData.header.body}</div>\n {headerButton && (\n <pn-button\n href={headerButton.href}\n class={headerButton.class}\n appearance={headerButton.appearance}\n variant={headerButton.variant}\n small={headerButton.small}\n role=\"button\"\n onKeyDown={e => this.handleButtonKeyDown(e)}\n >\n {headerButton.content}\n </pn-button>\n )}\n </div>\n )}\n <div ref={el => (this.chatMessagesContainer = el as HTMLElement)} class=\"chat-messages\" role=\"log\" aria-live=\"polite\" aria-label={this.getTranslation('chatMessagesAriaLabel')}>\n {this.groupMessages()}\n </div>\n <pn-icon\n class=\"indicator-icon\"\n aria-label={this.getTranslation('waitingForAnswerLabel')}\n role=\"presentation\"\n ></pn-icon>\n </main>)\n : (<main id={mainId} class=\"chat-main loading-chat-main\" role=\"main\" aria-labelledby=\"chat-title\">\n <div class=\"chat-loading-spinner\">\n <pn-spinner light=\"true\" size=\"1.5\"></pn-spinner>\n </div>\n <span class=\"chat-loading-content\">{this.getTranslation('loadingText')}</span>\n </main>)}\n <footer class=\"chat-footer\" role=\"contentinfo\">\n <div class=\"form\" role=\"form\" aria-labelledby={inputId}>\n <label htmlFor={inputId} class=\"sr-only\">\n {this.getTranslation('writeChatMessagePlaceholder')}\n </label>\n <div class=\"chat-input-container\">\n <input\n id={inputId}\n class=\"chat-text-input\"\n ref={el => (this.inputRef = el as HTMLInputElement)}\n type=\"text\"\n placeholder={this.getTranslation('writeChatMessagePlaceholder')}\n value={this.message}\n onInput={(e: Event) => (this.message = (e.target as HTMLInputElement).value)}\n onKeyPress={this.handleKeyPress}\n maxLength={3990}\n />\n {!this.message.trim() ? (\n <div\n class=\"chat-disabled-button\"\n role=\"button\"\n aria-label={this.getTranslation('sendButtonText')}\n aria-disabled=\"true\"\n tabIndex={-1}>\n <pn-icon color=\"gray400\" icon={submit}></pn-icon>\n </div>\n ) : (\n <pn-button\n icon-only=\"true\"\n variant=\"borderless\"\n appearance=\"light\"\n icon={submit}\n onClick={this.handleSendMessage}\n disabled={!this.message.trim()}\n aria-label={this.getTranslation('sendButtonText')}\n tooltip={this.getTranslation('sendButtonText')}>\n </pn-button>\n )}\n </div>\n </div>\n </footer>\n </Fragment>\n )}\n {this.isMinimized && (\n <pn-button\n icon={talk_bubble}\n icon-only=\"true\"\n class=\"open-chat-btn\"\n onClick={this.toggleChat}\n tooltip={this.getTranslation('openChatAriaLabel')}\n aria-label={this.getTranslation('openChatAriaLabel')}\n aria-expanded={!this.isMinimized}\n ></pn-button>\n )}\n </div>\n )}\n </Host>\n );\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"pn-chat.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-chat/pn-chat.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Listen, Fragment } from '@stencil/core';\nimport { minus, close, arrow_right, talk_bubble, submit } from 'pn-design-assets/pn-assets/icons.js';\nimport { AgentMessage, BaseMessage, ButtonMessage, CardMessage, ChatMessage, ChatMessages, CustomerSegment, LinkMessage } from './types';\nimport { LocalStorageService } from '@/globals/LocalStorageService';\nimport { JSX } from 'react';\nimport { PnChatService } from './pn-chat.service';\nimport { translations } from './translations';\nimport type { Translationsi18n } from './types';\n\n@Component({\n tag: 'pn-chat',\n styleUrl: 'pn-chat.scss',\n})\nexport class PnChat {\n @Prop() endpoint!: string;\n @Prop() customerSegment!: CustomerSegment;\n @Prop() mainHeading: string = '';\n @Prop() relatedContentAriaLabel: string;\n @Prop() chatMinimizedAriaLabel: string;\n @Prop() chatOpenedAriaLabel: string;\n @Prop() minimizeChatAriaLabel: string;\n @Prop() closeChatAriaLabel: string;\n @Prop() openChatAriaLabel: string;\n @Prop() chatControlsAriaLabel: string;\n @Prop() chatMessagesAriaLabel: string;\n @Prop() sentMessageAriaLabel: string;\n @Prop() writeChatMessagePlaceholder: string;\n @Prop() waitingForAnswerLabel: string;\n @Prop() sendButtonText: string;\n @Prop() loadingText: string;\n @Prop() carouselSlidesToShow: number = 1;\n @Prop() messages: string;\n @Prop() language: string = 'sv';\n @Prop() market: string = 'se';\n @Prop() itemId?: string = '';\n @Prop() pnChatId: string = '00000000-0000-0000-0000-000000000000';\n @Prop() forceOpen: boolean = false;\n @Prop() isLoggedIn: boolean = false;\n\n @State() private message: string = '';\n @State() private messagesData: ChatMessages;\n @State() private isMinimized: boolean = true;\n @State() private isClosed: boolean = false;\n @State() private lastMessageId: string = '';\n @State() i18n: any;\n\n private chatId: string;\n\n private readonly _defaultChatId: string = '00000000-0000-0000-0000-000000000000';\n private readonly _defaultAlternativeChatId: string = '1';\n private readonly chatLocalStorageKey = 'sf-chat-state';\n private chatMessagesContainer?: HTMLElement;\n private chatRef?: HTMLDivElement;\n private inputRef?: HTMLInputElement;\n private storage: LocalStorageService = new LocalStorageService();\n private _chatService: PnChatService;\n private _chatSegment: string = \"#chat\";\n private _forceClose: boolean = false;\n\n componentWillLoad(): void {\n this._forceClose = false;\n this._chatService = new PnChatService(this.endpoint, this.market, this.language);\n this.messagesData = {\n header: {},\n messages: [],\n };\n let storageId = this.storage.get(this.chatLocalStorageKey);\n\n if (storageId && storageId.isLoggedIn === !this.isLoggedIn) {\n this.storage.remove(this.chatLocalStorageKey);\n }\n else if (storageId && storageId.chatId) {\n this.chatId = storageId?.chatId ?? this.chatId;\n }\n\n this.setTranslations();\n\n setInterval(() => {\n this.updateChat();\n }, 1500);\n }\n\n setTranslations() {\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n private getTranslation(key: keyof Translationsi18n): string {\n const value = this[key];\n if (value === undefined || value === null || value === '') {\n return translations[this.language]?.[key] ?? translations['en'][key];\n }\n return value;\n }\n\n private async updateChat() {\n if (this.isMinimized || this.isClosed) {\n return;\n }\n\n let prevLastMessageId = this.lastMessageId;\n\n await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {\n this.lastMessageId = this._chatService.GetLastMessageId(newMessages?.messages, this.lastMessageId);\n let htmlCollection = document.getElementsByClassName('pn-chat-before');\n let elements = Array.from(htmlCollection);\n\n newMessages.messages.forEach(message => {\n elements.forEach(element => {\n if (message.content != null && (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim()))) {\n element.remove();\n }\n });\n this.renderMessage(message);\n });\n\n if (prevLastMessageId !== this.lastMessageId) {\n this._chatService.updateLastMessageId(this.chatId, this.lastMessageId);\n this.messagesData = newMessages;\n newMessages.messages.forEach(message => {\n this.renderMessage(message);\n });\n }\n });\n }\n\n private async setStartValues() {\n if (this._forceClose) {\n this._forceClose = false;\n return;\n }\n\n if ((!this.chatId || this.chatId === this._defaultChatId || this.chatId === this._defaultAlternativeChatId) && !this.isMinimized) {\n this.chatId = await this._chatService.startChat(this.pnChatId, this.itemId);\n this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });\n }\n\n if (this.chatId) {\n this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });\n await this.fetchMessages();\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n }\n }\n\n private async fetchMessages() {\n let newMessages = await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n this.messagesData = newMessages;\n let htmlCollection = document.getElementsByClassName('pn-chat-before');\n let elements = Array.from(htmlCollection);\n\n newMessages.messages.forEach(message => {\n elements.forEach(element => {\n if (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim())) {\n element.remove();\n }\n });\n this.renderMessage(message);\n });\n return newMessages;\n });\n }\n\n private async handleSend() {\n if (!this.message?.trim()) {\n return;\n }\n\n let message = this.message;\n this.message = '';\n this.createBeforeElement(message);\n\n let responseId = await this._chatService.sendMessage(message, this.itemId, this.chatId, this.lastMessageId, 'Text');\n this.lastMessageId = responseId;\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n\n this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));\n };\n\n private groupMessages(): JSX.Element[] {\n const result: JSX.Element[] = [];\n let currentCardGroup: CardMessage[] = [];\n\n const flushCardGroup = () => {\n if (currentCardGroup.length > 0) {\n const carouselData = {\n slides: currentCardGroup.map(card => {\n const cardHtml = `\n <pn-chat-message customerSegment=${this.customerSegment} data-card role=\"article\" category=${card.category}>\n <h2 class=\"card-heading\">${card.heading}</h2>\n <p>${card.content}</p>\n ${card.buttons\n ?.map(\n button => `\n <pn-button\n href=\"${button.href}\"\n class=\"${button.class}\"\n appearance=\"${button.appearance}\"\n variant=\"${button.variant}\"\n small=\"${button.small}\"\n role=\"button\"\n >\n ${button.content}\n </pn-button>\n `,\n )\n .join('') || ''\n }\n </pn-chat-message>\n `;\n return cardHtml;\n }),\n };\n result.push(\n <pn-marketweb-carousel\n class=\"card-container\"\n nextButtonLabel=\"Next\"\n previousButtonLabel=\"Previous\"\n ariaNavigationLabel={this.getTranslation('relatedContentAriaLabel')}\n slidesToShow={this.carouselSlidesToShow}\n source={JSON.stringify(carouselData)}\n ></pn-marketweb-carousel>,\n );\n currentCardGroup = [];\n }\n };\n\n this.messagesData.messages.forEach((message, index) => {\n if (message.category === 'Card') {\n currentCardGroup.push(message as CardMessage);\n\n if (index === this.messagesData.messages.length - 1 || this.messagesData.messages[index + 1]?.category !== 'Card') {\n flushCardGroup();\n }\n } else {\n flushCardGroup();\n result.push(this.renderMessage(message));\n }\n });\n\n return result;\n }\n\n private handleKeyPress = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && this.message.trim()) {\n event.preventDefault();\n this.handleSend();\n }\n };\n\n private handleSendMessage = (event: MouseEvent) => {\n if (this.message.trim()) {\n event.preventDefault();\n this.handleSend();\n }\n }\n\n private handleButtonKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n (event.target as HTMLElement).click();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.isMinimized && !this.isClosed) {\n this.toggleChat();\n }\n }\n\n @Watch('messages')\n handleMessagesChange(newMessage: string): void {\n if (newMessage) {\n this.handleSend();\n }\n }\n\n @Watch('pnChatId')\n handleNewChatId() {\n this.chatId = this.pnChatId === this._defaultAlternativeChatId ? this._defaultChatId : this.pnChatId;\n this.messagesData.messages = [];\n this.isMinimized = false;\n this.setStartValues();\n }\n\n @Watch('forceOpen')\n handleSameChatId() {\n this.isMinimized = false;\n }\n\n @Watch('isMinimized')\n scrollToBottom() {\n const observer = new MutationObserver((_, obs) => {\n const chatMain = document.getElementById('chat-main');\n if (chatMain) {\n setTimeout(() => {\n chatMain.scrollTo({\n top: chatMain.scrollHeight,\n behavior: 'smooth'\n });\n }, 500)\n obs.disconnect();\n }\n });\n observer.observe(document.body, { childList: true, subtree: true, });\n }\n\n private closeChat = () => {\n this._forceClose = true;\n this.storage.remove(this.chatLocalStorageKey);\n this.chatId = null;\n this.pnChatId = this._defaultChatId;\n let chatElement = document.getElementsByTagName('pn-chat')[0];\n chatElement.setAttribute('item-id', '');\n\n let hasActiveShipmentInUrl = window.location.href.includes(this._chatSegment);\n if (hasActiveShipmentInUrl) {\n this.isMinimized = !this.isMinimized;\n this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));\n document.body.classList.toggle('chat-open');\n window.location.href = window.location.href.split(this._chatSegment)[0];\n }\n else {\n this._forceClose = false;\n this.toggleChat();\n }\n }\n\n private toggleChat = () => {\n this.isMinimized = !this.isMinimized;\n this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));\n document.body.classList.toggle('chat-open');\n\n if (!this.isMinimized && !this.chatId) {\n this.setStartValues();\n }\n };\n\n private announceToScreenReader(message: string) {\n const announcement = document.createElement('div');\n announcement.setAttribute('role', 'status');\n announcement.setAttribute('aria-live', 'polite');\n announcement.classList.add('sr-only');\n announcement.textContent = message;\n document.body.appendChild(announcement);\n setTimeout(() => announcement.remove(), 1000);\n }\n\n private renderMessage(message: ChatMessage): JSX.Element {\n switch (message.category) {\n case 'Bot':\n return this.renderBaseMessage(message);\n case 'Button':\n return this.renderButtonMessage(message);\n case 'ButtonResponse':\n return this.renderBaseMessage(message);\n case 'Link':\n return this.renderLinkMessage(message);\n case 'Card':\n return this.renderCardMessage(message);\n case 'User':\n return this.renderBaseMessage(message);\n case 'Agent':\n return this.renderAgentMessage(message);\n case 'System':\n return this.renderBaseMessage(message);\n }\n }\n\n private renderBaseMessage(message: BaseMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category} agentName='' role=\"log\" aria-live=\"polite\">\n {message.content}\n </pn-chat-message>\n );\n }\n\n private renderAgentMessage(message: AgentMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category} agentName={message.agentName} role=\"log\" aria-live=\"polite\">\n {message.content}\n </pn-chat-message>\n );\n }\n\n private renderButtonMessage(message: ButtonMessage): JSX.Element {\n let props = {};\n\n if (message?.props) {\n try {\n props = JSON.parse(message.props);\n } catch (error) {\n console.error('Error parsing button props', error instanceof Error ? error.message : 'Unknown error');\n return;\n }\n }\n\n const handleClick = (event: MouseEvent) => {\n const button = (event.target as HTMLElement).closest('button');\n\n if (button === null || button?.hasAttribute('disabled')) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (props['data-action'] === 'minimize') {\n this.toggleChat();\n }\n\n if (props['data-action'] === 'choice') {\n (async () => {\n await this.handleSendChoice(props['data-option-choice'], message.content);\n })();\n\n const choiceButtons = document.querySelectorAll('[data-action=\"choice\"]');\n choiceButtons.forEach(pnButton => {\n const buttonInner = pnButton.querySelector('button');\n buttonInner?.setAttribute('disabled', 'true');\n });\n }\n };\n\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category}>\n <pn-button class={message.class} role=\"button\" {...props} onClick={handleClick} onKeyDown={e => this.handleButtonKeyDown(e)}>\n {message.content}\n </pn-button>\n </pn-chat-message>\n );\n }\n\n private createBeforeElement(content: string) {\n const targetElement = this.chatMessagesContainer;\n const chatMessage = document.createElement('pn-chat-message');\n chatMessage.setAttribute('customerSegment', this.customerSegment);\n chatMessage.setAttribute('category', 'User');\n chatMessage.classList.add('pn-chat-before');\n chatMessage.textContent = content;\n\n targetElement.appendChild(chatMessage);\n this.scrollToBottom();\n chatMessage.scrollIntoView();\n }\n\n private async handleSendChoice(choiceId: string, content: string) {\n this.createBeforeElement(content);\n\n let responseId = await this._chatService.sendMessage(choiceId, this.itemId, this.chatId, this.lastMessageId, 'Choice');\n this.lastMessageId = responseId;\n this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);\n\n this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));\n }\n\n private renderLinkMessage(message: LinkMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category}>\n <a href={message.href} role=\"link\" rel=\"noopener noreferrer\">\n <span class=\"content\">{message.content}</span>\n <pn-icon icon={arrow_right} color=\"blue700\" aria-hidden=\"true\" role=\"presentation\" />\n </a>\n </pn-chat-message>\n );\n }\n\n private renderCardMessage(message: CardMessage): JSX.Element {\n return (\n <pn-chat-message customerSegment={this.customerSegment} category={message.category} data-card role=\"article\">\n <h2 class=\"card-heading\">{message.heading}</h2>\n <p>{message.content}</p>\n {message.buttons && (\n <div class=\"cta\">\n {message.buttons?.map(button => (\n <pn-button\n href={button.href}\n class={button.class}\n appearance={button.appearance}\n variant={button.variant}\n small={button.small}\n role=\"button\"\n onKeyDown={e => this.handleButtonKeyDown(e)}\n >\n {button.content}\n </pn-button>\n ))}\n </div>\n )}\n </pn-chat-message>\n );\n }\n\n render() {\n const mainId = 'chat-main';\n const inputId = 'chat-input';\n const headerButton = this.messagesData?.header.button;\n\n return (\n <Host class={this.customerSegment}>\n {!this.isClosed && this.messagesData && (\n <div\n class={`pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`}\n ref={el => (this.chatRef = el as HTMLDivElement)}\n role=\"region\"\n aria-label={this.mainHeading}\n >\n {!this.isMinimized && (\n <Fragment>\n <header class=\"chat-header\" role=\"banner\">\n <h1 id=\"chat-title\">{this.mainHeading}</h1>\n <div class=\"chat-controls\" role=\"toolbar\" aria-label={this.getTranslation('chatControlsAriaLabel')}>\n <pn-button\n icon={minus}\n icon-only=\"true\"\n class=\"minimize-btn\"\n onClick={this.toggleChat}\n aria-expanded={!this.isMinimized}\n aria-controls={mainId}\n aria-label={this.getTranslation('minimizeChatAriaLabel')}\n appearance=\"light\"\n tooltip={this.getTranslation('minimizeChatAriaLabel')}\n small=\"true\"\n />\n <pn-button\n icon={close}\n icon-only=\"true\"\n class=\"close-btn\"\n onClick={this.closeChat}\n aria-expanded={!this.isMinimized}\n aria-label={this.getTranslation('closeChatAriaLabel')}\n appearance=\"light\"\n tooltip={this.getTranslation('closeChatAriaLabel')}\n small=\"true\"\n />\n </div>\n </header>\n {(this.messagesData?.messages?.length ?? 0) > 0 ?\n (<main id={mainId} class=\"chat-main\" role=\"main\" aria-labelledby=\"chat-title\">\n {this.messagesData.header && (\n <div class=\"chat-overview\">\n <div class=\"body\">{this.messagesData.header.body}</div>\n {headerButton && (\n <pn-button\n href={headerButton.href}\n class={headerButton.class}\n appearance={headerButton.appearance}\n variant={headerButton.variant}\n small={headerButton.small}\n role=\"button\"\n onKeyDown={e => this.handleButtonKeyDown(e)}\n >\n {headerButton.content}\n </pn-button>\n )}\n </div>\n )}\n <div ref={el => (this.chatMessagesContainer = el as HTMLElement)} class=\"chat-messages\" role=\"log\" aria-live=\"polite\" aria-label={this.getTranslation('chatMessagesAriaLabel')}>\n {this.groupMessages()}\n </div>\n <pn-icon\n class=\"indicator-icon\"\n aria-label={this.getTranslation('waitingForAnswerLabel')}\n role=\"presentation\"\n ></pn-icon>\n </main>)\n : (<main id={mainId} class=\"chat-main loading-chat-main\" role=\"main\" aria-labelledby=\"chat-title\">\n <div class=\"chat-loading-spinner\">\n <pn-spinner light=\"true\" size=\"1.5\"></pn-spinner>\n </div>\n <span class=\"chat-loading-content\">{this.getTranslation('loadingText')}</span>\n </main>)}\n <footer class=\"chat-footer\" role=\"contentinfo\">\n <div class=\"form\" role=\"form\" aria-labelledby={inputId}>\n <label htmlFor={inputId} class=\"sr-only\">\n {this.getTranslation('writeChatMessagePlaceholder')}\n </label>\n <div class=\"chat-input-container\">\n <input\n id={inputId}\n class=\"chat-text-input\"\n ref={el => (this.inputRef = el as HTMLInputElement)}\n type=\"text\"\n placeholder={this.getTranslation('writeChatMessagePlaceholder')}\n value={this.message}\n onInput={(e: Event) => (this.message = (e.target as HTMLInputElement).value)}\n onKeyPress={this.handleKeyPress}\n maxLength={3990}\n />\n {!this.message.trim() ? (\n <div\n class=\"chat-disabled-button\"\n role=\"button\"\n aria-label={this.getTranslation('sendButtonText')}\n aria-disabled=\"true\"\n tabIndex={-1}>\n <pn-icon color=\"gray400\" icon={submit}></pn-icon>\n </div>\n ) : (\n <pn-button\n icon-only=\"true\"\n variant=\"borderless\"\n appearance=\"light\"\n icon={submit}\n onClick={this.handleSendMessage}\n disabled={!this.message.trim()}\n aria-label={this.getTranslation('sendButtonText')}\n tooltip={this.getTranslation('sendButtonText')}>\n </pn-button>\n )}\n </div>\n </div>\n </footer>\n </Fragment>\n )}\n {this.isMinimized && (\n <pn-button\n icon={talk_bubble}\n icon-only=\"true\"\n class=\"open-chat-btn\"\n onClick={this.toggleChat}\n tooltip={this.getTranslation('openChatAriaLabel')}\n aria-label={this.getTranslation('openChatAriaLabel')}\n aria-expanded={!this.isMinimized}\n ></pn-button>\n )}\n </div>\n )}\n </Host>\n );\n }\n}"]}
|
|
@@ -113,4 +113,47 @@ export const ChatNoFakeResponse = {
|
|
|
113
113
|
loadingText: 'Loading chat',
|
|
114
114
|
},
|
|
115
115
|
};
|
|
116
|
+
export const ChatExamples = {
|
|
117
|
+
name: 'Chat - Examples from docs',
|
|
118
|
+
render: args => {
|
|
119
|
+
const component = createComponent('pn-chat', args);
|
|
120
|
+
return component;
|
|
121
|
+
},
|
|
122
|
+
args: {
|
|
123
|
+
messages: `{
|
|
124
|
+
"header": {
|
|
125
|
+
"body": null,
|
|
126
|
+
"button": null
|
|
127
|
+
},
|
|
128
|
+
"messages": [
|
|
129
|
+
{
|
|
130
|
+
"category": "System",
|
|
131
|
+
"content": "A customer service agent has entered the chat.",
|
|
132
|
+
"messageId": "14584740-7784-4749-9b39-bce31455ea55"
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"category": "Bot",
|
|
136
|
+
"content": "Varmt välkommen till PostNords virtuella assistent. Jag kan hjälpa dig med frågor gällande brev och paket samt skicka dig vidare till vår kundservice.",
|
|
137
|
+
"messageId": "967ddba6-ba1c-44d1-9725-386b32dc3498"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"category": "Bot",
|
|
141
|
+
"content": "Hur kan jag hjälpa dig?",
|
|
142
|
+
"messageId": "b26624af-852b-49cf-a3e6-77cc046be71f"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"class": null,
|
|
146
|
+
"category": "User",
|
|
147
|
+
"content": "hejsan vart är mitt paket?",
|
|
148
|
+
"messageId": "74cadc59-86ad-4f11-b4b6-a263aa9dbad9"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"category": "Bot",
|
|
152
|
+
"content": "Om du har ett kollinummer som berör din fråga, skriv gärna det här.",
|
|
153
|
+
"messageId": "90845d71-2a8e-4b1a-bd45-20de7a2dbe5f"
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
};`,
|
|
157
|
+
},
|
|
158
|
+
};
|
|
116
159
|
//# sourceMappingURL=pn-chat.stories.js.map
|