@crestapps/ai-chat-ui 1.0.0-preview.7 → 1.0.0-preview.9
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/dist/ai-chat.css +362 -0
- package/dist/ai-chat.css.map +1 -0
- package/dist/ai-chat.js +244 -131
- package/dist/ai-chat.js.map +1 -1
- package/dist/ai-chat.min.css +1 -0
- package/dist/ai-chat.min.js +1 -1
- package/dist/ai-chat.min.js.map +1 -1
- package/dist/chat-interaction.js +9 -9
- package/dist/chat-interaction.js.map +1 -1
- package/dist/chat-interaction.min.js +1 -1
- package/dist/chat-interaction.min.js.map +1 -1
- package/dist/chat-widget.css +104 -3
- package/dist/chat-widget.css.map +1 -1
- package/dist/chat-widget.min.css +1 -1
- package/package.json +4 -1
package/dist/chat-interaction.js
CHANGED
|
@@ -30,8 +30,8 @@ window.chatInteractionManager = function () {
|
|
|
30
30
|
downloadChartButtonText: 'Download',
|
|
31
31
|
codeCopiedText: 'Copied!',
|
|
32
32
|
assistantLabel: 'Assistant',
|
|
33
|
-
messageTemplate: "\n <div class=\"ai-chat-messages\">\n <div v-for=\"(message, index) in messages\" :key=\"index\" class=\"ai-chat-message-item\">\n <div>\n <div v-if=\"message.role === 'user'\" class=\"ai-chat-msg-role ai-chat-msg-role-user\">You</div>\n <div v-else-if=\"message.role !== 'indicator'\" :class=\"getAssistantRoleClasses(message)\">\n <span :class=\"getAssistantIconClasses(message, index)\"><
|
|
34
|
-
indicatorTemplate: "\n <div class=\"ai-chat-msg-role ai-chat-msg-role-assistant\">\n <span class=\"ai-streaming-icon\"><
|
|
33
|
+
messageTemplate: "\n <div class=\"ai-chat-messages\">\n <div v-for=\"(message, index) in messages\" :key=\"index\" class=\"ai-chat-message-item\">\n <div>\n <div v-if=\"message.role === 'user'\" class=\"ai-chat-msg-role ai-chat-msg-role-user\">You</div>\n <div v-else-if=\"message.role !== 'indicator'\" :class=\"getAssistantRoleClasses(message)\">\n <span :class=\"getAssistantIconClasses(message, index)\"><span :class=\"getAssistantIcon(message)\"></span></span>\n {{ getAssistantLabel(message) }}\n </div>\n <div class=\"ai-chat-message-body lh-base\">\n <h4 v-if=\"message.title\">{{ message.title }}</h4>\n <div v-html=\"message.htmlContent\"></div>\n <span class=\"message-buttons-container\" v-if=\"!isIndicator(message)\">\n <button v-if=\"textToSpeechEnabled && !isConversationMode && message.role === 'assistant' && !message.isStreaming\" class=\"btn btn-sm btn-link text-secondary p-0 me-1 button-message-toolbox\" :class=\"{ 'tts-playing': ttsPlayingMessageIndex === index }\" @click=\"toggleMessageTts(message, index)\" :title=\"ttsPlayingMessageIndex === index ? 'Pause audio' : 'Read aloud'\">\n <span :class=\"ttsPlayingMessageIndex === index ? 'fa-solid fa-circle-pause' : 'fa-solid fa-circle-play'\"></span>\n </button>\n <button class=\"btn btn-sm btn-link text-secondary p-0 button-message-toolbox\" @click=\"copyResponse(message.content)\" title=\"Click here to copy response to clipboard.\">\n <span class=\"fa-solid fa-copy\"></span>\n </button>\n </span>\n </div>\n </div>\n </div>\n <div v-for=\"notification in notifications\" :key=\"'notif-' + notification.type\" class=\"ai-chat-notification\" :class=\"'ai-chat-notification-' + (notification.type || 'info') + ' ' + (notification.cssClass || '')\">\n <div class=\"ai-chat-notification-content\">\n <span v-if=\"notification.icon\" :class=\"notification.icon\" class=\"ai-chat-notification-icon\"></span>\n <span class=\"ai-chat-notification-text\">{{ notification.content }}</span>\n <button v-if=\"notification.dismissible\" class=\"btn btn-sm btn-link p-0 ms-2 ai-chat-notification-dismiss\" @click=\"dismissNotification(notification.type)\" title=\"Dismiss\">\n <span class=\"fa-solid fa-xmark\"></span>\n </button>\n </div>\n <div v-if=\"notification.actions && notification.actions.length\" class=\"ai-chat-notification-actions\">\n <button v-for=\"action in notification.actions\" :key=\"action.name\" class=\"btn btn-sm\" :class=\"action.cssClass || 'btn-outline-secondary'\" @click=\"handleNotificationAction(notification.type, action.name)\">\n <span v-if=\"action.icon\" :class=\"action.icon\" class=\"me-1\"></span>\n {{ action.label }}\n </button>\n </div>\n </div>\n </div>\n ",
|
|
34
|
+
indicatorTemplate: "\n <div class=\"ai-chat-msg-role ai-chat-msg-role-assistant\">\n <span class=\"ai-streaming-icon\"><span class=\"fa fa-robot\" style=\"display: inline-block;\"></span></span>\n Assistant\n </div>\n ",
|
|
35
35
|
// Localizable strings
|
|
36
36
|
untitledText: 'Untitled',
|
|
37
37
|
clearHistoryTitle: 'Clear History',
|
|
@@ -86,7 +86,7 @@ window.chatInteractionManager = function () {
|
|
|
86
86
|
highlighted = escapeHtmlEntities(code);
|
|
87
87
|
}
|
|
88
88
|
var langDisplay = lang ? escapeHtmlEntities(lang) : 'code';
|
|
89
|
-
return "<div class=\"ai-code-block\"><div class=\"ai-code-header\"><span class=\"ai-code-lang\"><
|
|
89
|
+
return "<div class=\"ai-code-block\"><div class=\"ai-code-header\"><span class=\"ai-code-lang\"><span class=\"fa-solid fa-code\"></span> ".concat(langDisplay, "</span><button type=\"button\" class=\"ai-code-copy-btn\" title=\"Copy code\"><span class=\"fa-regular fa-copy\"></span></button></div><pre><code class=\"hljs").concat(lang ? ' language-' + lang : '', "\">").concat(highlighted, "</code></pre></div>");
|
|
90
90
|
};
|
|
91
91
|
|
|
92
92
|
// Custom image renderer for generated images with thumbnail styling and download button.
|
|
@@ -96,7 +96,7 @@ window.chatInteractionManager = function () {
|
|
|
96
96
|
if (!src) return '';
|
|
97
97
|
var alt = data.text || defaultConfig.generatedImageAltText;
|
|
98
98
|
var maxWidth = defaultConfig.generatedImageMaxWidth;
|
|
99
|
-
return "<div class=\"generated-image-container\">\n <img src=\"".concat(src, "\" alt=\"").concat(alt, "\" class=\"img-thumbnail\" style=\"max-width: ").concat(maxWidth, "px; height: auto;\" />\n <div class=\"mt-2\">\n <a href=\"").concat(src, "\" target=\"_blank\" download=\"").concat(alt, "\" title=\"").concat(defaultConfig.downloadImageTitle, "\" class=\"btn btn-sm btn-outline-secondary ai-download-image\">\n <
|
|
99
|
+
return "<div class=\"generated-image-container\">\n <img src=\"".concat(src, "\" alt=\"").concat(alt, "\" class=\"img-thumbnail\" style=\"max-width: ").concat(maxWidth, "px; height: auto;\" />\n <div class=\"mt-2\">\n <a href=\"").concat(src, "\" target=\"_blank\" download=\"").concat(alt, "\" title=\"").concat(defaultConfig.downloadImageTitle, "\" class=\"btn btn-sm btn-outline-secondary ai-download-image\">\n <span class=\"fa-solid fa-download\"></span>\n </a>\n </div>\n </div>");
|
|
100
100
|
};
|
|
101
101
|
|
|
102
102
|
// Chart counter for unique IDs
|
|
@@ -108,7 +108,7 @@ window.chatInteractionManager = function () {
|
|
|
108
108
|
// Global chart config map shared with ai-chat.js
|
|
109
109
|
window.__chartConfigs = window.__chartConfigs || {};
|
|
110
110
|
function createChartHtml(chartId) {
|
|
111
|
-
return "<div class=\"chart-container\" style=\"position: relative; width: 100%; max-width: 560px; min-height: 420px;\">" + "<canvas id=\"".concat(chartId, "\"></canvas>") + "</div>" + "<div class=\"mt-2\">" + "<button type=\"button\" class=\"btn btn-sm btn-outline-secondary download-chart-btn\" data-chart-id=\"".concat(chartId, "\" title=\"").concat(defaultConfig.downloadChartTitle, "\">") + "<
|
|
111
|
+
return "<div class=\"chart-container\" style=\"position: relative; width: 100%; max-width: 560px; min-height: 420px;\">" + "<canvas id=\"".concat(chartId, "\"></canvas>") + "</div>" + "<div class=\"mt-2\">" + "<button type=\"button\" class=\"btn btn-sm btn-outline-secondary download-chart-btn\" data-chart-id=\"".concat(chartId, "\" title=\"").concat(defaultConfig.downloadChartTitle, "\">") + "<span class=\"fa-solid fa-download\"></span> ".concat(defaultConfig.downloadChartButtonText) + "</button>" + "</div>";
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
// Register [chart:{...json...}] as a native marked block extension so the
|
|
@@ -1738,9 +1738,9 @@ window.chatInteractionManager = function () {
|
|
|
1738
1738
|
if (codeEl) {
|
|
1739
1739
|
navigator.clipboard.writeText(codeEl.textContent);
|
|
1740
1740
|
var copiedText = config.codeCopiedText || 'Copied!';
|
|
1741
|
-
btn.innerHTML = '<
|
|
1741
|
+
btn.innerHTML = '<span class="fa-solid fa-check"></span> ' + copiedText;
|
|
1742
1742
|
setTimeout(function () {
|
|
1743
|
-
btn.innerHTML = '<
|
|
1743
|
+
btn.innerHTML = '<span class="fa-regular fa-copy"></span>';
|
|
1744
1744
|
}, 2000);
|
|
1745
1745
|
}
|
|
1746
1746
|
});
|
|
@@ -2028,10 +2028,10 @@ window.chatInteractionManager = function () {
|
|
|
2028
2028
|
}
|
|
2029
2029
|
if (this.isRecording) {
|
|
2030
2030
|
this.micButton.classList.add('stt-recording');
|
|
2031
|
-
this.micButton.innerHTML = '<
|
|
2031
|
+
this.micButton.innerHTML = '<span class="fa-solid fa-stop"></span>';
|
|
2032
2032
|
} else {
|
|
2033
2033
|
this.micButton.classList.remove('stt-recording');
|
|
2034
|
-
this.micButton.innerHTML = '<
|
|
2034
|
+
this.micButton.innerHTML = '<span class="fa-solid fa-microphone"></span>';
|
|
2035
2035
|
}
|
|
2036
2036
|
}
|
|
2037
2037
|
},
|