refactor: add key generation based on selected settings by specific field(s)

frontend/src/app-components/widget/ChatWidget.tsx

@@ -8,8 +8,12 @@
 
 import { Avatar, Box } from "@mui/material";
 import UiChatWidget from "hexabot-chat-widget/src/UiChatWidget";
+import {
+  extractSettingValues,
+  generateUUIDFromString,
+} from "hexabot-chat-widget/src/utils/text";
 import { usePathname } from "next/navigation";
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 
 import { getAvatarSrc } from "@/components/inbox/helpers/mapMessages";
 import { useLoadSettings } from "@/hooks/entities/auth-hooks";
@@ -26,15 +30,24 @@ export const ChatWidget = () => {
   const { isAuthenticated } = useAuth();
   const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`;
   const { data: settings } = useLoadSettings();
-  const key = useMemo(
-    () =>
-      JSON.stringify(
-        settings?.["console_channel"]?.find(
-          (s) => s.label === "allowed_domains",
-        )?.value,
-      ),
-    [settings],
-  );
+  const [key, setKey] = useState("");
+
+  useEffect(() => {
+    const settingValues = extractSettingValues(settings, [
+      {
+        group: "console_channel",
+        label: "allowed_domains",
+        selectedField: "value",
+      },
+      {
+        group: "console_channel",
+        label: "theme_color",
+        selectedField: "value",
+      },
+    ]);
+
+    setKey(generateUUIDFromString(settingValues.join()));
+  }, [settings]);
 
   return isAuthenticated ? (
     <Box

widget/src/providers/SettingsProvider.tsx

@@ -20,7 +20,7 @@ import { SessionStorage } from '../utils/sessionStorage';
 
 import { useSubscribe } from './SocketProvider';
 
-type ChannelSettings = {
+export type ChannelSettings = {
   menu: IMenuNode[];
   secret: string;
   allowed_domains: string;

widget/src/utils/text.ts

@@ -6,12 +6,16 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+import { createHash } from "crypto";
+
+import { ChannelSettings } from "../providers/SettingsProvider";
+
 export const truncate = (s: string, length = 100) => {
-  return s.length > length ? s.substr(0, length) + '...' : s;
+  return s.length > length ? s.substr(0, length) + "..." : s;
 };
 
 export const linebreak = (s: string) => {
-  return s.replace(/\n/g, '<br />');
+  return s.replace(/\n/g, "<br />");
 };
 
 export const processContent = (s: string) => {
@@ -21,3 +25,35 @@ export const processContent = (s: string) => {
 
   return result;
 };
+
+export const generateUUIDFromString = (str: string) => {
+  const hash = createHash("sha256").update(str).digest("hex");
+
+  return hash.replace(/(.{8})(.{4})(.{4})(.{4})(.+)/, "$1-$2-$3-$4-$5");
+};
+
+type TChannel = "console_channel";
+type TSetting = {
+  group: TChannel;
+  label: keyof ChannelSettings;
+  value?: string;
+};
+type TSettings = Record<string, TSetting[]>;
+type TCriterion = {
+  group: TSetting["group"];
+  label: TSetting["label"];
+  selectedField: keyof TSetting;
+};
+
+export const extractSettingValue = (
+  settings: TSettings,
+  criterion: TCriterion
+) =>
+  settings?.[criterion.group]?.find(
+    (setting) => setting.label === criterion.label
+  )?.[criterion?.selectedField];
+
+export const extractSettingValues = (
+  settings: TSettings,
+  criteria: TCriterion[]
+) => criteria.map((criterion) => extractSettingValue(settings, criterion));