✨ feat: Add Settings Intercepting Routes

[canisminor1990]

💻 变更类型 | Change Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 🔨 chore
• ⚡️ perf
• 📝 docs

🔀 变更说明 | Description of Change

设置弹窗拦截路由改动说明

• PR: ✨ feat: Add Settings Intercepting Routes #2346

NextJS 文档介绍：https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

目标

• 桌面端使用 弹窗 开启设置面板全局设置和会话设置 (单页面）
• 移动端使 页面 展示 (多页面)

通用设置	角色设置

背景（目前遗留的社区问题）

• Conditionally intercept route vercel/next.js#49146

拦截路由无法受控，不能自由定义什么情况下开启拦截什么情况下关闭拦截，突破限制的方式只有通过 redirect 硬刷新

https://www.reddit.com/r/nextjs/comments/174m3xf/how_to_stop_intercepting_routes_for_some_specific/

"use server";
import { redirect } from "next/navigation";

export default async function redirectHard(uri: string) {
  redirect(uri);
}

Warning

但测试后发现在 ios 设别上响应很慢，有时候甚至无法响应

设计思路

当前的设计思路是通过路由进行受控，例如想实现 /settings 受控

• 使用弹窗拦截：/settings/modal?tab=common
• 不是用弹窗拦截：/settings/common

会话设置同理

• 使用弹窗拦截：/chat/settings/modal
• 不是用弹窗拦截：/chat/settings

文件结构示意

└── app
    ├── @modal
    │   └── (.)settings
    │       └── modal
    │           └── page.tsx  # 弹窗内容
    └── (main)
        └── settings
            └── modal
                └── page.tsx  # 拦截中如果硬刷新，Fallback 到非拦截路由

Fallback 路由示意: app/(main)/settings/modal/page.tsx

'use client';

import { useLayoutEffect } from 'react';
import urlJoin from 'url-join';

import { useQuery } from '@/hooks/useQuery';
import { useQueryRoute } from '@/hooks/useQueryRoute';
import { SettingsTabs } from '@/store/global/initialState';

/**
 * @description: Settings Modal (intercepting routes fallback when hard refresh)
 * @example: /settings/modal?tab=common => /settings/common
 */

const SettingsModalFallback = () => {
  const { tab = SettingsTabs.Common } = useQuery();
  const router = useQueryRoute();

  useLayoutEffect(() => {
    router.replace(urlJoin('/settings', tab as string), { query: { tab: '' } });
  }, []);

  return null;
};

export default SettingsModalFallback;

工具 hook

由于拦截判断条件比较复杂，包装为两个 hook 方法方便使用

打开设置面板：useOpenSettings

import { useOpenSettings } from '@/hooks/useInterceptingRoutes';

export const useOpenSettings = (tab: SettingsTabs = SettingsTabs.Common) => {
  const router = useQueryRoute();
  const mobile = useIsMobile();

  return useMemo(() => {
    if (mobile) {
      return () => router.push(urlJoin('/settings', tab));
    } else {
      // use Intercepting Routes on Desktop
      return () => router.push('/settings/modal', { query: { tab } });
    }
  }, [mobile, tab]);
};

打开角色设置面板：useOpenChatSettings

import { useOpenChatSettings} from '@/hooks/useInterceptingRoutes';

export const useOpenChatSettings = (
  isInbox?: boolean,
  tab: ChatSettingsTabs = ChatSettingsTabs.Meta,
) => {
  const globalSettings = useOpenSettings(SettingsTabs.Agent);
  const router = useQueryRoute();
  const mobile = useIsMobile();

  return useMemo(() => {
    if (isInbox) {
      useGlobalStore.setState({
        sidebarKey: SidebarTabKey.Setting,
      });
      return globalSettings;
    }
    if (mobile) {
      return () => router.push('/chat/settings');
    } else {
      // use Intercepting Routes on Desktop
      return () => router.push('/chat/settings/modal', { query: { tab } });
    }
  }, [globalSettings, mobile, isInbox, tab]);
};

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lobe-chat-community	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 4, 2024 6:09am

[lobehubbot]

👍 @canisminor1990

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.
非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。
如果您遇到任何问题，请随时与我们联系。

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.89%. Comparing base (27095f5) to head (5eb3ffd).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2346      +/-   ##
==========================================
+ Coverage   92.87%   92.89%   +0.02%     
==========================================
  Files         296      297       +1     
  Lines       16872    16928      +56     
  Branches     1948     1218     -730     
==========================================
+ Hits        15670    15726      +56     
  Misses       1202     1202              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[arvinxx]

看完了，我再测下功能

[arvinxx]

复现方式：开一个自定义助手，然后打开设置

bug.mp4

[arvinxx]

需要加间距

[arvinxx]

截图后就自动关闭了（按了回车键）：

default.mp4

[canisminor1990]

截图后就自动关闭了（按了回车键）：

这是个 antd 的 triggle 吧？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It closes automatically after taking the screenshot (press the Enter key):
Is this an antd triggle?

[canisminor1990]

[lobehubbot]

❤️ Great PR @canisminor1990 ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.
项目的成长离不开用户反馈和贡献，感谢您的贡献! 如果您对 LobeHub 开发者社区感兴趣，请加入我们的 discord，然后私信 @arvinxx 或 @canisminor1990。他们会邀请您加入我们的私密开发者频道。我们将会讨论关于 Lobe Chat 的开发，分享和讨论全球范围内的 AI 消息。

[lobehubbot]

🎉 This PR is included in version 0.153.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