Merge pull request #198 from AprilNEA/v3-dev

v3.2.4-alpha

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatgpt-admin-web",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "ChatGPT Admin Web",
   "license": "MIT",
   "author": "AprilNEA <[email protected]> (https://sku.moe)",

packages/frontend/next.config.js

@@ -9,9 +9,17 @@ const config = fs.existsSync(CONFIG_FILE)
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   env: {
-    NEXT_PUBLIC_TITLE: config?.title ?? 'ChatGPT Admin Web',
-    NEXT_PUBLIC_DESCRIPTION:
-      config?.description ?? 'Your personal ChatGPT Bot.',
+    TITLE: config?.brand?.title ?? config?.title ?? 'ChatGPT Admin Web',
+    DESCRIPTION:
+      config?.brand?.description ??
+      config?.description ??
+      'Your personal ChatGPT Bot.',
+    LOGO: config?.brand?.logo?.index,
+    LOGO_BOT: config?.brand?.logo?.bot,
+    LOGO_LOGIN: config?.brand?.logo?.login,
+    LOGO_LOADING: config?.brand?.logo?.loading,
+    LOGO_SIDEBAR: config?.brand?.logo?.sidebar,
+    ONBOARDING: config?.brand?.onboarding,
   },
   transpilePackages: ['shared'],
   webpack(config) {

packages/frontend/package.json

@@ -37,12 +37,14 @@
     "sass": "^1.59.2",
     "shared": "workspace:*",
     "swr": "^2.2.4",
+    "uuid": "^9.0.1",
     "zustand": "^4.3.6"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-katex": "^3.0.0",
+    "@types/uuid": "^9.0.7",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",

packages/frontend/src/app/(user-end)/chat/new/page.tsx

@@ -4,6 +4,8 @@
    移除将会导致在客户端未刷新的情况下 randomUUID 永远相同 */
 import { RedirectType, redirect } from 'next/navigation';
 
+import { randomUUID } from '@/utils/client-utils';
+
 export default function NewChatPage() {
-  redirect(`/chat/${crypto.randomUUID()}?new=true`, RedirectType.replace);
+  redirect(`/chat/${randomUUID()}?new=true`, RedirectType.replace);
 }

packages/frontend/src/app/(user-end)/page.tsx

@@ -5,8 +5,8 @@ import { useRouter } from 'next/navigation';
 import { IconButton } from '@/components/button';
 import Chat from '@/components/chat';
 import AddIcon from '@/icons/add.svg';
-import ReturnIcon from '@/icons/return.svg';
 import ChatGptIcon from '@/icons/bot.svg';
+import ReturnIcon from '@/icons/return.svg';
 import Locale from '@/locales';
 import { useStore } from '@/store';
 import styles from '@/styles/module/welcome.module.scss';
@@ -26,10 +26,11 @@ export default function ChatPage() {
         className={styles['return-btn']}
       ></IconButton>
       <div className={styles['welcome-container']}>
-        <div className={styles['logo']}>
-        </div>
+        <div className={styles['logo']}></div>
         <div className={styles['title']}>{Locale.Index.Title}</div>
-        <div className={styles['message']}>{Locale.Index.WelcomeCaption}</div>
+        <div className={styles['message']}>
+          {process.env.DESCRIPTION ?? Locale.Index.WelcomeCaption}
+        </div>
         <IconButton
           text={Locale.Home.NewChat}
           icon={<AddIcon />}

packages/frontend/src/app/auth/page.tsx

@@ -270,11 +270,18 @@ export default function AuthPage() {
   return (
     <div className={styles['auth-page']}>
       <div className={`no-dark ${styles['auth-logo']}`}>
-        <BotIcon />
-      </div>
-      <div className={styles['auth-title']}>
-        {process.env.NEXT_PUBLIC_TITLE}
+        {!!process.env.LOGO_LOGIN ? (
+          <Image
+            src={process.env.LOGO_LOGIN}
+            alt="Logo"
+            width={100}
+            height={100}
+          />
+        ) : (
+          <BotIcon />
+        )}
       </div>
+      <div className={styles['auth-title']}>{Locales.Index.Title}</div>
       <div className={styles['auth-tips']}></div>
       <div className={styles['auth-container']}>
         {tab === 'code' ? (
@@ -289,20 +296,22 @@ export default function AuthPage() {
           <div className={styles['divider-text']}>OR</div>
           <div className={styles['divider-line']} />
         </div>
-        <div className={styles['third-part-login-options']}>
-          <div
-            className={styles['third-part-option']}
-            onClick={() => {
-              setTab(() => {
-                if (tab != 'wechat') return 'wechat';
-                else return 'code';
-              });
-            }}
-          >
-            {tab == 'wechat' ? <VerificationCodeIcon /> : <WechatLogo />}
-            <div>使用{tab == 'wechat' ? '验证码' : '微信'}登陆</div>
+        {process.env.WECHAT && (
+          <div className={styles['third-part-login-options']}>
+            <div
+              className={styles['third-part-option']}
+              onClick={() => {
+                setTab(() => {
+                  if (tab != 'wechat') return 'wechat';
+                  else return 'code';
+                });
+              }}
+            >
+              {tab == 'wechat' ? <VerificationCodeIcon /> : <WechatLogo />}
+              <div>使用{tab == 'wechat' ? '验证码' : '微信'}登陆</div>
+            </div>
           </div>
-        </div>
+        )}
         <div className={styles['third-part-login-options']}>
           <div
             className={styles['third-part-option']}

packages/frontend/src/app/layout.tsx

@@ -2,8 +2,8 @@
 import { SWRProvider } from '@/app/provider';
 
 export const metadata = {
-  title: process.env.NEXT_PUBLIC_TITLE,
-  description: process.env.NEXT_PUBLIC_DESCRIPTION,
+  title: process.env.TITLE,
+  description: process.env.DESCRIPTION,
 };
 
 export default function RootLayout({
@@ -18,6 +18,9 @@ export default function RootLayout({
           name="viewport"
           content="width=device-width, userRef-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
         />
+        {process.env.LOGO && (
+          <link rel="icon" type="image/svg+xml" href={process.env.LOGO} />
+        )}
         <link rel="preconnect" href="https://fonts.googleapis.com"></link>
         <link rel="preconnect" href="https://fonts.gstatic.com"></link>
         <link

packages/frontend/src/components/avatar/index.tsx

@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic';
+import Image from 'next/image';
 
 import BotIcon from '@/icons/bot.svg';
 import LoadingIcon from '@/icons/three-dots.svg';
@@ -19,8 +20,18 @@ const Emoji = dynamic(async () => (await import('emoji-picker-react')).Emoji, {
 export function Avatar(props: { role: ChatMessage['role'] }) {
   const config = useStore((state) => state.config);
 
-  if (props.role === 'assistant') {
-    return <BotIcon className={styles['user-avtar']} />;
+  if (props.role !== 'user') {
+    return process.env.LOGO_BOT ? (
+      <Image
+        src={process.env.LOGO_BOT}
+        alt="Logo"
+        className={styles['user-avtar']}
+        width="30"
+        height="30"
+      />
+    ) : (
+      <BotIcon className={styles['user-avtar']} />
+    );
   }
 
   return (

packages/frontend/src/components/loading/index.tsx

@@ -1,11 +1,23 @@
+import Image from 'next/image';
+
 import BotIcon from '@/icons/bot.svg';
 import LoadingIcon from '@/icons/three-dots.svg';
 import styles from '@/styles/module/home.module.scss';
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
     <div className={styles['loading-content']}>
-      {!props.noLogo && <BotIcon />}
+      {!props.noLogo &&
+        (process.env.LOGO_LOADING ? (
+          <Image
+            src={process.env.LOGO_LOADING}
+            alt="logo"
+            width="100"
+            height="100"
+          />
+        ) : (
+          <BotIcon />
+        ))}
       <LoadingIcon />
     </div>
   );

packages/frontend/src/components/sidebar/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -198,7 +199,16 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
             </div>
           )}
           <div className={styles['sidebar-logo']}>
-            <ChatGptIcon />
+            {process.env.LOGO_SIDEBAR ? (
+              <Image
+                src={process.env.LOGO_SIDEBAR}
+                alt="Logo"
+                width="48"
+                height="48"
+              />
+            ) : (
+              <ChatGptIcon />
+            )}
           </div>
         </div>
         <div className={styles['sidebar-newbtn']}>

packages/frontend/src/global.d.ts

@@ -12,7 +12,15 @@ declare module '*.svg';
 declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: 'development' | 'production';
-    NEXT_PUBLIC_TITLE: string;
-    NEXT_PUBLIC_DESCRIPTION: string;
+    TITLE: string;
+    DESCRIPTION: string;
+
+    LOGO?: string;
+    LOGO_BOT?: string;
+    LOGO_LOGIN?: string;
+    LOGO_LOADING?: string;
+    LOGO_SIDEBAR?: string;
+
+    ONBOARDING?: string;
   }
 }

packages/frontend/src/locales/cn.ts

@@ -1,4 +1,4 @@
-export const TITLE = process.env.NEXT_PUBLIC_TITLE || 'ChatGPT Admin Web';
+export const TITLE = process.env.TITLE || 'ChatGPT Admin Web';
 
 const cn = {
   // Auth Page
@@ -19,7 +19,7 @@ const cn = {
   // Index Page
   Index: {
     DefaultUser: '用户',
-    Title: process.env.NEXT_PUBLIC_TITLE || 'ChatGPT Admin Web',
+    Title: TITLE,
     SubTitle: '欢迎关注微信公众号：',
     PremiumLimit: (count: number) => `当前可用：${count} 条`,
     UpgradePremium: '升级到高级版',
@@ -59,6 +59,7 @@ const cn = {
     ChatItemCount: (count: number) => `${count} 条对话`,
   },
   Chat: {
+    Onboarding: process.env.ONBOARDING ?? '你好，请问有什么可以帮助您？',
     SubTitle: (count: number) => `与 ${TITLE} 的 ${count} 条对话`,
     Actions: {
       ChatList: '查看消息列表',

packages/frontend/src/locales/en.ts

@@ -63,6 +63,7 @@ const en: LocaleType = {
     ChatItemCount: (count: number) => `${count} messages`,
   },
   Chat: {
+    Onboarding: process.env.ONBOARDING ?? 'Welcome to use AI Chatting Room',
     SubTitle: (count: number) => `${count} conversations with ${TITLE}`,
     Actions: {
       ChatList: 'View Message List',

packages/frontend/src/store/chat.ts

@@ -1,5 +1,6 @@
 import { StateCreator } from 'zustand';
 
+import Locales from '@/locales';
 import { ChatSlice, StoreType } from '@/store/types';
 import { TextLineStream } from '@/utils/text_line_stream';
 
@@ -63,7 +64,7 @@ export const createChatStore: StateCreator<StoreType, [], [], ChatSlice> = (
         currentChatSessionMessages: [
           {
             role: 'system',
-            content: '你好，请问有什么可以帮助您？',
+            content: Locales.Chat.Onboarding,
             modelId: 1,
             createdAt: new Date(),
             updatedAt: new Date(),

packages/frontend/src/utils/client-utils.ts

@@ -1,6 +1,16 @@
+import { v4 as uuidv4 } from 'uuid';
+
 import { showToast } from '@/components/ui-lib';
 import Locale from '@/locales';
 
+export const randomUUID = () => {
+  if ('crypto' in window && 'randomUUID' in crypto) {
+    return crypto.randomUUID();
+  } else {
+    return uuidv4();
+  }
+};
+
 export function trimTopic(topic: string) {
   return topic.replace(/[，。！？、,.!?]*$/, '');
 }

turbo.json

@@ -33,6 +33,7 @@
       ]
     },
     "build": {
+      "inputs": ["config.json"],
       "dependsOn": [
         "db:generate",
         "^build"
@@ -48,7 +49,6 @@
     },
     "start": {
       "dependsOn": [
-        "build",
         "^start"
       ]
     },