diff --git a/apps/docs/.env.example b/apps/docs/.env.example index 3889456f1c..41fa308744 100644 --- a/apps/docs/.env.example +++ b/apps/docs/.env.example @@ -21,4 +21,9 @@ NEXT_PUBLIC_FB_FEEDBACK_URL= # PostHog NEXT_PUBLIC_POSTHOG_KEY=your-posthog-key -NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host \ No newline at end of file +NEXT_PUBLIC_POSTHOG_HOST=your-posthog-host + +# Chat +IMPORT_API_KEY=your-import-api-key +CHAT_API_URL= +CHAT_URL= diff --git a/apps/docs/actions/open-in-chat.ts b/apps/docs/actions/open-in-chat.ts new file mode 100644 index 0000000000..b4374dec6c --- /dev/null +++ b/apps/docs/actions/open-in-chat.ts @@ -0,0 +1,58 @@ +"use server"; + +import {SandpackFiles} from "@codesandbox/sandpack-react/types"; + +import {parseDependencies} from "@/components/docs/components/code-demo/parse-dependencies"; + +const importReact = 'import React from "react";'; + +export const openInChat = async ({title, files}: {title?: string; files: SandpackFiles}) => { + try { + // assumes one file for now + let content = files["/App.jsx"]; + + if (!content || typeof content !== "string") { + return { + error: "Content is not a string", + data: null, + }; + } + + // Check if the file content includes 'React' import statements, if not, add it + if ( + content.includes("React.") && + !content.includes("from 'react'") && + !content.includes('from "react"') + ) { + content = `${importReact}\n${content}\n`; + } + + const dependencies = parseDependencies(content); + + const response = await fetch(`${process.env.CHAT_API_URL}/import`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${process.env.IMPORT_API_KEY}`, + }, + body: JSON.stringify({ + title, + content, + dependencies, + }), + }); + + const result = await response.json(); + + if (result.error || !result.path) { + return { + error: result.error ?? "Unknown error", + data: null, + }; + } + + return {error: null, data: `${process.env.CHAT_URL}${result.path}`}; + } catch (error) { + return {error: error, data: null}; + } +}; diff --git a/apps/docs/app/docs/[[...slug]]/page.tsx b/apps/docs/app/docs/[[...slug]]/page.tsx index da649aba04..0d8aa28f70 100644 --- a/apps/docs/app/docs/[[...slug]]/page.tsx +++ b/apps/docs/app/docs/[[...slug]]/page.tsx @@ -2,7 +2,7 @@ import type {Metadata} from "next"; import {notFound} from "next/navigation"; import {allDocs} from "contentlayer2/generated"; -import {Link} from "@heroui/react"; +import {Link, ToastProvider} from "@heroui/react"; import {MDXContent} from "@/components/mdx-content"; import {siteConfig} from "@/config/site"; @@ -104,6 +104,8 @@ export default async function DocPage({params}: DocPageProps) { )} + {/* toast page has its own provider*/} + {doc.title !== "Toast" && } ); } diff --git a/apps/docs/components/docs/components/code-demo/code-demo.tsx b/apps/docs/components/docs/components/code-demo/code-demo.tsx index 65b5f9e3e8..d18d4fa991 100644 --- a/apps/docs/components/docs/components/code-demo/code-demo.tsx +++ b/apps/docs/components/docs/components/code-demo/code-demo.tsx @@ -1,14 +1,18 @@ "use client"; -import React, {useCallback, useMemo, useRef} from "react"; +import React, {useCallback, useMemo, useRef, useState} from "react"; import dynamic from "next/dynamic"; -import {Skeleton, Tab, Tabs} from "@heroui/react"; +import {addToast, Button, Skeleton, Spinner, Tab, Tabs} from "@heroui/react"; import {useInView} from "framer-motion"; +import {usePostHog} from "posthog-js/react"; +import {usePathname} from "next/navigation"; import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo"; import WindowResizer, {WindowResizerProps} from "./window-resizer"; import {GradientBoxProps} from "@/components/gradient-box"; +import {SmallLogo} from "@/components/heroui-logo"; +import {openInChat} from "@/actions/open-in-chat"; const DynamicReactLiveDemo = dynamic( () => import("./react-live-demo").then((m) => m.ReactLiveDemo), @@ -75,6 +79,11 @@ export const CodeDemo: React.FC = ({ margin: "600px", }); + const pathname = usePathname(); + const posthog = usePostHog(); + + const [isLoading, setIsLoading] = useState(false); + const {noInline, code} = useCodeDemo({ files, }); @@ -166,24 +175,83 @@ export const CodeDemo: React.FC = ({ return true; }, [showTabs, showPreview, showEditor]); + const isComponentsPage = pathname.includes("/components/"); + + const handleOpenInChat = useCallback(async () => { + setIsLoading(true); + + const component = pathname.split("/components/")[1]; + + posthog.capture("CodeDemo - Open in Chat", { + component, + demo: title, + }); + + const capitalizedPath = component.charAt(0).toUpperCase() + component.slice(1); + const {data, error} = await openInChat({title: `${capitalizedPath} - ${title}`, files}); + + setIsLoading(false); + + if (error || !data) { + posthog.capture("CodeDemo - Open in Chat Error", { + component, + demo: title, + error: error ?? "Unknown error", + }); + + addToast({ + title: "Error", + description: error ?? "Unknown error", + color: "danger", + }); + + return; + } + + window.open(data, "_blank"); + }, [pathname, title, files, posthog]); + return ( -
+
{shouldRenderTabs ? ( - - - {previewContent} - - - {editorContent} - - + <> + + + {previewContent} + + + {editorContent} + + + {isComponentsPage && ( + + )} + ) : ( <> {previewContent} diff --git a/apps/docs/components/docs/components/code-demo/parse-dependencies.ts b/apps/docs/components/docs/components/code-demo/parse-dependencies.ts new file mode 100644 index 0000000000..cfcb10b5a3 --- /dev/null +++ b/apps/docs/components/docs/components/code-demo/parse-dependencies.ts @@ -0,0 +1,33 @@ +const packageRegex = /(?:from|import)\s+(?:.*\s+from\s+)?['"]([^'"]+)['"]/g; + +export const parseDependencies = (content: string) => { + const dependencies: {name: string; version: string}[] = []; + + content.match(packageRegex)?.forEach((match) => { + if (match.includes("@heroui")) { + return; + } + + if (match.includes("./") || match.includes("../")) { + return; + } + + const packageName = match.match(/['"]([^'"]+)['"]/)?.[1]; + + if (!packageName) { + return; + } + + dependencies.push({ + name: packageName, + version: fixedVersions[packageName] || "latest", + }); + }); + + return dependencies; +}; + +const fixedVersions = { + "@internationalized/date": "3.7.0", + "@react-aria/i18n": "3.12.5", +};