feat: 添加设置样式

app/components/Menu.tsx

@@ -3,15 +3,17 @@
 import { AdjustmentsHorizontalIcon, InboxStackIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import type { FC, ReactNode } from 'react';
-import { useCallback, useContext, useEffect } from 'react';
+import { useCallback, useContext } from 'react';
 
 import { DeviceContext } from '@/context/DeviceContext';
 import { MenuContext, MenuKey } from '@/context/MenuContext';
+import { useDarkMode } from '@/hooks/useDarkMode';
 import { sleep } from '@/utils/sleep';
 
 import { LoginButton } from './buttons/LoginButton';
 import { MenuEntryButton } from './buttons/MenuEntryButton';
 import { History } from './History';
+import { Settings } from './Settings';
 
 /**
  * 菜单栏
@@ -20,6 +22,8 @@ export const Menu = () => {
   const { isWeChat } = useContext(DeviceContext)!;
   const { isMenuShow } = useContext(MenuContext)!;
 
+  useDarkMode();
+
   return (
     <>
       <div className={classNames('fixed z-20 top-0 right-0 md:hidden', { absolute: isWeChat, hidden: isMenuShow })}>
@@ -125,69 +129,10 @@ const MenuTabs = () => {
 const MenuTabsContent = () => {
   const { currentMenu } = useContext(MenuContext)!;
 
-  useEffect(() => {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      // 暗色模式
-      link.href = '/prism-dark.css';
-    } else {
-      // 浅色模式
-      link.href = '/prism-light.css';
-    }
-    document.head.appendChild(link);
-
-    let darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    darkModeQuery.addEventListener('change', (e) => {
-      if (e.matches) {
-        // 暗色模式
-        link.href = '/prism-dark.css';
-      } else {
-        // 浅色模式
-        link.href = '/prism-light.css';
-      }
-    });
-  }, []);
-
   return (
     <div className="grow overflow-y-auto md:px-4">
       {currentMenu === MenuKey.InboxStack && <History />}
-      {currentMenu === MenuKey.AdjustmentsHorizontal && (
-        <>
-          {/* <div className="m-4">
-            模型：
-            <select
-              value={completionParams.model}
-              onChange={(e) =>
-                setCompletionParams({
-                  ...completionParams,
-                  model: e.target.value as Model,
-                })
-              }
-            >
-              {Object.values(CompletionParamsModel).map((model) => (
-                <option key={model}>{model}</option>
-              ))}
-            </select>
-          </div>
-          <div className="m-4">
-            <label>
-              流式响应：
-              <input
-                defaultChecked={completionParams.stream}
-                type="checkbox"
-                onChange={(e) =>
-                  setCompletionParams({
-                    ...completionParams,
-                    stream: e.target.checked,
-                  })
-                }
-              />
-            </label>
-          </div> */}
-        </>
-      )}
+      {currentMenu === MenuKey.AdjustmentsHorizontal && <Settings />}
     </div>
   );
 };

app/components/Settings.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Model } from '@/utils/constants';
+
+/**
+ * 聊天记录
+ */
+export const Settings = () => {
+  const models = [Model['gpt-3.5-turbo-0301']];
+
+  return (
+    <div>
+      <div className="m-4">
+        模型：
+        <select value={models[0]}>
+          {models.map((model) => (
+            <option key={model}>{model}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};

app/context/ChatContext.tsx

@@ -7,6 +7,7 @@ import { fetchApiChat } from '@/utils/api';
 import { getCache, setCache } from '@/utils/cache';
 import type { ChatResponse, Message } from '@/utils/constants';
 import { Model, Role } from '@/utils/constants';
+import type { ResError } from '@/utils/error';
 import { isMessage } from '@/utils/message';
 import { isOldMessage, upgradeMessage } from '@/utils/messageUpgrade';
 import { gapToBottom, getIsScrolling, scrollToBottom } from '@/utils/scroll';
@@ -143,7 +144,10 @@ export const ChatProvider: FC<{ children: ReactNode }> = ({ children }) => {
       } catch (e) {
         // 发生错误时，展示错误消息
         setIsLoading(false);
-        setMessages([...newMessages, { isError: true, role: Role.assistant, content: (e as Error).message }]);
+        setMessages([
+          ...newMessages,
+          { isError: true, role: Role.assistant, content: (e as ResError).message || (e as ResError).code.toString() },
+        ]);
       }
     },
     [messages, history, historyIndex],

app/hooks/useDarkMode.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+export const useDarkMode = () => {
+  useEffect(() => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      // 暗色模式
+      link.href = '/prism-dark.css';
+    } else {
+      // 浅色模式
+      link.href = '/prism-light.css';
+    }
+    document.head.appendChild(link);
+
+    let darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    darkModeQuery.addEventListener('change', (e) => {
+      if (e.matches) {
+        // 暗色模式
+        link.href = '/prism-dark.css';
+      } else {
+        // 浅色模式
+        link.href = '/prism-light.css';
+      }
+    });
+  }, []);
+};

app/utils/api.ts

@@ -36,7 +36,7 @@ export const fetchApiChat = async ({
  * 请求 /api/models 接口
  * 获取可用的模型列表
  */
-export const fetchModels = async () => {
+export const fetchApiModels = async () => {
   const fetchResult = await fetch('/api/models', {
     method: HttpMethod.GET,
     headers: HttpHeaderJson,