feat: update style and timeout handler

app/components/home.module.scss

@@ -1,3 +1,5 @@
+@import "./window.scss";
+
 @mixin container {
   background-color: var(--white);
   border: var(--border-in-light);
@@ -11,6 +13,9 @@
   display: flex;
   overflow: hidden;
   box-sizing: border-box;
+
+  width: var(--window-width);
+  height: var(--window-height);
 }
 
 .container {
@@ -18,20 +23,20 @@
 
   max-width: 1080px;
   max-height: 864px;
-  width: 90vw;
-  height: 90vh;
 }
 
 .tight-container {
+  --window-width: 100vw;
+  --window-height: 100vw;
+
   @include container();
 
-  width: 100vw;
-  height: 100vh;
   border-radius: 0;
 }
 
 .sidebar {
-  width: 300px;
+  width: var(--sidebar-width);
+  box-sizing: border-box;
   padding: 20px;
   background-color: var(--second);
   display: flex;
@@ -159,7 +164,7 @@
 }
 
 .window-content {
-  width: 100%;
+  width: var(--window-content-width);
   height: 100%;
 }
 
@@ -170,38 +175,6 @@
   height: 100%;
 }
 
-.window-header {
-  padding: 14px 20px;
-  border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.window-header-title {
-  font-size: 20px;
-  font-weight: bolder;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.window-header-sub-title {
-  font-size: 14px;
-  margin-top: 5px;
-}
-
-.window-actions {
-  display: inline-flex;
-}
-
-.window-action-button {
-  margin-left: 10px;
-}
-
 .chat-body {
   flex: 1;
   overflow: auto;
@@ -220,7 +193,7 @@
 }
 
 .chat-message-container {
-  max-width: 60%;
+  max-width: 80%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -254,13 +227,14 @@
 }
 
 .chat-message-item {
+  max-width: 100%;
   margin-top: 10px;
   border-radius: 10px;
   background-color: rgba(0, 0, 0, 0.05);
   padding: 10px;
   font-size: 14px;
   user-select: text;
-  word-break: break-all;
+  word-break: break-word;
   border: var(--border-in-light);
 }
 
@@ -327,16 +301,3 @@
   right: 30px;
   bottom: 10px;
 }
-
-.settings {
-  padding: 20px;
-}
-
-.settings-title {
-  font-size: 14px;
-  font-weight: bolder;
-}
-
-.avatar {
-  cursor: pointer;
-}

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>
-    </>
-  );
-}

app/components/settings.module.scss

@@ -0,0 +1,14 @@
+@import "./window.scss";
+
+.settings {
+  padding: 20px;
+}
+
+.settings-title {
+  font-size: 14px;
+  font-weight: bolder;
+}
+
+.avatar {
+  cursor: pointer;
+}

app/components/settings.tsx

@@ -0,0 +1,160 @@
+import { useState, useRef, useEffect } from "react";
+
+import EmojiPicker, { Emoji, Theme as EmojiTheme } from "emoji-picker-react";
+
+import styles from "./settings.module.scss";
+
+import ResetIcon from "../icons/reload.svg";
+
+import { List, ListItem, Popover } from "./ui-lib";
+
+import { IconButton } from "./button";
+import { SubmitKey, useChatStore, Theme } from "../store";
+import { Avatar } from "./home";
+import dynamic from "next/dynamic";
+
+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>
+    </>
+  );
+}

app/components/window.scss

@@ -0,0 +1,31 @@
+.window-header {
+  padding: 14px 20px;
+  border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.window-header-title {
+  font-size: 20px;
+  font-weight: bolder;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.window-header-sub-title {
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+.window-actions {
+  display: inline-flex;
+}
+
+.window-action-button {
+  margin-left: 10px;
+}