diff --git a/apps/application/template/embed.js b/apps/application/template/embed.js index 2d671b63b27..16b814a1dc3 100644 --- a/apps/application/template/embed.js +++ b/apps/application/template/embed.js @@ -1,25 +1,25 @@ const guideHtml=` -
-
+
+
-
-
- +
+
+
-
🌟 遇见问题，不再是障碍！
+
🌟 遇见问题，不再是障碍！

你好，我是你的智能小助手。
点我，开启高效解答模式，让问题变成过去式。

-
+
- +
` const chatButtonHtml= -`
+`
@@ -48,13 +48,13 @@ const chatButtonHtml= const getChatContainerHtml=(protocol,host,token)=>{ - return `
- -
-
- + return `
+ +
+
+
-
+
` @@ -65,11 +65,11 @@ const getChatContainerHtml=(protocol,host,token)=>{ */ const initGuide=(root)=>{ root.insertAdjacentHTML("beforeend",guideHtml) - const button=root.querySelector(".button") - const close_icon=root.querySelector('.close') + const button=root.querySelector(".maxkb-button") + const close_icon=root.querySelector('.maxkb-close') const close_func=()=>{ - root.removeChild(root.querySelector('.tips')) - root.removeChild(root.querySelector('.mask')) + root.removeChild(root.querySelector('.maxkb-tips')) + root.removeChild(root.querySelector('.maxkb-mask')) localStorage.setItem('maxkbMaskTip',true) } button.onclick=close_func @@ -81,27 +81,27 @@ const initChat=(root)=>{ // 添加对话框 root.insertAdjacentHTML('beforeend',getChatContainerHtml('{{protocol}}','{{host}}','{{token}}')) // 按钮元素 - const chat_button=root.querySelector('.chat_button') + const chat_button=root.querySelector('.maxkb-chat-button') // 对话框元素 - const chat_container=root.querySelector('#chat_container') + const chat_container=root.querySelector('#maxkb-chat-container') - const viewport=root.querySelector('.openviewport') - const closeviewport=root.querySelector('.closeviewport') + const viewport=root.querySelector('.maxkb-openviewport') + const closeviewport=root.querySelector('.maxkb-closeviewport') const close_func=()=>{ chat_container.style['display']=chat_container.style['display']=='block'?'none':'block' } - close_icon=chat_container.querySelector('.close') + close_icon=chat_container.querySelector('.maxkb-chat-close') chat_button.onclick = close_func close_icon.onclick=close_func const viewport_func=()=>{ - if(chat_container.classList.contains('enlarge')){ - chat_container.classList.remove("enlarge"); - viewport.classList.remove('viewportnone') - closeviewport.classList.add('viewportnone') + if(chat_container.classList.contains('maxkb-enlarge')){ + chat_container.classList.remove("maxkb-enlarge"); + viewport.classList.remove('maxkb-viewportnone') + closeviewport.classList.add('maxkb-viewportnone') }else{ - chat_container.classList.add("enlarge"); - viewport.classList.add('viewportnone') - closeviewport.classList.remove('viewportnone') + chat_container.classList.add("maxkb-enlarge"); + viewport.classList.add('maxkb-viewportnone') + closeviewport.classList.remove('maxkb-viewportnone') } } viewport.onclick=viewport_func @@ -131,14 +131,14 @@ function initMaxkbStyle(root){ style.type='text/css' style.innerText= ` @scope {/* 放大 */ - #maxkb .enlarge { + #maxkb .maxkb-enlarge { width: 50%!important; height: 100%!important; bottom: 0!important; right: 0 !important; } @media only screen and (max-width: 768px){ - #maxkb .enlarge { + #maxkb .maxkb-enlarge { width: 100%!important; height: 100%!important; right: 0 !important; @@ -148,7 +148,7 @@ function initMaxkbStyle(root){ /* 引导 */ - #maxkb .mask { + #maxkb .maxkb-mask { position: fixed; z-index: 999; background-color: transparent; @@ -157,7 +157,7 @@ function initMaxkbStyle(root){ top: 0; left: 0; } - #maxkb .mask .content { + #maxkb .maxkb-mask .maxkb-content { width: 45px; height: 50px; box-shadow: 1px 1px 1px 2000px rgba(0,0,0,.6); @@ -167,7 +167,7 @@ function initMaxkbStyle(root){ bottom: 42px; z-index: 1000; } - #maxkb .tips { + #maxkb .maxkb-tips { position: fixed; bottom: 30px; right: 60px; @@ -178,7 +178,7 @@ function initMaxkbStyle(root){ background: #3370FF; z-index: 1000; } - #maxkb .tips .arrow { + #maxkb .maxkb-tips .maxkb-arrow { position: absolute; background: #3370FF; width: 10px; @@ -192,16 +192,16 @@ function initMaxkbStyle(root){ border-left-color: transparent; border-bottom-color: transparent } - #maxkb .tips .title { + #maxkb .maxkb-tips .maxkb-title { font-size: 20px; font-weight: 500; margin-bottom: 8px; } - #maxkb .tips .button { + #maxkb .maxkb-tips .maxkb-button { text-align: right; margin-top: 24px; } - #maxkb .tips .button button { + #maxkb .maxkb-tips .maxkb-button maxkb-button { border-radius: 4px; background: #FFF; padding: 3px 12px; @@ -210,36 +210,36 @@ function initMaxkbStyle(root){ outline: none; border: none; } - #maxkb .tips .button button::after{ + #maxkb .maxkb-tips .maxkb-button button::after{ border: none; } - #maxkb .tips .close { + #maxkb .maxkb-tips .maxkb-close { position: absolute; right: 20px; top: 20px; cursor: pointer; } - #chat_container { + #maxkb-chat-container { width: 420px; height: 600px; display:none; } @media only screen and (max-width: 768px) { - #chat_container { + #maxkb-chat-container { width: 100%; height: 70%; right: 0 !important; } } - #maxkb .chat_button{ + #maxkb .maxkb-chat-button{ position: fixed; bottom: 30px; right: 0; cursor: pointer; } - #maxkb #chat_container{ + #maxkb #maxkb-chat-container{ z-index:10000;position: relative; border-radius: 8px; border: 1px solid var(--N300, #DEE0E3); @@ -247,33 +247,33 @@ function initMaxkbStyle(root){ box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.10); position: fixed;bottom: 20px;right: 45px;overflow: hidden; } - #maxkb #chat_container .chat_close{ + #maxkb #maxkb-chat-container .maxkb-chat-close{ position: absolute; top: 15px; right: 10px; cursor: pointer; } - #maxkb #chat_container .openviewport{ + #maxkb #maxkb-chat-container .maxkb-openviewport{ position: absolute; top: 15px; right: 50px; cursor: pointer; } - #maxkb #chat_container .closeviewport{ + #maxkb #maxkb-chat-container .maxkb-closeviewport{ position: absolute; top: 15px; right: 50px; cursor: pointer; } - #maxkb #chat_container .viewportnone{ + #maxkb #maxkb-chat-container .maxkb-viewportnone{ display:none; } - #maxkb #chat_container #chat{ + #maxkb #maxkb-chat-container #maxkb-chat{ height:100%; width:100%; border: none; } - #maxkb #chat_container { + #maxkb #maxkb-chat-container { animation: appear .4s ease-in-out; } @keyframes appear { diff --git a/ui/public/embeb.js b/ui/public/embeb.js index 54f648cae02..84da204d6de 100644 --- a/ui/public/embeb.js +++ b/ui/public/embeb.js @@ -7,27 +7,27 @@ function auth(token, protocol, host) { } const guideHtml=` -
-
+
+
-
-
- +
+
+
-
🌟 遇见问题，不再是障碍！
+
🌟 遇见问题，不再是障碍！

你好，我是你的智能小助手。
点我，开启高效解答模式，让问题变成过去式。

-
+
- +
` const chatButtonHtml= -`
+`
@@ -56,13 +56,13 @@ const chatButtonHtml= const getChatContainerHtml=(protocol,host,token)=>{ - return `
- -
-
- + return `
+ +
+
+
-
+
` @@ -73,11 +73,11 @@ const getChatContainerHtml=(protocol,host,token)=>{ */ const initGuide=(root)=>{ root.insertAdjacentHTML("beforeend",guideHtml) - const button=root.querySelector(".button") - const close_icon=root.querySelector('.close') + const button=root.querySelector(".maxkb-button") + const close_icon=root.querySelector('.maxkb-close') const close_func=()=>{ - root.removeChild(root.querySelector('.tips')) - root.removeChild(root.querySelector('.mask')) + root.removeChild(root.querySelector('.maxkb-tips')) + root.removeChild(root.querySelector('.maxkb-mask')) localStorage.setItem('maxkbMaskTip',true) } button.onclick=close_func @@ -89,27 +89,27 @@ const initChat=(root)=>{ // 添加对话框 root.insertAdjacentHTML('beforeend',getChatContainerHtml(window.maxkbChatConfig.protocol,window.maxkbChatConfig.host,window.maxkbChatConfig.token)) // 按钮元素 - const chat_button=root.querySelector('.chat_button') + const chat_button=root.querySelector('.maxkb-chat-button') // 对话框元素 - const chat_container=root.querySelector('#chat_container') + const chat_container=root.querySelector('#maxkb-chat-container') - const viewport=root.querySelector('.openviewport') - const closeviewport=root.querySelector('.closeviewport') + const viewport=root.querySelector('.maxkb-openviewport') + const closeviewport=root.querySelector('.maxkb-closeviewport') const close_func=()=>{ chat_container.style['display']=chat_container.style['display']=='block'?'none':'block' } - close_icon=chat_container.querySelector('.close') + close_icon=chat_container.querySelector('.maxkb-close') chat_button.onclick = close_func close_icon.onclick=close_func const viewport_func=()=>{ - if(chat_container.classList.contains('enlarge')){ - chat_container.classList.remove("enlarge"); - viewport.classList.remove('viewportnone') - closeviewport.classList.add('viewportnone') + if(chat_container.classList.contains('maxkb-enlarge')){ + chat_container.classList.remove("maxkb-enlarge"); + viewport.classList.remove('maxkb-viewportnone') + closeviewport.classList.add('maxkb-viewportnone') }else{ - chat_container.classList.add("enlarge"); - viewport.classList.add('viewportnone') - closeviewport.classList.remove('viewportnone') + chat_container.classList.add("maxkb-enlarge"); + viewport.classList.add('maxkb-viewportnone') + closeviewport.classList.remove('maxkb-viewportnone') } } viewport.onclick=viewport_func @@ -139,14 +139,14 @@ function initMaxkbStyle(root){ style.type='text/css' style.innerText= ` @scope {/* 放大 */ - #maxkb .enlarge { + #maxkb .maxkb-enlarge { width: 50%!important; height: 100%!important; bottom: 0!important; right: 0 !important; } @media only screen and (max-width: 768px){ - #maxkb .enlarge { + #maxkb .maxkb-enlarge { width: 100%!important; height: 100%!important; right: 0 !important; @@ -156,7 +156,7 @@ function initMaxkbStyle(root){ /* 引导 */ - #maxkb .mask { + #maxkb .maxkb-mask { position: fixed; z-index: 999; background-color: transparent; @@ -165,7 +165,7 @@ function initMaxkbStyle(root){ top: 0; left: 0; } - #maxkb .mask .content { + #maxkb .maxkb-mask .maxkb-content { width: 45px; height: 50px; box-shadow: 1px 1px 1px 2000px rgba(0,0,0,.6); @@ -175,7 +175,7 @@ function initMaxkbStyle(root){ bottom: 42px; z-index: 1000; } - #maxkb .tips { + #maxkb .maxkb-tips { position: fixed; bottom: 30px; right: 60px; @@ -186,7 +186,7 @@ function initMaxkbStyle(root){ background: #3370FF; z-index: 1000; } - #maxkb .tips .arrow { + #maxkb .maxkb-tips .maxkb-arrow { position: absolute; background: #3370FF; width: 10px; @@ -200,16 +200,16 @@ function initMaxkbStyle(root){ border-left-color: transparent; border-bottom-color: transparent } - #maxkb .tips .title { + #maxkb .maxkb-tips .maxkb-title { font-size: 20px; font-weight: 500; margin-bottom: 8px; } - #maxkb .tips .button { + #maxkb .maxkb-tips .maxkb-button { text-align: right; margin-top: 24px; } - #maxkb .tips .button button { + #maxkb .maxkb-tips .maxkb-button button { border-radius: 4px; background: #FFF; padding: 3px 12px; @@ -218,36 +218,36 @@ function initMaxkbStyle(root){ outline: none; border: none; } - #maxkb .tips .button button::after{ + #maxkb .maxkb-tips .maxkb-button button::after{ border: none; } - #maxkb .tips .close { + #maxkb .maxkb-tips .maxkb-close { position: absolute; right: 20px; top: 20px; cursor: pointer; } - #chat_container { + #maxkb-chat-container { width: 420px; height: 600px; display:none; } @media only screen and (max-width: 768px) { - #chat_container { + #maxkb-chat-container { width: 100%; height: 70%; right: 0 !important; } } - #maxkb .chat_button{ + #maxkb .maxkb-chat-button{ position: fixed; bottom: 30px; right: 0; cursor: pointer; } - #maxkb #chat_container{ + #maxkb #maxkb-chat-container{ z-index:10000;position: relative; border-radius: 8px; border: 1px solid var(--N300, #DEE0E3); @@ -255,33 +255,33 @@ function initMaxkbStyle(root){ box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.10); position: fixed;bottom: 20px;right: 45px;overflow: hidden; } - #maxkb #chat_container .chat_close{ + #maxkb #maxkb-chat-container .maxkb-chat-close{ position: absolute; top: 15px; right: 10px; cursor: pointer; } - #maxkb #chat_container .openviewport{ + #maxkb #maxkb-chat-container .maxkb-openviewport{ position: absolute; top: 15px; right: 50px; cursor: pointer; } - #maxkb #chat_container .closeviewport{ + #maxkb #maxkb-chat-container .maxkb-closeviewport{ position: absolute; top: 15px; right: 50px; cursor: pointer; } - #maxkb #chat_container .viewportnone{ + #maxkb #maxkb-chat-container .maxkb-viewportnone{ display:none; } - #maxkb #chat_container #chat{ + #maxkb #maxkb-chat-container #maxkb-chat{ height:100%; width:100%; border: none; } - #maxkb #chat_container { + #maxkb #maxkb-chat-container { animation: appear .4s ease-in-out; } @keyframes appear { diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue index ba7abb5f326..b03a995ab98 100644 --- a/ui/src/components/ai-chat/index.vue +++ b/ui/src/components/ai-chat/index.vue @@ -181,6 +181,7 @@ import useStore from '@/stores' import MdRenderer from '@/components/markdown-renderer/MdRenderer.vue' import { MdPreview } from 'md-editor-v3' import { MsgError } from '@/utils/message' +import { debounce } from 'lodash' defineOptions({ name: 'AiChat' }) const route = useRoute() const { @@ -266,15 +267,20 @@ function openParagraph(row: any, id?: string) { } function quickProblemHandel(val: string) { - if (!props.log) { + if (!props.log && !loading.value) { // inputValue.value = val // nextTick(() => { // quickInputRef.value?.focus() // }) - chatMessage(null, val) + + handleDebounceClick(val) } } +const handleDebounceClick = debounce((val) => { + chatMessage(null, val) +}, 200) + function sendChatHandle(event: any) { if (!event.ctrlKey) { // 如果没有按下组合键ctrl，则会阻止默认事件