@lobehub/chat 0.151.11 → 0.152.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.152.0](https://github.com/lobehub/lobe-chat/compare/v0.151.11...v0.152.0)
+
+<sup>Released on **2024-04-30**</sup>
+
+#### ✨ Features
+
+- **misc**: Import settings from url.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Import settings from url, closes [#2226](https://github.com/lobehub/lobe-chat/issues/2226) ([b1f6c20](https://github.com/lobehub/lobe-chat/commit/b1f6c20))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.151.11](https://github.com/lobehub/lobe-chat/compare/v0.151.10...v0.151.11)
 
 <sup>Released on **2024-04-30**</sup>

package/README.md

@@ -261,14 +261,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 <!-- AGENT LIST -->
 
-| Recent Submits                                                                                                                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Jailbreak Assistant DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>         | Bypass OpenAI review mechanism, ChatGPT after jailbreak<br/>`creative` `artificial-intelligence` `conversation` `jailbreak`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                          | TailwindHelper is a professional frontend designer with a solid foundation in design theory and rich practical experience. Created by a leading software development company, it aims to help developers and designers accelerate the development process of web interfaces. TailwindHelper is proficient in the Tailwind CSS framework and can translate complex design requirements into efficient and responsive CSS class names.<br/>`tailwindcss` `css` `tailwind-helper`                                                                                                   |
-| [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup>         | Specializes in converting JSON schema to TypeScript types.<br/>`typescript` `development`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| [Chinese Academic Paper Editor](https://chat-preview.lobehub.com/market?agent=chinese-paper-polishing)<br/><sup>By **[y22emc2](https://github.com/y22emc2)** on **2024-04-15**</sup> | As an assistant for improving Chinese academic paper writing, your task is to enhance the provided text in terms of spelling, grammar, clarity, conciseness, and overall readability, to improve the text's academic standards and literary quality. This includes breaking down long sentences, reducing repetition, and providing improvement suggestions. Please provide the corrected version of the text first, then list the modifications in the markdown table below, along with the reasons for the changes.<br/>`academic-paper-writing` `proofreading` `text-editing` |
-
-> 📊 Total agents: [<kbd>**243**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| Recent Submits                                                                                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Sales Description Specialist](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup> | Assists in the sale of used items through research, pricing, description, and title creation.<br/>`product-sales` `research` `description`                                                                                                                                                                                                                                                                                                                                     |
+| [Jailbreak Assistant DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>        | Bypass OpenAI review mechanism, ChatGPT after jailbreak<br/>`creative` `artificial-intelligence` `conversation` `jailbreak`                                                                                                                                                                                                                                                                                                                                                    |
+| [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                         | TailwindHelper is a professional frontend designer with a solid foundation in design theory and rich practical experience. Created by a leading software development company, it aims to help developers and designers accelerate the development process of web interfaces. TailwindHelper is proficient in the Tailwind CSS framework and can translate complex design requirements into efficient and responsive CSS class names.<br/>`tailwindcss` `css` `tailwind-helper` |
+| [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup>        | Specializes in converting JSON schema to TypeScript types.<br/>`typescript` `development`                                                                                                                                                                                                                                                                                                                                                                                      |
+
+> 📊 Total agents: [<kbd>**244**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -251,12 +251,12 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 | 最近新增                                                                                                                                                                     | 助手说明                                                                                                                                                                                                                                                                                                 |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [销售描述专家](https://chat-preview.lobehub.com/market?agent=verkauf-kleinanzeigen)<br/><sup>By **[highseen](https://github.com/highseen)** on **2024-04-30**</sup>          | 通过研究、定价、描述和标题设计帮助销售二手物品。<br/>`产品销售` `研究` `描述`                                                                                                                                                                                                                            |
 | [越狱助手 DAN](https://chat-preview.lobehub.com/market?agent=gpt-4-dan-assistant)<br/><sup>By **[MapleEve](https://github.com/MapleEve)** on **2024-04-26**</sup>            | 突破 OpenAI 审核机制，越狱之后的 ChatGPT<br/>`创意` `人工智能` `对话` `越狱`                                                                                                                                                                                                                             |
 | [TailwindHelper](https://chat-preview.lobehub.com/market?agent=tailwind-helper)<br/><sup>By **[aototo](https://github.com/aototo)** on **2024-04-26**</sup>                  | TailwindHelper 是一位专业的前端设计师，拥有深厚的设计理论基础和丰富的实践经验。它由一家领先的软件开发公司创建，旨在帮助开发者和设计师加速 Web 界面的开发过程。TailwindHelper 精通 Tailwind CSS 框架，并能够理解复杂的设计要求，转化为高效且响应式的 CSS 类名。<br/>`tailwindcss` `css` `tailwind-helper` |
 | [yapi JSON-SCHEMA to Typescript](https://chat-preview.lobehub.com/market?agent=yapi-ts-helper)<br/><sup>By **[zcf0508](https://github.com/zcf0508)** on **2024-04-26**</sup> | 擅长将 JSON schema 转换为 TypeScript 类型。<br/>`typescript` `开发`                                                                                                                                                                                                                                      |
-| [中文论文编辑师](https://chat-preview.lobehub.com/market?agent=chinese-paper-polishing)<br/><sup>By **[y22emc2](https://github.com/y22emc2)** on **2024-04-15**</sup>        | 作为一名中文学术论文写作改进助理，你的任务是改进所提供文本的拼写、语法、清晰、简洁和整体可读性，提高文本的学术规范性、文学性，同时分解长句，减少重复，并提供改进建议。请先提供文本的更正版本，然后在 markdown 表格中列出修改的内容，并给出修改的理由。<br/>`学术论文写作` `校对` `文本编辑`              |
 
-> 📊 Total agents: [<kbd>**243**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+> 📊 Total agents: [<kbd>**244**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.151.11",
+  "version": "0.152.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/const/url.ts

@@ -43,6 +43,7 @@ export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean
 
 export const imageUrl = (filename: string) => withBasePath(`/images/${filename}`);
 
+export const LOBE_URL_IMPORT_NAME = 'settings';
 export const EMAIL_SUPPORT = 'support@lobehub.com';
 export const EMAIL_BUSINESS = 'hello@lobehub.com';
 

package/src/hooks/useImportConfig.ts

@@ -1,13 +1,16 @@
 import { useMemo } from 'react';
 
 import { ImportResults, configService } from '@/services/config';
+import { shareService } from '@/services/share';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
+import { useUserStore } from '@/store/user';
 import { importConfigFile } from '@/utils/config';
 
 export const useImportConfig = () => {
   const refreshSessions = useSessionStore((s) => s.refreshSessions);
   const [refreshMessages, refreshTopics] = useChatStore((s) => [s.refreshMessages, s.refreshTopic]);
+  const [setSettings] = useUserStore((s) => [s.setSettings]);
 
   const importConfig = async (file: File) =>
     new Promise<ImportResults | undefined>((resolve) => {
@@ -22,5 +25,21 @@ export const useImportConfig = () => {
       });
     });
 
-  return useMemo(() => ({ importConfig }), []);
+  /**
+   * Import settings from a string in json format
+   * @param settingsParams
+   * @returns
+   */
+  const importSettings = (settingsParams: string | null) => {
+    if (settingsParams) {
+      const importSettings = shareService.decodeShareSettings(settingsParams);
+      if (importSettings?.message || !importSettings?.data) {
+        // handle some error
+        return;
+      }
+      setSettings(importSettings.data);
+    }
+  };
+
+  return useMemo(() => ({ importConfig, importSettings }), []);
 };

package/src/layout/GlobalProvider/StoreInitialization.tsx

@@ -1,9 +1,11 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { LOBE_URL_IMPORT_NAME } from '@/const/url';
+import { useImportConfig } from '@/hooks/useImportConfig';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useEnabledDataSync } from '@/hooks/useSyncData';
 import { useAgentStore } from '@/store/agent';
@@ -38,6 +40,13 @@ const StoreInitialization = memo(() => {
   useStoreUpdater('isMobile', mobile);
   useStoreUpdater('router', router);
 
+  // Import settings from the url
+  const { importSettings } = useImportConfig();
+  const searchParam = useSearchParams().get(LOBE_URL_IMPORT_NAME);
+  useEffect(() => {
+    importSettings(searchParam);
+  }, [searchParam]);
+
   useEffect(() => {
     router.prefetch('/chat');
     router.prefetch('/chat/settings');

package/src/services/__tests__/share.test.ts

@@ -1,9 +1,12 @@
+import { DeepPartial } from 'utility-types';
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { LOBE_URL_IMPORT_NAME } from '@/const/url';
+import { GlobalSettings } from '@/types/settings';
 import { ShareGPTConversation } from '@/types/share';
 import { parseMarkdown } from '@/utils/parseMarkdown';
 
-import { SHARE_GPT_URL, shareGPTService } from '../share';
+import { SHARE_GPT_URL, shareService } from '../share';
 
 // Mock dependencies
 vi.mock('@/utils/parseMarkdown', () => ({
@@ -32,7 +35,7 @@ describe('ShareGPTService', () => {
     });
 
     // Act
-    const url = await shareGPTService.createShareGPTUrl(conversation);
+    const url = await shareService.createShareGPTUrl(conversation);
 
     // Assert
     expect(parseMarkdown).toHaveBeenCalledWith('Hi there!');
@@ -48,7 +51,7 @@ describe('ShareGPTService', () => {
     (fetch as Mock).mockRejectedValue(new Error('Network error'));
 
     // Act & Assert
-    await expect(shareGPTService.createShareGPTUrl(conversation)).rejects.toThrow('Network error');
+    await expect(shareService.createShareGPTUrl(conversation)).rejects.toThrow('Network error');
   });
 
   it('should not parse markdown for items not from gpt', async () => {
@@ -65,7 +68,7 @@ describe('ShareGPTService', () => {
     });
 
     // Act
-    await shareGPTService.createShareGPTUrl(conversation);
+    await shareService.createShareGPTUrl(conversation);
 
     // Assert
     expect(parseMarkdown).not.toHaveBeenCalled();
@@ -81,6 +84,48 @@ describe('ShareGPTService', () => {
     });
 
     // Act & Assert
-    await expect(shareGPTService.createShareGPTUrl(conversation)).rejects.toThrow();
+    await expect(shareService.createShareGPTUrl(conversation)).rejects.toThrow();
+  });
+});
+
+describe('ShareViaUrl', () => {
+  describe('createShareSettingsUrl', () => {
+    it('should create a share settings URL with the provided settings', () => {
+      const settings: DeepPartial<GlobalSettings> = {
+        languageModel: {
+          openai: {
+            apiKey: 'user-key',
+          },
+        },
+      };
+      const url = shareService.createShareSettingsUrl(settings);
+      expect(url).toBe(
+        `/?${LOBE_URL_IMPORT_NAME}=%7B%22languageModel%22:%7B%22openai%22:%7B%22apiKey%22:%22user-key%22%7D%7D%7D`,
+      );
+    });
+  });
+
+  describe('decodeShareSettings', () => {
+    it('should decode share settings from search params', () => {
+      const settings = '{"languageModel":{"openai":{"apiKey":"user-key"}}}';
+      const decodedSettings = shareService.decodeShareSettings(settings);
+      expect(decodedSettings).toEqual({
+        data: {
+          languageModel: {
+            openai: {
+              apiKey: 'user-key',
+            },
+          },
+        },
+      });
+    });
+
+    it('should return an error message if decoding fails', () => {
+      const settings = '%7B%22theme%22%3A%22dark%22%2C%22fontSize%22%3A16%';
+      const decodedSettings = shareService.decodeShareSettings(settings);
+      expect(decodedSettings).toEqual({
+        message: expect.any(String),
+      });
+    });
   });
 });

package/src/services/share.ts

@@ -1,9 +1,14 @@
+import { DeepPartial } from 'utility-types';
+
+import { LOBE_URL_IMPORT_NAME } from '@/const/url';
+import { GlobalSettings } from '@/types/settings';
 import { ShareGPTConversation } from '@/types/share';
+import { withBasePath } from '@/utils/basePath';
 import { parseMarkdown } from '@/utils/parseMarkdown';
 
 export const SHARE_GPT_URL = 'https://sharegpt.com/api/conversations';
 
-class ShareGPTService {
+class ShareService {
   public async createShareGPTUrl(conversation: ShareGPTConversation) {
     const items = [];
 
@@ -29,6 +34,28 @@ class ShareGPTService {
     // short link to the ShareGPT post
     return `https://shareg.pt/${id}`;
   }
+
+  /**
+   * Creates a share settings URL with the provided settings.
+   * @param settings - The settings object to be encoded in the URL.
+   * @returns The share settings URL.
+   */
+  public createShareSettingsUrl(settings: DeepPartial<GlobalSettings>) {
+    return withBasePath(`/?${LOBE_URL_IMPORT_NAME}=${encodeURI(JSON.stringify(settings))}`);
+  }
+
+  /**
+   * Decode share settings from search params
+   * @param settings
+   * @returns
+   */
+  public decodeShareSettings(settings: string) {
+    try {
+      return { data: JSON.parse(settings) as DeepPartial<GlobalSettings> };
+    } catch (e) {
+      return { message: JSON.stringify(e) };
+    }
+  }
 }
 
-export const shareGPTService = new ShareGPTService();
+export const shareService = new ShareService();

package/src/store/chat/slices/share/action.test.ts

@@ -1,18 +1,16 @@
 import { act, renderHook } from '@testing-library/react';
 
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
-import { shareGPTService } from '@/services/share';
+import { shareService } from '@/services/share';
 import { useChatStore } from '@/store/chat';
 import { ChatMessage } from '@/types/message';
 
 describe('shareSlice actions', () => {
-  let shareGPTServiceSpy: any;
+  let shareServiceSpy: any;
   let windowOpenSpy;
 
   beforeEach(() => {
-    shareGPTServiceSpy = vi
-      .spyOn(shareGPTService, 'createShareGPTUrl')
-      .mockResolvedValue('test-url');
+    shareServiceSpy = vi.spyOn(shareService, 'createShareGPTUrl').mockResolvedValue('test-url');
     windowOpenSpy = vi.spyOn(window, 'open');
   });
 
@@ -23,7 +21,7 @@ describe('shareSlice actions', () => {
   describe('shareToShareGPT', () => {
     it('should share to ShareGPT and open a new window', async () => {
       const { result } = renderHook(() => useChatStore());
-      const shareGPTServiceSpy = vi.spyOn(shareGPTService, 'createShareGPTUrl');
+      const shareServiceSpy = vi.spyOn(shareService, 'createShareGPTUrl');
       const windowOpenSpy = vi.spyOn(window, 'open');
       const avatar = 'avatar-url';
       const withPluginInfo = true;
@@ -33,7 +31,7 @@ describe('shareSlice actions', () => {
         await result.current.shareToShareGPT({ avatar, withPluginInfo, withSystemRole });
       });
 
-      expect(shareGPTServiceSpy).toHaveBeenCalled();
+      expect(shareServiceSpy).toHaveBeenCalled();
       expect(windowOpenSpy).toHaveBeenCalled();
     });
     it('should handle messages from different roles correctly', async () => {
@@ -67,7 +65,7 @@ describe('shareSlice actions', () => {
         await result.current.shareToShareGPT({});
       });
 
-      expect(shareGPTServiceSpy).toHaveBeenCalledWith(
+      expect(shareServiceSpy).toHaveBeenCalledWith(
         expect.objectContaining({
           avatarUrl: DEFAULT_USER_AVATAR_URL,
         }),
@@ -106,7 +104,7 @@ describe('shareSlice actions', () => {
       await act(async () => {
         result.current.shareToShareGPT({ withPluginInfo: true });
       });
-      expect(shareGPTServiceSpy).toHaveBeenCalledWith(
+      expect(shareServiceSpy).toHaveBeenCalledWith(
         expect.objectContaining({
           items: expect.arrayContaining([
             expect.objectContaining({
@@ -139,7 +137,7 @@ describe('shareSlice actions', () => {
       await act(async () => {
         result.current.shareToShareGPT({ withPluginInfo: false });
       });
-      expect(shareGPTServiceSpy).toHaveBeenCalledWith(
+      expect(shareServiceSpy).toHaveBeenCalledWith(
         expect.objectContaining({
           items: expect.not.arrayContaining([
             expect.objectContaining({
@@ -180,7 +178,7 @@ describe('shareSlice actions', () => {
         });
       });
 
-      expect(shareGPTServiceSpy).toHaveBeenCalledWith(
+      expect(shareServiceSpy).toHaveBeenCalledWith(
         expect.objectContaining({
           items: [
             expect.objectContaining({ from: 'gpt' }), // Agent meta info

package/src/store/chat/slices/share/action.ts

@@ -3,7 +3,7 @@ import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
-import { shareGPTService } from '@/services/share';
+import { shareService } from '@/services/share';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
@@ -104,7 +104,7 @@ export const chatShare: StateCreator<ChatStore, [['zustand/devtools', never]], [
 
     set({ shareLoading: true });
 
-    const res = await shareGPTService.createShareGPTUrl({
+    const res = await shareService.createShareGPTUrl({
       avatarUrl: avatar || DEFAULT_USER_AVATAR_URL,
       items: shareMsgs,
     });