Add Ask ChatGPT button

ui/src/css/layout.scss

@@ -180,7 +180,7 @@ button.collapse-toggle {
   width: 200px;
   max-height: 80vh;
   position: sticky;
-  top: 10vh;
+  top: 9vh;
   overflow-y: auto;
 
   @media (max-width: math.div($mobile-breakpoint * 2, 3)) {

ui/src/css/toc.scss

@@ -1,9 +1,11 @@
 .toc-sidebar {
   font-size: .8em;
   opacity: .8;
+  overflow: visible;
 }
 
 .toc-menu {
+  margin-top: 1rem;
   border-width: 0 0 0 0.25rem;
 
   ul {
@@ -58,3 +60,101 @@
 .toc .toc-menu li a.toc-active {
   color: var(--core-violet-4);
 }
+
+.btn-llms-container {
+  display: flex;
+}
+
+.btn-chatgpt {
+  font-size: 0.85rem;
+  font-weight: var(--weight-medium);
+  min-height: 1.5rem;
+  padding: 0.2rem 0.5rem;
+  border: 1px solid;
+  border-radius: 1rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--core-violet-4);
+    path {
+      fill: var(--core-violet-4);
+    }
+  }
+
+  span {
+    margin-left: 0.2rem;
+  }
+
+  svg {
+    height: var(--md);
+    width: var(--md);
+  }
+}
+
+.btn-llms {
+  font-size: 0.85rem;
+  font-weight: var(--weight-medium);
+  min-height: 1.5rem;
+  padding: 0.2rem 0.5rem;
+  border: 1px solid;
+  border-radius: 1rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  &::after{
+    display: inline-block;
+    content: url(../images/icons/chevron.svg);
+    width: .8rem;
+  }
+}
+
+.llms-popover-container {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 1;
+  border-left: 0;
+  margin-top: .5rem;
+
+  .btn-llms:focus + &,
+  &:focus-within {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.component-llm {
+  position: relative;
+}
+
+.btn-llm-popover {
+  text-align: start;
+  border: 0;
+  font-size: 0.8rem;
+  font-weight: var(--weight-medium);
+  min-height: 1.5rem;
+  padding: 0.2rem 0.5rem;
+  width: 15em;
+
+  & > .sub {
+    font-size: 0.6rem;
+    font-weight: var(--weight-light);
+  }
+
+  & > .icon {
+    margin-right: .3rem;
+  }
+
+  p {
+    padding: 0;
+  }
+}
+
+.popover.llm-popover {
+  width: 15em;
+}

ui/src/js/version-selector.js

@@ -3,4 +3,8 @@ window.addEventListener("load", function () {
   versionBtn?.addEventListener("click", function () {
     versionBtn.focus();
   });
+  const llmBtn = document.getElementById("llm-selector");
+  llmBtn?.addEventListener("click", function () {
+    llmBtn.focus();
+  });
 });

ui/theme/helpers/raw-content-href.js

@@ -0,0 +1,7 @@
+module.exports = function (opts) {
+  if (!opts.data.root.page.editUrl) return "";
+  return opts.data.root.page.editUrl
+    .replace(/\/$/, "")
+    .replace("github.com", "raw.githubusercontent.com")
+    .replace("/edit/", "/refs/heads/");
+};

ui/theme/partials/icons.hbs

@@ -6,4 +6,8 @@
   <symbol overflow="visible" id="github-icon" viewBox="0 0 24 24">
   <path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
   </symbol>
+
+  <symbol overflow="visible" id="raw-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code">
+    <path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>
+  </symbol>
 </svg>

ui/theme/partials/toc.hbs

@@ -1,3 +1,45 @@
 <div class="toc toc-sidebar">
+	<div class="component-llm">
+		<div class="btn-llms-container">
+			<button class="flex align-center shrink btn btn-chatgpt">
+				<a href="https://chatgpt.com/?hints=search&q=Review {{@root.site.url}}{{@root.page.url}} and guide me based on its content. Don’t quote it directly. Ask how you can help, and keep follow-ups strictly related to this page."
+					target="_blank" rel="noopener noreferrer" class="flex align-center">
+					<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<g clip-path="url(#clip0_2643_2)">
+							<path
+								d="M25.659 11.5301C25.9642 10.6138 26.0701 9.64286 25.9696 8.6823C25.8691 7.72174 25.5646 6.79372 25.0764 5.96039C24.3526 4.69986 23.247 3.70189 21.9192 3.11047C20.5915 2.51905 19.1101 2.36476 17.6889 2.66986C17.048 1.94746 16.2601 1.37029 15.3781 0.976985C14.4961 0.583681 13.5402 0.383312 12.5745 0.38929C11.1216 0.3858 9.70506 0.843743 8.52916 1.69711C7.35326 2.55048 6.4787 3.75518 6.03154 5.13758C5.08488 5.33128 4.19052 5.725 3.40836 6.29237C2.6262 6.85974 1.97428 7.58767 1.49626 8.42743C0.766907 9.68449 0.45562 11.1407 0.607291 12.5861C0.758961 14.0315 1.36575 15.3914 2.34016 16.4697C2.03498 17.3861 1.92908 18.3571 2.02954 19.3178C2.13001 20.2785 2.43453 21.2066 2.92272 22.0401C3.64662 23.3005 4.7522 24.2984 6.07998 24.8898C7.40775 25.4812 8.88907 25.6356 10.3102 25.3306C10.9513 26.0529 11.7393 26.63 12.6215 27.0232C13.5036 27.4164 14.4596 27.6166 15.4254 27.6105C16.879 27.6143 18.2963 27.1562 19.4726 26.3023C20.649 25.4484 21.5236 24.2428 21.9703 22.8595C22.9169 22.6657 23.8111 22.2719 24.5931 21.7046C25.3752 21.1372 26.027 20.4093 26.5049 19.5696C27.2335 18.3127 27.5441 16.8569 27.3921 15.412C27.2401 13.9672 26.6332 12.6079 25.659 11.5301ZM15.4274 25.8328C14.2339 25.8346 13.0778 25.4166 12.1614 24.6521C12.2029 24.6296 12.2757 24.5901 12.3227 24.5609L17.7427 21.4303C17.8789 21.3529 17.992 21.2406 18.0704 21.105C18.1488 20.9693 18.1895 20.8152 18.1885 20.6585V13.0165L20.4792 14.3395C20.4913 14.3454 20.5017 14.3542 20.5095 14.3652C20.5174 14.3761 20.5224 14.3888 20.5241 14.4021V20.7307C20.5225 22.0825 19.9851 23.3785 19.0296 24.3347C18.0741 25.291 16.7785 25.8295 15.4267 25.8322L15.4274 25.8328ZM4.46624 21.1506C3.86859 20.1178 3.65321 18.9077 3.85782 17.7321C3.89865 17.7566 3.96807 17.7995 4.01911 17.8281L9.43912 20.9586C9.5742 21.0375 9.7278 21.0791 9.88421 21.0791C10.0406 21.0791 10.1942 21.0375 10.3293 20.9586L16.9471 17.138V19.784C16.9479 19.7975 16.9453 19.8109 16.9396 19.8232C16.9339 19.8354 16.9253 19.846 16.9144 19.8541L11.4352 23.018C10.2631 23.6931 8.87105 23.8756 7.56453 23.5255C6.25801 23.1754 5.14374 22.3213 4.46624 21.1506ZM3.04046 9.31829C3.63581 8.28391 4.57613 7.49199 5.6967 7.08127C5.6967 7.12755 5.69398 7.21058 5.69398 7.26775V13.5296C5.69309 13.686 5.73386 13.8398 5.81208 13.9752C5.8903 14.1106 6.00317 14.2227 6.13907 14.3L12.7562 18.1207L10.4654 19.4437C10.4541 19.4512 10.441 19.4558 10.4275 19.457C10.4139 19.4582 10.4003 19.4559 10.3878 19.4505L4.90725 16.2845C3.7372 15.6069 2.88362 14.493 2.53367 13.187C2.18372 11.8809 2.36598 10.4901 3.04046 9.31829ZM21.8635 13.6991L15.2457 9.87771L17.5372 8.55538C17.5484 8.54804 17.5614 8.54359 17.5748 8.5424C17.5882 8.54121 17.6017 8.54333 17.6141 8.54857L23.094 11.7118C23.9335 12.1968 24.6174 12.9109 25.0658 13.7705C25.5142 14.6301 25.7084 15.5996 25.6257 16.5656C25.543 17.5316 25.1868 18.454 24.5989 19.2249C24.011 19.9958 23.2156 20.5833 22.3059 20.9185V14.4695C22.3071 14.3134 22.2668 14.1597 22.189 14.0244C22.1113 13.889 21.9989 13.7767 21.8635 13.6991ZM24.1434 10.267C24.1032 10.2418 24.0331 10.1996 23.9828 10.171L18.5621 7.04044C18.427 6.96164 18.2734 6.92012 18.117 6.92012C17.9606 6.92012 17.807 6.96164 17.6719 7.04044L11.0548 10.8611V8.21509C11.054 8.20162 11.0566 8.18816 11.0623 8.17593C11.068 8.1637 11.0766 8.15307 11.0874 8.145L16.566 4.98378C17.4055 4.4995 18.3655 4.26433 19.3338 4.30579C20.302 4.34725 21.2385 4.66362 22.0335 5.21788C22.8285 5.77214 23.4492 6.54136 23.823 7.43553C24.1967 8.3297 24.3074 9.31183 24.1434 10.267ZM9.80867 14.9826L7.51721 13.6596C7.50528 13.6536 7.495 13.6447 7.48729 13.6338C7.47958 13.6229 7.47466 13.6103 7.47297 13.597V7.26843C7.47378 6.2993 7.75058 5.35044 8.27099 4.53288C8.7914 3.71533 9.53389 3.0629 10.4116 2.65194C11.2893 2.24097 12.2658 2.08848 13.227 2.2123C14.1882 2.33612 15.0943 2.73113 15.8391 3.3511C15.785 3.38045 15.7315 3.41086 15.6785 3.4423L10.2578 6.57289C10.1219 6.65023 10.0091 6.76235 9.93085 6.89775C9.85263 7.03314 9.81187 7.18693 9.81275 7.34329L9.80867 14.9826ZM11.0534 12.2992L14.0003 10.5971L16.9485 12.2985V15.7013L14.0009 17.4027L11.0534 15.7013V12.2992Z"
+								fill="#282846" />
+						</g>
+						<defs>
+							<clipPath id="clip0_2643_2">
+								<rect width="28" height="28" fill="white" />
+							</clipPath>
+						</defs>
+					</svg>
+					<span>
+						Ask ChatGPT
+					</span>
+				</a>
+			</button>
+			<button class="btn-llms" id="llm-selector"></button>
+			<div class="llms-popover-container">
+				<div class="popover llm-popover">
+					<a href={{raw-content-href}} target="blank" rel="noopener noreferrer"/>
+						<button class="btn btn-llm-popover">
+							<p>
+								<svg class="icon">
+									<use href="#raw-icon" />
+								</svg>
+								<span>
+									View as AsciiDoc
+								</span>
+							</p>
+							<p class="sub">See this page as plain text</p>
+						</button>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
 	<nav class="toc-menu"></nav>
 </div>