From bd6348a25ae866bce070111c017e82e10125c618 Mon Sep 17 00:00:00 2001 From: Thomas Hansen Date: Wed, 27 Sep 2023 18:33:18 +0300 Subject: [PATCH] Inline embed support --- .../system/openai/front.files/chat/default.js | 11 +- .../chat/scandinavian-chocolate-inline.css | 427 ++++++++++++++++++ .../system/openai/include-javascript.get.hl | 6 + 3 files changed, 442 insertions(+), 2 deletions(-) create mode 100644 backend/files/system/openai/front.files/chat/scandinavian-chocolate-inline.css diff --git a/backend/files/system/openai/front.files/chat/default.js b/backend/files/system/openai/front.files/chat/default.js index 208cc5c297..408b727b84 100644 --- a/backend/files/system/openai/front.files/chat/default.js +++ b/backend/files/system/openai/front.files/chat/default.js @@ -71,7 +71,6 @@ let ainiroUserId = null; // Downloading ShowdownJS to be able to parse Markdown. let hasDownloadedShowdownHighlight = false; - // Creating CSS inclusion. fetch('[[url]]/magic/system/openai/include-style?file=' + encodeURIComponent('[[css]]')) .then(res => { @@ -109,6 +108,9 @@ window.ainiro_faq_question = function(e) { e.stopPropagation(); } +// This is the parent DOM element of the chat window, if null, it is embedded into body. +let ainiroParentElement = '[[parent_node]]'; + /* * Function creating our chat UI. */ @@ -152,7 +154,12 @@ function aista_create_chat_ui() { } html += ''; aistaChatWnd.innerHTML = html; - window.document.body.appendChild(aistaChatWnd); + if (ainiroParentElement && ainiroParentElement !== '') { + document.getElementById(ainiroParentElement).appendChild(aistaChatWnd); + aista_show_chat_window(); + } else { + window.document.body.appendChild(aistaChatWnd); + } // Adding event listener to input field to allow for closing it with escape key. const aistaChatInpField = document.getElementsByClassName('aista-chat-prompt')[0]; diff --git a/backend/files/system/openai/front.files/chat/scandinavian-chocolate-inline.css b/backend/files/system/openai/front.files/chat/scandinavian-chocolate-inline.css new file mode 100644 index 0000000000..4f5e2b3ba6 --- /dev/null +++ b/backend/files/system/openai/front.files/chat/scandinavian-chocolate-inline.css @@ -0,0 +1,427 @@ + +/* + * Default CSS style for OpenAI chat inclusion. + */ + @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'); +.grecaptcha-badge { + opacity:0 !important; +} +.aista-chat-btn, +.aista-chat-btn i, +.aista-chat-wnd, +.aista-chat-header, +.aista-chat-msg-container, +.aista-chat-answer, +.aista-chat-answer p, +.aista-chat-answer img, +.aista-chat-answer a, +.aista-chat-answer ul, +.aista-chat-answer ol, +.aista-chat-answer li, +.aista-chat-close-btn, +.aista-chat-prompt, +.aista-chat-close-btn i { + all:revert; +} +.aista-chat-btn i, +.aista-chat-close-btn i { + font-style: normal; +} +.aista-chat-btn { + position: fixed; + bottom: 10px; + right: 10px; + border-radius: 23px !important; + border: none !important; + padding: 15px 35px; + font-size: 14px; + z-index: 100000; + color: #fcfeff !important; + cursor: pointer !important; + font-weight: bold !important; + border: solid 1px #2b1700; + font-family: Roboto !important; + text-align: center; + text-decoration: none !important; + font-family: Arial, Helvetica, sans-serif; + box-shadow: 3px 3px 5px rgba(0,0,0,.2); + background: linear-gradient(#2b1700, #2b1700); + background-size: 1px 100px; + transition: background-position .25s ease-in-out, box-shadow .25s ease-in-out; +} +.aista-chat-btn:hover, +.aista-chat-btn:active +.aista-chat-btn:focus { + box-shadow: 1px 1px 2px rgba(0,0,0,.2); + background-position: 50px; + transition: background-position .25s ease-in-out, box-shadow .25s ease-in-out; + text-decoration: none !important; + color: #fcfeff !important; +} +.aista-chat-btn i { + font-size: 20px; +} +.aista-chat-wnd { + font-family: Roboto !important; + position: fixed !important; + z-index: 100001 !important; + bottom: 10px !important; + right: 10px !important; + width: 450px !important; + max-width: calc(100% - 20px) !important; + background:linear-gradient(#2b1700, #2b1700) !important; + border-radius: 23px !important; + border: solid 0px #d1d1d1 !important; + box-shadow: 3px 3px 5px rgba(0,0,0,.2) !important; + display: none; +} +.aista-chat-header { + font-size: 12px !important; + margin: 18px 60px 15px 12px !important; + color: #fcfeff !important; +} +.aista-chat-close-btn { + border-radius: 15px !important; + background:linear-gradient(#fcfeff, #fcfeff) !important; + border: solid 0px #c7c7c7 !important; + padding: 5px 7px !important; + font-size: 12px !important; + color: #2b1700 !important; + position: absolute !important; + top: 13px !important; + right: 12px !important; + cursor: pointer !important; + background-size: 1px 50px !important; + transition: background-position .25s ease-in-out !important; +} +.aista-chat-close-btn:hover, +.aista-chat-close-btn:active, +.aista-chat-close-btn:focus { + background-position: 25px !important; + transition: background-position .25s ease-in-out !important; + color: #2b1700 !important; + outline: none !important; + text-decoration: none !important; +} +.aista-chat-msg-container { + height: 400px !important; + margin: 0 0px !important; + background-color: #fcfeff; + border-radius: 0px !important; + padding: 15px !important; + border-left: solid 1px rgba(0,0,0,.2); + border-right: solid 1px rgba(0,0,0,.2); + border-top: solid 1px #fcfeff; + border-bottom: solid 1px #fcfeff; + overflow-y: auto !important; + font-size: 14px !important; + line-height: 20px !important; + color: #030a0a !important; +} +.aista-chat-msg-container a { + text-decoration: none !important; + color: #5555ff !important; +} +.aista-chat-msg-container a:visited { + color: #5555ff !important; +} +@keyframes jump { + 0% {bottom: 0px;} + 20% {bottom: 5px;} + 40% {bottom: 0px;} +} +.ainiro-waiting-animation span { + position: relative; + margin-left: auto; + margin-right: auto; + animation: jump 1s infinite; + display: inline-block; + margin-top: 3px; + margin-bottom: -3px; +} +.ainiro-waiting-animation .ainiro-dot-1 { + background-color: #8b938e; + width: 12px; + height: 12px; + border-radius: 50%; + margin-right: 3px; + animation-delay: 200ms; +} +.ainiro-waiting-animation .ainiro-dot-2 { + background-color: #8b938e; + width: 12px; + height: 12px; + border-radius: 50%; + margin-right: 3px; + animation-delay: 400ms; +} +.ainiro-waiting-animation .ainiro-dot-3 { + background-color: #8b938e; + width: 12px; + height: 12px; + border-radius: 50%; + margin-right: 3px; + animation-delay: 600ms; +} +@keyframes aista-chat-question-waiting { + 0% { opacity: .2; } + 100% { opacity: 1; } +} +.aista-chat-question-waiting { + animation-name: aista-chat-question-waiting; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + font-size: 14px !important; + margin-bottom: 10px !important; + margin-left: 60px !important; + border-radius: 10px 10px 0 10px; + margin-bottom: 25px !important; + background-color: #2b1700; + color: #fcfeff; + padding: 15px !important; + box-shadow: 3px 3px 5px rgba(0,0,0,.2); +} +.aista-chat-question { + margin-bottom: 25px !important; + margin-left: 60px !important; + border-radius: 10px 10px 0 10px; + background-color: #2b1700; + color: #fcfeff; + padding: 15px !important; + box-shadow: 3px 3px 5px rgba(0,0,0,.2); +} +.aista-chat-error { + background-color: rgb(255,230,230) !important; + padding: 15px !important; + margin-left: -15px !important; + margin-right: -15px !important; + margin-bottom: 20px !important; +} +.aista-chat-answer { + color: rgb(128,128,128) !important; + border-radius: 10px 10px 10px 0; + margin-right: 60px !important; + margin-bottom: 25px !important; + background-color: #d9d9d9; + padding: 15px !important; + box-shadow: 3px 3px 5px rgba(0,0,0,.2); +} +.aista-chat-answer.stop, +.aista-chat-answer.cached { + color: unset !important; +} +.aista-chat-answer p:first-child { + margin-top:0 !important; +} +.aista-chat-answer p:last-child { + margin-bottom:0 !important; +} +.aista-chat-answer img:not(.emoji) { + display: block !important; + max-width: 100% !important; + margin-left: auto !important; + margin-right: auto !important; + margin-top: 10px !important; + margin-bottom: 10px !important; + cursor: pointer !important; +} +.aista-chat-answer pre { + margin-top: 20px !important; + margin-bottom: 20px !important; + text-overflow: ellipsis; + overflow: hidden; +} +.aista-chat-answer ol { + padding-left: 20px !important; +} +.aista-chat-answer ul { + padding-left: 20px !important; +} +.aista-chat-answer ul li { + list-style-type: disc !important; + margin: 0 !important; +} +@keyframes aista-zoom-image { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.aista-zoom-image { + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + z-index: 100002 !important; + background-color: rgba(0,0,0,.7) !important; + opacity: 0; + animation-name: aista-zoom-image; + animation-duration: .25s; + animation-fill-mode: forwards; +} +@keyframes aista-drop-down { + 0% { + margin-top: -1000px; + opacity: 0; + } + 100% { + margin-top: 25px; + opacity: 1; + } +} +.aista-zoom-image img { + display: block !important; + margin-left: auto !important; + margin-right: auto !important; + width: auto !important; + max-width: calc(100% - 50px) !important; + max-height: calc(100% - 50px) !important; + margin-top: -1000px; + animation-name: aista-drop-down; + animation-duration: .25s; + animation-delay: .25s; + animation-fill-mode: forwards; + border-radius: 5px !important; + box-shadow: 0 0 15px rgba(255,255,0,.5) !important; +} +.aista-references-list { + margin-top: 20px !important; + padding-left: 0 !important; +} +.aista-references-list li { + display: none; +} +.aista-references-list li:nth-child(1), +.aista-references-list li:nth-child(2), +.aista-references-list li:nth-child(3), +.aista-references-list li:nth-child(4), +.aista-references-list li:nth-child(5) { + display: list-item; +} +@keyframes aista_fade_in { + 0% { + margin-left: -100px; + opacity: 0; + } + 100% { + margin-left: 0; + opacity: 1; + } +} +.aista-references-list li { + margin-left: -100px !important; + opacity: 0; + list-style: none !important; + margin-top: 5px !important; + animation-name: aista_fade_in; + animation-duration: .75s; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; +} +.aista-references-list li:nth-child(1) { + animation-delay: 0s; +} +.aista-references-list li:nth-child(2) { + animation-delay: .25s; +} +.aista-references-list li:nth-child(3) { + animation-delay: .5s; +} +.aista-references-list li:nth-child(4) { + animation-delay: .75s; +} +.aista-references-list li:nth-child(5) { + animation-delay: 1s; +} +.aista-references-list li:nth-child(6) { + animation-delay: 1.25s; +} +.aista-references-list li:nth-child(7) { + animation-delay: 1.5s; +} +.aista-references-list li:nth-child(8) { + animation-delay: 1.75s; +} +.aista-references-list li:nth-child(9) { + animation-delay: 2s; +} +.aista-references-list li:nth-child(10) { + animation-delay: 2.25s; +} +.aista-references-list li a { + text-decoration: none !important; + color: rgb(128,128,255) !important; + transition: color, background-color .25s ease-in-out !important; + padding: 5px 5px 5px 10px !important; + display: block !important; + border-radius: 5px !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} +.aista-references-list li a:hover, +.aista-references-list li a:active, +.aista-references-list li a:focus { + color: rgb(90,90,235) !important; + transition: color, background-color .25s ease-in-out !important; + background-color: rgba(0,0,0,.1); +} +.aista-chat-form { + padding: 7px !important; + margin: 0 !important; +} +.aista-chat-prompt { + font-size: 16px !important; + padding: 10px !important; + border: solid 0px rgba(0,0,0,.2) !important; + outline: none !important; + width: 100% !important; + box-sizing: border-box !important; + background:linear-gradient(#fcfeff, #fcfeff) !important; + border-radius: 20px !important; +} +.aista-speech-button { + right: 10px; + bottom: 6px; + height: 40px; + width: 50px; + position: absolute; + font-size: 20px; + display: block; + background-color: transparent; + border: none; + cursor: pointer; + color: #2b1700; + transition: color .25s ease-in-out; +} +.aista-speech-button:hover, +.aista-speech-button:focus, +.aista-speech-button:active { + background-color: transparent; + color: #2b1700; + transition: color .25s ease-in-out; +} +.aista-speech-button:disabled { + transition: none; + color: #c0c0c0; + cursor: default; +} +.aista-chat-prompt::placeholder { + color: rgb(180,181,188) !important; +} + +/* This is the ONLY thing you need to add to an existing theme to have it become "inline" */ +.aista-chat-wnd { + width: calc(100% - 20px) !important; + max-width: calc(100% - 20px) !important; + overflow: auto !important; + position: relative !important; + display: block !important; +} +.aista-chat-close-btn { + display: none !important; +} diff --git a/backend/files/system/openai/include-javascript.get.hl b/backend/files/system/openai/include-javascript.get.hl index fb3d444b3a..09f9fe3422 100644 --- a/backend/files/system/openai/include-javascript.get.hl +++ b/backend/files/system/openai/include-javascript.get.hl @@ -9,6 +9,7 @@ header:string button:string render_button:bool + parent_node:string search:bool chat:bool markdown:bool @@ -36,6 +37,7 @@ validators.default:x:@.arguments rtl:bool:false submit_button:bool:false stream:bool:false + parent_node: // Checking if custom JavaScript file exists. .result @@ -111,6 +113,10 @@ set-value:x:@.result strings.replace:x:@.result .:[[type]] get-value:x:@.arguments/*/type +set-value:x:@.result + strings.replace:x:@.result + .:[[parent_node]] + get-value:x:@.arguments/*/parent_node set-value:x:@.result strings.replace:x:@.result .:[[header]]