LLMs features: cleaner markdown page output, adjust PageActions responsiveness

server/fixtures/llms/images.html

@@ -0,0 +1,2 @@
+<p>Paragraph before image.</p><img src="/img/logo.png" alt="Logo">
+<p>Paragraph after image.</p><img src="/img/diagram.svg" alt="Diagram" class="diagram_abc">

server/fixtures/llms/result/images.html

@@ -0,0 +1,2 @@
+<p>Paragraph before image.</p>
+<p>Paragraph after image.</p>

server/llms/rehype-prepare-html.test.ts

@@ -146,6 +146,19 @@ describe("server/llms/rehype-prepare-html", () => {
     );
   });
 
+  test("Images: removes all img elements, preserving surrounding content", () => {
+    const result = transformer(
+      readFileSync(resolve("server/fixtures/llms/images.html"), "utf-8"),
+    );
+
+    expect((result.value as string).trim()).toBe(
+      readFileSync(
+        resolve("server/fixtures/llms/result/images.html"),
+        "utf-8",
+      ).trim(),
+    );
+  });
+
   test("Irrelevant components: removes thumbsFeedback and checkpoint components, preserving other content", () => {
     const result = transformer(
       readFileSync(

server/llms/rehype-prepare-html.ts

@@ -11,6 +11,7 @@ import { visitParents, SKIP } from "unist-util-visit-parents";
  * Code blocks: extract text content and replace with clean <pre><code> structure
  * Card links: prevent duplicate links in the markdown output
  * Heading anchor links: remove hash-link anchors from headings
+ * Images: remove all image elements from the output
  * Irrelevant components: remove interactive UI components (thumbsFeedback, checkpoint, docsHeader)
  * H1 repositioning: move the h1 heading to the top of the document
  */
@@ -86,6 +87,12 @@ const rehypePrepareHTML: Plugin<[], Root, Root> = function () {
         return SKIP; // don't traverse children (e.g. avoids capturing an h1 inside a removed node)
       }
 
+      // *** Images ***
+      if (element.tagName === "img") {
+        toRemove.push({ node: element, parent });
+        return SKIP;
+      }
+
       // *** Headings ***
       if (/^h[1-6]$/.test(element.tagName)) {
         // Remove hash-link anchor children in-place

src/components/Button/Button.tsx

@@ -7,6 +7,7 @@ import type {
 import { clsx } from "clsx";
 
 import styles from "./Button.module.css";
+import Link from "@docusaurus/Link";
 
 export type ButtonVariant =
   | "primary"
@@ -55,7 +56,7 @@ const Button = ({
   };
 
   if (as === "link") {
-    return <a {...(props as DefaultAnchorProps)} />;
+    return <Link {...(props as DefaultAnchorProps)} />;
   }
 
   return <button {...(props as DefaultButtonProps)} />;

src/components/PageActions/PageActions.module.css

@@ -1,6 +1,6 @@
 .pageActions {
   display: flex;
-  gap: var(--m-3);
+  gap: var(--m-2);
   padding: var(--m-1-5) 0;
   border-bottom: 1px solid var(--color-tonal-neutral-2);
   margin-bottom: var(--m-5);
@@ -10,15 +10,27 @@
       &::after {
         content: "";
         position: relative;
-        transform: translateX(var(--m-1-5));
+        transform: translateX(var(--m-1));
         width: 1px;
         height: 100%;
         background-color: var(--color-tonal-neutral-1);
       }
     }
   }
 
-  @media (--lg-scr) {
+  @media (--md-scr) {
+    gap: var(--m-3);
+
+    & > * {
+      &:not(:nth-last-child(2)) {
+        &::after {
+          transform: translateX(var(--m-1-5));
+        }
+      }
+    }
+  }
+
+  @media (--desktop-page-actions) {
     gap: var(--m-4);
     margin-bottom: var(--m-6);
     & > * {
@@ -34,6 +46,23 @@
       }
     }
   }
+
+  &.pageHasTOC {
+    @media screen and (min-width: 997px) and (max-width: 1301px) {
+      & > * {
+        &:not(:last-child) {
+          &::after {
+            display: none;
+          }
+        }
+      }
+      .githubLink,
+      .askAIButton,
+      .feedback {
+        white-space: wrap;
+      }
+    }
+  }
 }
 
 .askAIButton {
@@ -53,19 +82,20 @@
   color: var(--color-foreground-slightly-muted);
   display: flex;
   align-items: center;
-  font-size: var(--fs-text-lg);
+  font-size: var(--fs-text-sm);
+  white-space: nowrap;
   letter-spacing: 0.024px;
   line-height: 1.625;
   margin: 0;
   padding: 0;
   font-weight: var(--fw-medium);
 
   & > svg {
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    min-height: 20px;
-    margin-right: var(--m-0-5);
+    width: var(--m-2);
+    height: var(--m-2);
+    min-width: var(--m-2);
+    min-height: var(--m-2);
+    margin-right: 2px;
     & > path {
       fill: var(--color-foreground-muted);
     }
@@ -74,10 +104,24 @@
   @media (--xs-scr) {
     width: auto;
     height: auto;
+    font-size: var(--fs-text-md);
+
+    & > svg {
+      margin-right: var(--m-0-5);
+    }
   }
 
   @media (--md-scr) {
     line-height: 1.75;
+    font-size: var(--fs-text-lg);
+
+    & > svg {
+      width: 20px;
+      height: 20px;
+      min-width: 20px;
+      min-height: 20px;
+      margin-right: var(--m-0-5);
+    }
   }
 }
 

src/components/PageActions/PageActions.tsx

@@ -1,4 +1,5 @@
 import { getReportIssueURL } from "@site/src/utils/github-issue";
+import cn from "clsx";
 import styles from "./PageActions.module.css";
 import Icon from "../Icon";
 import { useInkeepSearch } from "@site/src/hooks/useInkeepSearch";
@@ -10,12 +11,17 @@ import {
 } from "@site/src/utils/markdown";
 import { useMemo, useRef, useState } from "react";
 import { useWindowSize } from "@docusaurus/theme-common";
+import { useDocTOC } from "@site/src/theme/DocItem/Layout";
+import { useDocTemplate } from "@site/src/hooks/useDocTemplate";
 
 const PageActions: React.FC<{ pathname: string }> = ({ pathname }) => {
   const { setIsOpen, ModalSearchAndChat, inkeepModalProps } = useInkeepSearch({
     enableAIChat: true,
   });
+  const { removeTOCSidebar } = useDocTemplate();
   const windowSize = useWindowSize();
+  const docTOC = useDocTOC(!!removeTOCSidebar);
+
   const [copiedMessage, setCopiedMessage] = useState<string>("Copy for LLM");
 
   const copyButtonRef = useRef<HTMLButtonElement>(null);
@@ -26,7 +32,11 @@ const PageActions: React.FC<{ pathname: string }> = ({ pathname }) => {
   );
 
   return (
-    <div className={styles.pageActions}>
+    <div
+      className={cn(styles.pageActions, {
+        [styles.pageHasTOC]: docTOC.canRender,
+      })}
+    >
       <a
         className={styles.githubLink}
         href={getReportIssueURL(pathname)}
@@ -58,7 +68,8 @@ const PageActions: React.FC<{ pathname: string }> = ({ pathname }) => {
         <Icon size="md" name="markdown" />
         <span>View as Markdown</span>
       </a>
-      <ThumbsFeedback />
+      {/* docTOC.canRender is passed to ThumbsFeedback instead of calling directly in the child, because the component is rendered in different places and contexts */}
+      <ThumbsFeedback pageHasTOC={docTOC.canRender} />
       <BrowserOnly fallback={<div />}>
         {() => {
           return (

src/components/ThumbsFeedback/ThumbsFeedback.module.css

@@ -3,10 +3,16 @@
     display: none;
   }
 
-  @media (--lg-scr) {
+  @media (--desktop-page-actions) {
     display: block !important;
   }
 
+  &.pageHasTOC {
+    @media screen and (min-width: 997px) and (max-width: 1301px) {
+      display: none !important;
+    }
+  }
+
   .feedbackTitle {
     font-size: var(--fs-text-sm);
     line-height: var(--lh-md);
@@ -83,7 +89,7 @@
     color: var(--color-foreground-slightly-muted);
     align-items: center;
     gap: var(--m-1);
-    font-size: var(--fs-text-lg);
+    font-size: var(--fs-text-md);
     letter-spacing: 0.024px;
     line-height: 1.625;
     margin: 0;
@@ -92,6 +98,7 @@
 
     @media (--md-scr) {
       line-height: 1.75;
+      font-size: var(--fs-text-lg);
     }
 
     & > svg {