rio-assist-widget 0.1.6 → 0.1.8

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.
Files changed (9) hide show
  1. package/dist/rio-assist.js +71 -49
  2. package/index.html +9 -17
  3. package/package.json +1 -1
  4. package/src/components/conversations-panel/conversations-panel.styles.ts +300 -294
  5. package/src/components/conversations-panel/conversations-panel.template.ts +184 -184
  6. package/src/components/fullscreen/fullscreen.styles.ts +185 -178
  7. package/src/components/mini-panel/mini-panel.styles.ts +346 -337
  8. package/src/components/mini-panel/mini-panel.template.ts +1 -1
  9. package/src/components/rio-assist/rio-assist.ts +281 -255
package/src/components/conversations-panel/conversations-panel.styles.ts CHANGED
@@ -1,294 +1,300 @@
1
- import { css } from 'lit';
2
-
3
- export const conversationsPanelStyles = css`
4
- .conversations-panel {
5
- position: absolute;
6
- top: var(--header-height, 128px);
7
- left: 0;
8
- right: 0;
9
- bottom: 0;
10
- pointer-events: none;
11
- display: flex;
12
- flex-direction: column;
13
- }
14
-
15
- .conversations-panel--sidebar {
16
- position: relative;
17
- top: auto;
18
- left: auto;
19
- right: auto;
20
- bottom: auto;
21
- height: 100%;
22
- width: 300px;
23
- background: #eef2f6;
24
- border-right: 1px solid #d4dee6;
25
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.02);
26
- display: flex;
27
- flex-direction: column;
28
- min-height: 0;
29
- }
30
-
31
- .conversations-panel--open {
32
- pointer-events: auto;
33
- }
34
-
35
- .conversations-panel__surface {
36
- width: 100%;
37
- height: 100%;
38
- background: #d0d8de;
39
- padding: 12px 32px 24px;
40
- display: flex;
41
- flex-direction: column;
42
- gap: 16px;
43
- transform: translateX(100%);
44
- transition: transform 0.35s ease;
45
- }
46
-
47
- .conversations-panel--open .conversations-panel__surface {
48
- transform: translateX(0);
49
- }
50
-
51
- .conversations-panel__surface--sidebar {
52
- transform: none;
53
- transition: none;
54
- background: transparent;
55
- padding: 12px 0 32px;
56
- height: 100%;
57
- display: flex;
58
- flex-direction: column;
59
- gap: 12px;
60
- min-height: 0;
61
- overflow: hidden;
62
- }
63
-
64
- .conversation-search {
65
- display: flex;
66
- align-items: center;
67
- border-radius: 4px;
68
- border: 1px solid #b7c3cd;
69
- padding: 0 14px;
70
- background: rgba(255, 255, 255, 0.8);
71
- gap: 10px;
72
- width: 530px;
73
- height: 34px;
74
- box-sizing: border-box;
75
- }
76
-
77
- .conversations-panel--sidebar .conversation-search {
78
- width: calc(100% - 32px);
79
- height: 34px;
80
- background: #fff;
81
- border-radius: 6px;
82
- border-color: #c8d4dc;
83
- box-sizing: border-box;
84
- margin: 0 16px;
85
- }
86
-
87
- .conversation-search input {
88
- border: none;
89
- background: transparent;
90
- flex: 1;
91
- height: 100%;
92
- font-size: 14px;
93
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
94
- font-style: italic;
95
- color: #a4afbb;
96
- outline: none;
97
- }
98
-
99
- .search-icon {
100
- width: 16px;
101
- height: 16px;
102
- }
103
-
104
- .conversation-list {
105
- flex: 1;
106
- overflow-y: auto;
107
- display: flex;
108
- flex-direction: column;
109
- gap: 8px;
110
- min-height: 0;
111
- }
112
-
113
- .conversation-list-wrapper {
114
- position: relative;
115
- display: flex;
116
- flex-direction: column;
117
- flex: 1;
118
- min-height: 0;
119
- }
120
-
121
- .conversation-list-wrapper--sidebar {
122
- padding: 8px 0 0 0;
123
- }
124
-
125
- .conversations-panel--sidebar .conversation-list {
126
- width: 100%;
127
- padding-left: 16px;
128
- padding-right: 20px;
129
- overflow-y: auto;
130
- min-height: 0;
131
- }
132
-
133
- .conversation-scrollbar {
134
- position: absolute;
135
- top: 8px;
136
- right: 6px;
137
- width: 8px;
138
- height: calc(100% - 8px);
139
- border-radius: 999px;
140
- background: rgba(125, 143, 162, 0.15);
141
- opacity: 0;
142
- transition: opacity 0.2s ease;
143
- pointer-events: none;
144
- }
145
-
146
- .conversation-scrollbar--visible {
147
- opacity: 1;
148
- pointer-events: auto;
149
- }
150
-
151
- .conversation-list-wrapper--sidebar:hover .conversation-scrollbar {
152
- opacity: 1;
153
- }
154
-
155
- .conversation-scrollbar__thumb {
156
- position: absolute;
157
- width: 100%;
158
- border-radius: 999px;
159
- background: #7d8fa2;
160
- min-height: 12px;
161
- display: block;
162
- cursor: pointer;
163
- }
164
-
165
- .conversation-item {
166
- display: flex;
167
- align-items: center;
168
- justify-content: space-between;
169
- padding: 0 20px 0 6px;
170
- border-radius: 8px;
171
- color: #1f2f36;
172
- font-size: 15px;
173
- position: relative;
174
- height: 40px;
175
- }
176
-
177
- .conversations-panel--sidebar .conversation-item {
178
- border-radius: 8px;
179
- background: transparent;
180
- padding-right: 8px;
181
- }
182
-
183
- .conversations-panel--sidebar .conversation-item__text {
184
- width: 236px;
185
- min-height: 18px;
186
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
187
- font-size: 14px;
188
- font-weight: 400;
189
- line-height: 18px;
190
- }
191
-
192
- .conversation-item__text {
193
- flex: 1;
194
- padding-right: 16px;
195
- }
196
-
197
- .conversation-menu-button {
198
- width: 32px;
199
- height: 32px;
200
- border-radius: 50%;
201
- border: none;
202
- background: transparent;
203
- display: flex;
204
- align-items: center;
205
- justify-content: center;
206
- }
207
-
208
- .conversation-menu {
209
- position: absolute;
210
- top: calc(100% + 8px);
211
- right: 12px;
212
- background: #fff;
213
- box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
214
- border-radius: 12px;
215
- min-width: 140px;
216
- padding: 8px 0;
217
- display: flex;
218
- flex-direction: column;
219
- gap: 4px;
220
- z-index: 3;
221
- }
222
-
223
- .conversation-menu--above {
224
- top: auto;
225
- bottom: calc(100% + 8px);
226
- }
227
-
228
- .conversation-menu button {
229
- background: transparent;
230
- border: none;
231
- padding: 8px 14px;
232
- display: flex;
233
- align-items: center;
234
- gap: 10px;
235
- font-size: 13px;
236
- color: #1f2f36;
237
- text-align: left;
238
- width: 100%;
239
- }
240
-
241
- .conversation-menu img {
242
- width: 16px;
243
- height: 16px;
244
- }
245
-
246
- .new-conversation-cta {
247
- overflow: hidden;
248
- max-height: 0;
249
- opacity: 0;
250
- transform: translateY(-8px);
251
- transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
252
- padding: 0 16px;
253
- }
254
-
255
- .new-conversation-cta.open {
256
- max-height: 96px;
257
- opacity: 1;
258
- transform: translateY(0);
259
- margin-bottom: 4px;
260
- }
261
-
262
- .new-conversation-cta__button {
263
- width: 100%;
264
- height: 44px;
265
- border-radius: 10px;
266
- border: 1px solid #30b4c0;
267
- background: #fff;
268
- color: #008b9a;
269
- font-family: 'Source Sans Pro', 'Inter', sans-serif;
270
- font-size: 15px;
271
- font-weight: 600;
272
- display: inline-flex;
273
- align-items: center;
274
- justify-content: center;
275
- gap: 10px;
276
- padding: 10px 14px;
277
- box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
278
- cursor: pointer;
279
- transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
280
- }
281
-
282
- .new-conversation-cta__button img {
283
- width: 18px;
284
- height: 18px;
285
- }
286
-
287
- .new-conversation-cta__button:disabled,
288
- .new-conversation-cta__button[aria-disabled='true'] {
289
- opacity: 0.45;
290
- cursor: not-allowed;
291
- border-color: #7bc1d3ff;
292
- color: #88c5d3ff;
293
- }
294
- `;
1
+ import { css } from 'lit';
2
+
3
+ export const conversationsPanelStyles = css`
4
+ .conversations-panel {
5
+ position: absolute;
6
+ top: var(--header-height, 128px);
7
+ left: 0;
8
+ right: 0;
9
+ bottom: 0;
10
+ pointer-events: none;
11
+ display: flex;
12
+ flex-direction: column;
13
+ }
14
+
15
+ .conversations-panel--sidebar {
16
+ position: relative;
17
+ top: auto;
18
+ left: auto;
19
+ right: auto;
20
+ bottom: auto;
21
+ height: 100%;
22
+ width: 300px;
23
+ background: #eef2f6;
24
+ border-right: 1px solid #d4dee6;
25
+ box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.02);
26
+ display: flex;
27
+ flex-direction: column;
28
+ min-height: 0;
29
+ }
30
+
31
+ .conversations-panel--open {
32
+ pointer-events: auto;
33
+ }
34
+
35
+ .conversations-panel__surface {
36
+ width: 100%;
37
+ height: 100%;
38
+ background: #d0d8de;
39
+ padding: 12px 32px 24px;
40
+ display: flex;
41
+ flex-direction: column;
42
+ gap: 16px;
43
+ transform: translateX(100%);
44
+ transition: transform 0.35s ease;
45
+ }
46
+
47
+ .conversations-panel--open .conversations-panel__surface {
48
+ transform: translateX(0);
49
+ }
50
+
51
+ .conversations-panel__surface--sidebar {
52
+ transform: none;
53
+ transition: none;
54
+ background: transparent;
55
+ padding: 12px 0 32px;
56
+ height: 100%;
57
+ display: flex;
58
+ flex-direction: column;
59
+ gap: 12px;
60
+ min-height: 0;
61
+ overflow: hidden;
62
+ }
63
+
64
+ .conversation-search {
65
+ display: flex;
66
+ align-items: center;
67
+ border-radius: 4px;
68
+ border: 1px solid #b7c3cd;
69
+ padding: 0 14px;
70
+ background: rgba(255, 255, 255, 0.8);
71
+ gap: 10px;
72
+ width: 530px;
73
+ height: 34px;
74
+ box-sizing: border-box;
75
+ }
76
+
77
+ .conversations-panel--sidebar .conversation-search {
78
+ width: calc(100% - 32px);
79
+ height: 34px;
80
+ background: #fff;
81
+ border-radius: 6px;
82
+ border-color: #c8d4dc;
83
+ box-sizing: border-box;
84
+ margin: 0 16px;
85
+ }
86
+
87
+ .conversation-search input {
88
+ border: none;
89
+ background: transparent;
90
+ flex: 1;
91
+ height: 100%;
92
+ font-size: 14px;
93
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
94
+ font-style: italic;
95
+ color: #a4afbb;
96
+ outline: none;
97
+ }
98
+
99
+ .search-icon {
100
+ width: 16px;
101
+ height: 16px;
102
+ }
103
+
104
+ .conversation-list {
105
+ flex: 1;
106
+ overflow-y: auto;
107
+ display: flex;
108
+ flex-direction: column;
109
+ gap: 8px;
110
+ min-height: 0;
111
+ box-sizing: border-box;
112
+ }
113
+
114
+ .conversation-list-wrapper {
115
+ position: relative;
116
+ display: flex;
117
+ flex-direction: column;
118
+ flex: 1;
119
+ min-height: 0;
120
+ }
121
+
122
+ .conversation-list-wrapper--sidebar {
123
+ padding: 8px 0 0 0;
124
+ }
125
+
126
+ .conversations-panel--sidebar .conversation-list {
127
+ width: 100%;
128
+ padding-left: 16px;
129
+ padding-right: 14px;
130
+ overflow-y: auto;
131
+ min-height: 0;
132
+ scrollbar-width: none;
133
+ }
134
+
135
+ .conversations-panel--sidebar .conversation-list::-webkit-scrollbar {
136
+ width: 0;
137
+ height: 0;
138
+ }
139
+
140
+ .conversation-scrollbar {
141
+ position: absolute;
142
+ top: 8px;
143
+ right: 8px;
144
+ width: 8px;
145
+ height: calc(100% - 8px);
146
+ border-radius: 999px;
147
+ background: rgba(125, 143, 162, 0.15);
148
+ opacity: 0;
149
+ transition: opacity 0.2s ease;
150
+ pointer-events: none;
151
+ }
152
+
153
+ .conversation-scrollbar--visible {
154
+ opacity: 1;
155
+ pointer-events: auto;
156
+ }
157
+
158
+ .conversation-list-wrapper--sidebar:hover .conversation-scrollbar {
159
+ opacity: 1;
160
+ }
161
+
162
+ .conversation-scrollbar__thumb {
163
+ position: absolute;
164
+ width: 100%;
165
+ border-radius: 999px;
166
+ background: #7d8fa2;
167
+ min-height: 12px;
168
+ display: block;
169
+ cursor: pointer;
170
+ }
171
+
172
+ .conversation-item {
173
+ display: flex;
174
+ align-items: center;
175
+ justify-content: space-between;
176
+ padding: 0 20px 0 6px;
177
+ border-radius: 8px;
178
+ color: #1f2f36;
179
+ font-size: 15px;
180
+ position: relative;
181
+ height: 40px;
182
+ }
183
+
184
+ .conversations-panel--sidebar .conversation-item {
185
+ border-radius: 8px;
186
+ background: transparent;
187
+ padding-right: 8px;
188
+ }
189
+
190
+ .conversations-panel--sidebar .conversation-item__text {
191
+ width: 236px;
192
+ min-height: 18px;
193
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
194
+ font-size: 14px;
195
+ font-weight: 400;
196
+ line-height: 18px;
197
+ }
198
+
199
+ .conversation-item__text {
200
+ flex: 1;
201
+ padding-right: 16px;
202
+ }
203
+
204
+ .conversation-menu-button {
205
+ width: 32px;
206
+ height: 32px;
207
+ border-radius: 50%;
208
+ border: none;
209
+ background: transparent;
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: center;
213
+ }
214
+
215
+ .conversation-menu {
216
+ position: absolute;
217
+ top: calc(100% + 8px);
218
+ right: 12px;
219
+ background: #fff;
220
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
221
+ border-radius: 12px;
222
+ min-width: 140px;
223
+ padding: 8px 0;
224
+ display: flex;
225
+ flex-direction: column;
226
+ gap: 4px;
227
+ z-index: 3;
228
+ }
229
+
230
+ .conversation-menu--above {
231
+ top: auto;
232
+ bottom: calc(100% + 8px);
233
+ }
234
+
235
+ .conversation-menu button {
236
+ background: transparent;
237
+ border: none;
238
+ padding: 8px 14px;
239
+ display: flex;
240
+ align-items: center;
241
+ gap: 10px;
242
+ font-size: 13px;
243
+ color: #1f2f36;
244
+ text-align: left;
245
+ width: 100%;
246
+ }
247
+
248
+ .conversation-menu img {
249
+ width: 16px;
250
+ height: 16px;
251
+ }
252
+
253
+ .new-conversation-cta {
254
+ overflow: hidden;
255
+ max-height: 0;
256
+ opacity: 0;
257
+ transform: translateY(-8px);
258
+ transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
259
+ padding: 0 16px;
260
+ }
261
+
262
+ .new-conversation-cta.open {
263
+ max-height: 96px;
264
+ opacity: 1;
265
+ transform: translateY(0);
266
+ margin-bottom: 4px;
267
+ }
268
+
269
+ .new-conversation-cta__button {
270
+ width: 100%;
271
+ height: 34px;
272
+ border-radius: 4px;
273
+ border: 1px solid #30b4c0;
274
+ background: #fff;
275
+ color: #30b4c0;
276
+ font-family: 'Source Sans Pro', 'Inter', sans-serif;
277
+ font-size: 14px;
278
+ font-weight: 500;
279
+ display: inline-flex;
280
+ align-items: center;
281
+ justify-content: center;
282
+ gap: 8px;
283
+ padding: 8px 12px;
284
+ cursor: pointer;
285
+ transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
286
+ }
287
+
288
+ .new-conversation-cta__button img {
289
+ width: 24px;
290
+ height: 24px;
291
+ }
292
+
293
+ .new-conversation-cta__button:disabled,
294
+ .new-conversation-cta__button[aria-disabled='true'] {
295
+ opacity: 0.45;
296
+ cursor: not-allowed;
297
+ border-color: #7bc1d3ff;
298
+ color: #88c5d3ff;
299
+ }
300
+ `;