diff --git a/doc/source/_static/css/assistant.css b/doc/source/_static/css/assistant.css new file mode 100644 index 000000000000..62c1a24b2f5b --- /dev/null +++ b/doc/source/_static/css/assistant.css @@ -0,0 +1,136 @@ +/* Kapa Ask AI button */ +#kapa-widget-container figure { + padding: 0 !important; + } + + .mantine-Modal-root figure { + padding: 0 !important; + } + +.container-xl.blurred { + filter: blur(5px); +} + +.chat-widget { + position: fixed; + bottom: 10px; + right: 10px; + z-index: 1000; +} + +.chat-popup { + display: none; + position: fixed; + top: 20%; + left: 50%; + transform: translate(-50%, -20%); + width: 50%; + height: 70%; + background-color: var(--pst-color-surface); + border: 1px solid var(--pst-color-border); + border-radius: 10px; + box-shadow: 0 5px 10px var(--pst-color-shadow); + z-index: 1032; + max-height: 1000px; + overflow: hidden; + padding-bottom: 40px; +} + +.chatFooter { + position: absolute; + bottom: 0; + right: 0; + width: 100%; + background-color: var(--pst-color-surface); +} + +#openChatBtn { + background-color: var(--pst-color-on-background); + color: var(--pst-color-text-base); + width: 70px; + height: 70px; + border-radius: 10px; + border: none; + display: flex; + align-items: center; + justify-content: center; +} + +#closeChatBtn { + border: none; + background-color: transparent; + color: var(--pst-color-text-base); + font-size: 1.2em; +} + +#closeChatBtn:hover { + color: var(--pst-color-link-hover); +} + +#searchBar { + border: 1px solid var(--pst-color-border); + background-color: var(--pst-color-on-surface); +} + +.chatHeader { + display: flex; + justify-content: space-between; + align-items: center; + padding: .5rem; +} + +.chatHeader > .header-wrapper { + text-align: center; + width: 100%; +} + +.chatContentContainer { + padding: 15px; + max-height: calc(100% - 80px); + overflow-y: auto; +} + +.chatContentContainer input { + margin-top: 10px; + margin-bottom: 10px; +} + +#result{ + padding: 15px; + border-radius: 10px; + margin-top: 10px; + margin-bottom: 10px; + background-color: var(--pst-color-on-surface); + max-height: calc(100% - 20px); + overflow-y: auto; +} + +.chatContentContainer textarea { + flex-grow: 1; + min-width: 50px; + max-height: 40px; + resize: none; +} + +.searchBtn { + white-space: nowrap; +} + +.input-group { + display: flex; + align-items: stretch; +} + +#blurDiv { + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + backdrop-filter: blur(5px); + z-index: 1031; +} + +#blurDiv.blurDiv-hidden { + display: none !important; +} diff --git a/doc/source/_static/css/csat.css b/doc/source/_static/css/csat.css new file mode 100644 index 000000000000..bfba0053fb61 --- /dev/null +++ b/doc/source/_static/css/csat.css @@ -0,0 +1,77 @@ +/* CSAT widgets */ +#csat-inputs { + display: flex; + flex-direction: row; + align-items: center; +} + +.csat-hidden { + display: none !important; +} + +#csat-feedback-label { + color: var(--pst-color-text-base); + font-weight: 500; +} + +.csat-button { + margin-left: 16px; + padding: 8px 16px 8px 16px; + border-radius: 4px; + border: 1px solid var(--pst-color-border); + background: var(--pst-color-background); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + cursor: pointer; + width: 85px; +} + +#csat-textarea-group { + display: flex; + flex-direction: column; +} + +#csat-submit { + margin-left: auto; + font-weight: 700; + border: none; + margin-top: 12px; + cursor: pointer; +} + +#csat-feedback-received { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.csat-button-active { + border: 1px solid var(--pst-color-border); +} + +.csat-icon { + margin-right: 4px; +} + +#csat { + padding: 1em; + min-width: 60%; +} + +#csat-textarea { + resize: none; + background-color: var(--pst-color-on-background); + border: 1px solid var(--pst-color-border); + border-radius: 4px; +} + +#csat-textarea::placeholder { + color: var(--pst-color-text-base); +} + +.csat-icon > path { + fill: var(--pst-color-text-base); +} diff --git a/doc/source/_static/js/assistant.js b/doc/source/_static/js/assistant.js index cf6ebaf55245..b8874552c5aa 100644 --- a/doc/source/_static/js/assistant.js +++ b/doc/source/_static/js/assistant.js @@ -11,40 +11,44 @@ var chatPopupDiv = document.createElement("div"); chatPopupDiv.className = "chat-popup"; chatPopupDiv.id = "chatPopup"; chatPopupDiv.innerHTML = ` -
-
-
- Ray Docs AI - Ask a question -
- +
+
+

Ray Docs AI - Ask a question

-
-
- -
- -
-
-
-
-
- © Copyright 2023, The Ray Team. + +
+
+
+ +
+ +
+
+
+
+ © Copyright 2023, The Ray Team. +
` document.body.appendChild(chatPopupDiv); +const blurDiv = document.createElement('div') +blurDiv.id = "blurDiv" +blurDiv.classList.add("blurDiv-hidden") +document.body.appendChild(blurDiv); + // blur background when chat popup is open document.getElementById('openChatBtn').addEventListener('click', function() { - document.getElementById('chatPopup').style.display = 'block'; - document.querySelector('.container-xl').classList.add('blurred'); + document.getElementById('chatPopup').style.display = 'block'; + blurDiv.classList.remove("blurDiv-hidden"); }); // un-blur background when chat popup is closed document.getElementById('closeChatBtn').addEventListener('click', function() { - document.getElementById('chatPopup').style.display = 'none'; - document.querySelector('.container-xl').classList.remove('blurred'); + document.getElementById('chatPopup').style.display = 'none'; + blurDiv.classList.add("blurDiv-hidden"); }); // set code highlighting options diff --git a/doc/source/_templates/csat.html b/doc/source/_templates/csat.html index dca315fcfe7b..368af0d322d2 100644 --- a/doc/source/_templates/csat.html +++ b/doc/source/_templates/csat.html @@ -6,13 +6,13 @@ Was this helpful?
- + Yes
- + No