[DOC] Agentic Search Guide (#5881)

Adding agentic search guide

Author: itaismith

docs/docs.trychroma.com/components/markdoc/code-block.tsx

@@ -9,6 +9,13 @@ import CodeBlockHeader from "@/components/markdoc/code-block-header";
 
 import "highlight.js/styles/atom-one-dark.css";
 
+export interface CodeBlockProps {
+  content: React.ReactNode;
+  language: string;
+  showHeader: boolean;
+  className?: string;
+}
+
 const rehypeRemovePre = () => {
   return (tree: any) => {
     visit(tree, "element", (node) => {
@@ -25,12 +32,12 @@ const rehypeRemovePre = () => {
   };
 };
 
-const CodeBlock: React.FC<{
-  content: React.ReactNode;
-  language: string;
-  showHeader: boolean;
-  className?: string;
-}> = async ({ content, language, showHeader = true, className }) => {
+const CodeBlock: React.FC<CodeBlockProps> = async ({
+  content,
+  language,
+  showHeader = true,
+  className,
+}) => {
   if (typeof content !== "string") {
     throw new Error("CodeBlock children must be a string.");
   }
@@ -60,5 +67,6 @@ const CodeBlock: React.FC<{
     </div>
   );
 };
+CodeBlock.displayName = "CodeBlock";
 
 export default CodeBlock;

docs/docs.trychroma.com/components/markdoc/collapsible-code-block.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import CodeBlock, { CodeBlockProps } from "@/components/markdoc/code-block";
+
+function isCodeBlockElement(
+  node: React.ReactNode,
+): node is React.ReactElement<CodeBlockProps> {
+  if (!React.isValidElement(node)) return false;
+
+  if (node.type === CodeBlock) return true;
+  const t = node.type as any;
+  return (
+    typeof t === "function" &&
+    (t.displayName === "CodeBlock" || t.name === "CodeBlock")
+  );
+}
+
+function injectIntoCodeBlock(
+  node: React.ReactNode,
+  className: string,
+): React.ReactNode {
+  return React.Children.map(node, (child) => {
+    if (!React.isValidElement(child)) return child;
+
+    if (isCodeBlockElement(child)) {
+      const prev = child.props.className ?? "";
+      return React.cloneElement<Partial<CodeBlockProps>>(child, {
+        className,
+      });
+    }
+
+    return child;
+  });
+}
+
+const CollapsibleCodeBlock: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const className = "max-h-64 overflow-y-auto";
+  const enhanced = injectIntoCodeBlock(children, className);
+
+  return <div className="bg-black">{enhanced}</div>;
+};
+
+export default CollapsibleCodeBlock;

docs/docs.trychroma.com/components/markdoc/steps.tsx

@@ -31,9 +31,9 @@ export const Step: React.FC<{ children: React.ReactNode; title?: string }> = ({
   title,
 }) => {
   return (
-    <div className="flex flex-col gap-1">
-      {title && <p className="text-lg font-bold">{title}</p>}
-      <div>{children}</div>
+    <div className="flex flex-col gap-0 my-0">
+      {title && <p className="font-bold my-0">{title}</p>}
+      <div className="my-0">{children}</div>
     </div>
   );
 };

docs/docs.trychroma.com/components/markdoc/tabbed-use-case-code-block.tsx

@@ -3,12 +3,13 @@ import { tabLabelStyle } from "@/components/markdoc/code-block-header";
 import { capitalize, cn } from "@/lib/utils";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TabProps } from "@/components/markdoc/tabs";
-import CodeBlock from "@/components/markdoc/code-block";
+import CodeBlock, { CodeBlockProps } from "@/components/markdoc/code-block";
 import CopyButton from "@/components/markdoc/copy-button";
 
 const TabbedUseCaseCodeBlock: React.FC<{
   language: string;
   children: ReactElement<TabProps>[];
+  scrollable?: boolean;
 }> = ({ language, children }) => {
   return (
     <Tabs defaultValue={children[0].props.label} className="flex flex-col">
@@ -44,19 +45,23 @@ const TabbedUseCaseCodeBlock: React.FC<{
           ))}
         </div>
       </div>
-        {children.map((tab) => (
+      {children
+        .filter((tab) => tab.props.children.type === CodeBlock)
+        .map((tab) => (
           <TabsContent
             key={`${tab.props.label}-content`}
             value={tab.props.label}
             className="m-0"
           >
-            {tab.props.children.type === CodeBlock
-              ? React.cloneElement(tab, {
-                  children: React.cloneElement(tab.props.children, {
-                    showHeader: false,
-                  }),
-                })
-              : tab}
+            {React.cloneElement<Partial<{ children: ReactElement }>>(tab, {
+              children: React.cloneElement<Partial<CodeBlockProps>>(
+                tab.props.children,
+                {
+                  showHeader: false,
+                  className: "max-h-64 overflow-y-auto",
+                },
+              ),
+            })}
           </TabsContent>
         ))}
     </Tabs>

docs/docs.trychroma.com/components/markdoc/ts-installation.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import TabbedUseCaseCodeBlock from "@/components/markdoc/tabbed-use-case-code-block";
+import Tab from "@/components/markdoc/tabs";
+import CodeBlock from "@/components/markdoc/code-block";
+
+const TypescriptInstallation: React.FC<{ packages: string }> = ({
+  packages,
+}) => {
+  return (
+    <TabbedUseCaseCodeBlock language="Terminal">
+      <Tab label="npm">
+        <CodeBlock
+          content={`npm install ${packages}`}
+          language="terminal"
+          showHeader={false}
+        />
+      </Tab>
+      <Tab label="pnpm">
+        <CodeBlock
+          content={`pnpm add ${packages}`}
+          language="terminal"
+          showHeader={false}
+        />
+      </Tab>
+      <Tab label="yarn">
+        <CodeBlock
+          content={`yarn add ${packages}`}
+          language="terminal"
+          showHeader={false}
+        />
+      </Tab>
+      <Tab label="bun">
+        <CodeBlock
+          content={`bun add ${packages}`}
+          language="terminal"
+          showHeader={false}
+        />
+      </Tab>
+    </TabbedUseCaseCodeBlock>
+  );
+};
+
+export default TypescriptInstallation;

docs/docs.trychroma.com/markdoc/config.ts

@@ -26,6 +26,7 @@ import ComboboxSteps, {
 import Steps, { Step } from "@/components/markdoc/steps";
 import ImageHoverText from "@/components/markdoc/image-hover-text";
 import PythonInstallation from "@/components/markdoc/python-installation";
+import CollapsibleCodeBlock from "@/components/markdoc/collapsible-code-block";
 
 interface MarkDocConfig extends Config {
   components?: Record<string, React.FC<any>>;
@@ -85,6 +86,9 @@ const markdocConfig: MarkDocConfig = {
           type: String,
           required: true,
         },
+        scrollable: {
+          type: Boolean,
+        },
       },
     },
     Tab: {
@@ -244,6 +248,10 @@ const markdocConfig: MarkDocConfig = {
         },
       },
     },
+    CollapsibleCodeBlock: {
+      render: "CollapsibleCodeBlock",
+      selfClosing: false,
+    },
   },
   components: {
     InlineCode,
@@ -273,6 +281,7 @@ const markdocConfig: MarkDocConfig = {
     Step,
     ImageHoverText,
     PythonInstallation,
+    CollapsibleCodeBlock,
   },
 };