diff --git a/docs/docs/learn/008-customize-theme.mdx b/docs/docs/learn/008-customize-theme.mdx index b18b15e0..03bc0f41 100644 --- a/docs/docs/learn/008-customize-theme.mdx +++ b/docs/docs/learn/008-customize-theme.mdx @@ -18,16 +18,19 @@ import ThemeIdJavaScript from './_005-customize-theme/#js/themeId.mdx'; --- -`NLUX` comes with a default theme called `nova` and an `unstyled` theme that provides a basic look and layout for the -chat interface with no styling. +`NLUX` comes with a default theme called `nova` and an `unstyled` theme that provides a basic layout for the chat +interface with no styling or colors. If you would like to fully customize the look and feel of the chat interface, you can import the `unstyled` -theme and set the CSS variables that you want to override. +theme and set the CSS variables to match your design. + +**Over 100 variables** are available for you to set the desired look and feel for your interface. --- ## Customizing The Unstyled Theme - +
+
You can create a new custom theme by creating a new CSS file that defines all the theme variables. You can then import this CSS file in your HTML file or in your JavaScript/TypeScript file. You will also need to provide a theme ID to the `AiChat` component as follows: diff --git a/packages/css/themes/rollup.config.ts b/packages/css/themes/rollup.config.ts index 3fdb16c4..d61d8714 100644 --- a/packages/css/themes/rollup.config.ts +++ b/packages/css/themes/rollup.config.ts @@ -33,10 +33,18 @@ const cssEntry = (input: string, output: string) => ({ ], }); -const packageConfig: () => Promise = async () => ([ +const entries = [ cssEntry('./src/nova/main.css', `../../../dist/${folder}/themes/nova.css`), cssEntry('./src/luna/main.css', `../../../dist/${folder}/themes/luna.css`), cssEntry('./src/unstyled/main.css', `../../../dist/${folder}/themes/unstyled.css`), -]); +]; + +if (!isProduction) { + entries.push( + cssEntry('./src/dev/main.css', `../../../dist/${folder}/themes/dev.css`), + ); +} + +const packageConfig: () => Promise = async () => (entries); export default packageConfig; diff --git a/packages/css/themes/src/dev/colors.css b/packages/css/themes/src/dev/colors.css index 621cb052..f69089b6 100644 --- a/packages/css/themes/src/dev/colors.css +++ b/packages/css/themes/src/dev/colors.css @@ -1,104 +1,94 @@ +/* + 🎨 CSS variables to control the colors of your theme. +*/ .nlux-AiChat-root.nlux-theme-dev { - /** 👇 Theme-specific local variables **/ - --nlux-dev--Outline-Color: blue; - --nlux-dev--Input-BorderColor: mediumseagreen; - --nlux-dev--Input-Active-BorderColor: limegreen; - --nlux-dev--Input-Disabled-BorderColor: darkgrey; - --nlux-dev--Input-BackgroundColor: honeydew; - --nlux-dev--Input-Active-BackgroundColor: white; - --nlux-dev--Input-Disabled-BackgroundColor: lightgrey; - --nlux-dev--Input-Disabled-TextColor: grey; + /** 👇 Welcome message */ + --nlux-WelcomeMessage-Avatar--BorderColor: darkgoldenrod; + --nlux-WelcomeMessage-Avatar--BackgroundColor: lightgrey; - /** 👇 Definitions and overrides of required theme variables **/ + /** 👇 Loader */ + --nlux-ChatRoom-Loader--Color: red; - /** Exceptions box */ + /** 👇 Exceptions box ( displayed when an error occurs ) */ --nlux-Exceptions--BackgroundColor: tomato; --nlux-Exceptions--BorderColor: darkred; --nlux-Exceptions--TextColor: white; - /** Welcome message */ - --nlux-WelcomeMessage-Avatar--BorderColor: darkgoldenrod; - --nlux-WelcomeMessage-Avatar--BackgroundColor: lightgrey; - - /** Divider between composer and messages */ - --nlux-ChatRoom-Divider--Color: red; - - /** Conversation loader */ - --nlux-ChatRoom-Loader--Color: red; + /** 👇 Conversation starters */ + --nlux-ConversationStarter--BackgroundColor: yellow; + --nlux-ConversationStarter--BorderColor: red; + --nlux-ConversationStarter--TextColor: darkgreen; - /** Conversation content color */ + /** 👇 Conversation content color */ --nlux-ChatRoom--BackgroundColor: lavender; --nlux-ChatRoom--BorderColor: darkgoldenrod; --nlux-ChatRoom--TextColor: black; - /** Participant info in chat */ + /** 👇 Participant info in chat */ --nlux-ChatItem-ParticipantName--Color: darkblue; - /* Human message in chat */ + /* 👇 User message in chat */ --nlux-HumanMessage--BackgroundColor: lemonchiffon; --nlux-HumanMessage--BorderColor: darkkhaki; --nlux-HumanMessage--TextColor: black; - /** AI message in chat */ + /** 👇 Assistant message in chat */ --nlux-AiMessage--BackgroundColor: dimgrey; --nlux-AiMessage--BorderColor: black; --nlux-AiMessage--TextColor: white; - /** Prompt input colors */ - --nlux-PromptInput--BackgroundColor: var(--nlux-dev--Input-BackgroundColor); - --nlux-PromptInput--BorderColor: var(--nlux-dev--Input-BorderColor); + /** 👇 Divider between composer and messages */ + --nlux-ChatRoom-Divider--Color: red; + + /** 👇 Prompt input colors */ + --nlux-PromptInput--BackgroundColor: honeydew; + --nlux-PromptInput--BorderColor: mediumseagreen; --nlux-PromptInput--TextColor: black; - --nlux-PromptInput-Active--BackgroundColor: var(--nlux-dev--Input-Active-BackgroundColor); - --nlux-PromptInput-Active--BorderColor: var(--nlux-dev--Input-Active-BorderColor); + --nlux-PromptInput-Active--BackgroundColor: white; + --nlux-PromptInput-Active--BorderColor: limegreen; --nlux-PromptInput-Active--TextColor: black; - --nlux-PromptInput-Disabled--BackgroundColor: var(--nlux-dev--Input-Disabled-BackgroundColor); - --nlux-PromptInput-Disabled--TextColor: var(--nlux-dev--Input-Disabled-TextColor); - --nlux-PromptInput-Disabled--BorderColor: var(--nlux-dev--Input-Disabled-BorderColor); + --nlux-PromptInput-Disabled--BackgroundColor: lightgrey; + --nlux-PromptInput-Disabled--TextColor: grey; + --nlux-PromptInput-Disabled--BorderColor: darkgrey; --nlux-PromptInput-Placeholder--TextColor: darkseagreen; - --nlux-PromptInput-Focus-Outline--Color: var(--nlux-dev--Outline-Color); + --nlux-PromptInput-Focus-Outline--Color: blue; - /** Submit button colors */ - --nlux-SubmitButton--BackgroundColor: var(--nlux-dev--Input-BackgroundColor); - --nlux-SubmitButton--BorderColor: var(--nlux-dev--Input-BorderColor); + /** 👇 Submit button colors */ + --nlux-SubmitButton--BackgroundColor: honeydew; + --nlux-SubmitButton--BorderColor: mediumseagreen; --nlux-SubmitButton--TextColor: mediumseagreen; - --nlux-SubmitButton-Active--BackgroundColor: var(--nlux-dev--Input-Active-BackgroundColor); - --nlux-SubmitButton-Active--BorderColor: var(--nlux-dev--Input-Active-BorderColor); + --nlux-SubmitButton-Active--BackgroundColor: white; + --nlux-SubmitButton-Active--BorderColor: limegreen; --nlux-SubmitButton-Active--TextColor: limegreen; - --nlux-SubmitButton-Disabled--BackgroundColor: var(--nlux-dev--Input-Disabled-BackgroundColor); - --nlux-SubmitButton-Disabled--BorderColor: var(--nlux-dev--Input-Disabled-BorderColor); - --nlux-SubmitButton-Disabled--TextColor: var(--nlux-dev--Input-Disabled-TextColor); + --nlux-SubmitButton-Disabled--BackgroundColor: lightgrey; + --nlux-SubmitButton-Disabled--BorderColor: darkgrey; + --nlux-SubmitButton-Disabled--TextColor: grey; - --nlux-SubmitButton-Focus-Outline--Color: var(--nlux-dev--Outline-Color); + --nlux-SubmitButton-Focus-Outline--Color: blue; - /** Code block */ + /** 👇 Code block in parsed markdown */ --nlux-CodeBlock--BackgroundColor: gold; --nlux-CodeBlock--BorderColor: deeppink; --nlux-CodeBlock--TextColor: black; --nlux-CodeBlock-Hover--BackgroundColor: lightgoldenrodyellow; - /** Code block copy button */ + /** 👇 Code block copy button */ --nlux-CodeBlock-CopyButton--BackgroundColor: darkgoldenrod; --nlux-CodeBlock-CopyButton--BorderColor: darkred; --nlux-CodeBlock-CopyButton--TextColor: white; - /** Code block copy button in clicked state */ --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: greenyellow; --nlux-CodeBlock-CopyButton-Clicked--BorderColor: limegreen; --nlux-CodeBlock-CopyButton-Clicked--TextColor: black; - /** Inline code in markdown */ + /** 👇 Inline code in markdown */ --nlux-InlineCode--BackgroundColor: chartreuse; --nlux-InlineCode--BorderColor: darkgreen; --nlux-InlineCode--TextColor: black; - - /** Conversation starters */ - --nlux-ConversationStarter--BackgroundColor: yellow; - --nlux-ConversationStarter--BorderColor: red; - --nlux-ConversationStarter--TextColor: darkgreen; } diff --git a/packages/css/themes/src/dev/layout.css b/packages/css/themes/src/dev/layout.css index ad32338c..aafe8f83 100644 --- a/packages/css/themes/src/dev/layout.css +++ b/packages/css/themes/src/dev/layout.css @@ -1,26 +1,9 @@ +/* + 📐 CSS variables to control the layout of your theme. +*/ .nlux-AiChat-root.nlux-theme-dev { - /** - * Theme-specific local variables. - */ - --nlux-dev--FontFamily: 'Merienda', cursive; - --nlux-dev--MonoFontFamily: monospace; - - --nlux-dev--BorderWidth: 5px; - --nlux-dev--BorderRadius: 8px; - --nlux-dev--LineHeight: 1.4; - --nlux-dev--FlexGap: 12px; - - /** - * Definitions and overrides of required theme variables. - */ - - /** Exceptions box */ - --nlux-Exceptions--Padding: 5px; - --nlux-Exceptions--BorderWidth: var(--nlux-dev--BorderWidth); - --nlux-Exceptions--BorderRadius: var(--nlux-dev--BorderRadius); - - /** Welcome message */ + /** 👇 Welcome message */ --nlux-WelcomeMessage-Avatar--Width: 60px; --nlux-WelcomeMessage-PersonaName--FontSize: 22px; --nlux-WelcomeMessage-PersonaName--FontWeight: 700; @@ -28,47 +11,53 @@ --nlux-WelcomeMessage-Text--FontWeight: 400; --nlux-WelcomeMessage--Gap: 5px; - /** Divider between conversation and composer */ - --nlux-ChatRoom-Divider--MarginTop: 10px; - --nlux-ChatRoom-Divider--MarginBottom: 10px; - --nlux-ChatRoom-Divider--BorderWidth: 8px; + /** 👇 Loader */ + --nlux-ChatRoom-Loader--Width: 25px; + + /** 👇 Exceptions box ( displayed when an error occurs ) */ + --nlux-Exceptions--Padding: 5px; + --nlux-Exceptions--BorderWidth: 5px; + --nlux-Exceptions--BorderRadius: 8px; - /** Chat-room container */ - --nlux-ChatRoom--LineHeight: var(--nlux-dev--LineHeight); + /** 👇 Conversation starters */ + --nlux-ConversationStarter--Padding: 0 10px; + --nlux-ConversationStarter--BorderRadius: 50px; + --nlux-ConversationStarter--BorderWidth: 5px; + --nlux-ConversationStarter--Gap: 12px; + + /** 👇 Conversation content */ + --nlux-ChatRoom--LineHeight: 1.4; --nlux-ChatRoom--FontWeight: 400; - --nlux-ChatRoom--FontFamily: var(--nlux-dev--FontFamily); + --nlux-ChatRoom--FontFamily: 'Merienda', cursive; --nlux-ChatRoom--FontSize: 16px; --nlux-ChatRoom--Padding: 10px; - --nlux-ChatRoom--BorderRadius: var(--nlux-dev--BorderRadius); - --nlux-ChatRoom--BorderWidth: var(--nlux-dev--BorderWidth); - - /** Chat-room loader */ - --nlux-ChatRoom-Loader--Width: 25px; + --nlux-ChatRoom--BorderRadius: 8px; + --nlux-ChatRoom--BorderWidth: 5px; - /** Chat item */ + /** 👇 Chat item */ --nlux-ChatItem--AlignItems: flex-end; - /** Chat item participant info */ - --nlux-ChatItem-ParticipantInfo--Gap: var(--nlux-dev--FlexGap); - --nlux-ChatItem-ParticipantName--FontSize: 20px; - --nlux-ChatItem-ParticipantName--FontWeight: 700; - - /** Chat item avatar */ + /** 👇 Chat item avatar */ --nlux-ChatItem-Avatar--Width: 30px; --nlux-ChatItem-Avatar--BorderRadius: 50%; - --nlux-ChatItem-Avatar--BorderWidth: var(--nlux-dev--BorderWidth); + --nlux-ChatItem-Avatar--BorderWidth: 5px; - /** Chat item message */ - --nlux-ChatItem-Message--Gap: var(--nlux-dev--FlexGap); /** Gap between elements within message */ + /** 👇 Chat item message */ + --nlux-ChatItem-Message--Gap: 12px; /** Gap between elements within message */ - /** Chat item message in bubbles display layout */ - --nlux-ChatItem-Message-BubbleLayout--BorderWidth: var(--nlux-dev--BorderWidth); - --nlux-ChatItem-Message-BubbleLayout--BorderRadius: var(--nlux-dev--BorderRadius); + /** 👇 Participant info in chat */ + --nlux-ChatItem-ParticipantInfo--Gap: 12px; + --nlux-ChatItem-ParticipantName--FontSize: 20px; + --nlux-ChatItem-ParticipantName--FontWeight: 700; + + /** 👇 Chat item message in bubbles display layout */ + --nlux-ChatItem-Message-BubbleLayout--BorderWidth: 5px; + --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 8px; --nlux-ChatItem-Message-BubbleLayout--PaddingTopBottom: 10px; --nlux-ChatItem-Message-BubbleLayout--PaddingLeftRight: 15px; - /** Chat item message in list display layout */ + /** 👇 Chat item message in list display layout */ --nlux-ChatItem-Message-ListLayout--BorderWidth: 2px; --nlux-ChatItem-Message-ListLayout--BorderRadius: 2px; --nlux-ChatItem-Message-ListLayout--PaddingTopBottom: 5px; @@ -78,45 +67,44 @@ --nlux-ChatItem-Message-ListLayout--MarginLeft: 10px; --nlux-ChatItem-Message-ListLayout--MarginRight: 10px; - /** Chat item message code block */ + /** 👇 Divider between conversation and composer */ + --nlux-ChatRoom-Divider--MarginTop: 10px; + --nlux-ChatRoom-Divider--MarginBottom: 10px; + --nlux-ChatRoom-Divider--BorderWidth: 8px; + + /** 👇 Composer */ + --nlux-Composer--Gap: 5px; + + /** 👇 Prompt input */ + --nlux-PromptInput--FontFamily: 'Merienda', cursive; + --nlux-PromptInput--FontSize: 16px; + --nlux-PromptInput--BorderWidth: 5px; + --nlux-PromptInput--BorderRadius: 8px; + --nlux-PromptInput-Focus-Outline--Width: 5px; + + /** 👇 Submit button */ + --nlux-SubmitButton--Width: 65px; + --nlux-SubmitButton--BorderWidth: 5px; + --nlux-SubmitButton--BorderRadius: 8px; + --nlux-SubmitButton-Focus-Outline--Width: 5px; + + /** 👇 Code block in parsed markdown */ --nlux-CodeBlock--FontSize: 14px; --nlux-CodeBlock--FontFamily: 'Courier New', monospace; --nlux-CodeBlock--Padding: 10px; - --nlux-CodeBlock--BorderWidth: var(--nlux-dev--BorderWidth); - --nlux-CodeBlock--BorderRadius: var(--nlux-dev--BorderRadius); + --nlux-CodeBlock--BorderWidth: 5px; + --nlux-CodeBlock--BorderRadius: 8px; - /** Code block copy button */ + /** 👇 Code block copy button */ --nlux-CodeBlock-CopyButton--Width: 28px; --nlux-CodeBlock-CopyButton--Height: 28px; --nlux-CodeBlock-CopyButton--Padding: 2px; - --nlux-CodeBlock-CopyButton--BorderRadius: var(--nlux-dev--BorderRadius); - --nlux-CodeBlock-CopyButton--BorderWidth: var(--nlux-dev--BorderWidth); + --nlux-CodeBlock-CopyButton--BorderRadius: 8px; + --nlux-CodeBlock-CopyButton--BorderWidth: 5px; - /** Inline code in markdown */ + /** 👇 Inline code in markdown */ --nlux-InlineCode--BorderRadius: 6px; --nlux-InlineCode--BorderWidth: 2px; --nlux-InlineCode--Padding: 2px 4px; --nlux-InlineCode--FontSize: 18px; - - /** Composer */ - --nlux-Composer--Gap: 5px; - - /** Submit button */ - --nlux-SubmitButton--Width: 65px; - --nlux-SubmitButton--BorderWidth: var(--nlux-dev--BorderWidth); - --nlux-SubmitButton--BorderRadius: var(--nlux-dev--BorderRadius); - --nlux-SubmitButton-Focus-Outline--Width: var(--nlux-dev--BorderWidth); - - /** Composer input */ - --nlux-PromptInput--FontFamily: var(--nlux-dev--FontFamily); - --nlux-PromptInput--FontSize: 16px; - --nlux-PromptInput--BorderWidth: var(--nlux-dev--BorderWidth); - --nlux-PromptInput--BorderRadius: var(--nlux-dev--BorderRadius); - --nlux-PromptInput-Focus-Outline--Width: var(--nlux-dev--BorderWidth); - - /** Conversation starters */ - --nlux-ConversationStarter--Padding: 0 10px; - --nlux-ConversationStarter--BorderRadius: 50px; - --nlux-ConversationStarter--BorderWidth: var(--nlux-dev--BorderWidth); - --nlux-ConversationStarter--Gap: var(--nlux-dev--FlexGap); } diff --git a/samples/aiChat/js/src/app.ts b/samples/aiChat/js/src/app.ts index 460e35f2..2303b5b4 100644 --- a/samples/aiChat/js/src/app.ts +++ b/samples/aiChat/js/src/app.ts @@ -14,7 +14,7 @@ import './style.css'; document.addEventListener('DOMContentLoaded', () => { const parent = document.getElementById('root')!; - type ThemeId = 'nova' | 'luna' | 'dev' | 'unstyled'; + type ThemeId = 'nova' | 'luna' | 'unstyled' | 'dev'; let themeId: ThemeId = 'nova'; let colorScheme: 'light' | 'dark' | 'auto' = 'dark'; diff --git a/samples/aiChat/react/src/App.tsx b/samples/aiChat/react/src/App.tsx index be7b1bd6..13c45701 100644 --- a/samples/aiChat/react/src/App.tsx +++ b/samples/aiChat/react/src/App.tsx @@ -21,12 +21,14 @@ import {MessageReceivedCallback} from '@nlux-dev/core/src'; import './App.css'; import '@nlux-dev/highlighter/src/themes/stackoverflow/dark.css'; // import '@nlux-dev/themes/src/luna/main.css'; -// import '@nlux-dev/themes/src/nova/main.css'; -import '@nlux-dev/themes/src/unstyled/main.css'; -import './theme-variables.css'; +import '@nlux-dev/themes/src/nova/main.css'; +// import '@nlux-dev/themes/src/unstyled/main.css'; +// import '@nlux-dev/themes/src/dev/main.css'; + +// import './theme-variables.css'; function App() { - type ThemeId = 'nova' | 'luna' | 'unstyled'; + type ThemeId = 'nova' | 'luna' | 'unstyled' | 'dev'; const [useCustomResponseComponent, setUseCustomResponseComponent] = useState(false); const [useCustomPersonaOptions, setUseCustomPersonaOptions] = useState(true); const [conversationLayout, setConversationLayout] = useState('list'); @@ -271,9 +273,10 @@ function App() {
Theme   | Color Scheme