@lobehub/chat 0.100.5 → 0.101.1

package/src/app/market/features/AgentSearchBar/index.tsx

@@ -1,22 +1,27 @@
 import { SearchBar } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import { memo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useMarketStore } from '@/store/market';
 
 const AgentSearchBar = memo(() => {
   const { t } = useTranslation('market');
-  const keywords = useMarketStore((s) => s.searchKeywords);
+  const [keywords, setKeywords] = useMarketStore((s) => [s.searchKeywords, s.setSearchKeywords]);
   const [value, setValue] = useState(keywords);
   const { mobile } = useResponsive();
+
+  const handleSearch = useCallback(() => {
+    setKeywords(value);
+  }, [value, setKeywords]);
+
   return (
     <SearchBar
       allowClear
       enableShortKey={!mobile}
       onChange={(e) => setValue(e.target.value)}
-      onPressEnter={() => useMarketStore.setState({ searchKeywords: value })}
-      onSubmit={() => useMarketStore.setState({ searchKeywords: value })}
+      onPressEnter={handleSearch}
+      onSubmit={handleSearch}
       placeholder={t('search.placeholder')}
       shortKey={'k'}
       spotlight={!mobile}

package/src/app/market/features/TagList/Inner.tsx

@@ -0,0 +1,28 @@
+import { Button } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { startCase } from 'lodash-es';
+import { memo } from 'react';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+const Inner = memo(() => {
+  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
+  const [keywords, setSearchKeywords] = useMarketStore((s) => [
+    s.searchKeywords,
+    s.setSearchKeywords,
+  ]);
+
+  return agentTagList.map((item) => (
+    <Button
+      key={item}
+      onClick={() => setSearchKeywords(item)}
+      shape={'round'}
+      size={'small'}
+      type={keywords === item ? 'primary' : 'default'}
+    >
+      {startCase(item)}
+    </Button>
+  ));
+});
+
+export default Inner;

package/src/app/market/features/TagList/index.tsx

@@ -1,32 +1,21 @@
-import { Button, Skeleton } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { startCase } from 'lodash-es';
-import { memo } from 'react';
+import { Skeleton } from 'antd';
+import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import Inner from '@/app/market/features/TagList/Inner';
 
 const TagList = memo(() => {
-  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
-  const keywords = useMarketStore((s) => s.searchKeywords);
-
   return (
     <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-      {agentTagList?.length > 0
-        ? agentTagList.map((item) => (
-            <Button
-              key={item}
-              onClick={() => useMarketStore.setState({ searchKeywords: item })}
-              shape={'round'}
-              size={'small'}
-              type={keywords === item ? 'primary' : 'default'}
-            >
-              {startCase(item)}
-            </Button>
-          ))
-        : Array.from({ length: 5 })
-            .fill('')
-            .map((_, index) => <Skeleton.Button key={index} shape={'round'} size={'small'} />)}
+      <Suspense
+        fallback={Array.from({ length: 5 })
+          .fill('')
+          .map((_, index) => (
+            <Skeleton.Button key={index} shape={'round'} size={'small'} />
+          ))}
+      >
+        <Inner />
+      </Suspense>
     </Flexbox>
   );
 });

package/src/config/__tests__/client.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { getClientConfig } from '../client';
+
+// 测试前重置 process.env
+vi.stubGlobal('process', {
+  ...process, // 保持原有的 process 对象
+  env: { ...process.env }, // 克隆环境变量对象，以便修改
+});
+
+describe('getClientConfig', () => {
+  it('should return default URLs when no environment variables are set', () => {
+    const config = getClientConfig();
+    expect(config.AGENTS_INDEX_URL).toBe('https://chat-agents.lobehub.com');
+    expect(config.PLUGINS_INDEX_URL).toBe('https://chat-plugins.lobehub.com');
+  });
+
+  it('should return custom URLs when environment variables are set', () => {
+    process.env.AGENTS_INDEX_URL = 'https://custom-agents-url.com';
+    process.env.PLUGINS_INDEX_URL = 'https://custom-plugins-url.com';
+    const config = getClientConfig();
+    expect(config.AGENTS_INDEX_URL).toBe('https://custom-agents-url.com');
+    expect(config.PLUGINS_INDEX_URL).toBe('https://custom-plugins-url.com');
+  });
+
+  it('should return default URLs when environment variables are empty string', () => {
+    process.env.AGENTS_INDEX_URL = '';
+    process.env.PLUGINS_INDEX_URL = '';
+
+    const config = getClientConfig();
+    expect(config.AGENTS_INDEX_URL).toBe('https://chat-agents.lobehub.com');
+    expect(config.PLUGINS_INDEX_URL).toBe('https://chat-plugins.lobehub.com');
+  });
+
+  it('should correctly reflect boolean values for analytics flags', () => {
+    process.env.NEXT_PUBLIC_ANALYTICS_VERCEL = '1';
+    process.env.NEXT_PUBLIC_VERCEL_DEBUG = '1';
+    process.env.NEXT_PUBLIC_ANALYTICS_PLAUSIBLE = '1';
+    process.env.NEXT_PUBLIC_ANALYTICS_POSTHOG = '1';
+    process.env.NEXT_PUBLIC_POSTHOG_DEBUG = '1';
+    process.env.NEXT_PUBLIC_I18N_DEBUG = '1';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER = '1';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER = '1';
+
+    const config = getClientConfig();
+    expect(config.ANALYTICS_VERCEL).toBe(true);
+    expect(config.VERCEL_DEBUG).toBe(true);
+    expect(config.ANALYTICS_PLAUSIBLE).toBe(true);
+    expect(config.ANALYTICS_POSTHOG).toBe(true);
+    expect(config.POSTHOG_DEBUG).toBe(true);
+    expect(config.I18N_DEBUG).toBe(true);
+    expect(config.I18N_DEBUG_BROWSER).toBe(true);
+    expect(config.I18N_DEBUG_SERVER).toBe(true);
+  });
+
+  it('should correctly handle falsy values for analytics flags', () => {
+    process.env.NEXT_PUBLIC_ANALYTICS_VERCEL = '0';
+    process.env.NEXT_PUBLIC_VERCEL_DEBUG = '0';
+    process.env.NEXT_PUBLIC_ANALYTICS_PLAUSIBLE = '0';
+    process.env.NEXT_PUBLIC_ANALYTICS_POSTHOG = '0';
+    process.env.NEXT_PUBLIC_POSTHOG_DEBUG = '0';
+    process.env.NEXT_PUBLIC_I18N_DEBUG = '0';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER = '0';
+    process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER = '0';
+
+    const config = getClientConfig();
+    expect(config.ANALYTICS_VERCEL).toBe(false);
+    expect(config.VERCEL_DEBUG).toBe(false);
+    expect(config.ANALYTICS_PLAUSIBLE).toBe(false);
+    expect(config.ANALYTICS_POSTHOG).toBe(false);
+    expect(config.POSTHOG_DEBUG).toBe(false);
+    expect(config.I18N_DEBUG).toBe(false);
+    expect(config.I18N_DEBUG_BROWSER).toBe(false);
+    expect(config.I18N_DEBUG_SERVER).toBe(false);
+  });
+});

package/src/config/__tests__/server.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getServerConfig } from '../server';
+
+// Stub the global process object to safely mock environment variables
+vi.stubGlobal('process', {
+  ...process, // Preserve the original process object
+  env: { ...process.env }, // Clone the environment variables object for modification
+});
+
+describe('getServerConfig', () => {
+  beforeEach(() => {
+    // Reset environment variables before each test case
+    vi.restoreAllMocks();
+  });
+
+  it('throws an error if process is undefined', () => {
+    const originalProcess = global.process;
+    // To simulate the error condition, temporarily set the global process to `undefined`,
+    // @ts-ignore
+    global.process = undefined;
+
+    expect(() => getServerConfig()).toThrow(
+      '[Server Config] you are importing a nodejs-only module outside of nodejs',
+    );
+
+    global.process = originalProcess; // Restore the original process object
+  });
+
+  it('correctly reflects boolean value for USE_AZURE_OPENAI', () => {
+    process.env.USE_AZURE_OPENAI = '1';
+    const config = getServerConfig();
+    expect(config.USE_AZURE_OPENAI).toBe(true);
+  });
+
+  it('correctly handles falsy values for USE_AZURE_OPENAI', () => {
+    process.env.USE_AZURE_OPENAI = '0';
+    const config = getServerConfig();
+    expect(config.USE_AZURE_OPENAI).toBe(false);
+  });
+
+  it('returns default IMGUR_CLIENT_ID when no environment variable is set', () => {
+    const config = getServerConfig();
+    expect(config.IMGUR_CLIENT_ID).toBe('e415f320d6e24f9');
+  });
+
+  it('returns custom IMGUR_CLIENT_ID when environment variable is set', () => {
+    process.env.IMGUR_CLIENT_ID = 'custom-client-id';
+    const config = getServerConfig();
+    expect(config.IMGUR_CLIENT_ID).toBe('custom-client-id');
+  });
+});

package/src/config/server.ts

@@ -12,10 +12,16 @@ declare global {
       AZURE_API_KEY?: string;
       AZURE_API_VERSION?: string;
       USE_AZURE_OPENAI?: string;
+
+      IMGUR_CLIENT_ID?: string;
     }
   }
 }
 
