feat(sidebar): add SIDEBAR_TITLE and SIDEBAR_SUBTITLE config for cust…

.env.template

@@ -60,4 +60,13 @@ ANTHROPIC_API_VERSION=
 ANTHROPIC_URL=
 
 ### (optional)
-WHITE_WEBDEV_ENDPOINTS=
+WHITE_WEBDEV_ENDPOINTS=
+
+### custom sidebar title.(optional)
+SITE_TITLE=
+
+### custom sidebar subtitle.(optional)
+SITE_DESCRIPTION=
+
+## custom sidebar logo url.(optional)
+SITE_LOGO_URL=

.github/workflows/docker.yml

@@ -19,8 +19,8 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      
-      - 
+
+      -
         name: Extract metadata (tags, labels) for Docker
         id: meta
         uses: docker/metadata-action@v4
@@ -29,16 +29,16 @@ jobs:
           tags: |
             type=raw,value=latest
             type=ref,event=tag
-      
-      - 
+
+      -
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2
 
-      - 
+      -
         name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
-      
-      - 
+
+      -
         name: Build and push Docker image
         uses: docker/build-push-action@v4
         with:
@@ -49,4 +49,4 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
-            
+

app/components/exporter.tsx

@@ -40,6 +40,7 @@ import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
 import { getClientConfig } from "../config/client";
 import { type ClientApi, getClientApi } from "../client/api";
 import { getMessageTextContent } from "../utils";
+import { getServerSideConfig } from "@/app/config/server";
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
   loading: () => <LoadingIcon />,
@@ -515,7 +516,7 @@ export function ImagePreviewer(props: {
       dom.innerHTML = dom.innerHTML; // Refresh the content of the preview by resetting its HTML for fix a bug glitching
     }
   };
-
+  const { siteTitle, siteDescription } = getServerSideConfig();
   return (
     <div className={styles["image-previewer"]}>
       <PreviewActions
@@ -539,10 +540,8 @@ export function ImagePreviewer(props: {
           </div>
 
           <div>
-            <div className={styles["main-title"]}>NextChat</div>
-            <div className={styles["sub-title"]}>
-              github.com/Yidadaa/ChatGPT-Next-Web
-            </div>
+            <div className={styles["main-title"]}>{siteTitle}</div>
+            <div className={styles["sub-title"]}>{siteDescription}</div>
             <div className={styles["icons"]}>
               <ExportAvatar avatar={config.avatar} />
               <span className={styles["icon-space"]}>&</span>

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 { siteTitle, siteDescription, siteLogURL } = getServerSideConfig();
   useHotKey();
 
   return (
@@ -155,13 +155,15 @@ 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
-        </div>
-        <div className={styles["sidebar-sub-title"]}>
-          Build your own AI assistant.
+          {siteTitle}
         </div>
+        <div className={styles["sidebar-sub-title"]}>{siteDescription}</div>
         <div className={styles["sidebar-logo"] + " no-dark"}>
-          <ChatGptIcon />
+          {!!siteLogURL ? (
+            <img src={"https://unsplash.it/40/43?random"}></img>
+          ) : (
+            <ChatGptIcon />
+          )}
         </div>
       </div>
 

app/config/server.ts

@@ -55,13 +55,18 @@ declare global {
 
       // custom template for preprocessing user input
       DEFAULT_INPUT_TEMPLATE?: string;
+
+      // custom site title
+      SITE_TITLE?: string;
+      // custom site description
+      SITE_DESCRIPTION?: string;
+      SITE_LOGO_URL?: string;
     }
   }
 }
 
 const ACCESS_CODES = (function getAccessCodes(): Set<string> {
   const code = process.env.CODE;
-
   try {
     const codes = (code?.split(",") ?? [])
       .filter((v) => !!v)
@@ -125,7 +130,11 @@ export const getServerSideConfig = () => {
   const allowedWebDevEndpoints = (
     process.env.WHITE_WEBDEV_ENDPOINTS ?? ""
   ).split(",");
-
+  // custom site
+  const siteTitle = process.env.SITE_TITLE ?? "NextChat";
+  const siteDescription =
+    process.env.SITE_DESCRIPTION ?? "Build your own AI assistant.";
+  const siteLogURL = process.env.SITE_LOGO_URL ?? "";
   return {
     baseUrl: process.env.BASE_URL,
     apiKey: getApiKey(process.env.OPENAI_API_KEY),
@@ -174,5 +183,8 @@ export const getServerSideConfig = () => {
     customModels,
     defaultModel,
     allowedWebDevEndpoints,
+    siteTitle,
+    siteDescription,
+    siteLogURL,
   };
 };

app/layout.tsx

@@ -10,10 +10,10 @@ import { GoogleTagManager } from "@next/third-parties/google";
 const serverConfig = getServerSideConfig();
 
 export const metadata: Metadata = {
-  title: "NextChat",
+  title: serverConfig.siteTitle,
   description: "Your personal ChatGPT Chat Bot.",
   appleWebApp: {
-    title: "NextChat",
+    title: serverConfig.siteTitle,
     statusBarStyle: "default",
   },
 };
@@ -37,7 +37,10 @@ export default function RootLayout({
     <html lang="en">
       <head>
         <meta name="config" content={JSON.stringify(getClientConfig())} />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
         <link rel="manifest" href="/site.webmanifest"></link>
         <script src="/serviceWorkerRegister.js" defer></script>
       </head>

app/store/update.ts

@@ -11,9 +11,11 @@ import Locale from "../locales";
 import { use } from "react";
 import { useAppConfig } from ".";
 import { ClientApi } from "../client/api";
+import { getServerSideConfig } from "@/app/config/server";
 
 const ONE_MINUTE = 60 * 1000;
 const isApp = !!getClientConfig()?.isApp;
+const serverConfig = getServerSideConfig();
 
 function formatVersionDate(t: string) {
   const d = new Date(+t);
@@ -106,7 +108,7 @@ export const useUpdateStore = createPersistStore(
                       if (version === remoteId) {
                         // Show a notification using Tauri
                         window.__TAURI__?.notification.sendNotification({
-                          title: "NextChat",
+                          title: `${serverConfig.siteTitle}`,
                           body: `${Locale.Settings.Update.IsLatest}`,
                           icon: `${ChatGptIcon.src}`,
                           sound: "Default",
@@ -116,7 +118,7 @@ export const useUpdateStore = createPersistStore(
                           Locale.Settings.Update.FoundUpdate(`${remoteId}`);
                         // Show a notification for the new version using Tauri
                         window.__TAURI__?.notification.sendNotification({
-                          title: "NextChat",
+                          title: `${serverConfig.siteTitle}`,
                           body: updateMessage,
                           icon: `${ChatGptIcon.src}`,
                           sound: "Default",