From dc4c212774fa7f3ce7169e6408a99a22fc320221 Mon Sep 17 00:00:00 2001
From: Salmen Hichri <salmen.hichri@gmail.com>
Date: Wed, 19 Jun 2024 11:11:08 +0100
Subject: [PATCH] Added reference docs related to markdown parsing

---
 docs/docs/reference/002-ui/005-markdown.mdx   | 60 +++++++++++++++++++
 .../002-ui/{005-themes.mdx => 006-themes.mdx} |  0
 .../002-ui/{006-errors.mdx => 007-errors.mdx} |  0
 3 files changed, 60 insertions(+)
 create mode 100644 docs/docs/reference/002-ui/005-markdown.mdx
 rename docs/docs/reference/002-ui/{005-themes.mdx => 006-themes.mdx} (100%)
 rename docs/docs/reference/002-ui/{006-errors.mdx => 007-errors.mdx} (100%)

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.<br />
+On top of that, a `<Markdown>` primitive is provided to render markdown in custom renderers.
+
+---
+
+## Usage
+
+---
+
+### With Streaming Custom Renderers
+<br />
+<br />
+
+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<string> = memo((props) => {
+    const {props.containerRef} = props;
+
+    return (
+        <div className="myCustomRenderer">
+            <div ref={props.containerRef}/>
+        </div>
+    );
+});
+```
+
+---
+
+### With Batched Custom Renderers
+<br />
+<br />
+
+If you are using batched custom renderers, or your would like to add markdown to initial conversation messages,
+you can use the `<Markdown>` primitive.
+
+```jsx
+import {memo} from 'react';
+import {ResponseRenderer, Markdown} from '@nlux/react';
+
+const responseRenderer: ResponseRenderer<string> = memo((props) => {
+    const {content} = props;
+    return (
+        <div className="myCustomRenderer">
+            <Markdown>{content}</Markdown>
+        </div>
+    );
+});
+```
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