@lobehub/chat 1.33.4 → 1.34.0

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

@@ -1,7 +1,9 @@
-import { ReactNode, memo } from 'react';
+import { Skeleton } from 'antd';
+import { ReactNode, Suspense, memo, useContext } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { LOADING_FLAT } from '@/const/message';
+import { InPortalThreadContext } from '@/features/Conversation/components/ChatItem/InPortalThreadContext';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
@@ -18,6 +20,7 @@ export const AssistantMessage = memo<
   const editing = useChatStore(chatSelectors.isMessageEditing(id));
   const generating = useChatStore(chatSelectors.isMessageGenerating(id));
 
+  const inThread = useContext(InPortalThreadContext);
   const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
 
   return editing ? (
@@ -40,19 +43,24 @@ export const AssistantMessage = memo<
         />
       )}
       {tools && (
-        <Flexbox gap={8}>
-          {tools.map((toolCall, index) => (
-            <ToolCall
-              apiName={toolCall.apiName}
-              arguments={toolCall.arguments}
-              id={toolCall.id}
-              identifier={toolCall.identifier}
-              index={index}
-              key={toolCall.id}
-              messageId={id}
-            />
-          ))}
-        </Flexbox>
+        <Suspense
+          fallback={<Skeleton.Button active style={{ height: 46, minWidth: 200, width: '100%' }} />}
+        >
+          <Flexbox gap={8}>
+            {tools.map((toolCall, index) => (
+              <ToolCall
+                apiName={toolCall.apiName}
+                arguments={toolCall.arguments}
+                id={toolCall.id}
+                identifier={toolCall.identifier}
+                index={index}
+                key={toolCall.id}
+                messageId={id}
+                showPortal={!inThread}
+              />
+            ))}
+          </Flexbox>
+        </Suspense>
       )}
     </Flexbox>
   );

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

