FR: #4048 - Add color customization to the chatbot (#4885)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts

@@ -0,0 +1,72 @@
+import { createContext, useContext } from 'use-context-selector'
+import { hexToRGBA } from './utils'
+
+export class Theme {
+  public chatColorTheme: string | null
+  public chatColorThemeInverted: boolean
+
+  public primaryColor = '#1C64F2'
+  public backgroundHeaderColorStyle = 'backgroundImage: linear-gradient(to right, #2563eb, #0ea5e9)'
+  public headerBorderBottomStyle = ''
+  public colorFontOnHeaderStyle = 'color: white'
+  public colorPathOnHeader = 'white'
+  public backgroundButtonDefaultColorStyle = 'backgroundColor: #1C64F2'
+  public roundedBackgroundColorStyle = 'backgroundColor: rgb(245 248 255)'
+  public chatBubbleColorStyle = 'backgroundColor: rgb(225 239 254)'
+  public chatBubbleColor = 'rgb(225 239 254)'
+
+  constructor(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
+    this.chatColorTheme = chatColorTheme
+    this.chatColorThemeInverted = chatColorThemeInverted
+    this.configCustomColor()
+    this.configInvertedColor()
+  }
+
+  private configCustomColor() {
+    if (this.chatColorTheme !== null && this.chatColorTheme !== '') {
+      this.primaryColor = this.chatColorTheme ?? '#1C64F2'
+      this.backgroundHeaderColorStyle = `backgroundColor: ${this.primaryColor}`
+      this.backgroundButtonDefaultColorStyle = `backgroundColor: ${this.primaryColor}`
+      this.roundedBackgroundColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.05)}`
+      this.chatBubbleColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.15)}`
+      this.chatBubbleColor = `${hexToRGBA(this.primaryColor, 0.15)}`
+    }
+  }
+
+  private configInvertedColor() {
+    if (this.chatColorThemeInverted) {
+      this.backgroundHeaderColorStyle = 'backgroundColor: #ffffff'
+      this.colorFontOnHeaderStyle = `color: ${this.primaryColor}`
+      this.headerBorderBottomStyle = 'borderBottom: 1px solid #ccc'
+      this.colorPathOnHeader = this.primaryColor
+    }
+  }
+}
+
+export class ThemeBuilder {
+  private _theme?: Theme
+  private buildChecker = false
+
+  public get theme() {
+    if (this._theme === undefined)
+      throw new Error('The theme should be built first and then accessed')
+    else
+      return this._theme
+  }
+
+  public buildTheme(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
+    if (!this.buildChecker) {
+      this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
+      this.buildChecker = true
+    }
+    else {
+      if (this.theme?.chatColorTheme !== chatColorTheme || this.theme?.chatColorThemeInverted !== chatColorThemeInverted) {
+        this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
+        this.buildChecker = true
+      }
+    }
+  }
+}
+
+const ThemeContext = createContext<ThemeBuilder>(new ThemeBuilder())
+export const useThemeContext = () => useContext(ThemeContext)