From d83142bda3a42fe27372294ae3262534ce5c2657 Mon Sep 17 00:00:00 2001 From: Sebastian Huckleberry Date: Mon, 12 Jan 2026 14:56:33 -0800 Subject: [PATCH 1/4] feat(cloud): add ToC sidebar to docs --- .../blocks/model-provider-dropdown.tsx | 56 +++++++++++++++++++ cloud/app/components/docs-page.tsx | 9 ++- cloud/app/components/docs-toc-sidebar.tsx | 54 ++++++++++++++++++ cloud/app/lib/content/mdx-compile.ts | 5 +- cloud/app/lib/content/toc.ts | 19 ------- 5 files changed, 116 insertions(+), 27 deletions(-) create mode 100644 cloud/app/components/blocks/model-provider-dropdown.tsx create mode 100644 cloud/app/components/docs-toc-sidebar.tsx delete mode 100644 cloud/app/lib/content/toc.ts diff --git a/cloud/app/components/blocks/model-provider-dropdown.tsx b/cloud/app/components/blocks/model-provider-dropdown.tsx new file mode 100644 index 0000000000..07d1ac3e8c --- /dev/null +++ b/cloud/app/components/blocks/model-provider-dropdown.tsx @@ -0,0 +1,56 @@ +import { Button } from "@/app/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/app/components/ui/dropdown-menu"; +import { ChevronDown } from "lucide-react"; +import { + useProvider, + providers, + providerDefaults, +} from "@/app/components/blocks/model-provider-provider"; +import { cn } from "@/app/lib/utils"; + +interface ProviderDropdownProps { + className?: string; +} + +export function ModelProviderDropdown({ className }: ProviderDropdownProps) { + const { provider, setProvider } = useProvider(); + + return ( +
+ + + + + + {providers.map((p) => ( + setProvider(p)} + className={cn( + "text-foreground cursor-pointer text-base", + provider === p && "text-primary font-medium", + )} + > + {providerDefaults[p].displayName} + + ))} + + +
+ ); +} diff --git a/cloud/app/components/docs-page.tsx b/cloud/app/components/docs-page.tsx index 7840f31734..76521711be 100644 --- a/cloud/app/components/docs-page.tsx +++ b/cloud/app/components/docs-page.tsx @@ -2,7 +2,7 @@ import React from "react"; import PageLayout from "@/app/components/page-layout"; import LoadingContent from "@/app/components/blocks/loading-content"; import { ProviderContextProvider } from "@/app/components/blocks/model-provider-provider"; -// import TocSidebar from "@/app/components/toc-sidebar"; +import DocsTocSidebar from "@/app/components/docs-toc-sidebar"; import MainContent from "@/app/components/blocks/docs/main-content"; import DocsSidebar from "@/app/components/blocks/docs/sidebar"; import type { DocContent } from "@/app/lib/content/types"; @@ -40,14 +40,13 @@ const DocsPage: React.FC = ({ document, isLoading = false }) => { mobileCollapsible={true} mobileTitle="On this page" > - Sidebar content - {/* {isLoading ? ( + {isLoading ? (
) : ( - document && - )} */} + document && + )} diff --git a/cloud/app/components/docs-toc-sidebar.tsx b/cloud/app/components/docs-toc-sidebar.tsx new file mode 100644 index 0000000000..5c325bb88f --- /dev/null +++ b/cloud/app/components/docs-toc-sidebar.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { PageTOC } from "@/app/components/page-toc"; +import { Server } from "lucide-react"; +import { ModelProviderDropdown } from "@/app/components/blocks/model-provider-dropdown"; +import { type DocContent } from "@/app/lib/content/types"; +import { CopyMarkdownButton } from "@/app/components/blocks/copy-markdown-button"; + +interface TocSidebarProps { + document?: DocContent | null; +} + +/** + * DocsTocSidebar - Right sidebar containing the table of contents and controls + * + * Displays provider selection dropdown and table of contents + */ +const DocsTocSidebar: React.FC = ({ document }) => { + return ( +
+
+
+ {document && ( + + )} + + {/* Provider dropdown */} +
+

+
+ + Provider +
+

+ +
+ +

+ On this page +

+
+ +
+
+ ); +}; + +export default DocsTocSidebar; diff --git a/cloud/app/lib/content/mdx-compile.ts b/cloud/app/lib/content/mdx-compile.ts index 593f2f3912..cd02e2f613 100644 --- a/cloud/app/lib/content/mdx-compile.ts +++ b/cloud/app/lib/content/mdx-compile.ts @@ -10,8 +10,7 @@ import rehypePrettyCode from "rehype-pretty-code"; import type { ProcessedMDX, Frontmatter } from "@/app/lib/mdx/types"; import type { TOCItem } from "@/app/lib/content/types"; import { parseFrontmatter } from "./frontmatter"; -import { extractTOC } from "./toc"; - +import { extractHeadings } from "../mdx/heading-utils"; export interface CompileMDXOptions { /** Skip syntax highlighting (faster for tests) */ skipHighlighting?: boolean; @@ -41,7 +40,7 @@ export async function compileMDXContent( const { frontmatter, content } = parseFrontmatter(rawContent); // Extract TOC - const tableOfContents = extractTOC(content); + const tableOfContents = extractHeadings(content); // Build compile options const compileOptions: CompileOptions = { diff --git a/cloud/app/lib/content/toc.ts b/cloud/app/lib/content/toc.ts deleted file mode 100644 index 2fe6d669eb..0000000000 --- a/cloud/app/lib/content/toc.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { TOCItem } from "@/app/lib/content/types"; - -/** - * Extract table of contents from MDX content - */ -export function extractTOC(content: string): Array { - const headingRegex = /^(#{1,6})\s+(.+)$/gm; - - return Array.from(content.matchAll(headingRegex)).map((match) => { - const level = match[1].length; - const content = match[2].trim(); - const id = content - .toLowerCase() - .replace(/[^a-z0-9]+/g, "-") - .replace(/^-|-$/g, ""); - - return { id, content, level }; - }); -} From 73ee6067eb004f0baa9beaad2a45f09ca37553b4 Mon Sep 17 00:00:00 2001 From: Sebastian Huckleberry Date: Mon, 12 Jan 2026 17:26:51 -0800 Subject: [PATCH 2/4] refactor(cloud): relocate model provider components under mdx --- cloud/app/components/blocks/docs/sidebar.tsx | 2 +- cloud/app/components/docs-page.tsx | 2 +- cloud/app/components/docs-toc-sidebar.tsx | 2 +- cloud/app/components/mdx/elements/code-block-provider.tsx | 2 +- cloud/app/components/mdx/elements/install-snippet.tsx | 4 ++-- .../{blocks => mdx/elements}/model-provider-dropdown.tsx | 2 +- .../{blocks => mdx/elements}/model-provider-provider.tsx | 0 cloud/app/components/mdx/elements/tabbed-section-provider.tsx | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) rename cloud/app/components/{blocks => mdx/elements}/model-provider-dropdown.tsx (96%) rename cloud/app/components/{blocks => mdx/elements}/model-provider-provider.tsx (100%) diff --git a/cloud/app/components/blocks/docs/sidebar.tsx b/cloud/app/components/blocks/docs/sidebar.tsx index f59ae6e48d..ec40296d24 100644 --- a/cloud/app/components/blocks/docs/sidebar.tsx +++ b/cloud/app/components/blocks/docs/sidebar.tsx @@ -1,6 +1,6 @@ import { docRegistry } from "@/app/lib/content/doc-registry"; import type { DocSpec, SectionSpec } from "@/app/lib/content/spec"; -import { type Provider } from "@/app/components/blocks/model-provider-provider"; +import { type Provider } from "@/app/components/mdx/elements/model-provider-provider"; import Sidebar from "@/app/components/page-sidebar"; import type { SidebarConfig, diff --git a/cloud/app/components/docs-page.tsx b/cloud/app/components/docs-page.tsx index 76521711be..87456c9c0b 100644 --- a/cloud/app/components/docs-page.tsx +++ b/cloud/app/components/docs-page.tsx @@ -1,7 +1,7 @@ import React from "react"; import PageLayout from "@/app/components/page-layout"; import LoadingContent from "@/app/components/blocks/loading-content"; -import { ProviderContextProvider } from "@/app/components/blocks/model-provider-provider"; +import { ProviderContextProvider } from "@/app/components/mdx/elements/model-provider-provider"; import DocsTocSidebar from "@/app/components/docs-toc-sidebar"; import MainContent from "@/app/components/blocks/docs/main-content"; import DocsSidebar from "@/app/components/blocks/docs/sidebar"; diff --git a/cloud/app/components/docs-toc-sidebar.tsx b/cloud/app/components/docs-toc-sidebar.tsx index 5c325bb88f..93b70d3391 100644 --- a/cloud/app/components/docs-toc-sidebar.tsx +++ b/cloud/app/components/docs-toc-sidebar.tsx @@ -1,7 +1,7 @@ import React from "react"; import { PageTOC } from "@/app/components/page-toc"; import { Server } from "lucide-react"; -import { ModelProviderDropdown } from "@/app/components/blocks/model-provider-dropdown"; +import { ModelProviderDropdown } from "@/app/components/mdx/elements/model-provider-dropdown"; import { type DocContent } from "@/app/lib/content/types"; import { CopyMarkdownButton } from "@/app/components/blocks/copy-markdown-button"; diff --git a/cloud/app/components/mdx/elements/code-block-provider.tsx b/cloud/app/components/mdx/elements/code-block-provider.tsx index 4702b97c4a..4a5a6d9096 100644 --- a/cloud/app/components/mdx/elements/code-block-provider.tsx +++ b/cloud/app/components/mdx/elements/code-block-provider.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import LoadingContent from "@/app/components/blocks/loading-content"; -import { useProvider } from "@/app/components/blocks/model-provider-provider"; +import { useProvider } from "@/app/components/mdx/elements/model-provider-provider"; // import { AnalyticsCodeBlock } from "./AnalyticsCodeBlock"; interface ProviderCodeBlockProps { examplePath: string; // Path relative to public/examples diff --git a/cloud/app/components/mdx/elements/install-snippet.tsx b/cloud/app/components/mdx/elements/install-snippet.tsx index d9616e6060..1bdacfda19 100644 --- a/cloud/app/components/mdx/elements/install-snippet.tsx +++ b/cloud/app/components/mdx/elements/install-snippet.tsx @@ -1,5 +1,5 @@ -import { useProvider } from "@/app/components/blocks/model-provider-provider"; -import type { Provider } from "@/app/components/blocks/model-provider-provider"; +import { useProvider } from "@/app/components/mdx/elements/model-provider-provider"; +import type { Provider } from "@/app/components/mdx/elements/model-provider-provider"; // import { AnalyticsCodeBlock } from "@/app/components/blocks/mdx/AnalyticsCodeBlock"; import { cn } from "@/app/lib/utils"; import { TabbedSection, Tab } from "./tabbed-section"; diff --git a/cloud/app/components/blocks/model-provider-dropdown.tsx b/cloud/app/components/mdx/elements/model-provider-dropdown.tsx similarity index 96% rename from cloud/app/components/blocks/model-provider-dropdown.tsx rename to cloud/app/components/mdx/elements/model-provider-dropdown.tsx index 07d1ac3e8c..440810daa9 100644 --- a/cloud/app/components/blocks/model-provider-dropdown.tsx +++ b/cloud/app/components/mdx/elements/model-provider-dropdown.tsx @@ -10,7 +10,7 @@ import { useProvider, providers, providerDefaults, -} from "@/app/components/blocks/model-provider-provider"; +} from "@/app/components/mdx/elements/model-provider-provider"; import { cn } from "@/app/lib/utils"; interface ProviderDropdownProps { diff --git a/cloud/app/components/blocks/model-provider-provider.tsx b/cloud/app/components/mdx/elements/model-provider-provider.tsx similarity index 100% rename from cloud/app/components/blocks/model-provider-provider.tsx rename to cloud/app/components/mdx/elements/model-provider-provider.tsx diff --git a/cloud/app/components/mdx/elements/tabbed-section-provider.tsx b/cloud/app/components/mdx/elements/tabbed-section-provider.tsx index 9f3e33dcb1..2cf9788b3f 100644 --- a/cloud/app/components/mdx/elements/tabbed-section-provider.tsx +++ b/cloud/app/components/mdx/elements/tabbed-section-provider.tsx @@ -8,7 +8,7 @@ import { type Provider, providers, providerDefaults, -} from "@/app/components/blocks/model-provider-provider"; +} from "@/app/components/mdx/elements/model-provider-provider"; /** * A tabbed section component that creates tabs for each provider From b5b9d640e572481c961b6feb4908fd8f8b92a74b Mon Sep 17 00:00:00 2001 From: Sebastian Huckleberry Date: Mon, 12 Jan 2026 17:38:28 -0800 Subject: [PATCH 3/4] refactor(cloud): rename generic "page" to "content" unless it's only for "docs" --- .../navigation/sidebar.tsx} | 0 cloud/app/components/blog-post-page.tsx | 20 +++++++------- .../{page-layout.tsx => content-layout.tsx} | 27 ++++++++++--------- .../{page-toc.tsx => content-toc.tsx} | 2 +- cloud/app/components/docs-page.tsx | 20 +++++++------- .../docs/sidebar.tsx => docs-sidebar.tsx} | 4 +-- cloud/app/components/docs-toc-sidebar.tsx | 4 +-- 7 files changed, 40 insertions(+), 37 deletions(-) rename cloud/app/components/{page-sidebar.tsx => blocks/navigation/sidebar.tsx} (100%) rename cloud/app/components/{page-layout.tsx => content-layout.tsx} (94%) rename cloud/app/components/{page-toc.tsx => content-toc.tsx} (98%) rename cloud/app/components/{blocks/docs/sidebar.tsx => docs-sidebar.tsx} (98%) diff --git a/cloud/app/components/page-sidebar.tsx b/cloud/app/components/blocks/navigation/sidebar.tsx similarity index 100% rename from cloud/app/components/page-sidebar.tsx rename to cloud/app/components/blocks/navigation/sidebar.tsx diff --git a/cloud/app/components/blog-post-page.tsx b/cloud/app/components/blog-post-page.tsx index 2da55bade2..0a2abc5b96 100644 --- a/cloud/app/components/blog-post-page.tsx +++ b/cloud/app/components/blog-post-page.tsx @@ -3,10 +3,10 @@ import { ButtonLink } from "@/app/components/ui/button-link"; import { MDXRenderer } from "@/app/components/mdx/renderer"; import { CopyMarkdownButton } from "@/app/components/blocks/copy-markdown-button"; import LoadingContent from "@/app/components/blocks/loading-content"; -import { PageTOC } from "@/app/components/page-toc"; +import { ContentTOC } from "@/app/components/content-toc"; // import { PagefindMeta } from "@/app/components/pagefind-meta"; import type { BlogContent } from "@/app/lib/content/types"; -import PageLayout from "@/app/components/page-layout"; +import ContentLayout from "@/app/components/content-layout"; import { useEffect, useState } from "react"; // Reusable component for "Back to Blog" button @@ -131,7 +131,7 @@ export function BlogPostPage({
{/* todo(sebastian): Make sure the headings have IDs in the mdx content */} - @@ -152,23 +152,23 @@ export function BlogPostPage({ author: author, }} /> */} - - + +
- + - {mainContent} + {mainContent} - {rightSidebarContent} - - + + ); } diff --git a/cloud/app/components/page-layout.tsx b/cloud/app/components/content-layout.tsx similarity index 94% rename from cloud/app/components/page-layout.tsx rename to cloud/app/components/content-layout.tsx index d110cd2dd6..23473746f8 100644 --- a/cloud/app/components/page-layout.tsx +++ b/cloud/app/components/content-layout.tsx @@ -3,7 +3,10 @@ import { createContext, useContext, useEffect } from "react"; import { cn } from "@/app/lib/utils"; import { Button } from "@/app/components/ui/button"; import { ChevronLeft, ChevronRight, X, type LucideIcon } from "lucide-react"; -import { useSidebar, isMobileView } from "@/app/components/page-sidebar"; +import { + useSidebar, + isMobileView, +} from "@/app/components/blocks/navigation/sidebar"; // Shared positioning for sidebar toggle buttons const SIDEBAR_TOGGLE_POSITION = "calc(var(--header-height) - 1.63rem)"; @@ -87,7 +90,7 @@ const SidebarToggle = ({ }; /** - * PageLayout - Comprehensive layout component with composable parts + * ContentLayout - Comprehensive layout component with composable parts * * Provides a consistent page structure with main content area and * optional sidebars. Sidebars use fixed positioning for scrolling behavior. @@ -96,14 +99,14 @@ const SidebarToggle = ({ * * Usage example: * ```tsx - * - * Left sidebar content - * Main content - * Right sidebar content - * + * + * Left sidebar content + * Main content + * Right sidebar content + * * ``` */ -const PageLayout = ({ children }: { children: ReactNode }) => { +const ContentLayout = ({ children }: { children: ReactNode }) => { // Create sidebar controllers with coordinated behavior // The hook now handles only mobile behavior const leftSidebar = useSidebar({ @@ -178,7 +181,7 @@ const SidebarBackdrop = ({ * Handles responsive collapsing on small screens with CSS media queries. * Sidebar content scrolls independently from main content. */ -PageLayout.LeftSidebar = ({ +ContentLayout.LeftSidebar = ({ children, className, collapsible = true, @@ -295,7 +298,7 @@ PageLayout.LeftSidebar = ({ * * Expands to fill available space between sidebars and scrolls independently. */ -PageLayout.Content = ({ children, className }: SidebarProps) => { +ContentLayout.Content = ({ children, className }: SidebarProps) => { return
{children}
; }; @@ -308,7 +311,7 @@ PageLayout.Content = ({ children, className }: SidebarProps) => { * When mobileCollapsible is true, the sidebar will be accessible on mobile * devices via a toggle button that shows a slide-in panel. */ -PageLayout.RightSidebar = ({ +ContentLayout.RightSidebar = ({ children, className, mobileCollapsible = false, @@ -389,4 +392,4 @@ PageLayout.RightSidebar = ({ ); }; -export default PageLayout; +export default ContentLayout; diff --git a/cloud/app/components/page-toc.tsx b/cloud/app/components/content-toc.tsx similarity index 98% rename from cloud/app/components/page-toc.tsx rename to cloud/app/components/content-toc.tsx index 29ffc2e983..57a58af26a 100644 --- a/cloud/app/components/page-toc.tsx +++ b/cloud/app/components/content-toc.tsx @@ -25,7 +25,7 @@ export interface TableOfContentsProps { * Takes explicit props instead of extracting content from the DOM. * Can optionally track which heading is currently active by observing heading elements. */ -export const PageTOC: React.FC = ({ +export const ContentTOC: React.FC = ({ headings, activeId: initialActiveId = "", observeHeadings = false, diff --git a/cloud/app/components/docs-page.tsx b/cloud/app/components/docs-page.tsx index 87456c9c0b..0381f227e2 100644 --- a/cloud/app/components/docs-page.tsx +++ b/cloud/app/components/docs-page.tsx @@ -1,10 +1,10 @@ import React from "react"; -import PageLayout from "@/app/components/page-layout"; +import ContentLayout from "@/app/components/content-layout"; import LoadingContent from "@/app/components/blocks/loading-content"; import { ProviderContextProvider } from "@/app/components/mdx/elements/model-provider-provider"; import DocsTocSidebar from "@/app/components/docs-toc-sidebar"; import MainContent from "@/app/components/blocks/docs/main-content"; -import DocsSidebar from "@/app/components/blocks/docs/sidebar"; +import DocsSidebar from "@/app/components/docs-sidebar"; import type { DocContent } from "@/app/lib/content/types"; type DocsPageProps = { @@ -22,20 +22,20 @@ const DocsPage: React.FC = ({ document, isLoading = false }) => { return ( <> - - + + - + - + {isLoading ? ( ) : ( document && )} - + - = ({ document, isLoading = false }) => { ) : ( document && )} - - + + ); diff --git a/cloud/app/components/blocks/docs/sidebar.tsx b/cloud/app/components/docs-sidebar.tsx similarity index 98% rename from cloud/app/components/blocks/docs/sidebar.tsx rename to cloud/app/components/docs-sidebar.tsx index ec40296d24..447a2d015b 100644 --- a/cloud/app/components/blocks/docs/sidebar.tsx +++ b/cloud/app/components/docs-sidebar.tsx @@ -1,13 +1,13 @@ import { docRegistry } from "@/app/lib/content/doc-registry"; import type { DocSpec, SectionSpec } from "@/app/lib/content/spec"; import { type Provider } from "@/app/components/mdx/elements/model-provider-provider"; -import Sidebar from "@/app/components/page-sidebar"; +import Sidebar from "@/app/components/blocks/navigation/sidebar"; import type { SidebarConfig, SidebarItem, SidebarGroup, SidebarSection, -} from "@/app/components/page-sidebar"; +} from "@/app/components/blocks/navigation/sidebar"; import { docsSpec } from "@/content/docs/_meta"; interface DocsSidebarProps { diff --git a/cloud/app/components/docs-toc-sidebar.tsx b/cloud/app/components/docs-toc-sidebar.tsx index 93b70d3391..67e1ead6b3 100644 --- a/cloud/app/components/docs-toc-sidebar.tsx +++ b/cloud/app/components/docs-toc-sidebar.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { PageTOC } from "@/app/components/page-toc"; +import { ContentTOC } from "@/app/components/content-toc"; import { Server } from "lucide-react"; import { ModelProviderDropdown } from "@/app/components/mdx/elements/model-provider-dropdown"; import { type DocContent } from "@/app/lib/content/types"; @@ -42,7 +42,7 @@ const DocsTocSidebar: React.FC = ({ document }) => { On this page
- From 950a150c7c7a983d2ad17bbff842f55ff6054162 Mon Sep 17 00:00:00 2001 From: Sebastian Huckleberry Date: Mon, 12 Jan 2026 20:20:05 -0800 Subject: [PATCH 4/4] rename(cloud): clarify model provider versus context provider --- cloud/app/components/docs-page.tsx | 6 +++--- cloud/app/components/home-page.tsx | 4 ++-- .../app/components/mdx/elements/model-provider-provider.tsx | 6 +++--- ...ction-provider.tsx => model-provider-tabbed-section.tsx} | 4 ++-- cloud/app/styles/{pages.css => content.css} | 0 cloud/app/styles/globals.css | 2 +- 6 files changed, 11 insertions(+), 11 deletions(-) rename cloud/app/components/mdx/elements/{tabbed-section-provider.tsx => model-provider-tabbed-section.tsx} (97%) rename cloud/app/styles/{pages.css => content.css} (100%) diff --git a/cloud/app/components/docs-page.tsx b/cloud/app/components/docs-page.tsx index 0381f227e2..bf920d9c1b 100644 --- a/cloud/app/components/docs-page.tsx +++ b/cloud/app/components/docs-page.tsx @@ -1,7 +1,7 @@ import React from "react"; import ContentLayout from "@/app/components/content-layout"; import LoadingContent from "@/app/components/blocks/loading-content"; -import { ProviderContextProvider } from "@/app/components/mdx/elements/model-provider-provider"; +import { ModelProviderProvider } from "@/app/components/mdx/elements/model-provider-provider"; import DocsTocSidebar from "@/app/components/docs-toc-sidebar"; import MainContent from "@/app/components/blocks/docs/main-content"; import DocsSidebar from "@/app/components/docs-sidebar"; @@ -21,7 +21,7 @@ type DocsPageProps = { const DocsPage: React.FC = ({ document, isLoading = false }) => { return ( <> - + @@ -49,7 +49,7 @@ const DocsPage: React.FC = ({ document, isLoading = false }) => { )} - + ); }; diff --git a/cloud/app/components/home-page.tsx b/cloud/app/components/home-page.tsx index 3c6530c46a..aca881c25d 100644 --- a/cloud/app/components/home-page.tsx +++ b/cloud/app/components/home-page.tsx @@ -231,7 +231,7 @@ export const MirascopeBlock = ({ onScrollToTop }: MirascopeBlockProps) => { /> */}
{/* todo(seb): Add provider tabbed section */} - {/* @@ -239,7 +239,7 @@ export const MirascopeBlock = ({ onScrollToTop }: MirascopeBlockProps) => { } > - */} + */}
diff --git a/cloud/app/components/mdx/elements/model-provider-provider.tsx b/cloud/app/components/mdx/elements/model-provider-provider.tsx index 213bc967bb..5a73960080 100644 --- a/cloud/app/components/mdx/elements/model-provider-provider.tsx +++ b/cloud/app/components/mdx/elements/model-provider-provider.tsx @@ -130,7 +130,7 @@ export function replaceProviderVariables( import { temporarilyEnableSyncHighlighting } from "@/app/lib/code-highlight"; // Create a context to share the selected provider -interface ProviderContextType { +interface ModelProviderProviderType { provider: Provider; setProvider: (provider: Provider) => void; providerInfo: { @@ -139,7 +139,7 @@ interface ProviderContextType { }; } -const ProviderContext = createContext( +const ProviderContext = createContext( undefined, ); @@ -155,7 +155,7 @@ const validateProvider = ( }; // Provider component that wraps the content and provides the state -export function ProviderContextProvider({ +export function ModelProviderProvider({ children, defaultProvider = "openai", onProviderChange, diff --git a/cloud/app/components/mdx/elements/tabbed-section-provider.tsx b/cloud/app/components/mdx/elements/model-provider-tabbed-section.tsx similarity index 97% rename from cloud/app/components/mdx/elements/tabbed-section-provider.tsx rename to cloud/app/components/mdx/elements/model-provider-tabbed-section.tsx index 2cf9788b3f..633bd2ca2b 100644 --- a/cloud/app/components/mdx/elements/tabbed-section-provider.tsx +++ b/cloud/app/components/mdx/elements/model-provider-tabbed-section.tsx @@ -11,10 +11,10 @@ import { } from "@/app/components/mdx/elements/model-provider-provider"; /** - * A tabbed section component that creates tabs for each provider + * A tabbed section component that creates tabs for each model provider * and integrates with the provider context for selection state */ -export default function ProviderTabbedSection({ +export default function ModelProviderTabbedSection({ children, className = "", showLogo = false, diff --git a/cloud/app/styles/pages.css b/cloud/app/styles/content.css similarity index 100% rename from cloud/app/styles/pages.css rename to cloud/app/styles/content.css diff --git a/cloud/app/styles/globals.css b/cloud/app/styles/globals.css index a5747c95fc..128d754322 100644 --- a/cloud/app/styles/globals.css +++ b/cloud/app/styles/globals.css @@ -1,7 +1,7 @@ @import "tailwindcss"; @import "tw-animate-css"; -@import "./pages.css"; +@import "./content.css"; @custom-variant dark (&:is(.dark *));