update

deploy/server/workflow/assets/css/chatui/chatbox.css

@@ -0,0 +1,10 @@
+.Message.left .Bubble {
+    text-align: left;
+}
+.MessageList {
+  height: 100%;
+}
+/* https://chatui.io/sdk/faq */
+/* .ChatFooter .Composer-input {
+  min-height: 68px;
+} */

deploy/server/workflow/assets/css/chatui/chatpro.css

@@ -0,0 +1,3 @@
+/* .ChatFooter .Composer-input {
+    min-height: 88px;
+} */

deploy/server/workflow/assets/css/chatui/chatui-theme-dark-vars.json

@@ -0,0 +1,73 @@
+{
+  "light": {
+    "brand-1": "#ffffff",
+    "brand-2": "#ffffff",
+    "brand-3": "#ffffff",
+    "black": "#000",
+    "white": "#9b9b9b",
+    "gray-1": "#ffffff",
+    "gray-2": "#ffffff",
+    "gray-3": "#4a4a4a",
+    "gray-4": "#ccc",
+    "gray-5": "#ddd",
+    "gray-6": "#eee",
+    "gray-7": "#f5f5f5",
+    "gray-8": "#f8f8f8",
+    "blue": "#4a90e2",
+    "gray-dark": "#333",
+    "green": "#62d957",
+    "orange": "#f5a623",
+    "red": "#d0021b",
+    "yellow": "#f8e71c",
+    "yellow-light": "#fff9db",
+    "root-font-size": "16px",
+    "app-bg-color": "#000000",
+    "app-bg-image": "none",
+    "msglist-bg-image": "none",
+    "navbar-bg-color": "#000000",
+    "navbar-bg-image": "none",
+    "navbar-color": "#fff",
+    "navbar-icon-color": "#ffffff",
+    "navbar-min-height": "44px",
+    "navbar-logo-height": "36px",
+    "navbar-no-border-shadow": "true",
+    "notice-bg-color": "#000000",
+    "bubble-left-bg-color": "#4a4a4a",
+    "bubble-left-bg-image": "none",
+    "bubble-left-color": "#fff",
+    "bubble-right-bg-color": "#7ed321",
+    "bubble-right-bg-image": "none",
+    "bubble-right-color": "#000000",
+    "btn-primary-bg": "linear-gradient(90deg, var(--brand-2) 0%, var(--brand-1) 98%)",
+    "btn-primary-border-color": "transparent",
+    "btn-primary-color": "#111",
+    "watermark-bg-image": "none",
+    "watermark-opacity": "1",
+    "watermark-width": "150px",
+    "watermark-height": "64px",
+    "marked-color": "#ffffff",
+    "marked-bg-color": "#4a4a4a",
+    "qr-height": "30px",
+    "qr-border": "1px",
+    "qr-bg-color": "#4a4a4a",
+    "qr-color": "#fff",
+    "qr-highlight-border-color": "rgba(0,0,0,0)",
+    "qr-left-image-width": "11px",
+    "qr-left-image": "none",
+    "qr-right-image-width": "11px",
+    "qr-right-image": "none",
+    "qr-center-image-width": "10px",
+    "qr-center-image": "none",
+    "footer-bg-color": "#000000",
+    "footer-bg-image": "none",
+    "bubble-left-border-radius": "12px",
+    "bubble-right-border-radius": "12px",
+    "card-border-radius": "12px",
+    "btn-border-radius": "999px",
+    "quick-reply-border-radius": "15px"
+  },
+  "dark": {},
+  "cssVars": [],
+  "customStyle": "",
+  "ver": "5.1"
+}

deploy/server/workflow/assets/css/chatui/chatui-theme-dark.css

@@ -0,0 +1,59 @@
+:root {
+  --brand-1: #ffffff;
+  --brand-2: #ffffff;
+  --brand-3: #ffffff;
+  --white: #9b9b9b;
+  --gray-1: #ffffff;
+  --gray-2: #ffffff;
+  --gray-3: #4a4a4a;
+  --blue: #4a90e2;
+  --orange: #f5a623;
+  --red: #d0021b;
+  --yellow: #f8e71c;
+  --marked-color: #ffffff;
+  --marked-bg-color: #4a4a4a;
+  --btn-primary-color: #111;
+}
+.ChatApp,
+.MessageContainer,
+.Navbar,
+.Message .Bubble,
+.QuickReplies,
+.ChatFooter {
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.ChatApp {
+  background-color: #000000;
+}
+.Notice {
+  background-color: #000000;
+}
+.Navbar {
+  background-color: #000000;
+  border: 0;
+  box-shadow: none;
+}
+.Navbar .IconBtn {
+  color: #ffffff;
+}
+.Navbar-title {
+  color: #fff;
+}
+.Message.left .Bubble {
+  background-color: #4a4a4a;
+  color: #fff;
+}
+.Message.right .Bubble {
+  background-color: #7ed321;
+  color: #000000;
+}
+.QuickReply.highlight {
+  background-color: #4a4a4a;
+  color: #fff;
+  border-color: rgba(0, 0, 0, 0);
+}
+.QuickReplies,
+.ChatFooter {
+  background-color: #000000;
+}

deploy/server/workflow/assets/css/scrollbar.css

@@ -0,0 +1,20 @@
+/* 美化windows滚动条, TODO: 待完善，参考mac scroll是不占用宽度的，漂浮在上方 */
+/* https://www.51cto.com/article/716443.html */
+body {
+  margin: 0;
+  overflow: overlay;
+}
+::-webkit-scrollbar {
+  background-color: transparent;
+  width: 12px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 8px;
+  background-clip: content-box;
+  border: 2px solid transparent;
+}
+body[scroll]::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}