vanilla-agent 1.27.0 → 1.29.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.
Files changed (11) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.global.js +19 -19
  4. package/dist/index.global.js.map +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/widget.css +15 -14
  8. package/package.json +1 -1
  9. package/src/styles/tailwind.css +2 -1
  10. package/src/styles/widget.css +15 -14
  11. package/src/utils/code-generators.ts +7 -4
package/dist/widget.css CHANGED
@@ -86,7 +86,8 @@
86
86
  gap: 1.5rem;
87
87
  }
88
88
 
89
- :root {
89
+ /* Widget CSS Variables - scoped to widget root to avoid polluting global namespace */
90
+ #vanilla-agent-root {
90
91
  --cw-radius-sm: 0.75rem;
91
92
  --cw-radius-md: 1rem;
92
93
  --cw-radius-lg: 1.5rem;
@@ -119,19 +120,19 @@
119
120
  --cw-md-h6-margin: 0.5rem 0 0.25rem;
120
121
  --cw-md-h6-line-height: 1.5;
121
122
 
122
- /* Markdown Table Variables (defaults - theme-aware values set on #vanilla-agent-root) */
123
+ /* Markdown Table Variables */
123
124
  --cw-md-table-border-color: #e5e7eb;
124
125
  --cw-md-table-header-bg: #f8fafc;
125
126
  --cw-md-table-header-weight: 600;
126
127
  --cw-md-table-cell-padding: 0.5rem 0.75rem;
127
128
  --cw-md-table-border-radius: 0.375rem;
128
129
 
129
- /* Markdown Horizontal Rule Variables (defaults - theme-aware values set on #vanilla-agent-root) */
130
+ /* Markdown Horizontal Rule Variables */
130
131
  --cw-md-hr-color: #e5e7eb;
131
132
  --cw-md-hr-height: 1px;
132
133
  --cw-md-hr-margin: 1rem 0;
133
134
 
134
- /* Markdown Blockquote Variables (defaults - theme-aware values set on #vanilla-agent-root) */
135
+ /* Markdown Blockquote Variables */
135
136
  --cw-md-blockquote-border-color: #3b82f6;
136
137
  --cw-md-blockquote-border-width: 3px;
137
138
  --cw-md-blockquote-padding: 0.5rem 1rem;
@@ -140,7 +141,7 @@
140
141
  --cw-md-blockquote-text-color: #6b7280;
141
142
  --cw-md-blockquote-font-style: italic;
142
143
 
143
- /* Markdown Code Block Variables (defaults - theme-aware values set on #vanilla-agent-root) */
144
+ /* Markdown Code Block Variables */
144
145
  --cw-md-code-block-bg: #f3f4f6;
145
146
  --cw-md-code-block-border-color: #e5e7eb;
146
147
  --cw-md-code-block-text-color: inherit;
@@ -148,7 +149,7 @@
148
149
  --cw-md-code-block-border-radius: 0.375rem;
149
150
  --cw-md-code-block-font-size: 0.875rem;
150
151
 
151
- /* Markdown Inline Code Variables (defaults - theme-aware values set on #vanilla-agent-root) */
152
+ /* Markdown Inline Code Variables */
152
153
  --cw-md-inline-code-bg: #f3f4f6;
153
154
  --cw-md-inline-code-padding: 0.125rem 0.375rem;
154
155
  --cw-md-inline-code-border-radius: 0.25rem;
@@ -677,7 +678,7 @@
677
678
  }
678
679
 
679
680
  /* Ensure textarea in composer form has no border on focus */
