add css

.chainlit/config.toml

@@ -53,22 +53,21 @@ edit_message = true
 
 [UI]
 # Name of the assistant.
-name = "Assistant"
+name = "AI E-commerce Assistant"
+
+# Description of the assistant. This is used for HTML tags.
+description = "An intelligent assistant for e-commerce analytics and insights"
+
+# Specify a CSS file that can be used to customize the user interface.
+custom_css = "/public/custom.css"
 
 # default_theme = "dark"
 
 # layout = "wide"
 
-# Description of the assistant. This is used for HTML tags.
-# description = ""
-
 # Chain of Thought (CoT) display mode. Can be "hidden", "tool_call" or "full".
 cot = "full"
 
-# Specify a CSS file that can be used to customize the user interface.
-# The CSS file can be served from the public directory or via an external link.
-# custom_css = "/public/test.css"
-
 # Specify a Javascript file that can be used to customize the user interface.
 # The Javascript file can be served from the public directory.
 # custom_js = "/public/test.js"

public/custom.css

@@ -0,0 +1,31 @@
+:root {
+  --primary-color: #4a6fa5;
+  --secondary-color: #6b8cae;
+  --background-color: #f5f7fa;
+  --text-color: #333;
+  --border-radius: 8px;
+}
+
+.cl-main {
+  background-color: var(--background-color);
+}
+
+.cl-message-input {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--primary-color);
+}
+
+.cl-message-container {
+  background-color: white;
+  border-radius: var(--border-radius);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 16px;
+}
+
+.cl-submit-btn {
+  background-color: var(--primary-color);
+}
+
+.cl-submit-btn:hover {
+  background-color: var(--secondary-color);
+}