@pocketping/widget 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +20 -6
- package/dist/index.d.mts +8 -3
- package/dist/index.d.ts +8 -3
- package/dist/index.js +21 -10
- package/dist/index.mjs +21 -10
- package/dist/pocketping.min.global.js +329 -0
- package/package.json +12 -12
- package/dist/index.global.js +0 -1735
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 PocketPing Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -6,11 +6,22 @@ Embeddable chat widget for PocketPing. Drop-in customer support chat that connec
|
|
|
6
6
|
|
|
7
7
|
### Via CDN (Recommended)
|
|
8
8
|
|
|
9
|
+
**One-line install (SaaS users):**
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<script src="https://cdn.pocketping.io/widget.js" data-project-id="proj_xxxxxxxxxxxxx"></script>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
**With custom options:**
|
|
16
|
+
|
|
9
17
|
```html
|
|
10
18
|
<script src="https://cdn.pocketping.io/widget.js"></script>
|
|
11
19
|
<script>
|
|
12
20
|
PocketPing.init({
|
|
13
|
-
|
|
21
|
+
projectId: 'proj_xxxxxxxxxxxxx', // SaaS users
|
|
22
|
+
// OR
|
|
23
|
+
endpoint: 'https://yoursite.com/pocketping', // Self-hosted
|
|
24
|
+
operatorName: 'Support Team',
|
|
14
25
|
});
|
|
15
26
|
</script>
|
|
16
27
|
```
|
|
@@ -22,10 +33,12 @@ npm install @pocketping/widget
|
|
|
22
33
|
```
|
|
23
34
|
|
|
24
35
|
```javascript
|
|
25
|
-
import
|
|
36
|
+
import PocketPing from '@pocketping/widget';
|
|
26
37
|
|
|
27
|
-
init({
|
|
28
|
-
|
|
38
|
+
PocketPing.init({
|
|
39
|
+
projectId: 'proj_xxxxxxxxxxxxx', // SaaS users
|
|
40
|
+
// OR
|
|
41
|
+
endpoint: 'https://yoursite.com/pocketping', // Self-hosted
|
|
29
42
|
});
|
|
30
43
|
```
|
|
31
44
|
|
|
@@ -33,11 +46,12 @@ init({
|
|
|
33
46
|
|
|
34
47
|
## Configuration Options
|
|
35
48
|
|
|
36
|
-
### Required
|
|
49
|
+
### Required (one of)
|
|
37
50
|
|
|
38
51
|
| Option | Type | Description |
|
|
39
52
|
|--------|------|-------------|
|
|
40
|
-
| `
|
|
53
|
+
| `projectId` | `string` | Your project ID from [app.pocketping.io](https://app.pocketping.io) (SaaS) |
|
|
54
|
+
| `endpoint` | `string` | Your backend endpoint (self-hosted, e.g., `"https://yoursite.com/pocketping"`) |
|
|
41
55
|
|
|
42
56
|
---
|
|
43
57
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
interface PocketPingConfig {
|
|
2
|
-
/** Your backend endpoint (e.g., "https://yoursite.com/pocketping") */
|
|
3
|
-
endpoint
|
|
2
|
+
/** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
|
|
3
|
+
endpoint?: string;
|
|
4
|
+
/** Project ID for SaaS users (e.g., "proj_xxxxxxxxxxxxx") - from dashboard */
|
|
5
|
+
projectId?: string;
|
|
4
6
|
/** Company/operator name displayed in header */
|
|
5
7
|
operatorName?: string;
|
|
6
8
|
/** Operator/company avatar URL (displayed in header) */
|
|
@@ -142,6 +144,9 @@ interface UserIdentity {
|
|
|
142
144
|
/** Any custom fields (plan, company, etc.) */
|
|
143
145
|
[key: string]: unknown;
|
|
144
146
|
}
|
|
147
|
+
type ResolvedPocketPingConfig = Omit<PocketPingConfig, 'endpoint'> & {
|
|
148
|
+
endpoint: string;
|
|
149
|
+
};
|
|
145
150
|
|
|
146
151
|
type Listener<T> = (data: T) => void;
|
|
147
152
|
declare class PocketPingClient {
|
|
@@ -154,7 +159,7 @@ declare class PocketPingClient {
|
|
|
154
159
|
private reconnectAttempts;
|
|
155
160
|
private maxReconnectAttempts;
|
|
156
161
|
private reconnectTimeout;
|
|
157
|
-
constructor(config:
|
|
162
|
+
constructor(config: ResolvedPocketPingConfig);
|
|
158
163
|
connect(): Promise<Session>;
|
|
159
164
|
disconnect(): void;
|
|
160
165
|
sendMessage(content: string): Promise<Message>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
interface PocketPingConfig {
|
|
2
|
-
/** Your backend endpoint (e.g., "https://yoursite.com/pocketping") */
|
|
3
|
-
endpoint
|
|
2
|
+
/** Your backend endpoint for self-hosted (e.g., "https://yoursite.com/pocketping") */
|
|
3
|
+
endpoint?: string;
|
|
4
|
+
/** Project ID for SaaS users (e.g., "proj_xxxxxxxxxxxxx") - from dashboard */
|
|
5
|
+
projectId?: string;
|
|
4
6
|
/** Company/operator name displayed in header */
|
|
5
7
|
operatorName?: string;
|
|
6
8
|
/** Operator/company avatar URL (displayed in header) */
|
|
@@ -142,6 +144,9 @@ interface UserIdentity {
|
|
|
142
144
|
/** Any custom fields (plan, company, etc.) */
|
|
143
145
|
[key: string]: unknown;
|
|
144
146
|
}
|
|
147
|
+
type ResolvedPocketPingConfig = Omit<PocketPingConfig, 'endpoint'> & {
|
|
148
|
+
endpoint: string;
|
|
149
|
+
};
|
|
145
150
|
|
|
146
151
|
type Listener<T> = (data: T) => void;
|
|
147
152
|
declare class PocketPingClient {
|
|
@@ -154,7 +159,7 @@ declare class PocketPingClient {
|
|
|
154
159
|
private reconnectAttempts;
|
|
155
160
|
private maxReconnectAttempts;
|
|
156
161
|
private reconnectTimeout;
|
|
157
|
-
constructor(config:
|
|
162
|
+
constructor(config: ResolvedPocketPingConfig);
|
|
158
163
|
connect(): Promise<Session>;
|
|
159
164
|
disconnect(): void;
|
|
160
165
|
sendMessage(content: string): Promise<Message>;
|
package/dist/index.js
CHANGED
|
@@ -637,7 +637,7 @@ function StatusIcon({ status }) {
|
|
|
637
637
|
}
|
|
638
638
|
|
|
639
639
|
// src/version.ts
|
|
640
|
-
var VERSION = "0.
|
|
640
|
+
var VERSION = "0.3.1";
|
|
641
641
|
|
|
642
642
|
// src/client.ts
|
|
643
643
|
var PocketPingClient = class {
|
|
@@ -1227,15 +1227,21 @@ var PocketPingClient = class {
|
|
|
1227
1227
|
// src/index.ts
|
|
1228
1228
|
var client = null;
|
|
1229
1229
|
var container = null;
|
|
1230
|
+
var SAAS_API_BASE = "https://app.pocketping.io/api/widget";
|
|
1230
1231
|
function init(config) {
|
|
1231
1232
|
if (client) {
|
|
1232
1233
|
console.warn("[PocketPing] Already initialized");
|
|
1233
1234
|
return client;
|
|
1234
1235
|
}
|
|
1235
|
-
|
|
1236
|
-
|
|
1236
|
+
let resolvedEndpoint = config.endpoint;
|
|
1237
|
+
if (!resolvedEndpoint && config.projectId) {
|
|
1238
|
+
resolvedEndpoint = `${SAAS_API_BASE}/${config.projectId}`;
|
|
1237
1239
|
}
|
|
1238
|
-
|
|
1240
|
+
if (!resolvedEndpoint) {
|
|
1241
|
+
throw new Error("[PocketPing] endpoint or projectId is required");
|
|
1242
|
+
}
|
|
1243
|
+
const resolvedConfig = { ...config, endpoint: resolvedEndpoint };
|
|
1244
|
+
client = new PocketPingClient(resolvedConfig);
|
|
1239
1245
|
container = document.createElement("div");
|
|
1240
1246
|
container.id = "pocketping-container";
|
|
1241
1247
|
document.body.appendChild(container);
|
|
@@ -1315,12 +1321,17 @@ function on(eventName, handler) {
|
|
|
1315
1321
|
}
|
|
1316
1322
|
if (typeof document !== "undefined") {
|
|
1317
1323
|
const script = document.currentScript;
|
|
1318
|
-
if (script
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
+
if (script) {
|
|
1325
|
+
const projectId = script.dataset.projectId;
|
|
1326
|
+
const endpoint = script.dataset.endpoint;
|
|
1327
|
+
if (projectId || endpoint) {
|
|
1328
|
+
init({
|
|
1329
|
+
projectId,
|
|
1330
|
+
endpoint,
|
|
1331
|
+
theme: script.dataset.theme || "auto",
|
|
1332
|
+
position: script.dataset.position || "bottom-right"
|
|
1333
|
+
});
|
|
1334
|
+
}
|
|
1324
1335
|
}
|
|
1325
1336
|
}
|
|
1326
1337
|
var index_default = { init, destroy, open, close, toggle, sendMessage, trigger, onEvent, offEvent, on, identify, reset, getIdentity };
|
package/dist/index.mjs
CHANGED
|
@@ -600,7 +600,7 @@ function StatusIcon({ status }) {
|
|
|
600
600
|
}
|
|
601
601
|
|
|
602
602
|
// src/version.ts
|
|
603
|
-
var VERSION = "0.
|
|
603
|
+
var VERSION = "0.3.1";
|
|
604
604
|
|
|
605
605
|
// src/client.ts
|
|
606
606
|
var PocketPingClient = class {
|
|
@@ -1190,15 +1190,21 @@ var PocketPingClient = class {
|
|
|
1190
1190
|
// src/index.ts
|
|
1191
1191
|
var client = null;
|
|
1192
1192
|
var container = null;
|
|
1193
|
+
var SAAS_API_BASE = "https://app.pocketping.io/api/widget";
|
|
1193
1194
|
function init(config) {
|
|
1194
1195
|
if (client) {
|
|
1195
1196
|
console.warn("[PocketPing] Already initialized");
|
|
1196
1197
|
return client;
|
|
1197
1198
|
}
|
|
1198
|
-
|
|
1199
|
-
|
|
1199
|
+
let resolvedEndpoint = config.endpoint;
|
|
1200
|
+
if (!resolvedEndpoint && config.projectId) {
|
|
1201
|
+
resolvedEndpoint = `${SAAS_API_BASE}/${config.projectId}`;
|
|
1200
1202
|
}
|
|
1201
|
-
|
|
1203
|
+
if (!resolvedEndpoint) {
|
|
1204
|
+
throw new Error("[PocketPing] endpoint or projectId is required");
|
|
1205
|
+
}
|
|
1206
|
+
const resolvedConfig = { ...config, endpoint: resolvedEndpoint };
|
|
1207
|
+
client = new PocketPingClient(resolvedConfig);
|
|
1202
1208
|
container = document.createElement("div");
|
|
1203
1209
|
container.id = "pocketping-container";
|
|
1204
1210
|
document.body.appendChild(container);
|
|
@@ -1278,12 +1284,17 @@ function on(eventName, handler) {
|
|
|
1278
1284
|
}
|
|
1279
1285
|
if (typeof document !== "undefined") {
|
|
1280
1286
|
const script = document.currentScript;
|
|
1281
|
-
if (script
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
+
if (script) {
|
|
1288
|
+
const projectId = script.dataset.projectId;
|
|
1289
|
+
const endpoint = script.dataset.endpoint;
|
|
1290
|
+
if (projectId || endpoint) {
|
|
1291
|
+
init({
|
|
1292
|
+
projectId,
|
|
1293
|
+
endpoint,
|
|
1294
|
+
theme: script.dataset.theme || "auto",
|
|
1295
|
+
position: script.dataset.position || "bottom-right"
|
|
1296
|
+
});
|
|
1297
|
+
}
|
|
1287
1298
|
}
|
|
1288
1299
|
}
|
|
1289
1300
|
var index_default = { init, destroy, open, close, toggle, sendMessage, trigger, onEvent, offEvent, on, identify, reset, getIdentity };
|
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
"use strict";var PocketPing=(()=>{var Y=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var ot=Object.getOwnPropertyNames;var it=Object.prototype.hasOwnProperty;var rt=(t,e)=>{for(var n in e)Y(t,n,{get:e[n],enumerable:!0})},at=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ot(e))!it.call(t,o)&&o!==n&&Y(t,o,{get:()=>e[o],enumerable:!(s=st(e,o))||s.enumerable});return t};var ct=t=>at(Y({},"__esModule",{value:!0}),t);var Et={};rt(Et,{close:()=>Je,default:()=>Ct,destroy:()=>Be,getIdentity:()=>tt,identify:()=>Ye,init:()=>ue,offEvent:()=>Qe,on:()=>nt,onEvent:()=>Ke,open:()=>qe,reset:()=>et,sendMessage:()=>Ge,toggle:()=>Xe,trigger:()=>Ze});var X,g,ve,lt,W,fe,ye,be,xe,se,ee,te,pt,L={},ke=[],dt=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,G=Array.isArray;function O(t,e){for(var n in e)t[n]=e[n];return t}function oe(t){t&&t.parentNode&&t.parentNode.removeChild(t)}function ie(t,e,n){var s,o,i,a={};for(i in e)i=="key"?s=e[i]:i=="ref"?o=e[i]:a[i]=e[i];if(arguments.length>2&&(a.children=arguments.length>3?X.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(i in t.defaultProps)a[i]===void 0&&(a[i]=t.defaultProps[i]);return B(t,a,s,o,null)}function B(t,e,n,s,o){var i={type:t,props:e,key:n,ref:s,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:o??++ve,__i:-1,__u:0};return o==null&&g.vnode!=null&&g.vnode(i),i}function E(t){return t.children}function q(t,e){this.props=t,this.context=e}function U(t,e){if(e==null)return t.__?U(t.__,t.__i+1):null;for(var n;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null)return n.__e;return typeof t.type=="function"?U(t):null}function we(t){var e,n;if((t=t.__)!=null&&t.__c!=null){for(t.__e=t.__c.base=null,e=0;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null){t.__e=t.__c.base=n.__e;break}return we(t)}}function ge(t){(!t.__d&&(t.__d=!0)&&W.push(t)&&!J.__r++||fe!=g.debounceRendering)&&((fe=g.debounceRendering)||ye)(J)}function J(){for(var t,e,n,s,o,i,a,c=1;W.length;)W.length>c&&W.sort(be),t=W.shift(),c=W.length,t.__d&&(n=void 0,s=void 0,o=(s=(e=t).__v).__e,i=[],a=[],e.__P&&((n=O({},s)).__v=s.__v+1,g.vnode&&g.vnode(n),re(e.__P,n,s,e.__n,e.__P.namespaceURI,32&s.__u?[o]:null,i,o??U(s),!!(32&s.__u),a),n.__v=s.__v,n.__.__k[n.__i]=n,Ie(i,n,a),s.__e=s.__=null,n.__e!=o&&we(n)));J.__r=0}function Pe(t,e,n,s,o,i,a,c,p,l,f){var r,u,_,x,S,b,v,h=s&&s.__k||ke,M=e.length;for(p=_t(n,e,h,p,M),r=0;r<M;r++)(_=n.__k[r])!=null&&(u=_.__i==-1?L:h[_.__i]||L,_.__i=r,b=re(t,_,u,o,i,a,c,p,l,f),x=_.__e,_.ref&&u.ref!=_.ref&&(u.ref&&ae(u.ref,null,_),f.push(_.ref,_.__c||x,_)),S==null&&x!=null&&(S=x),(v=!!(4&_.__u))||u.__k===_.__k?p=Se(_,p,t,v):typeof _.type=="function"&&b!==void 0?p=b:x&&(p=x.nextSibling),_.__u&=-7);return n.__e=S,p}function _t(t,e,n,s,o){var i,a,c,p,l,f=n.length,r=f,u=0;for(t.__k=new Array(o),i=0;i<o;i++)(a=e[i])!=null&&typeof a!="boolean"&&typeof a!="function"?(typeof a=="string"||typeof a=="number"||typeof a=="bigint"||a.constructor==String?a=t.__k[i]=B(null,a,null,null,null):G(a)?a=t.__k[i]=B(E,{children:a},null,null,null):a.constructor===void 0&&a.__b>0?a=t.__k[i]=B(a.type,a.props,a.key,a.ref?a.ref:null,a.__v):t.__k[i]=a,p=i+u,a.__=t,a.__b=t.__b+1,c=null,(l=a.__i=ut(a,n,p,r))!=-1&&(r--,(c=n[l])&&(c.__u|=2)),c==null||c.__v==null?(l==-1&&(o>f?u--:o<f&&u++),typeof a.type!="function"&&(a.__u|=4)):l!=p&&(l==p-1?u--:l==p+1?u++:(l>p?u--:u++,a.__u|=4))):t.__k[i]=null;if(r)for(i=0;i<f;i++)(c=n[i])!=null&&(2&c.__u)==0&&(c.__e==s&&(s=U(c)),Ee(c,c));return s}function Se(t,e,n,s){var o,i;if(typeof t.type=="function"){for(o=t.__k,i=0;o&&i<o.length;i++)o[i]&&(o[i].__=t,e=Se(o[i],e,n,s));return e}t.__e!=e&&(s&&(e&&t.type&&!e.parentNode&&(e=U(t)),n.insertBefore(t.__e,e||null)),e=t.__e);do e=e&&e.nextSibling;while(e!=null&&e.nodeType==8);return e}function ut(t,e,n,s){var o,i,a,c=t.key,p=t.type,l=e[n],f=l!=null&&(2&l.__u)==0;if(l===null&&c==null||f&&c==l.key&&p==l.type)return n;if(s>(f?1:0)){for(o=n-1,i=n+1;o>=0||i<e.length;)if((l=e[a=o>=0?o--:i++])!=null&&(2&l.__u)==0&&c==l.key&&p==l.type)return a}return-1}function he(t,e,n){e[0]=="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||dt.test(e)?n:n+"px"}function z(t,e,n,s,o){var i,a;e:if(e=="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof s=="string"&&(t.style.cssText=s=""),s)for(e in s)n&&e in n||he(t.style,e,"");if(n)for(e in n)s&&n[e]==s[e]||he(t.style,e,n[e])}else if(e[0]=="o"&&e[1]=="n")i=e!=(e=e.replace(xe,"$1")),a=e.toLowerCase(),e=a in t||e=="onFocusOut"||e=="onFocusIn"?a.slice(2):e.slice(2),t.l||(t.l={}),t.l[e+i]=n,n?s?n.u=s.u:(n.u=se,t.addEventListener(e,i?te:ee,i)):t.removeEventListener(e,i?te:ee,i);else{if(o=="http://www.w3.org/2000/svg")e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!="width"&&e!="height"&&e!="href"&&e!="list"&&e!="form"&&e!="tabIndex"&&e!="download"&&e!="rowSpan"&&e!="colSpan"&&e!="role"&&e!="popover"&&e in t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!="-"?t.removeAttribute(e):t.setAttribute(e,e=="popover"&&n==1?"":n))}}function me(t){return function(e){if(this.l){var n=this.l[e.type+t];if(e.t==null)e.t=se++;else if(e.t<n.u)return;return n(g.event?g.event(e):e)}}}function re(t,e,n,s,o,i,a,c,p,l){var f,r,u,_,x,S,b,v,h,M,T,H,R,m,P,C,D,I=e.type;if(e.constructor!==void 0)return null;128&n.__u&&(p=!!(32&n.__u),i=[c=e.__e=n.__e]),(f=g.__b)&&f(e);e:if(typeof I=="function")try{if(v=e.props,h="prototype"in I&&I.prototype.render,M=(f=I.contextType)&&s[f.__c],T=f?M?M.props.value:f.__:s,n.__c?b=(r=e.__c=n.__c).__=r.__E:(h?e.__c=r=new I(v,T):(e.__c=r=new q(v,T),r.constructor=I,r.render=gt),M&&M.sub(r),r.state||(r.state={}),r.__n=s,u=r.__d=!0,r.__h=[],r._sb=[]),h&&r.__s==null&&(r.__s=r.state),h&&I.getDerivedStateFromProps!=null&&(r.__s==r.state&&(r.__s=O({},r.__s)),O(r.__s,I.getDerivedStateFromProps(v,r.__s))),_=r.props,x=r.state,r.__v=e,u)h&&I.getDerivedStateFromProps==null&&r.componentWillMount!=null&&r.componentWillMount(),h&&r.componentDidMount!=null&&r.__h.push(r.componentDidMount);else{if(h&&I.getDerivedStateFromProps==null&&v!==_&&r.componentWillReceiveProps!=null&&r.componentWillReceiveProps(v,T),e.__v==n.__v||!r.__e&&r.shouldComponentUpdate!=null&&r.shouldComponentUpdate(v,r.__s,T)===!1){for(e.__v!=n.__v&&(r.props=v,r.state=r.__s,r.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.some(function($){$&&($.__=e)}),H=0;H<r._sb.length;H++)r.__h.push(r._sb[H]);r._sb=[],r.__h.length&&a.push(r);break e}r.componentWillUpdate!=null&&r.componentWillUpdate(v,r.__s,T),h&&r.componentDidUpdate!=null&&r.__h.push(function(){r.componentDidUpdate(_,x,S)})}if(r.context=T,r.props=v,r.__P=t,r.__e=!1,R=g.__r,m=0,h){for(r.state=r.__s,r.__d=!1,R&&R(e),f=r.render(r.props,r.state,r.context),P=0;P<r._sb.length;P++)r.__h.push(r._sb[P]);r._sb=[]}else do r.__d=!1,R&&R(e),f=r.render(r.props,r.state,r.context),r.state=r.__s;while(r.__d&&++m<25);r.state=r.__s,r.getChildContext!=null&&(s=O(O({},s),r.getChildContext())),h&&!u&&r.getSnapshotBeforeUpdate!=null&&(S=r.getSnapshotBeforeUpdate(_,x)),C=f,f!=null&&f.type===E&&f.key==null&&(C=Ce(f.props.children)),c=Pe(t,G(C)?C:[C],e,n,s,o,i,a,c,p,l),r.base=e.__e,e.__u&=-161,r.__h.length&&a.push(r),b&&(r.__E=r.__=null)}catch($){if(e.__v=null,p||i!=null)if($.then){for(e.__u|=p?160:128;c&&c.nodeType==8&&c.nextSibling;)c=c.nextSibling;i[i.indexOf(c)]=null,e.__e=c}else{for(D=i.length;D--;)oe(i[D]);ne(e)}else e.__e=n.__e,e.__k=n.__k,$.then||ne(e);g.__e($,e,n)}else i==null&&e.__v==n.__v?(e.__k=n.__k,e.__e=n.__e):c=e.__e=ft(n.__e,e,n,s,o,i,a,p,l);return(f=g.diffed)&&f(e),128&e.__u?void 0:c}function ne(t){t&&t.__c&&(t.__c.__e=!0),t&&t.__k&&t.__k.forEach(ne)}function Ie(t,e,n){for(var s=0;s<n.length;s++)ae(n[s],n[++s],n[++s]);g.__c&&g.__c(e,t),t.some(function(o){try{t=o.__h,o.__h=[],t.some(function(i){i.call(o)})}catch(i){g.__e(i,o.__v)}})}function Ce(t){return typeof t!="object"||t==null||t.__b&&t.__b>0?t:G(t)?t.map(Ce):O({},t)}function ft(t,e,n,s,o,i,a,c,p){var l,f,r,u,_,x,S,b=n.props||L,v=e.props,h=e.type;if(h=="svg"?o="http://www.w3.org/2000/svg":h=="math"?o="http://www.w3.org/1998/Math/MathML":o||(o="http://www.w3.org/1999/xhtml"),i!=null){for(l=0;l<i.length;l++)if((_=i[l])&&"setAttribute"in _==!!h&&(h?_.localName==h:_.nodeType==3)){t=_,i[l]=null;break}}if(t==null){if(h==null)return document.createTextNode(v);t=document.createElementNS(o,h,v.is&&v),c&&(g.__m&&g.__m(e,i),c=!1),i=null}if(h==null)b===v||c&&t.data==v||(t.data=v);else{if(i=i&&X.call(t.childNodes),!c&&i!=null)for(b={},l=0;l<t.attributes.length;l++)b[(_=t.attributes[l]).name]=_.value;for(l in b)if(_=b[l],l!="children"){if(l=="dangerouslySetInnerHTML")r=_;else if(!(l in v)){if(l=="value"&&"defaultValue"in v||l=="checked"&&"defaultChecked"in v)continue;z(t,l,null,_,o)}}for(l in v)_=v[l],l=="children"?u=_:l=="dangerouslySetInnerHTML"?f=_:l=="value"?x=_:l=="checked"?S=_:c&&typeof _!="function"||b[l]===_||z(t,l,_,b[l],o);if(f)c||r&&(f.__html==r.__html||f.__html==t.innerHTML)||(t.innerHTML=f.__html),e.__k=[];else if(r&&(t.innerHTML=""),Pe(e.type=="template"?t.content:t,G(u)?u:[u],e,n,s,h=="foreignObject"?"http://www.w3.org/1999/xhtml":o,i,a,i?i[0]:n.__k&&U(n,0),c,p),i!=null)for(l=i.length;l--;)oe(i[l]);c||(l="value",h=="progress"&&x==null?t.removeAttribute("value"):x!=null&&(x!==t[l]||h=="progress"&&!x||h=="option"&&x!=b[l])&&z(t,l,x,b[l],o),l="checked",S!=null&&S!=t[l]&&z(t,l,S,b[l],o))}return t}function ae(t,e,n){try{if(typeof t=="function"){var s=typeof t.__u=="function";s&&t.__u(),s&&e==null||(t.__u=t(e))}else t.current=e}catch(o){g.__e(o,n)}}function Ee(t,e,n){var s,o;if(g.unmount&&g.unmount(t),(s=t.ref)&&(s.current&&s.current!=t.__e||ae(s,null,e)),(s=t.__c)!=null){if(s.componentWillUnmount)try{s.componentWillUnmount()}catch(i){g.__e(i,e)}s.base=s.__P=null}if(s=t.__k)for(o=0;o<s.length;o++)s[o]&&Ee(s[o],e,n||typeof t.type!="function");n||oe(t.__e),t.__c=t.__=t.__e=void 0}function gt(t,e,n){return this.constructor(t,n)}function ce(t,e,n){var s,o,i,a;e==document&&(e=document.documentElement),g.__&&g.__(t,e),o=(s=typeof n=="function")?null:n&&n.__k||e.__k,i=[],a=[],re(e,t=(!s&&n||e).__k=ie(E,null,[t]),o||L,L,e.namespaceURI,!s&&n?[n]:o?null:e.firstChild?X.call(e.childNodes):null,i,!s&&n?n:o?o.__e:e.firstChild,s,a),Ie(i,t,a)}X=ke.slice,g={__e:function(t,e,n,s){for(var o,i,a;e=e.__;)if((o=e.__c)&&!o.__)try{if((i=o.constructor)&&i.getDerivedStateFromError!=null&&(o.setState(i.getDerivedStateFromError(t)),a=o.__d),o.componentDidCatch!=null&&(o.componentDidCatch(t,s||{}),a=o.__d),a)return o.__E=o}catch(c){t=c}throw t}},ve=0,lt=function(t){return t!=null&&t.constructor===void 0},q.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!=this.state?this.__s:this.__s=O({},this.state),typeof t=="function"&&(t=t(O({},n),this.props)),t&&O(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),ge(this))},q.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),ge(this))},q.prototype.render=E,W=[],ye=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,be=function(t,e){return t.__v.__b-e.__v.__b},J.__r=0,xe=/(PointerCapture)$|Capture$/i,se=0,ee=me(!1),te=me(!0),pt=0;var F,k,le,Me,j=0,Ve=[],w=g,Te=w.__b,$e=w.__r,Oe=w.diffed,Ae=w.__c,He=w.unmount,Re=w.__;function de(t,e){w.__h&&w.__h(k,t,j||e),j=0;var n=k.__H||(k.__H={__:[],__h:[]});return t>=n.__.length&&n.__.push({}),n.__[t]}function V(t){return j=1,ht(Le,t)}function ht(t,e,n){var s=de(F++,2);if(s.t=t,!s.__c&&(s.__=[n?n(e):Le(void 0,e),function(c){var p=s.__N?s.__N[0]:s.__[0],l=s.t(p,c);p!==l&&(s.__N=[l,s.__[1]],s.__c.setState({}))}],s.__c=k,!k.__f)){var o=function(c,p,l){if(!s.__c.__H)return!0;var f=s.__c.__H.__.filter(function(u){return!!u.__c});if(f.every(function(u){return!u.__N}))return!i||i.call(this,c,p,l);var r=s.__c.props!==c;return f.forEach(function(u){if(u.__N){var _=u.__[0];u.__=u.__N,u.__N=void 0,_!==u.__[0]&&(r=!0)}}),i&&i.call(this,c,p,l)||r};k.__f=!0;var i=k.shouldComponentUpdate,a=k.componentWillUpdate;k.componentWillUpdate=function(c,p,l){if(this.__e){var f=i;i=void 0,o(c,p,l),i=f}a&&a.call(this,c,p,l)},k.shouldComponentUpdate=o}return s.__N||s.__}function N(t,e){var n=de(F++,3);!w.__s&&De(n.__H,e)&&(n.__=t,n.u=e,k.__H.__h.push(n))}function _e(t){return j=5,Ne(function(){return{current:t}},[])}function Ne(t,e){var n=de(F++,7);return De(n.__H,e)&&(n.__=t(),n.__H=e,n.__h=t),n.__}function Ue(t,e){return j=8,Ne(function(){return t},e)}function mt(){for(var t;t=Ve.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(Z),t.__H.__h.forEach(pe),t.__H.__h=[]}catch(e){t.__H.__h=[],w.__e(e,t.__v)}}w.__b=function(t){k=null,Te&&Te(t)},w.__=function(t,e){t&&e.__k&&e.__k.__m&&(t.__m=e.__k.__m),Re&&Re(t,e)},w.__r=function(t){$e&&$e(t),F=0;var e=(k=t.__c).__H;e&&(le===k?(e.__h=[],k.__h=[],e.__.forEach(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0})):(e.__h.forEach(Z),e.__h.forEach(pe),e.__h=[],F=0)),le=k},w.diffed=function(t){Oe&&Oe(t);var e=t.__c;e&&e.__H&&(e.__H.__h.length&&(Ve.push(e)!==1&&Me===w.requestAnimationFrame||((Me=w.requestAnimationFrame)||vt)(mt)),e.__H.__.forEach(function(n){n.u&&(n.__H=n.u),n.u=void 0})),le=k=null},w.__c=function(t,e){e.some(function(n){try{n.__h.forEach(Z),n.__h=n.__h.filter(function(s){return!s.__||pe(s)})}catch(s){e.some(function(o){o.__h&&(o.__h=[])}),e=[],w.__e(s,n.__v)}}),Ae&&Ae(t,e)},w.unmount=function(t){He&&He(t);var e,n=t.__c;n&&n.__H&&(n.__H.__.forEach(function(s){try{Z(s)}catch(o){e=o}}),n.__H=void 0,e&&w.__e(e,n.__v))};var We=typeof requestAnimationFrame=="function";function vt(t){var e,n=function(){clearTimeout(s),We&&cancelAnimationFrame(e),setTimeout(t)},s=setTimeout(n,35);We&&(e=requestAnimationFrame(n))}function Z(t){var e=k,n=t.__c;typeof n=="function"&&(t.__c=void 0,n()),k=e}function pe(t){var e=k;t.__c=t.__(),k=e}function De(t,e){return!t||t.length!==e.length||e.some(function(n,s){return n!==t[s]})}function Le(t,e){return typeof e=="function"?e(t):e}function Fe(t,e){let n=e==="dark",s={bg:n?"#1f2937":"#ffffff",bgSecondary:n?"#374151":"#f3f4f6",text:n?"#f9fafb":"#111827",textSecondary:n?"#9ca3af":"#6b7280",border:n?"#4b5563":"#e5e7eb",messageBg:n?"#374151":"#f3f4f6"};return`
|
|
2
|
+
#pocketping-container {
|
|
3
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
4
|
+
font-size: 14px;
|
|
5
|
+
line-height: 1.5;
|
|
6
|
+
color: ${s.text};
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.pp-toggle {
|
|
10
|
+
position: fixed;
|
|
11
|
+
width: 56px;
|
|
12
|
+
height: 56px;
|
|
13
|
+
border-radius: 50%;
|
|
14
|
+
background: ${t};
|
|
15
|
+
color: white;
|
|
16
|
+
border: none;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
22
|
+
transition: transform 0.2s, box-shadow 0.2s;
|
|
23
|
+
z-index: 9999;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.pp-toggle:hover {
|
|
27
|
+
transform: scale(1.05);
|
|
28
|
+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.pp-toggle svg {
|
|
32
|
+
width: 24px;
|
|
33
|
+
height: 24px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.pp-toggle.pp-bottom-right {
|
|
37
|
+
bottom: 20px;
|
|
38
|
+
right: 20px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.pp-toggle.pp-bottom-left {
|
|
42
|
+
bottom: 20px;
|
|
43
|
+
left: 20px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.pp-online-dot {
|
|
47
|
+
position: absolute;
|
|
48
|
+
top: 4px;
|
|
49
|
+
right: 4px;
|
|
50
|
+
width: 12px;
|
|
51
|
+
height: 12px;
|
|
52
|
+
background: #22c55e;
|
|
53
|
+
border-radius: 50%;
|
|
54
|
+
border: 2px solid white;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.pp-window {
|
|
58
|
+
position: fixed;
|
|
59
|
+
width: 380px;
|
|
60
|
+
height: 520px;
|
|
61
|
+
max-height: calc(100vh - 100px);
|
|
62
|
+
background: ${s.bg};
|
|
63
|
+
border-radius: 16px;
|
|
64
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
z-index: 9998;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.pp-window.pp-bottom-right {
|
|
72
|
+
bottom: 88px;
|
|
73
|
+
right: 20px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.pp-window.pp-bottom-left {
|
|
77
|
+
bottom: 88px;
|
|
78
|
+
left: 20px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@media (max-width: 480px) {
|
|
82
|
+
.pp-window {
|
|
83
|
+
width: calc(100vw - 20px);
|
|
84
|
+
height: calc(100vh - 100px);
|
|
85
|
+
bottom: 80px;
|
|
86
|
+
right: 10px;
|
|
87
|
+
left: 10px;
|
|
88
|
+
border-radius: 12px;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.pp-header {
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
justify-content: space-between;
|
|
96
|
+
padding: 16px;
|
|
97
|
+
background: ${t};
|
|
98
|
+
color: white;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.pp-header-info {
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
gap: 12px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.pp-avatar {
|
|
108
|
+
width: 40px;
|
|
109
|
+
height: 40px;
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
object-fit: cover;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.pp-header-title {
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
font-size: 16px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.pp-header-status {
|
|
120
|
+
font-size: 12px;
|
|
121
|
+
opacity: 0.9;
|
|
122
|
+
display: flex;
|
|
123
|
+
align-items: center;
|
|
124
|
+
gap: 4px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.pp-status-dot {
|
|
128
|
+
width: 8px;
|
|
129
|
+
height: 8px;
|
|
130
|
+
border-radius: 50%;
|
|
131
|
+
background: rgba(255, 255, 255, 0.5);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.pp-status-dot.pp-online {
|
|
135
|
+
background: #22c55e;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.pp-close-btn {
|
|
139
|
+
background: transparent;
|
|
140
|
+
border: none;
|
|
141
|
+
color: white;
|
|
142
|
+
cursor: pointer;
|
|
143
|
+
padding: 4px;
|
|
144
|
+
border-radius: 4px;
|
|
145
|
+
opacity: 0.8;
|
|
146
|
+
transition: opacity 0.2s;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.pp-close-btn:hover {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.pp-close-btn svg {
|
|
154
|
+
width: 20px;
|
|
155
|
+
height: 20px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.pp-messages {
|
|
159
|
+
flex: 1;
|
|
160
|
+
overflow-y: auto;
|
|
161
|
+
padding: 16px;
|
|
162
|
+
display: flex;
|
|
163
|
+
flex-direction: column;
|
|
164
|
+
gap: 12px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.pp-welcome {
|
|
168
|
+
text-align: center;
|
|
169
|
+
color: ${s.textSecondary};
|
|
170
|
+
padding: 24px;
|
|
171
|
+
font-size: 13px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.pp-message {
|
|
175
|
+
max-width: 80%;
|
|
176
|
+
padding: 10px 14px;
|
|
177
|
+
border-radius: 16px;
|
|
178
|
+
word-wrap: break-word;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.pp-message-visitor {
|
|
182
|
+
align-self: flex-end;
|
|
183
|
+
background: ${t};
|
|
184
|
+
color: white;
|
|
185
|
+
border-bottom-right-radius: 4px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.pp-message-operator,
|
|
189
|
+
.pp-message-ai {
|
|
190
|
+
align-self: flex-start;
|
|
191
|
+
background: ${s.messageBg};
|
|
192
|
+
color: ${s.text};
|
|
193
|
+
border-bottom-left-radius: 4px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.pp-message-content {
|
|
197
|
+
margin-bottom: 4px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.pp-message-time {
|
|
201
|
+
font-size: 11px;
|
|
202
|
+
opacity: 0.7;
|
|
203
|
+
display: flex;
|
|
204
|
+
align-items: center;
|
|
205
|
+
gap: 4px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.pp-ai-badge {
|
|
209
|
+
background: rgba(0, 0, 0, 0.1);
|
|
210
|
+
padding: 1px 4px;
|
|
211
|
+
border-radius: 4px;
|
|
212
|
+
font-size: 10px;
|
|
213
|
+
font-weight: 600;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.pp-status {
|
|
217
|
+
display: inline-flex;
|
|
218
|
+
align-items: center;
|
|
219
|
+
margin-left: 4px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.pp-status svg {
|
|
223
|
+
width: 14px;
|
|
224
|
+
height: 14px;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.pp-check,
|
|
228
|
+
.pp-check-double {
|
|
229
|
+
stroke: rgba(255, 255, 255, 0.7);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.pp-check-read {
|
|
233
|
+
stroke: #34b7f1;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.pp-status-sending .pp-check {
|
|
237
|
+
opacity: 0.5;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.pp-typing {
|
|
241
|
+
display: flex;
|
|
242
|
+
gap: 4px;
|
|
243
|
+
padding: 14px 18px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.pp-typing span {
|
|
247
|
+
width: 8px;
|
|
248
|
+
height: 8px;
|
|
249
|
+
background: ${s.textSecondary};
|
|
250
|
+
border-radius: 50%;
|
|
251
|
+
animation: pp-bounce 1.4s infinite ease-in-out both;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.pp-typing span:nth-child(1) { animation-delay: -0.32s; }
|
|
255
|
+
.pp-typing span:nth-child(2) { animation-delay: -0.16s; }
|
|
256
|
+
|
|
257
|
+
@keyframes pp-bounce {
|
|
258
|
+
0%, 80%, 100% { transform: scale(0); }
|
|
259
|
+
40% { transform: scale(1); }
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.pp-input-form {
|
|
263
|
+
display: flex;
|
|
264
|
+
padding: 12px;
|
|
265
|
+
gap: 8px;
|
|
266
|
+
border-top: 1px solid ${s.border};
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.pp-input {
|
|
270
|
+
flex: 1;
|
|
271
|
+
padding: 10px 14px;
|
|
272
|
+
border: 1px solid ${s.border};
|
|
273
|
+
border-radius: 20px;
|
|
274
|
+
background: ${s.bg};
|
|
275
|
+
color: ${s.text};
|
|
276
|
+
font-size: 14px;
|
|
277
|
+
outline: none;
|
|
278
|
+
transition: border-color 0.2s;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.pp-input:focus {
|
|
282
|
+
border-color: ${t};
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.pp-input::placeholder {
|
|
286
|
+
color: ${s.textSecondary};
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.pp-send-btn {
|
|
290
|
+
width: 40px;
|
|
291
|
+
height: 40px;
|
|
292
|
+
border-radius: 50%;
|
|
293
|
+
background: ${t};
|
|
294
|
+
color: white;
|
|
295
|
+
border: none;
|
|
296
|
+
cursor: pointer;
|
|
297
|
+
display: flex;
|
|
298
|
+
align-items: center;
|
|
299
|
+
justify-content: center;
|
|
300
|
+
transition: opacity 0.2s;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.pp-send-btn:disabled {
|
|
304
|
+
opacity: 0.5;
|
|
305
|
+
cursor: not-allowed;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.pp-send-btn svg {
|
|
309
|
+
width: 18px;
|
|
310
|
+
height: 18px;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.pp-footer {
|
|
314
|
+
text-align: center;
|
|
315
|
+
padding: 8px;
|
|
316
|
+
font-size: 11px;
|
|
317
|
+
color: ${s.textSecondary};
|
|
318
|
+
border-top: 1px solid ${s.border};
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.pp-footer a {
|
|
322
|
+
color: ${t};
|
|
323
|
+
text-decoration: none;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.pp-footer a:hover {
|
|
327
|
+
text-decoration: underline;
|
|
328
|
+
}
|
|
329
|
+
`}var yt=0;function d(t,e,n,s,o,i){e||(e={});var a,c,p=e;if("ref"in p)for(c in p={},e)c=="ref"?a=e[c]:p[c]=e[c];var l={type:t,props:p,key:n,ref:a,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--yt,__i:-1,__u:0,__source:o,__self:i};if(typeof t=="function"&&(a=t.defaultProps))for(c in a)p[c]===void 0&&(p[c]=a[c]);return g.vnode&&g.vnode(l),l}function ze({client:t,config:e}){let[n,s]=V(!1),[o,i]=V([]),[a,c]=V(""),[p,l]=V(!1),[f,r]=V(!1),[u,_]=V(!1),x=_e(null),S=_e(null);N(()=>{let m=t.on("openChange",s),P=t.on("message",()=>{i([...t.getMessages()])}),C=t.on("typing",$=>{l($.isTyping)}),D=t.on("presence",$=>{r($.online)}),I=t.on("connect",()=>{_(!0),i(t.getMessages()),r(t.getSession()?.operatorOnline??!1)});return t.isConnected()&&(_(!0),i(t.getMessages()),r(t.getSession()?.operatorOnline??!1)),()=>{m(),P(),C(),D(),I()}},[t]),N(()=>{x.current?.scrollIntoView({behavior:"smooth"})},[o]),N(()=>{n&&S.current?.focus()},[n]);let b=Ue(()=>{if(!n||!u)return;let m=o.filter(P=>P.sender!=="visitor"&&P.status!=="read");if(m.length>0){let P=m.map(C=>C.id);t.sendReadStatus(P,"read")}},[n,u,o,t]);if(N(()=>{if(!n||!u)return;let m=setTimeout(()=>{b()},1e3);return()=>clearTimeout(m)},[n,u,o,b]),N(()=>{let m=()=>{document.visibilityState==="visible"&&n&&b()};return document.addEventListener("visibilitychange",m),()=>document.removeEventListener("visibilitychange",m)},[n,b]),N(()=>{let m=t.on("read",()=>{i([...t.getMessages()])});return()=>m()},[t]),!bt(e))return null;let h=async m=>{if(m.preventDefault(),!a.trim())return;let P=a;c("");try{await t.sendMessage(P)}catch(C){console.error("[PocketPing] Failed to send message:",C)}},M=m=>{let P=m.target;c(P.value),t.sendTyping(!0)},T=e.position??"bottom-right",H=xt(e.theme??"auto"),R=e.primaryColor??"#6366f1";return d(E,{children:[d("style",{children:Fe(R,H)}),d("button",{class:`pp-toggle pp-${T}`,onClick:()=>t.toggleOpen(),"aria-label":n?"Close chat":"Open chat",children:[n?d(je,{}):d(wt,{}),!n&&f&&d("span",{class:"pp-online-dot"})]}),n&&d("div",{class:`pp-window pp-${T} pp-theme-${H}`,children:[d("div",{class:"pp-header",children:[d("div",{class:"pp-header-info",children:[e.operatorAvatar&&d("img",{src:e.operatorAvatar,alt:"",class:"pp-avatar"}),d("div",{children:[d("div",{class:"pp-header-title",children:e.operatorName??"Support"}),d("div",{class:"pp-header-status",children:f?d(E,{children:[d("span",{class:"pp-status-dot pp-online"})," Online"]}):d(E,{children:[d("span",{class:"pp-status-dot"})," Away"]})})]})]}),d("button",{class:"pp-close-btn",onClick:()=>t.setOpen(!1),"aria-label":"Close chat",children:d(je,{})})]}),d("div",{class:"pp-messages",children:[e.welcomeMessage&&o.length===0&&d("div",{class:"pp-welcome",children:e.welcomeMessage}),o.map(m=>d("div",{class:`pp-message pp-message-${m.sender}`,children:[d("div",{class:"pp-message-content",children:m.content}),d("div",{class:"pp-message-time",children:[kt(m.timestamp),m.sender==="ai"&&d("span",{class:"pp-ai-badge",children:"AI"}),m.sender==="visitor"&&d("span",{class:`pp-status pp-status-${m.status??"sent"}`,children:d(St,{status:m.status})})]})]},m.id)),p&&d("div",{class:"pp-message pp-message-operator pp-typing",children:[d("span",{}),d("span",{}),d("span",{})]}),d("div",{ref:x})]}),d("form",{class:"pp-input-form",onSubmit:h,children:[d("input",{ref:S,type:"text",class:"pp-input",placeholder:e.placeholder??"Type a message...",value:a,onInput:M,disabled:!u}),d("button",{type:"submit",class:"pp-send-btn",disabled:!a.trim()||!u,"aria-label":"Send message",children:d(Pt,{})})]}),d("div",{class:"pp-footer",children:["Powered by ",d("a",{href:"https://github.com/pocketping/pocketping",target:"_blank",rel:"noopener",children:"PocketPing"})]})]})]})}function bt(t){let e=window.location.pathname;return t.hideOnPages?.some(n=>new RegExp(n).test(e))?!1:t.showOnPages?.length?t.showOnPages.some(n=>new RegExp(n).test(e)):!0}function xt(t){return t==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":t}function kt(t){return new Date(t).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}function wt(){return d("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2",children:d("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})})}function je(){return d("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2",children:[d("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),d("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}function Pt(){return d("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2",children:[d("line",{x1:"22",y1:"2",x2:"11",y2:"13"}),d("polygon",{points:"22 2 15 22 11 13 2 9 22 2"})]})}function St({status:t}){return!t||t==="sending"||t==="sent"?d("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor","stroke-width":"2",class:"pp-check",children:d("polyline",{points:"3 8 7 12 13 4"})}):t==="delivered"?d("svg",{viewBox:"0 0 20 16",fill:"none",stroke:"currentColor","stroke-width":"2",class:"pp-check-double",children:[d("polyline",{points:"1 8 5 12 11 4"}),d("polyline",{points:"7 8 11 12 17 4"})]}):t==="read"?d("svg",{viewBox:"0 0 20 16",fill:"none",stroke:"currentColor","stroke-width":"2",class:"pp-check-double pp-check-read",children:[d("polyline",{points:"1 8 5 12 11 4"}),d("polyline",{points:"7 8 11 12 17 4"})]}):null}var K="0.3.1";var Q=class{constructor(e){this.session=null;this.ws=null;this.isOpen=!1;this.listeners=new Map;this.customEventHandlers=new Map;this.reconnectAttempts=0;this.maxReconnectAttempts=5;this.reconnectTimeout=null;this.config=e}async connect(){let e=this.getOrCreateVisitorId(),n=this.getStoredSessionId(),s=this.getStoredIdentity(),o=await this.fetch("/connect",{method:"POST",body:JSON.stringify({visitorId:e,sessionId:n,metadata:{url:window.location.href,referrer:document.referrer||void 0,pageTitle:document.title||void 0,userAgent:navigator.userAgent,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone,language:navigator.language,screenResolution:`${window.screen.width}x${window.screen.height}`},identity:s||void 0})});return this.session={sessionId:o.sessionId,visitorId:o.visitorId,operatorOnline:o.operatorOnline??!1,messages:o.messages??[],identity:o.identity||s||void 0},this.storeSessionId(o.sessionId),this.connectWebSocket(),this.emit("connect",this.session),this.config.onConnect?.(o.sessionId),this.session}disconnect(){this.ws?.close(),this.ws=null,this.session=null,this.reconnectTimeout&&clearTimeout(this.reconnectTimeout)}async sendMessage(e){if(!this.session)throw new Error("Not connected");let n=`temp-${this.generateId()}`,s={id:n,sessionId:this.session.sessionId,content:e,sender:"visitor",timestamp:new Date().toISOString(),status:"sending"};this.session.messages.push(s),this.emit("message",s);try{let o=await this.fetch("/message",{method:"POST",body:JSON.stringify({sessionId:this.session.sessionId,content:e,sender:"visitor"})}),i=this.session.messages.findIndex(c=>c.id===n);i>=0&&(this.session.messages[i].id=o.messageId,this.session.messages[i].timestamp=o.timestamp,this.session.messages[i].status="sent",this.emit("message",this.session.messages[i]));let a=this.session.messages[i]||{id:o.messageId,sessionId:this.session.sessionId,content:e,sender:"visitor",timestamp:o.timestamp,status:"sent"};return this.config.onMessage?.(a),a}catch(o){let i=this.session.messages.findIndex(a=>a.id===n);throw i>=0&&(this.session.messages.splice(i,1),this.emit("message",s)),o}}async fetchMessages(e){if(!this.session)throw new Error("Not connected");let n=new URLSearchParams({sessionId:this.session.sessionId});return e&&n.set("after",e),(await this.fetch(`/messages?${n}`,{method:"GET"})).messages}async sendTyping(e=!0){this.session&&await this.fetch("/typing",{method:"POST",body:JSON.stringify({sessionId:this.session.sessionId,sender:"visitor",isTyping:e})})}async sendReadStatus(e,n){if(!(!this.session||e.length===0))try{await this.fetch("/read",{method:"POST",body:JSON.stringify({sessionId:this.session.sessionId,messageIds:e,status:n})});for(let s of this.session.messages)e.includes(s.id)&&(s.status=n,n==="delivered"?s.deliveredAt=new Date().toISOString():n==="read"&&(s.readAt=new Date().toISOString()));this.emit("readStatusSent",{messageIds:e,status:n})}catch(s){console.error("[PocketPing] Failed to send read status:",s)}}async getPresence(){return this.fetch("/presence",{method:"GET"})}async identify(e){if(!e?.id)throw new Error("[PocketPing] identity.id is required");if(this.storeIdentity(e),this.session)try{await this.fetch("/identify",{method:"POST",body:JSON.stringify({sessionId:this.session.sessionId,identity:e})}),this.session.identity=e,this.emit("identify",e)}catch(n){throw console.error("[PocketPing] Failed to identify:",n),n}}async reset(e){this.clearIdentity(),this.session&&(this.session.identity=void 0),e?.newSession&&(localStorage.removeItem("pocketping_session_id"),localStorage.removeItem("pocketping_visitor_id"),this.disconnect(),await this.connect()),this.emit("reset",null)}getIdentity(){return this.session?.identity||this.getStoredIdentity()}getSession(){return this.session}getMessages(){return this.session?.messages??[]}isConnected(){return this.session!==null}isWidgetOpen(){return this.isOpen}setOpen(e){this.isOpen=e,this.emit("openChange",e),e?this.config.onOpen?.():this.config.onClose?.()}toggleOpen(){this.setOpen(!this.isOpen)}on(e,n){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(n),()=>{this.listeners.get(e)?.delete(n)}}emit(e,n){this.listeners.get(e)?.forEach(s=>s(n))}trigger(e,n){if(!this.ws||this.ws.readyState!==WebSocket.OPEN){console.warn("[PocketPing] Cannot trigger event: WebSocket not connected");return}let s={name:e,data:n,timestamp:new Date().toISOString()};this.ws.send(JSON.stringify({type:"event",data:s})),this.emit(`event:${e}`,s)}onEvent(e,n){return this.customEventHandlers.has(e)||this.customEventHandlers.set(e,new Set),this.customEventHandlers.get(e).add(n),()=>{this.customEventHandlers.get(e)?.delete(n)}}offEvent(e,n){this.customEventHandlers.get(e)?.delete(n)}emitCustomEvent(e){let n=this.customEventHandlers.get(e.name);n&&n.forEach(s=>s(e.data,e)),this.emit("event",e),this.emit(`event:${e.name}`,e)}connectWebSocket(){if(!this.session)return;let e=this.config.endpoint.replace(/^http/,"ws").replace(/\/$/,"")+`/stream?sessionId=${this.session.sessionId}`;try{this.ws=new WebSocket(e),this.ws.onopen=()=>{this.reconnectAttempts=0,this.emit("wsConnected",null)},this.ws.onmessage=n=>{try{let s=JSON.parse(n.data);this.handleWebSocketEvent(s)}catch(s){console.error("[PocketPing] Failed to parse WS message:",s)}},this.ws.onclose=()=>{this.emit("wsDisconnected",null),this.scheduleReconnect()},this.ws.onerror=n=>{console.error("[PocketPing] WebSocket error:",n)}}catch{console.warn("[PocketPing] WebSocket unavailable, using polling"),this.startPolling()}}handleWebSocketEvent(e){switch(e.type){case"message":let n=e.data;if(this.session){let c=this.session.messages.findIndex(p=>p.id===n.id);if(c<0&&n.sender==="visitor"&&(c=this.session.messages.findIndex(p=>p.id.startsWith("temp-")&&p.content===n.content&&p.sender==="visitor"),c>=0&&(this.session.messages[c].id=n.id)),c<0&&n.sender!=="visitor"){let p=new Date(n.timestamp).getTime();c=this.session.messages.findIndex(l=>l.sender===n.sender&&l.content===n.content&&Math.abs(new Date(l.timestamp).getTime()-p)<2e3)}if(c>=0){let p=this.session.messages[c];n.status&&n.status!==p.status&&(p.status=n.status,n.deliveredAt&&(p.deliveredAt=n.deliveredAt),n.readAt&&(p.readAt=n.readAt),this.emit("read",{messageIds:[n.id],status:n.status}))}else this.session.messages.push(n),this.emit("message",n),this.config.onMessage?.(n)}n.sender!=="visitor"&&this.emit("typing",{isTyping:!1});break;case"typing":let s=e.data;s.sender!=="visitor"&&this.emit("typing",{isTyping:s.isTyping});break;case"presence":this.session&&(this.session.operatorOnline=e.data.online),this.emit("presence",e.data);break;case"ai_takeover":this.emit("aiTakeover",e.data);break;case"read":let o=e.data;if(this.session)for(let c of this.session.messages)o.messageIds.includes(c.id)&&(c.status=o.status,o.deliveredAt&&(c.deliveredAt=o.deliveredAt),o.readAt&&(c.readAt=o.readAt));this.emit("read",o);break;case"event":let i=e.data;this.emitCustomEvent(i);break;case"version_warning":let a=e.data;this.handleVersionWarning(a);break}}handleVersionWarning(e){let n="[PocketPing]",s=e.upgradeUrl?` Upgrade: ${e.upgradeUrl}`:" Update your widget to the latest version.";switch(e.severity){case"error":console.error(`${n} \u{1F6A8} VERSION ERROR: ${e.message}${s}`),console.error(`${n} Current: ${e.currentVersion}, Required: ${e.minVersion||"unknown"}`);break;case"warning":console.warn(`${n} \u26A0\uFE0F VERSION WARNING: ${e.message}${s}`),console.warn(`${n} Current: ${e.currentVersion}, Latest: ${e.latestVersion||"unknown"}`);break;case"info":console.info(`${n} \u2139\uFE0F ${e.message}`);break}this.emit("versionWarning",e),this.config.onVersionWarning?.(e),e.canContinue||(console.error(`${n} Widget is incompatible with backend. Please update immediately.`),this.disconnect())}scheduleReconnect(){if(this.reconnectAttempts>=this.maxReconnectAttempts){console.warn("[PocketPing] Max reconnect attempts reached, switching to polling"),this.startPolling();return}let e=Math.min(1e3*Math.pow(2,this.reconnectAttempts),3e4);this.reconnectAttempts++,this.reconnectTimeout=setTimeout(()=>{this.connectWebSocket()},e)}startPolling(){let e=async()=>{if(this.session){try{let n=this.session.messages[this.session.messages.length-1]?.id,s=await this.fetchMessages(n);for(let o of s)this.session.messages.find(i=>i.id===o.id)||(this.session.messages.push(o),this.emit("message",o),this.config.onMessage?.(o))}catch(n){console.error("[PocketPing] Polling error:",n)}this.session&&setTimeout(e,3e3)}};e()}async fetch(e,n){let s=this.config.endpoint.replace(/\/$/,"")+e,o=await fetch(s,{...n,headers:{"Content-Type":"application/json","X-PocketPing-Version":K,...n.headers}});if(this.checkVersionHeaders(o),!o.ok){let i=await o.text();throw new Error(`PocketPing API error: ${o.status} ${i}`)}return o.json()}checkVersionHeaders(e){let n=e.headers.get("X-PocketPing-Version-Status"),s=e.headers.get("X-PocketPing-Min-Version"),o=e.headers.get("X-PocketPing-Latest-Version"),i=e.headers.get("X-PocketPing-Version-Message");if(!n||n==="ok")return;let a="info",c=!0;n==="deprecated"?a="warning":n==="unsupported"?(a="error",c=!1):n==="outdated"&&(a="info");let p={severity:a,message:i||`Widget version ${K} is ${n}`,currentVersion:K,minVersion:s||void 0,latestVersion:o||void 0,canContinue:c,upgradeUrl:"https://docs.pocketping.io/widget/installation"};this.handleVersionWarning(p)}getOrCreateVisitorId(){let e="pocketping_visitor_id",n=localStorage.getItem(e);return n||(n=this.generateId(),localStorage.setItem(e,n)),n}getStoredSessionId(){return localStorage.getItem("pocketping_session_id")}storeSessionId(e){localStorage.setItem("pocketping_session_id",e)}getStoredIdentity(){try{let e=localStorage.getItem("pocketping_user_identity");return e?JSON.parse(e):null}catch{return null}}storeIdentity(e){localStorage.setItem("pocketping_user_identity",JSON.stringify(e))}clearIdentity(){localStorage.removeItem("pocketping_user_identity")}generateId(){return`${Date.now().toString(36)}-${Math.random().toString(36).slice(2,11)}`}};var y=null,A=null,It="https://app.pocketping.io/api/widget";function ue(t){if(y)return console.warn("[PocketPing] Already initialized"),y;let e=t.endpoint;if(!e&&t.projectId&&(e=`${It}/${t.projectId}`),!e)throw new Error("[PocketPing] endpoint or projectId is required");let n={...t,endpoint:e};return y=new Q(n),A=document.createElement("div"),A.id="pocketping-container",document.body.appendChild(A),ce(ie(ze,{client:y,config:t}),A),y.connect().catch(s=>{console.error("[PocketPing] Failed to connect:",s)}),y}function Be(){A&&(ce(null,A),A.remove(),A=null),y&&(y.disconnect(),y=null)}function qe(){y?.setOpen(!0)}function Je(){y?.setOpen(!1)}function Xe(){y?.toggleOpen()}function Ge(t){if(!y)throw new Error("[PocketPing] Not initialized");return y.sendMessage(t)}function Ze(t,e){if(!y){console.warn("[PocketPing] Not initialized, cannot trigger event");return}y.trigger(t,e)}function Ke(t,e){return y?y.onEvent(t,e):(console.warn("[PocketPing] Not initialized, cannot subscribe to event"),()=>{})}function Qe(t,e){y?.offEvent(t,e)}async function Ye(t){if(!y)throw new Error("[PocketPing] Not initialized");return y.identify(t)}async function et(t){if(!y){console.warn("[PocketPing] Not initialized");return}return y.reset(t)}function tt(){return y?.getIdentity()||null}function nt(t,e){return y?y.on(t,e):(console.warn("[PocketPing] Not initialized, cannot subscribe to event"),()=>{})}if(typeof document<"u"){let t=document.currentScript;if(t){let e=t.dataset.projectId,n=t.dataset.endpoint;(e||n)&&ue({projectId:e,endpoint:n,theme:t.dataset.theme||"auto",position:t.dataset.position||"bottom-right"})}}var Ct={init:ue,destroy:Be,open:qe,close:Je,toggle:Xe,sendMessage:Ge,trigger:Ze,onEvent:Ke,offEvent:Qe,on:nt,identify:Ye,reset:et,getIdentity:tt};return ct(Et);})();
|