[Request] 能否实现与 NextChat 相同的参数快捷填入功能？

[bbb3n]

🥰 需求描述 | Feature Description

是什么？

NextChat( ChatGPT-Next-Web ) 原作者在其项目中，设置了一个参数快捷填入功能，但是好像并没有在Github中明说，只有用过原作者的中转站的人才会知道。

其效果如下图：

可以看出该功能可以直接快捷填入（只需要用户点个确定即可） base url 和 key 这两个最关键的参数。

要想实现这个效果，需要按照特定的格式设置访问链接，其格式为：
https://nextchat.example.com/#/?settings=%7B%22key%22:%22sk-exampleKey%22,%22url%22:%22https://api.example.com%22%7D

你们可以自己试试看。

为什么？

• 对于非 OpenAI 官方的中转站，可以不必让初学者看设置教程一步一步去设置 base url 和 key
• 在实际给客户普及 LobeChat 的过程中，就会有很多用户混淆 api.example.com 与 api.example.com/v1 这两个url的区别，会有很多用户设置为前者，导致第一次用就失败，影响用户体验。
• 一些基于 one-api 及其二改项目的中转站，在令牌界面会有快捷跳转聊天界面的功能，结合 NextChat 的快捷填入功能，使用体验很流畅。如果 LobeChat 也支持这个功能，那便是极好的了。

🧐 解决方案 | Proposed Solution

很抱歉，具体解决方案我给不出来。

📝 补充信息 | Additional Information

• LobeChat 现在做的越来越好了，个人感觉体验是远超过隔壁 NextChat 的，尤其是 NextChat 最近由于收购的问题，并没有更新插件方面的功能。（仅个人作为用户的体验感受， NextChat 依然很优秀）

• 因为我个人觉得这个功能挺好的，也有其实际应用场景（尤其是对于中转商来说）。只是希望 LobeChat 能汲取更多 NextChat 的优势功能（我个人认为这个算是）。感谢你们🙏

[lobehubbot]

👀 @B3nDan

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[lobehubbot]

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

---

🥰 Requirement Description | Feature Description

What is it?

The original author of NextChat ( ChatGPT-Next-Web ) set up a parameter quick filling function in his project, but it does not seem to be clearly stated in Github. Only people who have used the original author's transfer station will know.

The effect is as follows:

It can be seen that this function can be filled in directly and quickly (the user only needs to click OK). The two most critical parameters are base url and key.

To achieve this effect, the access link needs to be set in a specific format. The format is:
https://nextchat.example.com/#/?settings=%7B%22key%22:%22sk-exampleKey%22,%22url%22:%22https://api.example.com%22%7D

You can try it yourself.

Why?

• For non-OpenAI official transfer stations, there is no need for beginners to read the setup tutorial step by step to set the base url and key.
• In the actual process of popularizing LobeChat to customers, many users will confuse the difference between api.example.com and api.example.com/v1, and many users will set it to the former, resulting in It fails the first time it is used, affecting the user experience.
• Some transfer stations based on one-api and its second modification project will have the function of quickly jumping to the chat interface in the token interface. Combined with NextChat's quick filling function, the user experience is very smooth. It would be great if LobeChat also supported this feature.

🧐 Solution | Proposed Solution

Sorry, I can't give you a specific solution.

📝 Additional Information |

• LobeChat is doing better and better now. I personally feel that the experience is far better than that of NextChat, especially NextChat, which has not updated its plug-in functions recently due to acquisition issues. (Only my personal experience as a user, NextChat is still excellent)

• Because I personally think this function is very good and has practical application scenarios (especially for transit agents). I just hope that LobeChat can absorb more of NextChat’s advantageous features (I personally think this is the case). Thank you 🙏

[arvinxx]

感觉可以。我考虑下结合进来

[lobehubbot]

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

---

It feels OK. I'll consider combining it

[cy948]

