ninegrid2 6.553.0 → 6.555.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -30,8 +30,8 @@ class aiContainer extends HTMLElement
30
30
 
31
31
  this.shadowRoot.innerHTML = `
32
32
  <style>
33
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
34
- ${ninegrid.getCustomPath(this,"aiContainer.css")}
33
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
34
+ ${ninegrid.getCustomPath(this,"ai.css")}
35
35
  </style>
36
36
 
37
37
  <div class="wrapper">
@@ -16,8 +16,8 @@ class aiMessage extends HTMLElement
16
16
 
17
17
  this.shadowRoot.innerHTML = `
18
18
  <style>
19
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
20
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
19
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
20
+ ${ninegrid.getCustomPath(this,"ai.css")}
21
21
  </style>
22
22
 
23
23
  <div class="chat-message">
@@ -29,6 +29,15 @@ class aiMessage extends HTMLElement
29
29
 
30
30
  <div class="chat-menu">
31
31
  <div class="left-menu">
32
+ <div class="filter"></div>
33
+ <div class="database"></div>
34
+ <div class="excel"></div>
35
+ <div class="maximize"></div>
36
+ </div>
37
+ </div>
38
+ `;
39
+ /**
40
+ *
32
41
  <svg class="filter" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
33
42
  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
34
43
  </svg>
@@ -41,10 +50,7 @@ class aiMessage extends HTMLElement
41
50
  <svg class="maximize" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
42
51
  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
43
52
  </svg>
44
- </div>
45
- </div>
46
- `;
47
-
53
+ */
48
54
  requestAnimationFrame(() => {
49
55
  const elMessage = this.shadowRoot.querySelector(".message");
50
56
  elMessage.setAttribute("title", this.#message);
@@ -179,8 +185,8 @@ class aiIngMessage extends HTMLElement
179
185
 
180
186
  this.shadowRoot.innerHTML = `
181
187
  <style>
182
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
183
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
188
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
189
+ ${ninegrid.getCustomPath(this,"ai.css")}
184
190
  </style>
185
191
 
186
192
  <div class="chat-message">
@@ -211,8 +217,8 @@ class aiMyMessage extends HTMLElement
211
217
 
212
218
  this.shadowRoot.innerHTML = `
213
219
  <style>
214
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
215
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
220
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
221
+ ${ninegrid.getCustomPath(this,"ai.css")}
216
222
  </style>
217
223
 
218
224
  <div class="chat-message">
@@ -234,8 +240,8 @@ class aiChat extends HTMLElement
234
240
 
235
241
  this.shadowRoot.innerHTML = `
236
242
  <style>
237
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
238
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
243
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
244
+ ${ninegrid.getCustomPath(this,"ai.css")}
239
245
  </style>
240
246
 
241
247
  <div class="chat-body">
@@ -68,23 +68,20 @@ class aiSettings extends HTMLElement
68
68
  :host {
69
69
  z-index: 9;
70
70
  display: none;
71
+ flex-direction: column;
71
72
  justify-content: flex-start;
73
+ align-items: flex-start;
72
74
  position: absolute;
73
75
  background: #fff;
74
76
  left: 0;
75
77
  right: 30px;
76
78
  top: 48px;
77
79
  bottom: 0;
78
- justify-content: center;
79
- align-items: center;
80
80
  opacity: 0;
81
- flex-direction: column;
82
- align-items: flex-start;
83
81
  padding-left: 16px;
84
82
  gap: 16px;
85
83
  transform: translateX(100%);
86
84
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
87
-
88
85
  }
89
86
 
90
87
  :host(.expand) {
@@ -27586,23 +27586,20 @@ class aiSettings extends HTMLElement
27586
27586
  :host {
27587
27587
  z-index: 9;
27588
27588
  display: none;
27589
+ flex-direction: column;
27589
27590
  justify-content: flex-start;
27591
+ align-items: flex-start;
27590
27592
  position: absolute;
27591
27593
  background: #fff;
27592
27594
  left: 0;
27593
27595
  right: 30px;
27594
27596
  top: 48px;
27595
27597
  bottom: 0;
27596
- justify-content: center;
27597
- align-items: center;
27598
27598
  opacity: 0;
27599
- flex-direction: column;
27600
- align-items: flex-start;
27601
27599
  padding-left: 16px;
27602
27600
  gap: 16px;
27603
27601
  transform: translateX(100%);
27604
27602
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
27605
-
27606
27603
  }
27607
27604
 
27608
27605
  :host(.expand) {
@@ -27718,8 +27715,8 @@ class aiMessage extends HTMLElement
27718
27715
 
27719
27716
  this.shadowRoot.innerHTML = `
27720
27717
  <style>
27721
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27722
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27718
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27719
+ ${ninegrid.getCustomPath(this,"ai.css")}
27723
27720
  </style>
27724
27721
 
27725
27722
  <div class="chat-message">
@@ -27731,6 +27728,15 @@ class aiMessage extends HTMLElement
27731
27728
 
27732
27729
  <div class="chat-menu">
27733
27730
  <div class="left-menu">
27731
+ <div class="filter"></div>
27732
+ <div class="database"></div>
27733
+ <div class="excel"></div>
27734
+ <div class="maximize"></div>
27735
+ </div>
27736
+ </div>
27737
+ `;
27738
+ /**
27739
+ *
27734
27740
  <svg class="filter" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27735
27741
  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
27736
27742
  </svg>
@@ -27743,10 +27749,7 @@ class aiMessage extends HTMLElement
27743
27749
  <svg class="maximize" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27744
27750
  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
27745
27751
  </svg>
27746
- </div>
27747
- </div>
27748
- `;
27749
-
27752
+ */
27750
27753
  requestAnimationFrame(() => {
27751
27754
  const elMessage = this.shadowRoot.querySelector(".message");
27752
27755
  elMessage.setAttribute("title", this.#message);
@@ -27881,8 +27884,8 @@ class aiIngMessage extends HTMLElement
27881
27884
 
27882
27885
  this.shadowRoot.innerHTML = `
27883
27886
  <style>
27884
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27885
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27887
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27888
+ ${ninegrid.getCustomPath(this,"ai.css")}
27886
27889
  </style>
27887
27890
 
27888
27891
  <div class="chat-message">
@@ -27913,8 +27916,8 @@ class aiMyMessage extends HTMLElement
27913
27916
 
27914
27917
  this.shadowRoot.innerHTML = `
27915
27918
  <style>
27916
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27917
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27919
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27920
+ ${ninegrid.getCustomPath(this,"ai.css")}
27918
27921
  </style>
27919
27922
 
27920
27923
  <div class="chat-message">
@@ -27936,8 +27939,8 @@ class aiChat extends HTMLElement
27936
27939
 
27937
27940
  this.shadowRoot.innerHTML = `
27938
27941
  <style>
27939
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27940
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27942
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27943
+ ${ninegrid.getCustomPath(this,"ai.css")}
27941
27944
  </style>
27942
27945
 
27943
27946
  <div class="chat-body">
@@ -54233,8 +54236,8 @@ class aiContainer extends HTMLElement
54233
54236
 
54234
54237
  this.shadowRoot.innerHTML = `
54235
54238
  <style>
54236
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
54237
- ${ninegrid.getCustomPath(this,"aiContainer.css")}
54239
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
54240
+ ${ninegrid.getCustomPath(this,"ai.css")}
54238
54241
  </style>
54239
54242
 
54240
54243
  <div class="wrapper">
@@ -27584,23 +27584,20 @@ class aiSettings extends HTMLElement
27584
27584
  :host {
27585
27585
  z-index: 9;
27586
27586
  display: none;
27587
+ flex-direction: column;
27587
27588
  justify-content: flex-start;
27589
+ align-items: flex-start;
27588
27590
  position: absolute;
27589
27591
  background: #fff;
27590
27592
  left: 0;
27591
27593
  right: 30px;
27592
27594
  top: 48px;
27593
27595
  bottom: 0;
27594
- justify-content: center;
27595
- align-items: center;
27596
27596
  opacity: 0;
27597
- flex-direction: column;
27598
- align-items: flex-start;
27599
27597
  padding-left: 16px;
27600
27598
  gap: 16px;
27601
27599
  transform: translateX(100%);
27602
27600
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
27603
-
27604
27601
  }
27605
27602
 
27606
27603
  :host(.expand) {
@@ -27716,8 +27713,8 @@ class aiMessage extends HTMLElement
27716
27713
 
27717
27714
  this.shadowRoot.innerHTML = `
27718
27715
  <style>
27719
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27720
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27716
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27717
+ ${ninegrid.getCustomPath(this,"ai.css")}
27721
27718
  </style>
27722
27719
 
27723
27720
  <div class="chat-message">
@@ -27729,6 +27726,15 @@ class aiMessage extends HTMLElement
27729
27726
 
27730
27727
  <div class="chat-menu">
27731
27728
  <div class="left-menu">
27729
+ <div class="filter"></div>
27730
+ <div class="database"></div>
27731
+ <div class="excel"></div>
27732
+ <div class="maximize"></div>
27733
+ </div>
27734
+ </div>
27735
+ `;
27736
+ /**
27737
+ *
27732
27738
  <svg class="filter" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27733
27739
  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
27734
27740
  </svg>
@@ -27741,10 +27747,7 @@ class aiMessage extends HTMLElement
27741
27747
  <svg class="maximize" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
27742
27748
  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
27743
27749
  </svg>
27744
- </div>
27745
- </div>
27746
- `;
27747
-
27750
+ */
27748
27751
  requestAnimationFrame(() => {
27749
27752
  const elMessage = this.shadowRoot.querySelector(".message");
27750
27753
  elMessage.setAttribute("title", this.#message);
@@ -27879,8 +27882,8 @@ class aiIngMessage extends HTMLElement
27879
27882
 
27880
27883
  this.shadowRoot.innerHTML = `
27881
27884
  <style>
27882
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27883
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27885
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27886
+ ${ninegrid.getCustomPath(this,"ai.css")}
27884
27887
  </style>
27885
27888
 
27886
27889
  <div class="chat-message">
@@ -27911,8 +27914,8 @@ class aiMyMessage extends HTMLElement
27911
27914
 
27912
27915
  this.shadowRoot.innerHTML = `
27913
27916
  <style>
27914
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27915
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27917
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27918
+ ${ninegrid.getCustomPath(this,"ai.css")}
27916
27919
  </style>
27917
27920
 
27918
27921
  <div class="chat-message">
@@ -27934,8 +27937,8 @@ class aiChat extends HTMLElement
27934
27937
 
27935
27938
  this.shadowRoot.innerHTML = `
27936
27939
  <style>
27937
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
27938
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
27940
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
27941
+ ${ninegrid.getCustomPath(this,"ai.css")}
27939
27942
  </style>
27940
27943
 
27941
27944
  <div class="chat-body">
@@ -54231,8 +54234,8 @@ class aiContainer extends HTMLElement
54231
54234
 
54232
54235
  this.shadowRoot.innerHTML = `
54233
54236
  <style>
54234
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
54235
- ${ninegrid.getCustomPath(this,"aiContainer.css")}
54237
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
54238
+ ${ninegrid.getCustomPath(this,"ai.css")}
54236
54239
  </style>
54237
54240
 
54238
54241
  <div class="wrapper">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.553.0",
4
+ "version": "6.555.0",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
7
7
  "import": "./dist/index.js",
@@ -30,8 +30,8 @@ class aiContainer extends HTMLElement
30
30
 
31
31
  this.shadowRoot.innerHTML = `
32
32
  <style>
33
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiContainer.css";
34
- ${ninegrid.getCustomPath(this,"aiContainer.css")}
33
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
34
+ ${ninegrid.getCustomPath(this,"ai.css")}
35
35
  </style>
36
36
 
37
37
  <div class="wrapper">
@@ -16,8 +16,8 @@ class aiMessage extends HTMLElement
16
16
 
17
17
  this.shadowRoot.innerHTML = `
18
18
  <style>
19
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
20
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
19
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
20
+ ${ninegrid.getCustomPath(this,"ai.css")}
21
21
  </style>
22
22
 
23
23
  <div class="chat-message">
@@ -29,6 +29,15 @@ class aiMessage extends HTMLElement
29
29
 
30
30
  <div class="chat-menu">
31
31
  <div class="left-menu">
32
+ <div class="filter"></div>
33
+ <div class="database"></div>
34
+ <div class="excel"></div>
35
+ <div class="maximize"></div>
36
+ </div>
37
+ </div>
38
+ `;
39
+ /**
40
+ *
32
41
  <svg class="filter" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
33
42
  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
34
43
  </svg>
@@ -41,10 +50,7 @@ class aiMessage extends HTMLElement
41
50
  <svg class="maximize" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
42
51
  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/>
43
52
  </svg>
44
- </div>
45
- </div>
46
- `;
47
-
53
+ */
48
54
  requestAnimationFrame(() => {
49
55
  const elMessage = this.shadowRoot.querySelector(".message");
50
56
  elMessage.setAttribute("title", this.#message);
@@ -179,8 +185,8 @@ class aiIngMessage extends HTMLElement
179
185
 
180
186
  this.shadowRoot.innerHTML = `
181
187
  <style>
182
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
183
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
188
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
189
+ ${ninegrid.getCustomPath(this,"ai.css")}
184
190
  </style>
185
191
 
186
192
  <div class="chat-message">
@@ -211,8 +217,8 @@ class aiMyMessage extends HTMLElement
211
217
 
212
218
  this.shadowRoot.innerHTML = `
213
219
  <style>
214
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
215
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
220
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
221
+ ${ninegrid.getCustomPath(this,"ai.css")}
216
222
  </style>
217
223
 
218
224
  <div class="chat-message">
@@ -234,8 +240,8 @@ class aiChat extends HTMLElement
234
240
 
235
241
  this.shadowRoot.innerHTML = `
236
242
  <style>
237
- @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/aiMessage.css";
238
- ${ninegrid.getCustomPath(this,"aiMessage.css")}
243
+ @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ai.css";
244
+ ${ninegrid.getCustomPath(this,"ai.css")}
239
245
  </style>
240
246
 
241
247
  <div class="chat-body">
@@ -68,23 +68,20 @@ class aiSettings extends HTMLElement
68
68
  :host {
69
69
  z-index: 9;
70
70
  display: none;
71
+ flex-direction: column;
71
72
  justify-content: flex-start;
73
+ align-items: flex-start;
72
74
  position: absolute;
73
75
  background: #fff;
74
76
  left: 0;
75
77
  right: 30px;
76
78
  top: 48px;
77
79
  bottom: 0;
78
- justify-content: center;
79
- align-items: center;
80
80
  opacity: 0;
81
- flex-direction: column;
82
- align-items: flex-start;
83
81
  padding-left: 16px;
84
82
  gap: 16px;
85
83
  transform: translateX(100%);
86
84
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
87
-
88
85
  }
89
86
 
90
87
  :host(.expand) {