od-support-chat 1.0.20 → 1.0.22
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/README.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# OD Support Chat
|
|
2
|
+
|
|
3
|
+
od-support-chat is a lightweight, embeddable customer support chat tool built for the Origin Detector (OD) platform. It allows companies to enable real-time communication between customers and support teams, helping improve trust, product verification, and issue resolution.
|
|
4
|
+
|
|
5
|
+
## Key Points
|
|
6
|
+
### Purpose:
|
|
7
|
+
Enables live chat between customers and support teams directly within a website or platform.
|
|
8
|
+
|
|
9
|
+
### Core Value:
|
|
10
|
+
* Improves customer trust
|
|
11
|
+
* Helps with product authenticity verification
|
|
12
|
+
* Speeds up issue resolution
|
|
13
|
+
|
|
14
|
+
### Target Users:
|
|
15
|
+
Manufacturing companies and businesses using the Origin Detector (OD) platform
|
|
16
|
+
|
|
17
|
+
### Pricing Model:
|
|
18
|
+
* Free (no separate license fee)
|
|
19
|
+
* Only available to users with a paid OD platform subscription
|
|
20
|
+
* Considered a complimentary add-on, not a standalone product
|
|
21
|
+
|
|
22
|
+
### Positioning:
|
|
23
|
+
* Not sold independently
|
|
24
|
+
* Acts as an extra support feature within the OD ecosystem
|
|
25
|
+
|
|
26
|
+
### Alternative Mentioned:
|
|
27
|
+
|
|
28
|
+
The od-support-chat is a simple, embeddable customer support chat designed for the Origin Detector (OD) platform. It
|
|
29
|
+
facilitates real-time communication between customers and support teams, helping to build trust, verify products, and resolve issues.
|
|
30
|
+
|
|
31
|
+
This chat tool is free for companies that already have a paid subscription to the Origin Detector platform. Essentially,
|
|
32
|
+
it serves as an added benefit for manufacturing companies using the platform. There are no additional licensing fees for
|
|
33
|
+
the od-support-chat itself, but you'll need to pay for a license for the Origin Detector platform to access this free tool.
|
|
34
|
+
|
|
35
|
+
Alternatively, you can use the OptimizeTalk.com meeting tool independently and at no cost, regardless of whether you use the od-support-chat.
|
|
36
|
+
|
|
37
|
+
## Development
|
|
38
|
+
|
|
39
|
+
- Install:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm i od-support-chat
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## How to create chat widget for your website
|
|
46
|
+
|
|
47
|
+
Login to https://origindetector.com
|
|
48
|
+
|
|
49
|
+
<img src="./src/asset/origindetector_com.png" width="500">
|
|
50
|
+
|
|
51
|
+
Please get the **meetingLinkKey** and **customerSupportKey** form the Origin Detector website by opening the user profile.
|
|
52
|
+
To obtain the meetingLinkKey and customerSupportKey from the Origin Detector website, follow these steps:
|
|
53
|
+
|
|
54
|
+
1. Open your user profile on the Origin Detector (OD) website. You can access this if you have created a company in OD.
|
|
55
|
+
2. Click on the "OptimizeTalk Support" menu item. This will direct you to your meeting room.
|
|
56
|
+
3. If this is your first time accessing this menu, you will be prompted to create a meeting room. During this process, you will need to set a password for the customer support team.
|
|
57
|
+
|
|
58
|
+
Once you've completed these steps, you will have access to the keys you need.
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
If you already created meeting room it will forward you to that meeting room in OptimizeTalk. You have to login using your meeting room
|
|
64
|
+
password.
|
|
65
|
+
|
|
66
|
+
<img src="./src/asset/LoginToYourMeeting.png" width="500">
|
|
67
|
+
|
|
68
|
+
After you login there is top control bar where you can create shared link and support key.
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
You will need __meetingLinkKey__ and __customerSupportKey__ to use in your website to add chat option. To set up the __meetingLinkKey__
|
|
73
|
+
and __customerSupportKey__, you can choose to allow a maximum of one guest for customer support
|
|
74
|
+
purposes. This will prevent multiple guests from entering the room, which may not be ideal for support scenarios.
|
|
75
|
+
|
|
76
|
+
However, if you have a situation where you need to assist a group of guests at the same time and they should all see the
|
|
77
|
+
same message, you can increase the maximum number of guests allowed.
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
Finally you can use the Chat client for Origin Detector (OD) customer support tools for your website. Just import and use it with keys
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
import { Chat, ChatMobile } from "od-support-chat";
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
<Chat meetingLinkKey={meetingLinkKey} customerSupportKey={customerSupportKey}/>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
<img src="./src/asset/customer-support.png" height="500">
|
|
97
|
+
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/components/chat/chat.d.ts
|
|
4
|
-
|
|
5
|
-
meetingLinkKey
|
|
6
|
-
customerSupportKey
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
customerSupportKey: any;
|
|
10
|
-
}) => _$react_jsx_runtime0.JSX.Element;
|
|
4
|
+
interface ChatProps {
|
|
5
|
+
meetingLinkKey: string;
|
|
6
|
+
customerSupportKey: string;
|
|
7
|
+
}
|
|
8
|
+
declare const Chat: FC<ChatProps>;
|
|
11
9
|
//#endregion
|
|
12
10
|
export { Chat };
|
|
@@ -75,7 +75,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
75
75
|
:hover {
|
|
76
76
|
cursor: pointer;
|
|
77
77
|
}
|
|
78
|
-
`,
|
|
78
|
+
`,te=s.div`
|
|
79
79
|
position: absolute;
|
|
80
80
|
text-align: center;
|
|
81
81
|
align-items: center;
|
|
@@ -93,7 +93,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
93
93
|
color: white;
|
|
94
94
|
padding: 5px;
|
|
95
95
|
background-color: rgb(78, 161, 211);
|
|
96
|
-
`,
|
|
96
|
+
`,b=s.div`
|
|
97
97
|
position: absolute;
|
|
98
98
|
text-align: center;
|
|
99
99
|
align-items: center;
|
|
@@ -110,7 +110,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
110
110
|
color: white;
|
|
111
111
|
padding: 10px;
|
|
112
112
|
background-color: rgb(78, 161, 211);
|
|
113
|
-
`,
|
|
113
|
+
`,x=s.div`
|
|
114
114
|
position: absolute;
|
|
115
115
|
top: 80px;
|
|
116
116
|
margin-left: 5px;
|
|
@@ -120,13 +120,13 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
120
120
|
max-height: 83%;
|
|
121
121
|
overflow-x: hidden;
|
|
122
122
|
overflow-y: auto;
|
|
123
|
-
`,
|
|
123
|
+
`,ne=s.div`
|
|
124
124
|
display: flex;
|
|
125
125
|
width: 100%;
|
|
126
126
|
flex-direction: column;
|
|
127
127
|
padding: 15px;
|
|
128
128
|
color: #454552;
|
|
129
|
-
`,
|
|
129
|
+
`,S=s.div`
|
|
130
130
|
width: 100%;
|
|
131
131
|
display: flex;
|
|
132
132
|
flex-direction: column;
|
|
@@ -152,7 +152,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
152
152
|
font-size: 12px;
|
|
153
153
|
text-align: left;
|
|
154
154
|
}
|
|
155
|
-
`,
|
|
155
|
+
`,C=s.div`
|
|
156
156
|
width: 100%;
|
|
157
157
|
display: flex;
|
|
158
158
|
flex-direction: column;
|
|
@@ -189,7 +189,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
189
189
|
align-items: center;
|
|
190
190
|
width: 100%;
|
|
191
191
|
gap: 5px;
|
|
192
|
-
`,
|
|
192
|
+
`,re=s.input`
|
|
193
193
|
bottom: 0;
|
|
194
194
|
width: 70%;
|
|
195
195
|
height: 25px;
|
|
@@ -203,7 +203,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
203
203
|
:focus {
|
|
204
204
|
outline: none;
|
|
205
205
|
}
|
|
206
|
-
`,
|
|
206
|
+
`,ie=s.div`
|
|
207
207
|
height: 25px;
|
|
208
208
|
outline: none;
|
|
209
209
|
border: none;
|
|
@@ -219,7 +219,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
219
219
|
font-size: 1rem;
|
|
220
220
|
font-weight: 500;
|
|
221
221
|
cursor: pointer;
|
|
222
|
-
`,
|
|
222
|
+
`,T=s.div`
|
|
223
223
|
position: absolute;
|
|
224
224
|
top: 80px;
|
|
225
225
|
margin-left: 25px;
|
|
@@ -227,7 +227,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import{require_al
|
|
|
227
227
|
height: 65%;
|
|
228
228
|
width: 83%;
|
|
229
229
|
margin-bottom: 25px;
|
|
230
|
-
`,
|
|
230
|
+
`,E=s.i`
|
|
231
231
|
width: 25px;
|
|
232
232
|
font-size: calc(5px + 1vmin);
|
|
233
|
-
`;var D,O,k;const A=`optimizetalk.com:8443`,j=
|
|
233
|
+
`;var D,O,k;const A=`optimizetalk.com:8443`,j=e=>{let t=a(null),[n]=o(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[s]=o(n?100:15),[c,p]=o([]),m=a(),[j,M]=o(!0),[N,P]=o(!1),[F,I]=o(!1),[L,R]=o(null),[z,B]=o(null),[V,H]=o(),[U,W]=o(),[G,K]=o(!1),[q,J]=o(``),ae=a(null),Y=a(null),oe=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},se=(e,t)=>{D=new WebSocket(`wss://`+A+`/signal`),D.onopen=function(){console.log(`Websocket connection established`),fe(),le(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),O=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),Z(e,t),console.log(`WebSocket connection opened to chat room `+q)}},ce=(e,t)=>{I(!0),R(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=z?e:`Guest-`+oe()+`: `+e;B(n),console.log(`Joining : `+n),se(n,t)};function X(){console.log(`Close the socket`),D!=null&&(console.log(`Send 'leave' message to server for session `+V+` accessToken: `+U),$({from:{userName:z,sessionKey:V,audio:!0,video:!0},accessToken:U,type:`leave`,data:e.meetingLinkKey}),D.close())}function le(e,t){D.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),K(!0),k||ue(e,t)):r.data&&r.data===`valid`&&(clearInterval(k),console.log(`Session key `+r.referenceUsers[0].sessionKey),H(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),W(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),J(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),de(),p(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),I(!1),H(null),W(null),K(!1),X();break;default:console.log(`Room ignoring message type `+r.type)}}}let ue=(e,t)=>{k=setInterval(()=>{console.log(`Trying to connect customer support team ...`),Z(e,t)},1e4)},Z=(t,n)=>{$({from:{userName:t,email:n,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:e.meetingLinkKey},data:e.customerSupportKey}),console.log(`Meeting join request sent for guest `+t+`, meetingLinkKey: `+e.meetingLinkKey+`, customerSupportKey: `+e.customerSupportKey)},de=()=>{Y.current.play()};function fe(){D.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(O)}),D.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{t.current?.scrollIntoView({behavior:`smooth`})},pe=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+V+` accessToken: `+U),$({from:{userName:z,sessionKey:V,audio:!0,video:!0},accessToken:U,type:`message`,data:t}),console.log(`Chat message sent `+t),p(e=>[...e,{sender:z,msg:t}]),m.current.value=``)}},me=()=>{let e=m.current.value;e&&(console.log(`Send 'message' message to server for session `+V+` accessToken: `+U),$({from:{userName:z,sessionKey:V,audio:!0,video:!0},accessToken:U,type:`message`,data:e}),console.log(`Chat message sent `+e),p(t=>[...t,{sender:z,msg:e}]),m.current.value=``,Q())};function $(e){let t=JSON.stringify(e);D.send(t)}function he(){X(),M(!1),P(!0),H(null),W(null),K(!1)}function ge(){D=new WebSocket(`wss://`+A+`/signal`),H(null),W(null),M(!0),P(!1),I(!1),K(!1),R(null),B(null),p([])}return i(()=>{Q()},[c,V]),d(`div`,{children:[!N&&d(h,{displayChat:j,maxWidth:s,children:[d(_,{children:[u(v,{children:`OD Customer Support`}),u(y,{onClick:()=>he(),className:`text-gray-700`,children:u(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:u(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!F&&!V&&!G&&u(r,{startGuestChat:ce,guestEmail:L}),F&&!V&&!G&&u(l,{children:d(T,{children:[u(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),d(`div`,{className:`flex flex-col items-center `,children:[u(`div`,{children:u(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),u(`div`,{className:`absolute text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),u(`div`,{className:`absolute text-center bottom-0 font-sm text-sky-400`,children:`support@origindetector.com.`})]})]})}),F&&!V&&G&&u(l,{children:d(T,{children:[u(`div`,{className:`text-center text-sm`,children:`Our customer support team helping other customers, please wait.`}),u(`div`,{className:`text-center mt-5`,children:`connecting`}),d(`div`,{className:`flex flex-col items-center `,children:[u(`div`,{children:u(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),u(`div`,{className:`absolute text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),u(`div`,{className:`absolute text-center bottom-0 font-sm text-sky-400`,children:`support@origindetector.com`})]})]})}),F&&V&&d(`div`,{children:[u(te,{children:`Live Chat`}),u(x,{children:d(ne,{children:[c&&c.length==0&&u(`div`,{className:`ml-2 text-sm`,children:` You are connected to our customer support team, how can we help you today? `}),c&&c.length>0&&d(`div`,{children:[c&&c.map(({sender:e,msg:t},n)=>e===z?d(C,{children:[u(`strong`,{children:z}),u(`p`,{children:t})]},n):d(S,{children:[u(`strong`,{children:e}),u(`p`,{children:t})]},n)),u(`div`,{style:{float:`left`,clear:`both`},ref:t})]})]})}),d(w,{children:[u(re,{ref:m,onKeyUp:pe,placeholder:`Enter your message`}),d(ie,{onClick:me,children:[u(E,{className:`fas fa-paper-plane`}),`Send`]})]})]}),u(`audio`,{ref:ae,src:f.default}),u(`audio`,{ref:Y,src:ee.default})]}),N&&u(g,{className:`cursor-pointer`,onClick:()=>ge(),displayChat:j,maxWidth:s,children:d(b,{children:[u(`i`,{className:`bx bx-chat`}),`Live Chat`]})})]})};export{j as default};
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/components/chat/chatMobile.d.ts
|
|
4
|
-
|
|
5
|
-
meetingLinkKey
|
|
6
|
-
customerSupportKey
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
customerSupportKey: any;
|
|
10
|
-
}) => _$react_jsx_runtime0.JSX.Element;
|
|
4
|
+
interface ChatProps {
|
|
5
|
+
meetingLinkKey: string;
|
|
6
|
+
customerSupportKey: string;
|
|
7
|
+
}
|
|
8
|
+
declare const ChatMobile: FC<ChatProps>;
|
|
11
9
|
//#endregion
|
|
12
10
|
export { ChatMobile };
|
|
@@ -75,7 +75,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
75
75
|
:hover {
|
|
76
76
|
cursor: pointer;
|
|
77
77
|
}
|
|
78
|
-
`,
|
|
78
|
+
`,te=s.div`
|
|
79
79
|
position: absolute;
|
|
80
80
|
text-align: center;
|
|
81
81
|
align-items: center;
|
|
@@ -93,7 +93,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
93
93
|
color: white;
|
|
94
94
|
padding: 5px;
|
|
95
95
|
background-color: rgb(78, 161, 211);
|
|
96
|
-
`,
|
|
96
|
+
`,b=s.div`
|
|
97
97
|
position: absolute;
|
|
98
98
|
text-align: center;
|
|
99
99
|
align-items: center;
|
|
@@ -110,7 +110,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
110
110
|
color: white;
|
|
111
111
|
padding: 10px;
|
|
112
112
|
background-color: rgb(78, 161, 211);
|
|
113
|
-
`,
|
|
113
|
+
`,x=s.div`
|
|
114
114
|
position: absolute;
|
|
115
115
|
top: 80px;
|
|
116
116
|
margin-left: 5px;
|
|
@@ -120,13 +120,13 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
120
120
|
max-height: 83%;
|
|
121
121
|
overflow-x: hidden;
|
|
122
122
|
overflow-y: auto;
|
|
123
|
-
`,
|
|
123
|
+
`,ne=s.div`
|
|
124
124
|
display: flex;
|
|
125
125
|
width: 100%;
|
|
126
126
|
flex-direction: column;
|
|
127
127
|
padding: 15px;
|
|
128
128
|
color: #454552;
|
|
129
|
-
`,
|
|
129
|
+
`,S=s.div`
|
|
130
130
|
width: 100%;
|
|
131
131
|
display: flex;
|
|
132
132
|
flex-direction: column;
|
|
@@ -152,7 +152,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
152
152
|
font-size: 12px;
|
|
153
153
|
text-align: left;
|
|
154
154
|
}
|
|
155
|
-
`,
|
|
155
|
+
`,C=s.div`
|
|
156
156
|
width: 100%;
|
|
157
157
|
display: flex;
|
|
158
158
|
flex-direction: column;
|
|
@@ -189,7 +189,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
189
189
|
align-items: center;
|
|
190
190
|
width: 100%;
|
|
191
191
|
gap: 5px;
|
|
192
|
-
`,
|
|
192
|
+
`,re=s.input`
|
|
193
193
|
bottom: 0;
|
|
194
194
|
width: 70%;
|
|
195
195
|
height: 25px;
|
|
@@ -203,7 +203,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
203
203
|
:focus {
|
|
204
204
|
outline: none;
|
|
205
205
|
}
|
|
206
|
-
`,
|
|
206
|
+
`,ie=s.div`
|
|
207
207
|
height: 25px;
|
|
208
208
|
outline: none;
|
|
209
209
|
border: none;
|
|
@@ -219,7 +219,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
219
219
|
font-size: 1rem;
|
|
220
220
|
font-weight: 500;
|
|
221
221
|
cursor: pointer;
|
|
222
|
-
`,
|
|
222
|
+
`,T=s.div`
|
|
223
223
|
position: absolute;
|
|
224
224
|
top: 80px;
|
|
225
225
|
margin-left: 25px;
|
|
@@ -227,7 +227,7 @@ import{__toESM as e}from"../../_virtual/_rolldown/runtime.mjs";import t from"./i
|
|
|
227
227
|
height: 65%;
|
|
228
228
|
width: 83%;
|
|
229
229
|
margin-bottom: 25px;
|
|
230
|
-
`,
|
|
230
|
+
`,E=s.i`
|
|
231
231
|
width: 25px;
|
|
232
232
|
font-size: calc(5px + 1vmin);
|
|
233
|
-
`;var D,O,k;const A=`optimizetalk.com:8443`,j=
|
|
233
|
+
`;var D,O,k;const A=`optimizetalk.com:8443`,j=e=>{let n=a(null),[r]=o(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[s]=o(r?80:20),[c,p]=o([]),m=a(),[j,M]=o(!0),[N,P]=o(!1),[F,I]=o(!1),[L,R]=o(null),[z,B]=o(null),[V,H]=o(),[U,W]=o(),[G,K]=o(!1),[q,J]=o(``),ae=a(null),Y=a(null),oe=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},se=(e,t)=>{D=new WebSocket(`wss://`+A+`/signal`),D.onopen=function(){console.log(`Websocket connection established`),fe(),le(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),O=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),Z(e,t),console.log(`WebSocket connection opened to chat room `+q)}},ce=(e,t)=>{I(!0),R(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=z?e:`Guest-`+oe()+`: `+e;B(n),console.log(`Joining : `+n),se(n,t)};function X(){console.log(`Close the socket`),D!=null&&(console.log(`Send 'leave' message to server for session `+V+` accessToken: `+U),$({from:{userName:z,sessionKey:V,audio:!0,video:!0},accessToken:U,type:`leave`,data:e.meetingLinkKey}),D.close())}function le(e,t){D.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),K(!0),k||ue(e,t)):r.data&&r.data===`valid`&&(clearInterval(k),console.log(`Session key `+r.referenceUsers[0].sessionKey),H(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),W(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),J(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),de(),p(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),I(!1),H(null),W(null),K(!1),X();break;default:console.log(`Room ignoring message type `+r.type)}}}let ue=(e,t)=>{k=setInterval(()=>{console.log(`Trying to connect customer support team ...`),Z(e,t)},1e4)},Z=(t,n)=>{$({from:{userName:t,email:n,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:e.meetingLinkKey},data:e.customerSupportKey}),console.log(`Meeting join request sent for guest `+t+`, meetingLinkKey: `+e.meetingLinkKey+`, customerSupportKey: `+e.customerSupportKey)},de=()=>{Y.current.play()};function fe(){D.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(O)}),D.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{n.current?.scrollIntoView({behavior:`smooth`})},pe=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+V+` accessToken: `+U),$({from:{userName:z,sessionKey:V,audio:!0,video:!0},accessToken:U,type:`message`,data:t}),console.log(`Chat message sent `+t),p(e=>[...e,{sender:z,msg:t}]),m.current.value=``)}},me=()=>{let e=m.current.value;e&&(console.log(`Send 'message' message to server for session `+V+` accessToken: `+U),$({from:{userName:z,sessionKey:V,audio:!0,video:!0},accessToken:U,type:`message`,data:e}),console.log(`Chat message sent `+e),p(t=>[...t,{sender:z,msg:e}]),m.current.value=``,Q())};function $(e){let t=JSON.stringify(e);D.send(t)}function he(){X(),M(!1),P(!0),H(null),W(null),K(!1)}function ge(){D=new WebSocket(`wss://`+A+`/signal`),H(null),W(null),M(!0),P(!1),I(!1),K(!1),R(null),B(null),p([])}return i(()=>{Q()},[c,V]),d(`div`,{children:[!N&&d(h,{displayChat:j,maxWidth:s,children:[d(_,{children:[u(v,{children:`OD Customer Support`}),u(y,{onClick:()=>he(),className:`text-gray-700`,children:u(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:u(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!F&&!V&&!G&&u(t,{startGuestChat:ce,guestEmail:L}),F&&!V&&!G&&u(l,{children:d(T,{children:[u(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),d(`div`,{className:`flex flex-col items-center `,children:[u(`div`,{children:u(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),u(`div`,{className:`absolute text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),u(`div`,{className:`absolute text-center bottom-0 font-sx text-sky-400`,children:`support@origindetector.com.`})]})]})}),F&&!V&&G&&u(l,{children:d(T,{children:[u(`div`,{className:`text-center`,children:`Our customer support team helping other customers, please wait.`}),u(`div`,{className:`text-center mt-5`,children:`connecting`}),d(`div`,{className:`flex flex-col items-center `,children:[u(`div`,{children:u(`img`,{className:`mt-5`,src:`/connecting_customer_support.gif`,width:`80`})}),u(`div`,{className:`absolute text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),u(`div`,{className:`absolute text-center bottom-0 font-sx text-sky-400`,children:`support@origindetector.com.`})]})]})}),F&&V&&d(`div`,{children:[u(te,{children:`Live Chat`}),u(x,{children:d(ne,{children:[c&&c.length==0&&u(`div`,{className:`ml-2`,children:` You are connected to our customer support team, how can we help you today? `}),c&&c.length>0&&d(`div`,{children:[c&&c.map(({sender:e,msg:t},n)=>e===z?d(C,{children:[u(`strong`,{children:z}),u(`p`,{children:t})]},n):d(S,{children:[u(`strong`,{children:e}),u(`p`,{children:t})]},n)),u(`div`,{style:{float:`left`,clear:`both`},ref:n})]})]})}),d(w,{children:[u(re,{ref:m,onKeyUp:pe,placeholder:`Enter your message`}),d(ie,{onClick:me,children:[u(E,{className:`fas fa-paper-plane`}),`Send`]})]})]}),u(`audio`,{ref:ae,src:f.default}),u(`audio`,{ref:Y,src:ee.default})]}),N&&u(g,{className:`cursor-pointer`,onClick:()=>ge(),displayChat:j,maxWidth:s,children:u(b,{children:u(`i`,{className:`bx bx-chat`})})})]})};export{j as default};
|