@lobehub/chat 1.135.3 → 1.135.5

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

@@ -1,34 +1,137 @@
-import { ReactNode, memo } from 'react';
+import { ChatMessage } from '@lobechat/types';
+import { useResponsive } from 'antd-style';
+import { ReactNode, memo, useCallback, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import BubblesLoading from '@/components/BubblesLoading';
-import { LOADING_FLAT } from '@/const/message';
-import { ChatMessage } from '@/types/message';
+import Avatar from '@/features/ChatItem/components/Avatar';
+import BorderSpacing from '@/features/ChatItem/components/BorderSpacing';
+import MessageContent from '@/features/ChatItem/components/MessageContent';
+import Title from '@/features/ChatItem/components/Title';
+import { useStyles } from '@/features/ChatItem/style';
+import { useUserAvatar } from '@/hooks/useUserAvatar';
+import { useAgentStore } from '@/store/agent';
+import { agentChatConfigSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
 
-import FileListViewer from './FileListViewer';
-import ImageFileListViewer from './ImageFileListViewer';
-import VideoFileListViewer from './VideoFileListViewer';
+import { useDoubleClickEdit } from '../../hooks/useDoubleClickEdit';
+import { UserActionsBar } from './Actions';
+import { UserBelowMessage } from './BelowMessage';
+import { UserMessageExtra } from './Extra';
+import { MarkdownRender as UserMarkdownRender } from './MarkdownRender';
+import { UserMessageContent } from './MessageContent';
 
-export const UserMessage = memo<
-  ChatMessage & {
-    editableContent: ReactNode;
-  }
->(({ id, editableContent, content, imageList, videoList, fileList }) => {
-  if (content === LOADING_FLAT) return <BubblesLoading />;
+interface UserMessageProps extends ChatMessage {
+  disableEditing?: boolean;
+  index: number;
+}
+
+const UserMessage = memo<UserMessageProps>((props) => {
+  const { id, ragQuery, content, createdAt, error, role, index, extra, disableEditing } = props;
+
+  const { mobile } = useResponsive();
+  const avatar = useUserAvatar();
+  const title = useUserStore(userProfileSelectors.displayUserName);
+
+  const displayMode = useAgentStore(agentChatConfigSelectors.displayMode);
+
+  const [editing, generating, isInRAGFlow] = useChatStore((s) => [
+    chatSelectors.isMessageEditing(id)(s),
+    chatSelectors.isMessageGenerating(id)(s),
+    chatSelectors.isMessageInRAGFlow(id)(s),
+  ]);
+
+  const loading = isInRAGFlow || generating;
+
+  const placement = displayMode === 'chat' ? 'right' : 'left';
+  const variant = displayMode === 'chat' ? 'bubble' : 'docs';
+
+  const { styles } = useStyles({
+    editing,
+    placement,
+    primary: true,
+    showTitle: false,
+    time: createdAt,
+    title,
+    variant,
+  });
+
+  const onDoubleClick = useDoubleClickEdit({ disableEditing, error, id, index, role });
+
+  const renderMessage = useCallback(
+    (editableContent: ReactNode) => (
+      <UserMessageContent {...props} editableContent={editableContent} />
+    ),
+    [props],
+  );
+
+  const markdownProps = useMemo(
+    () => ({
+      customRender: (dom: ReactNode, { text }: { text: string }) => (
+        <UserMarkdownRender displayMode={displayMode} dom={dom} id={id} text={text} />
+      ),
+    }),
+    [displayMode],
+  );
 
   return (
-    <Flexbox gap={8} id={id}>
-      {editableContent}
-      {imageList && imageList?.length > 0 && <ImageFileListViewer items={imageList} />}
-      {videoList && videoList?.length > 0 && <VideoFileListViewer items={videoList} />}
-      {fileList && fileList?.length > 0 && (
-        <div style={{ marginTop: 8 }}>
-          <FileListViewer items={fileList} />
-        </div>
-      )}
+    <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
+        align={placement === 'left' ? 'flex-start' : 'flex-end'}
+        className={styles.messageContainer}
+      >
+        <Title
+          avatar={{ avatar, title }}
+          placement={placement}
+          showTitle={false}
+          time={createdAt}
+        />
+        <Flexbox
+          align={placement === 'left' ? 'flex-start' : 'flex-end'}
+          className={styles.messageContent}
+          direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}
+          gap={8}
+        >
+          <Flexbox width={'100%'}>
+            <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 && (
+            <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
+              <UserActionsBar data={props} id={id} index={index} />
+            </Flexbox>
+          )}
+        </Flexbox>
+        <UserBelowMessage content={content} id={id} ragQuery={ragQuery} />
+      </Flexbox>
+      {mobile && variant === 'bubble' && <BorderSpacing borderSpacing={32} />}
     </Flexbox>
   );
 });
 
-export * from './BelowMessage';
-export { MarkdownRender as UserMarkdownRender } from './MarkdownRender';
+export default UserMessage;

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

@@ -0,0 +1,152 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { isDesktop } from '@/const/version';
+import {
+  removeVirtuosoVisibleItem,
+  upsertVirtuosoVisibleItem,
+} from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import History from '../components/History';
+import { InPortalThreadContext } from '../context/InPortalThreadContext';
+import AssistantMessage from './Assistant';
+import UserMessage from './User';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  loading: css`
+    opacity: 0.6;
+  `,
+  message: css`
+    position: relative;
+    // prevent the textarea too long
+    .${prefixCls}-input {
+      max-height: 900px;
+    }
+  `,
+}));
+
+export interface ChatListItemProps {
+  className?: string;
+  disableEditing?: boolean;
+  enableHistoryDivider?: boolean;
+  endRender?: ReactNode;
+  id: string;
+  inPortalThread?: boolean;
+  index: number;
+}
+
+const Item = memo<ChatListItemProps>(
+  ({
+    className,
+    enableHistoryDivider,
+    id,
+    endRender,
+    disableEditing,
+    inPortalThread = false,
+    index,
+  }) => {
+    const { styles, cx } = useStyles();
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    const item = useChatStore(chatSelectors.getMessageById(id), isEqual);
+
+    const [isMessageLoading] = useChatStore((s) => [chatSelectors.isMessageLoading(id)(s)]);
+
+    // ======================= Performance Optimization ======================= //
+    // these useMemo/useCallback are all for the performance optimization
+    // maybe we can remove it in React 19
+    // ======================================================================== //
+
+    useEffect(() => {
+      if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') return;
+
+      const element = containerRef.current;
+      if (!element) return;
+
+      const root = element.closest('[data-virtuoso-scroller]');
+      const thresholds = [0, 0.01, 0.1, 0.25, 0.5, 0.75, 0.9, 1];
+      const options: any = { threshold: thresholds };
+
+      if (root instanceof Element) options.root = root;
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.target !== element) return;
+
+          if (entry.isIntersecting) {
+            const { bottom, top } = entry.intersectionRect;
+
+            upsertVirtuosoVisibleItem(index, {
+              bottom,
+              ratio: entry.intersectionRatio,
+              top,
+            });
+          } else {
+            removeVirtuosoVisibleItem(index);
+          }
+        });
+      }, options);
+
+      observer.observe(element);
+
+      return () => {
+        observer.disconnect();
+        removeVirtuosoVisibleItem(index);
+      };
+    }, [index]);
+
+    const onContextMenu = useCallback(async () => {
+      if (isDesktop && item) {
+        const { electronSystemService } = await import('@/services/electron/system');
+
+        electronSystemService.showContextMenu('chat', {
+          content: item.content,
+          hasError: !!item.error,
+          messageId: id,
+          role: item.role,
+        });
+      }
+    }, [id, item]);
+
+    const renderContent = useMemo(() => {
+      switch (item?.role) {
+        case 'user': {
+          return <UserMessage {...item} disableEditing={disableEditing} index={index} />;
+        }
+
+        case 'assistant': {
+          return <AssistantMessage {...item} disableEditing={disableEditing} index={index} />;
+        }
+      }
+
+      return null;
+    }, [item]);
+
+    if (!item) return;
+
+    return (
+      <InPortalThreadContext.Provider value={inPortalThread}>
+        {enableHistoryDivider && <History />}
+        <Flexbox
+          className={cx(styles.message, className, isMessageLoading && styles.loading)}
+          data-index={index}
+          onContextMenu={onContextMenu}
+          ref={containerRef}
+        >
+          {renderContent}
+          {endRender}
+        </Flexbox>
+      </InPortalThreadContext.Provider>
+    );
+  },
+);
+
+Item.displayName = 'ChatItem';
+
+export default Item;

