feat: update style and timeout handler

app/components/home.tsx

@@ -6,7 +6,7 @@ import "katex/dist/katex.min.css";
 import RemarkMath from "remark-math";
 import RehypeKatex from "rehype-katex";
 
-import EmojiPicker, { Emoji, Theme as EmojiTheme } from "emoji-picker-react";
+import { Emoji } from "emoji-picker-react";
 
 import { IconButton } from "./button";
 import styles from "./home.module.scss";
@@ -21,10 +21,21 @@ import BotIcon from "../icons/bot.svg";
 import AddIcon from "../icons/add.svg";
 import DeleteIcon from "../icons/delete.svg";
 import LoadingIcon from "../icons/three-dots.svg";
-import ResetIcon from "../icons/reload.svg";
 
 import { Message, SubmitKey, useChatStore, Theme } from "../store";
-import { Card, List, ListItem, Popover } from "./ui-lib";
+import { Settings } from "./settings";
+import dynamic from "next/dynamic";
+
+export const LazySettings = dynamic(
+  async () => await (await import("./settings")).Settings,
+  {
+    loading: () => (
+      <div className="">
+        <LoadingIcon />
+      </div>
+    ),
+  }
+);
 
 export function Markdown(props: { content: string }) {
   return (
@@ -288,6 +299,7 @@ function useSwitchTheme() {
 
 export function Home() {
   const [createNewSession] = useChatStore((state) => [state.newSession]);
+  const loading = !useChatStore.persist.hasHydrated();
 
   // settings
   const [openSettings, setOpenSettings] = useState(false);
@@ -295,6 +307,15 @@ export function Home() {
 
   useSwitchTheme();
 
+  if (loading) {
+    return (
+      <div>
+        <Avatar role="assistant"></Avatar>
+        <LoadingIcon />
+      </div>
+    );
+  }
+
   return (
     <div
       className={`${
@@ -344,154 +365,8 @@ export function Home() {
       </div>
 
       <div className={styles["window-content"]}>
-        {openSettings ? <Settings /> : <Chat key="chat" />}
+        {openSettings ? <LazySettings /> : <Chat key="chat" />}
       </div>
     </div>
   );
 }
-
-export function Settings() {
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const [config, updateConfig, resetConfig] = useChatStore((state) => [
-    state.config,
-    state.updateConfig,
-    state.resetConfig,
-  ]);
-
-  return (
-    <>
-      <div className={styles["window-header"]}>
-        <div>
-          <div className={styles["window-header-title"]}>设置</div>
-          <div className={styles["window-header-sub-title"]}>设置选项</div>
-        </div>
-        <div className={styles["window-actions"]}>
-          <div className={styles["window-action-button"]}>
-            <IconButton
-              icon={<ResetIcon />}
-              onClick={resetConfig}
-              bordered
-              title="重置所有选项"
-            />
-          </div>
-        </div>
-      </div>
-      <div className={styles["settings"]}>
-        <List>
-          <ListItem>
-            <div className={styles["settings-title"]}>头像</div>
-            <Popover
-              onClose={() => setShowEmojiPicker(false)}
-              content={
-                <EmojiPicker
-                  lazyLoadEmojis
-                  theme={EmojiTheme.AUTO}
-                  onEmojiClick={(e) => {
-                    updateConfig((config) => (config.avatar = e.unified));
-                    setShowEmojiPicker(false);
-                  }}
-                />
-              }
-              open={showEmojiPicker}
-            >
-              <div
-                className={styles.avatar}
-                onClick={() => setShowEmojiPicker(true)}
-              >
-                <Avatar role="user" />
-              </div>
-            </Popover>
-          </ListItem>
-
-          <ListItem>
-            <div className={styles["settings-title"]}>发送键</div>
-            <div className="">
-              <select
-                value={config.submitKey}
-                onChange={(e) => {
-                  updateConfig(
-                    (config) =>
-                      (config.submitKey = e.target.value as any as SubmitKey)
-                  );
-                }}
-              >
-                {Object.values(SubmitKey).map((v) => (
-                  <option value={v} key={v}>
-                    {v}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </ListItem>
-
-          <ListItem>
-            <div className={styles["settings-title"]}>主题</div>
-            <div className="">
-              <select
-                value={config.theme}
-                onChange={(e) => {
-                  updateConfig(
-                    (config) => (config.theme = e.target.value as any as Theme)
-                  );
-                }}
-              >
-                {Object.values(Theme).map((v) => (
-                  <option value={v} key={v}>
-                    {v}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </ListItem>
-
-          <ListItem>
-            <div className={styles["settings-title"]}>紧凑边框</div>
-            <input
-              type="checkbox"
-              checked={config.tightBorder}
-              onChange={(e) =>
-                updateConfig(
-                  (config) => (config.tightBorder = e.currentTarget.checked)
-                )
-              }
-            ></input>
-          </ListItem>
-        </List>
-        <List>
-          <ListItem>
-            <div className={styles["settings-title"]}>最大上下文消息数</div>
-            <input
-              type="range"
-              title={config.historyMessageCount.toString()}
-              value={config.historyMessageCount}
-              min="5"
-              max="20"
-              step="5"
-              onChange={(e) =>
-                updateConfig(
-                  (config) =>
-                    (config.historyMessageCount = e.target.valueAsNumber)
-                )
-              }
-            ></input>
-          </ListItem>
-
-          <ListItem>
-            <div className={styles["settings-title"]}>
-              上下文中包含机器人消息
-            </div>
-            <input
-              type="checkbox"
-              checked={config.sendBotMessages}
-              onChange={(e) =>
-                updateConfig(
-                  (config) => (config.sendBotMessages = e.currentTarget.checked)
-                )
-              }
-            ></input>
-          </ListItem>
-        </List>
-      </div>
-    </>
-  );
-}