对于这个问题，我也尝试做了实现，与NextChat不同，该实现不弹出模态框询问是否导入配置。不弹出模态框是因为多次遇到第一次使用NextChat的初学者时在导入配置的模态框中点了“取消”，导致配置导入失败。以下实现参数完全兼容NextChat。 https://github.com/cy948/lobe-chat/blob/5d40b61ad3e0eb739691235a47c163bd2ca174de/src/app/home/Redirect.tsx#L36 该实现大部分情况下能用，但小概率在用户第一次访问网站并导入时，因为App State初始化等问题会导致导入失败，此时重新访问配置URL即可解决问题。期待社区有更好的实现。

[lobehubbot]

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

---

Regarding this problem, I also tried to implement it. Unlike NextChat, this implementation does not pop up a modal box asking whether to import the configuration. The reason why the modal box does not pop up is because many times when beginners using NextChat for the first time clicked "Cancel" in the modal box of importing configuration, causing the configuration import to fail. The following implementation parameters are fully compatible with NextChat. https://github.com/cy948/lobe-chat/blob/5d40b61ad3e0eb739691235a47c163bd2ca174de/src/app/home/Redirect.tsx#L36 This implementation can be used in most cases, but there is a small chance that it will be imported when the user visits the website for the first time. Sometimes, the import may fail due to problems such as App State initialization. At this time, revisiting the configuration URL can solve the problem. Looking forward to better implementation from the community.

[cy948]

补充一个实现：

在src\layout\GlobalLayout\StoreHydration.tsx中：

  import { useSearchParams } from 'next/navigation';
  const [setConfig] = useGlobalStore((s) => [
    s.setModelProviderConfig,
  ]);
  // feat: import settings from url
  // example: https://example.com/?settings={"key":"sk-***"","url":"https://aiproxy.example.com/v1"}
  const searchParams = useSearchParams();
  const settings = searchParams.get('settings');

  useEffect(() => {
    // try to parse and set settings
    if (settings) {
      try {
        const setting = JSON.parse(settings);
        const { url, key } = setting as {
          key?: string;
          url?: string;
        };
        // set settings
        if (key) setConfig('openAI', { OPENAI_API_KEY: key });
        if (url) setConfig('openAI', { endpoint: url });
      } catch {}
    }
  }, [settings]);

👍：相比于先前的实现，这个实现能够稳定导入配置
👎：缺点是在OPENAI_API_KEY有值的情况下会被覆盖。

[YOMIkio]

补充一个实现：

在src\layout\GlobalLayout\StoreHydration.tsx中：

  import { useSearchParams } from 'next/navigation';
  const [setConfig] = useGlobalStore((s) => [
    s.setModelProviderConfig,
  ]);
  // feat: import settings from url
  // example: https://example.com/?settings={"key":"sk-***"","url":"https://aiproxy.example.com/v1"}
  const searchParams = useSearchParams();
  const settings = searchParams.get('settings');

  useEffect(() => {
    // try to parse and set settings
    if (settings) {
      try {
        const setting = JSON.parse(settings);
        const { url, key } = setting as {
          key?: string;
          url?: string;
        };
        // set settings
        if (key) setConfig('openAI', { OPENAI_API_KEY: key });
        if (url) setConfig('openAI', { endpoint: url });
      } catch {}
    }
  }, [settings]);

👍：相比于先前的实现，这个实现能够稳定导入配置 👎：缺点是在OPENAI_API_KEY有值的情况下会被覆盖。

能尝试提交一下pr吗，自己改的话完全跟不上lobechat的更新速度，一天几个版太快了

[cy948]

补充一个实现：
在src\layout\GlobalLayout\StoreHydration.tsx中：

  import { useSearchParams } from 'next/navigation';
  const [setConfig] = useGlobalStore((s) => [
    s.setModelProviderConfig,
  ]);
  // feat: import settings from url
  // example: https://example.com/?settings={"key":"sk-***"","url":"https://aiproxy.example.com/v1"}
  const searchParams = useSearchParams();
  const settings = searchParams.get('settings');

  useEffect(() => {
    // try to parse and set settings
    if (settings) {
      try {
        const setting = JSON.parse(settings);
        const { url, key } = setting as {
          key?: string;
          url?: string;
        };
        // set settings
        if (key) setConfig('openAI', { OPENAI_API_KEY: key });
        if (url) setConfig('openAI', { endpoint: url });
      } catch {}
    }
  }, [settings]);

