added openai style theme

packages/css/themes/src/openai/colors-dark.css

@@ -0,0 +1,91 @@
+.nlux-AiChat-root.nlux-theme-nova[data-color-scheme='dark'] {
+    /** Exceptions box */
+    --nlux-Exceptions--BackgroundColor: tomato;
+    --nlux-Exceptions--BorderColor: darkred;
+    --nlux-Exceptions--TextColor: white;
+
+    /** Welcome message */
+    --nlux-WelcomeMessage-Avatar--BorderColor: transparent;
+    --nlux-WelcomeMessage-Avatar--BackgroundColor: transparent;
+
+    /** Divider between composer and messages */
+    --nlux-ChatRoom-Divider--Color: #71717a;
+
+    /** Conversation loader */
+    --nlux-ChatRoom-Loader--Color: #71717a;
+
+    /** Conversation content color */
+    --nlux-ChatRoom--BackgroundColor: #212121;
+    --nlux-ChatRoom--BorderColor: transparent;
+    --nlux-ChatRoom--TextColor: #ffffff;
+
+    /** Participant info in chat */
+    --nlux-ChatItem-ParticipantName--Color: #ffffff;
+
+    /* Human message in chat */
+    --nlux-HumanMessage--BackgroundColor: #2F2F2F;
+    --nlux-HumanMessage--BorderColor: transparent;
+    --nlux-HumanMessage--TextColor: #ffffff;
+
+    /** AI message in chat */
+    --nlux-AiMessage--BackgroundColor: #212121;
+    --nlux-AiMessage--BorderColor: transparent;
+    --nlux-AiMessage--TextColor: #ffffff;
+
+    /** Prompt input colors */
+    --nlux-PromptInput--BackgroundColor: transparent;
+    --nlux-PromptInput--BorderColor: transparent;
+    --nlux-PromptInput--TextColor: #2F2F2F;
+
+    --nlux-PromptInput-Active--BackgroundColor: transparent;
+    --nlux-PromptInput-Active--BorderColor: transparent;
+    --nlux-PromptInput-Active--TextColor: #ffffff;
+
+    --nlux-PromptInput-Disabled--BackgroundColor: transprent;
+    --nlux-PromptInput-Disabled--TextColor: transprent;
+    --nlux-PromptInput-Disabled--BorderColor: transprent;
+
+    --nlux-PromptInput-Placeholder--TextColor: #71717a;
+    --nlux-PromptInput-Focus-Outline--Color: transparent;
+
+    /** Submit button colors */
+    --nlux-SubmitButton--BackgroundColor: transparent;
+    --nlux-SubmitButton--BorderColor: transparent;
+    --nlux-SubmitButton--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Active--BackgroundColor: transparent;
+    --nlux-SubmitButton-Active--BorderColor: transparent;
+    --nlux-SubmitButton-Active--TextColor: #ffffff;
+
+    --nlux-SubmitButton-Disabled--BackgroundColor: transparent;
+    --nlux-SubmitButton-Disabled--BorderColor: transparent;
+    --nlux-SubmitButton-Disabled--TextColor: #71717a;
+
+    --nlux-SubmitButton-Focus-Outline--Color: transparent;
+
+    /** Code block */
+    --nlux-CodeBlock--BackgroundColor: #0D0D0D;
+    --nlux-CodeBlock--BorderColor: transparent;
+    --nlux-CodeBlock--TextColor: #ffffff;
+    --nlux-CodeBlock-Hover--BackgroundColor: #0D0D0D;
+
+    /** Code block copy button */
+    --nlux-CodeBlock-CopyButton--BackgroundColor: #2F2F2F;
+    --nlux-CodeBlock-CopyButton--BorderColor: #c5c5c3;
+    --nlux-CodeBlock-CopyButton--TextColor: #ffffff;
+
+    /** Code block copy button in clicked state */
+    --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #2F2F2F;
+    --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #393930;
+    --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff;
+
+    /** Inline code in markdown */
+    --nlux-InlineCode--BackgroundColor: #393930;
+    --nlux-InlineCode--BorderColor: transparent;
+    --nlux-InlineCode--TextColor: #ffffff;
+
+    /** Conversation starters */
+    --nlux-ConversationStarter--BackgroundColor: var(--nlux-HumanMessage--BackgroundColor);
+    --nlux-ConversationStarter--BorderColor: transparent;
+    --nlux-ConversationStarter--TextColor: var(--nlux-HumanMessage--TextColor);
+}

