feat: add announcement

package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-popover": "1.0.5",
     "@radix-ui/react-select": "1.2.1",
     "@radix-ui/react-slider": "1.1.1",
+    "@radix-ui/react-toast": "^1.1.3",
     "@sentry/nextjs": "7.52.1",
     "@svgr/webpack": "8.0.1",
     "@types/node": "20.1.5",

prisma/schema.prisma

@@ -10,6 +10,25 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
+model Account {
+  id                String  @id @default(cuid())
+  userId            String
+  type              String
+  provider          String
+  providerAccountId String
+  refresh_token     String? @db.Text
+  access_token      String? @db.Text
+  expires_at        Int?
+  token_type        String?
+  scope             String?
+  id_token          String? @db.Text
+  session_state     String?
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+}
+
 model Session {
   id           String   @id @default(cuid())
   sessionToken String   @unique
@@ -25,6 +44,7 @@ model User {
   emailVerified DateTime?
   image         String?
   sessions      Session[]
+  accounts      Account[]
 }
 
 model VerificationToken {

src/app/[locale]/(account)/account/page.tsx

@@ -114,6 +114,8 @@ const Account: React.FC = () => {
           <div className="text-sm mb-1.5">{t("avatar")}</div>
           <Input
             allowClear
+            disabled
+            placeholder="Todo..."
             value={userInfo.image}
             onChange={(value) => onchange(value, "image")}
           />

src/app/[locale]/(account)/account/team/page.tsx

@@ -3,11 +3,12 @@ import * as React from "react";
 const Team: React.FC = () => {
   return (
     <div>
-      <div className="text-2xl font-semibold">团队设置</div>
+      <div className="text-2xl font-semibold">Teams</div>
       <div className="text-sm mt-4 mb-8">
         Manage the Teams that you're a part of, join suggested ones, or create a
         new one.
       </div>
+      <div>Todo...</div>
     </div>
   );
 };

src/app/[locale]/(authentication)/login/page.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { cn } from "@/lib";
 import AuthForm from "@/components/auth/form";
+import Logo from "@/components/logo";
 
 const Login: React.FC = () => {
   return (
@@ -11,11 +12,7 @@ const Login: React.FC = () => {
           "dark:border-neutral-600"
         )}
       >
-        <div className="flex font-extrabold h-12 text-transparent text-2xl items-center">
-          <span className="bg-clip-text bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%">
-            L - GPT
-          </span>
-        </div>
+        <Logo />
       </div>
       <div className="flex flex-col justify-center items-center flex-1">
         <AuthForm />

src/app/[locale]/layout.tsx

@@ -1,5 +1,6 @@
 import { NextIntlClientProvider } from "next-intl";
 import { notFound } from "next/navigation";
+import Announcement from "@/components/announcement";
 
 interface LocaleLayoutProps {
   children: React.ReactNode;
@@ -19,6 +20,7 @@ export default async function LocaleLayout({
 
   return (
     <NextIntlClientProvider locale={locale} messages={messages}>
+      <Announcement />
       {children}
     </NextIntlClientProvider>
   );

src/app/api/auth/[...nextauth]/route.ts

@@ -1,6 +1,7 @@
 import NextAuth from "next-auth";
 import type { NextAuthOptions } from "next-auth";
 import GithubProvider from "next-auth/providers/github";
+import GoogleProvider from "next-auth/providers/google";
 import EmailProvider from "next-auth/providers/email";
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import { prisma } from "@/lib/prisma";
@@ -19,18 +20,14 @@ export const authOptions: NextAuthOptions = {
       },
       from: process.env.EMAIL_FROM,
     }),
-    // EmailProvider({
-    //   // server: "smtp://[email protected]:[email protected]:465",
-    //   server: "smtp://liushuxiang1993:[email protected]:465",
-    //   // from: "NextAuth <[email protected]>",
-    //   // WFCLNBQGTRTMDORC
-    //   // qq: fnmvpdkxjtqjbjgc
-    //   maxAge: 24 * 60 * 60, // 设置邮箱链接失效时间，默认24小时
-    // }),
-    // GithubProvider({
-    //   clientId: "894f395fe1e70358caca",
-    //   clientSecret: "fd5a93dcc14cc6e2c0566436f983ed0b2578ce05",
-    // }),
+    GithubProvider({
+      clientId: process.env.GITHUB_ID || "",
+      clientSecret: process.env.GITHUB_SECRET || "",
+    }),
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID || "",
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
+    }),
   ],
   secret: process.env.EMAIL_SECRET,
   callbacks: {

src/app/layout.tsx

@@ -29,7 +29,11 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <Script src="/polyfill.js" async />
       <body className={inter.className}>
         <Providers>{children}</Providers>
-        <Toaster />
+        <Toaster
+          toastOptions={{
+            style: { maxWidth: "calc(100vw - 2rem)" },
+          }}
+        />
         <Analytics debug={false} />
       </body>
     </html>

src/components/announcement/index.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import * as React from "react";
+import * as Toast from "@radix-ui/react-toast";
+import { useTranslations } from "next-intl";
+import { AiOutlineCheck } from "react-icons/ai";
+import { cn } from "@/lib";
+import { version } from "../../../package.json";
+
+const Announcement: React.FC = () => {
+  const t = useTranslations("zLog");
+
+  const [open, setOpen] = React.useState(false);
+
+  const onClick = () => {
+    localStorage.setItem("announcement_version", version);
+  };
+
+  React.useEffect(() => {
+    const announcement_version = localStorage.getItem("announcement_version");
+    console.log(version, "version");
+    console.log(announcement_version, "announcement_version");
+    if (version !== announcement_version) setOpen(true);
+  }, []);
+
+  return (
+    <Toast.Provider swipeDirection="right" swipeThreshold={5000}>
+      <Toast.Root
+        className="bg-white rounded-md shadow-md border p-[15px] data-[state=open]:animate-slideIn data-[state=closed]:animate-hide"
+        open={open}
+        onOpenChange={setOpen}
+        duration={9999999}
+      >
+        <Toast.Title className="mb-[5px] font-medium text-lg">
+          {t("title")}
+        </Toast.Title>
+        <Toast.Description asChild className="mb-4">
+          <div className="text-sm flex flex-col gap-2">
+            <div>{t("text1")}</div>
+            <div>{t("text2")}</div>
+            <div>{t("text3")}</div>
+          </div>
+        </Toast.Description>
+        <Toast.Action asChild altText="Check">
+          <button
+            onClick={onClick}
+            className={cn(
+              "transition-all duration-100 ease-linear rounded-md font-medium flex items-center justify-center gap-2 tracking-wide h-8 text-sm px-3",
+              "bg-sky-400 hover:bg-sky-500 active:bg-sky-600 text-white dark:bg-sky-400/90 dark:hover:bg-sky-500/90 dark:active:bg-sky-600/90"
+            )}
+          >
+            <AiOutlineCheck />
+          </button>
+        </Toast.Action>
+      </Toast.Root>
+
+      <Toast.Viewport className="[--viewport-padding:_25px] fixed bottom-0 right-0 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
+    </Toast.Provider>
+  );
+};
+
+export default Announcement;

src/components/auth/avatar.tsx

@@ -71,6 +71,8 @@ const Avatar: React.FC = () => {
     } else if (item === "account") {
       if (pathname.includes("/account")) return;
       router.push("/account");
+    } else if (item === "documentation") {
+      console.log("文档");
     }
   };
 
@@ -103,7 +105,9 @@ const Avatar: React.FC = () => {
       content={
         user ? (
           <div className="border-b pb-1 px-2">
-            <div className="font-medium text-sm">{user.name}</div>
+            <div className="font-medium text-sm">
+              {user.name || "(Nickname)"}
+            </div>
             <div className="text-xs">{user.email}</div>
           </div>
         ) : null

src/components/auth/form.tsx

@@ -53,10 +53,18 @@ const AuthForm: React.FC = () => {
     }
   };
 
+  const onGithubLogin = async () => {
+    await signIn("github", { redirect: false, callbackUrl: "/" });
+  };
+
+  const onGoogleLogin = async () => {
+    await signIn("google", { redirect: false, callbackUrl: "/" });
+  };
+
   return (
     <>
       <div className="text-3xl font-bold mb-10">{t("title")}</div>
-      <div className="w-[20rem]">
+      <div className="w-[20rem] max-w-[calc(100vw-3rem)]">
         <Input
           ref={inputRef}
           className="w-full"
@@ -78,10 +86,20 @@ const AuthForm: React.FC = () => {
         </Button>
         <div className="w-full h-[1px] bg-neutral-200 mb-4" />
         <div className="flex flex-col gap-2">
-          <Button size="base" block leftIcon={<AiFillGithub />}>
+          <Button
+            size="base"
+            block
+            leftIcon={<AiFillGithub />}
+            onClick={onGithubLogin}
+          >
             Continue with Github
           </Button>
-          <Button size="base" block leftIcon={<FcGoogle />}>
+          <Button
+            size="base"
+            block
+            leftIcon={<FcGoogle />}
+            onClick={onGoogleLogin}
+          >
             Continue with Google
           </Button>
         </div>

src/locales/en.json

@@ -29,7 +29,7 @@
     "log-out": "Log Out",
     "return-to-home-page": "Return to home page",
     "sign-in": "Sign in",
-    "title": "Login / Sign up to L-GPT",
+    "title": "Login/Sign up to L-GPT",
     "verification": "Unable to sign in",
     "verification-1": "The sign in link is no longer valid.",
     "verification-2": "It may have been used already or it may have expired."
@@ -101,5 +101,11 @@
     "desc": "L-GPT is an open-source project that helps you improve your learning, work, and life efficiency by providing various AI models.",
     "set-openai-key": "Please click on the settings button in the lower left corner to configure your API Key.",
     "welcome": "Welcome to"
+  },
+  "zLog": {
+    "title": "Project Release Announcement v0.4.0",
+    "text1": "Since the project was launched, I have been using my personal API Key (no need to configure additional keys). As the number of users increased, it became a bit difficult. Therefore, in the previous version, the key was replaced with a free key that is not bound to a credit card.",
+    "text2": "OpenAI's free API key has a very strict call frequency limit of only 3 calls per minute, which is clearly insufficient to meet the demands.",
+    "text3": "Therefore, this version includes an account system. You can configure your own API Key without logging in, and after logging in, you can enjoy free and more stable services."
   }
 }

src/locales/zh-CN.json

@@ -101,5 +101,11 @@
     "desc": "L - GPT是一款开源项目，通过提供不同的AI模型来帮助你提高学习、工作、生活的效率。",
     "set-openai-key": "请点击左下角设置按钮来配置您的API Key。",
     "welcome": "欢迎来到"
+  },
+  "zLog": {
+    "title": "项目上线公告 v0.4.0",
+    "text1": "项目上线以来，一直是提供我个人API Key使用（无需额外配置key）。随着使用人数越来越多，逐渐有点hold不住。因此在上个版本将key替换为了没有绑定信用卡的免费key。",
+    "text2": "OpenAI 的免费key有非常严格的调用频率限制，1分钟只能调用3次，显然无法满足需求。",
+    "text3": "因此此版本加入账户系统。未登录时支持配置自己的API Key使用，登录之后即可享受免费和更加稳定的服务。"
   }
 }