@lobehub/lobehub 2.0.0-next.35 → 2.0.0-next.37

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

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { messageStateSelectors } from '@/store/chat/selectors';
+import { UIChatMessage } from '@/types/index';
+
+import { UserActionsBar } from './ActionsBar';
+import MessageBranch from './MessageBranch';
+
+interface ActionsProps {
+  data: UIChatMessage;
+  disableEditing?: boolean;
+  id: string;
+  index: number;
+}
+
+const Actions = memo<ActionsProps>(({ id, data, index, disableEditing }) => {
+  const { branch } = data;
+  const [editing] = useChatStore((s) => [messageStateSelectors.isMessageEditing(id)(s)]);
+
+  return (
+    !editing && (
+      <Flexbox align={'center'} horizontal>
+        {!disableEditing && (
+          <Flexbox align={'flex-start'} role="menubar">
+            <UserActionsBar data={data} id={id} index={index} />
+          </Flexbox>
+        )}
+        {branch && (
+          <MessageBranch
+            activeBranchIndex={branch.activeBranchIndex}
+            count={branch.count}
+            messageId={id}
+          />
+        )}
+      </Flexbox>
+    )
+  );
+});
+
+export default Actions;

package/src/features/Conversation/Messages/User/index.tsx

@@ -22,7 +22,7 @@ import { useUserStore } from '@/store/user';
 import { userProfileSelectors } from '@/store/user/selectors';
 
 import { useDoubleClickEdit } from '../../hooks/useDoubleClickEdit';
-import { UserActionsBar } from './Actions';
+import Actions from './Actions';
 import { UserBelowMessage } from './BelowMessage';
 import { UserMessageExtra } from './Extra';
 import { MarkdownRender as UserMarkdownRender } from './MarkdownRender';
@@ -127,60 +127,59 @@ const UserMessage = memo<UserMessageProps>((props) => {
   );
 
   return (
-    <Flexbox
-      className={styles.container}
-      direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-      gap={mobile ? 6 : 12}
-    >
-      <Avatar
-        alt={title}
-        avatar={{ avatar, title }}
-        loading={loading}
-        placement={placement}
-        size={mobile ? 32 : undefined}
-        style={{ marginTop: 6 }}
-      />
+    <Flexbox className={styles.container} gap={8}>
       <Flexbox
-        align={placement === 'left' ? 'flex-start' : 'flex-end'}
-        className={styles.messageContainer}
+        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+        gap={mobile ? 6 : 12}
       >
-        <Title
+        <Avatar
+          alt={title}
           avatar={{ avatar, title }}
+          loading={loading}
           placement={placement}
-          showTitle={false}
-          time={createdAt}
-          titleAddon={dmIndicator}
+          size={32}
+          style={{ marginTop: 6 }}
         />
         <Flexbox
           align={placement === 'left' ? 'flex-start' : 'flex-end'}
-          className={styles.messageContent}
-          direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
-          gap={8}
+          className={styles.messageContainer}
         >
-          <Flexbox flex={1} style={{ maxWidth: '100%', minWidth: 0 }}>
-            <MessageContent
-              editing={editing}
-              id={id}
-              markdownProps={markdownProps}
-              message={content}
-              messageExtra={<UserMessageExtra content={content} extra={extra} id={id} />}
-              onDoubleClick={onDoubleClick}
-              placement={placement}
-              primary
-              renderMessage={renderMessage}
-              variant={variant}
-            />
-          </Flexbox>
-
-          {!disableEditing && !editing && (
-            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
-              <UserActionsBar data={props} id={id} index={index} />
+          <Title
+            avatar={{ avatar, title }}
+            placement={placement}
+            showTitle={false}
+            time={createdAt}
+            titleAddon={dmIndicator}
+          />
+          <Flexbox
+            align={placement === 'left' ? 'flex-start' : 'flex-end'}
+            className={styles.messageContent}
+            direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+            gap={8}
+          >
+            <Flexbox flex={1} style={{ maxWidth: '100%', minWidth: 0 }}>
+              <MessageContent
+                editing={editing}
+                id={id}
+                markdownProps={markdownProps}
+                message={content}
+                messageExtra={<UserMessageExtra content={content} extra={extra} id={id} />}
+                onDoubleClick={onDoubleClick}
+                placement={placement}
+                primary
+                renderMessage={renderMessage}
+                variant={variant}
+              />
             </Flexbox>
-          )}
+          </Flexbox>
+          <UserBelowMessage content={content} id={id} ragQuery={ragQuery} />
         </Flexbox>
-        <UserBelowMessage content={content} id={id} ragQuery={ragQuery} />
+        {mobile && variant === 'bubble' && <BorderSpacing borderSpacing={32} />}
+      </Flexbox>
+
+      <Flexbox direction={'horizontal-reverse'}>
+        <Actions data={props} disableEditing={disableEditing} id={id} index={index} />
       </Flexbox>
-      {mobile && variant === 'bubble' && <BorderSpacing borderSpacing={32} />}
     </Flexbox>
   );
 });

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

