@lobehub/lobehub 2.0.0-next.187 → 2.0.0-next.189

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

@@ -1,10 +1,16 @@
 import { type UIChatMessage } from '@lobechat/types';
-import { ActionIconGroup } from '@lobehub/ui';
+import { ActionIconGroup, createRawModal } from '@lobehub/ui';
 import type { ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
-import { memo, useCallback, useMemo, useState } from 'react';
-
-import ShareMessageModal from '../../../components/ShareMessageModal';
-import { messageStateSelectors, useConversationStore } from '../../../store';
+import { memo, useCallback, useMemo } from 'react';
+
+import ShareMessageModal, { type ShareModalProps } from '../../../components/ShareMessageModal';
+import {
+  Provider,
+  createStore,
+  messageStateSelectors,
+  useConversationStore,
+  useConversationStoreApi,
+} from '../../../store';
 import type {
   MessageActionItem,
   MessageActionItemOrDivider,
@@ -57,7 +63,30 @@ interface AssistantActionsBarProps {
 export const AssistantActionsBar = memo<AssistantActionsBarProps>(
   ({ actionsConfig, id, data, index }) => {
     const { error, tools } = data;
-    const [showShareModal, setShareModal] = useState(false);
+    const store = useConversationStoreApi();
+
+    const handleOpenShareModal = useCallback(() => {
+      createRawModal(
+        (props: ShareModalProps) => (
+          <Provider
+            createStore={() => {
+              const state = store.getState();
+              return createStore({
+                context: state.context,
+                hooks: state.hooks,
+                skipFetch: state.skipFetch,
+              });
+            }}
+          >
+            <ShareMessageModal {...props} />
+          </Provider>
+        ),
+        {
+          message: data,
+        },
+        { onCloseKey: 'onCancel', openKey: 'open' },
+      );
+    }, [data, store]);
 
     const isCollapsed = useConversationStore(messageStateSelectors.isMessageCollapsed(id));
 
@@ -65,7 +94,7 @@ export const AssistantActionsBar = memo<AssistantActionsBarProps>(
       data,
       id,
       index,
-      onOpenShareModal: () => setShareModal(true),
+      onOpenShareModal: handleOpenShareModal,
     });
 
     const hasTools = !!tools;
@@ -174,17 +203,9 @@ export const AssistantActionsBar = memo<AssistantActionsBarProps>(
       [allActions],
     );
 
-    const shareOnCancel = useCallback(() => {
-      setShareModal(false);
-    }, []);
     if (error) return <ErrorActionsBar actions={defaultActions} onActionClick={handleAction} />;
 
-    return (
-      <>
-        <ActionIconGroup items={items} menu={{ items: menu }} onActionClick={handleAction} />
-        <ShareMessageModal message={data} onCancel={shareOnCancel} open={showShareModal} />
-      </>
-    );
+    return <ActionIconGroup items={items} menu={menu} onActionClick={handleAction} />;
   },
 );
 

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

@@ -1,10 +1,16 @@
 import { type AssistantContentBlock, type UIChatMessage } from '@lobechat/types';
-import { ActionIconGroup } from '@lobehub/ui';
+import { ActionIconGroup, createRawModal } from '@lobehub/ui';
 import type { ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
-import { memo, useCallback, useMemo, useState } from 'react';
-
-import ShareMessageModal from '../../../components/ShareMessageModal';
-import { messageStateSelectors, useConversationStore } from '../../../store';
+import { memo, useCallback, useMemo } from 'react';
+
+import ShareMessageModal, { type ShareModalProps } from '../../../components/ShareMessageModal';
+import {
+  Provider,
+  createStore,
+  messageStateSelectors,
+  useConversationStore,
+  useConversationStoreApi,
+} from '../../../store';
 import type {
   MessageActionItem,
   MessageActionItemOrDivider,
@@ -59,7 +65,29 @@ interface GroupActionsProps {
  */
 const WithContentId = memo<GroupActionsProps>(({ actionsConfig, id, data, contentBlock }) => {
   const { tools } = data;
-  const [showShareModal, setShareModal] = useState(false);
+  const store = useConversationStoreApi();
+  const handleOpenShareModal = useCallback(() => {
+    createRawModal(
+      (props: ShareModalProps) => (
+        <Provider
+          createStore={() => {
+            const state = store.getState();
+            return createStore({
+              context: state.context,
+              hooks: state.hooks,
+              skipFetch: state.skipFetch,
+            });
+          }}
+        >
+          <ShareMessageModal {...props} />
+        </Provider>
+      ),
+      {
+        message: data,
+      },
+      { onCloseKey: 'onCancel', openKey: 'open' },
+    );
+  }, [data, store]);
 
   const isCollapsed = useConversationStore(messageStateSelectors.isMessageCollapsed(id));
 
@@ -67,7 +95,7 @@ const WithContentId = memo<GroupActionsProps>(({ actionsConfig, id, data, conten
     contentBlock,
     data,
     id,
-    onOpenShareModal: () => setShareModal(true),
+    onOpenShareModal: handleOpenShareModal,
   });
 
   const hasTools = !!tools;
@@ -130,16 +158,7 @@ const WithContentId = memo<GroupActionsProps>(({ actionsConfig, id, data, conten
     [allActions],
   );
 
-  return (
-    <>
-      <ActionIconGroup items={items} menu={{ items: menu }} onActionClick={handleAction} />
-      <ShareMessageModal
-        message={data}
-        onCancel={() => setShareModal(false)}
-        open={showShareModal}
-      />
-    </>
-  );
+  return <ActionIconGroup items={items} menu={menu} onActionClick={handleAction} />;
 });
 
 WithContentId.displayName = 'GroupActionsWithContentId';

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

@@ -1,10 +1,16 @@
 import { type AssistantContentBlock, type UIChatMessage } from '@lobechat/types';
-import { ActionIconGroup } from '@lobehub/ui';
+import { ActionIconGroup, createRawModal } from '@lobehub/ui';
 import type { ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
-import { memo, useCallback, useMemo, useState } from 'react';
-
-import ShareMessageModal from '../../../components/ShareMessageModal';
-import { messageStateSelectors, useConversationStore } from '../../../store';
+import { memo, useCallback, useMemo } from 'react';
+
+import ShareMessageModal, { type ShareModalProps } from '../../../components/ShareMessageModal';
+import {
+  Provider,
+  createStore,
+  messageStateSelectors,
+  useConversationStore,
+  useConversationStoreApi,
+} from '../../../store';
 import type {
   MessageActionItem,
   MessageActionItemOrDivider,
@@ -58,7 +64,29 @@ interface GroupActionsProps {
  * Actions bar for group messages with content (has assistant message content)
  */
 const WithContentId = memo<GroupActionsProps>(({ actionsConfig, id, data, contentBlock }) => {
-  const [showShareModal, setShareModal] = useState(false);
+  const store = useConversationStoreApi();
+  const handleOpenShareModal = useCallback(() => {
+    createRawModal(
+      (props: ShareModalProps) => (
+        <Provider
+          createStore={() => {
+            const state = store.getState();
+            return createStore({
+              context: state.context,
+              hooks: state.hooks,
+              skipFetch: state.skipFetch,
+            });
+          }}
+        >
+          <ShareMessageModal {...props} />
+        </Provider>
+      ),
+      {
+        message: data,
+      },
+      { onCloseKey: 'onCancel', openKey: 'open' },
+    );
+  }, [data, store]);
 
   const isCollapsed = useConversationStore(messageStateSelectors.isMessageCollapsed(id));
 
@@ -66,7 +94,7 @@ const WithContentId = memo<GroupActionsProps>(({ actionsConfig, id, data, conten
     contentBlock,
     data,
     id,
-    onOpenShareModal: () => setShareModal(true),
+    onOpenShareModal: handleOpenShareModal,
   });
 
   // Get collapse/expand action based on current state
@@ -122,16 +150,7 @@ const WithContentId = memo<GroupActionsProps>(({ actionsConfig, id, data, conten
     [allActions],
   );
 
-  return (
-    <>
-      <ActionIconGroup items={items} menu={{ items: menu }} onActionClick={handleAction} />
-      <ShareMessageModal
-        message={data}
-        onCancel={() => setShareModal(false)}
-        open={showShareModal}
-      />
-    </>
-  );
+  return <ActionIconGroup items={items} menu={menu} onActionClick={handleAction} />;
 });
 
 WithContentId.displayName = 'GroupActionsWithContentId';

package/src/features/Conversation/Messages/Task/Actions/Error.tsx

@@ -15,9 +15,7 @@ export const ErrorActionsBar = memo<ErrorActionsBarProps>(({ actions, onActionCl
   return (
     <ActionIconGroup
       items={[regenerate, del]}
-      menu={{
-        items: [edit, copy, divider, del],
-      }}
+      menu={[edit, copy, divider, del]}
       onActionClick={onActionClick}
     />
   );

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

@@ -1,9 +1,12 @@
 import { type UIChatMessage } from '@lobechat/types';
-import { ActionIconGroup } from '@lobehub/ui';
+import { ActionIconGroup, createRawModal } from '@lobehub/ui';
 import type { ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
-import ShareMessageModal from '../../../components/ShareMessageModal';
+import { useEventCallback } from '@/hooks/useEventCallback';
+
+import ShareMessageModal, { type ShareModalProps } from '../../../components/ShareMessageModal';
+import { Provider, createStore, useConversationStoreApi } from '../../../store';
 import type {
   MessageActionItem,
   MessageActionItemOrDivider,
@@ -56,13 +59,35 @@ interface AssistantActionsBarProps {
 export const AssistantActionsBar = memo<AssistantActionsBarProps>(
   ({ actionsConfig, id, data, index }) => {
     const { error, tools } = data;
-    const [showShareModal, setShareModal] = useState(false);
+    const store = useConversationStoreApi();
+    const handleOpenShareModal = useEventCallback(() => {
+      createRawModal(
+        (props: ShareModalProps) => (
+          <Provider
+            createStore={() => {
+              const state = store.getState();
+              return createStore({
+                context: state.context,
+                hooks: state.hooks,
+                skipFetch: state.skipFetch,
+              });
+            }}
+          >
+            <ShareMessageModal {...props} />
+          </Provider>
+        ),
+        {
+          message: data,
+        },
+        { onCloseKey: 'onCancel', openKey: 'open' },
+      );
+    });
 
     const defaultActions = useAssistantActions({
       data,
       id,
       index,
-      onOpenShareModal: () => setShareModal(true),
+      onOpenShareModal: handleOpenShareModal,
     });
 
     const hasTools = !!tools;
@@ -159,16 +184,7 @@ export const AssistantActionsBar = memo<AssistantActionsBarProps>(
 
     if (error) return <ErrorActionsBar actions={defaultActions} onActionClick={handleAction} />;
 
-    return (
-      <>
-        <ActionIconGroup items={items} menu={{ items: menu }} onActionClick={handleAction} />
-        <ShareMessageModal
-          message={data}
-          onCancel={() => setShareModal(false)}
-          open={showShareModal}
-        />
-      </>
-    );
+    return <ActionIconGroup items={items} menu={menu} onActionClick={handleAction} />;
   },
 );
 

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

@@ -135,7 +135,7 @@ export const UserActionsBar = memo<UserActionsProps>(({ actionsConfig, id, data
     [allActions],
   );
 
-  return <ActionIconGroup items={items} menu={{ items: menu }} onActionClick={handleAction} />;
+  return <ActionIconGroup items={items} menu={menu} onActionClick={handleAction} />;
 });
 
 UserActionsBar.displayName = 'UserActionsBar';

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

@@ -4,29 +4,13 @@ import { isDesktop } from '@lobechat/const';
 import { Flexbox } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import {
-  type MouseEvent,
-  type ReactNode,
-  type RefObject,
-  Suspense,
-  memo,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react';
-import type { VListHandle } from 'virtua';
+import { type MouseEvent, type ReactNode, Suspense, memo, useCallback } from 'react';
 
 import BubblesLoading from '@/components/BubblesLoading';
 
-import ContextMenu from '../components/ContextMenu';
 import History from '../components/History';
 import { useChatItemContextMenu } from '../hooks/useChatItemContextMenu';
-import {
-  dataSelectors,
-  messageStateSelectors,
-  useConversationStore,
-  virtuaListSelectors,
-} from '../store';
+import { dataSelectors, messageStateSelectors, useConversationStore } from '../store';
 import AgentCouncilMessage from './AgentCouncil';
 import AssistantMessage from './Assistant';
 import AssistantGroupMessage from './AssistantGroup';
@@ -73,13 +57,10 @@ const MessageItem = memo<MessageItemProps>(
     index,
     isLatestItem,
   }) => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-
     const topic = useConversationStore((s) => s.context.topicId);
 
-    // Get message and actionsBar from ConversationStore
+    // Get message from ConversationStore
     const message = useConversationStore(dataSelectors.getDisplayMessageById(id), isEqual);
-    const actionsBar = useConversationStore((s) => s.actionsBar);
     const role = message?.role;
 
     const [editing, isMessageCreating] = useConversationStore((s) => [
@@ -87,24 +68,13 @@ const MessageItem = memo<MessageItemProps>(
       messageStateSelectors.isMessageCreating(id)(s),
     ]);
 
-    const {
-      containerRef: contextMenuContainerRef,
-      contextMenuState,
-      handleContextMenu,
-      hideContextMenu,
-    } = useChatItemContextMenu({
+    const { handleContextMenu } = useChatItemContextMenu({
       editing,
-      onActionClick: () => {},
+      id,
+      inPortalThread,
+      topic,
     });
 
-    const setContainerRef = useCallback(
-      (node: HTMLDivElement | null) => {
-        containerRef.current = node;
-        contextMenuContainerRef.current = node;
-      },
-      [contextMenuContainerRef],
-    );
-
     const onContextMenu = useCallback(
       async (event: MouseEvent<HTMLDivElement>) => {
         if (!role || (role !== 'user' && role !== 'assistant' && role !== 'assistantGroup')) return;
@@ -129,15 +99,6 @@ const MessageItem = memo<MessageItemProps>(
       },
       [handleContextMenu, id, role, message],
     );
-    // Get virtuaScrollMethods from ConversationStore
-    const virtuaScrollMethods = useConversationStore(virtuaListSelectors.virtuaScrollMethods);
-
-    // Create a ref-like object for ContextMenu compatibility
-    // VirtuaScrollMethods is a subset of VListHandle with the methods ContextMenu needs
-    const virtuaRef = useMemo<RefObject<VListHandle | null>>(
-      () => ({ current: virtuaScrollMethods as VListHandle | null }),
-      [virtuaScrollMethods],
-    );
 
     const renderContent = useCallback(() => {
       switch (role) {
@@ -202,7 +163,7 @@ const MessageItem = memo<MessageItemProps>(
       }
 
       return null;
-    }, [role, disableEditing, id, index, isLatestItem, actionsBar]);
+    }, [role, disableEditing, id, index, isLatestItem]);
 
     if (!role) return;
 
@@ -213,22 +174,10 @@ const MessageItem = memo<MessageItemProps>(
           className={cx(styles.message, className, isMessageCreating && styles.loading)}
           data-index={index}
           onContextMenu={onContextMenu}
-          ref={setContainerRef}
         >
           <Suspense fallback={<BubblesLoading />}>{renderContent()}</Suspense>
           {endRender}
         </Flexbox>
-        <ContextMenu
-          id={id}
-          inPortalThread={inPortalThread}
-          index={index}
-          onClose={hideContextMenu}
-          position={contextMenuState.position}
-          selectedText={contextMenuState.selectedText}
-          topic={topic}
-          virtuaRef={virtuaRef}
-          visible={contextMenuState.visible}
-        />
       </>
     );
   },

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

@@ -15,7 +15,7 @@ enum Tab {
   Text = 'text',
 }
 
-interface ShareModalProps {
+export interface ShareModalProps {
   message: UIChatMessage;
   onCancel: () => void;
   open: boolean;