From 851d2d1c96f2790dc267ac4c1c115bd709b09d4b Mon Sep 17 00:00:00 2001
From: chenxc <>
Date: Mon, 15 Jul 2024 10:46:26 +0800
Subject: [PATCH] feat(sidebar): add SIDEBAR_TITLE and SIDEBAR_SUBTITLE config
 for custom sidebar information

---
 .env.template              |  9 ++++++++-
 app/components/sidebar.tsx |  8 ++++----
 app/config/server.ts       | 13 +++++++++++--
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/.env.template b/.env.template
index b2a0438d9d1..4a6fe3fefad 100644
--- a/.env.template
+++ b/.env.template
@@ -60,4 +60,11 @@ ANTHROPIC_API_VERSION=
 ANTHROPIC_URL=
 
 ### (optional)
-WHITE_WEBDEV_ENDPOINTS=
\ No newline at end of file
+WHITE_WEBDEV_ENDPOINTS=
+
+### custom sidebar title.(optional)
+SIDEBAR_TITLE=
+
+### custom sidebar subtitle.(optional)
+SIDEBAR_SUBTITLE=
+
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 69b2e71f871..c68aacccf6f 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -30,6 +30,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
 import { showConfirm, showToast } from "./ui-lib";
+import { getServerSideConfig } from "../config/server";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
@@ -130,7 +131,6 @@ function useDragSideBar() {
 
 export function SideBar(props: { className?: string }) {
   const chatStore = useChatStore();
-
   // drag side bar
   const { onDragStart, shouldNarrow } = useDragSideBar();
   const navigate = useNavigate();
@@ -140,7 +140,7 @@ export function SideBar(props: { className?: string }) {
     () => isIOS() && isMobileScreen,
     [isMobileScreen],
   );
-
+  const serverConfig = getServerSideConfig();
   useHotKey();
 
   return (
@@ -155,10 +155,10 @@ export function SideBar(props: { className?: string }) {
     >
       <div className={styles["sidebar-header"]} data-tauri-drag-region>
         <div className={styles["sidebar-title"]} data-tauri-drag-region>
-          NextChat
+          {serverConfig.sidebarTitle}
         </div>
         <div className={styles["sidebar-sub-title"]}>
-          Build your own AI assistant.
+          {serverConfig.sidebarSubTitle}
         </div>
         <div className={styles["sidebar-logo"] + " no-dark"}>
           <ChatGptIcon />
diff --git a/app/config/server.ts b/app/config/server.ts
index 23557788b08..fc6de115774 100644
--- a/app/config/server.ts
+++ b/app/config/server.ts
@@ -55,13 +55,17 @@ declare global {
 
       // custom template for preprocessing user input
       DEFAULT_INPUT_TEMPLATE?: string;
+
+      // custom sidebar title
+      SIDEBAR_TITLE?: string;
+      // custom sidebar sub-title
+      SIDEBAR_SUB_TITLE?: string;
     }
   }
 }
 
 const ACCESS_CODES = (function getAccessCodes(): Set<string> {
   const code = process.env.CODE;
-
   try {
     const codes = (code?.split(",") ?? [])
       .filter((v) => !!v)
@@ -125,7 +129,10 @@ export const getServerSideConfig = () => {
   const allowedWebDevEndpoints = (
     process.env.WHITE_WEBDEV_ENDPOINTS ?? ""
   ).split(",");
-
+  // custom title
+  const sidebarTitle = process.env.SIDEBAR_TITLE ?? "NextChat";
+  const sidebarSubTitle =
+    process.env.SIDEBAR_SUB_TITLE ?? "Build your own AI assistant.";
   return {
     baseUrl: process.env.BASE_URL,
     apiKey: getApiKey(process.env.OPENAI_API_KEY),
@@ -174,5 +181,7 @@ export const getServerSideConfig = () => {
     customModels,
     defaultModel,
     allowedWebDevEndpoints,
+    sidebarTitle,
+    sidebarSubTitle,
   };
 };