+// we apply a free imgur app to get a client id
+// refs: https://apidocs.imgur.com/
+const DEFAULT_IMAGUR_CLIENT_ID = 'e415f320d6e24f9';
+
 export const getServerConfig = () => {
   if (typeof process === 'undefined') {
     throw new Error('[Server Config] you are importing a nodejs-only module outside of nodejs');
@@ -30,5 +36,7 @@ export const getServerConfig = () => {
     AZURE_API_KEY: process.env.AZURE_API_KEY,
     AZURE_API_VERSION: process.env.AZURE_API_VERSION,
     USE_AZURE_OPENAI: process.env.USE_AZURE_OPENAI === '1',
+
+    IMGUR_CLIENT_ID: process.env.IMGUR_CLIENT_ID || DEFAULT_IMAGUR_CLIENT_ID,
   };
 };

package/src/const/layoutTokens.ts

@@ -3,7 +3,7 @@ import type { FormProps } from '@lobehub/ui';
 export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
-export const CHAT_TEXTAREA_HEIGHT = 200;
+export const CHAT_TEXTAREA_HEIGHT = 230;
 export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const MARKET_SIDEBAR_WIDTH = 400;

package/src/const/llm.ts

@@ -12,3 +12,6 @@ export const LanguageModelWhiteList = [
 ];
 
 export const DEFAULT_OPENAI_MODEL_LIST: string[] = Object.values(LanguageModel);
+
+// vision model white list, these models will change the content from string to array
+export const VISION_MODEL_WHITE_LIST = ['gpt-4-vision-preview'];

package/src/const/settings.ts

@@ -18,6 +18,8 @@ export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
   themeMode: 'auto',
 };
 