packages/css/themes/src/openai/colors-light.css

@@ -0,0 +1,91 @@
+.nlux-AiChat-root.nlux-theme-nova[data-color-scheme='light'] {
+    /** Exceptions box */
+    --nlux-Exceptions--BackgroundColor: tomato;
+    --nlux-Exceptions--BorderColor: darkred;
+    --nlux-Exceptions--TextColor: white;
+
+    /** Welcome message */
+    --nlux-WelcomeMessage-Avatar--BorderColor: transparent;
+    --nlux-WelcomeMessage-Avatar--BackgroundColor: transparent;
+
+    /** Divider between composer and messages */
+    --nlux-ChatRoom-Divider--Color: #71717a;
+
+    /** Conversation loader */
+    --nlux-ChatRoom-Loader--Color: #71717a;
+
+    /** Conversation content color */
+    --nlux-ChatRoom--BackgroundColor: #ffffff;
+    --nlux-ChatRoom--BorderColor: transparent;
+    --nlux-ChatRoom--TextColor: #09090B;
+
+    /** Participant info in chat */
+    --nlux-ChatItem-ParticipantName--Color: #09090B;
+
+    /* Human message in chat */
+    --nlux-HumanMessage--BackgroundColor: #F4F4F4;
+    --nlux-HumanMessage--BorderColor: transparent;
+    --nlux-HumanMessage--TextColor: #000000;
+
+    /** AI message in chat */
+    --nlux-AiMessage--BackgroundColor: #FFFFFF;
+    --nlux-AiMessage--BorderColor: transparent;
+    --nlux-AiMessage--TextColor: #09090B;
+
+    /** Prompt input colors */
+    --nlux-PromptInput--BackgroundColor: transparent;
+    --nlux-PromptInput--BorderColor: transparent;
+    --nlux-PromptInput--TextColor: #71717a;
+
+    --nlux-PromptInput-Active--BackgroundColor: transparent;
+    --nlux-PromptInput-Active--BorderColor: transparent;
+    --nlux-PromptInput-Active--TextColor: #000000;
+
+    --nlux-PromptInput-Disabled--BackgroundColor: transprent;
+    --nlux-PromptInput-Disabled--TextColor: #71717A;
+    --nlux-PromptInput-Disabled--BorderColor: transprent;
+
+    --nlux-PromptInput-Placeholder--TextColor: #b4b4b4;
+    --nlux-PromptInput-Focus-Outline--Color: transparent;
+
+    /** Submit button colors */
+    --nlux-SubmitButton--BackgroundColor: transparent;
+    --nlux-SubmitButton--BorderColor: transparent;
+    --nlux-SubmitButton--TextColor: #000000;
+
+    --nlux-SubmitButton-Active--BackgroundColor: transparent;
+    --nlux-SubmitButton-Active--BorderColor: transparent;
+    --nlux-SubmitButton-Active--TextColor: #000000;
+
+    --nlux-SubmitButton-Disabled--BackgroundColor: transparent;
+    --nlux-SubmitButton-Disabled--BorderColor: transparent;
+    --nlux-SubmitButton-Disabled--TextColor: #b4b4b4;
+
+    --nlux-SubmitButton-Focus-Outline--Color: transparent;
+
+    /** Code block */
+    --nlux-CodeBlock--BackgroundColor: #0D0D0D;
+    --nlux-CodeBlock--BorderColor: transparent;
+    --nlux-CodeBlock--TextColor: white;
+    --nlux-CodeBlock-Hover--BackgroundColor: #0D0D0D;
+
+    /** Code block copy button */
+    --nlux-CodeBlock-CopyButton--BackgroundColor: #2F2F2F;
+    --nlux-CodeBlock-CopyButton--BorderColor: #c5c5c3;
+    --nlux-CodeBlock-CopyButton--TextColor: #ffffff;
+
+    /** Code block copy button in clicked state */
+    --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: #393930;
+    --nlux-CodeBlock-CopyButton-Clicked--BorderColor: #393930;
+    --nlux-CodeBlock-CopyButton-Clicked--TextColor: #ffffff;
+
+    /** Inline code in markdown */
+    --nlux-InlineCode--BackgroundColor: #fff9d8;
+    --nlux-InlineCode--BorderColor: transparent;
+    --nlux-InlineCode--TextColor: black;
+
+    /** Conversation starters */
+    --nlux-ConversationStarter--BackgroundColor: var(--nlux-AiMessage--BackgroundColor);
+    --nlux-ConversationStarter--BorderColor: transparent;
+    --nlux-ConversationStarter--TextColor: var(--nlux-AiMessage--TextColor);
+}

