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

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

@@ -4,17 +4,15 @@ import { ActionIconGroupItemType } from '@lobehub/ui/es/ActionIconGroup';
 import { ActionIconGroupEvent } from '@lobehub/ui/es/ActionIconGroup/type';
 import { App } from 'antd';
 import { useSearchParams } from 'next/navigation';
-import { memo, use, useCallback, useMemo } from 'react';
+import { memo, use, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
-import { threadSelectors } from '@/store/chat/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+import { messageStateSelectors, threadSelectors } from '@/store/chat/selectors';
 
-import { VirtuosoContext } from '../../components/VirtualizedList/VirtuosoContext';
-import { InPortalThreadContext } from '../../context/InPortalThreadContext';
-import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+import { VirtuosoContext } from '../../../components/VirtualizedList/VirtuosoContext';
+import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
+import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
 
 interface UserActionsProps {
   data: UIChatMessage;
@@ -28,11 +26,12 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
   const topic = searchParams.get('topic');
 
   const [
-    isThreadMode,
+    // isThreadMode,
     hasThread,
+    isRegenerating,
     toggleMessageEditing,
     deleteMessage,
-    regenerateMessage,
+    regenerateUserMessage,
     translateMessage,
     ttsMessage,
     delAndRegenerateMessage,
@@ -41,12 +40,13 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
     resendThreadMessage,
     delAndResendThreadMessage,
   ] = useChatStore((s) => [
-    !!s.activeThreadId,
+    // !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
+    messageStateSelectors.isMessageRegenerating(id)(s),
 
     s.toggleMessageEditing,
     s.deleteMessage,
-    s.regenerateMessage,
+    s.regenerateUserMessage,
     s.translateMessage,
     s.ttsMessage,
     s.delAndRegenerateMessage,
@@ -56,22 +56,21 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
     s.delAndResendThreadMessage,
   ]);
 
-  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+  // const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
 
-  const { regenerate, edit, copy, divider, del, branching, tts, translate } = useChatListActionsBar(
-    { hasThread },
-  );
+  const { regenerate, edit, copy, divider, del, tts, translate } = useChatListActionsBar({
+    hasThread,
+    isRegenerating,
+  });
 
   const inPortalThread = use(InPortalThreadContext);
-  const inThread = isThreadMode || inPortalThread;
-
-  const items = useMemo(
-    () =>
-      [regenerate, edit, inThread || isGroupSession ? null : branching].filter(
-        Boolean,
-      ) as ActionIconGroupItemType[],
-    [inThread, isGroupSession],
-  );
+  // const inThread = isThreadMode || inPortalThread;
+
+  const items = [
+    regenerate,
+    edit,
+    // inThread || isGroupSession ? null : branching
+  ].filter(Boolean) as ActionIconGroupItemType[];
 
   const { message } = App.useApp();
 
@@ -113,7 +112,7 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
         case 'regenerate': {
           if (inPortalThread) {
             resendThreadMessage(id);
-          } else regenerateMessage(id);
+          } else regenerateUserMessage(id);
 
           // if this message is an error message, we need to delete it
           if (data.error) deleteMessage(id);
@@ -153,6 +152,8 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
         items: [edit, copy, divider, tts, translate, divider, regenerate, del],
       }}
       onActionClick={onActionClick}
+      size={'small'}
+      variant={'borderless'}
     />
   );
 });

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

@@ -0,0 +1,107 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  button: css`
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+
+    color: ${token.colorTextSecondary};
+
+    transition: all 0.2s ease;
+
+    &:hover:not(.${prefixCls}-disabled) {
+      color: ${token.colorText};
+      background: ${token.colorFillSecondary};
+    }
+
+    &.${prefixCls}-disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  `,
+  container: css`
+    user-select: none;
+
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+
+    height: 20px;
+    padding-inline: 4px;
+    border-radius: ${token.borderRadiusSM}px;
+  `,
+  text: css`
+    min-width: 24px;
+    height: 20px;
+
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+  `,
+}));
+
+interface MessageBranchProps {
+  activeBranchIndex: number;
+  count: number;
+  messageId: string;
+}
+
+const MessageBranch = memo<MessageBranchProps>(({ activeBranchIndex, count, messageId }) => {
+  const { styles, cx, prefixCls } = useStyles();
+  const switchMessageBranch = useChatStore((s) => s.switchMessageBranch);
+
+  const handlePrevious = () => {
+    if (activeBranchIndex > 0) {
+      switchMessageBranch(messageId, activeBranchIndex - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (activeBranchIndex < count - 1) {
+      switchMessageBranch(messageId, activeBranchIndex + 1);
+    }
+  };
+
+  const canGoPrevious = activeBranchIndex > 0;
+  const canGoNext = activeBranchIndex < count - 1;
+
+  return (
+    <Flexbox className={styles.container} horizontal>
+      <div
+        className={cx(styles.button, !canGoPrevious && `${prefixCls}-disabled`)}
+        onClick={handlePrevious}
+        role="button"
+        tabIndex={canGoPrevious ? 0 : -1}
+      >
+        <Icon icon={ChevronLeft} size={16} />
+      </div>
+      <Center className={styles.text}>
+        {activeBranchIndex + 1}/{count}
+      </Center>
+      <div
+        className={cx(styles.button, !canGoNext && `${prefixCls}-disabled`)}
+        onClick={handleNext}
+        role="button"
+        tabIndex={canGoNext ? 0 : -1}
+      >
+        <Icon icon={ChevronRight} size={16} />
+      </div>
+    </Flexbox>
+  );
+});
+
+export default MessageBranch;

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],
   );
 };