+export const VISION_MODEL_DEFAULT_MAX_TOKENS = 1000;
+
 export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
   displayMode: 'chat',
   historyCount: 1,

package/src/database/core/__tests__/db.test.ts

@@ -0,0 +1,77 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { DBModel } from '@/types/database/db';
+import { LocalFile } from '@/types/database/files';
+
+import { LocalDB } from '../db';
+
+describe('LocalDB', () => {
+  let db: LocalDB;
+
+  beforeEach(() => {
+    db = new LocalDB();
+  });
+
+  afterEach(async () => {
+    await db.delete();
+    db.close();
+  });
+
+  it('should be instantiated with the correct schema', () => {
+    const filesTable = db.files;
+
+    expect(filesTable).toBeDefined();
+  });
+
+  it('should allow adding a file', async () => {
+    const file: DBModel<LocalFile> = {
+      id: 'file1',
+      name: 'testfile.txt',
+      data: new ArrayBuffer(3),
+      saveMode: 'local',
+      fileType: 'plain/text',
+      size: 3,
+      createdAt: Date.now(),
+    };
+
+    await db.files.add(file);
+
+    expect(await db.files.get(file.id)).toEqual(file);
+  });
+
+  it('should allow updating a file', async () => {
+    const file: DBModel<LocalFile> = {
+      id: 'file1',
+      name: 'testfile.txt',
+      data: new ArrayBuffer(3),
+      saveMode: 'local',
+      fileType: 'plain/text',
+      size: 3,
+      createdAt: Date.now(),
+    };
+    await db.files.add(file);
+
+    // Act
+    await db.files.update(file.id, { name: 'update.txt' });
+
+    // Assert
+    expect(await db.files.get(file.id)).toHaveProperty('name', 'update.txt');
+  });
+
+  it('should allow deleting a file', async () => {
+    const file: DBModel<LocalFile> = {
+      id: 'file1',
+      name: 'testfile.txt',
+      data: new ArrayBuffer(3),
+      saveMode: 'local',
+      fileType: 'plain/text',
+      size: 3,
+      createdAt: Date.now(),
+    };
+    await db.files.add(file);
+
+    await db.files.delete(file.id);
+
+    expect(await db.files.get(file.id)).toBeUndefined();
+  });
+});

