@lobehub/chat 0.33.0 → 0.34.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 # Changelog
 
+## [Version 0.34.0](https://github.com/lobehub/lobe-chat/compare/v0.33.0...v0.34.0)
+
+<sup>Released on **2023-07-31**</sup>
+
+#### ✨ Features
+
+- **misc**: Add agent settings functionality, Add new components and features for AgentMeta, Improve organization and functionality of settings and configuration features.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add agent settings functionality ([b0aaeed](https://github.com/lobehub/lobe-chat/commit/b0aaeed))
+- **misc**: Add new components and features for AgentMeta ([1232d95](https://github.com/lobehub/lobe-chat/commit/1232d95))
+- **misc**: Improve organization and functionality of settings and configuration features ([badde35](https://github.com/lobehub/lobe-chat/commit/badde35))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.33.0](https://github.com/lobehub/lobe-chat/compare/v0.32.0...v0.33.0)
 
 <sup>Released on **2023-07-30**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -89,7 +89,7 @@
     "react-hotkeys-hook": "^4",
     "react-i18next": "^13",
     "react-layout-kit": "^1",
-    "serpapi": "^1",
+    "serpapi": "^2",
     "swr": "^2",
     "ts-md5": "^1",
     "uuid": "^9",

package/src/components/EmojiPicker/index.tsx

@@ -0,0 +1,48 @@
+import data from '@emoji-mart/data';
+import i18n from '@emoji-mart/data/i18n/zh.json';
+import Picker from '@emoji-mart/react';
+import { Avatar } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { memo } from 'react';
+
+import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
+
+import { useStyles } from './style';
+
+export interface EmojiPickerProps {
+  avatar?: string;
+  backgroundColor?: string;
+  onChange: (emoji: string) => void;
+}
+
+const EmojiPicker = memo<EmojiPickerProps>(
+  ({ avatar = DEFAULT_AVATAR, backgroundColor = DEFAULT_BACKGROUND_COLOR, onChange }) => {
+    const { styles } = useStyles();
+
+    return (
+      <Popover
+        content={
+          <div className={styles.picker}>
+            <Picker
+              data={data}
+              i18n={i18n}
+              locale={'zh'}
+              onEmojiSelect={(e: any) => onChange(e.native)}
+              skinTonePosition={'none'}
+              theme={'auto'}
+            />
+          </div>
+        }
+        placement={'left'}
+        rootClassName={styles.popover}
+        trigger={'click'}
+      >
+        <div className={styles.avatar} style={{ width: 'fit-content' }}>
+          <Avatar avatar={avatar} background={backgroundColor} size={44} />
+        </div>
+      </Popover>
+    );
+  },
+);
+
+export default EmojiPicker;

package/src/components/EmojiPicker/style.ts

@@ -0,0 +1,28 @@
+import { createStyles } from 'antd-style';
+import chroma from 'chroma-js';
+
+export const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  avatar: css`
+    border-radius: 50%;
+    transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
+
+    &:hover {
+      box-shadow: 0 0 0 3px ${token.colorText};
+    }
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+  picker: css`
+    em-emoji-picker {
+      --rgb-accent: ${chroma(token.colorPrimary) .rgb() .join(',')};
+      --shadow: none;
+    }
+  `,
+  popover: css`
+    .${prefixCls}-popover-inner {
+      padding: 0;
+    }
+  `,
+}));

package/src/const/meta.ts

@@ -1,3 +1,6 @@
+import { MetaData } from '@/types/meta';
+
 export const DEFAULT_AVATAR = '🤖';
 export const DEFAULT_USER_AVATAR = '😀';
 export const DEFAULT_BACKGROUND_COLOR = 'rgba(0,0,0,0)';
+export const DEFAULT_AGENT_META: MetaData = {};

package/src/const/settings.ts

@@ -0,0 +1,50 @@
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { LanguageModel } from '@/types/llm';
+import { LobeAgentConfig } from '@/types/session';
+import { GlobalBaseSettings, GlobalDefaultAgent, GlobalSettings } from '@/types/settings';
+
+export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
+  OPENAI_API_KEY: '',
+  avatar: '',
+  compressThreshold: 24,
+  enableCompressThreshold: false,
+  enableHistoryCount: false,
+  enableMaxTokens: true,
+  endpoint: '',
+  fontSize: 14,
+  frequencyPenalty: 0,
+  historyCount: 24,
+  language: 'zh-CN',
+  maxTokens: 2000,
+  model: LanguageModel.GPT3_5,
+  neutralColor: '',
+  password: '',
+  presencePenalty: 0,
+  primaryColor: '',
+  temperature: 0.5,
+  themeMode: 'auto',
+  topP: 1,
+};
+
+export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
+  displayMode: 'chat',
+  model: LanguageModel.GPT3_5,
+  params: {
+    frequency_penalty: 0,
+    presence_penalty: 0,
+    temperature: 0.6,
+    top_p: 1,
+  },
+  plugins: [],
+  systemRole: '',
+};
+
+export const DEFAULT_AGENT: GlobalDefaultAgent = {
+  config: DEFAULT_AGENT_CONFIG,
+  meta: DEFAULT_AGENT_META,
+};
+
+export const DEFAULT_SETTINGS: GlobalSettings = {
+  defaultAgent: DEFAULT_AGENT,
+  ...DEFAULT_BASE_SETTINGS,
+};

package/src/{pages/chat/[id]/edit → features/AgentSetting}/AgentConfig/index.tsx

@@ -1,16 +1,14 @@
 import { Form, ItemGroup } from '@lobehub/ui';
 import { ConfigProvider, Input, Segmented, Select, Switch } from 'antd';
 import { useTheme } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { BrainCog, MessagesSquare } from 'lucide-react';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SliderWithInput from 'src/components/SliderWithInput';
-import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LanguageModel } from '@/types/llm';
 import type { LobeAgentConfig } from '@/types/session';
 
@@ -20,14 +18,15 @@ type SettingItemGroup = ItemGroup & {
   }[];
 };
 
-const AgentConfig = () => {
+export interface AgentConfigProps {
+  config: LobeAgentConfig;
+  updateConfig: AgentAction['updateAgentConfig'];
+}
+
+const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
   const theme = useTheme();
 
-  const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
-
-  const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
-
   const chat: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -60,6 +59,7 @@ const AgentConfig = () => {
         {
           children: <SliderWithInput max={32} min={0} />,
           desc: t('settingChat.historyCount.desc'),
+          divider: false,
           hidden: !config.enableHistoryCount,
           label: t('settingChat.historyCount.title'),
           name: 'historyCount',
@@ -74,6 +74,7 @@ const AgentConfig = () => {
         {
           children: <SliderWithInput max={32} min={0} />,
           desc: t('settingChat.compressThreshold.desc'),
+          divider: false,
           hidden: !config.enableCompressThreshold,
           label: t('settingChat.compressThreshold.title'),
           name: 'compressThreshold',
@@ -140,6 +141,7 @@ const AgentConfig = () => {
         {
           children: <SliderWithInput max={32_000} min={0} step={100} />,
           desc: t('settingModel.maxTokens.desc'),
+          divider: false,
           hidden: !config?.enableMaxTokens,
           label: t('settingModel.maxTokens.title'),
           name: ['params', 'max_tokens'],
@@ -165,11 +167,11 @@ const AgentConfig = () => {
       <Form
         initialValues={config}
         items={[chat, model]}
-        onValuesChange={debounce(updateAgentConfig, 100)}
+        onValuesChange={debounce(updateConfig, 100)}
         {...FORM_STYLE}
       />
     </ConfigProvider>
   );
-};
+});
 
 export default AgentConfig;

package/src/{pages/chat/[id]/edit → features/AgentSetting}/AgentMeta/AutoGenerateInput.tsx

@@ -6,8 +6,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface AutoGenerateInputProps extends InputProps {
-  loading: boolean;
-  onGenerate: () => void;
+  loading?: boolean;
+  onGenerate?: () => void;
 }
 
 const AutoGenerateInput = memo<AutoGenerateInputProps>(({ loading, onGenerate, ...props }) => {
@@ -17,18 +17,20 @@ const AutoGenerateInput = memo<AutoGenerateInputProps>(({ loading, onGenerate, .
   return (
     <Input
       suffix={
-        <ActionIcon
-          active
-          icon={Wand2}
-          loading={loading}
-          onClick={onGenerate}
-          size={'small'}
-          style={{
-            color: theme.colorInfo,
-            marginRight: -4,
-          }}
-          title={t('autoGenerate')}
-        />
+        onGenerate && (
+          <ActionIcon
+            active
+            icon={Wand2}
+            loading={loading}
+            onClick={onGenerate}
+            size={'small'}
+            style={{
+              color: theme.colorInfo,
+              marginRight: -4,
+            }}
+            title={t('autoGenerate')}
+          />
+        )
       }
       type={'block'}
       {...props}

package/src/features/AgentSetting/AgentMeta/BackgroundSwatches.tsx

@@ -0,0 +1,27 @@
+import { Swatches, primaryColorsSwatches } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
+
+interface BackgroundSwatchesProps {
+  backgroundColor?: string;
+  onChange: (color: string) => void;
+}
+
+const BackgroundSwatches = memo<BackgroundSwatchesProps>(
+  ({ backgroundColor = DEFAULT_BACKGROUND_COLOR, onChange }) => {
+    const handleSelect = (v: any) => {
+      onChange(v || DEFAULT_BACKGROUND_COLOR);
+    };
+
+    return (
+      <Swatches
+        activeColor={backgroundColor}
+        colors={primaryColorsSwatches}
+        onSelect={handleSelect}
+      />
+    );
+  },
+);
+
+export default BackgroundSwatches;

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -0,0 +1,128 @@
+import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
+import { Button } from 'antd';
+import { UserCircle, Wand2 } from 'lucide-react';
+import { ReactNode, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import EmojiPicker from '@/components/EmojiPicker';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { AgentAction, SessionLoadingState } from '@/store/session/slices/agentConfig';
+import { MetaData } from '@/types/meta';
+import { LobeAgentConfig } from '@/types/session';
+
+import AutoGenerateInput from './AutoGenerateInput';
+import BackgroundSwatches from './BackgroundSwatches';
+
+export interface Autocomplete {
+  autocompleteMeta: AgentAction['autocompleteMeta'];
+  autocompleteSessionAgentMeta: AgentAction['autocompleteSessionAgentMeta'];
+  id: string | null;
+  loading: SessionLoadingState;
+}
+
+export interface AgentMetaProps {
+  autocomplete?: Autocomplete;
+  config: LobeAgentConfig;
+  meta: MetaData;
+  updateMeta: AgentAction['updateAgentMeta'];
+}
+
+const AgentMeta = memo<AgentMetaProps>(({ config, meta, updateMeta, autocomplete }) => {
+  const { t } = useTranslation('setting');
+
+  const hasSystemRole = useMemo(() => !!config.systemRole, [config]);
+
+  let extra: ReactNode | undefined;
+
+  const basic = [
+    {
+      key: 'title',
+      label: t('settingAgent.name.title'),
+      placeholder: t('settingAgent.name.placeholder'),
+    },
+    {
+      key: 'description',
+      label: t('settingAgent.description.title'),
+      placeholder: t('settingAgent.description.placeholder'),
+    },
+    // { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
+  ];
+
+  const autocompleteItems: FormItemProps[] = basic.map((item) => {
+    const handleGenerate = () => autocomplete?.autocompleteMeta(item.key as keyof typeof meta);
+    return {
+      children: (
+        <AutoGenerateInput
+          loading={autocomplete?.loading[item.key as keyof SessionLoadingState]}
+          onChange={(e) => {
+            updateMeta({ [item.key]: e.target.value });
+          }}
+          onGenerate={autocomplete ? handleGenerate : undefined}
+          placeholder={item.placeholder}
+          value={meta[item.key as keyof typeof meta]}
+        />
+      ),
+      label: item.label,
+    };
+  });
+
+  if (autocomplete) {
+    const { autocompleteSessionAgentMeta, loading, id } = autocomplete;
+
+    extra = (
+      <Tooltip title={t('autoGenerateTooltip', { ns: 'common' })}>
+        <Button
+          disabled={!hasSystemRole}
+          icon={<Icon icon={Wand2} />}
+          loading={Object.values(loading).some((i) => !!i)}
+          onClick={(e: any) => {
+            e.stopPropagation();
+            if (!id) return;
+            autocompleteSessionAgentMeta(id, true);
+          }}
+          size={'small'}
+        >
+          {t('autoGenerate', { ns: 'common' })}
+        </Button>
+      </Tooltip>
+    );
+  }
+
+  const metaData: ItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: (
+            <EmojiPicker
+              avatar={meta.avatar}
+              backgroundColor={meta.backgroundColor}
+              onChange={(avatar) => updateMeta({ avatar })}
+            />
+          ),
+          label: t('settingAgent.avatar.title'),
+          minWidth: undefined,
+        },
+        {
+          children: (
+            <BackgroundSwatches
+              backgroundColor={meta.backgroundColor}
+              onChange={(backgroundColor) => updateMeta({ backgroundColor })}
+            />
+          ),
+          divider: false,
+          label: t('settingAgent.backgroundColor.title'),
+          minWidth: undefined,
+        },
+        ...autocompleteItems,
+      ],
+      extra: extra,
+      icon: UserCircle,
+      title: t('settingAgent.title'),
+    }),
+    [autocompleteItems, extra, meta],
+  );
+
+  return <Form items={[metaData]} {...FORM_STYLE} />;
+});
+
+export default AgentMeta;

package/src/{pages/chat/[id]/edit → features/AgentSetting}/AgentPlugin/index.tsx

@@ -1,21 +1,21 @@
 import { Avatar, Form, ItemGroup } from '@lobehub/ui';
 import { Switch } from 'antd';
-import isEqual from 'fast-deep-equal';
 import { ToyBrick } from 'lucide-react';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { PluginsMap } from '@/plugins';
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { AgentAction } from '@/store/session/slices/agentConfig';
+import { LobeAgentConfig } from '@/types/session';
 
-const PluginList = () => {
-  const { t } = useTranslation('setting');
-
-  const config = useSessionStore(agentSelectors.currentAgentConfigSafe, isEqual);
+export interface AgentPluginProps {
+  config: LobeAgentConfig;
+  updateConfig: AgentAction['toggleAgentPlugin'];
+}
 
-  const toggleAgentPlugin = useSessionStore((s) => s.toggleAgentPlugin, shallow);
+const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
+  const { t } = useTranslation('setting');
 
   const plugin: ItemGroup = useMemo(
     () => ({
@@ -24,7 +24,7 @@ const PluginList = () => {
         children: (
           <Switch
             checked={!config.plugins ? false : config.plugins.includes(item.name)}
-            onChange={() => toggleAgentPlugin(item.name)}
+            onChange={() => updateConfig(item.name)}
           />
         ),
         desc: item.schema.description,
@@ -39,6 +39,6 @@ const PluginList = () => {
   );
 
   return <Form items={[plugin]} {...FORM_STYLE} />;
-};
+});
 
-export default PluginList;
+export default AgentPlugin;

package/src/{pages/chat/[id]/edit → features/AgentSetting}/AgentPrompt/index.tsx

@@ -1,13 +1,14 @@
 import { CodeEditor, FormGroup, TokenTag } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { encode } from 'gpt-tokenizer';
 import { Bot } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelTokens } from '@/const/modelTokens';
-import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import { AgentAction } from '@/store/session/slices/agentConfig';
+import { LobeAgentConfig } from '@/types/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
   input: css`
@@ -22,18 +23,16 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const AgentPrompt = memo(() => {
+export interface AgentPromptProps {
+  config: LobeAgentConfig;
+  updateConfig: AgentAction['updateAgentConfig'];
+}
+
+const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
 
-  const [systemRole, model, systemTokenCount, updateAgentConfig] = useSessionStore(
-    (s) => [
-      agentSelectors.currentAgentSystemRole(s),
-      agentSelectors.currentAgentModel(s),
-      chatSelectors.systemRoleTokenCount(s),
-      s.updateAgentConfig,
-    ],
-    shallow,
-  );
+  const { systemRole, model } = config;
+  const systemTokenCount = useMemo(() => encode(systemRole || '').length, [systemRole]);
 
   return (
     <FormGroup
@@ -46,9 +45,7 @@ const AgentPrompt = memo(() => {
     >
       <CodeEditor
         language={'md'}
-        onValueChange={(e) => {
-          updateAgentConfig({ systemRole: e });
-        }}
+        onValueChange={(e) => updateConfig({ systemRole: e })}
         placeholder={t('settingAgent.name.placeholder')}
         resize={false}
         style={{ marginTop: 16 }}

package/src/features/AgentSetting/index.ts

@@ -0,0 +1,4 @@
+export { default as AgentConfig } from './AgentConfig';
+export { default as AgentMeta } from './AgentMeta';
+export { default as AgentPlugin } from './AgentPlugin';
+export { default as AgentPrompt } from './AgentPrompt';

package/src/features/AgentSetting/test.json

@@ -0,0 +1,40 @@
+{
+  "exportType": "agents",
+  "state": {
+    "sessions": {
+      "9a2def55-ff50-4f7f-ad6c-b97dac817193": {
+        "chats": {},
+        "config": {
+          "model": "gpt-3.5-turbo",
+          "params": { "temperature": 0.6 },
+          "systemRole": "你是一名专业的前端。擅长书写 Typescript JSDoc 代码，代码的示例如下：\n\n```ts\ninterface Props {\n/**\n* 尺寸\n* */\nloading: boolean;\n/**\n* 头像形状\n* @default 'square'\n* @enum [\"square\",\"circle\"]\n* @enumNames [ \"方形\", \"圆形\"]\n*/\nshape?: 'square' | 'circle';\n/**\n* 返回事件\n* @ignore\n*/\nonBack: () => void;\n/**\n* 选择路由的回调函数\n* @param key - 选中的路由\n* @ignore\n*/\nonSelect?: (key: string) => any;\n/**\n* 点击事件回调函数\n* @ignore\n*/\nonClick?: () => void;\n/**\n* 引用\n* @ignore\n*/\nref: any;\n/**\n* Tooltip 提示框位置\n* @enum ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']\n* @enumNames ['上', '左', '右', '下', '左上', '右上', '左下', '右下', '左上', '左下', '右上', '右下']\n* @default 'top'\n*/\nplacement?: TooltipPlacement;\n}\n```\n\n\n接下来用户会输入一串 interface 代码，需要你补全 jsdoc。其中接口的类型不可改变"
+        },
+        "createAt": 1690184262713,
+        "id": "9a2def55-ff50-4f7f-ad6c-b97dac817193",
+        "meta": { "backgroundColor": "#ec5e41", "avatar": "🥲" },
+        "type": "agent",
+        "updateAt": 1690184262713,
+        "topics": {}
+      },
+      "744fe028-c8a2-410c-8b0a-66cfa00d647b": {
+        "chats": {},
+        "config": {
+          "model": "gpt-3.5-turbo",
+          "params": { "temperature": 0.6 },
+          "systemRole": "- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da- dafdsafa\n- da"
+        },
+        "createAt": 1690184730185,
+        "id": "744fe028-c8a2-410c-8b0a-66cfa00d647b",
+        "meta": {
+          "backgroundColor": "#ffef5c",
+          "title": "dafaa",
+          "description": "safsafsafsafsafsafsfasfas"
+        },
+        "type": "agent",
+        "updateAt": 1690184730185,
+        "topics": {}
+      }
+    }
+  },
+  "version": 1
+}

package/src/features/SideBar/{BottomAction.tsx → BottomActions.tsx}

@@ -8,17 +8,24 @@ import {
   Github,
   Heart,
   Settings,
+  Settings2,
 } from 'lucide-react';
 import Router from 'next/router';
-import { ReactNode, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
+import { SettingsStore } from '@/store/settings';
 
 import pkg from '../../../package.json';
 
-const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
+export interface BottomActionProps {
+  setTab: SettingsStore['switchSideBar'];
+  tab: SettingsStore['sidebarKey'];
+}
+
+const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
   const { t } = useTranslation('common');
 
   const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
@@ -93,7 +100,10 @@ const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
         icon: <Icon icon={Settings} />,
         key: 'setting',
         label: t('setting'),
-        onClick: () => Router.push('/setting'),
+        onClick: () => {
+          setTab('settings');
+          Router.push('/settings');
+        },
       },
     ],
     [],
@@ -103,10 +113,10 @@ const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
     <>
       <ActionIcon icon={Github} onClick={() => window.open(pkg.homepage, '__blank')} />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        {children}
+        <ActionIcon active={tab === 'settings'} icon={Settings2} />
       </Dropdown>
     </>
   );
 });
 
-export default BottomAction;
+export default BottomActions;