Mintplex-Labs · timothycarambat · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -27,9 +27,13 @@ const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
 const AdminLogs = lazy(() => import("@/pages/Admin/Logging"));
 const AdminAgents = lazy(() => import("@/pages/Admin/Agents"));
 const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
-const GeneralAppearance = lazy(
-  () => import("@/pages/GeneralSettings/Appearance")
+const InterfaceSettings = lazy(
+  () => import("@/pages/GeneralSettings/Settings/Interface")
 );
+const BrandingSettings = lazy(
+  () => import("@/pages/GeneralSettings/Settings/Branding")
+);
+
 const GeneralApiKeys = lazy(() => import("@/pages/GeneralSettings/ApiKeys"));
 const GeneralLLMPreference = lazy(
   () => import("@/pages/GeneralSettings/LLMPreference")
@@ -186,8 +190,12 @@ export default function App() {
                     element={<AdminRoute Component={PrivacyAndData} />}
                   />
                   <Route
-                    path="/settings/appearance"
-                    element={<ManagerRoute Component={GeneralAppearance} />}
+                    path="/settings/interface"
+                    element={<ManagerRoute Component={InterfaceSettings} />}
+                  />
+                  <Route
+                    path="/settings/branding"
+                    element={<ManagerRoute Component={BrandingSettings} />}
                   />
                   <Route
                     path="/settings/beta-features"

diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
@@ -21,7 +21,9 @@ export default function EditingChatBubble({
       <p
         className={`text-xs text-white light:text-black/80 ${isUser ? "text-right" : ""}`}
       >
-        {isUser ? t("common.user") : t("appearance.message.assistant")}
+        {isUser
+          ? t("common.user")
+          : t("customization.items.welcome-messages.assistant")}
       </p>
       <div
         className={`relative flex w-full mt-2 items-start ${

diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
@@ -32,9 +32,8 @@ export default function SettingsButton() {
   return (
     <div className="flex w-fit">
       <Link
-        to={paths.settings.appearance()}
+        to={paths.settings.interface()}
         className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
-        // className="transition-all duration-300 p-2 rounded-full  bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
         aria-label="Settings"
         data-tooltip-id="footer-item"
         data-tooltip-content="Open settings"

diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
@@ -319,10 +319,21 @@ const SidebarOptions = ({ user = null, t }) => (
         <Option
           btnText={t("settings.customization")}
           icon={<PencilSimpleLine className="h-5 w-5 flex-shrink-0" />}
-          href={paths.settings.appearance()}
           user={user}
-          flex={true}
-          roles={["admin", "manager"]}
+          childOptions={[
+            {
+              btnText: t("settings.interface"),
+              href: paths.settings.interface(),
+              flex: true,
+              roles: ["admin", "manager"],
+            },
+            {
+              btnText: t("settings.branding"),
+              href: paths.settings.branding(),
+              flex: true,
+              roles: ["admin", "manager"],
+            },
+          ]}
         />
         <Option
           btnText={t("settings.tools")}

diff --git a/frontend/src/locales/ar/common.js b/frontend/src/locales/ar/common.js
@@ -97,6 +97,8 @@ const TRANSLATIONS = {
     contact: "اتصل بالدعم",
     "browser-extension": "ملحق المتصفح",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -341,35 +343,6 @@ const TRANSLATIONS = {
       at: "أرسلت في",
     },
   },
-  appearance: {
-    title: "مظهر",
-    description: "تخصيص إعدادات مظهر منصتك.",
-    logo: {
-      title: "تخصيص الشعار",
-      description: "قم بتحميل شعارك المخصص لجعل روبوت المحادثة خاصا بك .",
-      add: "أضف شعارًا مخصصًا",
-      recommended: "الحجم الموصى به: 800 × 200",
-      remove: "قم بإزالة",
-      replace: "قم باستبدال",
-    },
-    message: {
-      title: "تخصيص الرسائل",
-      description: "قم بتخصيص الرسائل التلقائية التي يتم عرضها لمستعمليك.",
-      new: "جديد",
-      system: "نظام",
-      user: "مستعمل",
-      message: "رسالة",
-      assistant: "مساعد الدردشة لِـ إني ثينك إلْلْم",
-      "double-click": "انقر نقراً مزدوجاً للتحرير...",
-      save: "حفظ الرسائل",
-    },
-    icons: {
-      title: "أيقونات التذييل المخصصة",
-      description: "تخصيص أيقونات التذييل المعروضة في أسفل الشريط الجانبي.",
-      icon: "أيقونة",
-      link: "رابط",
-    },
-  },
   api: {
     title: " مفاتيح واجهة برمجة التطبيقات.",
     description:
@@ -686,6 +659,79 @@ const TRANSLATIONS = {
     theme: null,
     language: null,
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;
diff --git a/frontend/src/locales/da/common.js b/frontend/src/locales/da/common.js
@@ -99,6 +99,8 @@ const TRANSLATIONS = {
     contact: "Kontakt support",
     "browser-extension": "Browserudvidelse",
     "system-prompt-variables": null,
+    interface: null,
+    branding: null,
   },
   login: {
     "multi-user": {
@@ -343,36 +345,6 @@ const TRANSLATIONS = {
       at: "Sendt kl.",
     },
   },
-  appearance: {
-    title: "Udseende",
-    description: "Tilpas platformens udseendeindstillinger.",
-    logo: {
-      title: "Tilpas logo",
-      description: "Upload dit tilpassede logo for at gøre din chatbot unik.",
-      add: "Tilføj et tilpasset logo",
-      recommended: "Anbefalet størrelse: 800 x 200",
-      remove: "Fjern",
-      replace: "Erstat",
-    },
-    message: {
-      title: "Tilpas beskeder",
-      description:
-        "Tilpas de automatiske beskeder, der vises for dine brugere.",
-      new: "Ny",
-      system: "system",
-      user: "bruger",
-      message: "besked",
-      assistant: "AnythingLLM Chat-assistent",
-      "double-click": "Dobbeltklik for at redigere...",
-      save: "Gem beskeder",
-    },
-    icons: {
-      title: "Tilpassede sidefodsikoner",
-      description: "Tilpas sidefodens ikoner, der vises nederst i sidebjælken.",
-      icon: "Ikon",
-      link: "Link",
-    },
-  },
   api: {
     title: "API-nøgler",
     description:
@@ -726,6 +698,79 @@ const TRANSLATIONS = {
     theme: "Tema-præference",
     language: "Foretrukket sprog",
   },
+  customization: {
+    interface: {
+      title: null,
+      description: null,
+    },
+    branding: {
+      title: null,
+      description: null,
+    },
+    items: {
+      theme: {
+        title: null,
+        description: null,
+      },
+      "show-scrollbar": {
+        title: null,
+        description: null,
+      },
+      "support-email": {
+        title: null,
+        description: null,
+      },
+      "app-name": {
+        title: null,
+        description: null,
+      },
+      "chat-message-alignment": {
+        title: null,
+        description: null,
+      },
+      "display-language": {
+        title: null,
+        description: null,
+      },
+      logo: {
+        title: null,
+        description: null,
+        add: null,
+        recommended: null,
+        remove: null,
+        replace: null,
+      },
+      "welcome-messages": {
+        title: null,
+        description: null,
+        new: null,
+        system: null,
+        user: null,
+        message: null,
+        assistant: null,
+        "double-click": null,
+        save: null,
+      },
+      "browser-appearance": {
+        title: null,
+        description: null,
+        tab: {
+          title: null,
+          description: null,
+        },
+        favicon: {
+          title: null,
+          description: null,
+        },
+      },
+      "sidebar-footer": {
+        title: null,
+        description: null,
+        icon: null,
+        link: null,
+      },
+    },
+  },
 };
 
 export default TRANSLATIONS;