680
- textarea:focus {
681
+ .tvw-widget-composer textarea:focus {
681
682
  border: none !important;
682
683
  outline: none !important;
683
684
  border-width: 0 !important;
@@ -687,11 +688,11 @@ textarea:focus {
687
688
  }
688
689
 
689
690
  /* Prevent form container from showing focus styles */
690
- form:focus-within {
691
+ .tvw-widget-composer:focus-within {
691
692
  outline: none !important;
692
693
  }
693
694
 
694
- form:focus-within textarea {
695
+ .tvw-widget-composer:focus-within textarea {
695
696
  border: none !important;
696
697
  outline: none !important;
697
698
  }
@@ -804,7 +805,7 @@ form:focus-within textarea {
804
805
  }
805
806
 
806
807
  /* Typing indicator animation */
807
- @keyframes typing {
808
+ @keyframes tvw-typing {
808
809
  0%, 100% {
809
810
  opacity: 0.5;
810
811
  transform: translateY(0);
@@ -816,7 +817,7 @@ form:focus-within textarea {
816
817
  }
817
818
 
818
819
  .tvw-animate-typing {
819
- animation: typing 1s infinite;
820
+ animation: tvw-typing 1s infinite;
820
821
  }
821
822
 
822
823
  .tvw-space-x-1 > * + * {
@@ -848,7 +849,7 @@ form:focus-within textarea {
848
849
  }
849
850
 
850
851
  /* Voice recognition recording animation */
851
- @keyframes voice-recording-pulse {
852
+ @keyframes tvw-voice-recording-pulse {
852
853
  0%, 100% {
853
854
  opacity: 1;
854
855
  transform: scale(1);
@@ -860,11 +861,11 @@ form:focus-within textarea {
860
861
  }
861
862
 
862
863
  .tvw-voice-recording {
863
- animation: voice-recording-pulse 1.5s ease-in-out infinite;
864
+ animation: tvw-voice-recording-pulse 1.5s ease-in-out infinite;
864
865
  }
865
866
 
866
867
  .tvw-voice-recording svg {
867
- animation: voice-recording-pulse 1.5s ease-in-out infinite;
868
+ animation: tvw-voice-recording-pulse 1.5s ease-in-out infinite;
868
869
  }
869
870
 
870
871
  /* Markdown content overflow handling */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vanilla-agent",
3
- "version": "1.27.0",
3
+ "version": "1.29.0",
4
4
  "description": "Themeable, plugable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
package/src/styles/tailwind.css CHANGED
@@ -3,7 +3,8 @@
3
3
  @tailwind utilities;
4
4
 
5
5
  @layer base {
6
- :root {
6
+ /* Widget CSS Variables - scoped to widget root to avoid polluting global namespace */
7
+ #vanilla-agent-root {
7
8
  --travrse-primary: #111827;
8
9
  --travrse-secondary: #4338ca;
9
10
  --travrse-surface: #ffffff;
package/src/styles/widget.css CHANGED
@@ -86,7 +86,8 @@
86
86
  gap: 1.5rem;
87
87
  }
88
88
 
89
- :root {
89
+ /* Widget CSS Variables - scoped to widget root to avoid polluting global namespace */
90
+ #vanilla-agent-root {
90
91
  --cw-radius-sm: 0.75rem;
91
92
  --cw-radius-md: 1rem;
92
93
  --cw-radius-lg: 1.5rem;
@@ -119,19 +120,19 @@
119
120
  --cw-md-h6-margin: 0.5rem 0 0.25rem;
120
121
  --cw-md-h6-line-height: 1.5;
121
122
 
122
- /* Markdown Table Variables (defaults - theme-aware values set on #vanilla-agent-root) */
123
+ /* Markdown Table Variables */
123
124
  --cw-md-table-border-color: #e5e7eb;
124
125
  --cw-md-table-header-bg: #f8fafc;
125
126
  --cw-md-table-header-weight: 600;
126
127
  --cw-md-table-cell-padding: 0.5rem 0.75rem;
127
128
  --cw-md-table-border-radius: 0.375rem;
128
129
 
129
- /* Markdown Horizontal Rule Variables (defaults - theme-aware values set on #vanilla-agent-root) */
130
+ /* Markdown Horizontal Rule Variables */
130
131
  --cw-md-hr-color: #e5e7eb;
131
132
  --cw-md-hr-height: 1px;
132
133
  --cw-md-hr-margin: 1rem 0;
133
134
 
134
- /* Markdown Blockquote Variables (defaults - theme-aware values set on #vanilla-agent-root) */
135
+ /* Markdown Blockquote Variables */
135
136
  --cw-md-blockquote-border-color: #3b82f6;
136
137
  --cw-md-blockquote-border-width: 3px;
137
138
  --cw-md-blockquote-padding: 0.5rem 1rem;
@@ -140,7 +141,7 @@
140
141
  --cw-md-blockquote-text-color: #6b7280;
141
142
  --cw-md-blockquote-font-style: italic;
142
143
 
143
- /* Markdown Code Block Variables (defaults - theme-aware values set on #vanilla-agent-root) */
144
+ /* Markdown Code Block Variables */
144
145
  --cw-md-code-block-bg: #f3f4f6;
145
146
  --cw-md-code-block-border-color: #e5e7eb;
146
147
  --cw-md-code-block-text-color: inherit;
@@ -148,7 +149,7 @@
148
149
  --cw-md-code-block-border-radius: 0.375rem;
149
150
  --cw-md-code-block-font-size: 0.875rem;
150
151
 
151
- /* Markdown Inline Code Variables (defaults - theme-aware values set on #vanilla-agent-root) */
152
+ /* Markdown Inline Code Variables */
152
153
  --cw-md-inline-code-bg: #f3f4f6;
153
154
  --cw-md-inline-code-padding: 0.125rem 0.375rem;
154
155
  --cw-md-inline-code-border-radius: 0.25rem;
@@ -677,7 +678,7 @@
677
678
  }
678
679
 
679
680
  /* Ensure textarea in composer form has no border on focus */
680
- textarea:focus {
681
+ .tvw-widget-composer textarea:focus {
681
682
  border: none !important;
682
683
  outline: none !important;
683
684
  border-width: 0 !important;
@@ -687,11 +688,11 @@ textarea:focus {
687
688
  }
688
689
 
689
690
  /* Prevent form container from showing focus styles */
690
- form:focus-within {
691
+ .tvw-widget-composer:focus-within {
691
692
  outline: none !important;
692
693
  }
693
694
 
694
- form:focus-within textarea {
695
+ .tvw-widget-composer:focus-within textarea {
695
696
  border: none !important;
696
697
  outline: none !important;
697
698
  }
@@ -804,7 +805,7 @@ form:focus-within textarea {
804
805
  }
805
806
 
806
807
  /* Typing indicator animation */
807
- @keyframes typing {
808
+ @keyframes tvw-typing {
808
809
  0%, 100% {
809
810
  opacity: 0.5;
810
811
  transform: translateY(0);
@@ -816,7 +817,7 @@ form:focus-within textarea {
816
817
  }
817
818
 
818
819
  .tvw-animate-typing {
819
- animation: typing 1s infinite;
820
+ animation: tvw-typing 1s infinite;
820
821
  }
821
822
 
822
823
  .tvw-space-x-1 > * + * {
@@ -848,7 +849,7 @@ form:focus-within textarea {
848
849
  }
849
850
 
850
851
  /* Voice recognition recording animation */
851
- @keyframes voice-recording-pulse {
852
+ @keyframes tvw-voice-recording-pulse {
852
853
  0%, 100% {
853
854
  opacity: 1;
854
855
  transform: scale(1);
@@ -860,11 +861,11 @@ form:focus-within textarea {
860
861
  }
861
862
 
862
863
  .tvw-voice-recording {
863
- animation: voice-recording-pulse 1.5s ease-in-out infinite;
864
+ animation: tvw-voice-recording-pulse 1.5s ease-in-out infinite;
864
865
  }
865
866
 
866
867
  .tvw-voice-recording svg {
867
- animation: voice-recording-pulse 1.5s ease-in-out infinite;
868
+ animation: tvw-voice-recording-pulse 1.5s ease-in-out infinite;
868
869
  }
869
870
 
870
871
  /* Markdown content overflow handling */
package/src/utils/code-generators.ts CHANGED
@@ -1364,10 +1364,13 @@ function generateScriptAdvancedCode(config: any): string {
1364
1364
  " }",
1365
1365
  " };",
1366
1366
  "",
1367
- " // Boot sequence: load CSS, then JS, then wait for hydration, then initialize",
1368
- " loadCSS();",
1369
- " loadJS(function() {",
1370
- " waitForHydration(init);",
1367
+ " // Boot sequence: wait for hydration, then load CSS and JS, then initialize",
1368
+ " // This prevents Next.js/Nuxt/etc. from removing dynamically added CSS during reconciliation",
1369
+ " waitForHydration(function() {",
1370
+ " loadCSS();",
1371
+ " loadJS(function() {",
1372
+ " init();",
1373
+ " });",
1371
1374
  " });",
1372
1375
  "})();",
1373
1376
  "</script>"