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)

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

@@ -0,0 +1,29 @@
+export function hexToRGBA(hex: string, opacity: number): string {
+  hex = hex.replace('#', '')
+
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+
+  // Returning an RGB color object
+  return `rgba(${r},${g},${b},${opacity.toString()})`
+}
+
+/**
+ * Since strings cannot be directly assigned to the 'style' attribute in JSX,
+ * this method transforms the string into an object representation of the styles.
+ */
+export function CssTransform(cssString: string): object {
+  if (cssString.length === 0)
+    return {}
+
+  const style: object = {}
+  const propertyValuePairs = cssString.split(';')
+  for (const pair of propertyValuePairs) {
+    if (pair.trim().length > 0) {
+      const [property, value] = pair.split(':')
+      Object.assign(style, { [property.trim()]: value.trim() })
+    }
+  }
+  return style
+}