@lobehub/chat 1.75.5 → 1.76.1

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/ShortcutHint.tsx

@@ -1,58 +1,37 @@
-import { Icon } from '@lobehub/ui';
-import { Skeleton } from 'antd';
+import { Hotkey, combineKeys } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
-import { ChevronUp, CornerDownLeft, LucideCommand } from 'lucide-react';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
-import { isMacOS } from '@/utils/platform';
+import { KeyEnum } from '@/types/hotkey';
 
 const ShortcutHint = memo(() => {
   const { t } = useTranslation('chat');
   const theme = useTheme();
   const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
-  const [isMac, setIsMac] = useState<boolean>();
 
-  useEffect(() => {
-    setIsMac(isMacOS());
-  }, []);
+  const sendShortcut = useCmdEnterToSend
+    ? combineKeys([KeyEnum.Mod, KeyEnum.Enter])
+    : KeyEnum.Enter;
 
-  const cmdEnter = (
-    <Flexbox gap={2} horizontal>
-      {typeof isMac === 'boolean' ? (
-        <Icon icon={isMac ? LucideCommand : ChevronUp} />
-      ) : (
-        <Skeleton.Node active style={{ height: '100%', width: 12 }}>
-          {' '}
-        </Skeleton.Node>
-      )}
-      <Icon icon={CornerDownLeft} />
-    </Flexbox>
-  );
-
-  const enter = (
-    <Center>
-      <Icon icon={CornerDownLeft} />
-    </Center>
-  );
-
-  const sendShortcut = useCmdEnterToSend ? cmdEnter : enter;
-
-  const wrapperShortcut = useCmdEnterToSend ? enter : cmdEnter;
+  const wrapperShortcut = useCmdEnterToSend
+    ? KeyEnum.Enter
+    : combineKeys([KeyEnum.Mod, KeyEnum.Enter]);
 
   return (
     <Flexbox
+      align={'center'}
       gap={4}
       horizontal
       style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
     >
-      {sendShortcut}
+      <Hotkey keys={sendShortcut} style={{ color: 'inherit' }} variant={'pure'} />
       <span>{t('input.send')}</span>
       <span>/</span>
-      {wrapperShortcut}
+      <Hotkey keys={wrapperShortcut} style={{ color: 'inherit' }} variant={'pure'} />
       <span>{t('input.warp')}</span>
     </Flexbox>
   );

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -69,7 +69,7 @@ const Footer = memo<FooterProps>(({ onExpandChange, expand }) => {
 
   return (
     <>
-      <Suspense fallback={null}>
+      <Suspense>
         <MessageFromUrl />
       </Suspense>
       <Flexbox

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ZenModeToast/Toast.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import { Hotkey } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HotKeys from '@/components/HotKeys';
-import { HOTKEYS } from '@/const/hotkeys';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
 
 const useStyles = createStyles(({ css, token }) => ({
   closeButton: css`
@@ -62,6 +64,7 @@ const Toast = () => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const [isVisible, setIsVisible] = useState(true);
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleZenMode));
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -76,8 +79,8 @@ const Toast = () => {
   return (
     <div className={styles.container}>
       <div className={styles.toast}>
-        <Flexbox className={styles.text} gap={12} horizontal>
-          {t('zenMode')} <HotKeys inverseTheme keys={HOTKEYS.zenMode} />
+        <Flexbox align={'center'} className={styles.text} gap={8} horizontal>
+          {t('zenMode')} <Hotkey inverseTheme keys={hotkey} />
         </Flexbox>
       </div>
     </div>

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/HeaderAction.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Tooltip } from '@lobehub/ui';
 import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,13 +10,16 @@ import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
 
 import SettingButton from '../../../features/SettingButton';
 import ShareButton from '../../../features/ShareButton';
 
 const HeaderAction = memo(() => {
   const { t } = useTranslation('chat');
-
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleRightPanel));
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     systemStatusSelectors.showChatSideBar(s),
     s.toggleChatSideBar,
@@ -27,12 +30,13 @@ const HeaderAction = memo(() => {
   return (
     <Flexbox gap={4} horizontal>
       <ShareButton />
-      <ActionIcon
-        icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
-        onClick={() => toggleConfig()}
-        size={DESKTOP_HEADER_ICON_SIZE}
-        title={t('roleAndArchive')}
-      />
+      <Tooltip hotkey={hotkey} title={t('toggleRightPanel.title', { ns: 'hotkey' })}>
+        <ActionIcon
+          icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
+          onClick={() => toggleConfig()}
+          size={DESKTOP_HEADER_ICON_SIZE}
+        />
+      </Tooltip>
       {isAgentEditable && <SettingButton />}
     </Flexbox>
   );

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, Avatar } from '@lobehub/ui';
+import { ActionIcon, Avatar, Tooltip } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
@@ -16,6 +16,9 @@ import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
 
 import Tags from './Tags';
 
@@ -42,7 +45,9 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 const Main = memo(() => {
-  const { t } = useTranslation('chat');
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleLeftPanel));
+
+  const { t } = useTranslation(['chat', 'hotkey']);
   const { styles } = useStyles();
   useInitAgentConfig();
   const [isPinned] = useQueryState('pinned', parseAsBoolean);
@@ -61,23 +66,25 @@ const Main = memo(() => {
   const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
   const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
 
+  const ToggleAction = (
+    <Tooltip hotkey={hotkey} title={t('toggleLeftPanel.title', { ns: 'hotkey' })}>
+      <ActionIcon
+        icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
+        onClick={() => {
+          updateSystemStatus({
+            sessionsWidth: showSessionPanel ? 0 : 320,
+            showSessionPanel: !showSessionPanel,
+          });
+        }}
+        size={DESKTOP_HEADER_ICON_SIZE}
+      />
+    </Tooltip>
+  );
+
   if (!init)
     return (
       <Flexbox align={'center'} gap={8} horizontal>
-        {!isPinned && (
-          <ActionIcon
-            aria-label={t('agents')}
-            icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
-            onClick={() => {
-              updateSystemStatus({
-                sessionsWidth: showSessionPanel ? 0 : 320,
-                showSessionPanel: !showSessionPanel,
-              });
-            }}
-            size={DESKTOP_HEADER_ICON_SIZE}
-            title={t('agents')}
-          />
-        )}
+        {!isPinned && ToggleAction}
         <Skeleton
           active
           avatar={{ shape: 'circle', size: 28 }}
@@ -89,20 +96,7 @@ const Main = memo(() => {
 
   return (
     <Flexbox align={'center'} gap={4} horizontal>
-      {!isPinned && (
-        <ActionIcon
-          aria-label={t('agents')}
-          icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
-          onClick={() => {
-            updateSystemStatus({
-              sessionsWidth: showSessionPanel ? 0 : 320,
-              showSessionPanel: !showSessionPanel,
-            });
-          }}
-          size={DESKTOP_HEADER_ICON_SIZE}
-          title={t('agents')}
-        />
-      )}
+      {!isPinned && ToggleAction}
       <Avatar
         avatar={avatar}
         background={backgroundColor}

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/index.tsx

@@ -5,7 +5,6 @@ import BrandTextLoading from '@/components/Loading/BrandTextLoading';
 
 import { LayoutProps } from '../type';
 import ChatHeader from './ChatHeader';
-import HotKeys from './HotKeys';
 import Portal from './Portal';
 import TopicPanel from './TopicPanel';
 
@@ -32,7 +31,6 @@ const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
         </Portal>
         <TopicPanel>{topic}</TopicPanel>
       </Flexbox>
-      <HotKeys />
     </>
   );
 };

package/src/app/[variants]/(main)/chat/(workspace)/features/SettingButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Tooltip } from '@lobehub/ui';
 import { AlignJustify } from 'lucide-react';
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
@@ -9,24 +9,29 @@ import { useTranslation } from 'react-i18next';
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useSessionStore } from '@/store/session';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
 
 const AgentSettings = dynamic(() => import('./AgentSettings'), {
   ssr: false,
 });
 
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.OpenChatSettings));
   const { t } = useTranslation('common');
   const openChatSettings = useOpenChatSettings();
   const id = useSessionStore((s) => s.activeId);
 
   return (
     <>
-      <ActionIcon
-        icon={AlignJustify}
-        onClick={() => openChatSettings()}
-        size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
-        title={t('header.session', { ns: 'setting' })}
-      />
+      <Tooltip hotkey={hotkey} title={t('openChatSettings.title', { ns: 'hotkey' })}>
+        <ActionIcon
+          icon={AlignJustify}
+          onClick={() => openChatSettings()}
+          size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
+        />
+      </Tooltip>
       <AgentSettings key={id} />
     </>
   );

package/src/app/[variants]/(main)/chat/@session/features/SessionSearchBar.tsx

@@ -5,9 +5,13 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
 
 const SessionSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('chat');
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.Search));
 
   const [keywords, useSearchSessions, updateSearchKeywords] = useSessionStore((s) => [
     s.sessionSearchKeywords,
@@ -26,7 +30,7 @@ const SessionSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
         updateSearchKeywords(e.target.value);
       }}
       placeholder={t('searchAgentPlaceholder')}
-      shortKey={'k'}
+      shortKey={hotkey}
       spotlight={!mobile}
       type={mobile ? 'block' : 'ghost'}
       value={keywords}

package/src/app/[variants]/(main)/chat/_layout/Desktop/RegisterHotkeys.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { useRegisterChatHotkeys } from '@/hooks/useHotkeys';
+
+const RegisterHotkeys = () => {
+  useRegisterChatHotkeys();
+  return null;
+};
+
+export default RegisterHotkeys;

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -1,8 +1,10 @@
+import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import InitClientDB from '@/features/InitClientDB';
 
 import { LayoutProps } from '../type';
+import RegisterHotkeys from './RegisterHotkeys';
 import SessionPanel from './SessionPanel';
 
 const Layout = ({ children, session }: LayoutProps) => {
@@ -23,6 +25,9 @@ const Layout = ({ children, session }: LayoutProps) => {
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}
+      <Suspense>
+        <RegisterHotkeys />
+      </Suspense>
     </>
   );
 };

package/src/app/[variants]/(main)/chat/_layout/Mobile.tsx

@@ -40,7 +40,7 @@ const Layout = memo<LayoutProps>(({ children, session }) => {
       >
         {children}
       </Flexbox>
-      <Suspense fallback={null}>
+      <Suspense>
         <InitClientDB bottom={100} />
       </Suspense>
     </>

package/src/app/[variants]/(main)/discover/features/StoreSearchBar.tsx

@@ -10,7 +10,10 @@ import urlJoin from 'url-join';
 
 import { withSuspense } from '@/components/withSuspense';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
 import { DiscoverTab } from '@/types/discover';
+import { HotkeyEnum } from '@/types/hotkey';
 
 import { useNav } from './useNav';
 
@@ -34,6 +37,7 @@ const StoreSearchBar = memo<StoreSearchBarProps>(({ mobile, onBlur, onFocus, ...
   const pathname = usePathname();
   const { activeKey } = useNav();
   const [searchKey, setSearchKey] = useQueryState('q', { clearOnDefault: true, defaultValue: '' });
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.Search));
 
   const { t } = useTranslation('discover');
   const { cx, styles } = useStyles();
@@ -69,7 +73,7 @@ const StoreSearchBar = memo<StoreSearchBarProps>(({ mobile, onBlur, onFocus, ...
       }}
       onSearch={handleSearch}
       placeholder={t('search.placeholder')}
-      shortKey={'k'}
+      shortKey={hotkey}
       spotlight={!mobile}
       style={{ width: mobile || active ? '100%' : 'min(480px,100%)' }}
       styles={{ input: { width: '100%' } }}

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { Bot, Brain, Cloudy, Info, Mic2, Settings2, Sparkles } from 'lucide-react';
+import { Bot, Brain, Cloudy, Info, KeyboardIcon, Mic2, Settings2, Sparkles } from 'lucide-react';
 import Link from 'next/link';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 
 export const useCategory = () => {
   const { t } = useTranslation('setting');
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const { enableWebrtc, showLLM, enableSTT, hideDocs } =
     useServerConfigStore(featureFlagsSelectors);
 
@@ -52,26 +53,26 @@ export const useCategory = () => {
           ),
         },
         showLLM &&
-        // TODO: Remove /llm when v2.0
-        (isDeprecatedEdition
-          ? {
-              icon: <Icon icon={Brain} />,
-              key: SettingsTabs.LLM,
-              label: (
-                <Link href={'/settings/llm'} onClick={(e) => e.preventDefault()}>
-                  {t('tab.llm')}
-                </Link>
-              ),
-            }
-          : {
-              icon: <Icon icon={Brain} />,
-              key: SettingsTabs.Provider,
-              label: (
-                <Link href={'/settings/provider'} onClick={(e) => e.preventDefault()}>
-                  {t('tab.provider')}
-                </Link>
-              ),
-            }),
+          // TODO: Remove /llm when v2.0
+          (isDeprecatedEdition
+            ? {
+                icon: <Icon icon={Brain} />,
+                key: SettingsTabs.LLM,
+                label: (
+                  <Link href={'/settings/llm'} onClick={(e) => e.preventDefault()}>
+                    {t('tab.llm')}
+                  </Link>
+                ),
+              }
+            : {
+                icon: <Icon icon={Brain} />,
+                key: SettingsTabs.Provider,
+                label: (
+                  <Link href={'/settings/provider'} onClick={(e) => e.preventDefault()}>
+                    {t('tab.provider')}
+                  </Link>
+                ),
+              }),
 
         enableSTT && {
           icon: <Icon icon={Mic2} />,
@@ -91,6 +92,15 @@ export const useCategory = () => {
             </Link>
           ),
         },
+        !mobile && {
+          icon: <Icon icon={KeyboardIcon} />,
+          key: SettingsTabs.Hotkey,
+          label: (
+            <Link href={'/settings/hotkey'} onClick={(e) => e.preventDefault()}>
+              {t('tab.hotkey')}
+            </Link>
+          ),
+        },
         !hideDocs && {
           icon: <Icon icon={Info} />,
           key: SettingsTabs.About,

package/src/app/[variants]/(main)/settings/hotkey/features/HotkeySetting.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { Form, HotkeyInput, type ItemGroup } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { HOTKEYS_REGISTRATION } from '@/const/hotkeys';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import hotkeyMeta from '@/locales/default/hotkey';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyGroupEnum, HotkeyItem } from '@/types/hotkey';
+
+type SettingItemGroup = ItemGroup;
+
+const HOTKEY_SETTING_KEY = 'hotkey';
+
+const HotkeySetting = memo(() => {
+  const { t } = useTranslation(['setting', 'hotkey']);
+  const [form] = Form.useForm();
+
+  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+  const [setSettings] = useUserStore((s) => [s.setSettings]);
+
+  const mapHotkeyItem = (item: HotkeyItem) => {
+    const hotkeyConflicts = Object.entries(settings.hotkey)
+      .map(([key, value]) => {
+        if (key === item.id) return false;
+        return value;
+      })
+      .filter(Boolean) as string[];
+    return {
+      children: (
+        <HotkeyInput
+          disabled={item.nonEditable}
+          hotkeyConflicts={hotkeyConflicts}
+          placeholder={t('hotkey.record')}
+          resetValue={item.keys}
+          texts={{
+            conflicts: t('hotkey.conflicts'),
+            invalidCombination: t('hotkey.invalidCombination'),
+            reset: t('hotkey.reset'),
+          }}
+        />
+      ),
+      desc: hotkeyMeta[item.id].desc ? t(`${item.id}.desc`, { ns: 'hotkey' }) : undefined,
+      label: t(`${item.id}.title`, { ns: 'hotkey' }),
+      name: [HOTKEY_SETTING_KEY, item.id],
+    };
+  };
+
+  const essential: SettingItemGroup = {
+    children: HOTKEYS_REGISTRATION.filter((item) => item.group === HotkeyGroupEnum.Essential).map(
+      (item) => mapHotkeyItem(item),
+    ),
+    title: t('hotkey.group.essential'),
+  };
+
+  const conversation: SettingItemGroup = {
+    children: HOTKEYS_REGISTRATION.filter(
+      (item) => item.group === HotkeyGroupEnum.Conversation,
+    ).map((item) => mapHotkeyItem(item)),
+    title: t('hotkey.group.conversation'),
+  };
+
+  return (
+    <Form
+      form={form}
+      initialValues={settings}
+      items={[essential, conversation]}
+      itemsType={'group'}
+      onValuesChange={setSettings}
+      variant={'pure'}
+      {...FORM_STYLE}
+    />
+  );
+});
+
+export default HotkeySetting;

package/src/app/[variants]/(main)/settings/hotkey/index.tsx

@@ -0,0 +1,9 @@
+import HotkeySetting from './features/HotkeySetting';
+
+const Page = () => {
+  return <HotkeySetting />;
+};
+
+Page.displayName = 'HotkeySetting';
+
+export default Page;

package/src/app/[variants]/(main)/settings/hotkey/page.tsx

@@ -0,0 +1,15 @@
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const locale = await RouteVariants.getLocale(props);
+  const { t } = await translation('setting', locale);
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('tab.hotkey'),
+    url: '/settings/hotkey',
+  });
+};
+export { default } from './index';

package/src/app/[variants]/(main)/settings/tts/features/const.tsx

@@ -4,6 +4,10 @@ import { SelectProps } from 'antd';
 import { LabelRenderer } from '@/components/ModelSelect';
 
 export const opeanaiTTSOptions: SelectProps['options'] = [
+  {
+    label: <LabelRenderer Icon={OpenAI.Avatar} label={'gpt-4o-mini-tts'} />,
+    value: 'gpt-4o-mini-tts',
+  },
   {
     label: <LabelRenderer Icon={OpenAI.Avatar} label={'tts-1'} />,
     value: 'tts-1',

package/src/app/[variants]/layout.tsx

@@ -1,6 +1,7 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { ThemeAppearance } from 'antd-style';
 import { ResolvingViewport } from 'next';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { ReactNode } from 'react';
 import { isRtlLang } from 'rtl-detect';
 
@@ -31,19 +32,21 @@ const RootLayout = async ({ children, params, modal }: RootLayoutProps) => {
   return (
     <html dir={direction} lang={locale} suppressHydrationWarning>
       <body>
-        <GlobalProvider
-          appearance={theme}
-          isMobile={isMobile}
-          locale={locale}
-          neutralColor={neutralColor}
-          primaryColor={primaryColor}
-        >
-          <AuthProvider>
-            {children}
-            {!isMobile && modal}
-          </AuthProvider>
-          <PWAInstall />
-        </GlobalProvider>
+        <NuqsAdapter>
+          <GlobalProvider
+            appearance={theme}
+            isMobile={isMobile}
+            locale={locale}
+            neutralColor={neutralColor}
+            primaryColor={primaryColor}
+          >
+            <AuthProvider>
+              {children}
+              {!isMobile && modal}
+            </AuthProvider>
+            <PWAInstall />
+          </GlobalProvider>
+        </NuqsAdapter>
         <Analytics />
         {inVercel && <SpeedInsights />}
       </body>