package/src/features/Conversation/{Extras → components/Extras}/Usage/UsageDetail/ModelCard.tsx

@@ -1,16 +1,17 @@
+import { getCachedTextInputUnitRate, getWriteCacheInputUnitRate } from '@lobechat/utils';
 import { ModelIcon } from '@lobehub/icons';
 import { Icon, Segmented, Tooltip } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ArrowDownToDot, ArrowUpFromDot, BookUp2Icon, CircleFadingArrowUp } from 'lucide-react';
+import { LobeDefaultAiModelListItem } from 'model-bank';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { getPrice } from '@/features/Conversation/Extras/Usage/UsageDetail/pricing';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
-import { LobeDefaultAiModelListItem } from '../../../../../../packages/model-bank/src/types/aiModel';
-import { getCachedTextInputUnitRate, getWriteCacheInputUnitRate } from '@/utils/pricing';
+
+import { getPrice } from './pricing';
 
 export const useStyles = createStyles(({ css, token }) => {
   return {

package/src/features/Conversation/{Extras → components/Extras}/Usage/UsageDetail/pricing.ts

@@ -1,11 +1,12 @@
+import { ModelPriceCurrency, Pricing } from 'model-bank';
+
 import {
   formatPriceByCurrency,
   getCachedTextInputUnitRate,
   getTextInputUnitRate,
   getTextOutputUnitRate,
   getWriteCacheInputUnitRate,
-} from '@lobechat/utils';
-import { ModelPriceCurrency, Pricing } from 'model-bank';
+} from '@/utils/index';
 
 export const getPrice = (pricing: Pricing) => {
   const inputRate = getTextInputUnitRate(pricing);

package/src/features/Conversation/{Extras → components/Extras}/Usage/UsageDetail/tokens.test.ts

@@ -1,8 +1,7 @@
+import { ModelUsage } from '@lobechat/types';
+import { LobeDefaultAiModelListItem } from 'model-bank';
 import { describe, expect, it } from 'vitest';
 
-import { ModelUsage } from '@/types/message';
-
-import { LobeDefaultAiModelListItem } from '../../../../../../packages/model-bank/src/types/aiModel';
 import { getDetailsToken } from './tokens';
 
 describe('getDetailsToken', () => {

package/src/features/Conversation/components/{ChatItem/ShareMessageModal → ShareMessageModal}/ShareImage/Preview.tsx

@@ -5,7 +5,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import pkg from '@/../package.json';
 import { ProductLogo } from '@/components/Branding';
 import { ChatItem } from '@/features/Conversation';
 import PluginTag from '@/features/PluginTag';
@@ -15,6 +14,7 @@ import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
 
+import pkg from '../../../../../../package.json';
 import { useContainerStyles } from '../style';
 import { useStyles } from './style';
 import { FieldType } from './type';

package/src/features/Conversation/components/{ChatItem/ShareMessageModal → ShareMessageModal}/ShareText/index.tsx

@@ -1,4 +1,3 @@
-import { exportFile } from '@lobechat/utils/client';
 import { Button, copyToClipboard } from '@lobehub/ui';
 import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
@@ -11,6 +10,7 @@ import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
+import { exportFile } from '@/utils/client';
 
 import { useStyles } from '../style';
 import Preview from './Preview';

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

@@ -85,6 +85,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
         components={{
           List,
         }}
+
         computeItemKey={(_, item) => item}
         data={dataSource}
         followOutput={getFollowOutput}

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

@@ -1,9 +1,12 @@
 import type { ActionIconGroupItemType } from '@lobehub/ui';
+import { css, cx } from 'antd-style';
 import {
   Copy,
   DownloadIcon,
   Edit,
+  LanguagesIcon,
   ListRestart,
+  Play,
   RotateCcw,
   Share2,
   Split,
@@ -13,6 +16,14 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { isDeprecatedEdition } from '@/const/version';
+import { localeOptions } from '@/locales/resources';
+
+const translateStyle = css`
+  .ant-dropdown-menu-sub {
+    overflow-y: scroll;
+    max-height: 400px;
+  }
+`;
 
 interface ChatListActionsBar {
   branching: ActionIconGroupItemType;
@@ -24,12 +35,14 @@ interface ChatListActionsBar {
   export: ActionIconGroupItemType;
   regenerate: ActionIconGroupItemType;
   share: ActionIconGroupItemType;
+  translate: ActionIconGroupItemType;
+  tts: ActionIconGroupItemType;
 }
 
 export const useChatListActionsBar = ({
   hasThread,
 }: { hasThread?: boolean } = {}): ChatListActionsBar => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation(['common', 'chat']);
 
   return useMemo(
     () => ({
@@ -85,6 +98,21 @@ export const useChatListActionsBar = ({
         key: 'share',
         label: t('share', { defaultValue: 'Share' }),
       },
+      translate: {
+        children: localeOptions.map((i) => ({
+          key: i.value,
+          label: t(`lang.${i.value}`),
+        })),
+        icon: LanguagesIcon,
+        key: 'translate',
+        label: t('translate.action', { ns: 'chat' }),
+        popupClassName: cx(translateStyle),
+      },
+      tts: {
+        icon: Play,
+        key: 'tts',
+        label: t('tts.action', { ns: 'chat' }),
+      },
     }),
     [hasThread],
   );

package/src/features/Conversation/hooks/useDoubleClickEdit.ts

@@ -0,0 +1,42 @@
+import { MouseEventHandler, use, useCallback } from 'react';
+
+import { useChatStore } from '@/store/chat';
+
+import { VirtuosoContext } from '../components/VirtualizedList/VirtuosoContext';
+
+interface UseDoubleClickEditProps {
+  disableEditing?: boolean;
+  error: any;
+  id: string;
+  index: number;
+  role: string;
+}
+
+export const useDoubleClickEdit = ({
+  disableEditing,
+  role,
+  error,
+  id,
+  index,
+}: UseDoubleClickEditProps) => {
+  const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
+  const virtuosoRef = use(VirtuosoContext);
+
+  return useCallback<MouseEventHandler<HTMLDivElement>>(
+    (e) => {
+      if (
+        disableEditing ||
+        error ||
+        id === 'default' ||
+        !e.altKey ||
+        !['assistant', 'user'].includes(role)
+      )
+        return;
+
+      toggleMessageEditing(id, true);
+
+      virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
+    },
+    [role, disableEditing],
+  );
+};

package/src/features/Conversation/index.ts

@@ -1,3 +1,3 @@
-export { default as ChatItem } from './components/ChatItem';
 export { default as SkeletonList } from './components/SkeletonList';
 export { default as VirtualizedList } from './components/VirtualizedList';
+export { default as ChatItem } from './Messages';

package/src/features/Conversation/types/{index.tsx → index.ts}

@@ -1,14 +1,9 @@
-import { type ActionIconGroupEvent } from '@lobehub/ui';
 import { type ChatItemProps } from '@lobehub/ui/chat';
 import { FC, ReactNode } from 'react';
 
 import { LLMRoleType } from '@/types/llm';
 import { ChatMessage } from '@/types/message';
 
-import { type ActionsBarProps } from '../components/ChatItem/ActionsBar';
-
-export type OnActionsClick = (action: ActionIconGroupEvent, message: ChatMessage) => void;
-export type OnAvatarsClick = (role: RenderRole) => ChatItemProps['onAvatarClick'];
 export type RenderRole = LLMRoleType | 'default' | 'history' | string;
 export type RenderMessage = FC<ChatMessage & { editableContent: ReactNode }>;
 export type RenderBelowMessage = FC<ChatMessage>;
@@ -20,8 +15,6 @@ export type MarkdownCustomRender = (props: {
   text: string;
 }) => ReactNode;
 
-export type RenderAction = FC<ActionsBarProps & ChatMessage>;
-
 export type RenderItem = FC<{ key: string } & ChatMessage & ListItemProps>;
 
 export interface ListItemProps {

package/src/features/Portal/Thread/Chat/ChatItem.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useMemo } from 'react';
 
 import { ChatItem } from '@/features/Conversation';
-import ActionsBar from '@/features/Conversation/components/ChatItem/ActionsBar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
@@ -30,18 +29,12 @@ const ThreadChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
 
   const isParentMessage = index <= threadStartMessageIndex;
 
-  const actionBar = useMemo(
-    () => !isParentMessage && <ActionsBar id={id} inPortalThread index={index} />,
-    [id, isParentMessage],
-  );
-
   const enableHistoryDivider = useAgentStore(
     agentChatConfigSelectors.enableHistoryDivider(historyLength, index),
   );
 
   return (
     <ChatItem
-      actionBar={actionBar}
       disableEditing={isParentMessage}
       enableHistoryDivider={enableHistoryDivider}
       endRender={endRender}