@@ -11,7 +11,7 @@ import {
   upsertVirtuosoVisibleItem,
 } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import History from '../components/History';
 import { InPortalThreadContext } from '../context/InPortalThreadContext';
@@ -56,7 +56,7 @@ const Item = memo<ChatListItemProps>(
     const { styles, cx } = useStyles();
     const containerRef = useRef<HTMLDivElement | null>(null);
 
-    const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+    const item = useChatStore(displayMessageSelectors.getDisplayMessageById(id), isEqual);
 
     const [isMessageLoading] = useChatStore((s) => [messageStateSelectors.isMessageLoading(id)(s)]);
 
@@ -133,7 +133,7 @@ const Item = memo<ChatListItemProps>(
           );
         }
 
-        case 'group': {
+        case 'assistantGroup': {
           return (
             <GroupMessage
               {...item}

package/src/features/Conversation/components/AutoScroll.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, messageStateSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 
 import BackBottom from './BackBottom';
 
@@ -12,8 +12,8 @@ interface AutoScrollProps {
 }
 const AutoScroll = memo<AutoScrollProps>(({ atBottom, isScrolling, onScrollToBottom }) => {
   const trackVisibility = useChatStore(messageStateSelectors.isAIGenerating);
-  const str = useChatStore(chatSelectors.mainAIChatsMessageString);
-  const reasoningStr = useChatStore(chatSelectors.mainAILatestMessageReasoningContent);
+  const str = useChatStore(displayMessageSelectors.mainAIChatsMessageString);
+  const reasoningStr = useChatStore(displayMessageSelectors.mainAILatestMessageReasoningContent);
 
   useEffect(() => {
     if (atBottom && trackVisibility && !isScrolling) {

package/src/features/Conversation/components/Extras/Usage/UsageDetail/AnimatedNumber.tsx

@@ -0,0 +1,55 @@
+import { memo, useEffect, useRef, useState } from 'react';
+
+interface AnimatedNumberProps {
+  duration?: number;
+  formatter?: (value: number) => string;
+  value: number;
+}
+
+const AnimatedNumber = memo<AnimatedNumberProps>(({ value, duration = 3000, formatter }) => {
+  const [displayValue, setDisplayValue] = useState(value);
+  const frameRef = useRef<number>(undefined);
+  const startTimeRef = useRef<number>(undefined);
+  const startValueRef = useRef(value);
+
+  useEffect(() => {
+    const startValue = startValueRef.current;
+    const diff = value - startValue;
+
+    if (diff === 0) return;
+
+    const animate = (currentTime: number) => {
+      if (!startTimeRef.current) {
+        startTimeRef.current = currentTime;
+      }
+
+      const elapsed = currentTime - startTimeRef.current;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // 使用 easeOutCubic 缓动函数
+      const easeProgress = 1 - (1 - progress) ** 3;
+      const current = startValue + diff * easeProgress;
+
+      setDisplayValue(current);
+
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(animate);
+      } else {
+        startValueRef.current = value;
+        startTimeRef.current = undefined;
+      }
+    };
+
+    frameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [value, duration]);
+
+  return formatter ? formatter(displayValue) : displayValue.toString();
+});
+
+export default AnimatedNumber;

package/src/features/Conversation/components/Extras/Usage/UsageDetail/index.tsx

@@ -13,6 +13,7 @@ import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { formatNumber, formatShortenNumber } from '@/utils/format';
 
+import AnimatedNumber from './AnimatedNumber';
 import ModelCard from './ModelCard';
 import TokenProgress, { TokenProgressItem } from './TokenProgress';
 import { getDetailsToken } from './tokens';
@@ -116,7 +117,6 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
       ? detailTokens.totalTokens.credit
       : detailTokens.totalTokens!.token;
 
-  const shortTotal = (formatShortenNumber(totalCount) as string).toLowerCase?.();
   const detailTotal = formatNumber(totalCount);
 
   const averagePricing = formatNumber(
@@ -215,7 +215,10 @@ const TokenDetail = memo<TokenDetailProps>(({ meta, model, provider }) => {
     >
       <Center gap={2} horizontal style={{ cursor: 'default' }}>
         <Icon icon={isShowCredit ? BadgeCent : CoinsIcon} />
-        {shortTotal}
+        <AnimatedNumber
+          formatter={(value) => (formatShortenNumber(value) as string).toLowerCase?.()}
+          value={totalCount}
+        />
       </Center>
     </Popover>
   );

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -1,16 +1,29 @@
 'use client';
 
-import { ReactNode, forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ReactNode,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors } from '@/store/chat/selectors';
 
 import AutoScroll from '../AutoScroll';
 import SkeletonList from '../SkeletonList';
-import { VirtuosoContext, resetVirtuosoVisibleItems, setVirtuosoGlobalRef } from './VirtuosoContext';
+import {
+  VirtuosoContext,
+  resetVirtuosoVisibleItems,
+  setVirtuosoGlobalRef,
+} from './VirtuosoContext';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -32,10 +45,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
   const [atBottom, setAtBottom] = useState(true);
   const [isScrolling, setIsScrolling] = useState(false);
 
-  const [id, isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
-    chatSelectors.currentChatKey(s),
-    chatSelectors.currentChatLoadingState(s),
-    chatSelectors.isCurrentChatLoaded(s),
+  const [isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
+    displayMessageSelectors.currentChatLoadingState(s),
+    displayMessageSelectors.isCurrentDisplayChatLoaded(s),
   ]);
 
   const getFollowOutput = useCallback(() => {
@@ -53,9 +65,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     [atBottom],
   );
 
-  useEffect(() => {
-    scrollToBottom();
-  }, [id]);
+  const components = useMemo(() => ({ List }), []);
+  const computeItemKey = useCallback((index: number, item: string) => item, []);
 
   useEffect(() => {
     setVirtuosoGlobalRef(virtuosoRef);
@@ -71,8 +82,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     };
   }, []);
 
-  // overscan should be 3 times the height of the window
-  const overscan = typeof window !== 'undefined' ? window.innerHeight * 3 : 0;
+  // overscan should be 2 times the height of the window
+  const overscan = typeof window !== 'undefined' ? window.innerHeight * 2 : 0;
 
   // first time loading or not loaded
   if (isFirstLoading || !isCurrentChatLoaded) return <SkeletonList mobile={mobile} />;
@@ -81,12 +92,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
     <VirtuosoContext value={virtuosoRef}>
       <Virtuoso
         atBottomStateChange={setAtBottom}
-        atBottomThreshold={50 * (mobile ? 2 : 1)}
-        components={{
-          List,
-        }}
-
-        computeItemKey={(_, item) => item}
+        atBottomThreshold={200 * (mobile ? 2 : 1)}
+        components={components}
+        computeItemKey={computeItemKey}
         data={dataSource}
         followOutput={getFollowOutput}
         increaseViewportBy={overscan}
@@ -108,13 +116,14 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
           atBottom={atBottom}
           isScrolling={isScrolling}
           onScrollToBottom={(type) => {
+            const virtuoso = virtuosoRef.current;
             switch (type) {
               case 'auto': {
-                scrollToBottom();
+                virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
                 break;
               }
               case 'click': {
-                scrollToBottom('smooth');
+                virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
                 break;
               }
             }

package/src/features/Conversation/hooks/useChatListActionsBar.tsx

@@ -15,7 +15,6 @@ import {
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { isDeprecatedEdition } from '@/const/version';
 import { localeOptions } from '@/locales/resources';
 
 const translateStyle = css`
@@ -41,18 +40,16 @@ interface ChatListActionsBar {
 
 export const useChatListActionsBar = ({
   hasThread,
-}: { hasThread?: boolean } = {}): ChatListActionsBar => {
+  isRegenerating,
+}: { hasThread?: boolean; isRegenerating?: boolean } = {}): ChatListActionsBar => {
   const { t } = useTranslation(['common', 'chat']);
 
-  return useMemo(
+  return useMemo<ChatListActionsBar>(
     () => ({
       branching: {
-        disable: isDeprecatedEdition || undefined,
         icon: Split,
         key: 'branching',
-        label: !isDeprecatedEdition
-          ? t('branching', { defaultValue: 'Create Sub Topic' })
-          : t('branchingDisable'),
+        label: t('branching', { defaultValue: 'Create Sub Topic' }),
       },
       copy: {
         icon: Copy,
@@ -61,13 +58,13 @@ export const useChatListActionsBar = ({
       },
       del: {
         danger: true,
-        disable: hasThread || undefined,
+        disabled: hasThread,
         icon: Trash,
         key: 'del',
         label: hasThread ? t('messageAction.deleteDisabledByThreads', { ns: 'chat' }) : t('delete'),
       },
       delAndRegenerate: {
-        disable: hasThread || undefined,
+        disabled: hasThread || isRegenerating,
         icon: ListRestart,
         key: 'delAndRegenerate',
         label: t('messageAction.delAndRegenerate', {
@@ -89,6 +86,7 @@ export const useChatListActionsBar = ({
         label: '导出为 PDF',
       },
       regenerate: {
+        disabled: isRegenerating,
         icon: RotateCcw,
         key: 'regenerate',
         label: t('regenerate', { defaultValue: 'Regenerate' }),
@@ -114,6 +112,6 @@ export const useChatListActionsBar = ({
         label: t('tts.action', { ns: 'chat' }),
       },
     }),
-    [hasThread],
+    [hasThread, isRegenerating],
   );
 };

package/src/features/Portal/Thread/Chat/ChatInput/useSend.ts

@@ -17,7 +17,7 @@ export const useSendThreadMessage = () => {
   const canNotSend = useChatStore(threadSelectors.isSendButtonDisabledByMessage);
   const generating = useChatStore((s) => threadSelectors.isThreadAIGenerating(s));
   const stop = useChatStore((s) => s.stopGenerateMessage);
-  const [sendMessage, updateInputMessage] = useChatStore((s) => [
+  const [sendMessage, updateMessageInput] = useChatStore((s) => [
     s.sendThreadMessage,
     s.updateThreadInputMessage,
   ]);
@@ -54,11 +54,11 @@ export const useSendThreadMessage = () => {
 
     if (!shouldContinue) return;
 
-    updateInputMessage(inputMessage);
+    updateMessageInput(inputMessage);
 
     sendMessage({ message: inputMessage, ...params });
 
-    updateInputMessage('');
+    updateMessageInput('');
     threadInputEditor.clearContent();
     threadInputEditor.focus();
   };

package/src/hooks/useHotkeys/chatScope.ts

@@ -7,7 +7,7 @@ import { useClearCurrentMessages } from '@/features/ChatInput/ActionBar/Clear';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { HotkeyEnum, HotkeyScopeEnum } from '@/types/hotkey';
@@ -32,14 +32,22 @@ export const useOpenChatSettingsHotkey = () => {
 };
 
 export const useRegenerateMessageHotkey = () => {
-  const regenerateMessage = useChatStore((s) => s.regenerateMessage);
-  const lastMessage = useChatStore(chatSelectors.latestMessage, isEqual);
+  const [regenerateUserMessage, regenerateAssistantMessage] = useChatStore((s) => [
+    s.regenerateUserMessage,
+    s.regenerateAssistantMessage,
+  ]);
+  const lastMessage = useChatStore((s) => displayMessageSelectors.mainAIChats(s).at(-1), isEqual);
 
-  const disable = !lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system';
+  const disable = !lastMessage;
 
   return useHotkeyById(
     HotkeyEnum.RegenerateMessage,
-    () => !disable && regenerateMessage(lastMessage.id),
+    () => {
+      if (!lastMessage) return;
+      if (lastMessage.role === 'user') return regenerateUserMessage(lastMessage.id);
+
+      return regenerateAssistantMessage(lastMessage.id);
+    },
     {
       enableOnContentEditable: true,
       enabled: !disable,
@@ -49,7 +57,7 @@ export const useRegenerateMessageHotkey = () => {
 
 export const useDeleteAndRegenerateMessageHotkey = () => {
   const delAndRegenerateMessage = useChatStore((s) => s.delAndRegenerateMessage);
-  const lastMessage = useChatStore(chatSelectors.latestMessage, isEqual);
+  const lastMessage = useChatStore((s) => displayMessageSelectors.mainAIChats(s).at(-1), isEqual);
 
   const disable = !lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system';
 
@@ -65,7 +73,7 @@ export const useDeleteAndRegenerateMessageHotkey = () => {
 
 export const useDeleteLastMessageHotkey = () => {
   const deleteMessage = useChatStore((s) => s.deleteMessage);
-  const lastMessage = useChatStore(chatSelectors.latestMessage, isEqual);
+  const lastMessage = useChatStore((s) => displayMessageSelectors.mainAIChats(s).at(-1), isEqual);
 
   const disable = !lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system';
 

package/src/libs/trpc/client/lambda.ts

@@ -84,7 +84,7 @@ const customHttpBatchLink = httpBatchLink({
     // dynamic import to avoid circular dependency
     const { createHeaderWithAuth } = await import('@/services/_auth');
 
-    let provider: ModelProvider = ModelProvider.OpenAI;
+    let provider: ModelProvider | undefined;
     // for image page, we need to get the provider from the store
     log('Getting provider from store for image page: %s', location.pathname);
     if (location.pathname === '/image') {
@@ -96,8 +96,9 @@ const customHttpBatchLink = httpBatchLink({
       log('Getting provider from store for image page: %s', provider);
     }
 
-    // TODO: we need to support provider select for chat page
-    const headers = await createHeaderWithAuth({ provider });
+    // Only include provider in JWT for image operations
+    // For other operations (like knowledge base embedding), let server use its own config
+    const headers = await createHeaderWithAuth(provider ? { provider } : undefined);
     log('Headers: %O', headers);
     return headers;
   },

package/src/server/routers/lambda/__tests__/aiChat.test.ts

@@ -66,7 +66,7 @@ describe('aiChatRouter', () => {
       2,
       expect.objectContaining({
         content: expect.any(String),
-        fromModel: 'gpt-4o',
+        model: 'gpt-4o',
         parentId: 'm-user',
         role: 'assistant',
         sessionId: 's1',

package/src/server/routers/lambda/__tests__/integration/message.integration.test.ts

@@ -358,32 +358,6 @@ describe('Message Router Integration Tests', () => {
       expect(result).toHaveLength(1);
       expect(result[0].id).toBe(msg1.id);
     });
-
-    it('should support useGroup parameter', async () => {
-      const caller = messageRouter.createCaller(createTestContext(userId));
-
-      // 创建多个消息
-      await caller.createMessage({
-        content: 'Message 1',
-        role: 'assistant',
-        sessionId: testSessionId,
-      });
-
-      await caller.createMessage({
-        content: 'Message 2',
-        role: 'assistant',
-        sessionId: testSessionId,
-      });
-
-      // useGroup 参数应该影响消息分组展示
-      const result = await caller.getMessages({
-        sessionId: testSessionId,
-        useGroup: true,
-      });
-
-      expect(result).toBeDefined();
-      expect(Array.isArray(result)).toBe(true);
-    });
   });
 
   describe('removeMessages', () => {

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

@@ -96,6 +96,7 @@ export const aiChatRouter = router({
       const userMessageItem = await ctx.messageModel.create({
         content: input.newUserMessage.content,
         files: input.newUserMessage.files,
+        parentId: input.newUserMessage.parentId,
         role: 'user',
         sessionId: input.sessionId!,
         threadId: input.threadId,
@@ -113,9 +114,9 @@ export const aiChatRouter = router({
       );
       const assistantMessageItem = await ctx.messageModel.create({
         content: LOADING_FLAT,
-        fromModel: input.newAssistantMessage.model,
-        fromProvider: input.newAssistantMessage.provider,
+        model: input.newAssistantMessage.model,
         parentId: messageId,
+        provider: input.newAssistantMessage.provider,
         role: 'assistant',
         sessionId: input.sessionId!,
         threadId: input.threadId,