👍：相比于先前的实现，这个实现能够稳定导入配置 👎：缺点是在OPENAI_API_KEY有值的情况下会被覆盖。

能尝试提交一下pr吗，自己改的话完全跟不上lobechat的更新速度，一天几个版太快了

上面提到的两种实现都有bug，不太能提PR，你可以在自己fork的版本上面进行修改。

[arvinxx]

@YOMIkio @cy948 我最近有空写个 RFC，感兴趣的话到时候可以根据我的思路来提 PR

[lobehubbot]

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

---

@YOMIkio @cy948 I have time to write an RFC recently. If you are interested, you can submit a PR based on my ideas.

[cy948]

@YOMIkio @cy948 我最近有空写个 RFC，感兴趣的话到时候可以根据我的思路来提 PR

好，到时候请在 RFC 中 at 我 🫡

[lobehubbot]

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

---

@YOMIkio @cy948 I have time to write an RFC recently. If you are interested, you can submit a PR based on my ideas.

OK, please at me in the RFC then 🫡

[Mrered]

同求！这个功能结合 OneAPI 使用会非常方便！

[lobehubbot]

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

---

Seeking the same! This function is very convenient to use in conjunction with OneAPI!

[fanyinghao]

给一个我的版本 8b1137e
比@cy948 的版本通用，能传入所有的config，但同时只取合法的类型，比如

{ 
  openAI: {
            OPENAI_API_KEY?: string;
            endpoint?: string;
          };
};

根据需求，增加type定义即可。

@arvinxx 可以考虑confg传入定义，去设计RFC

[lobehubbot]

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

---

give me my version
8b1137e
More versatile than @cy948's version, all configs can be passed in, but only legal types are taken, such as

{
  openAI: {
            OPENAI_API_KEY?: string;
            endpoint?: string;
          };
};

Just add the type definition according to your needs.

[cy948]

给一个我的版本 8b1137e 比@cy948 的版本通用，能传入所有的config，但同时只取合法的类型，比如

{ 
  openAI: {
            OPENAI_API_KEY?: string;
            endpoint?: string;
          };
};

根据需求，增加type定义即可。

@arvinxx 可以考虑confg传入定义，去设计RFC

🤔 这样设计不就不兼容 OneApi 的URL传入参数了么。
https://github.com/songquanpeng/one-api/blob/cf16f4497056ef6a2f2ddbe431863e3ccc57bfed/web/default/src/components/TokensTable.js#L99

[fanyinghao]

OneApi就没增减Lobe的链接，那边增加的时候加上相应参数即可在 2024年3月10日，上午12:59，cy948 ***@***.***> 写道： 给一个我的版本 8b1137e ***@***.*** 的版本通用，能传入所有的config，但同时只取合法的类型，比如 { openAI: { OPENAI_API_KEY?: string; endpoint?: string; }; }; 根据需求，增加type定义即可。 @arvinxx 可以考虑confg传入定义，去设计RFC 🤔 这样设计不就不兼容 OneApi 的URL传入参数了么。 https://github.com/songquanpeng/one-api/blob/cf16f4497056ef6a2f2ddbe431863e3ccc57bfed/web/default/src/components/TokensTable.js#L99 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[cy948]

除了url参数之外，更大的问题就是如何才能优雅地写入参数。issue里提过的两种方案都各存在问题，你有更好的方案吗？

[lobehubbot]

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

---

In addition to url parameters, the bigger problem is how to write parameters elegantly. Both solutions mentioned in the issue have their own problems. Do you have a better solution?

[arvinxx]

RFC： #1632

[lobehubbot]

✅ @bbb3n

This issue is closed, If you have any questions, you can comment and reply.
此问题已经关闭。如果您有任何问题，可以留言并回复。

[lobehubbot]

🎉 This issue has been resolved in version 0.152.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[xuzeyu91]

请问有没有可以快捷带入的例子 应该怎么拼接setting

[lobehubbot]

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

---

Is there any example that can be quickly imported? How should setting be spliced?

[arvinxx]

@xuzeyu91 看文档,https://lobehub.com/docs/self-hosting/advanced/settings-url-share