vanilla-agent 1.21.0 → 1.23.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.
- package/README.md +87 -0
- package/dist/index.cjs +28 -24
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +469 -30
- package/dist/index.d.ts +469 -30
- package/dist/index.global.js +60 -56
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +28 -24
- package/dist/index.js.map +1 -1
- package/dist/install.global.js +1 -1
- package/dist/install.global.js.map +1 -1
- package/dist/widget.css +409 -0
- package/package.json +2 -2
- package/src/client.ts +392 -3
- package/src/components/feedback.ts +377 -0
- package/src/components/message-bubble.ts +208 -4
- package/src/components/messages.ts +10 -3
- package/src/defaults.ts +15 -0
- package/src/index.ts +23 -3
- package/src/install.ts +69 -7
- package/src/session.ts +132 -4
- package/src/styles/widget.css +409 -0
- package/src/types.ts +209 -0
- package/src/ui.ts +121 -4
- package/src/utils/message-id.ts +35 -0
package/dist/install.global.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var SiteAgentInstaller=(()=>{(function(){"use strict";if(window.__siteAgentInstallerLoaded)return;window.__siteAgentInstallerLoaded=!0;let n=window.siteAgentConfig||{},
|
|
1
|
+
"use strict";var SiteAgentInstaller=(()=>{(function(){"use strict";if(window.__siteAgentInstallerLoaded)return;window.__siteAgentInstallerLoaded=!0;let c=(()=>{let e=document.currentScript;if(!e)return{};let t={},i=e.getAttribute("data-travrse-token");i&&(t.clientToken=i);let o=e.getAttribute("data-flow-id");o&&(t.flowId=o);let l=e.getAttribute("data-api-url");return l&&(t.apiUrl=l),t})(),n={...window.siteAgentConfig||{},...c},d=n.version||"latest",g=n.cdn||"jsdelivr",f=n.autoInit!==!1,u=()=>{if(n.cssUrl&&n.jsUrl)return{cssUrl:n.cssUrl,jsUrl:n.jsUrl};let t=`/npm/vanilla-agent@${d}/dist`;return g==="unpkg"?{cssUrl:`https://unpkg.com${t}/widget.css`,jsUrl:`https://unpkg.com${t}/index.global.js`}:{cssUrl:`https://cdn.jsdelivr.net${t}/widget.css`,jsUrl:`https://cdn.jsdelivr.net${t}/index.global.js`}},{cssUrl:r,jsUrl:s}=u(),w=()=>!!document.head.querySelector("link[data-vanilla-agent]")||!!document.head.querySelector('link[href*="widget.css"]'),p=()=>!!window.AgentWidget,A=()=>new Promise((e,t)=>{if(w()){e();return}let i=document.createElement("link");i.rel="stylesheet",i.href=r,i.setAttribute("data-vanilla-agent","true"),i.onload=()=>e(),i.onerror=()=>t(new Error(`Failed to load CSS from ${r}`)),document.head.appendChild(i)}),m=()=>new Promise((e,t)=>{if(p()){e();return}let i=document.createElement("script");i.src=s,i.async=!0,i.onload=()=>e(),i.onerror=()=>t(new Error(`Failed to load JS from ${s}`)),document.head.appendChild(i)}),C=()=>{if(!window.AgentWidget||!window.AgentWidget.initAgentWidget){console.warn("AgentWidget not available. Make sure the script loaded successfully.");return}let e=n.target||"body",t={...n.config};if(n.apiUrl&&!t.apiUrl&&(t.apiUrl=n.apiUrl),n.clientToken&&!t.clientToken&&(t.clientToken=n.clientToken),n.flowId&&!t.flowId&&(t.flowId=n.flowId),!(!(t.apiUrl||t.clientToken)&&Object.keys(t).length===0))try{window.AgentWidget.initAgentWidget({target:e,config:t})}catch(o){console.error("Failed to initialize AgentWidget:",o)}},a=async()=>{try{await A(),await m(),f&&(n.config||n.apiUrl||n.clientToken)&&setTimeout(C,0)}catch(e){console.error("Failed to install AgentWidget:",e)}};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()})();})();
|
|
2
2
|
//# sourceMappingURL=install.global.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/install.ts"],"sourcesContent":["/**\n * Standalone installer script for easy script tag installation\n * This script automatically loads CSS and JS, then initializes the widget\n * if configuration is provided via window.siteAgentConfig\n */\n\ninterface SiteAgentInstallConfig {\n version?: string;\n cdn?: \"unpkg\" | \"jsdelivr\";\n cssUrl?: string;\n jsUrl?: string;\n target?: string | HTMLElement;\n config?: any;\n autoInit?: boolean;\n}\n\ndeclare global {\n interface Window {\n siteAgentConfig?: SiteAgentInstallConfig;\n AgentWidget?: any;\n }\n}\n\n(function() {\n \"use strict\";\n\n // Prevent double installation\n if ((window as any).__siteAgentInstallerLoaded) {\n return;\n }\n (window as any).__siteAgentInstallerLoaded = true;\n\n const config: SiteAgentInstallConfig = window.siteAgentConfig || {};\n const version = config.version || \"latest\";\n const cdn = config.cdn || \"jsdelivr\";\n const autoInit = config.autoInit !== false; // Default to true\n\n // Determine CDN base URL\n const getCdnBase = () => {\n if (config.cssUrl && config.jsUrl) {\n return { cssUrl: config.cssUrl, jsUrl: config.jsUrl };\n }\n \n const packageName = \"vanilla-agent\";\n const basePath = `/npm/${packageName}@${version}/dist`;\n \n if (cdn === \"unpkg\") {\n return {\n cssUrl: `https://unpkg.com${basePath}/widget.css`,\n jsUrl: `https://unpkg.com${basePath}/index.global.js`\n };\n } else {\n return {\n cssUrl: `https://cdn.jsdelivr.net${basePath}/widget.css`,\n jsUrl: `https://cdn.jsdelivr.net${basePath}/index.global.js`\n };\n }\n };\n\n const { cssUrl, jsUrl } = getCdnBase();\n\n // Check if CSS is already loaded\n const isCssLoaded = () => {\n return !!document.head.querySelector('link[data-vanilla-agent]') ||\n !!document.head.querySelector(`link[href*=\"widget.css\"]`);\n };\n\n // Check if JS is already loaded\n const isJsLoaded = () => {\n return !!(window as any).AgentWidget;\n };\n\n // Load CSS\n const loadCSS = (): Promise<void> => {\n return new Promise((resolve, reject) => {\n if (isCssLoaded()) {\n resolve();\n return;\n }\n\n const link = document.createElement(\"link\");\n link.rel = \"stylesheet\";\n link.href = cssUrl;\n link.setAttribute(\"data-vanilla-agent\", \"true\");\n link.onload = () => resolve();\n link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));\n document.head.appendChild(link);\n });\n };\n\n // Load JS\n const loadJS = (): Promise<void> => {\n return new Promise((resolve, reject) => {\n if (isJsLoaded()) {\n resolve();\n return;\n }\n\n const script = document.createElement(\"script\");\n script.src = jsUrl;\n script.async = true;\n script.onload = () => resolve();\n script.onerror = () => reject(new Error(`Failed to load JS from ${jsUrl}`));\n document.head.appendChild(script);\n });\n };\n\n // Initialize widget\n const initWidget = () => {\n if (!window.AgentWidget || !window.AgentWidget.initAgentWidget) {\n console.warn(\"AgentWidget not available. Make sure the script loaded successfully.\");\n return;\n }\n\n const target = config.target || \"body\";\n // Merge
|
|
1
|
+
{"version":3,"sources":["../src/install.ts"],"sourcesContent":["/**\n * Standalone installer script for easy script tag installation\n * This script automatically loads CSS and JS, then initializes the widget\n * if configuration is provided via window.siteAgentConfig\n */\n\ninterface SiteAgentInstallConfig {\n version?: string;\n cdn?: \"unpkg\" | \"jsdelivr\";\n cssUrl?: string;\n jsUrl?: string;\n target?: string | HTMLElement;\n config?: any;\n autoInit?: boolean;\n // Client token mode options (can also be set via data attributes)\n clientToken?: string;\n flowId?: string;\n apiUrl?: string;\n}\n\ndeclare global {\n interface Window {\n siteAgentConfig?: SiteAgentInstallConfig;\n AgentWidget?: any;\n }\n}\n\n(function() {\n \"use strict\";\n\n // Prevent double installation\n if ((window as any).__siteAgentInstallerLoaded) {\n return;\n }\n (window as any).__siteAgentInstallerLoaded = true;\n\n /**\n * Read configuration from data attributes on the current script tag.\n * Supports: data-travrse-token, data-flow-id, data-api-url\n */\n const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {\n // Try to get the current script element\n const script = document.currentScript as HTMLScriptElement | null;\n if (!script) return {};\n\n const scriptConfig: Partial<SiteAgentInstallConfig> = {};\n\n // Client token from data attribute (primary method for client token mode)\n const token = script.getAttribute('data-travrse-token');\n if (token) {\n scriptConfig.clientToken = token;\n }\n\n // Optional flow ID\n const flowId = script.getAttribute('data-flow-id');\n if (flowId) {\n scriptConfig.flowId = flowId;\n }\n\n // Optional API URL override\n const apiUrl = script.getAttribute('data-api-url');\n if (apiUrl) {\n scriptConfig.apiUrl = apiUrl;\n }\n\n return scriptConfig;\n };\n\n // Get config from script attributes (must be called synchronously during script execution)\n const scriptConfig = getConfigFromScript();\n\n // Merge script attributes with window config (script attributes take precedence)\n const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};\n const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };\n \n const version = config.version || \"latest\";\n const cdn = config.cdn || \"jsdelivr\";\n const autoInit = config.autoInit !== false; // Default to true\n\n // Determine CDN base URL\n const getCdnBase = () => {\n if (config.cssUrl && config.jsUrl) {\n return { cssUrl: config.cssUrl, jsUrl: config.jsUrl };\n }\n \n const packageName = \"vanilla-agent\";\n const basePath = `/npm/${packageName}@${version}/dist`;\n \n if (cdn === \"unpkg\") {\n return {\n cssUrl: `https://unpkg.com${basePath}/widget.css`,\n jsUrl: `https://unpkg.com${basePath}/index.global.js`\n };\n } else {\n return {\n cssUrl: `https://cdn.jsdelivr.net${basePath}/widget.css`,\n jsUrl: `https://cdn.jsdelivr.net${basePath}/index.global.js`\n };\n }\n };\n\n const { cssUrl, jsUrl } = getCdnBase();\n\n // Check if CSS is already loaded\n const isCssLoaded = () => {\n return !!document.head.querySelector('link[data-vanilla-agent]') ||\n !!document.head.querySelector(`link[href*=\"widget.css\"]`);\n };\n\n // Check if JS is already loaded\n const isJsLoaded = () => {\n return !!(window as any).AgentWidget;\n };\n\n // Load CSS\n const loadCSS = (): Promise<void> => {\n return new Promise((resolve, reject) => {\n if (isCssLoaded()) {\n resolve();\n return;\n }\n\n const link = document.createElement(\"link\");\n link.rel = \"stylesheet\";\n link.href = cssUrl;\n link.setAttribute(\"data-vanilla-agent\", \"true\");\n link.onload = () => resolve();\n link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));\n document.head.appendChild(link);\n });\n };\n\n // Load JS\n const loadJS = (): Promise<void> => {\n return new Promise((resolve, reject) => {\n if (isJsLoaded()) {\n resolve();\n return;\n }\n\n const script = document.createElement(\"script\");\n script.src = jsUrl;\n script.async = true;\n script.onload = () => resolve();\n script.onerror = () => reject(new Error(`Failed to load JS from ${jsUrl}`));\n document.head.appendChild(script);\n });\n };\n\n // Initialize widget\n const initWidget = () => {\n if (!window.AgentWidget || !window.AgentWidget.initAgentWidget) {\n console.warn(\"AgentWidget not available. Make sure the script loaded successfully.\");\n return;\n }\n\n const target = config.target || \"body\";\n // Merge top-level config options into widget config\n const widgetConfig = { ...config.config };\n \n // Merge apiUrl from top-level config into widget config if present\n if (config.apiUrl && !widgetConfig.apiUrl) {\n widgetConfig.apiUrl = config.apiUrl;\n }\n \n // Merge clientToken from top-level config into widget config if present\n if (config.clientToken && !widgetConfig.clientToken) {\n widgetConfig.clientToken = config.clientToken;\n }\n \n // Merge flowId from top-level config into widget config if present\n if (config.flowId && !widgetConfig.flowId) {\n widgetConfig.flowId = config.flowId;\n }\n\n // Only initialize if we have either apiUrl OR clientToken (or other config)\n const hasApiConfig = widgetConfig.apiUrl || widgetConfig.clientToken;\n if (!hasApiConfig && Object.keys(widgetConfig).length === 0) {\n return;\n }\n\n try {\n window.AgentWidget.initAgentWidget({\n target,\n config: widgetConfig\n });\n } catch (error) {\n console.error(\"Failed to initialize AgentWidget:\", error);\n }\n };\n\n // Main installation flow\n const install = async () => {\n try {\n await loadCSS();\n await loadJS();\n \n // Auto-init if we have config OR apiUrl OR clientToken\n const shouldAutoInit = autoInit && (\n config.config || \n config.apiUrl || \n config.clientToken\n );\n \n if (shouldAutoInit) {\n // Wait a tick to ensure AgentWidget is fully initialized\n setTimeout(initWidget, 0);\n }\n } catch (error) {\n console.error(\"Failed to install AgentWidget:\", error);\n }\n };\n\n // Start installation\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", install);\n } else {\n install();\n }\n})();\n\n"],"mappings":"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","names":["scriptConfig","script","token","flowId","apiUrl","config","version","cdn","autoInit","getCdnBase","basePath","cssUrl","jsUrl","isCssLoaded","isJsLoaded","loadCSS","resolve","reject","link","loadJS","initWidget","target","widgetConfig","error","install"]}
|
package/dist/widget.css
CHANGED
|
@@ -1215,3 +1215,412 @@ form:focus-within textarea {
|
|
|
1215
1215
|
.vanilla-message-user-bubble code:not(pre code) {
|
|
1216
1216
|
background-color: rgba(255, 255, 255, 0.2);
|
|
1217
1217
|
}
|
|
1218
|
+
|
|
1219
|
+
/* ============================================
|
|
1220
|
+
Message Action Buttons (Copy, Upvote, Downvote)
|
|
1221
|
+
============================================ */
|
|
1222
|
+
|
|
1223
|
+
/* Make message bubble position relative for overlay positioning */
|
|
1224
|
+
.vanilla-message-bubble {
|
|
1225
|
+
position: relative;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
/* Fade-in animation for action buttons */
|
|
1229
|
+
@keyframes tvw-message-actions-fade-in {
|
|
1230
|
+
from {
|
|
1231
|
+
opacity: 0;
|
|
1232
|
+
}
|
|
1233
|
+
to {
|
|
1234
|
+
opacity: 1;
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
/* Base action bar styles */
|
|
1239
|
+
.tvw-message-actions {
|
|
1240
|
+
display: flex;
|
|
1241
|
+
align-items: center;
|
|
1242
|
+
gap: 0.25rem;
|
|
1243
|
+
margin-top: 0.5rem;
|
|
1244
|
+
padding-top: 0.5rem;
|
|
1245
|
+
border-top: 1px solid var(--cw-divider, #f1f5f9);
|
|
1246
|
+
/* Fade in when first shown (for "always" visibility) */
|
|
1247
|
+
animation: tvw-message-actions-fade-in 0.3s ease-out;
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
/* Action bar alignment */
|
|
1251
|
+
.tvw-message-actions-left {
|
|
1252
|
+
justify-content: flex-start;
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
.tvw-message-actions-center {
|
|
1256
|
+
justify-content: center;
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
.tvw-message-actions-right {
|
|
1260
|
+
justify-content: flex-end;
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
/* Hover visibility mode - overlay on desktop */
|
|
1264
|
+
@media (hover: hover) {
|
|
1265
|
+
.tvw-message-actions-hover {
|
|
1266
|
+
/* Hidden by default */
|
|
1267
|
+
opacity: 0;
|
|
1268
|
+
pointer-events: none;
|
|
1269
|
+
transition: opacity 0.15s ease-in-out;
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
/* Pill layout - compact floating pill */
|
|
1273
|
+
.tvw-message-actions-hover.tvw-message-actions-pill {
|
|
1274
|
+
position: absolute;
|
|
1275
|
+
bottom: 0.5rem;
|
|
1276
|
+
margin-top: 0;
|
|
1277
|
+
padding: 0.25rem;
|
|
1278
|
+
border-top: none;
|
|
1279
|
+
width: fit-content;
|
|
1280
|
+
background-color: var(--cw-surface, #ffffff);
|
|
1281
|
+
border: 1px solid var(--cw-divider, #f1f5f9);
|
|
1282
|
+
border-radius: var(--cw-radius-md, 0.75rem);
|
|
1283
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
/* Pill layout - position based on alignment */
|
|
1287
|
+
.tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-left {
|
|
1288
|
+
left: 0.75rem;
|
|
1289
|
+
right: auto;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
.tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-center {
|
|
1293
|
+
left: 50%;
|
|
1294
|
+
right: auto;
|
|
1295
|
+
transform: translateX(-50%);
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
.tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-right {
|
|
1299
|
+
right: 0.75rem;
|
|
1300
|
+
left: auto;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
/* Row layout - full-width bar at bottom */
|
|
1304
|
+
.tvw-message-actions-hover.tvw-message-actions-row {
|
|
1305
|
+
position: absolute;
|
|
1306
|
+
bottom: 0;
|
|
1307
|
+
left: 0;
|
|
1308
|
+
right: 0;
|
|
1309
|
+
margin-top: 0;
|
|
1310
|
+
padding: 0.5rem 0.75rem;
|
|
1311
|
+
border-top: none;
|
|
1312
|
+
background: linear-gradient(
|
|
1313
|
+
to top,
|
|
1314
|
+
var(--cw-surface, #ffffff) 70%,
|
|
1315
|
+
transparent
|
|
1316
|
+
);
|
|
1317
|
+
border-radius: 0 0 var(--cw-radius-lg, 1.5rem) var(--cw-radius-lg, 1.5rem);
|
|
1318
|
+
}
|
|
1319
|
+
|
|
1320
|
+
.vanilla-message-bubble:hover .tvw-message-actions-hover,
|
|
1321
|
+
.vanilla-message-bubble:focus-within .tvw-message-actions-hover {
|
|
1322
|
+
opacity: 1;
|
|
1323
|
+
pointer-events: auto;
|
|
1324
|
+
}
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
/* On touch devices (no hover support), show inline and always visible */
|
|
1328
|
+
@media (hover: none) {
|
|
1329
|
+
.tvw-message-actions-hover {
|
|
1330
|
+
/* Keep normal flow positioning on mobile */
|
|
1331
|
+
position: static;
|
|
1332
|
+
opacity: 1;
|
|
1333
|
+
}
|
|
1334
|
+
}
|
|
1335
|
+
|
|
1336
|
+
/* Action button base styles */
|
|
1337
|
+
.tvw-message-action-btn {
|
|
1338
|
+
display: inline-flex;
|
|
1339
|
+
align-items: center;
|
|
1340
|
+
justify-content: center;
|
|
1341
|
+
width: 28px;
|
|
1342
|
+
height: 28px;
|
|
1343
|
+
padding: 0;
|
|
1344
|
+
border: none;
|
|
1345
|
+
border-radius: 6px;
|
|
1346
|
+
background-color: transparent;
|
|
1347
|
+
color: var(--cw-muted, #6b7280);
|
|
1348
|
+
cursor: pointer;
|
|
1349
|
+
transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
.tvw-message-action-btn:hover {
|
|
1353
|
+
background-color: var(--cw-container, #f8fafc);
|
|
1354
|
+
color: var(--cw-primary, #111827);
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.tvw-message-action-btn:active {
|
|
1358
|
+
transform: scale(0.95);
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
.tvw-message-action-btn:focus {
|
|
1362
|
+
outline: none;
|
|
1363
|
+
box-shadow: 0 0 0 2px var(--cw-accent, #1d4ed8);
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
.tvw-message-action-btn:focus:not(:focus-visible) {
|
|
1367
|
+
box-shadow: none;
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.tvw-message-action-btn:focus-visible {
|
|
1371
|
+
box-shadow: 0 0 0 2px var(--cw-accent, #1d4ed8);
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
/* Active state (voted) */
|
|
1375
|
+
.tvw-message-action-btn.tvw-message-action-active {
|
|
1376
|
+
background-color: var(--cw-accent, #1d4ed8);
|
|
1377
|
+
color: #ffffff;
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1380
|
+
.tvw-message-action-btn.tvw-message-action-active:hover {
|
|
1381
|
+
background-color: var(--cw-accent, #1d4ed8);
|
|
1382
|
+
color: #ffffff;
|
|
1383
|
+
opacity: 0.9;
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1386
|
+
/* Success state (after copy) */
|
|
1387
|
+
.tvw-message-action-btn.tvw-message-action-success {
|
|
1388
|
+
background-color: #10b981;
|
|
1389
|
+
color: #ffffff;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
.tvw-message-action-btn.tvw-message-action-success:hover {
|
|
1393
|
+
background-color: #10b981;
|
|
1394
|
+
color: #ffffff;
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
/* Icon styling within buttons */
|
|
1398
|
+
.tvw-message-action-btn svg {
|
|
1399
|
+
width: 14px;
|
|
1400
|
+
height: 14px;
|
|
1401
|
+
flex-shrink: 0;
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
/* ============================================================================
|
|
1405
|
+
* Feedback UI Components (CSAT/NPS)
|
|
1406
|
+
* ============================================================================ */
|
|
1407
|
+
|
|
1408
|
+
.tvw-feedback-container {
|
|
1409
|
+
background: var(--cw-surface, #ffffff);
|
|
1410
|
+
border: 1px solid var(--cw-border, #e5e7eb);
|
|
1411
|
+
border-radius: var(--tvw-cw-radius-lg, 12px);
|
|
1412
|
+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
1413
|
+
padding: 1.25rem;
|
|
1414
|
+
max-width: 100%;
|
|
1415
|
+
margin: 0.75rem;
|
|
1416
|
+
animation: tvw-feedback-fade-in 0.3s ease-out;
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1419
|
+
@keyframes tvw-feedback-fade-in {
|
|
1420
|
+
from {
|
|
1421
|
+
opacity: 0;
|
|
1422
|
+
transform: translateY(10px);
|
|
1423
|
+
}
|
|
1424
|
+
to {
|
|
1425
|
+
opacity: 1;
|
|
1426
|
+
transform: translateY(0);
|
|
1427
|
+
}
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1430
|
+
.tvw-feedback-content {
|
|
1431
|
+
display: flex;
|
|
1432
|
+
flex-direction: column;
|
|
1433
|
+
gap: 1rem;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
.tvw-feedback-header {
|
|
1437
|
+
text-align: center;
|
|
1438
|
+
}
|
|
1439
|
+
|
|
1440
|
+
.tvw-feedback-title {
|
|
1441
|
+
margin: 0 0 0.25rem 0;
|
|
1442
|
+
font-size: 1rem;
|
|
1443
|
+
font-weight: 600;
|
|
1444
|
+
color: var(--cw-primary, #111827);
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
.tvw-feedback-subtitle {
|
|
1448
|
+
margin: 0;
|
|
1449
|
+
font-size: 0.875rem;
|
|
1450
|
+
color: var(--cw-muted, #6b7280);
|
|
1451
|
+
}
|
|
1452
|
+
|
|
1453
|
+
/* CSAT Star Rating */
|
|
1454
|
+
.tvw-feedback-rating-csat {
|
|
1455
|
+
display: flex;
|
|
1456
|
+
justify-content: center;
|
|
1457
|
+
gap: 0.5rem;
|
|
1458
|
+
}
|
|
1459
|
+
|
|
1460
|
+
.tvw-feedback-star-btn {
|
|
1461
|
+
background: transparent;
|
|
1462
|
+
border: none;
|
|
1463
|
+
cursor: pointer;
|
|
1464
|
+
padding: 0.25rem;
|
|
1465
|
+
color: var(--cw-border, #d1d5db);
|
|
1466
|
+
transition: color 0.2s ease, transform 0.15s ease;
|
|
1467
|
+
}
|
|
1468
|
+
|
|
1469
|
+
.tvw-feedback-star-btn:hover {
|
|
1470
|
+
transform: scale(1.15);
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
.tvw-feedback-star-btn.selected {
|
|
1474
|
+
color: #fbbf24;
|
|
1475
|
+
}
|
|
1476
|
+
|
|
1477
|
+
.tvw-feedback-star-btn .tvw-feedback-star {
|
|
1478
|
+
width: 32px;
|
|
1479
|
+
height: 32px;
|
|
1480
|
+
}
|
|
1481
|
+
|
|
1482
|
+
.tvw-feedback-star-btn.selected .tvw-feedback-star {
|
|
1483
|
+
fill: #fbbf24;
|
|
1484
|
+
}
|
|
1485
|
+
|
|
1486
|
+
/* NPS Number Rating */
|
|
1487
|
+
.tvw-feedback-rating-nps {
|
|
1488
|
+
display: flex;
|
|
1489
|
+
flex-direction: column;
|
|
1490
|
+
gap: 0.5rem;
|
|
1491
|
+
}
|
|
1492
|
+
|
|
1493
|
+
.tvw-feedback-labels {
|
|
1494
|
+
display: flex;
|
|
1495
|
+
justify-content: space-between;
|
|
1496
|
+
font-size: 0.75rem;
|
|
1497
|
+
color: var(--cw-muted, #6b7280);
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
.tvw-feedback-numbers {
|
|
1501
|
+
display: flex;
|
|
1502
|
+
gap: 0.25rem;
|
|
1503
|
+
justify-content: center;
|
|
1504
|
+
}
|
|
1505
|
+
|
|
1506
|
+
.tvw-feedback-number-btn {
|
|
1507
|
+
width: 28px;
|
|
1508
|
+
height: 28px;
|
|
1509
|
+
display: flex;
|
|
1510
|
+
align-items: center;
|
|
1511
|
+
justify-content: center;
|
|
1512
|
+
font-size: 0.75rem;
|
|
1513
|
+
font-weight: 500;
|
|
1514
|
+
border-radius: var(--tvw-cw-radius-sm, 6px);
|
|
1515
|
+
border: 1px solid var(--cw-border, #e5e7eb);
|
|
1516
|
+
background: var(--cw-surface, #ffffff);
|
|
1517
|
+
color: var(--cw-primary, #111827);
|
|
1518
|
+
cursor: pointer;
|
|
1519
|
+
transition: all 0.2s ease;
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
.tvw-feedback-number-btn:hover {
|
|
1523
|
+
border-color: var(--cw-accent, #1d4ed8);
|
|
1524
|
+
background: var(--cw-container, #f3f4f6);
|
|
1525
|
+
}
|
|
1526
|
+
|
|
1527
|
+
.tvw-feedback-number-btn.selected {
|
|
1528
|
+
color: #ffffff;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
/* NPS Color coding */
|
|
1532
|
+
.tvw-feedback-number-btn.tvw-feedback-detractor.selected {
|
|
1533
|
+
background: #ef4444;
|
|
1534
|
+
border-color: #ef4444;
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
.tvw-feedback-number-btn.tvw-feedback-passive.selected {
|
|
1538
|
+
background: #f59e0b;
|
|
1539
|
+
border-color: #f59e0b;
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
.tvw-feedback-number-btn.tvw-feedback-promoter.selected {
|
|
1543
|
+
background: #22c55e;
|
|
1544
|
+
border-color: #22c55e;
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
/* Comment textarea */
|
|
1548
|
+
.tvw-feedback-comment-container {
|
|
1549
|
+
width: 100%;
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1552
|
+
.tvw-feedback-comment {
|
|
1553
|
+
width: 100%;
|
|
1554
|
+
padding: 0.625rem;
|
|
1555
|
+
font-size: 0.875rem;
|
|
1556
|
+
font-family: inherit;
|
|
1557
|
+
border: 1px solid var(--cw-border, #e5e7eb);
|
|
1558
|
+
border-radius: var(--tvw-cw-radius-sm, 6px);
|
|
1559
|
+
background: var(--cw-surface, #ffffff);
|
|
1560
|
+
color: var(--cw-primary, #111827);
|
|
1561
|
+
resize: vertical;
|
|
1562
|
+
box-sizing: border-box;
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
.tvw-feedback-comment:focus {
|
|
1566
|
+
outline: none;
|
|
1567
|
+
border-color: var(--cw-accent, #1d4ed8);
|
|
1568
|
+
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
.tvw-feedback-comment::placeholder {
|
|
1572
|
+
color: var(--cw-muted, #9ca3af);
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1575
|
+
/* Action buttons */
|
|
1576
|
+
.tvw-feedback-actions {
|
|
1577
|
+
display: flex;
|
|
1578
|
+
gap: 0.5rem;
|
|
1579
|
+
justify-content: flex-end;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
.tvw-feedback-btn {
|
|
1583
|
+
padding: 0.5rem 1rem;
|
|
1584
|
+
font-size: 0.875rem;
|
|
1585
|
+
font-weight: 500;
|
|
1586
|
+
border-radius: var(--tvw-cw-radius-sm, 6px);
|
|
1587
|
+
cursor: pointer;
|
|
1588
|
+
transition: all 0.2s ease;
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
.tvw-feedback-btn-skip {
|
|
1592
|
+
background: transparent;
|
|
1593
|
+
border: 1px solid var(--cw-border, #e5e7eb);
|
|
1594
|
+
color: var(--cw-muted, #6b7280);
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
.tvw-feedback-btn-skip:hover {
|
|
1598
|
+
background: var(--cw-container, #f3f4f6);
|
|
1599
|
+
color: var(--cw-primary, #111827);
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
.tvw-feedback-btn-submit {
|
|
1603
|
+
background: var(--cw-accent, #1d4ed8);
|
|
1604
|
+
border: 1px solid var(--cw-accent, #1d4ed8);
|
|
1605
|
+
color: #ffffff;
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1608
|
+
.tvw-feedback-btn-submit:hover:not(:disabled) {
|
|
1609
|
+
opacity: 0.9;
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
.tvw-feedback-btn-submit:disabled {
|
|
1613
|
+
opacity: 0.6;
|
|
1614
|
+
cursor: not-allowed;
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
/* Shake animation for validation */
|
|
1618
|
+
@keyframes tvw-feedback-shake {
|
|
1619
|
+
0%, 100% { transform: translateX(0); }
|
|
1620
|
+
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
|
1621
|
+
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
.tvw-feedback-shake {
|
|
1625
|
+
animation: tvw-feedback-shake 0.5s ease-in-out;
|
|
1626
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-agent",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.23.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",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
],
|
|
53
53
|
"repository": {
|
|
54
54
|
"type": "git",
|
|
55
|
-
"url": "git+https://github.com/becomevocal/
|
|
55
|
+
"url": "git+https://github.com/becomevocal/vanilla-agent.git"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"build": "rimraf dist && npm run build:styles && npm run build:client && npm run build:installer",
|