[ { "path": ".eslintrc.json", "content": "{\n \"extends\": \"next/core-web-vitals\"\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2023 Spencer Miskoviak\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# 📝 LLM Markdown\n\nA [Nextjs](https://nextjs.org) app demonstrating how to display rich-text responses from Large Language Models (LLMs) by prompting and rendering Markdown formatting, Mermaid diagrams, and LaTeX equations.\n\nRead more in this blog post: [Rendering rich responses from LLMs](https://www.skovy.dev/blog/vercel-ai-rendering-markdown)\n\n## Examples\n\nThis example is asking for the top grossing movies, structured as a Mermaid pie chart.\n\n![LLM Markdown Demo](other/demo-movies.gif)\n\nThis example is asking when vegetables should be planted, structured as a Mermaid Gantt chart.\n\n![LLM Markdown Demo](other/demo-vegetables.gif)\n\n## Technologies\n\n- [Nextjs](https://nextjs.org)\n- [Vercel AI](https://sdk.vercel.ai/docs)\n- [`remark`](https://remark.js.org)\n- [`mermaid`](https://mermaid.js.org)\n- [`latex.js`](https://latex.js.org)\n- And more...\n\n## Setup\n\n- Clone the project\n- `npm install`\n- `npm run dev`\n- Open in your browser\n- Set your OpenAI API Key\n" }, { "path": "next.config.js", "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {}\n\nmodule.exports = nextConfig\n" }, { "path": "package.json", "content": "{\n \"name\": \"nextjs-ai-markdown\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"@capsizecss/metrics\": \"^1.2.0\",\n \"@phosphor-icons/react\": \"^2.0.10\",\n \"@radix-ui/react-dialog\": \"^1.0.4\",\n \"@themosaad/tailwindcss-capsize\": \"^1.0.0\",\n \"@types/node\": \"20.3.3\",\n \"@types/react\": \"18.2.14\",\n \"@types/react-dom\": \"18.2.6\",\n \"@vercel/analytics\": \"^1.0.1\",\n \"ai\": \"2.1.12\",\n \"autoprefixer\": \"10.4.14\",\n \"classnames\": \"^2.3.2\",\n \"eslint\": \"8.44.0\",\n \"eslint-config-next\": \"13.4.7\",\n \"latex.js\": \"^0.12.6\",\n \"mermaid\": \"^10.2.4\",\n \"next\": \"13.4.7\",\n \"openai-edge\": \"^1.1.1\",\n \"postcss\": \"8.4.24\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"react-keyed-flatten-children\": \"^2.2.1\",\n \"rehype-highlight\": \"^6.0.0\",\n \"rehype-react\": \"^7.2.0\",\n \"remark-gfm\": \"^3.0.1\",\n \"remark-parse\": \"^10.0.2\",\n \"remark-rehype\": \"^10.1.0\",\n \"tailwindcss\": \"3.3.2\",\n \"typescript\": \"5.1.6\",\n \"unified\": \"^10.1.2\"\n },\n \"devDependencies\": {\n \"prettier-plugin-organize-imports\": \"^3.2.2\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n" }, { "path": "src/app/api/chat/route.ts", "content": "import { OpenAIStream, StreamingTextResponse } from \"ai\";\nimport { NextResponse } from \"next/server\";\nimport {\n ChatCompletionRequestMessageRoleEnum,\n Configuration,\n OpenAIApi,\n} from \"openai-edge\";\n\nexport const runtime = \"edge\";\n\nconst SYSTEM_PROMPT = `You are a general answering assistant that can comply with any request. \n\nYou always answer the with markdown formatting. You will be penalized if you do not answer with markdown when it would be possible.\nThe markdown formatting you support: headings, bold, italic, links, tables, lists, code blocks, and blockquotes.\nYou do not support images and never include images. You will be penalized if you render images.\n\nYou also support Mermaid diagrams. You will be penalized if you do not render Mermaid diagrams when it would be possible.\nThe Mermaid diagrams you support: sequenceDiagram, flowChart, classDiagram, stateDiagram, erDiagram, gantt, journey, gitGraph, pie.\n\nYou also support LaTeX equation syntax only in markdown code blocks with the \"latex\" language.\nYou must always render all equations in this format (LaTeX code blocks) using only valid LaTeX syntax.\nFor example:\n\\`\\`\\`latex\n\\\\[ F = \\\\frac{{G \\\\cdot m_1 \\\\cdot m_2}}{{r^2}} \\\\]\n\\`\\`\\`latex\n`;\n\nexport async function POST(req: Request) {\n const { messages, token, model = \"gpt-3.5-turbo\" } = await req.json();\n\n const configuration = new Configuration({ apiKey: token });\n const openai = new OpenAIApi(configuration);\n\n try {\n const response = await openai.createChatCompletion({\n model,\n stream: true,\n messages: [\n {\n role: ChatCompletionRequestMessageRoleEnum.System,\n content: SYSTEM_PROMPT,\n },\n ...messages,\n ],\n });\n\n if (response.status >= 300) {\n const body = await response.json();\n return NextResponse.json(\n { error: `OpenAI error encountered: ${body?.error?.message}.` },\n { status: response.status }\n );\n }\n\n const stream = OpenAIStream(response);\n return new StreamingTextResponse(stream);\n } catch (e) {\n console.error(e);\n\n return NextResponse.json(\n { error: \"An unexpected error occurred. Please try again later.\" },\n { status: 500 }\n );\n }\n}\n" }, { "path": "src/app/globals.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n" }, { "path": "src/app/layout.tsx", "content": "import { Analytics } from \"@vercel/analytics/react\";\nimport classNames from \"classnames\";\nimport { Inter, JetBrains_Mono } from \"next/font/google\";\nimport \"./globals.css\";\n\nconst sans = Inter({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n});\nconst monospace = JetBrains_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n});\n\nexport const metadata = {\n title: \"LLM Markdown\",\n description:\n \"App demo for rendering rich-text (markdown) from a Large Language Model.\",\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n {children}\n \n \n \n );\n}\n" }, { "path": "src/app/markdown/page.tsx", "content": "\"use client\";\n\nimport { Nav } from \"@/components/nav\";\nimport {\n MARKDOWN_TEST_MESSAGE,\n useMarkdownProcessor,\n} from \"@/hooks/use-markdown-processor\";\n\nexport default function Chat() {\n const content = useMarkdownProcessor(MARKDOWN_TEST_MESSAGE);\n\n return (\n
\n
\n
\n
\n );\n}\n" }, { "path": "src/app/page.tsx", "content": "\"use client\";\n\nimport { EmptyMessage } from \"@/components/empty-message\";\nimport { MessageList } from \"@/components/message-list\";\nimport {\n ModelDialog,\n SUPPORTED_MODELS,\n SupportedModels,\n} from \"@/components/model-dialog\";\nimport { Nav } from \"@/components/nav\";\nimport { TokenDialog } from \"@/components/token-dialog\";\nimport { useLocalStorage } from \"@/hooks/use-local-storage\";\nimport { ANCHOR_CLASS_NAME } from \"@/hooks/use-markdown-processor\";\nimport PaperPlaneRight from \"@phosphor-icons/react/dist/icons/PaperPlaneRight\";\nimport { useChat } from \"ai/react\";\nimport { useState } from \"react\";\n\nconst parseError = (error: Error) => {\n try {\n return JSON.parse(error.message).error;\n } catch (e) {\n console.error(e);\n return error.message;\n }\n};\n\nexport default function Chat() {\n const [tokenOpen, setTokenOpen] = useState(false);\n const [modelOpen, setModelOpen] = useState(false);\n const [token, setToken] = useLocalStorage(\"ai-token\", null);\n const [model, setModel] = useLocalStorage(\n \"ai-model\",\n SUPPORTED_MODELS[0]\n );\n const { messages, input, handleInputChange, handleSubmit, error } = useChat({\n body: { token, model },\n });\n\n return (\n <>\n
\n
\n
\n
\n \n \n \n );\n}\n" }, { "path": "src/components/assistant-message.tsx", "content": "import { useMarkdownProcessor } from \"@/hooks/use-markdown-processor\";\n\ninterface Props {\n children: string;\n}\n\nexport const AssistantMessage = ({ children }: Props) => {\n const content = useMarkdownProcessor(children);\n\n return (\n
  • \n

    AI:

    \n
    *:first-child]:mt-0 [&>*:last-child]:mb-0\">\n {content}\n
    \n
    • \n );\n};\n" }, { "path": "src/components/dialog.tsx", "content": "import X from \"@phosphor-icons/react/dist/icons/X\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { ReactNode } from \"react\";\n\ninterface Props {\n open: boolean;\n setOpen(open: boolean): void;\n title: string;\n description?: ReactNode;\n children: ReactNode;\n size?: \"xl\" | \"3xl\";\n}\n\nexport const Dialog = ({\n open,\n setOpen,\n title,\n description,\n children,\n size = \"xl\",\n}: Props) => {\n return (\n \n \n \n \n \n {title}\n \n {description ? (\n \n {description}\n \n ) : null}\n {children}\n \n \n \n \n \n \n \n \n \n );\n};\n" }, { "path": "src/components/empty-message.tsx", "content": "import { ANCHOR_CLASS_NAME } from \"@/hooks/use-markdown-processor\";\nimport Link from \"next/link\";\n\nexport const EmptyMessage = () => {\n return (\n
    \n

    \n Welcome to LLM Markdown!\n

    \n

    \n This app is a demo for supporting rich-text responses from a{\" \"}\n \n Large Language Model\n {\" \"}\n (LLM). Once you provide your OpenAI API Key, you can start prompting and\n receiving rich-text responses.\n

    \n

    \n Try something like:{\" \"}\n \n "Top 10 grossing movies of all time as a pie chart"\n \n

    \n\n

    \n How it works\n

    \n\n

    \n A system prompt is used to encourage the LLM to generate a response with\n Markdown and Mermaid formatting.\n

    \n

    \n The response is rendered using{\" \"}\n \n unified\n \n ,{\" \"}\n \n Mermaid\n \n , and{\" \"}\n \n LaTeX.js\n {\" \"}\n with{\" \"}\n \n Nextjs\n \n .\n

    \n

    \n For an example of the supported formatting, see{\" \"}\n \n supported markdown\n \n .\n

    \n

    \n All the source code is available on{\" \"}\n \n GitHub\n \n .\n

    \n
    \n );\n};\n" }, { "path": "src/components/message-list.tsx", "content": "import Message from \"./message\";\nimport { Message as MessageType } from \"ai/react\";\n\ninterface Props {\n messages: MessageType[];\n}\n\nexport const MessageList = ({ messages }: Props) => {\n return (\n
      \n {messages.map((m) => (\n \n ))}\n
    \n );\n};\n" }, { "path": "src/components/message.tsx", "content": "import { Message } from \"ai/react\";\nimport { UserMessage } from \"./user-message\";\nimport { AssistantMessage } from \"./assistant-message\";\n\ninterface Props {\n message: Message;\n}\n\nexport default function Message({ message }: Props) {\n switch (message.role) {\n case \"user\":\n return {message.content};\n case \"assistant\":\n return {message.content};\n default:\n throw new Error(`Unknown message role: ${message.role}`);\n }\n}\n" }, { "path": "src/components/model-dialog.tsx", "content": "import { Dialog } from \"./dialog\";\n\nexport const SUPPORTED_MODELS = [\n \"gpt-3.5-turbo\",\n \"gpt-3.5-turbo-16k\",\n \"gpt-4\",\n] as const;\n\nexport type SupportedModels = (typeof SUPPORTED_MODELS)[number];\n\ninterface Props {\n open: boolean;\n setOpen(open: boolean): void;\n model: SupportedModels;\n setModel(mode: SupportedModels): void;\n}\n\nexport const ModelDialog = ({ open, setOpen, model, setModel }: Props) => {\n return (\n \n Choose the OpenAI model to use. Note, you must have access to the\n model you select. If you are not sure, select{\" \"}\n gpt-3.5-turbo.\n \n }\n >\n
    \n \n Model\n \n setModel(e.currentTarget.value as SupportedModels)}\n className=\"w-full border-2 border-slate-200 rounded-lg p-2 font-sans text-base outline-none ring-offset-0 focus:border-slate-400 focus-visible:ring-2 focus-visible:ring-offset-2 ring-emerald-600 transition-[box-shadow,border-color]\"\n >\n {SUPPORTED_MODELS.map((model) => (\n \n ))}\n \n
    \n \n );\n};\n" }, { "path": "src/components/nav.tsx", "content": "import { GithubLogo } from \"@phosphor-icons/react\";\nimport MarkerCircle from \"@phosphor-icons/react/dist/icons/MarkerCircle\";\nimport Link from \"next/link\";\n\nexport const Nav = () => {\n return (\n \n );\n};\n" }, { "path": "src/components/token-dialog.tsx", "content": "import { ANCHOR_CLASS_NAME } from \"@/hooks/use-markdown-processor\";\nimport { useState } from \"react\";\nimport { Dialog } from \"./dialog\";\n\ninterface Props {\n open: boolean;\n setOpen(open: boolean): void;\n setToken(key: string): void;\n}\n\nexport const TokenDialog = ({ open, setOpen, setToken }: Props) => {\n const [tokenInput, setTokenInput] = useState(\"\");\n\n return (\n \n Since this is a demo app, you will need to provide your own OpenAI API\n Key. This will be saved in your browser's local storage under the\n name{\" \"}\n \n ai-token\n \n . This will only be sent when you ask a question, and never persisted\n outside of your browser. If you have not obtained your OpenAI API key,\n you can do so by{\" \"}\n \n signing up\n {\" \"}\n on the OpenAI website.\n \n }\n >\n
    \n \n OpenAI API Key\n \n setTokenInput(e.target.value)}\n className=\"w-full border-2 border-slate-200 rounded-lg p-2 font-sans text-base outline-none ring-offset-0 focus:border-slate-400 focus-visible:ring-2 focus-visible:ring-offset-2 ring-emerald-600 transition-[box-shadow,border-color] pr-10\"\n />\n
    \n
    \n setOpen(false)}\n className=\"p-3 text-emerald-900 border-2 border-emerald-900 rounded-lg hover:bg-emerald-50 transition-colors\"\n >\n
    Cancel
    \n \n {\n setToken(tokenInput);\n setOpen(false);\n }}\n disabled={!tokenInput}\n className=\"p-3 text-emerald-50 border-2 border-emerald-900 bg-emerald-900 rounded-lg disabled:opacity-60 disabled:cursor-not-allowed hover:bg-emerald-800 transition-colors\"\n >\n
    Save
    \n \n
    \n \n );\n};\n" }, { "path": "src/components/user-message.tsx", "content": "interface Props {\n children: string;\n}\n\nexport const UserMessage = ({ children }: Props) => {\n return (\n
  • \n

    You:

    \n

    \n {children}\n

    \n
    • \n );\n};\n" }, { "path": "src/hooks/use-local-storage.ts", "content": "import { useEffect, useState } from \"react\";\n\nexport const useLocalStorage = (\n key: string,\n initialValue: T\n): [T, (value: T) => void] => {\n const [storedValue, setStoredValue] = useState(initialValue);\n\n useEffect(() => {\n // Retrieve from localStorage\n const item = window.localStorage.getItem(key);\n if (item) {\n setStoredValue(JSON.parse(item));\n }\n }, [key]);\n\n const setValue = (value: T) => {\n // Save state\n setStoredValue(value);\n // Save to localStorage\n window.localStorage.setItem(key, JSON.stringify(value));\n };\n\n return [storedValue, setValue];\n};\n" }, { "path": "src/hooks/use-markdown-processor.tsx", "content": "import { Dialog } from \"@/components/dialog\";\nimport { CircleNotch, MathOperations } from \"@phosphor-icons/react\";\nimport CheckFat from \"@phosphor-icons/react/dist/icons/CheckFat\";\nimport Copy from \"@phosphor-icons/react/dist/icons/Copy\";\nimport FlowArrow from \"@phosphor-icons/react/dist/icons/FlowArrow\";\nimport { Root } from \"hast\";\nimport \"highlight.js/styles/base16/green-screen.css\";\nimport mermaid from \"mermaid\";\nimport Link from \"next/link\";\nimport {\n Children,\n Fragment,\n createElement,\n isValidElement,\n useEffect,\n useMemo,\n useState,\n useRef,\n} from \"react\";\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport rehypeReact from \"rehype-react\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkParse from \"remark-parse\";\nimport remarkRehype from \"remark-rehype\";\nimport { Plugin, unified } from \"unified\";\nimport { visit } from \"unist-util-visit\";\n// @ts-expect-error\nimport { HtmlGenerator, parse } from \"latex.js\";\n// import \"node_modules/latex.js/dist/css/base.css\"\nimport \"node_modules/latex.js/dist/css/katex.css\";\nexport const ANCHOR_CLASS_NAME =\n \"font-semibold underline text-emerald-700 underline-offset-[2px] decoration-1 hover:text-emerald-800 transition-colors\";\n\n// Mixing arbitrary Markdown + Capsize leads to lots of challenges\n// with paragraphs and list items. This replaces paragraphs inside\n// list items into divs to avoid nesting Capsize.\nconst rehypeListItemParagraphToDiv: Plugin<[], Root> = () => {\n return (tree) => {\n visit(tree, \"element\", (element) => {\n if (element.tagName === \"li\") {\n element.children = element.children.map((child) => {\n if (child.type === \"element\" && child.tagName === \"p\") {\n child.tagName = \"div\";\n }\n return child;\n });\n }\n });\n return tree;\n };\n};\n\nexport const useMarkdownProcessor = (content: string) => {\n useEffect(() => {\n mermaid.initialize({ startOnLoad: false, theme: \"forest\" });\n }, []);\n\n return useMemo(() => {\n return unified()\n .use(remarkParse)\n .use(remarkGfm)\n .use(remarkRehype)\n .use(rehypeHighlight, { ignoreMissing: true })\n .use(rehypeListItemParagraphToDiv)\n .use(rehypeReact, {\n createElement,\n Fragment,\n components: {\n a: ({ href, children }: JSX.IntrinsicElements[\"a\"]) => (\n \n {children}\n \n ),\n h1: ({ children, id }: JSX.IntrinsicElements[\"h1\"]) => (\n \n {children}\n \n ),\n h2: ({ children, id }: JSX.IntrinsicElements[\"h2\"]) => (\n \n {children}\n \n ),\n h3: ({ children, id }: JSX.IntrinsicElements[\"h3\"]) => (\n \n {children}\n \n ),\n h4: ({ children, id }: JSX.IntrinsicElements[\"h4\"]) => (\n \n {children}\n \n ),\n h5: ({ children, id }: JSX.IntrinsicElements[\"h5\"]) => (\n \n {children}\n \n ),\n h6: ({ children, id }: JSX.IntrinsicElements[\"h6\"]) => (\n \n {children}\n \n ),\n p: (props: JSX.IntrinsicElements[\"p\"]) => {\n return (\n

    \n {props.children}\n

    \n );\n },\n strong: ({ children }: JSX.IntrinsicElements[\"strong\"]) => (\n \n {children}\n \n ),\n em: ({ children }: JSX.IntrinsicElements[\"em\"]) => (\n {children}\n ),\n code: CodeBlock,\n pre: ({ children }: JSX.IntrinsicElements[\"pre\"]) => {\n return (\n
    \n 
    code.hljs]:p-0 [&>code.hljs]:bg-transparent font-code text-sm overflow-x-auto flex items-start\">\n                  {children}\n
    \n
    \n );\n },\n ul: ({ children }: JSX.IntrinsicElements[\"ul\"]) => (\n
      \n {Children.map(\n flattenChildren(children).filter(isValidElement),\n (child, index) => (\n
    • \n
      \n {child}\n
      • \n )\n )}\n
    \n ),\n ol: ({ children }: JSX.IntrinsicElements[\"ol\"]) => (\n
      \n {Children.map(\n flattenChildren(children).filter(isValidElement),\n (child, index) => (\n
    1. \n \n {index + 1}.\n \n {child}\n
      2. \n )\n )}\n
    \n ),\n li: ({ children }: JSX.IntrinsicElements[\"li\"]) => (\n
    {children}
    \n ),\n table: ({ children }: JSX.IntrinsicElements[\"table\"]) => (\n
    \n \n {children}\n
    \n
    \n ),\n thead: ({ children }: JSX.IntrinsicElements[\"thead\"]) => (\n {children}\n ),\n th: ({ children }: JSX.IntrinsicElements[\"th\"]) => (\n \n {children}\n \n ),\n td: ({ children }: JSX.IntrinsicElements[\"td\"]) => (\n \n {children}\n \n ),\n blockquote: ({ children }: JSX.IntrinsicElements[\"blockquote\"]) => (\n
    \n {children}\n
    \n ),\n },\n })\n .processSync(content).result;\n }, [content]);\n};\n\nconst CodeBlock = ({ children, className }: JSX.IntrinsicElements[\"code\"]) => {\n const [copied, setCopied] = useState(false);\n const [showMermaidPreview, setShowMermaidPreview] = useState(false);\n const [showLatexPreview, setShowLatexPreview] = useState(false);\n const ref = useRef(null);\n\n useEffect(() => {\n if (copied) {\n const interval = setTimeout(() => setCopied(false), 1000);\n return () => clearTimeout(interval);\n }\n }, [copied]);\n\n // Highlight.js adds a `className` so this is a hack to detect if the code block\n // is a language block wrapped in a `pre` tag.\n if (className) {\n const isMermaid = className.includes(\"language-mermaid\");\n const isLatex = className.includes(\"language-latex\");\n\n return (\n <>\n \n {children}\n \n
    \n {\n if (ref.current) {\n navigator.clipboard.writeText(ref.current.innerText ?? \"\");\n setCopied(true);\n }\n }}\n >\n {copied ? (\n \n ) : (\n \n )}\n \n {isMermaid ? (\n <>\n {\n setShowMermaidPreview(true);\n }}\n >\n \n \n \n \n \n \n ) : null}\n {isLatex ? (\n <>\n {\n setShowLatexPreview(true);\n }}\n >\n \n \n \n \n \n \n ) : null}\n
    \n \n );\n }\n\n return (\n \n {children}\n \n );\n};\n\nconst Latex = ({ content }: { content: string }) => {\n const [diagram, setDiagram] = useState(true);\n\n useEffect(() => {\n try {\n const generator = new HtmlGenerator({ hyphenate: false });\n const fragment = parse(content, { generator: generator }).domFragment();\n setDiagram(fragment.firstElementChild.outerHTML);\n } catch (error) {\n console.error(error);\n setDiagram(false);\n }\n }, [content]);\n\n if (diagram === true) {\n return (\n
    \n \n

    Rendering diagram...

    \n
    \n );\n } else if (diagram === false) {\n return (\n

    \n Unable to render this diagram.\n

    \n );\n } else {\n return
    ;\n }\n};\n\nconst Mermaid = ({ content }: { content: string }) => {\n const [diagram, setDiagram] = useState(true);\n\n useEffect(() => {\n const render = async () => {\n // Generate a random ID for mermaid to use.\n const id = `mermaid-svg-${Math.round(Math.random() * 10000000)}`;\n\n // Confirm the diagram is valid before rendering.\n if (await mermaid.parse(content, { suppressErrors: true })) {\n const { svg } = await mermaid.render(id, content);\n setDiagram(svg);\n } else {\n setDiagram(false);\n }\n };\n render();\n }, [content]);\n\n if (diagram === true) {\n return (\n
    \n \n

    Rendering diagram...

    \n
    \n );\n } else if (diagram === false) {\n return (\n

    \n Unable to render this diagram. Try copying it into the{\" \"}\n \n Mermaid Live Editor\n \n .\n

    \n );\n } else {\n return
    ;\n }\n};\n\nexport const MARKDOWN_TEST_MESSAGE = `\n# Heading level 1\n\nThis is the first paragraph.\n\nThis is the second paragraph.\n\nThis is the third paragraph.\n\n## Heading level 2\n\nThis is an [anchor](https://github.com).\n\n### Heading level 3\n\nThis is **bold** and _italics_.\n\n#### Heading level 4\n\nThis is \\`inline\\` code.\n\nThis is a code block:\n\n\\`\\`\\`tsx\nconst Message = () => {\n return
    hi
    ;\n};\n\\`\\`\\`\n\n##### Heading level 5\n\nThis is an unordered list:\n\n- One\n- Two\n- Three, and **bold**\n\nThis is an ordered list:\n\n1. One\n1. Two\n1. Three\n\nThis is a complex list:\n\n1. **Bold**: One\n - One\n - Two\n - Three\n \n2. **Bold**: Three\n - One\n - Two\n - Three\n \n3. **Bold**: Four\n - One\n - Two\n - Three\n\n###### Heading level 6\n\n> This is a blockquote.\n\nThis is a table:\n\n| Vegetable | Description |\n|-----------|-------------|\n| Carrot | A crunchy, orange root vegetable that is rich in vitamins and minerals. It is commonly used in soups, salads, and as a snack. |\n| Broccoli | A green vegetable with tightly packed florets that is high in fiber, vitamins, and antioxidants. It can be steamed, boiled, stir-fried, or roasted. |\n| Spinach | A leafy green vegetable that is dense in nutrients like iron, calcium, and vitamins. It can be eaten raw in salads or cooked in various dishes. |\n| Bell Pepper | A colorful, sweet vegetable available in different colors such as red, yellow, and green. It is often used in stir-fries, salads, or stuffed recipes. |\n| Tomato | A juicy fruit often used as a vegetable in culinary preparations. It comes in various shapes, sizes, and colors and is used in salads, sauces, and sandwiches. |\n| Cucumber | A cool and refreshing vegetable with a high water content. It is commonly used in salads, sandwiches, or as a crunchy snack. |\n| Zucchini | A summer squash with a mild flavor and tender texture. It can be sautéed, grilled, roasted, or used in baking recipes. |\n| Cauliflower | A versatile vegetable that can be roasted, steamed, mashed, or used to make gluten-free alternatives like cauliflower rice or pizza crust. |\n| Green Beans | Long, slender pods that are low in calories and rich in vitamins. They can be steamed, stir-fried, or used in casseroles and salads. |\n| Potato | A starchy vegetable available in various varieties. It can be boiled, baked, mashed, or used in soups, fries, and many other dishes. |\n\nThis is a mermaid diagram:\n\n\\`\\`\\`mermaid\ngitGraph\n commit\n commit\n branch develop\n checkout develop\n commit\n commit\n checkout main\n merge develop\n commit\n commit\n\\`\\`\\`\n\n\\`\\`\\`latex\n\\\\[F(x) = \\\\int_{a}^{b} f(x) \\\\, dx\\\\]\n\\`\\`\\`\n`;\n" }, { "path": "tailwind.config.js", "content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/hooks/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n fontFamily: {\n sans: [\"var(--font-sans)\", \"sans-serif\"],\n mono: [\"var(--font-mono)\", \"monospace\"],\n },\n capsize: {\n fontMetrics: {\n sans: require(\"@capsizecss/metrics/inter\"),\n monospace: require(\"@capsizecss/metrics/jetBrainsMono\"),\n },\n },\n },\n plugins: [require(\"@themosaad/tailwindcss-capsize\")],\n};\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ],\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n \"exclude\": [\"node_modules\"]\n}\n" } ]