feat: add basic ui

2024-11-27 08:53:17 +08:00 · 2023-03-10 01:01:40 +08:00 · 2023-03-10 01:01:40 +08:00 · d49b2aa2c3
commit d49b2aa2c3
parent 0decdb3e43
26 changed files with 4500 additions and 463 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
--- a/app/api/chat/.gitignore
+++ b/app/api/chat/.gitignore
@ -0,0 +1 @@
+config.ts
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@ -0,0 +1,35 @@
+import { OpenAIApi, Configuration } from "openai";
+import { apiKey } from "./config";
+
+// set up openai api client
+const config = new Configuration({
+  apiKey,
+});
+const openai = new OpenAIApi(config);
+
+export async function GET(req: Request) {
+  try {
+    const completion = await openai.createChatCompletion(
+      {
+        messages: [
+          {
+            role: "user",
+            content: "hello",
+          },
+        ],
+        model: "gpt-3.5-turbo",
+      },
+      {
+        proxy: {
+          protocol: "socks",
+          host: "127.0.0.1",
+          port: 7890,
+        },
+      }
+    );
+
+    return new Response(JSON.stringify(completion.data));
+  } catch (e) {
+    return new Response(JSON.stringify(e));
+  }
+}
--- a/app/api/chat/typing.ts
+++ b/app/api/chat/typing.ts
@ -0,0 +1,7 @@
+import type {
+  CreateChatCompletionRequest,
+  CreateChatCompletionResponse,
+} from "openai";
+
+export type ChatRequest = CreateChatCompletionRequest;
+export type ChatReponse = CreateChatCompletionResponse;
--- a/app/components/button.module.css
+++ b/app/components/button.module.css
@ -0,0 +1,35 @@
+.icon-button {
+  background-color: var(--white);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+
+  box-shadow: var(--card-shadow);
+  cursor: pointer;
+  transition: all .3s ease;
+  overflow: hidden;
+  user-select: none;
+}
+
+.border {
+  border: var(--border-in-light);
+}
+
+.icon-button:hover {
+  filter: brightness(0.9) hue-rotate(0.01turn);
+}
+
+.icon-button-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-button-text {
+  margin-left: 5px;
+  font-size: 12px;
+}
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@ -0,0 +1,25 @@
+import * as React from "react";
+
+import styles from "./button.module.css";
+
+export function IconButton(props: {
+  onClick?: () => void;
+  icon: JSX.Element;
+  text?: string;
+  bordered?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={
+        styles["icon-button"] +
+        ` ${props.bordered && styles.border} ${props.className ?? ""}`
+      }
+    >
+      <div className={styles["icon-button-icon"]}>{props.icon}</div>
+      {props.text && (
+        <div className={styles["icon-button-text"]}>{props.text}</div>
+      )}
+    </div>
+  );
+}
--- a/app/components/home.module.css
+++ b/app/components/home.module.css
@ -0,0 +1,222 @@
+.container {
+  max-width: 1080px;
+  max-height: 780px;
+  min-width: 600px;
+  width: 90vw;
+  height: 90vh;
+  background-color: var(--white);
+  border: var(--border-in-light);
+  border-radius: 20px;
+  box-shadow: var(--shadow);
+
+  display: flex;
+  overflow: hidden;
+}
+
+.sidebar {
+  max-width: 300px;
+  padding: 20px;
+  background-color: var(--second);
+  display: flex;
+  flex-direction: column;
+  box-shadow:inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
+}
+
+.sidebar-header {
+  position: relative;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.sidebar-logo {
+  position: absolute;
+  right: 0;
+  bottom: 18px;
+}
+
+.sidebar-title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.sidebar-sub-title {
+  font-size: 12px; 
+  font-weight: 400px;
+}
+
+.sidebar-body {
+  flex: 1;
+  overflow: auto;
+}
+
+.chat-list {
+  width: 260px;
+}
+
+.chat-item {
+  padding: 10px 14px;
+  background-color: var(--white);
+  border-radius: 10px;
+  margin-bottom: 10px;
+  box-shadow: var(--card-shadow);
+  transition: all .3s ease;
+  cursor: pointer;
+  user-select: none;
+}
+
+.chat-item:hover {
+  background-color: var(--hover-color);
+}
+
+.chat-item-selected {
+  border: 2px solid var(--primary);
+}
+
+.chat-item-title {
+  font-size: 14px;
+  font-weight: bolder;
+}
+
+.chat-item-info {
+  display: flex;
+  justify-content: space-between;
+  color: rgb(166, 166, 166);
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.chat-item-count {}
+.chat-item-date {}
+
+.sidebar-tail {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 20px;
+}
+
+.sidebar-actions {
+  display: inline-flex;
+}
+.sidebar-action:last-child {
+  margin-left: 15px;
+}
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.chat-header {
+  padding: 14px 20px;
+  border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.chat-header-title {
+  font-size: 20px;
+  font-weight: bolder;
+}
+.chat-header-sub-title {
+  font-size: 14px;
+  margin-top: 5px;
+}
+.chat-actions {
+  display: inline-flex;
+}
+.chat-action-button {
+  margin-left: 10px;
+}
+
+.chat-body {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+  margin-bottom: 100px;
+}
+.chat-message {
+  display: flex;
+  flex-direction: row; 
+}
+
+.chat-message-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.chat-message-container {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.chat-message-reverse > .chat-message-container {
+  align-items: flex-end;
+}
+
+.chat-message-avtar {}
+.chat-message-item {
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  font-size: 14px;
+  margin-top: 5px;
+  user-select: text;
+}
+.chat-message-actions{
+  display: flex;
+  flex-direction: row-reverse;
+  width: 100%;
+  padding: 5px 10px;
+  box-sizing: border-box;
+}
+.chat-message-action-date{
+  font-size: 12px;
+  color: #aaa;
+}
+.chat-message-action-button{}
+
+.chat-input-panel {
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.chat-input-panel-inner {
+  display: flex;
+  flex: 1;
+}
+
+.chat-input-panel-multi {}
+.chat-input {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+  border: var(--border-in-light);
+  box-shadow: var(--card-shadow);
+  font-family: inherit;
+  padding: 10px 14px;
+  resize: none;
+  outline: none;
+  color: #333;
+}
+
+.chat-input:focus {
+  border: 1px solid var(--primary);
+}
+
+.chat-input-send{
+  background-color: var(--primary);
+  color: white;
+
+  position: absolute;
+  right: 30px;
+  bottom: 10px;
+}
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@ -0,0 +1,177 @@
+"use client";
+
+import { IconButton } from "./button";
+import styles from "./home.module.css";
+
+import SettingsIcon from "../icons/settings.svg";
+import GithubIcon from "../icons/github.svg";
+import ChatGptIcon from "../icons/chatgpt.svg";
+import SendWhiteIcon from "../icons/send-white.svg";
+import BrainIcon from "../icons/brain.svg";
+import ExportIcon from "../icons/export.svg";
+import BotIcon from "../icons/bot.svg";
+import UserIcon from "../icons/user.svg";
+import AddIcon from "../icons/add.svg";
+
+export function ChatItem(props: {
+  onClick?: () => void;
+  title: string;
+  count: number;
+  time: string;
+  selected: boolean;
+}) {
+  return (
+    <div
+      className={`${styles["chat-item"]} ${
+        props.selected && styles["chat-item-selected"]
+      }`}
+    >
+      <div className={styles["chat-item-title"]}>{props.title}</div>
+      <div className={styles["chat-item-info"]}>
+        <div className={styles["chat-item-count"]}>{props.count} 条对话</div>
+        <div className={styles["chat-item-date"]}>{props.time}</div>
+      </div>
+    </div>
+  );
+}
+
+export function ChatList() {
+  const listData = new Array(5).fill({
+    title: "这是一个标题",
+    count: 10,
+    time: new Date().toLocaleString(),
+  });
+
+  const selectedIndex = 0;
+
+  return (
+    <div className={styles["chat-list"]}>
+      {listData.map((item, i) => (
+        <ChatItem {...item} key={i} selected={i === selectedIndex} />
+      ))}
+    </div>
+  );
+}
+
+export function Chat() {
+  const messages = [
+    {
+      role: "user",
+      content: "这是一条消息",
+      date: new Date().toLocaleString(),
+    },
+    {
+      role: "bot",
+      content: "这是一条回复".repeat(10),
+      date: new Date().toLocaleString(),
+    },
+  ];
+
+  const title = "这是一个标题";
+  const count = 10;
+
+  return (
+    <div className={styles.chat}>
+      <div className={styles["chat-header"]}>
+        <div>
+          <div className={styles["chat-header-title"]}>{title}</div>
+          <div className={styles["chat-header-sub-title"]}>
+            与 ChatGPT 的 {count} 条对话
+          </div>
+        </div>
+        <div className={styles["chat-actions"]}>
+          <div className={styles["chat-action-button"]}>
+            <IconButton icon={<BrainIcon />} bordered />
+          </div>
+          <div className={styles["chat-action-button"]}>
+            <IconButton icon={<ExportIcon />} bordered />
+          </div>
+        </div>
+      </div>
+
+      <div className={styles["chat-body"]}>
+        {messages.map((message, i) => {
+          const isUser = message.role === "user";
+
+          return (
+            <div
+              key={i}
+              className={
+                isUser ? styles["chat-message-reverse"] : styles["chat-message"]
+              }
+            >
+              <div className={styles["chat-message-container"]}>
+                <div className={styles["chat-message-avtar"]}>
+                  {message.role === "user" ? <UserIcon /> : <BotIcon />}
+                </div>
+                <div className={styles["chat-message-item"]}>
+                  {message.content}
+                </div>
+                {!isUser && (
+                  <div className={styles["chat-message-actions"]}>
+                    <div className={styles["chat-message-action-date"]}>
+                      {message.date}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={styles["chat-input-panel"]}>
+        <div className={styles["chat-input-panel-inner"]}>
+          <textarea
+            className={styles["chat-input"]}
+            placeholder="输入消息"
+            rows={3}
+          />
+          <IconButton
+            icon={<SendWhiteIcon />}
+            text={"发送"}
+            className={styles["chat-input-send"]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Home() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.sidebar}>
+        <div className={styles["sidebar-header"]}>
+          <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+          <div className={styles["sidebar-sub-title"]}>
+            Build your own AI assistant.
+          </div>
+          <div className={styles["sidebar-logo"]}>
+            <ChatGptIcon />
+          </div>
+        </div>
+
+        <div className={styles["sidebar-body"]}>
+          <ChatList />
+        </div>
+
+        <div className={styles["sidebar-tail"]}>
+          <div className={styles["sidebar-actions"]}>
+            <div className={styles["sidebar-action"]}>
+              <IconButton icon={<SettingsIcon />} />
+            </div>
+            <div className={styles["sidebar-action"]}>
+              <IconButton icon={<GithubIcon />} />
+            </div>
+          </div>
+          <div>
+            <IconButton icon={<AddIcon />} text={"新的聊天"} />
+          </div>
+        </div>
+      </div>
+
+      <Chat key="chat" />
+    </div>
+  );
+}
--- a/app/globals.css
+++ b/app/globals.css
@ -1,107 +1,43 @@
 :root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  /* color */
+  --white: white;
+  --gray: rgb(250, 250, 250);
+  --primary: rgb(29, 147, 171);
+  --second: rgb(231, 248, 255);
+  --hover-color: #f3f3f3;

-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  /* shadow */
+  --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
+  --card-shadow:0px 2px 4px 0px rgb(0, 0, 0, 0.05);
+ 

-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
+  /* stroke */
+  --border-in-light:  1px solid rgb(222, 222, 222);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
+body {
  margin: 0;
+  padding: 0;
+  background-color: var(--gray);
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
 }

-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
+::-webkit-scrollbar {
+  width: 20px;
 }

-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+::-webkit-scrollbar-track {
+  background-color: transparent;
 }

-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
--- a/app/icons/add.svg
+++ b/app/icons/add.svg
@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(1.3333333333333333 1.3333333333333333)  rotate(0 6.666666666666666 6.666666666666666)"
+        d="M13.33,6.67C13.33,2.98 10.35,0 6.67,0C2.98,0 0,2.98 0,6.67C0,10.35 2.98,13.33 6.67,13.33C10.35,13.33 13.33,10.35 13.33,6.67Z " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(8 5.333333333333333)  rotate(0 0 2.6666666666666665)" d="M0,0L0,5.33 " />
+      <path id="路径 3"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(5.333333333333333 8)  rotate(0 2.6666666666666665 0)" d="M0,0L5.33,0 " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/bot.svg
+++ b/app/icons/bot.svg
@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30"
+  height="30" viewBox="0 0 30 30" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="29.999999999999996" height="29.999999999999996" />
+    <rect id="path_1" x="0" y="0" width="20.45454545454545" height="20.45454545454545" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 14.999999999999998 14.999999999999998)">
+    <rect fill="#E7F8FF" opacity="1"
+      transform="translate(0 0)  rotate(0 14.999999999999998 14.999999999999998)" x="0" y="0"
+      width="29.999999999999996" height="29.999999999999996" rx="10" />
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <g opacity="1"
+        transform="translate(4.772727272727272 4.772727272727273)  rotate(0 10.227272727272725 10.227272727272725)">
+        <mask id="bg-mask-1" fill="white">
+          <use xlink:href="#path_1"></use>
+        </mask>
+        <g mask="url(#bg-mask-1)">
+          <path id="分组 1" fill-rule="evenodd" style="fill:#1F948C"
+            transform="translate(0 0)  rotate(0 10.227272727272725 10.227272727272725)" opacity="1"
+            d="M19.11 8.37L19.11 8.37C19.28 7.85 19.37 7.31 19.37 6.76C19.37 5.86 19.13 4.97 18.66 4.19C17.73 2.59 16 1.6 14.13 1.6C13.76 1.6 13.4 1.64 13.04 1.71C12.06 0.62 10.65 0 9.17 0L9.14 0L9.13 0C6.86 0 4.86 1.44 4.16 3.57C2.7 3.86 1.44 4.76 0.71 6.04C0.24 6.83 0 7.72 0 8.63C0 9.9 0.48 11.14 1.35 12.08C1.17 12.6 1.08 13.15 1.08 13.69C1.08 14.6 1.33 15.49 1.79 16.27C2.92 18.21 5.2 19.21 7.42 18.74C8.4 19.83 9.8 20.45 11.28 20.45L11.31 20.45L11.33 20.45C13.59 20.45 15.6 19.01 16.3 16.88C17.76 16.59 19.01 15.69 19.75 14.41C20.21 13.63 20.45 12.74 20.45 11.83C20.45 10.55 19.97 9.32 19.11 8.37Z M8.94734 18.1579C8.90734 18.1879 8.86734 18.2079 8.82734 18.2279C9.52734 18.8079 10.3973 19.1179 11.3073 19.1179L11.3173 19.1179C13.4573 19.1179 15.1973 17.3979 15.1973 15.2879L15.1973 10.5279C15.1973 10.5079 15.1773 10.4879 15.1573 10.4779L13.4173 9.48792L13.4173 15.2379C13.4173 15.4679 13.2873 15.6879 13.0773 15.8079L8.94734 18.1579Z M8.27654 17.0048L12.4465 14.6248C12.4665 14.6148 12.4765 14.5948 12.4765 14.5748L12.4765 14.5748L12.4765 12.5848L7.43654 15.4548C7.22654 15.5748 6.96654 15.5748 6.75654 15.4548L2.62654 13.1048C2.58654 13.0848 2.53654 13.0448 2.50654 13.0348C2.46654 13.2448 2.44654 13.4648 2.44654 13.6848C2.44654 14.3548 2.62654 15.0148 2.96654 15.6048L2.96654 15.5948C3.66654 16.7848 4.94654 17.5148 6.33654 17.5148C7.01654 17.5148 7.68654 17.3348 8.27654 17.0048Z M3.90324 5.16818C3.90324 5.12818 3.90324 5.06818 3.90324 5.02818C3.05324 5.33818 2.33324 5.92818 1.88324 6.70818L1.88324 6.70818C1.54324 7.28818 1.36324 7.94818 1.36324 8.61818C1.36324 9.98818 2.10324 11.2582 3.30324 11.9482L7.47324 14.3182C7.49324 14.3282 7.51324 14.3282 7.53324 14.3182L9.28324 13.3182L4.24324 10.4482C4.03324 10.3382 3.90324 10.1182 3.90324 9.87818L3.90324 9.87818L3.90324 5.16818Z M17.1561 8.50521L12.9761 6.1252C12.9561 6.1252 12.9361 6.1252 12.9161 6.1352L11.1761 7.1252L16.2161 9.9952C16.4261 10.1152 16.5561 10.3352 16.5561 10.5752C16.5561 10.5752 16.5561 10.5752 16.5561 10.5752L16.5561 15.4252C18.0761 14.8652 19.0961 13.4352 19.0961 11.8252C19.0961 10.4552 18.3561 9.1952 17.1561 8.50521Z M8.01418 5.82927C7.99418 5.83927 7.98418 5.85927 7.98418 5.87927L7.98418 5.87927L7.98418 7.86927L13.0242 4.99927C13.1242 4.93927 13.2442 4.90927 13.3642 4.90927C13.4842 4.90927 13.5942 4.93927 13.7042 4.99927L17.8342 7.34927C17.8742 7.36927 17.9142 7.39927 17.9542 7.41927L17.9542 7.41927C17.9842 7.20927 18.0042 6.98927 18.0042 6.76927C18.0042 4.65927 16.2642 2.93927 14.1242 2.93927C13.4442 2.93927 12.7742 3.11927 12.1842 3.44927L8.01418 5.82927Z M9.14676 1.33731C6.99676 1.33731 5.25676 3.05731 5.25676 5.16731L5.25676 9.92731C5.25676 9.94731 5.27676 9.95731 5.28676 9.96731L7.03676 10.9673L7.03676 5.22731L7.03676 5.21731C7.03676 4.98731 7.16676 4.76731 7.37676 4.64731L11.5068 2.29731C11.5468 2.26731 11.5968 2.23731 11.6268 2.22731C10.9268 1.64731 10.0468 1.33731 9.14676 1.33731Z M7.98345 11.5093L10.2235 12.7793L12.4735 11.5093L12.4735 8.9493L10.2235 7.6693L7.98345 8.9493L7.98345 11.5093Z " />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/app/icons/brain.svg
+++ b/app/icons/brain.svg
@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(1.3333323286384866 1.3334133333333331)  rotate(0 6.66666716901409 6.66666)"
+        d="M5.01,13.33C4.69,12.27 4.19,11.47 3.53,10.95C2.55,10.17 0.97,10.65 0.39,9.84C-0.19,9.04 0.8,7.55 1.15,6.67C1.49,5.79 -0.18,5.48 0.02,5.23C0.15,5.07 0.99,4.59 2.55,3.79C3,1.26 4.63,0 7.47,0C11.71,0 13.33,3.6 13.33,5.89C13.33,8.18 11.37,10.65 8.58,11.18C8.33,11.55 8.69,12.26 9.66,13.33 " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(6.374029736345404 3.9567867125879106)  rotate(0 2.8215982497276006 2.4327734241007346)"
+        d="M2.1,3.33C1.91,4.42 2.14,4.93 2.79,4.86C3.44,4.79 3.84,4.52 3.97,4.05C4.99,4.33 5.54,4.09 5.63,3.33C5.75,2.18 5.13,1.26 4.88,1.26C4.63,1.26 3.97,1.23 3.97,0.88C3.97,0.52 3.2,0.33 2.5,0.33C1.81,0.33 2.23,-0.14 1.27,0.04C0.64,0.17 0.26,0.44 0.13,0.88C-0.09,1.72 -0.03,2.31 0.32,2.66C0.67,3 1.26,3.22 2.1,3.33Z " />
+      <path id="路径 3"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(8.193033333333332 8.500066666666665)  rotate(0 0.9868499999999998 1.1846833333333333)"
+        d="M1.97,0C1.63,0.21 1.17,0.56 0.97,0.83C0.48,1.52 0.09,1.93 0,2.37 " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/chat.svg
+++ b/app/icons/chat.svg
@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="0.8" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#A6A6A6; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(1.3333533333333334 1.3333333333333333)  rotate(0 6.666673333333334 6.666666666666666)"
+        d="M6.67,0C2.98,0 0,2.98 0,6.67C0,8.36 0,13.33 0,13.33C0,13.33 4.68,13.33 6.67,13.33C10.35,13.33 13.33,10.35 13.33,6.67C13.33,2.98 10.35,0 6.67,0Z " />
+      <path id="路径 2"
+        style="stroke:#A6A6A6; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(4.666666666666666 6)  rotate(0 3 0)" d="M0,0L6,0 " />
+      <path id="路径 3"
+        style="stroke:#A6A6A6; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(4.666666666666666 8.666666666666666)  rotate(0 3 0)" d="M0,0L6,0 " />
+      <path id="路径 4"
+        style="stroke:#A6A6A6; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(4.666666666666666 11.333333333333332)  rotate(0 1.6666666666666665 0)"
+        d="M0,0L3.33,0 " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/chatgpt.svg
+++ b/app/icons/chatgpt.svg
@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43"
+  height="44" viewBox="0 0 43 44" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="43" height="43.580135196270106" />
+  </defs>
+  <g opacity="1" transform="translate(0 0.000001981943071882597)  rotate(0 21.5 21.790067598135053)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="分组 1" fill-rule="evenodd" style="fill:#8BCAE0"
+        transform="translate(0 0)  rotate(0 21.5 21.790067598135053)" opacity="0.27"
+        d="M40.17 17.84L40.17 17.84C40.53 16.73 40.72 15.57 40.72 14.41C40.72 12.48 40.21 10.58 39.23 8.92C37.27 5.51 33.64 3.41 29.71 3.41C28.94 3.41 28.16 3.49 27.41 3.65C25.35 1.33 22.39 0 19.29 0L19.22 0L19.19 0C14.43 0 10.21 3.07 8.74 7.6C5.68 8.23 3.03 10.15 1.48 12.87C0.51 14.54 0 16.45 0 18.38C0 21.1 1.01 23.73 2.83 25.74C2.47 26.85 2.28 28.01 2.28 29.17C2.28 31.1 2.79 33 3.77 34.66C6.14 38.8 10.92 40.93 15.59 39.93C17.65 42.25 20.61 43.58 23.71 43.58L23.78 43.58L23.81 43.58C28.57 43.58 32.8 40.51 34.26 35.97C37.33 35.35 39.97 33.43 41.52 30.71C42.49 29.03 43 27.13 43 25.2C43 22.48 41.99 19.86 40.17 17.84Z M18.817 38.6948C18.727 38.7448 18.647 38.7948 18.557 38.8448C20.017 40.0648 21.867 40.7348 23.777 40.7348L23.787 40.7348C28.287 40.7248 31.937 37.0648 31.947 32.5648L31.947 22.4348C31.937 22.3848 31.907 22.3548 31.877 22.3348L28.207 20.2148L28.207 32.4548C28.207 32.9648 27.937 33.4348 27.487 33.6848L18.817 38.6948Z M17.3932 36.223L26.1632 31.163C26.2032 31.133 26.2232 31.093 26.2232 31.053L26.2132 31.053L26.2132 26.813L15.6232 32.933C15.1832 33.183 14.6432 33.183 14.2032 32.933L5.52317 27.923C5.44317 27.873 5.32317 27.803 5.26317 27.763C5.18317 28.223 5.14317 28.693 5.14317 29.163C5.14317 30.593 5.52317 31.993 6.23317 33.233L6.23317 33.233C7.70317 35.763 10.3932 37.313 13.3132 37.313C14.7432 37.313 16.1532 36.943 17.3932 36.223Z M8.20584 11.013C8.20584 10.923 8.20584 10.783 8.20584 10.713C6.41583 11.373 4.90584 12.643 3.95583 14.293L3.95583 14.293C3.24583 15.533 2.86583 16.943 2.86583 18.373C2.86583 21.293 4.41583 23.983 6.94584 25.443L15.7158 30.513C15.7558 30.533 15.8058 30.533 15.8358 30.503L19.5058 28.383L8.91584 22.273C8.47583 22.023 8.20584 21.553 8.20584 21.043L8.20584 21.033L8.20584 11.013Z M36.0546 18.1303L27.2846 13.0603C27.2446 13.0403 27.1946 13.0503 27.1646 13.0703L23.4946 15.1903L34.0846 21.3103C34.5246 21.5603 34.7946 22.0203 34.7946 22.5303C34.7946 22.5303 34.7946 22.5403 34.7946 22.5403L34.7946 32.8603C38.0046 31.6803 40.1446 28.6203 40.1446 25.2003C40.1446 22.2803 38.5846 19.5903 36.0546 18.1303Z M16.8345 12.4124C16.8045 12.4424 16.7845 12.4824 16.7845 12.5224L16.7845 12.5224L16.7845 16.7624L27.3745 10.6424C27.5945 10.5224 27.8445 10.4524 28.0945 10.4524C28.3445 10.4524 28.5845 10.5224 28.8045 10.6424L37.4845 15.6624C37.5645 15.7124 37.6545 15.7624 37.7345 15.8124L37.7345 15.8124C37.8145 15.3524 37.8545 14.8924 37.8545 14.4324C37.8545 9.92236 34.1945 6.26236 29.6845 6.26236C28.2545 6.26236 26.8545 6.64236 25.6045 7.35236L16.8345 12.4124Z M19.2209 2.84925C14.7109 2.84925 11.0509 6.49925 11.0509 11.0093L11.0509 21.1393C11.0609 21.1893 11.0809 21.2193 11.1209 21.2393L14.7909 23.3593L14.8009 11.1293L14.8009 11.1193C14.8009 10.6193 15.0709 10.1493 15.5109 9.89925L24.1909 4.88925C24.2609 4.83925 24.3809 4.77925 24.4409 4.73925C22.9809 3.51925 21.1309 2.84925 19.2209 2.84925Z M16.783 24.5101L21.503 27.2401L26.223 24.5101L26.223 19.0601L21.503 16.3401L16.783 19.0701L16.783 24.5101Z " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/export.svg
+++ b/app/icons/export.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 9)  rotate(0 6 2.6666666666666665)"
+        d="M12,0C12,2 10.67,5.33 6,5.33C1.33,5.33 0,2 0,0 " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(8.0026 1.7001966666666668)  rotate(0 0 4.649918333333334)"
+        d="M0,0L0,9.3 " />
+      <path id="路径 3"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(4 1.6666666666666665)  rotate(0 4 2)" d="M0,4L4,0L8,4 " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/github.svg
+++ b/app/icons/github.svg
@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2.6666666666666665 1.644694921083138)  rotate(0 5.333333333333333 4.287969206125098)"
+        d="M7.11,8.51C7.92,8.35 8.64,8.06 9.21,7.64C10.17,6.91 10.67,5.79 10.67,4.69C10.67,3.91 10.37,3.19 9.86,2.58C9.58,2.24 10.41,-0.31 9.67,0.03C8.94,0.37 7.86,1.13 7.29,0.97C6.68,0.79 6.02,0.69 5.33,0.69C4.73,0.69 4.16,0.76 3.62,0.9C2.83,1.1 2.09,0.36 1.33,0.03C0.58,-0.29 0.99,2.34 0.77,2.62C0.28,3.22 0,3.93 0,4.69C0,5.79 0.6,6.91 1.56,7.64C2.21,8.12 3.01,8.42 3.91,8.58 " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(6.000666666666666 10.220633333333332)  rotate(0 0.2896166666666667 2.058116666666666)"
+        d="M0.58,0C0.19,0.43 0,0.83 0,1.21C0,1.59 0,2.56 0,4.12 " />
+      <path id="路径 3"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(9.781533333333332 10.158866666666666)  rotate(0 0.2744333333333332 2.0890166666666663)"
+        d="M0,0C0.37,0.48 0.55,0.91 0.55,1.29C0.55,1.68 0.55,2.64 0.55,4.18 " />
+      <path id="路径 4"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(2 10.405166666666666)  rotate(0 2.0004 1.050416666666667)"
+        d="M0,0C0.3,0.04 0.52,0.17 0.67,0.41C0.88,0.77 1.69,2.1 2.61,2.1C3.22,2.1 3.68,2.1 4,2.1 " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/send-white.svg
+++ b/app/icons/send-white.svg
@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#FFFFFF; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(1.3333333333333333 2)  rotate(0 6.333333333333333 6.333333333333333)"
+        d="M0,4.71L6.67,6L8.34,12.67L12.67,0L0,4.71Z " />
+      <path id="路径 2"
+        style="stroke:#FFFFFF; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(8.002766666666666 6.1172)  rotate(0 0.9428000000000001 0.9428000000000001)"
+        d="M0,1.89L1.89,0 " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/settings.svg
+++ b/app/icons/settings.svg
@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
+  height="16" viewBox="0 0 16 16" fill="none">
+  <defs>
+    <rect id="path_0" x="0" y="0" width="16" height="16" />
+  </defs>
+  <g opacity="1" transform="translate(0 0)  rotate(0 8 8)">
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <path id="路径 1"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(1.3333333333333333 2.333333333333333)  rotate(0 6.666666666666666 5.666666666666666)"
+        d="M13.33,5.67L10,0L3.33,0L0,5.67L3.33,11.33L10,11.33L13.33,5.67Z " />
+      <path id="路径 2"
+        style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0"
+        transform="translate(6.333333333333333 6.333333333333333)  rotate(0 1.6666666666666665 1.6666666666666665)"
+        d="M3.33,1.67C3.33,0.75 2.59,0 1.67,0C0.75,0 0,0.75 0,1.67C0,2.59 0.75,3.33 1.67,3.33C2.59,3.33 3.33,2.59 3.33,1.67Z " />
+    </g>
+  </g>
+</svg>
--- a/app/icons/user.svg
+++ b/app/icons/user.svg
@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38"
+  height="38" viewBox="0 0 38 38" fill="none">
+  <defs>
+    <filter id="filter_0" x="-4" y="-4" width="38" height="38" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+      <feOffset dx="0" dy="2" />
+      <feGaussianBlur stdDeviation="2" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_Shadow" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_Shadow" result="shape" />
+    </filter>
+    <rect id="path_0" x="0" y="0" width="30" height="30" />
+  </defs>
+  <g opacity="1" transform="translate(4 2)  rotate(0 15 15)">
+    <g id="undefined" filter="url(#filter_0)">
+      <rect stroke="#000000" stroke-width="1" stroke-opacity="0.05" />
+      <rect x="0" y="0" width="30" height="30" rx="10" />
+    </g>
+    <mask id="bg-mask-0" fill="white">
+      <use xlink:href="#path_0"></use>
+    </mask>
+    <g mask="url(#bg-mask-0)">
+      <g opacity="1" transform="translate(6 4.5)  rotate(0 9 11)">
+        <text>
+          <tspan x="0" y="16.240000000000002" font-size="14" line-height="0" fill="#000000"
+            opacity="1" font-family="SourceHanSansCN-Regular" letter-spacing="0">🤣</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,18 +1,18 @@
-import './globals.css'
+import "./globals.css";

 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "ChatGPT Next Web",
+  description: "Your personal ChatGPT Chat Bot.",
+};

 export default function RootLayout({
  children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
-  )
+  );
 }
--- a/app/page.module.css
+++ b/app/page.module.css
@ -1,271 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(33%, auto));
-  width: var(--max-width);
-  max-width: 100%;
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 34ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo,
-.thirteen {
-  position: relative;
-}
-
-.thirteen {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 75px;
-  padding: 25px 10px;
-  margin-left: 16px;
-  transform: translateZ(0);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: 0px 2px 8px -1px #0000001a;
-}
-
-.thirteen::before,
-.thirteen::after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-}
-
-/* Conic Gradient Animation */
-.thirteen::before {
-  animation: 6s rotate linear infinite;
-  width: 200%;
-  height: 200%;
-  background: var(--tile-border);
-}
-
-/* Inner Square */
-.thirteen::after {
-  inset: 0;
-  padding: 1px;
-  border-radius: var(--border-radius);
-  background: linear-gradient(
-    to bottom right,
-    rgba(var(--tile-start-rgb), 1),
-    rgba(var(--tile-end-rgb), 1)
-  );
-  background-clip: content-box;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .thirteen::before {
-    animation: none;
-  }
-
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile and Tablet */
-@media (max-width: 1023px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo,
-  .thirteen img {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,91 +1,5 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from './page.module.css'
+import { Home } from "./components/home";

-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-        <div className={styles.thirteen}>
-          <Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
-        </div>
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://beta.nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>Explore the Next.js 13 playground.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={inter.className}>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p className={inter.className}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
+export default function App() {
+  return <Home />;
 }
--- a/app/store.ts
+++ b/app/store.ts
@ -0,0 +1,40 @@
+import { type ChatCompletionResponseMessage } from "openai";
+
+export type Message = ChatCompletionResponseMessage;
+
+interface ChatConfig {
+  maxToken: number;
+}
+
+class ChatSession {
+  constructor(private id: string) {}
+
+  public async onChatMessage(message: Message) {
+    if (message.role === "assistant") {
+      // do nothing
+    } else if (message.role === "user") {
+      // TODO: request open chat
+      this.makeRequest();
+    } else throw Error("Only assistant or users message allowed here.");
+
+    this.historyMessages.push(message);
+    this.summarize();
+    this.save();
+  }
+  public async summarize() {}
+  public save() {}
+  public delete() {}
+
+  private makeRequest() {}
+
+  private topic = "";
+  private memoryPrompt = "";
+  private historyMessages: Message[] = [];
+  private messageWordCount = 0;
+}
+
+class ChatSessionManager {
+  private entryId = "chatgpt-next-web-sessions";
+}
+
+export const store = {};
--- a/next.config.js
+++ b/next.config.js
@ -3,6 +3,14 @@ const nextConfig = {
  experimental: {
    appDir: true,
  },
-}
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    }); // 针对 SVG 的处理规则

-module.exports = nextConfig
+    return config;
+  },
+};
+
+module.exports = nextConfig;
--- a/package.json
+++ b/package.json
@ -9,12 +9,14 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@svgr/webpack": "^6.5.1",
    "@types/node": "18.14.6",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "next": "13.2.3",
+    "openai": "^3.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
--- a/yarn.lock
+++ b/yarn.lock