diff --git a/ui/src/css/layout.scss b/ui/src/css/layout.scss
index 3eaf0433..ea179646 100644
--- a/ui/src/css/layout.scss
+++ b/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)) {
diff --git a/ui/src/css/toc.scss b/ui/src/css/toc.scss
index 9e1f5613..d30ad6eb 100644
--- a/ui/src/css/toc.scss
+++ b/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;
+}
diff --git a/ui/src/js/version-selector.js b/ui/src/js/version-selector.js
index b75cc1d9..2560d8da 100644
--- a/ui/src/js/version-selector.js
+++ b/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();
+ });
});
diff --git a/ui/theme/helpers/raw-content-href.js b/ui/theme/helpers/raw-content-href.js
new file mode 100644
index 00000000..18d9ee4b
--- /dev/null
+++ b/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/");
+};
diff --git a/ui/theme/partials/icons.hbs b/ui/theme/partials/icons.hbs
index 1de054ea..66de8e89 100644
--- a/ui/theme/partials/icons.hbs
+++ b/ui/theme/partials/icons.hbs
@@ -6,4 +6,8 @@
+
+
+
+
diff --git a/ui/theme/partials/toc.hbs b/ui/theme/partials/toc.hbs
index 44ce7aec..e1390387 100644
--- a/ui/theme/partials/toc.hbs
+++ b/ui/theme/partials/toc.hbs
@@ -1,3 +1,45 @@