od-support-chat 1.0.0 → 1.0.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.
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1,233 @@
1
+ import"./info.guest.js";import"react";import e,{keyframes as t}from"styled-components";const n=t`
2
+ from {
3
+ opacity: 0;
4
+ transform: translateY(20px);
5
+ }
6
+ to {
7
+ opacity: 1;
8
+ transform: translateY(0);
9
+ }
10
+ `,r=t`
11
+ from {
12
+ opacity: 1;
13
+ transform: translateY(0);
14
+ }
15
+ to {
16
+ opacity: 0;
17
+ transform: translateY(20px);
18
+ }
19
+ `;e.div`
20
+ position: fixed;
21
+ right: 0;
22
+ top: 50%;
23
+ height: 35%;
24
+ width: ${e=>e.maxWidth}%;
25
+ display: flex;
26
+ flex-direction: column;
27
+ background-color: white;
28
+ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
29
+ transition: all 0.5s ease;
30
+ overflow: hidden;
31
+ z-index: 10000;
32
+ animation: ${({displayChat:e})=>e?n:r} 0.3s ease-in-out forwards;
33
+ `,e.div`
34
+ position: fixed;
35
+ right: 0;
36
+ bottom: 10%;
37
+ height: 15%;
38
+ width: ${e=>e.maxWidth/2.5}%;
39
+ display: flex;
40
+ flex-direction: column;
41
+ transition: all 0.5s ease;
42
+ overflow: hidden;
43
+ z-index: 10000;
44
+ animation: ${({displayChat:e})=>e?r:n} 0.3s ease-in-out forwards;
45
+ `,e.div`
46
+ position: absolute;
47
+ top: 5;
48
+ margin-left: 5px;
49
+ margin-top: 5px;
50
+ height: 30px;
51
+ border: 1px solid rgb(78, 161, 211, 0.3);
52
+ width: 96%;
53
+
54
+ font-weight: 600;
55
+ font-size: 14px;
56
+ color: rgb(78, 161, 211);
57
+ padding: 5px;
58
+ `,e.div`
59
+ display: flex;
60
+ flex-direction: column;
61
+ align-items: flex-start;
62
+ width: 100%;
63
+ font-weight: 600;
64
+ font-size: 12px;
65
+ color: rgb(78, 161, 211);
66
+ `,e.div`
67
+ position: absolute;
68
+ top: 0;
69
+ right: 0;
70
+ padding-top: 5px;
71
+ width: 30px;
72
+ font-size: calc(10px + 1vmin);
73
+ color: white;
74
+
75
+ :hover {
76
+ cursor: pointer;
77
+ }
78
+ `,e.div`
79
+ position: absolute;
80
+ text-align: center;
81
+ align-items: center;
82
+ top: 38px;
83
+ margin-left: 5px;
84
+ margin-top: 5px;
85
+ border: 1px solid rgb(78, 161, 211, 0.3);
86
+ border-radius: 15px;
87
+ width: 96%;
88
+
89
+ margin-left: 5px;
90
+ margin-top: 2px;
91
+ font-weight: 600;
92
+ font-size: 12px;
93
+ color: white;
94
+ padding: 5px;
95
+ background-color: rgb(78, 161, 211);
96
+ `,e.div`
97
+ position: absolute;
98
+ text-align: center;
99
+ align-items: center;
100
+ display: flex;
101
+ gap: 5px;
102
+ border: 1px solid rgb(78, 161, 211, 0.3);
103
+ border-radius: 15px;
104
+ width: 100%;
105
+
106
+ margin-left: 10px;
107
+ margin-top: 2px;
108
+ font-weight: 600;
109
+ font-size: 12px;
110
+ color: white;
111
+ padding: 10px;
112
+ background-color: rgb(78, 161, 211);
113
+ `,e.div`
114
+ position: absolute;
115
+ top: 80px;
116
+ margin-left: 5px;
117
+ margin-top: 5px;
118
+ width: 100%;
119
+ height: 65%;
120
+ max-height: 83%;
121
+ overflow-x: hidden;
122
+ overflow-y: auto;
123
+ `,e.div`
124
+ display: flex;
125
+ width: 100%;
126
+ flex-direction: column;
127
+ padding: 15px;
128
+ color: #454552;
129
+ `,e.div`
130
+ width: 100%;
131
+ display: flex;
132
+ flex-direction: column;
133
+ align-items: flex-start;
134
+ font-size: 12px;
135
+ margin-top: 5px;
136
+ margin-left: 5px;
137
+ text-align: left;
138
+
139
+ > strong {
140
+ margin-left: 3px;
141
+ color: rgb(78, 161, 211)
142
+ }
143
+
144
+ > p {
145
+ max-width: 95%;
146
+ width: auto;
147
+ padding: 5px;
148
+ margin-top: 5px;
149
+ border: 1px solid rgb(78, 161, 211, 0.3);
150
+ border-radius: 15px;
151
+ color: black;
152
+ font-size: 12px;
153
+ text-align: left;
154
+ }
155
+ `,e.div`
156
+ width: 100%;
157
+ display: flex;
158
+ flex-direction: column;
159
+ align-items: flex-start;
160
+ font-size: 12px;
161
+ margin-top: 5px;
162
+ margin-left: 5px;
163
+ text-align: left;
164
+
165
+ > strong {
166
+ margin-right: 35px;
167
+ color: rgb(215, 61, 71)
168
+ }
169
+
170
+ > p {
171
+ max-width: 95%;
172
+ width: auto;
173
+ padding: 5px;
174
+ margin-top: 5px;
175
+ border: 1px solid rgb(78, 161, 211, 0.3);
176
+ border-radius: 15px;
177
+ color: black;
178
+ font-size: 12px;
179
+ text-align: left;
180
+ background-color: #f5f5f5;
181
+ }
182
+ `,e.div`
183
+ position: absolute;
184
+ display: flex;
185
+ bottom: 10px;
186
+ margin-left: 5px;
187
+ margin-top: 5px;
188
+ flex-direction: row;
189
+ align-items: center;
190
+ width: 100%;
191
+ gap: 5px;
192
+ `,e.input`
193
+ bottom: 0;
194
+ width: 70%;
195
+ height: 25px;
196
+ margin-left: 5px;
197
+ border: 2px solid rgb(69, 69, 82, 0.25);
198
+ box-sizing: border-box;
199
+ font-size: 14px;
200
+ padding-left: 5px;
201
+ opacity: 0.7;
202
+
203
+ :focus {
204
+ outline: none;
205
+ }
206
+ `,e.div`
207
+ height: 25px;
208
+ outline: none;
209
+ border: none;
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: flex-end;
213
+ border-radius: 10px;
214
+ padding-left: 5px;
215
+ padding-right: 10px;
216
+ margin-right: 10px;
217
+ color: black;
218
+ background-color: #bed0f8;
219
+ font-size: 1rem;
220
+ font-weight: 500;
221
+ cursor: pointer;
222
+ `,e.div`
223
+ position: absolute;
224
+ top: 80px;
225
+ margin-left: 25px;
226
+ width: 100%;
227
+ height: 65%;
228
+ width: 83%;
229
+ margin-bottom: 25px;
230
+ `,e.i`
231
+ width: 25px;
232
+ font-size: calc(5px + 1vmin);
233
+ `;
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1,233 @@
1
+ import"./info.guestMobile.js";import"react";import e,{keyframes as t}from"styled-components";const n=t`
2
+ from {
3
+ opacity: 0;
4
+ transform: translateY(20px);
5
+ }
6
+ to {
7
+ opacity: 1;
8
+ transform: translateY(0);
9
+ }
10
+ `,r=t`
11
+ from {
12
+ opacity: 1;
13
+ transform: translateY(0);
14
+ }
15
+ to {
16
+ opacity: 0;
17
+ transform: translateY(20px);
18
+ }
19
+ `;e.div`
20
+ position: fixed;
21
+ left: 10%;
22
+ top: 50%;
23
+ height: 45%;
24
+ width: ${e=>e.maxWidth}%;
25
+ display: flex;
26
+ flex-direction: column;
27
+ background-color: white;
28
+ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
29
+ transition: all 0.5s ease;
30
+ overflow: hidden;
31
+ z-index: 10000;
32
+ animation: ${({displayChat:e})=>e?n:r} 0.3s ease-in-out forwards;
33
+ `,e.div`
34
+ position: fixed;
35
+ right: 0;
36
+ bottom: 2%;
37
+ height: 15%;
38
+ width: ${e=>e.maxWidth/7}%;
39
+ display: flex;
40
+ flex-direction: column;
41
+ transition: all 0.5s ease;
42
+ overflow: hidden;
43
+ z-index: 10000;
44
+ animation: ${({displayChat:e})=>e?r:n} 0.3s ease-in-out forwards;
45
+ `,e.div`
46
+ position: absolute;
47
+ top: 5;
48
+ margin-left: 5px;
49
+ margin-top: 5px;
50
+ height: 30px;
51
+ border: 1px solid rgb(78, 161, 211, 0.3);
52
+ width: 96%;
53
+
54
+ font-weight: 600;
55
+ font-size: 14px;
56
+ color: rgb(78, 161, 211);
57
+ padding: 5px;
58
+ `,e.div`
59
+ display: flex;
60
+ flex-direction: column;
61
+ align-items: flex-start;
62
+ width: 100%;
63
+ font-weight: 600;
64
+ font-size: 12px;
65
+ color: rgb(78, 161, 211);
66
+ `,e.div`
67
+ position: absolute;
68
+ top: 0;
69
+ right: 0;
70
+ padding-top: 5px;
71
+ width: 30px;
72
+ font-size: calc(10px + 1vmin);
73
+ color: white;
74
+
75
+ :hover {
76
+ cursor: pointer;
77
+ }
78
+ `,e.div`
79
+ position: absolute;
80
+ text-align: center;
81
+ align-items: center;
82
+ top: 38px;
83
+ margin-left: 5px;
84
+ margin-top: 5px;
85
+ border: 1px solid rgb(78, 161, 211, 0.3);
86
+ border-radius: 15px;
87
+ width: 96%;
88
+
89
+ margin-left: 5px;
90
+ margin-top: 2px;
91
+ font-weight: 600;
92
+ font-size: 14px;
93
+ color: white;
94
+ padding: 5px;
95
+ background-color: rgb(78, 161, 211);
96
+ `,e.div`
97
+ position: absolute;
98
+ text-align: center;
99
+ align-items: center;
100
+ display: flex;
101
+ gap: 5px;
102
+ border: 1px solid rgb(78, 161, 211, 0.3);
103
+ border-radius: 15px;
104
+ width: 100%;
105
+
106
+ margin-left: 10px;
107
+ margin-top: 2px;
108
+ font-weight: 600;
109
+ font-size: 14px;
110
+ color: white;
111
+ padding: 10px;
112
+ background-color: rgb(78, 161, 211);
113
+ `,e.div`
114
+ position: absolute;
115
+ top: 80px;
116
+ margin-left: 5px;
117
+ margin-top: 5px;
118
+ width: 100%;
119
+ height: 65%;
120
+ max-height: 83%;
121
+ overflow-x: hidden;
122
+ overflow-y: auto;
123
+ `,e.div`
124
+ display: flex;
125
+ width: 100%;
126
+ flex-direction: column;
127
+ padding: 15px;
128
+ color: #454552;
129
+ `,e.div`
130
+ width: 100%;
131
+ display: flex;
132
+ flex-direction: column;
133
+ align-items: flex-start;
134
+ font-size: 12px;
135
+ margin-top: 5px;
136
+ margin-left: 5px;
137
+ text-align: left;
138
+
139
+ > strong {
140
+ margin-left: 3px;
141
+ color: rgb(78, 161, 211)
142
+ }
143
+
144
+ > p {
145
+ max-width: 95%;
146
+ width: auto;
147
+ padding: 5px;
148
+ margin-top: 5px;
149
+ border: 1px solid rgb(78, 161, 211, 0.3);
150
+ border-radius: 15px;
151
+ color: black;
152
+ font-size: 12px;
153
+ text-align: left;
154
+ }
155
+ `,e.div`
156
+ width: 100%;
157
+ display: flex;
158
+ flex-direction: column;
159
+ align-items: flex-start;
160
+ font-size: 12px;
161
+ margin-top: 5px;
162
+ margin-left: 5px;
163
+ text-align: left;
164
+
165
+ > strong {
166
+ margin-right: 35px;
167
+ color: rgb(215, 61, 71)
168
+ }
169
+
170
+ > p {
171
+ max-width: 95%;
172
+ width: auto;
173
+ padding: 5px;
174
+ margin-top: 5px;
175
+ border: 1px solid rgb(78, 161, 211, 0.3);
176
+ border-radius: 15px;
177
+ color: black;
178
+ font-size: 12px;
179
+ text-align: left;
180
+ background-color: #f5f5f5;
181
+ }
182
+ `,e.div`
183
+ position: absolute;
184
+ display: flex;
185
+ bottom: 10px;
186
+ margin-left: 5px;
187
+ margin-top: 5px;
188
+ flex-direction: row;
189
+ align-items: center;
190
+ width: 100%;
191
+ gap: 5px;
192
+ `,e.input`
193
+ bottom: 0;
194
+ width: 70%;
195
+ height: 25px;
196
+ margin-left: 5px;
197
+ border: 2px solid rgb(69, 69, 82, 0.25);
198
+ box-sizing: border-box;
199
+ font-size: 14px;
200
+ padding-left: 5px;
201
+ opacity: 0.7;
202
+
203
+ :focus {
204
+ outline: none;
205
+ }
206
+ `,e.div`
207
+ height: 25px;
208
+ outline: none;
209
+ border: none;
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: flex-end;
213
+ border-radius: 10px;
214
+ padding-left: 5px;
215
+ padding-right: 10px;
216
+ margin-right: 10px;
217
+ color: black;
218
+ background-color: #bed0f8;
219
+ font-size: 1rem;
220
+ font-weight: 500;
221
+ cursor: pointer;
222
+ `,e.div`
223
+ position: absolute;
224
+ top: 80px;
225
+ margin-left: 25px;
226
+ width: 100%;
227
+ height: 65%;
228
+ width: 83%;
229
+ margin-bottom: 25px;
230
+ `,e.i`
231
+ width: 25px;
232
+ font-size: calc(5px + 1vmin);
233
+ `;
@@ -0,0 +1,27 @@
1
+ import"react";import e from"styled-components";import"react-hook-form";import"tailwind-merge";import{object as t,string as n}from"zod";import"@hookform/resolvers/zod";e.div`
2
+ position: relative;
3
+ text-align: center;
4
+ align-items: center;
5
+ top: 5px;
6
+ margin-left: 5px;
7
+ margin-top: 2px;
8
+ margin-bottom: 30px;
9
+ border: 1px solid rgb(78, 161, 211, 0.3);
10
+ border-radius: 15px;
11
+ width: 92%;
12
+ font-weight: 600;
13
+ font-size: 14px;
14
+ color: white;
15
+ padding: 5px;
16
+ background-color: rgb(78, 161, 211);
17
+ `,e.div`
18
+ position: absolute;
19
+ top: 40px;
20
+ margin-left: 5px;
21
+ margin-top: 5px;
22
+ width: 100%;
23
+ height: 100%;
24
+ max-height: 100%;
25
+ overflow-x: hidden;
26
+ overflow-y: auto;
27
+ `,t({name:n().min(1,`Name is required`),email:n().min(1,`Email is required`).email(`Invalid email address`)});
@@ -0,0 +1,27 @@
1
+ import"react";import e from"styled-components";import"react-hook-form";import"tailwind-merge";import{object as t,string as n}from"zod";import"@hookform/resolvers/zod";e.div`
2
+ position: relative;
3
+ text-align: center;
4
+ align-items: center;
5
+ top: 5px;
6
+ margin-left: 5px;
7
+ margin-top: 2px;
8
+ margin-bottom: 10px;
9
+ border: 1px solid rgb(78, 161, 211, 0.3);
10
+ border-radius: 15px;
11
+ width: 92%;
12
+ font-weight: 600;
13
+ font-size: 14px;
14
+ color: white;
15
+ padding: 5px;
16
+ background-color: rgb(78, 161, 211);
17
+ `,e.div`
18
+ position: absolute;
19
+ top: 40px;
20
+ margin-left: 5px;
21
+ margin-top: 5px;
22
+ width: 100%;
23
+ height: 80%;
24
+ font-size: 14px;
25
+ overflow-x: hidden;
26
+ overflow-y: auto;
27
+ `,t({name:n().min(1,`Name is required`),email:n().min(1,`Email is required`).email(`Invalid email address`)});
@@ -0,0 +1 @@
1
+ export { };
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ import"./components/lib/chat.js";import"./components/lib/chatMobile.js";
package/package.json CHANGED
@@ -1,16 +1,13 @@
1
1
  {
2
2
  "name": "od-support-chat",
3
3
  "private": false,
4
- "version": "1.0.0",
4
+ "version": "1.0.1",
5
5
  "type": "module",
6
6
  "main": "./dist/od-support-chat.umd.js",
7
7
  "module": "./dist/od-support-chat.es.js",
8
8
  "types": "./dist/main.d.ts",
9
9
  "scripts": {
10
- "dev": "vite --host localhost --port 9081",
11
- "build": "vite build",
12
- "preview": "vite preview --host localhost --port 3000",
13
- "local": "vite preview --host localhost --port 3000"
10
+ "build": "tsdown"
14
11
  },
15
12
  "exports": {
16
13
  ".": {
Binary file
Binary file