@lobehub/chat 0.100.4 → 0.101.0

package/src/app/chat/features/ChatInput/ActionBar/ModelSwitch.tsx

@@ -0,0 +1,42 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Dropdown } from 'antd';
+import { BrainCog } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { LanguageModel } from '@/types/llm';
+
+const ModelSwitch = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const [model, updateAgentConfig] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return [config.model, s.updateAgentConfig];
+  });
+
+  const modelList = useGlobalStore(settingsSelectors.modelList);
+
+  return (
+    <Dropdown
+      menu={{
+        activeKey: model,
+        items: modelList.map((i) => ({ key: i, label: i })),
+        onClick: (e) => {
+          updateAgentConfig({ model: e.key as LanguageModel });
+        },
+        style: {
+          maxHeight: 400,
+          overflow: 'scroll',
+        },
+      }}
+      trigger={['click']}
+    >
+      <ActionIcon icon={BrainCog} placement={'bottom'} title={t('settingModel.model.title')} />
+    </Dropdown>
+  );
+});
+
+export default ModelSwitch;

package/src/app/chat/features/ChatInput/ActionBar/Temperature.tsx

@@ -0,0 +1,47 @@
+import { ActionIcon, SliderWithInput } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { Thermometer } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+const Temperature = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const [temperature, updateAgentConfig] = useSessionStore((s) => {
+    const config = agentSelectors.currentAgentConfig(s);
+    return [config.params.temperature, s.updateAgentConfig];
+  });
+
+  return (
+    <Popover
+      arrow={false}
+      content={
+        <SliderWithInput
+          controls={false}
+          max={1}
+          min={0}
+          onChange={(v) => {
+            updateAgentConfig({ params: { temperature: v } });
+          }}
+          size={'small'}
+          step={0.1}
+          style={{ width: 160 }}
+          value={temperature}
+        />
+      }
+      placement={'top'}
+      trigger={'click'}
+    >
+      <ActionIcon
+        icon={Thermometer}
+        placement={'bottom'}
+        title={t('settingModel.temperature.titleWithValue', { value: temperature })}
+      />
+    </Popover>
+  );
+});
+
+export default Temperature;

package/src/app/chat/features/{ChatInputContent/ActionBar/Token.tsx → ChatInput/ActionBar/Token/TokenTag.tsx}

@@ -8,16 +8,16 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 import { LanguageModel } from '@/types/llm';
 
-const Token = memo<{ input: string }>(({ input }) => {
+const Token = memo(() => {
   const { t } = useTranslation('chat');
 
-  const inputTokenCount = useTokenCount(input);
-
-  const [messageString, systemRole, model] = useSessionStore((s) => [
+  const [input, messageString, systemRole, model] = useSessionStore((s) => [
+    s.inputMessage,
     chatSelectors.chatsMessageString(s),
     agentSelectors.currentAgentSystemRole(s),
     agentSelectors.currentAgentModel(s) as LanguageModel,
   ]);
+  const inputTokenCount = useTokenCount(input);
 
   const systemRoleToken = useTokenCount(systemRole);
   const chatsToken = useTokenCount(messageString);

package/src/app/chat/features/ChatInput/ActionBar/Token/index.tsx

@@ -0,0 +1,21 @@
+import dynamic from 'next/dynamic';
+import { Suspense, memo } from 'react';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+const LargeTokenContent = dynamic(() => import('./TokenTag'), { ssr: false });
+
+const Token = memo(() => {
+  const [showTokenTag] = useSessionStore((s) => [agentSelectors.showTokenTag(s)]);
+
+  return (
+    showTokenTag && (
+      <Suspense>
+        <LargeTokenContent />
+      </Suspense>
+    )
+  );
+});
+
+export default Token;

package/src/app/chat/features/ChatInput/ActionBar/config.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+
+import Clear from './Clear';
+import FileUpload from './FileUpload';
+import History from './History';
+import ModelSwitch from './ModelSwitch';
+import Temperature from './Temperature';
+import Token from './Token';
+
+export const actionMap: Record<string, FC> = {
+  clear: Clear,
+  fileUpload: FileUpload,
+  history: History,
+  model: ModelSwitch,
+  temperature: Temperature,
+  token: Token,
+};
+
+// we can make these action lists configurable in the future
+export const leftActionList = ['model', 'fileUpload', 'temperature', 'history', 'token'];
+export const rightActionList = ['clear'];

package/src/app/chat/features/ChatInput/ActionBar/index.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { actionMap, leftActionList, rightActionList } from './config';
+
+const RenderActionList = ({ dataSource }: { dataSource: string[] }) => (
+  <>
+    {dataSource.map((key) => {
+      const Render = actionMap[key];
+      return <Render key={key} />;
+    })}
+  </>
+);
+
+export interface ActionBarProps {
+  rightAreaEndRender?: ReactNode;
+  rightAreaStartRender?: ReactNode;
+}
+
+const ActionBar = memo<ActionBarProps>(({ rightAreaStartRender, rightAreaEndRender }) => {
+  return (
+    <Flexbox align={'center'} flex={'none'} horizontal justify={'space-between'} padding={'0 16px'}>
+      <Flexbox align={'center'} flex={1} gap={4} horizontal>
+        <RenderActionList dataSource={leftActionList} />
+      </Flexbox>
+      <Flexbox align={'center'} flex={0} gap={4} horizontal justify={'flex-end'}>
+        {rightAreaStartRender}
+        <RenderActionList dataSource={rightActionList} />
+        {rightAreaEndRender}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ActionBar;

package/src/app/chat/features/ChatInput/useSend.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+
+import { filesSelectors, useFileStore } from '@/store/files';
+import { useSessionStore } from '@/store/session';
+
+export const useSendMessage = () => {
+  const [sendMessage, updateInputMessage] = useSessionStore((s) => [
+    s.sendMessage,
+    s.updateInputMessage,
+  ]);
+
+  return useCallback(() => {
+    const store = useSessionStore.getState();
+    if (!!store.chatLoadingId) return;
+    const imageList = filesSelectors.imageUrlOrBase64List(useFileStore.getState());
+
+    sendMessage(store.inputMessage, imageList);
+    updateInputMessage('');
+    useFileStore.getState().clearImageList();
+  }, []);
+};

package/src/app/chat/features/Conversation/ChatList/Messages/User.tsx

@@ -0,0 +1,23 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileList from '@/app/chat/components/FileList';
+import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/chatMessage';
+
+import BubblesLoading from '../Loading';
+
+export const UserMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, editableContent, content, ...res }) => {
+  if (content === LOADING_FLAT) return <BubblesLoading />;
+
+  return (
+    <Flexbox gap={8} id={id}>
+      {editableContent}
+      {res.files && <FileList editable={false} items={res.files} />}
+    </Flexbox>
+  );
+});

package/src/app/chat/features/Conversation/ChatList/Messages/index.ts

@@ -10,11 +10,13 @@ import { pathString } from '@/utils/url';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
+import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
   assistant: AssistantMessage,
   default: DefaultMessage,
   function: FunctionMessage,
+  user: UserMessage,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {

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;
+}