packages/css/themes/src/openai/font.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

packages/css/themes/src/openai/layout.css

@@ -0,0 +1,124 @@
+.nlux-AiChat-root.nlux-theme-nova {
+    /**
+     * Theme-specific local variables.
+     */
+
+    --nlux-nova--FontFamily: 'Inter', sans-serif;
+    --nlux-nova--MonoFontFamily: monospace;
+
+    --nlux-nova--BorderWidth: 0;
+    --nlux-nova--LineHeight: 1.4;
+    --nlux-nova--FlexGap: 12px;
+
+    /**
+     * Definitions and overrides of required theme variables.
+     */
+
+    /** Exceptions box */
+    --nlux-Exceptions--Padding: 5px;
+    --nlux-Exceptions--BorderWidth: var(--nlux-nova--BorderWidth);
+    --nlux-Exceptions--BorderRadius: 12px;
+
+    /** Welcome message */
+    --nlux-WelcomeMessage-Avatar--Width: 48px;
+    --nlux-WelcomeMessage-PersonaName--FontSize: 18px;
+    --nlux-WelcomeMessage-PersonaName--FontWeight: 600;
+    --nlux-WelcomeMessage-Text--FontSize: 15px;
+    --nlux-WelcomeMessage-Text--FontWeight: 400;
+    --nlux-WelcomeMessage--Gap: 4px;
+
+    /** Divider between conversation and composer */
+    --nlux-ChatRoom-Divider--MarginTop: 10px;
+    --nlux-ChatRoom-Divider--MarginBottom: 10px;
+    --nlux-ChatRoom-Divider--BorderWidth: 1px;
+
+    /** Chat-room container */
+    --nlux-ChatRoom--LineHeight: var(--nlux-nova--LineHeight);
+    --nlux-ChatRoom--FontWeight: 400;
+    --nlux-ChatRoom--FontFamily: var(--nlux-nova--FontFamily);
+    --nlux-ChatRoom--FontSize: 16px;
+
+    --nlux-ChatRoom--Padding: 20px;
+    --nlux-ChatRoom--BorderRadius: 18px;
+    --nlux-ChatRoom--BorderWidth: var(--nlux-nova--BorderWidth);
+
+    /** Chat-room loader */
+    --nlux-ChatRoom-Loader--Width: 25px;
+
+    /** Chat item */
+    --nlux-ChatItem--AlignItems: flex-start;
+
+    /** Chat item participant info */
+    --nlux-ChatItem-ParticipantInfo--Gap: var(--nlux-nova--FlexGap);
+    --nlux-ChatItem-ParticipantInfo--Padding: 10px 0px;
+    --nlux-ChatItem-ParticipantName--FontSize: 16px;
+    --nlux-ChatItem-ParticipantName--FontWeight: 700;
+
+    /** Chat item avatar */
+    --nlux-ChatItem-Avatar--Width: 30px;
+    --nlux-ChatItem-Avatar--BorderRadius: 50%;
+    --nlux-ChatItem-Avatar--BorderWidth: var(--nlux-nova--BorderWidth);
+
+    /** Chat item message */
+    --nlux-ChatItem-Message--Gap: var(--nlux-nova--FlexGap); /** Gap between elements within message */
+
+    /** Chat item message in bubbles display layout */
+    --nlux-ChatItem-Message-BubbleLayout--BorderWidth: 0px;
+    --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 12px;
+    --nlux-ChatItem-Message-BubbleLayout--PaddingTopBottom: 10px;
+    --nlux-ChatItem-Message-BubbleLayout--PaddingLeftRight: 15px;
+
+    /** Chat item message in list display layout */
+    --nlux-ChatItem-Message-ListLayout--BorderWidth: 0px;
+    --nlux-ChatItem-Message-ListLayout--BorderRadius: 12px;
+    --nlux-ChatItem-Message-ListLayout--PaddingTopBottom: 5px;
+    --nlux-ChatItem-Message-ListLayout--PaddingLeftRight: 10px;
+    --nlux-ChatItem-Message-ListLayout--MarginTop: -10px;
+    --nlux-ChatItem-Message-ListLayout--MarginBottom: 0px;
+    --nlux-ChatItem-Message-ListLayout--MarginLeft: 32px;
+    --nlux-ChatItem-Message-ListLayout--MarginRight: 0px;
+
+    /** Chat item message code block */
+    --nlux-CodeBlock--FontSize: 14px;
+    --nlux-CodeBlock--FontFamily: 'Courier New', monospace;
+    --nlux-CodeBlock--Padding: 10px;
+    --nlux-CodeBlock--BorderWidth: var(--nlux-nova--BorderWidth);
+    --nlux-CodeBlock--BorderRadius: 6px;
+
+    /** Code block copy button */
+    --nlux-CodeBlock-CopyButton--Width: 22px;
+    --nlux-CodeBlock-CopyButton--Height: 22px;
+    --nlux-CodeBlock-CopyButton--Padding: 2px;
+    --nlux-CodeBlock-CopyButton--BorderRadius: 4px;
+    --nlux-CodeBlock-CopyButton--BorderWidth: var(--nlux-nova--BorderWidth);
+
+    /** Inline code in markdown */
+    --nlux-InlineCode--BorderRadius: 6px;
+    --nlux-InlineCode--BorderWidth: 2px;
+    --nlux-InlineCode--Padding: 0 2px;
+    --nlux-InlineCode--FontSize: 18px;
+
+    /** Composer */
+    --nlux-Composer--Gap: 5px;
+
+    /** Submit button */
+    --nlux-SubmitButton--Width: 65px;
+    --nlux-SubmitButton--BorderWidth: var(--nlux-nova--BorderWidth);
+    --nlux-SubmitButton--BorderRadius: 12px;
+    --nlux-SubmitButton-Focus-Outline--Width: 2px;
+
+    /** Composer input */
+    --nlux-PromptInput--FontFamily: var(--nlux-nova--FontFamily);
+    --nlux-PromptInput--FontSize: 16px;
+    --nlux-PromptInput--BorderWidth: 0;
+    --nlux-PromptInput--BorderRadius: 12px;
+    --nlux-PromptInput-Focus-Outline--Width: 2px;
+
+    /** Conversation starters */
+    --nlux-ConversationStarter--Padding: 0 10px;
+    --nlux-ConversationStarter--BorderRadius: 6px;
+    --nlux-ConversationStarter--BorderWidth: 0;
+    --nlux-ConversationStarter--Gap: var(--nlux-nova--FlexGap);
+    --nlux-ConversationStarter--Width: 160px;
+    --nlux-ConversationStarter--Height: 101px;
+}

packages/css/themes/src/openai/main.css

@@ -0,0 +1,6 @@
+@import './font.css';
+@import './colors-light.css';
+@import './colors-dark.css';
+@import './layout.css';
+@import './icons.css';
+@import '../common/main.css';