Updated docs

nlkitai · Jul 21, 2024 · 81a41e2 · 81a41e2
1 parent 31aa8c3
commit 81a41e2
Show file tree

Hide file tree

Showing 16 changed files with 7 additions and 45 deletions.
diff --git a/docs/docs/examples/0001-react-js-ai-assistant.mdx b/docs/docs/examples/0001-react-js-ai-assistant.mdx
@@ -10,8 +10,6 @@ import personas from './0001-react-js-ai-assistant/personas';
 
 # NLUX With React
 
----
-
 The following example shows how to use **`<AiChat />` React JS component** to build a simple AI assistant.<br />
 It uses `NLUX`'s demo API, which connects to **the OpenAI GPT-4o** model.<br />
 You can check the file `adapter.ts` to see we connect to the API and stream content as it's being generated.

diff --git a/docs/docs/examples/0002-next-js-ai-assistant.mdx b/docs/docs/examples/0002-next-js-ai-assistant.mdx
@@ -5,14 +5,13 @@ sidebar_label: 'NLUX With Next.js'
 import Link from '@docusaurus/Link';
 
 # NLUX With Next.js
----
 
 NLUX has been designed to easily integrate with Next.js<br />
 Code example is available at:
 
-| [github.com/**nlkitai/demos**/tree/latest/**next-js**](https://github.com/nlkitai/demos/tree/latest/next-js/nlux-with-app-router)
+| [github.com/**nlkitai/nlux** -> examples/next-js-demos/**nlux-with-app-router**](https://github.com/nlkitai/nlux/tree/latest/examples/next-js-demos/nlux-with-app-router)
 
-The examples shows:
+The example shows:
 
 * Next.js Route Handler to fetch the AI response
 * NLUX UI to handle the UI interactions

diff --git a/docs/docs/examples/0003-vercel-ai-generative-ui.mdx b/docs/docs/examples/0003-vercel-ai-generative-ui.mdx
@@ -5,14 +5,13 @@ sidebar_label: 'Generative UI With Vercel AI'
 import Link from '@docusaurus/Link';
 
 # Generative UI With NLUX, Next.js, And Vercel AI
----
 
-NLUX has been designed to easily integrate with Next.js<br />
+NLUX has been designed to easily integrate with Next.js and Vercel AI.<br />
 Code example is available at:
 
 | [github.com/**nlkitai/nlux** -> examples/next-js-demos/**generative-ui-vercel-ai-sdk**](https://github.com/nlkitai/nlux/tree/latest/examples/next-js-demos/generative-ui-vercel-ai-sdk)
 
-The examples shows:
+The example shows:
 
 * AI UI generation using Vercel AI SDK.
 * Server-Side rendering with Next.js Server Components.

diff --git a/docs/docs/examples/0004-langchain-langserve-adapter.mdx b/docs/docs/examples/0004-langchain-langserve-adapter.mdx
@@ -9,8 +9,6 @@ import personas from './0004-langchain-langserve-adapter/personas';
 
 # LangChain LangServe Adapter
 
----
-
 [LangChain](https://www.langchain.com/) is a new and popular framework for building services powered by
 Large Language Models. It enables applications that are context-aware. It also provides a library called
 [LangServe](https://python.langchain.com/docs/langserve) to create standardized APIs that can be used to
@@ -34,4 +32,4 @@ which contains Python LangServe API code.
 
 ---
 
-<Link className="learn-more-link button button--secondary" to="/learn/adapters/langchain">Learn More About NLUX LangChain Adapter</Link>
+<Link className="learn-more-link button button--secondary" to="/learn/adapters/langchain">Learn More About NLUX LangChain Adapter</Link>
diff --git a/docs/docs/examples/0005-ai-chat-api-and-events.mdx b/docs/docs/examples/0005-ai-chat-api-and-events.mdx
@@ -10,8 +10,6 @@ import lastMessage from './0005-ai-chat-api-and-events/lastMessage';
 
 # API And Events
 
----
-
 This example shows how to use the AI Chat API along with events to submit a message programmatically, and use the
 response outside the AI Chat component.
 

diff --git a/docs/docs/examples/0006-custom-response-renderers.mdx b/docs/docs/examples/0006-custom-response-renderers.mdx
@@ -18,8 +18,6 @@ import style2 from './0006-custom-response-renderers/_b-batched-data/style';
 
 The examples in this page show how to create custom message renderer for streamed and batched data.
 
----
-
 ## Renderers For Streamed Data
 
 Data is streamed to the custom component as it's being generated.
@@ -35,8 +33,6 @@ Data is streamed to the custom component as it's being generated.
     simulatedPrompt={'Write a poem about the ocean.'}
 />
 
----
-
 ## Renderers For Batched Data
 
 The data is batched and sent to the custom component all at once.<br />

diff --git a/docs/docs/examples/0007-edit-sent-messages.mdx b/docs/docs/examples/0007-edit-sent-messages.mdx
@@ -9,8 +9,6 @@ import setup from './0007-edit-sent-messages/setup';
 
 # Editing Sent Messages
 
----
-
 This example shows how to edit a previously sent message in the chat interface.
 
 Steps:

diff --git a/docs/docs/examples/0008-assistant-persona.mdx b/docs/docs/examples/0008-assistant-persona.mdx
@@ -15,8 +15,6 @@ import personas2 from './0008-assistant-persona/_b-personas-with-jsx/personas';
 
 # Assistant And User Personas
 
----
-
 With `NLUX`, you can optionally define **a assistant persona** and **a user persona**.<br />
 Here are some examples of how you can configure the assistant persona.
 
@@ -32,8 +30,6 @@ Here are some examples of how you can configure the assistant persona.
     simulatedPrompt={'What\'s the funniest magic spell that Harry Potter learned at Hog-Warts School of Witchcraft and Wizardry?'}
 />
 
----
-
 ## JSX As Avatar
 
 <CodeEditor

diff --git a/docs/docs/examples/0009-conversation-starters.mdx b/docs/docs/examples/0009-conversation-starters.mdx
@@ -2,17 +2,13 @@
 sidebar_label: "Conversation Starters"
 ---
 
-import Link from "@docusaurus/Link";
 import { CodeEditor } from "@site/src/components/CodeEditor/CodeEditor";
-
 import app from "./0009-conversation-starters/app";
 import send from "./0009-conversation-starters/send";
 import setup from "./0009-conversation-starters/setup";
 
 # Conversation Starters
 
----
-
 With `NLUX`, you have the option to define **conversation starters**. These starters are displayed beneath the chat persona when there is no existing chat history.
 
 Each conversation starter must include a `prompt` property and can optionally include an `icon` (as a string or JSX element) and a `label` (which, if provided, will be displayed instead of the `prompt`'s text).

diff --git a/docs/docs/examples/0010-welcome-message.mdx b/docs/docs/examples/0010-welcome-message.mdx
@@ -2,7 +2,6 @@
 sidebar_label: 'Welcome Message'
 ---
 
-
 import Link from '@docusaurus/Link';
 import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
 
@@ -11,8 +10,6 @@ import setup from './0010-welcome-message/setup';
 
 # Welcome Message
 
----
-
 By default, the assistant persona avatar, name, and tagline are displayed in the chat window when the conversation
 is empty. When no assistant persona is provided, the `NLUX` logo is displayed instead.
 

diff --git a/docs/docs/examples/0011-conversation-history.mdx b/docs/docs/examples/0011-conversation-history.mdx
@@ -8,8 +8,6 @@ import personas from './0011-conversation-history/personas';
 
 # Conversation History
 
----
-
 This example shows how the chat history is loaded and fed to the AI chat component for rendering
 upon initialization.
 

diff --git a/docs/docs/examples/0012-conversation-layout.mdx b/docs/docs/examples/0012-conversation-layout.mdx
@@ -2,7 +2,6 @@
 sidebar_label: 'Conversation Layout'
 ---
 
-
 import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
 
 import app from './0012-conversation-layout/app';
@@ -11,8 +10,6 @@ import layout from './0012-conversation-layout/layout';
 
 # Conversation Layout
 
----
-
 This example shows how the messages in the conversation can either be displayed in bubbles (WhatsApp style) or in a
 list (slack style). The configuration is done via the `conversationOptions.layout` property.
 

diff --git a/docs/docs/examples/0013-markdown-streaming.mdx b/docs/docs/examples/0013-markdown-streaming.mdx
@@ -5,8 +5,6 @@ import personas from './0013-markdown-streaming/personas';
 
 # Markdown Streaming
 
----
-
 In this example, we show how the user can write a prompt that results in a stream of markdown content.<br />
 The formatted markdown is streamed and displayed to the user as it is being generated by the LLM.
 

diff --git a/docs/docs/examples/0014-ui-overrides.mdx b/docs/docs/examples/0014-ui-overrides.mdx
@@ -11,8 +11,6 @@ import personas from './0014-ui-overrides/loader-overrides/personas';
 
 # UI Overrides
 
----
-
 In this example, we demonstrate how to override certain UI elements in the `NLUX` chat interface using JSX syntax.
 
 ## Loader Component Overrides
@@ -31,4 +29,4 @@ In this example, we override the default `NLUX` loader component with a custom l
 
 ---
 
-<Link className="learn-more-link button button--secondary" to="/reference/ui/ui-overrides">Reference Documentation for UI Overrides</Link>
+<Link className="learn-more-link button button--secondary" to="/reference/ui/ui-overrides">Reference Documentation for UI Overrides</Link>
diff --git a/docs/docs/examples/0015-theme-customization.mdx b/docs/docs/examples/0015-theme-customization.mdx
@@ -11,8 +11,6 @@ import themeVariables from './0015-theme-customization/example-custom-button-col
 
 # Theme Customization
 
----
-
 `NLUX` comes with 2 themes: `nova` and `unstyled`.
 
 In the example below, we style the `unstyled` theme by changing the following details:
@@ -37,4 +35,4 @@ In the example below, we style the `unstyled` theme by changing the following de
 
 ---
 
-<Link className="learn-more-link button button--secondary" to="/learn/customize-theme">Learn More Theme Customization</Link>
+<Link className="learn-more-link button button--secondary" to="/learn/customize-theme">Learn More Theme Customization</Link>
diff --git a/docs/docs/examples/0016-syntax-highlighter.mdx b/docs/docs/examples/0016-syntax-highlighter.mdx
@@ -4,8 +4,6 @@ import send from './0016-syntax-highlighter/send';
 
 # Syntax Highlighter
 
----
-
 In this example, we will use the `@nlux/highlighter` package to add syntax highlighting to code generated
 by OpenAI and rendered in the conversational UI.
-Original file line number
+Diff line change
@@ Expand Up @@
     # API And Events
-    ---
     This example shows how to use the AI Chat API along with events to submit a message programmatically, and use the
     response outside the AI Chat component.
@@ Expand Down @@