'+(n?r:Rt(r,!0))+`"+(n?r:Rt(r,!0))+`+${this.parser.parse(e)}+`}html({text:e}){return e}def(e){return""}heading({tokens:e,depth:t}){return`
+`}list(e){let t=e.ordered,n=e.start,s="";for(let o=0;o
${this.parser.parseInline(e)}
+`}table(e){let t="",n="";for(let r=0;r${Rt(e,!0)}`}br(e){return""}del({tokens:e}){return`
An error occurred:
"+Rt(n.message+"",!0)+"";return t?Promise.resolve(s):s}if(t)return Promise.reject(n);throw n}}},fn=new vf;function be(e,t){return fn.parse(e,t)}be.options=be.setOptions=function(e){return fn.setOptions(e),be.defaults=fn.defaults,Ho(be.defaults),be},be.getDefaults=Sr,be.defaults=un,be.use=function(...e){return fn.use(...e),be.defaults=fn.defaults,Ho(be.defaults),be},be.walkTokens=function(e,t){return fn.walkTokens(e,t)},be.parseInline=fn.parseInline,be.Parser=bt,be.parser=bt.parse,be.Renderer=Ls,be.TextRenderer=Or,be.Lexer=mt,be.lexer=mt.lex,be.Tokenizer=Ms,be.Hooks=Yn,be.parse=be,be.options,be.setOptions,be.use,be.walkTokens,be.parseInline,bt.parse,mt.lex;function sl(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,s=Array(t);n
- {{ message.text }} -
+ @@ -110,6 +109,8 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue' import BotIcon from './BotIcon.vue' import { synthesizeTTS } from '../utils/frappe.js' +import { marked } from 'marked' +import DOMPurify from 'dompurify' const props = defineProps({ message: { @@ -126,7 +127,7 @@ const props = defineProps({ enableVoiceChat: false, pollyAvailable: false, usePolly: true, - voiceId: 'Joanna', + voiceId: 'Zayd', }), }, }) @@ -135,6 +136,8 @@ const isSpeaking = ref(false) const currentAudio = ref(null) const isExpanded = ref(false) const isMuted = ref(false) +let ttsTimer = null + const speechSupported = computed(() => ( typeof window !== 'undefined' && @@ -148,11 +151,21 @@ function emitTtsProvider(provider) { detail: { provider }, })) } - function getSpeakableText(raw) { if (typeof raw !== 'string') return '' - if (!raw.includes('<')) return raw.trim() - + // Strip markdown before anything else + const stripped = raw + .replace(/[\u{1F000}-\u{1FFFF}]/gu, '') // emojis block 1 + .replace(/[\u{2600}-\u{26FF}]/gu, '') // emojis block 2 + .replace(/[\u{2700}-\u{27BF}]/gu, '') + .replace(/\*\*(.*?)\*\*/g, '$1') // **bold** + .replace(/\*(.*?)\*/g, '$1') // *italic* + .replace(/`([^`]+)`/g, '$1') // `code` + .replace(/#{1,6}\s+/g, '') // # headings + .replace(/[-*+]\s+/g, '') // • bullet points + .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // [links](url) + .replace(/\s+/g, ' ') + if (!stripped.includes('<')) return stripped.trim() const parser = new DOMParser() const doc = parser.parseFromString(raw, 'text/html') return (doc.body.textContent || '').replace(/\s+/g, ' ').trim() @@ -213,7 +226,7 @@ function speakText(text) { } async function speakTextWithPolly(text) { - const ttsResponse = await synthesizeTTS(text, props.ttsConfig?.voiceId || 'Joanna') + const ttsResponse = await synthesizeTTS(text, props.ttsConfig?.voiceId || 'Zayd') if (!ttsResponse?.ok || !ttsResponse?.audio_base64) { throw new Error(ttsResponse?.error || 'Polly synthesis failed') } @@ -286,6 +299,11 @@ const showMuteButton = computed(() => ( props.ttsConfig?.enableVoiceChat )) +const renderedMessage = computed(() => { + const raw = props.message?.text || '' + return DOMPurify.sanitize(marked.parse(raw)) +}) + watch( () => props.message.text, async (newText, oldText) => { diff --git a/frontend/src/components/ChatbotPopup.vue b/frontend/src/components/ChatbotPopup.vue index 8f1b0c1..fa7cbe3 100644 --- a/frontend/src/components/ChatbotPopup.vue +++ b/frontend/src/components/ChatbotPopup.vue @@ -37,9 +37,11 @@ :ttsConfig="ttsConfig" :settings="settings" :debugEnabled="debugEnabled" + :sendNonERPtoaiEnabled="sendNonERPtoaiEnabled" @toggleAutoRead="$emit('toggleAutoRead')" @togglePollyPreference="$emit('togglePollyPreference')" @toggleDebug="$emit('toggleDebug')" + @toggleSendNonERP="$emit('toggleSendNonERP')" /> @@ -88,6 +90,7 @@ const props = defineProps({ type: Boolean, default: false, }, + sendNonERPtoaiEnabled: { type: Boolean, default: false }, chatHistory: { type: Array, required: true }, debugLogs: { type: Array, required: true }, currentDebug: { type: Object, default: null }, @@ -99,7 +102,7 @@ const props = defineProps({ isAwaitingResponse: { type: Boolean, default: false }, }) -const emit = defineEmits(['close', 'submit', 'cancelResponse', 'update:activeTab', 'toggleAutoRead', 'togglePollyPreference', 'toggleDebug']) +const emit = defineEmits(['close', 'submit', 'cancelResponse', 'update:activeTab', 'toggleAutoRead', 'togglePollyPreference', 'toggleDebug','toggleSendNonERP']) const chatBodyRef = ref(null) const chatFormRef = ref(null) diff --git a/frontend/src/components/SettingsTab.vue b/frontend/src/components/SettingsTab.vue index d4e90ab..363606a 100644 --- a/frontend/src/components/SettingsTab.vue +++ b/frontend/src/components/SettingsTab.vue @@ -81,6 +81,29 @@ +
+
@@ -104,9 +127,13 @@ const props = defineProps({
type: Boolean,
default: false,
},
+sendNonERPtoaiEnabled: {
+ type: Boolean,
+ default: false,
+}
})
-defineEmits(['toggleAutoRead', 'togglePollyPreference', 'toggleDebug'])
+defineEmits(['toggleAutoRead', 'togglePollyPreference', 'toggleDebug','toggleSendNonERP'])
const pollyAvailabilityLabel = computed(() => {
if (!props.ttsConfig?.enableVoiceChat) return 'Voice disabled on server'
diff --git a/frontend/src/tailwind.css b/frontend/src/tailwind.css
index 5d3b11e..818a751 100644
--- a/frontend/src/tailwind.css
+++ b/frontend/src/tailwind.css
@@ -20,10 +20,14 @@
}
@keyframes dot-wave {
- 0%, 60%, 100% {
+
+ 0%,
+ 60%,
+ 100% {
transform: translateY(0);
opacity: 0.35;
}
+
30% {
transform: translateY(-5px);
opacity: 1;
@@ -35,6 +39,7 @@
transform: rotate(0deg);
opacity: 0.65;
}
+
100% {
transform: rotate(360deg);
opacity: 1;
@@ -42,11 +47,13 @@
}
@keyframes gemini-spark {
+
0%,
100% {
transform: scale(0.78);
opacity: 0.72;
}
+
50% {
transform: scale(1.04);
opacity: 1;
@@ -54,11 +61,13 @@
}
@keyframes think-pulse {
+
0%,
100% {
transform: scale(0.72);
opacity: 0.35;
}
+
45% {
transform: scale(1.08);
opacity: 1;
@@ -69,6 +78,7 @@
0% {
background-position: 0% 50%;
}
+
100% {
background-position: 200% 50%;
}
@@ -79,12 +89,15 @@
transform: translate(-130%, -50%);
opacity: 0;
}
+
20% {
opacity: 0.8;
}
+
80% {
opacity: 0.8;
}
+
100% {
transform: translate(460%, -50%);
opacity: 0;
@@ -92,10 +105,12 @@
}
@keyframes soft-float {
+
0%,
100% {
transform: translateY(0);
}
+
50% {
transform: translateY(-4px);
}
@@ -106,6 +121,7 @@
opacity: 0;
transform: translateY(10px) scale(0.98);
}
+
to {
opacity: 1;
transform: translateY(0) scale(1);
@@ -117,6 +133,7 @@
opacity: 0;
transform: translateY(8px);
}
+
to {
opacity: 1;
transform: translateY(0);
@@ -124,11 +141,13 @@
}
@keyframes stop-button-pulse {
+
0%,
100% {
transform: scale(0.94);
opacity: 0.92;
}
+
50% {
transform: scale(1);
opacity: 1;
@@ -136,6 +155,7 @@
}
@layer base {
+
#changai-chatbot-root,
#changai-chatbot-root * {
box-sizing: border-box;
@@ -160,6 +180,46 @@
background-clip: padding-box;
}
+ #changai-chatbot-root .chat-card strong {
+ font-weight: 700;
+ }
+
+ #changai-chatbot-root .chat-card em {
+ font-style: italic;
+ }
+
+ #changai-chatbot-root .chat-card p {
+ margin-bottom: 0.4rem;
+ }
+
+ #changai-chatbot-root .chat-card p:last-child {
+ margin-bottom: 0;
+ }
+
+ #changai-chatbot-root .chat-card ul {
+ list-style: disc;
+ padding-inline-start: 1.25rem;
+ margin-bottom: 0.4rem;
+ }
+
+ #changai-chatbot-root .chat-card ol {
+ list-style: decimal;
+ padding-inline-start: 1.25rem;
+ margin-bottom: 0.4rem;
+ }
+
+ #changai-chatbot-root .chat-card li {
+ margin-bottom: 0.15rem;
+ }
+
+ #changai-chatbot-root .chat-card code {
+ font-family: monospace;
+ font-size: 0.8em;
+ background: rgba(109, 79, 194, 0.08);
+ padding: 0.1em 0.35em;
+ border-radius: 4px;
+ }
+
#changai-chatbot-root button.rounded-full,
#changai-chatbot-root form.rounded-full {
border-radius: 9999px;
@@ -212,6 +272,7 @@
}
@media (prefers-reduced-motion: reduce) {
+
#changai-chatbot-root *,
#changai-chatbot-root *::before,
#changai-chatbot-root *::after {
@@ -221,4 +282,4 @@
scroll-behavior: auto !important;
}
}
-}
+}
\ No newline at end of file
diff --git a/frontend/src/utils/frappe.js b/frontend/src/utils/frappe.js
index 40585aa..1fd57fd 100644
--- a/frontend/src/utils/frappe.js
+++ b/frontend/src/utils/frappe.js
@@ -33,14 +33,15 @@ export function frappeCall(method, args = {}, mode = 'actual') {
})
}
-export function runPipeline(userQuestion, chatId, mode = 'actual', requestId = null) {
+export function runPipeline(userQuestion, chatId, mode = 'actual', requestId = null, sendNonErptoAI) {
return frappeCall(API.PIPELINE, {
user_question: userQuestion,
chat_id: chatId,
request_id: requestId,
+ sendNonErptoAI: sendNonErptoAI,
}, mode)
}
-export function runPipelineCancelable(userQuestion, chatId, mode = 'actual', requestId = null) {
+export function runPipelineCancelable(userQuestion, chatId, mode = 'actual', requestId = null, sendNonErptoAI) {
if (mode === 'test') {
return {
promise: Promise.resolve({
@@ -48,6 +49,7 @@ export function runPipelineCancelable(userQuestion, chatId, mode = 'actual', req
user_question: userQuestion,
chat_id: chatId,
request_id: requestId,
+ sendNonErptoAI: sendNonErptoAI,
})}`
}),
cancel: () => false,
@@ -71,6 +73,7 @@ export function runPipelineCancelable(userQuestion, chatId, mode = 'actual', req
user_question: userQuestion,
chat_id: chatId,
request_id: requestId,
+ sendNonErptoAI: sendNonErptoAI,
},
callback(r) {
settled = true
@@ -102,7 +105,7 @@ export function getSettingsDetails(mode = 'actual') {
return frappeCall(API.SETTINGS, {}, mode)
}
-export function synthesizeTTS(text, voiceId = 'Joanna', mode = 'actual') {
+export function synthesizeTTS(text, voiceId = 'Zayd', mode = 'actual') {
return frappeCall(API.TTS, {
text,
voice_id: voiceId,
+
+
+
+
+ Send non-ERP questions directly to AI
+Questions unrelated to your ERP will skip the system and go straight to AI
++ {{ sendNonERPtoaiEnabled ? 'Non-ERP questions are now routed directly to AI' : 'Direct AI routing is currently off' }} +
+