@lobehub/chat 0.118.5 → 0.118.7

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.118.7](https://github.com/lobehub/lobe-chat/compare/v0.118.6...v0.118.7)
+
+<sup>Released on **2024-01-03**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Desensitize openai base url in the error response.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Desensitize openai base url in the error response, closes [#918](https://github.com/lobehub/lobe-chat/issues/918) ([ab0aeb7](https://github.com/lobehub/lobe-chat/commit/ab0aeb7))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.118.6](https://github.com/lobehub/lobe-chat/compare/v0.118.5...v0.118.6)
+
+<sup>Released on **2024-01-03**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Migration the ChatList into Conversation.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Migration the ChatList into Conversation, closes [#916](https://github.com/lobehub/lobe-chat/issues/916) ([6ee3795](https://github.com/lobehub/lobe-chat/commit/6ee3795))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.118.5](https://github.com/lobehub/lobe-chat/compare/v0.118.4...v0.118.5)
 
 <sup>Released on **2024-01-02**</sup>

package/next.config.mjs

@@ -20,7 +20,6 @@ const withPWA = nextPWA({
 const nextConfig = {
   compress: isProd,
   experimental: {
-    forceSwcTransforms: true,
     optimizePackageImports: [
       'modern-screenshot',
       'emoji-mart',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.118.5",
+  "version": "0.118.7",
   "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/app/api/openai/chat/createChatCompletion.test.ts

@@ -73,6 +73,7 @@ describe('createChatCompletion', () => {
     expect(result).toBeInstanceOf(Response);
     expect(result.status).toBe(577); // Your custom error status code
   });
+
   it('should return an cause response when OpenAI.APIError is thrown with cause', async () => {
     // Arrange
     const errorInfo = {
@@ -101,6 +102,42 @@ describe('createChatCompletion', () => {
 
     const content = await result.json();
     expect(content.body).toHaveProperty('endpoint');
+    expect(content.body.endpoint).toEqual('https://api.openai.com/v1');
+    expect(content.body.error).toEqual(errorInfo);
+  });
+
+  it('should return an cause response with desensitize Url', async () => {
+    // Arrange
+    const errorInfo = {
+      stack: 'abc',
+      cause: { message: 'api is undefined' },
+    };
+    const apiError = new OpenAI.APIError(400, errorInfo, 'module error', {});
+
+    openaiInstance = new OpenAI({
+      apiKey: 'test',
+      dangerouslyAllowBrowser: true,
+      baseURL: 'https://api.abc.com/v1',
+    });
+
+    vi.spyOn(openaiInstance.chat.completions, 'create').mockRejectedValue(apiError);
+
+    // Act
+    const result = await createChatCompletion({
+      openai: openaiInstance,
+      payload: {
+        messages: [{ content: 'Hello', role: 'user' }],
+        model: 'gpt-3.5-turbo',
+        temperature: 0,
+      },
+    });
+
+    // Assert
+    expect(result).toBeInstanceOf(Response);
+    expect(result.status).toBe(577); // Your custom error status code
+
+    const content = await result.json();
+    expect(content.body.endpoint).toEqual('https://api.***.com/v1');
     expect(content.body.error).toEqual(errorInfo);
   });
 

package/src/app/api/openai/chat/createChatCompletion.ts

@@ -5,6 +5,7 @@ import { ChatErrorType } from '@/types/fetch';
 import { OpenAIChatStreamPayload } from '@/types/openai/chat';
 
 import { createErrorResponse } from '../errorResponse';
+import { desensitizeUrl } from './desensitizeUrl';
 
 interface CreateChatCompletionOptions {
   openai: OpenAI;
@@ -29,6 +30,13 @@ export const createChatCompletion = async ({ payload, openai }: CreateChatComple
     const stream = OpenAIStream(response);
     return new StreamingTextResponse(stream);
   } catch (error) {
+    let desensitizedEndpoint = openai.baseURL;
+
+    // refs: https://github.com/lobehub/lobe-chat/issues/842
+    if (openai.baseURL !== 'https://api.openai.com/v1') {
+      desensitizedEndpoint = desensitizeUrl(openai.baseURL);
+    }
+
     // Check if the error is an OpenAI APIError
     if (error instanceof OpenAI.APIError) {
       let errorResult: any;
@@ -51,7 +59,7 @@ export const createChatCompletion = async ({ payload, openai }: CreateChatComple
       console.error(errorResult);
 
       return createErrorResponse(ChatErrorType.OpenAIBizError, {
-        endpoint: openai.baseURL,
+        endpoint: desensitizedEndpoint,
         error: errorResult,
       });
     }
@@ -61,7 +69,7 @@ export const createChatCompletion = async ({ payload, openai }: CreateChatComple
 
     // return as a GatewayTimeout error
     return createErrorResponse(ChatErrorType.InternalServerError, {
-      endpoint: openai.baseURL,
+      endpoint: desensitizedEndpoint,
       error: JSON.stringify(error),
     });
   }

package/src/app/api/openai/chat/desensitizeUrl.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+
+import { desensitizeUrl } from './desensitizeUrl';
+
+describe('desensitizeUrl', () => {
+  it('should desensitize a URL with a subdomain', () => {
+    const originalUrl = 'https://api.example.com/v1';
+    const result = desensitizeUrl(originalUrl);
+    expect(result).toBe('https://api.ex****le.com/v1');
+  });
+
+  it('should desensitize a URL without a subdomain', () => {
+    const originalUrl = 'https://example.com/v1';
+    const result = desensitizeUrl(originalUrl);
+    expect(result).toBe('https://ex****le.com/v1');
+  });
+
+  it('should desensitize a URL without a subdomain less then 5 chartarters', () => {
+    const originalUrl = 'https://abc.com/v1';
+    const result = desensitizeUrl(originalUrl);
+    expect(result).toBe('https://***.com/v1');
+  });
+
+  it('should desensitize a URL with multiple subdomains', () => {
+    const originalUrl = 'https://sub.api.example.com/v1';
+    const result = desensitizeUrl(originalUrl);
+    expect(result).toBe('https://sub.api.ex****le.com/v1');
+  });
+
+  it('should desensitize a URL with path and query parameters', () => {
+    const originalUrl = 'https://api.example.com/v1?query=123';
+    const result = desensitizeUrl(originalUrl);
+    expect(result).toBe('https://api.ex****le.com/v1?query=123');
+  });
+
+  it('should return the original URL if it is invalid', () => {
+    const originalUrl = 'invalidurl';
+    const result = desensitizeUrl(originalUrl);
+    expect(result).toBe(originalUrl);
+  });
+
+  it('should desensitize a URL with a port number', () => {
+    const originalUrl = 'https://api.example.com:8080/v1';
+    const result = desensitizeUrl(originalUrl);
+    expect(result).toBe('https://api.ex****le.com:****/v1');
+  });
+});

package/src/app/api/openai/chat/desensitizeUrl.ts

@@ -0,0 +1,34 @@
+export const desensitizeUrl = (url: string) => {
+  try {
+    const urlObj = new URL(url);
+    const hostnameParts = urlObj.hostname.split('.');
+    const port = urlObj.port;
+
+    // Desensitize domain only if there are at least two parts (example.com)
+    if (hostnameParts.length > 1) {
+      // Desensitize the second level domain (second part from the right)
+      // Special case for short domain names
+      const secondLevelDomainIndex = hostnameParts.length - 2;
+      if (hostnameParts[secondLevelDomainIndex].length < 5) {
+        hostnameParts[secondLevelDomainIndex] = '***';
+      } else {
+        hostnameParts[secondLevelDomainIndex] = hostnameParts[secondLevelDomainIndex].replace(
+          /^(.*?)(\w{2})(\w+)(\w{2})$/,
+          (_, prefix, start, middle, end) => `${prefix}${start}****${end}`,
+        );
+      }
+    }
+
+    // Join the hostname parts back together
+    const desensitizedHostname = hostnameParts.join('.');
+
+    // Desensitize port if present
+    const desensitizedPort = port ? ':****' : '';
+
+    // Reconstruct the URL with the desensitized parts
+    return `${urlObj.protocol}//${desensitizedHostname}${desensitizedPort}${urlObj.pathname}${urlObj.search}`;
+  } catch {
+    // If the URL is invalid, return the original URL
+    return url;
+  }
+};

package/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
-import ChatList from '@/features/Conversation/ChatList';
+import ChatList from '@/features/Conversation/container';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Assistant.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Error.tsx

@@ -1,7 +1,9 @@
-import { ActionIconGroup, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { ActionsBarProps } from '@lobehub/ui/es/ChatList/ActionsBar';
 import { memo } from 'react';
 
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const ErrorActionsBar = memo<ActionsBarProps>(({ text, onActionClick }) => {
   const { regenerate, del } = useChatListActionsBar(text);
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Fallback.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const DefaultActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { del } = useChatListActionsBar(text);
   return (

package/src/features/Conversation/{ChatList/Actions → Actions}/Function.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const FunctionActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { regenerate, divider, del } = useChatListActionsBar(text);
   return (

package/src/features/Conversation/{ChatList/Actions → Actions}/User.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { useCustomActions } from './customAction';
 
 export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {

package/src/features/Conversation/{ChatList/Actions → Actions}/index.ts

@@ -1,7 +1,6 @@
-import { ChatListProps } from '@lobehub/ui';
-
 import { useChatStore } from '@/store/chat';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { FunctionActionsBar } from './Function';

package/src/features/Conversation/{ChatList/Error → Error}/InvalidAccess.tsx

@@ -1,4 +1,4 @@
-import { Icon, RenderErrorMessage } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { Button, Input, Segmented } from 'antd';
 import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -8,6 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
 

package/src/features/Conversation/{ChatList/Error → Error}/OpenAPIKey.tsx

@@ -1,6 +1,6 @@
-import { RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer } from './style';
 

package/src/features/Conversation/{ChatList/Error → Error}/OpenAiBizError.tsx

@@ -1,7 +1,8 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import OpenAPIKey from './OpenAPIKey';
 
 interface OpenAIError {

package/src/features/Conversation/{ChatList/Error → Error}/Plugin/PluginError.tsx

@@ -1,7 +1,9 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../../components/ChatList';
+
 interface OpenAIError {
   code: 'invalid_api_key' | string;
   message: string;

package/src/features/Conversation/{ChatList/Error → Error}/Plugin/PluginSettings.tsx

@@ -1,4 +1,4 @@
-import { Avatar, RenderErrorMessage } from '@lobehub/ui';
+import { Avatar } from '@lobehub/ui';
 import { Button, Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -11,6 +11,7 @@ import { useChatStore } from '@/store/chat';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
+import { RenderErrorMessage } from '../../components/ChatList';
 import { ErrorActionContainer, useStyles } from '../style';
 
 const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {

package/src/features/Conversation/{ChatList/Error → Error}/index.tsx

@@ -1,8 +1,8 @@
 import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
-import { ChatListProps } from '@lobehub/ui';
 
 import { ChatErrorType } from '@/types/fetch';
 
+import { ChatListProps } from '../components/ChatList';
 import InvalidAccess from './InvalidAccess';
 import OpenAPIKey from './OpenAPIKey';
 import OpenAiBizError from './OpenAiBizError';

package/src/features/Conversation/{ChatList/Extras → Extras}/Translate.tsx

@@ -10,7 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { ChatTranslate } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 const useStyles = createStyles(({ stylish }) => ({
   markdown: stylish.markdownInChat,

package/src/features/Conversation/{ChatList/Extras → Extras}/index.ts

@@ -1,5 +1,4 @@
-import { ChatListProps, RenderMessageExtra } from '@lobehub/ui';
-
+import { ChatListProps, RenderMessageExtra } from '../components/ChatList';
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 

package/src/features/Conversation/{ChatList/Messages → Messages}/Default.tsx

@@ -3,7 +3,7 @@ import { ReactNode, memo } from 'react';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const DefaultMessage = memo<
   ChatMessage & {

package/src/features/Conversation/{ChatList/Messages → Messages}/User.tsx

@@ -5,7 +5,7 @@ import FileList from '@/components/FileList';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const UserMessage = memo<
   ChatMessage & {

package/src/features/Conversation/{ChatList/Messages → Messages}/index.ts

@@ -1,4 +1,3 @@
-import { ChatListProps } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 
@@ -7,16 +6,17 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
-  assistant: AssistantMessage as any,
-  default: DefaultMessage as any,
-  function: FunctionMessage as any,
-  user: UserMessage as any,
+  assistant: AssistantMessage,
+  default: DefaultMessage,
+  function: FunctionMessage,
+  user: UserMessage,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {

package/src/features/Conversation/{ChatList/Plugins → Plugins}/Render/Loading.tsx

@@ -1,11 +1,10 @@
-import {createStyles} from 'antd-style';
-import {useTranslation} from 'react-i18next';
-import {Flexbox} from 'react-layout-kit';
-import {memo} from "react";
-
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(
-  ({css, token}) => css`
+  ({ css, token }) => css`
     position: relative;
 
     overflow: hidden;
@@ -46,16 +45,16 @@ const useStyles = createStyles(
     }
   `,
 );
- const Loading = memo(() => {
-  const {t} = useTranslation('plugin');
-  const {styles} = useStyles();
+const Loading = memo(() => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
 
   return (
     <Flexbox align={'center'} gap={8} padding={16}>
-      <span className={styles}/>
+      <span className={styles} />
       {t('loading.content')}
     </Flexbox>
   );
 });
 
-export default Loading
+export default Loading;

package/src/features/Conversation/components/ChatList/ActionsBar.tsx

@@ -0,0 +1,27 @@
+import { ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+
+export interface ActionsBarProps extends ActionIconGroupProps {
+  text?: {
+    copy?: string;
+    delete?: string;
+    edit?: string;
+    regenerate?: string;
+  };
+}
+
+const ActionsBar = memo<ActionsBarProps>(({ text, ...rest }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, edit]}
+      type="ghost"
+      {...rest}
+    />
+  );
+});
+
+export default ActionsBar;

package/src/features/Conversation/components/ChatList/HistoryDivider.tsx

@@ -0,0 +1,23 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { Timer } from 'lucide-react';
+import { memo } from 'react';
+
+interface HistoryDividerProps {
+  enable?: boolean;
+  text?: string;
+}
+
+const HistoryDivider = memo<HistoryDividerProps>(({ enable, text }) => {
+  if (!enable) return null;
+
+  return (
+    <div style={{ padding: '0 20px' }}>
+      <Divider>
+        <Tag icon={<Icon icon={Timer} />}>{text || 'History Message'}</Tag>
+      </Divider>
+    </div>
+  );
+});
+
+export default HistoryDivider;