fix: system theme

src/pages/llmodels/components/ollama-tips.tsx

@@ -55,37 +55,12 @@ const RenderMessage = () => {
   const intl = useIntl();
   return (
     <Tips>
-      <ul>
-        <li>
-          <span
-            dangerouslySetInnerHTML={{
-              __html: intl.formatMessage({
-                id: 'models.ollama.deprecated.current'
-              })
-            }}
-          ></span>
-        </li>
-        <li>
-          <span
-            dangerouslySetInnerHTML={{
-              __html: intl.formatMessage({
-                id: 'models.ollama.deprecated.upcoming'
-              })
-            }}
-          ></span>
-        </li>
-      </ul>
       <div className="notice">
-        <span
-          dangerouslySetInnerHTML={{
-            __html: intl.formatMessage({
-              id: 'models.ollama.deprecated.following'
-            })
-          }}
-        ></span>
         <div
           dangerouslySetInnerHTML={{
-            __html: intl.formatMessage({ id: 'models.ollama.deprecated.issue' })
+            __html: intl.formatMessage({
+              id: 'models.ollama.deprecated.notice'
+            })
           }}
         ></div>
       </div>

src/pages/playground/components/multiple-chat/message-body.tsx

@@ -217,7 +217,6 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
                 autoSize={{ minRows: 1 }}
                 style={{ borderRadius: 'var(--border-radius-mini)' }}
                 readOnly={loading}
-                onKeyDown={handleKeyDown}
                 onChange={handleMessageChange}
                 onPaste={handleOnPaste}
               />
@@ -244,7 +243,6 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
                     variant="filled"
                     autoSize={{ minRows: 1 }}
                     style={{ borderRadius: 'var(--border-radius-mini)' }}
-                    onKeyDown={handleKeyDown}
                     onChange={handleEdit}
                     onPaste={handleOnPaste}
                   />

src/pages/profile/components/appearance.tsx

@@ -1,7 +1,7 @@
 import useUserSettings from '@/hooks/use-user-settings';
 import { MoonOutlined, SunOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Switch } from 'antd';
+import { Select } from 'antd';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -14,9 +14,11 @@ const Wrapper = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    max-width: 220px;
+    max-width: 300px;
   }
   .theme-label {
+    display: flex;
+    align-items: center;
     font-size: 16px;
     font-weight: var(--font-weight-500);
   }
@@ -25,46 +27,51 @@ const Wrapper = styled.div`
   }
 `;
 
-const ThemeOptions = [
-  {
-    key: 'realDark',
-    label: 'common.appearance.dark',
-    icon: <MoonOutlined />
-  },
-  {
-    key: 'light',
-    label: 'common.appearance.light',
-    icon: <SunOutlined />
-  }
-];
 const Appearance: React.FC = () => {
   const { setTheme, userSettings } = useUserSettings();
 
+  console.log('userSettings', userSettings);
+
   const intl = useIntl();
 
-  const handleOnChange = (checked: boolean) => {
-    if (checked) {
-      setTheme('realDark');
-    } else {
-      setTheme('light');
+  const ThemeOptions = [
+    {
+      value: 'light',
+      label: intl.formatMessage({ id: 'common.appearance.light' }),
+      icon: <SunOutlined />
+    },
+    {
+      value: 'realDark',
+      label: intl.formatMessage({ id: 'common.appearance.dark' }),
+      icon: <MoonOutlined />
+    },
+    {
+      value: 'auto',
+      label: intl.formatMessage({ id: 'common.appearance.system' }),
+      icon: <SunOutlined />
     }
+  ];
+
+  const handleOnChange = (value: 'light' | 'realDark' | 'auto') => {
+    setTheme(value);
   };
 
-  const isDarkMode = useMemo(() => {
-    const darkMode = userSettings?.theme === 'realDark';
-    return darkMode;
+  const theme = useMemo(() => {
+    return userSettings?.theme || 'auto';
   }, [userSettings?.theme]);
 
   return (
     <Wrapper>
       <div className="theme">
         <span className="theme-label">
-          {intl.formatMessage({ id: 'common.appearance.darkmode' })}
+          <span>{intl.formatMessage({ id: 'common.appearance.theme' })}</span>
         </span>
-        <Switch checked={isDarkMode} onChange={handleOnChange} />
-      </div>
-      <div className="tips">
-        {intl.formatMessage({ id: 'common.appearance.tips' })}
+        <Select
+          value={userSettings.mode}
+          options={ThemeOptions}
+          onChange={handleOnChange}
+          style={{ width: 200 }}
+        ></Select>
       </div>
     </Wrapper>
   );