feat(side config): add SITE_TITLE,SITE_DESCRIPTION and SITE_LOGO_URL as environment variable

.env.template

@@ -63,8 +63,10 @@ ANTHROPIC_URL=
 WHITE_WEBDEV_ENDPOINTS=
 
 ### custom sidebar title.(optional)
-SIDEBAR_TITLE=
+SITE_TITLE=
 
 ### custom sidebar subtitle.(optional)
-SIDEBAR_SUBTITLE=
+SITE_DESCRIPTION=
 
+## custom sidebar logo url.(optional)
+SITE_LOGO_URL=

.github/workflows/docker.yml

@@ -25,7 +25,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v4
         with:
-          images: 195658/chatgpt-next-web
+          images: yidadaa/chatgpt-next-web
           tags: |
             type=raw,value=latest
             type=ref,event=tag

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["main-title"]}>{siteTitle}</div>
-            <div className={styles["sub-title"]}>
+            <div className={styles["sub-title"]}>{siteDescription}</div>
-              github.com/Yidadaa/ChatGPT-Next-Web
-            </div>
             <div className={styles["icons"]}>
               <ExportAvatar avatar={config.avatar} />
               <span className={styles["icon-space"]}>&</span>

app/components/sidebar.tsx

@@ -140,7 +140,7 @@ export function SideBar(props: { className?: string }) {
     () => isIOS() && isMobileScreen,
     [isMobileScreen],
   );
-  const serverConfig = getServerSideConfig();
+  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>
-          {serverConfig.sidebarTitle}
+          {siteTitle}
-        </div>
-        <div className={styles["sidebar-sub-title"]}>
-          {serverConfig.sidebarSubTitle}
         </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

@@ -56,10 +56,11 @@ declare global {
       // custom template for preprocessing user input
       DEFAULT_INPUT_TEMPLATE?: string;
 
-      // custom sidebar title
+      // custom site title
-      SIDEBAR_TITLE?: string;
+      SITE_TITLE?: string;
-      // custom sidebar sub-title
+      // custom site description
-      SIDEBAR_SUB_TITLE?: string;
+      SITE_DESCRIPTION?: string;
+      SITE_LOGO_URL?: string;
     }
   }
 }
@@ -129,10 +130,11 @@ export const getServerSideConfig = () => {
   const allowedWebDevEndpoints = (
     process.env.WHITE_WEBDEV_ENDPOINTS ?? ""
   ).split(",");
-  // custom title
+  // custom site
-  const sidebarTitle = process.env.SIDEBAR_TITLE ?? "NextChat";
+  const siteTitle = process.env.SITE_TITLE ?? "NextChat";
-  const sidebarSubTitle =
+  const siteDescription =
-    process.env.SIDEBAR_SUB_TITLE ?? "Build your own AI assistant.";
+    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),
@@ -181,7 +183,8 @@ export const getServerSideConfig = () => {
     customModels,
     defaultModel,
     allowedWebDevEndpoints,
-    sidebarTitle,
+    siteTitle,
-    sidebarSubTitle,
+    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",