@lobehub/chat 1.135.3 → 1.135.4

package/src/hooks/useUserAvatar.test.ts

@@ -0,0 +1,129 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useElectronStore } from '@/store/electron';
+import { useUserStore } from '@/store/user';
+
+import { useUserAvatar } from './useUserAvatar';
+
+vi.mock('zustand/traditional');
+
+// Mock @lobechat/const
+let mockIsDesktop = false;
+
+vi.mock('@lobechat/const', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@lobechat/const')>();
+  return {
+    ...actual,
+    get isDesktop() {
+      return mockIsDesktop;
+    },
+    DEFAULT_USER_AVATAR: 'default-avatar.png',
+  };
+});
+
+describe('useUserAvatar', () => {
+  it('should return default avatar when user has no avatar', () => {
+    act(() => {
+      useUserStore.setState({ user: { avatar: undefined } as any });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    expect(result.current).toBe('default-avatar.png');
+  });
+
+  it('should return user avatar when available', () => {
+    const mockAvatar = 'https://example.com/avatar.png';
+
+    act(() => {
+      useUserStore.setState({ user: { avatar: mockAvatar } as any });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    expect(result.current).toBe(mockAvatar);
+  });
+
+  it('should return original avatar in non-desktop environment', () => {
+    mockIsDesktop = false;
+    const mockAvatar = '/api/avatar.png';
+
+    act(() => {
+      useUserStore.setState({ user: { avatar: mockAvatar } as any });
+      useElectronStore.setState({
+        dataSyncConfig: { remoteServerUrl: 'https://server.com', storageMode: 'cloud' },
+      });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    expect(result.current).toBe(mockAvatar);
+  });
+
+  it('should return original avatar when no remote server URL in desktop environment', () => {
+    mockIsDesktop = true;
+    const mockAvatar = '/api/avatar.png';
+
+    act(() => {
+      useUserStore.setState({ user: { avatar: mockAvatar } as any });
+      useElectronStore.setState({
+        dataSyncConfig: { remoteServerUrl: undefined, storageMode: 'local' },
+      });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    expect(result.current).toBe(mockAvatar);
+  });
+
+  it('should prepend remote server URL when avatar starts with / in desktop environment', () => {
+    mockIsDesktop = true;
+    const mockAvatar = '/api/avatar.png';
+    const mockServerUrl = 'https://server.com';
+
+    act(() => {
+      useUserStore.setState({ user: { avatar: mockAvatar } as any });
+      useElectronStore.setState({
+        dataSyncConfig: { remoteServerUrl: mockServerUrl, storageMode: 'cloud' },
+      });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    expect(result.current).toBe('https://server.com/api/avatar.png');
+  });
+
+  it('should not prepend remote server URL when avatar does not start with / in desktop environment', () => {
+    mockIsDesktop = true;
+    const mockAvatar = 'https://example.com/avatar.png';
+    const mockServerUrl = 'https://server.com';
+
+    act(() => {
+      useUserStore.setState({ user: { avatar: mockAvatar } as any });
+      useElectronStore.setState({
+        dataSyncConfig: { remoteServerUrl: mockServerUrl, storageMode: 'cloud' },
+      });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    expect(result.current).toBe(mockAvatar);
+  });
+
+  it('should handle empty remote server URL in desktop environment', () => {
+    mockIsDesktop = true;
+    const mockAvatar = '/api/avatar.png';
+
+    act(() => {
+      useUserStore.setState({ user: { avatar: mockAvatar } as any });
+      useElectronStore.setState({
+        dataSyncConfig: { remoteServerUrl: '', storageMode: 'cloud' },
+      });
+    });
+
+    const { result } = renderHook(() => useUserAvatar());
+
+    expect(result.current).toBe(mockAvatar);
+  });
+});

package/src/hooks/useUserAvatar.ts

@@ -0,0 +1,19 @@
+import { DEFAULT_USER_AVATAR, isDesktop } from '@lobechat/const';
+import { useMemo } from 'react';
+
+import { useElectronStore } from '@/store/electron';
+import { electronSyncSelectors } from '@/store/electron/selectors';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
+
+export const useUserAvatar = () => {
+  const avatar = useUserStore(userProfileSelectors.userAvatar) || DEFAULT_USER_AVATAR;
+  const remoteServerUrl = useElectronStore(electronSyncSelectors.remoteServerUrl);
+
+  return useMemo(() => {
+    // only process avatar in desktop environment and when avatar url starts with /
+    if (!isDesktop || !remoteServerUrl || !avatar || !avatar.startsWith('/')) return avatar;
+
+    return remoteServerUrl + avatar;
+  }, [avatar, remoteServerUrl]);
+};

package/src/server/routers/lambda/aiModel.ts

@@ -1,3 +1,10 @@
+import {
+  AiModelTypeSchema,
+  AiProviderModelListItem,
+  CreateAiModelSchema,
+  ToggleAiModelEnableSchema,
+  UpdateAiModelSchema,
+} from 'model-bank';
 import { z } from 'zod';
 
 import { AiModelModel } from '@/database/models/aiModel';
@@ -9,14 +16,6 @@ import { getServerGlobalConfig } from '@/server/globalConfig';
 import { KeyVaultsGateKeeper } from '@/server/modules/KeyVaultsEncrypt';
 import { ProviderConfig } from '@/types/user/settings';
 
-import {
-  AiModelTypeSchema,
-  AiProviderModelListItem,
-  CreateAiModelSchema,
-  ToggleAiModelEnableSchema,
-  UpdateAiModelSchema,
-} from '../../../../packages/model-bank/src/types/aiModel';
-
 const aiModelProcedure = authedProcedure.use(serverDatabase).use(async (opts) => {
   const { ctx } = opts;
 

package/src/store/user/slices/settings/selectors/settings.ts

@@ -1,19 +1,20 @@
-import { DEFAULT_AGENT_META } from '@/const/meta';
 import {
   DEFAULT_AGENT,
   DEFAULT_AGENT_CONFIG,
+  DEFAULT_AGENT_META,
   DEFAULT_HOTKEY_CONFIG,
   DEFAULT_SYSTEM_AGENT_CONFIG,
   DEFAULT_TTS_CONFIG,
-} from '@/const/settings';
-import type { UserStore } from '@/store/user';
-import { HotkeyId } from '@/types/hotkey';
+} from '@lobechat/const';
 import {
   GlobalLLMProviderKey,
+  HotkeyId,
   ProviderConfig,
   UserModelProviderConfig,
   UserSettings,
-} from '@/types/user/settings';
+} from '@lobechat/types';
+
+import type { UserStore } from '@/store/user';
 import { merge } from '@/utils/merge';
 
 export const currentSettings = (s: UserStore): UserSettings => merge(s.defaultSettings, s.settings);

package/src/features/ChatItem/index.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import isEqual from 'fast-deep-equal';
-import { memo, useMemo } from 'react';
-
-import { ChatItemProps, ChatItem as ChatItemRaw } from '@/components/ChatItem';
-import { isDesktop } from '@/const/version';
-import { useElectronStore } from '@/store/electron';
-import { electronSyncSelectors } from '@/store/electron/selectors';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-
-const ChatItem = memo<ChatItemProps>(({ markdownProps = {}, avatar, ...rest }) => {
-  const { componentProps, ...restMarkdown } = markdownProps;
-  const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
-
-  const remoteServerUrl = useElectronStore(electronSyncSelectors.remoteServerUrl);
-  const processedAvatar = useMemo(() => {
-    // only process avatar in desktop environment and when avatar url starts with /
-    if (
-      !isDesktop ||
-      !remoteServerUrl ||
-      !avatar.avatar ||
-      typeof avatar.avatar !== 'string' ||
-      !avatar.avatar.startsWith('/')
-    )
-      return avatar;
-
-    return {
-      ...avatar,
-      avatar: remoteServerUrl + avatar.avatar, // prepend the remote server URL
-    };
-  }, [avatar, remoteServerUrl]);
-
-  return (
-    <ChatItemRaw
-      avatar={processedAvatar}
-      fontSize={general.fontSize}
-      markdownProps={{
-        ...restMarkdown,
-        componentProps: {
-          ...componentProps,
-          highlight: {
-            theme: general.highlighterTheme,
-            ...componentProps?.highlight,
-          },
-          mermaid: {
-            theme: general.mermaidTheme,
-            ...componentProps?.mermaid,
-          },
-        },
-      }}
-      {...rest}
-    />
-  );
-});
-
-export default ChatItem;

package/src/features/Conversation/Actions/Assistant.tsx

@@ -1,68 +0,0 @@
-import { ActionIconGroup } from '@lobehub/ui';
-import type { ActionIconGroupItemType } from '@lobehub/ui';
-import { memo, useContext, useMemo } from 'react';
-
-import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
-
-import { InPortalThreadContext } from '../components/ChatItem/InPortalThreadContext';
-import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
-import { RenderAction } from '../types';
-import { ErrorActionsBar } from './Error';
-import { useCustomActions } from './customAction';
-
-export const AssistantActionsBar: RenderAction = memo(({ onActionClick, error, tools, id }) => {
-  const [isThreadMode, hasThread] = useChatStore((s) => [
-    !!s.activeThreadId,
-    threadSelectors.hasThreadBySourceMsgId(id)(s),
-  ]);
-
-  const {
-    regenerate,
-    edit,
-    delAndRegenerate,
-    copy,
-    divider,
-    del,
-    branching,
-    // export: exportPDF,
-    share,
-  } = useChatListActionsBar({ hasThread });
-
-  const { translate, tts } = useCustomActions();
-  const hasTools = !!tools;
-
-  const inPortalThread = useContext(InPortalThreadContext);
-  const inThread = isThreadMode || inPortalThread;
-
-  const items = useMemo(() => {
-    if (hasTools) return [delAndRegenerate, copy];
-
-    return [edit, copy, inThread ? null : branching].filter(Boolean) as ActionIconGroupItemType[];
-  }, [inThread, hasTools]);
-
-  if (error) return <ErrorActionsBar onActionClick={onActionClick} />;
-
-  return (
-    <ActionIconGroup
-      items={items}
-      menu={{
-        items: [
-          edit,
-          copy,
-          divider,
-          tts,
-          translate,
-          divider,
-          share,
-          // exportPDF,
-          divider,
-          regenerate,
-          delAndRegenerate,
-          del,
-        ],
-      }}
-      onActionClick={onActionClick}
-    />
-  );
-});

package/src/features/Conversation/Actions/Fallback.tsx

@@ -1,19 +0,0 @@
-import { ActionIconGroup } from '@lobehub/ui';
-import { memo } from 'react';
-
-import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
-import type { RenderAction } from '../types';
-
-export const DefaultActionsBar: RenderAction = memo(({ onActionClick }) => {
-  const { del } = useChatListActionsBar();
-
-  return (
-    <ActionIconGroup
-      items={[]}
-      menu={{
-        items: [del],
-      }}
-      onActionClick={onActionClick}
-    />
-  );
-});

package/src/features/Conversation/Actions/Tool.tsx

@@ -1,33 +0,0 @@
-import { ActionIconGroup } from '@lobehub/ui';
-import { memo } from 'react';
-
-import { useChatStore } from '@/store/chat';
-
-import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
-import { RenderAction } from '../types';
-
-export const ToolActionsBar: RenderAction = memo(({ id }) => {
-  const { regenerate, del } = useChatListActionsBar();
-  const [reInvokeToolMessage, deleteToolMessage] = useChatStore((s) => [
-    s.reInvokeToolMessage,
-    s.deleteToolMessage,
-  ]);
-
-  return (
-    <ActionIconGroup
-      items={[regenerate, del]}
-      onActionClick={async (event) => {
-        switch (event.key) {
-          case 'regenerate': {
-            await reInvokeToolMessage(id);
-            break;
-          }
-
-          case 'del': {
-            await deleteToolMessage(id);
-          }
-        }
-      }}
-    />
-  );
-});

package/src/features/Conversation/Actions/User.tsx

@@ -1,39 +0,0 @@
-import { ActionIconGroup } from '@lobehub/ui';
-import { ActionIconGroupItemType } from '@lobehub/ui/es/ActionIconGroup';
-import { memo, useContext, useMemo } from 'react';
-
-import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/slices/thread/selectors';
-
-import { InPortalThreadContext } from '../components/ChatItem/InPortalThreadContext';
-import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
-import { RenderAction } from '../types';
-import { useCustomActions } from './customAction';
-
-export const UserActionsBar: RenderAction = memo(({ onActionClick, id }) => {
-  const [isThreadMode, hasThread] = useChatStore((s) => [
-    !!s.activeThreadId,
-    threadSelectors.hasThreadBySourceMsgId(id)(s),
-  ]);
-  const { regenerate, edit, copy, divider, del, branching } = useChatListActionsBar({ hasThread });
-  const { translate, tts } = useCustomActions();
-
-  const inPortalThread = useContext(InPortalThreadContext);
-  const inThread = isThreadMode || inPortalThread;
-
-  const items = useMemo(
-    () =>
-      [regenerate, edit, inThread ? null : branching].filter(Boolean) as ActionIconGroupItemType[],
-    [inThread],
-  );
-
-  return (
-    <ActionIconGroup
-      items={items}
-      menu={{
-        items: [edit, copy, divider, tts, translate, divider, regenerate, del],
-      }}
-      onActionClick={onActionClick}
-    />
-  );
-});

package/src/features/Conversation/Actions/customAction.ts

@@ -1,37 +0,0 @@
-import type { ActionIconGroupItemType } from '@lobehub/ui';
-import { css, cx } from 'antd-style';
-import { LanguagesIcon, Play } from 'lucide-react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { localeOptions } from '@/locales/resources';
-
-const translateStyle = css`
-  .ant-dropdown-menu-sub {
-    overflow-y: scroll;
-    max-height: 400px;
-  }
-`;
-
-export const useCustomActions = () => {
-  const { t } = useTranslation('chat');
-
-  const translate = {
-    children: localeOptions.map((i) => ({
-      key: i.value,
-      label: t(`lang.${i.value}`, { ns: 'common' }),
-    })),
-    icon: LanguagesIcon,
-    key: 'translate',
-    label: t('translate.action'),
-    popupClassName: cx(translateStyle),
-  } as ActionIconGroupItemType;
-
-  const tts = {
-    icon: Play,
-    key: 'tts',
-    label: t('tts.action'),
-  } as ActionIconGroupItemType;
-
-  return useMemo(() => ({ translate, tts }), []);
-};

package/src/features/Conversation/Actions/index.ts

@@ -1,14 +0,0 @@
-import { MessageRoleType } from '@/types/message';
-
-import { RenderAction } from '../types';
-import { AssistantActionsBar } from './Assistant';
-import { DefaultActionsBar } from './Fallback';
-import { ToolActionsBar } from './Tool';
-import { UserActionsBar } from './User';
-
-export const renderActions: Record<MessageRoleType, RenderAction> = {
-  assistant: AssistantActionsBar,
-  system: DefaultActionsBar,
-  tool: ToolActionsBar,
-  user: UserActionsBar,
-};

package/src/features/Conversation/Extras/index.ts

@@ -1,8 +0,0 @@
-import { RenderMessageExtra } from '../types';
-import { AssistantMessageExtra } from './Assistant';
-import { UserMessageExtra } from './User';
-
-export const renderMessagesExtra: Record<string, RenderMessageExtra> = {
-  assistant: AssistantMessageExtra,
-  user: UserMessageExtra,
-};

package/src/features/Conversation/Extras/type.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-
-import { ChatMessage } from '@/types/message';
-
-export type RenderMessageExtra = FC<ChatMessage>;

package/src/features/Conversation/Messages/index.ts

@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-
-import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
-import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
-
-import { MarkdownCustomRender, RenderBelowMessage, RenderMessage } from '../types';
-import { AssistantMessage } from './Assistant';
-import { DefaultBelowMessage, DefaultMessage } from './Default';
-import { UserBelowMessage, UserMarkdownRender, UserMessage } from './User';
-
-export const renderMessages: Record<string, RenderMessage> = {
-  assistant: AssistantMessage,
-  default: DefaultMessage,
-  function: DefaultMessage,
-  user: UserMessage,
-};
-
-export const renderBelowMessages: Record<string, RenderBelowMessage> = {
-  default: DefaultBelowMessage,
-  user: UserBelowMessage,
-};
-
-export const markdownCustomRenders: Record<string, MarkdownCustomRender> = {
-  user: UserMarkdownRender,
-};
-
-export const useAvatarsClick = (role?: string) => {
-  const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
-  const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
-  const openChatSettings = useOpenChatSettings();
-
-  return useCallback(() => {
-    switch (role) {
-      case 'assistant': {
-        if (!isInbox) {
-          toggleSystemRole(true);
-        } else {
-          openChatSettings();
-        }
-      }
-    }
-  }, [isInbox, role]);
-};