feat: add dark theme support

app/components/home.tsx

@@ -6,10 +6,10 @@ import "katex/dist/katex.min.css";
 import RemarkMath from "remark-math";
 import RehypeKatex from "rehype-katex";
 
-import EmojiPicker, { Emoji, EmojiClickData } from "emoji-picker-react";
+import EmojiPicker, { Emoji, Theme as EmojiTheme } from "emoji-picker-react";
 
 import { IconButton } from "./button";
-import styles from "./home.module.css";
+import styles from "./home.module.scss";
 
 import SettingsIcon from "../icons/settings.svg";
 import GithubIcon from "../icons/github.svg";
@@ -21,8 +21,9 @@ 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 } from "../store";
+import { Message, SubmitKey, useChatStore, Theme } from "../store";
 import { Card, List, ListItem, Popover } from "./ui-lib";
 
 export function Markdown(props: { content: string }) {
@@ -101,12 +102,34 @@ export function ChatList() {
   );
 }
 
+function useSubmitHandler() {
+  const config = useChatStore((state) => state.config);
+  const submitKey = config.submitKey;
+
+  const shouldSubmit = (e: KeyboardEvent) => {
+    if (e.key !== "Enter") return false;
+
+    return (
+      (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
+      (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
+      (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
+      config.submitKey === SubmitKey.Enter
+    );
+  };
+
+  return {
+    submitKey,
+    shouldSubmit,
+  };
+}
+
 export function Chat() {
   type RenderMessage = Message & { preview?: boolean };
 
   const session = useChatStore((state) => state.currentSession());
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const { submitKey, shouldSubmit } = useSubmitHandler();
 
   const onUserInput = useChatStore((state) => state.onUserInput);
   const onUserSubmit = () => {
@@ -116,7 +139,7 @@ export function Chat() {
     setUserInput("");
   };
   const onInputKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Enter" && (e.shiftKey || e.ctrlKey || e.metaKey)) {
+    if (shouldSubmit(e)) {
       onUserSubmit();
       e.preventDefault();
     }
@@ -165,12 +188,20 @@ export function Chat() {
             与 ChatGPT 的 {session.messages.length} 条对话
           </div>
         </div>
-        <div className={styles["chat-actions"]}>
-          <div className={styles["chat-action-button"]}>
-            <IconButton icon={<BrainIcon />} bordered />
+        <div className={styles["window-actions"]}>
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<BrainIcon />}
+              bordered
+              title="查看压缩后的历史 Prompt（开发中）"
+            />
           </div>
-          <div className={styles["chat-action-button"]}>
-            <IconButton icon={<ExportIcon />} bordered />
+          <div className={styles["window-action-button"]}>
+            <IconButton
+              icon={<ExportIcon />}
+              bordered
+              title="导出聊天记录为 Markdown（开发中）"
+            />
           </div>
         </div>
       </div>
@@ -223,7 +254,7 @@ export function Chat() {
         <div className={styles["chat-input-panel-inner"]}>
           <textarea
             className={styles["chat-input"]}
-            placeholder="输入消息，Ctrl + Enter 发送"
+            placeholder={`输入消息，${submitKey} 发送`}
             rows={3}
             onInput={(e) => setUserInput(e.currentTarget.value)}
             value={userInput}
@@ -232,7 +263,7 @@ export function Chat() {
           <IconButton
             icon={<SendWhiteIcon />}
             text={"发送"}
-            className={styles["chat-input-send"]}
+            className={styles["chat-input-send"] + " no-dark"}
             onClick={onUserSubmit}
           />
         </div>
@@ -241,12 +272,28 @@ export function Chat() {
   );
 }
 
+function useSwitchTheme() {
+  const config = useChatStore((state) => state.config);
+
+  useEffect(() => {
+    document.body.classList.remove("light");
+    document.body.classList.remove("dark");
+    if (config.theme === "dark") {
+      document.body.classList.add("dark");
+    } else if (config.theme === "light") {
+      document.body.classList.add("light");
+    }
+  }, [config.theme]);
+}
+
 export function Home() {
   const [createNewSession] = useChatStore((state) => [state.newSession]);
 
   // settings
   const [openSettings, setOpenSettings] = useState(false);
 
+  useSwitchTheme();
+
   return (
     <div className={styles.container}>
       <div className={styles.sidebar}>
@@ -260,7 +307,10 @@ export function Home() {
           </div>
         </div>
 
-        <div className={styles["sidebar-body"]}>
+        <div
+          className={styles["sidebar-body"]}
+          onClick={() => setOpenSettings(false)}
+        >
           <ChatList />
         </div>
 
@@ -295,13 +345,6 @@ export function Home() {
   );
 }
 
-export function EmojiPickerModal(props: {
-  show: boolean;
-  onClose: (_: boolean) => void;
-}) {
-  return <div className=""></div>;
-}
-
 export function Settings() {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const [config, updateConfig] = useChatStore((state) => [
@@ -316,6 +359,11 @@ export function Settings() {
           <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 />} bordered title="重置所有选项" />
+          </div>
+        </div>
       </div>
       <div className={styles["settings"]}>
         <List>
@@ -326,6 +374,7 @@ export function Settings() {
               content={
                 <EmojiPicker
                   lazyLoadEmojis
+                  theme={EmojiTheme.AUTO}
                   onEmojiClick={(e) => {
                     updateConfig((config) => (config.avatar = e.unified));
                     setShowEmojiPicker(false);
@@ -355,8 +404,28 @@ export function Settings() {
                   );
                 }}
               >
-                {Object.entries(SubmitKey).map(([k, v]) => (
-                  <option value={k} key={v}>
+                {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>
                 ))}
@@ -366,13 +435,36 @@ export function Settings() {
         </List>
         <List>
           <ListItem>
-            <div className={styles["settings-title"]}>最大记忆历史消息数</div>
-            <div className="">{config.historyMessageCount}</div>
+            <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>
-            <div className="">{config.sendBotMessages ? "是" : "否"}</div>
+            <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>