diff --git a/docs/docs/examples/0011-theme-customization/example-custom-button-color/app.tsx b/docs/docs/examples/0011-theme-customization/example-custom-button-color/app.tsx index b774ce42..973600fb 100644 --- a/docs/docs/examples/0011-theme-customization/example-custom-button-color/app.tsx +++ b/docs/docs/examples/0011-theme-customization/example-custom-button-color/app.tsx @@ -1,20 +1,20 @@ -export default (colorMode: 'dark' | 'light') => `import { AiChat, useAsStreamAdapter } from "@nlux/react"; -import { send } from "./send"; -import { personas } from "./personas"; +export default (colorMode: 'dark' | 'light') => `import { AiChat, useAsStreamAdapter } from '@nlux/react'; +import { send } from './send'; +import { personas } from './personas'; // We import the unstyled CSS that gives us the basic layout and structure -import "@nlux/themes/unstyled.css"; +import '@nlux/themes/unstyled.css'; // We set the variables in a separate CSS file -import "./theme-variables.css"; +import './theme-variables.css'; export default () => { const adapter = useAsStreamAdapter(send, []); return ( ### CSS Selector +> ### CSS Selectors -You only need to provide one CSS selector `.nlux-AiChat-root` which is the root element of the chat interface.
-All the variables should be set under theme-specific CSS selectors. +One CSS selector `.nlux-theme-MyBrandName` is required to set the theme variables. The value `MyBrandName` should match +the `displayOptions.themeId` prop passed to the `AiChat` component. -```css -.nlux-AiChat-root { - /* Overrides will go here */ -} -``` - -If you are using the `NLUX` `displayOptions.colorScheme` option, you can use the following CSS selector to -distinct between the light and dark mode: - -```css -.nlux-AiChat-root[data-color-scheme='light'] { - /* Overrides for light mode */ -} +If you are using the dark and light modes, you can also use the data selectors `[data-color-scheme='light']` and +`[data-color-scheme='dark']` to set the variables specific to each mode. -.nlux-AiChat-root[data-color-scheme='dark'] { - /* Overrides for dark mode */ -} -``` +Is this example, we change the background color of the chat room based on dark/light mode options. --- @@ -133,7 +119,7 @@ Then we override the variables in the CSS file related to the main component's b /* Override top-level chat room colors */ --nlux-ChatRoom--BackgroundColor: #060524; --nlux-ChatRoom--BorderColor: #24233d; - --nlux-ChatRoom-Divider--Color: #24233d; + --nlux-ChatRoom--BorderColor: #24233d; --nlux-ChatRoom--BorderWidth: 2px; ``` diff --git a/docs/docs/learn/_005-customize-theme/example-custom-button-color/adapter.tsx b/docs/docs/learn/_005-customize-theme/example-custom-button-color/adapter.tsx deleted file mode 100644 index f4b524ca..00000000 --- a/docs/docs/learn/_005-customize-theme/example-custom-button-color/adapter.tsx +++ /dev/null @@ -1,44 +0,0 @@ -export default `import {ChatAdapter, StreamingAdapterObserver} from '@nlux/react'; - -// A demo endpoint by NLUX that connects to OpenAI -// and returns a stream of Server-Sent events -const demoProxyServerUrl = 'https://demo.api.nlux.ai/openai/chat/stream'; - -export const streamAdapter: ChatAdapter = { - streamText: async (prompt: string, observer: StreamingAdapterObserver) => { - const body = { prompt }; - const response = await fetch(demoProxyServerUrl, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(body), - }); - - if (response.status !== 200) { - observer.error(new Error('Failed to connect to the server')); - return; - } - - if (!response.body) { - return; - } - - // Read a stream of server-sent events - // and feed them to the observer as they are being generated - const reader = response.body.getReader(); - const textDecoder = new TextDecoder(); - - while (true) { - const { value, done } = await reader.read(); - if (done) { - break; - } - - const content = textDecoder.decode(value); - if (content) { - observer.next(content); - } - } - - observer.complete(); - } -};`; diff --git a/docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx b/docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx index 76bce8fd..3857ab98 100644 --- a/docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx +++ b/docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx @@ -1,21 +1,20 @@ -export default (colorMode: 'dark' | 'light') => `import {useMemo} from 'react'; -import {AiChat} from '@nlux/react'; -import {streamAdapter} from './adapter'; -import {personas} from './personas'; +export default (colorMode: 'dark' | 'light') => `import { AiChat, useAsStreamAdapter } from '@nlux/react'; +import { send } from './send'; +import { personas } from './personas'; // We import the unstyled CSS that gives us the basic layout and structure -import "@nlux/themes/unstyled.css"; +import '@nlux/themes/unstyled.css'; // We set the variables in a separate CSS file -import "./theme-variables.css"; +import './theme-variables.css'; export default () => { - const adapter = useMemo(() => streamAdapter, []); + const adapter = useAsStreamAdapter(send, []); return ( { + const body = {prompt}; + const response = await fetch(demoProxyServerUrl, { + method: 'POST', + headers: {'Content-Type': 'application/json'}, + body: JSON.stringify(body), + }); + + if (response.status !== 200) { + observer.error(new Error('Failed to connect to the server')); + return; + } + + if (!response.body) { + return; + } + + // Read a stream of server-sent events + // and feed them to the observer as they are being generated + const reader = response.body.getReader(); + const textDecoder = new TextDecoder(); + + while (true) { + const {value, done} = await reader.read(); + if (done) { + break; + } + + const content = textDecoder.decode(value); + if (content) { + observer.next(content); + } + } + + observer.complete(); +}; +`; \ No newline at end of file