package/src/database/core/__tests__/model.test.ts

@@ -0,0 +1,55 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ZodSchema, z } from 'zod';
+
+import { BaseModel } from '../model';
+
+// Define a mock schema for testing
+const mockSchema = z.object({
+  name: z.string(),
+  content: z.string(),
+});
+
+// Define a mock table name
+const mockTableName = 'files';
+
+describe('BaseModel', () => {
+  let baseModel: BaseModel<typeof mockTableName>;
+
+  beforeEach(() => {
+    baseModel = new BaseModel(mockTableName, mockSchema);
+    // Mock the console.error to test error logging
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    // console.error = originalConsoleError;
+  });
+
+  it('should have a table property', () => {
+    expect(baseModel.table).toBeDefined();
+  });
+
+  describe('add method', () => {
+    it('should add a valid record to the database', async () => {
+      const validData = {
+        name: 'testfile.txt',
+        content: 'Hello, World!',
+      };
+
+      const result = await baseModel['add'](validData);
+
+      expect(result).toHaveProperty('id');
+      expect(console.error).not.toHaveBeenCalled();
+    });
+
+    it('should throw an error and log to console when adding an invalid record', async () => {
+      const invalidData = {
+        name: 123, // Invalid type, should be a string
+        content: 'Hello, World!',
+      };
+
+      await expect(baseModel['add'](invalidData)).rejects.toThrow(TypeError);
+    });
+  });
+});

package/src/database/core/db.ts

@@ -0,0 +1,25 @@
+import Dexie from 'dexie';
+
+import { LobeDBSchemaMap as SchemaMap, lobeDBSchema } from '@/database/core/schema';
+import { DBModel } from '@/types/database/db';
+
+export type LocalDBSchema = {
+  [t in keyof SchemaMap]: {
+    model: SchemaMap[t];
+    table: Dexie.Table<DBModel<SchemaMap[t]>, string>;
+  };
+};
+
+// Define a local DB
+export class LocalDB extends Dexie {
+  public files: LocalDBSchema['files']['table'];
+
+  constructor() {
+    super('LOBE_CHAT_DB');
+    this.version(1).stores(lobeDBSchema);
+
+    this.files = this.table('files');
+  }
+}
+
+export const LocalDBInstance = new LocalDB();

package/src/database/core/index.ts

@@ -0,0 +1 @@
+export * from './model';

package/src/database/core/model.ts

@@ -0,0 +1,49 @@
+import { ZodSchema } from 'zod';
+
+import { DBModel } from '@/types/database/db';
+import { LocalFile } from '@/types/database/files';
+import { nanoid } from '@/utils/uuid';
+
+import { LocalDB, LocalDBInstance, LocalDBSchema } from './db';
+
+export class BaseModel<N extends keyof LocalDBSchema = any> {
+  private readonly db: LocalDB;
+  private readonly schema: ZodSchema;
+  private readonly _tableName: keyof LocalDBSchema;
+
+  constructor(table: N, schema: ZodSchema, db = LocalDBInstance) {
+    this.db = db;
+    this.schema = schema;
+    this._tableName = table;
+  }
+
+  get table() {
+    return this.db[this._tableName];
+  }
+
+  /**
+   * create a new record
+   * @param data
+   * @param id
+   */
+  protected async add<T = LocalDBSchema[N]['model']>(data: T, id: string | number = nanoid()) {
+    const result = this.schema.safeParse(data);
+
+    if (!result.success) {
+      const errorMsg = `[${this.db.name}][${this._tableName}] Failed to create new record. Error: ${result.error}`;
+
+      const newError = new TypeError(errorMsg);
+      // make this error show on console to help debug
+      console.error(newError);
+      throw newError;
+    }
+
+    const tableName = this._tableName;
+
+    const record: DBModel<LocalFile> = { ...result.data, createdAt: Date.now(), id };
+
+    const newId = await this.db[tableName].add(record);
+
+    return { id: newId };
+  }
+}

