Rewriting the UI components rendering layer to support custom components

.github/workflows/run-all-tests.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 
-name: 300+ Unit Tests
+name: 400+ Unit Tests
 
 on:
   push:

package.json

@@ -28,7 +28,7 @@
     "symlink-dir": "^5.2.1",
     "jsdom": "^22.1.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.13"
+    "vite": "^5.1.0"
   },
   "bugs": "https://github.com/nluxai/nlux/issues",
   "repository": {

packages/css/themes/rollup.config.ts

@@ -37,6 +37,7 @@ const cssEntry = (input: string, output: string) => ({
 
 const packageConfig: () => Promise<RollupOptions[]> = async () => ([
     cssEntry('./src/nova/theme.css', `../../../dist/${folder}/themes/nova.css`),
+    cssEntry('./src/luna/theme.css', `../../../dist/${folder}/themes/luna.css`),
 ]);
 
 export default packageConfig;

packages/css/themes/src/common/components/chat-room.css

@@ -1,40 +1,40 @@
-.nluxc-root {
-    > .nluxc-chat-room-container {
+.nlux-AiChat-root {
+    > .nlux-chat-room-container {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        gap: var(--nluxc-flex-gap);
+        gap: var(--nlux-flex-gap);
 
-        > .nluxc-chat-room-conversation-container {
+        > .nlux-chat-room-conversation-container {
             display: flex;
             overflow: auto;
             flex: 1;
             flex-direction: column;
             padding: 0;
-            gap: var(--nluxc-flex-gap);
+            gap: var(--nlux-flex-gap);
 
-            > .nluxc-conversation-messages-container {
+            > .nlux-conversation-messages-container {
                 overflow: scroll;
                 flex: 1;
 
-                padding-right: var(--nluxc-padding);
-                padding-left: var(--nluxc-padding);
+                padding-right: var(--nlux-padding);
+                padding-left: var(--nlux-padding);
 
-                > .nluxc-conversation-welcome-message {
+                > .nlux-conversation-welcome-message {
                     display: flex;
                     align-items: center;
                     flex-direction: column;
                     justify-content: center;
                     width: 100%;
                     height: 100%;
 
-                    > .nluxc-conversation-welcome-message-photo-container {
+                    > .nlux-conversation-welcome-message-photo-container {
                         position: relative;
                         display: inline-block;
                         overflow: hidden;
                         width: 80px;
                         height: 80px;
-                        margin-bottom: var(--nluxc-padding-l);
+                        margin-bottom: var(--nlux-padding-l);
                         border-radius: 50%;
 
                         > * {
@@ -45,50 +45,50 @@
                             left: 0 !important;
                         }
 
-                        > .nluxc-conversation-welcome-message-letter {
-                            font-size: var(--nluxc-font-size-l);
+                        > .nlux-conversation-welcome-message-letter {
+                            font-size: var(--nlux-font-size-l);
                             font-weight: 400;
                             z-index: 888888;
                             display: flex;
                             align-items: center;
                             justify-content: center;
                             margin: 5px;
                             text-align: center;
-                            color: var(--nluxc-text-color);
+                            color: var(--nlux-text-color);
                             border-radius: 50%;
-                            background-color: var(--nluxc-message-received-background-color);
+                            background-color: var(--nlux-message-received-background-color);
                         }
 
-                        > .nluxc-conversation-welcome-message-rendered-photo {
+                        > .nlux-conversation-welcome-message-rendered-photo {
                             z-index: 999999;
                             background-position: center center;
                             background-size: cover;
                         }
                     }
 
-                    > .nluxc-conversation-welcome-message-name-and-tagline {
+                    > .nlux-conversation-welcome-message-name-and-tagline {
                         font-weight: 400;
                         max-width: 80%;
-                        padding: var(--nluxc-padding-l);
+                        padding: var(--nlux-padding-l);
                         text-align: center;
-                        color: var(--nluxc-text-color);
-                        border-color: var(--nluxc-message-received-border-color);
-                        border-radius: var(--nluxc-border-radius-m);
+                        color: var(--nlux-text-color);
+                        border-color: var(--nlux-message-received-border-color);
+                        border-radius: var(--nlux-border-radius-m);
                         outline: none;
-                        background-color: var(--nluxc-message-received-background-color);
+                        background-color: var(--nlux-message-received-background-color);
 
-                        > .nluxc-conversation-welcome-message-name {
-                            font-size: var(--nluxc-font-size-l);
+                        > .nlux-conversation-welcome-message-name {
+                            font-size: var(--nlux-font-size-l);
                             font-weight: 700;
-                            margin-bottom: var(--nluxc-padding-m);
+                            margin-bottom: var(--nlux-padding-m);
                         }
                     }
                 }
             }
         }
 
-        > .nluxc-chat-room-prompt-box,
-        > .nluxc-chat-room-footer {
+        > .nlux-chat-room-prompt-box,
+        > .nlux-chat-room-footer {
             flex: 0;
         }
     }

packages/css/themes/src/common/components/exceptions-box.css

@@ -1,7 +1,7 @@
-.nluxc-root {
+.nlux-AiChat-root {
     position: relative;
 
-    > .nluxc-exceptions-box-container {
+    > .nlux-exceptions-box-container {
         position: absolute;
         top: 0;
         display: flex;
@@ -14,16 +14,16 @@
         width: 100%;
         gap: 0;
 
-        > .nluxc-exceptions-box-exception-container {
+        > .nlux-exceptions-box-exception-container {
             max-width: 85%;
-            padding: var(--nluxc-padding-s) var(--nluxc-border-radius);
-            color: var(--nluxc-exceptions-box-error-text-color);
-            border-width: var(--nluxc-border-width);
-            border-color: var(--nluxc-exceptions-box-error-border-color);
-            border-radius: var(--nluxc-border-radius-s);
-            background-color: var(--nluxc-exceptions-box-error-background-color);
+            padding: var(--nlux-padding-s) var(--nlux-border-radius);
+            color: var(--nlux-exceptions-box-error-text-color);
+            border-width: var(--nlux-border-width);
+            border-color: var(--nlux-exceptions-box-error-border-color);
+            border-radius: var(--nlux-border-radius-s);
+            background-color: var(--nlux-exceptions-box-error-background-color);
 
-            > .nluxc-exceptions-box-message {
+            > .nlux-exceptions-box-message {
                 text-align: center;
             }
         }

packages/css/themes/src/common/components/prompt-box.css

@@ -1,17 +1,17 @@
-.nluxc-root {
-    .nluxc-prompt-box-container {
+.nlux-AiChat-root {
+    .nlux-prompt-box-container {
         display: flex;
         align-items: stretch;
         flex-direction: row;
 
-        gap: var(--nluxc-flex-gap);
+        gap: var(--nlux-flex-gap);
 
-        > .nluxc-prompt-box-text-input {
+        > .nlux-prompt-box-text-input {
             flex: 1;
             resize: none;
         }
 
-        > .nluxc-prompt-box-send-button {
+        > .nlux-prompt-box-send-button {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -25,7 +25,7 @@
                 display: none;
             }
 
-            &.nluxc-prompt-box-send-button-loading {
+            &.nlux-prompt-box-send-button-loading {
                 > svg {
                     display: none;
                 }

packages/css/themes/src/common/components/spinning-loader.css

@@ -1,4 +1,4 @@
-.nluxc-root {
+.nlux-AiChat-root {
     .spinning-loader {
         display: inline-block;
         transform: rotateZ(45deg);