diff --git a/docs/docs/reference/002-ui/005-markdown.mdx b/docs/docs/reference/002-ui/005-markdown.mdx new file mode 100644 index 00000000..8dbb3e42 --- /dev/null +++ b/docs/docs/reference/002-ui/005-markdown.mdx @@ -0,0 +1,60 @@ +--- +sidebar_label: 'Markdown' +--- + +# Markdown Parsing + +`NLUX` comes with its own markdown parser that can be used to render markdown content in the chat area.
+On top of that, a `` primitive is provided to render markdown in custom renderers. + +--- + +## Usage + +--- + +### With Streaming Custom Renderers +
+
+ +In order to use markdown stream parser with custom renderers, you can simply pass the `props.containerRef` +to the container element where you would like to add the rendered markdown content, and `NLUX` will +take care of the rest. + +```jsx +import {memo} from 'react'; +import {ResponseRenderer, Markdown} from '@nlux/react'; + +const responseRenderer: ResponseRenderer = memo((props) => { + const {props.containerRef} = props; + + return ( +
+
+
+ ); +}); +``` + +--- + +### With Batched Custom Renderers +
+
+ +If you are using batched custom renderers, or your would like to add markdown to initial conversation messages, +you can use the `` primitive. + +```jsx +import {memo} from 'react'; +import {ResponseRenderer, Markdown} from '@nlux/react'; + +const responseRenderer: ResponseRenderer = memo((props) => { + const {content} = props; + return ( +
+ {content} +
+ ); +}); +``` diff --git a/docs/docs/reference/002-ui/005-themes.mdx b/docs/docs/reference/002-ui/006-themes.mdx similarity index 100% rename from docs/docs/reference/002-ui/005-themes.mdx rename to docs/docs/reference/002-ui/006-themes.mdx diff --git a/docs/docs/reference/002-ui/006-errors.mdx b/docs/docs/reference/002-ui/007-errors.mdx similarity index 100% rename from docs/docs/reference/002-ui/006-errors.mdx rename to docs/docs/reference/002-ui/007-errors.mdx