package/src/database/core/schema.ts

@@ -0,0 +1,9 @@
+import { LocalFile } from '@/types/database/files';
+
+export const lobeDBSchema = {
+  files: '&id, name, fileType, saveMode',
+};
+
+export interface LobeDBSchemaMap {
+  files: LocalFile;
+}

package/src/database/models/file.test.ts

@@ -0,0 +1,71 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { LocalFile } from '@/types/database/files';
+
+import { LocalDB } from '../core/db';
+import { FileModel } from './file';
+
+// Assuming LocalDB is already mocked or using an in-memory database
+// and LocalFileSchema has been imported correctly.
+
+describe('_FileModel', () => {
+  let fileData: LocalFile;
+
+  beforeEach(() => {
+    // Set up file data with the correct structure according to LocalFileSchema
+    fileData = {
+      data: new ArrayBuffer(10),
+      fileType: 'image/png',
+      name: 'test.png',
+      saveMode: 'local',
+      size: 10,
+      // url is optional, only needed if saveMode is 'url'
+    };
+  });
+
+  afterEach(async () => {
+    // Clean up the database after each test
+    const db = new LocalDB();
+    await db.files.clear();
+    db.close();
+  });
+
+  it('should create a file record', async () => {
+    // First, create a file to test the create method
+    const fileData: LocalFile = {
+      data: new ArrayBuffer(10),
+      fileType: 'image/png',
+      name: 'test.png',
+      saveMode: 'local',
+      size: 10,
+    };
+
+    const result = await FileModel.create(fileData);
+
+    expect(result).toHaveProperty('id');
+    expect(result.id).toMatch(/^file-/);
+
+    // Verify that the file has been added to the database
+    const fileInDb = await FileModel.findById(result.id);
+
+    expect(fileInDb).toEqual(expect.objectContaining(fileData));
+  });
+
+  it('should find a file by id', async () => {
+    // First, create a file to test the findById method
+    const createdFile = await FileModel.create(fileData);
+    const foundFile = await FileModel.findById(createdFile.id);
+
+    expect(foundFile).toEqual(expect.objectContaining(fileData));
+  });
+
+  it('should delete a file by id', async () => {
+    // First, create a file to test the delete method
+    const createdFile = await FileModel.create(fileData);
+    await FileModel.delete(createdFile.id);
+
+    // Verify that the file has been removed from the database
+    const fileInDb = await FileModel.findById(createdFile.id);
+    expect(fileInDb).toBeUndefined();
+  });
+});

package/src/database/models/file.ts

@@ -0,0 +1,26 @@
+import { LocalFile, LocalFileSchema } from '@/types/database/files';
+import { nanoid } from '@/utils/uuid';
+
+import { BaseModel } from '../core';
+
+class _FileModel extends BaseModel {
+  constructor() {
+    super('files', LocalFileSchema);
+  }
+
+  async create(file: LocalFile) {
+    const id = nanoid();
+
+    return this.add(file, `file-${id}`);
+  }
+
+  async findById(id: string) {
+    return this.table.get(id);
+  }
+
+  async delete(id: string) {
+    return this.table.delete(id);
+  }
+}
+
+export const FileModel = new _FileModel();

package/src/locales/default/chat.ts

@@ -62,5 +62,10 @@ export default {
   },
   translateTo: '翻译',
   updateAgent: '更新助理信息',
+  upload: {
+    actionTooltip: '上传图片',
+    dragDesc: '拖拽文件到这里，支持上传多个图片。按住 Shift 直接发送图片',
+    dragTitle: '上传图片',
+  },
   warp: '换行',
 };