@@ -8,14 +8,12 @@ import { sessionSelectors } from '@/store/session/selectors';
 import { MarkdownCustomRender, RenderBelowMessage, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
 import { DefaultBelowMessage, DefaultMessage } from './Default';
-import { ToolMessage } from './Tool';
 import { UserBelowMessage, UserMarkdownRender, UserMessage } from './User';
 
 export const renderMessages: Record<string, RenderMessage> = {
   assistant: AssistantMessage,
   default: DefaultMessage,
   function: DefaultMessage,
-  tool: ToolMessage,
   user: UserMessage,
 };
 

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

@@ -12,7 +12,7 @@ interface AutoScrollProps {
 }
 const AutoScroll = memo<AutoScrollProps>(({ atBottom, isScrolling, onScrollToBottom }) => {
   const trackVisibility = useChatStore(chatSelectors.isAIGenerating);
-  const str = useChatStore(chatSelectors.chatsMessageString);
+  const str = useChatStore(chatSelectors.mainAIChatsMessageString);
 
   useEffect(() => {
     if (atBottom && trackVisibility && !isScrolling) {

package/src/features/Conversation/components/ChatItem/ActionsBar.tsx

@@ -1,18 +1,21 @@
 import { ActionEvent, ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { MessageRoleType } from '@/types/message';
 
-import { renderActions, useActionsClick } from '../../Actions';
+import { renderActions } from '../../Actions';
 import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
 
 export type ActionsBarProps = ActionIconGroupProps;
 
 const ActionsBar = memo<ActionsBarProps>((props) => {
   const { regenerate, edit, copy, divider, del } = useChatListActionsBar();
+
   return (
     <ActionIconGroup
       dropdownMenu={[edit, copy, regenerate, divider, del]}
@@ -25,12 +28,36 @@ const ActionsBar = memo<ActionsBarProps>((props) => {
 
 interface ActionsProps {
   id: string;
+  inPortalThread?: boolean;
 }
 
-const Actions = memo<ActionsProps>(({ id }) => {
+const Actions = memo<ActionsProps>(({ id, inPortalThread }) => {
   const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
-  const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
-  const onActionsClick = useActionsClick();
+  const { t } = useTranslation('common');
+  const [
+    deleteMessage,
+    regenerateMessage,
+    translateMessage,
+    ttsMessage,
+    delAndRegenerateMessage,
+    copyMessage,
+    openThreadCreator,
+    resendThreadMessage,
+    delAndResendThreadMessage,
+    toggleMessageEditing,
+  ] = useChatStore((s) => [
+    s.deleteMessage,
+    s.regenerateMessage,
+    s.translateMessage,
+    s.ttsMessage,
+    s.delAndRegenerateMessage,
+    s.copyMessage,
+    s.openThreadCreator,
+    s.resendThreadMessage,
+    s.delAndResendThreadMessage,
+    s.toggleMessageEditing,
+  ]);
+  const { message } = App.useApp();
 
   const handleActionClick = useCallback(
     async (action: ActionEvent) => {
@@ -41,7 +68,54 @@ const Actions = memo<ActionsProps>(({ id }) => {
       }
       if (!item) return;
 
-      onActionsClick(action, item);
+      switch (action.key) {
+        case 'copy': {
+          await copyMessage(id, item.content);
+          message.success(t('copySuccess', { defaultValue: 'Copy Success' }));
+          break;
+        }
+        case 'branching': {
+          openThreadCreator(id);
+          break;
+        }
+
+        case 'del': {
+          deleteMessage(id);
+          break;
+        }
+
+        case 'regenerate': {
+          if (inPortalThread) {
+            resendThreadMessage(id);
+          } else regenerateMessage(id);
+
+          // if this message is an error message, we need to delete it
+          if (item.error) deleteMessage(id);
+          break;
+        }
+
+        case 'delAndRegenerate': {
+          if (inPortalThread) {
+            delAndResendThreadMessage(id);
+          } else {
+            delAndRegenerateMessage(id);
+          }
+          break;
+        }
+
+        case 'tts': {
+          ttsMessage(id);
+          break;
+        }
+      }
+
+      if (action.keyPath.at(-1) === 'translate') {
+        // click the menu item with translate item, the result is:
+        // key: 'en-US'
+        // keyPath: ['en-US','translate']
+        const lang = action.keyPath[0];
+        translateMessage(id, lang);
+      }
     },
     [item],
   );

package/src/features/Conversation/components/ChatItem/InPortalThreadContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const InPortalThreadContext = createContext(false);

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

@@ -25,6 +25,7 @@ import {
 } from '../../Messages';
 import History from '../History';
 import { markdownElements } from '../MarkdownElements';
+import { InPortalThreadContext } from './InPortalThreadContext';
 import { processWithArtifact } from './utils';
 
 const rehypePlugins = markdownElements.map((element) => element.rehypePlugin);
@@ -45,14 +46,24 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 export interface ChatListItemProps {
   actionBar?: ReactNode;
   className?: string;
+  disableEditing?: boolean;
   enableHistoryDivider?: boolean;
   endRender?: ReactNode;
   id: string;
+  inPortalThread?: boolean;
   index: number;
 }
 
 const Item = memo<ChatListItemProps>(
-  ({ className, enableHistoryDivider, id, actionBar, endRender }) => {
+  ({
+    className,
+    enableHistoryDivider,
+    id,
+    actionBar,
+    endRender,
+    disableEditing,
+    inPortalThread = false,
+  }) => {
     const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
     const { t } = useTranslation('common');
     const { styles, cx } = useStyles();
@@ -169,13 +180,13 @@ const Item = memo<ChatListItemProps>(
 
     const onDoubleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
       (e) => {
-        if (!item) return;
+        if (!item || disableEditing) return;
         if (item.id === 'default' || item.error) return;
         if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
           toggleMessageEditing(id, true);
         }
       },
-      [item],
+      [item, disableEditing],
     );
 
     const text = useMemo(
@@ -197,7 +208,7 @@ const Item = memo<ChatListItemProps>(
 
     return (
       item && (
-        <>
+        <InPortalThreadContext.Provider value={inPortalThread}>
           {enableHistoryDivider && <History />}
           <Flexbox className={cx(styles.message, className, isMessageLoading && styles.loading)}>
             <ChatItem
@@ -225,7 +236,7 @@ const Item = memo<ChatListItemProps>(
             />
             {endRender}
           </Flexbox>
-        </>
+        </InPortalThreadContext.Provider>
       )
     );
   },

package/src/features/Conversation/components/MarkdownElements/LobeArtifact/Render/index.tsx

@@ -1,7 +1,8 @@
 import { Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { Loader2 } from 'lucide-react';
-import { memo, useEffect } from 'react';
+import { memo, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -9,6 +10,7 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
 import { dotLoading } from '@/styles/loading';
 
+import { InPortalThreadContext } from '../../../ChatItem/InPortalThreadContext';
 import { MarkdownElementProps } from '../../type';
 import ArtifactIcon from './Icon';
 
@@ -60,6 +62,8 @@ const Render = memo<ArtifactProps>(({ identifier, title, type, language, childre
   const hasChildren = !!children;
   const str = ((children as string) || '').toString?.();
 
+  const inThread = useContext(InPortalThreadContext);
+  const { message } = App.useApp();
   const [isGenerating, isArtifactTagClosed, currentArtifactMessageId, openArtifact, closeArtifact] =
     useChatStore((s) => {
       return [
@@ -90,6 +94,10 @@ const Render = memo<ArtifactProps>(({ identifier, title, type, language, childre
           if (currentArtifactMessageId === id) {
             closeArtifact();
           } else {
+            if (inThread) {
+              message.info(t('artifact.inThread'));
+              return;
+            }
             openArtifactUI();
           }
         }}

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

@@ -0,0 +1,19 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { Divider } from 'antd';
+import { GitBranch } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ThreadDivider = memo(() => {
+  const { t } = useTranslation('chat');
+
+  return (
+    <div style={{ padding: '0 20px' }}>
+      <Divider style={{ margin: 0, padding: '20px 0' }}>
+        <Tag icon={<Icon icon={GitBranch} />}>{t('thread.divider')}</Tag>
+      </Divider>
+    </div>
+  );
+});
+
+export default ThreadDivider;

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

@@ -1,9 +1,12 @@
 import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
-import { Copy, Edit, ListRestart, RotateCcw, Trash } from 'lucide-react';
+import { Copy, Edit, ListRestart, RotateCcw, Split, Trash } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { isServerMode } from '@/const/version';
+
 interface ChatListActionsBar {
+  branching: ActionIconGroupItems;
   copy: ActionIconGroupItems;
   del: ActionIconGroupItems;
   delAndRegenerate: ActionIconGroupItems;
@@ -12,11 +15,21 @@ interface ChatListActionsBar {
   regenerate: ActionIconGroupItems;
 }
 
-export const useChatListActionsBar = (): ChatListActionsBar => {
+export const useChatListActionsBar = ({
+  hasThread,
+}: { hasThread?: boolean } = {}): ChatListActionsBar => {
   const { t } = useTranslation('common');
 
   return useMemo(
     () => ({
+      branching: {
+        disable: !isServerMode,
+        icon: Split,
+        key: 'branching',
+        label: isServerMode
+          ? t('branching', { defaultValue: 'Create Sub Topic' })
+          : t('branchingDisable'),
+      },
       copy: {
         icon: Copy,
         key: 'copy',
@@ -24,11 +37,13 @@ export const useChatListActionsBar = (): ChatListActionsBar => {
       },
       del: {
         danger: true,
+        disable: hasThread,
         icon: Trash,
         key: 'del',
-        label: t('delete', { defaultValue: 'Delete' }),
+        label: hasThread ? t('messageAction.deleteDisabledByThreads', { ns: 'chat' }) : t('delete'),
       },
       delAndRegenerate: {
+        disable: hasThread,
         icon: ListRestart,
         key: 'delAndRegenerate',
         label: t('messageAction.delAndRegenerate', {
@@ -50,6 +65,6 @@ export const useChatListActionsBar = (): ChatListActionsBar => {
         label: t('regenerate', { defaultValue: 'Regenerate' }),
       },
     }),
-    [],
+    [hasThread],
   );
 };

package/src/features/Portal/Thread/Chat/ChatInput/Footer.tsx

@@ -0,0 +1,90 @@
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import StopLoadingIcon from '@/components/StopLoading';
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+
+import { useSendThreadMessage } from './useSend';
+
+const useStyles = createStyles(({ css, prefixCls, token }) => {
+  return {
+    loadingButton: css`
+      display: flex;
+      align-items: center;
+    `,
+    overrideAntdIcon: css`
+      .${prefixCls}-btn.${prefixCls}-btn-icon-only {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .${prefixCls}-btn.${prefixCls}-dropdown-trigger {
+        &::before {
+          background-color: ${rgba(token.colorBgLayout, 0.1)} !important;
+        }
+      }
+    `,
+  };
+});
+
+interface FooterProps {
+  onExpandChange: (expand: boolean) => void;
+}
+
+const Footer = memo<FooterProps>(({ onExpandChange }) => {
+  const { t } = useTranslation('chat');
+
+  const { styles } = useStyles();
+
+  const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
+    threadSelectors.isThreadAIGenerating(s),
+    s.stopGenerateMessage,
+  ]);
+
+  const { send: sendMessage, canSend } = useSendThreadMessage();
+
+  return (
+    <Flexbox
+      align={'end'}
+      className={styles.overrideAntdIcon}
+      distribution={'space-between'}
+      flex={'none'}
+      gap={8}
+      horizontal
+      padding={'0 24px'}
+    >
+      <div />
+      {isAIGenerating ? (
+        <Button
+          className={styles.loadingButton}
+          icon={<StopLoadingIcon />}
+          onClick={stopGenerateMessage}
+        >
+          {t('input.stop')}
+        </Button>
+      ) : (
+        <Button
+          disabled={!canSend}
+          loading={!canSend}
+          onClick={() => {
+            sendMessage();
+            onExpandChange?.(false);
+          }}
+          type={'primary'}
+        >
+          {t('input.send')}
+        </Button>
+      )}
+    </Flexbox>
+  );
+});
+
+Footer.displayName = 'Footer';
+
+export default Footer;

package/src/features/Portal/Thread/Chat/ChatInput/TextArea.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+import InputArea from '@/features/ChatInput/Desktop/InputArea';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import { useSendThreadMessage } from './useSend';
+
+const TextArea = memo<{ onSend?: () => void }>(({ onSend }) => {
+  const [loading, value, updateInputMessage] = useChatStore((s) => [
+    chatSelectors.isAIGenerating(s),
+    s.threadInputMessage,
+    s.updateThreadInputMessage,
+  ]);
+  const { send: sendMessage } = useSendThreadMessage();
+
+  return (
+    <InputArea
+      loading={loading}
+      onChange={updateInputMessage}
+      onSend={() => {
+        sendMessage();
+        onSend?.();
+      }}
+      value={value}
+    />
+  );
+});
+
+export default TextArea;

package/src/features/Portal/Thread/Chat/ChatInput/index.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Alert } from '@lobehub/ui';
+import Link from 'next/link';
+import { memo } from 'react';
+
+import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
+import DesktopChatInput, { FooterRender } from '@/features/ChatInput/Desktop';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+import Footer from './Footer';
+import TextArea from './TextArea';
+
+const leftActions = ['stt', 'portalToken'] as ActionKeys[];
+
+const rightActions = [] as ActionKeys[];
+
+const renderTextArea = (onSend: () => void) => <TextArea onSend={onSend} />;
+const renderFooter: FooterRender = (props) => <Footer {...props} />;
+
+const Desktop = memo(() => {
+  const [inputHeight, hideThreadLimitAlert, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.threadInputHeight(s),
+    systemStatusSelectors.systemStatus(s).hideThreadLimitAlert,
+    s.updateSystemStatus,
+  ]);
+
+  return (
+    <>
+      {!hideThreadLimitAlert && (
+        <Alert
+          banner
+          closable
+          message={
+            <div>
+              子话题暂不支持文件/图片上传，如有需求，欢迎留言：
+              <Link
+                href={'https://github.com/lobehub/lobe-chat/discussions/4717'}
+                style={{ textDecoration: 'underline' }}
+              >
+                💬 讨论
+              </Link>
+            </div>
+          }
+          onClose={() => {
+            updateSystemStatus({ hideThreadLimitAlert: true });
+          }}
+          type={'info'}
+        />
+      )}
+      <DesktopChatInput
+        inputHeight={inputHeight}
+        leftActions={leftActions}
+        onInputHeightChange={(height) => {
+          updateSystemStatus({ threadInputHeight: height });
+        }}
+        renderFooter={renderFooter}
+        renderTextArea={renderTextArea}
+        rightActions={rightActions}
+      />
+    </>
+  );
+});
+
+export default Desktop;

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

@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { threadSelectors } from '@/store/chat/selectors';
+import { SendMessageParams } from '@/types/message';
+
+export type UseSendMessageParams = Pick<
+  SendMessageParams,
+  'onlyAddUserMessage' | 'isWelcomeQuestion'
+>;
+
+export const useSendThreadMessage = () => {
+  const [sendMessage, updateInputMessage] = useChatStore((s) => [
+    s.sendThreadMessage,
+    s.updateThreadInputMessage,
+  ]);
+
+  const isSendButtonDisabledByMessage = useChatStore(threadSelectors.isSendButtonDisabledByMessage);
+
+  const canSend = !isSendButtonDisabledByMessage;
+
+  const send = useCallback((params: UseSendMessageParams = {}) => {
+    const store = useChatStore.getState();
+    if (threadSelectors.isThreadAIGenerating(store)) return;
+
+    const isSendButtonDisabledByMessage = threadSelectors.isSendButtonDisabledByMessage(
+      useChatStore.getState(),
+    );
+
+    const canSend = !isSendButtonDisabledByMessage;
+    if (!canSend) return;
+
+    // if there is no message and no image, then we should not send the message
+    if (!store.threadInputMessage) return;
+
+    sendMessage({ message: store.threadInputMessage, ...params });
+
+    updateInputMessage('');
+
+    // const hasSystemRole = agentSelectors.hasSystemRole(useAgentStore.getState());
+    // const agentSetting = useAgentStore.getState().agentSettingInstance;
+
+    // // if there is a system role, then we need to use agent setting instance to autocomplete agent meta
+    // if (hasSystemRole && !!agentSetting) {
+    //   agentSetting.autocompleteAllMeta();
+    // }
+  }, []);
+
+  return useMemo(() => ({ canSend, send }), [canSend]);
+};