@lobehub/lobehub 2.0.0-next.227 → 2.0.0-next.228

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/Group/Editing.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { useHomeStore } from '@/store/home';
@@ -33,7 +32,6 @@ const Editing = memo<EditingProps>(({ id, name, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Input
           autoFocus
@@ -50,20 +48,19 @@ const Editing = memo<EditingProps>(({ id, name, toggleEditing }) => {
           }}
         />
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
           width: 320,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/app/[variants]/(main)/home/_layout/Body/Project/List/Editing.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
@@ -26,7 +25,6 @@ const Editing = memo<EditingProps>(({ id, name, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Input
           autoFocus
@@ -43,20 +41,19 @@ const Editing = memo<EditingProps>(({ id, name, toggleEditing }) => {
           }}
         />
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
           width: 320,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/ModelSelect/ImageModelItem.tsx

@@ -1,6 +1,5 @@
 import { ModelIcon } from '@lobehub/icons';
-import { Flexbox, Text } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Flexbox, Popover, Text } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { type AiModelForSelect } from 'model-bank';
 import numeral from 'numeral';
@@ -109,10 +108,6 @@ const ImageModelItem = memo<ImageModelItemProps>(
 
     return (
       <Popover
-        align={{
-          offset: [24, -10],
-        }}
-        arrow={false}
         classNames={{ root: cx(styles.popover, isDarkMode && styles.popover_dark) }}
         content={popoverContent}
         placement="rightTop"

package/src/app/[variants]/(main)/image/_layout/Topics/TopicItem.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, Avatar, Flexbox, Text } from '@lobehub/ui';
-import { App, Popover } from 'antd';
+import { ActionIcon, Avatar, Flexbox, Popover, Text } from '@lobehub/ui';
+import { App } from 'antd';
 import { cssVar } from 'antd-style';
 import { Trash } from 'lucide-react';
 import React, { memo } from 'react';
@@ -92,11 +92,10 @@ const TopicItem = memo<TopicItemProps>(({ topic, showMoreInfo, style }) => {
 
   return (
     <Popover
-      arrow={false}
       content={tooltipContent}
       placement={'left'}
       styles={{
-        container: {
+        content: {
           width: 200,
         },
       }}

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/Editing.tsx

@@ -1,5 +1,4 @@
-import { Block, Flexbox, Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Block, Flexbox, Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -46,7 +45,6 @@ const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEdi
 
   return (
     <Popover
-      arrow={false}
       content={
         <Flexbox gap={4} horizontal onClick={(e) => e.stopPropagation()} style={{ width: 320 }}>
           <EmojiPicker
@@ -71,6 +69,7 @@ const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEdi
             defaultAvatar={'📄'}
             locale={locale}
             onChange={setNewEmoji}
+            onClick={(e) => e?.stopPropagation()}
             onDelete={() => setNewEmoji(undefined)}
             value={newEmoji}
           />
@@ -87,19 +86,18 @@ const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEdi
           />
         </Flexbox>
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/app/[variants]/(main)/resource/(home)/_layout/Body/LibraryList/List/Item/Editing.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Input, Popover } from '@lobehub/ui';
 import { memo, useCallback, useEffect, useState } from 'react';
 
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
@@ -34,7 +33,6 @@ const Editing = memo<EditingProps>(({ id, name, toggleEditing }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Input
           autoFocus
@@ -52,20 +50,19 @@ const Editing = memo<EditingProps>(({ id, name, toggleEditing }) => {
           }}
         />
       }
-      destroyOnHidden
       onOpenChange={(open) => {
         if (!open) handleUpdate();
         toggleEditing(open);
       }}
       open={editing}
-      placement={'bottomLeft'}
+      placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 4,
           width: 320,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <div />
     </Popover>

package/src/components/ManifestPreviewer/index.tsx

@@ -1,5 +1,4 @@
-import { Highlighter } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Highlighter, Popover } from '@lobehub/ui';
 import { type ReactNode, memo } from 'react';
 
 interface PluginManifestPreviewerProps {
@@ -11,7 +10,6 @@ interface PluginManifestPreviewerProps {
 const ManifestPreviewer = memo<PluginManifestPreviewerProps>(
   ({ manifest, children, trigger = 'click' }) => (
     <Popover
-      arrow={false}
       content={
         <Highlighter
           language={'json'}
@@ -21,8 +19,7 @@ const ManifestPreviewer = memo<PluginManifestPreviewerProps>(
         </Highlighter>
       }
       placement={'right'}
-      style={{ width: 400 }}
-      title={'Manifest JSON'}
+      styles={{ content: { width: 400 } }}
       trigger={trigger}
     >
       {children}

package/src/components/TipGuide/index.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Flexbox } from '@lobehub/ui';
-import { ConfigProvider, Popover, type TooltipProps } from 'antd';
+import { ActionIcon, Flexbox, Popover } from '@lobehub/ui';
+import { ConfigProvider, type TooltipProps } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { XIcon } from 'lucide-react';
 import { type CSSProperties, type FC, type ReactNode } from 'react';
@@ -111,11 +111,10 @@ const TipGuide: FC<TipGuideProps> = ({
             }}
           >
             <Popover
-              arrow={{ pointAtCenter: true }}
+              arrow={true}
               classNames={{
                 root: cx(className, styles.overlay),
               }}
-              color={'blue'}
               content={
                 <Flexbox gap={24} horizontal style={{ userSelect: 'none' }}>
                   <div>{title}</div>

package/src/features/ChatInput/ActionBar/Search/index.tsx

@@ -47,7 +47,7 @@ const Search = memo(() => {
         minWidth: 320,
         placement: 'topLeft',
         styles: {
-          container: {
+          content: {
             padding: 4,
           },
         },

package/src/features/ChatInput/ActionBar/components/Action.tsx

@@ -84,7 +84,11 @@ const Action = memo<ActionProps>(
         <ActionPopover
           onOpenChange={setShow}
           open={show}
-          trigger={trigger}
+          trigger={
+            Array.isArray(trigger)
+              ? (trigger.filter((t) => t !== 'contextMenu') as ('click' | 'hover')[])
+              : trigger
+          }
           {...popover}
           minWidth={mobile ? '100%' : popover.minWidth}
           placement={mobile ? 'top' : (dropdownPlacement ?? popover.placement)}

package/src/features/ChatInput/ActionBar/components/ActionPopover.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Flexbox } from '@lobehub/ui';
-import { Popover, type PopoverProps } from 'antd';
+import { Flexbox, Popover, type PopoverProps } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { type ReactNode, memo } from 'react';
 
@@ -23,7 +22,8 @@ const styles = createStaticStyles(({ css }) => ({
   `,
 }));
 
-export interface ActionPopoverProps extends Omit<PopoverProps, 'title' | 'content'> {
+export interface ActionPopoverProps extends Omit<PopoverProps, 'title' | 'content' | 'children'> {
+  children?: ReactNode;
   content?: ReactNode;
   extra?: ReactNode;
   loading?: boolean;
@@ -45,6 +45,7 @@ const ActionPopover = memo<ActionPopoverProps>(
     placement,
     loading,
     extra,
+    content,
     ...rest
   }) => {
     const isMobile = useIsMobile();
@@ -52,45 +53,48 @@ const ActionPopover = memo<ActionPopoverProps>(
     // Properly handle classNames (can be object or function)
     const resolvedClassNames =
       typeof customClassNames === 'function' ? customClassNames : customClassNames;
-    const containerClassName =
-      typeof resolvedClassNames === 'object' && resolvedClassNames?.container
-        ? cx(styles.popoverContent, resolvedClassNames.container)
+    const contentClassName =
+      typeof resolvedClassNames === 'object' && resolvedClassNames?.content
+        ? cx(styles.popoverContent, resolvedClassNames.content)
         : styles.popoverContent;
 
     // Properly handle styles (can be object or function)
     const resolvedStyles = typeof customStyles === 'function' ? customStyles : customStyles;
-    const containerStyle =
-      typeof resolvedStyles === 'object' && resolvedStyles?.container
-        ? resolvedStyles.container
-        : {};
+    const contentStyle =
+      typeof resolvedStyles === 'object' && resolvedStyles?.content ? resolvedStyles.content : {};
+
+    // Compose content with optional title
+    const popoverContent = (
+      <>
+        {title && (
+          <Flexbox gap={8} horizontal justify={'space-between'} style={{ marginBottom: 16 }}>
+            {title}
+            {extra}
+            {loading && <UpdateLoading style={{ color: cssVar.colorTextSecondary }} />}
+          </Flexbox>
+        )}
+        {content}
+      </>
+    );
 
     return (
       <Popover
-        arrow={false}
         classNames={{
           ...(typeof resolvedClassNames === 'object' ? resolvedClassNames : {}),
-          container: containerClassName,
+          content: contentClassName,
         }}
+        content={popoverContent}
         placement={isMobile ? 'top' : placement}
         styles={{
           ...(typeof resolvedStyles === 'object' ? resolvedStyles : {}),
-          container: {
+          content: {
             maxHeight,
             maxWidth: isMobile ? undefined : maxWidth,
             minWidth: isMobile ? undefined : minWidth,
             width: isMobile ? '100vw' : undefined,
-            ...containerStyle,
+            ...contentStyle,
           },
         }}
-        title={
-          title && (
-            <Flexbox gap={8} horizontal justify={'space-between'} style={{ marginBottom: 16 }}>
-              {title}
-              {extra}
-              {loading && <UpdateLoading style={{ color: cssVar.colorTextSecondary }} />}
-            </Flexbox>
-          )
-        }
         {...rest}
       >
         {children}

package/src/features/ChatMiniMap/MinimapIndicator.tsx

@@ -1,5 +1,4 @@
-import { Block, Text } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Block, Popover, Text } from '@lobehub/ui';
 import { cx } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -28,13 +27,12 @@ export const MinimapIndicator = memo<MinimapIndicatorProps>(
 
     return (
       <Popover
-        arrow={false}
         content={popoverContent}
         key={id}
         mouseEnterDelay={0.1}
         placement={'left'}
         styles={{
-          container: {
+          content: {
             width: 320,
           },
         }}

package/src/features/ChatMiniMap/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, Flexbox } from '@lobehub/ui';
+import { ActionIcon, Flexbox, PopoverGroup } from '@lobehub/ui';
 import { cx } from 'antd-style';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -36,19 +36,21 @@ const ChatMinimap = memo(() => {
           size={14}
         />
         <Flexbox className={styles.railContent}>
-          {indicators.map(({ id, width, preview, role, virtuosoIndex }, position) => (
-            <MinimapIndicator
-              activePosition={activeIndicatorPosition}
-              id={id}
-              key={id}
-              onJump={handleJump}
-              position={position}
-              preview={preview}
-              role={role}
-              virtuosoIndex={virtuosoIndex}
-              width={width}
-            />
-          ))}
+          <PopoverGroup contentLayoutAnimation>
+            {indicators.map(({ id, width, preview, role, virtuosoIndex }, position) => (
+              <MinimapIndicator
+                activePosition={activeIndicatorPosition}
+                id={id}
+                key={id}
+                onJump={handleJump}
+                position={position}
+                preview={preview}
+                role={role}
+                virtuosoIndex={virtuosoIndex}
+                width={width}
+              />
+            ))}
+          </PopoverGroup>
         </Flexbox>
         <ActionIcon
           aria-label={t('minimap.nextMessage')}

package/src/features/Conversation/Markdown/plugins/Mention/Render.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Avatar, Flexbox, Text } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Avatar, Flexbox, Popover, Text } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
@@ -75,7 +74,6 @@ const Render = memo<MarkdownElementProps<MentionProps>>(({ children, node }) =>
 
   return (
     <Popover
-      arrow={false}
       content={
         <Flexbox gap={12} style={{ overflow: 'hidden' }} width={320}>
           <Flexbox align="center" gap={8} horizontal>
@@ -93,7 +91,7 @@ const Render = memo<MarkdownElementProps<MentionProps>>(({ children, node }) =>
           </Flexbox>
         </Flexbox>
       }
-      trigger={['click']}
+      trigger="click"
     >
       <span className={styles.mention}>
         {'@'}

package/src/features/Conversation/Messages/AssistantGroup/Tool/Render/Intervention/ApprovalActions.tsx

@@ -1,5 +1,5 @@
-import { Button, Dropdown, Flexbox } from '@lobehub/ui';
-import { Input, Popover, Space } from 'antd';
+import { Button, Dropdown, Flexbox, Popover } from '@lobehub/ui';
+import { Input, Space } from 'antd';
 import { ChevronDown } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -80,7 +80,6 @@ const ApprovalActions = memo<ApprovalActionsProps>(
     return (
       <Flexbox gap={8} horizontal>
         <Popover
-          arrow={false}
           content={
             <Flexbox gap={12} style={{ width: 400 }}>
               <Flexbox align={'center'} horizontal justify={'space-between'}>

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

@@ -1,6 +1,6 @@
 import { type ModelPerformance, type ModelUsage } from '@lobechat/types';
-import { Center, Flexbox, Icon } from '@lobehub/ui';
-import { Divider, Popover } from 'antd';
+import { Center, Flexbox, Icon, Popover } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { cssVar } from 'antd-style';
 import { BadgeCent, CoinsIcon } from 'lucide-react';
 import { memo } from 'react';
@@ -132,7 +132,6 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, performance, model, provide
 
   return (
     <Popover
-      arrow={false}
       content={
         <Flexbox gap={8} style={{ minWidth: 200 }}>
           {modelCard && <ModelCard {...modelCard} provider={provider} />}
@@ -214,7 +213,7 @@ const TokenDetail = memo<TokenDetailProps>(({ usage, performance, model, provide
         </Flexbox>
       }
       placement={'top'}
-      trigger={['hover']}
+      trigger="hover"
     >
       <Center
         gap={2}

package/src/features/LocalFile/LocalFile.tsx

@@ -1,5 +1,5 @@
-import { Button, Flexbox } from '@lobehub/ui';
-import { Popover, Space } from 'antd';
+import { Button, Flexbox, Popover } from '@lobehub/ui';
+import { Space } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { ExternalLink, FolderOpen } from 'lucide-react';
 import React from 'react';
@@ -98,12 +98,11 @@ export const LocalFile = ({ name, path, isDirectory = false }: LocalFileProps) =
 
   return (
     <Popover
-      arrow={false}
       content={popoverContent}
       styles={{
-        container: { padding: 0 },
+        content: { padding: 0 },
       }}
-      trigger={['hover']}
+      trigger="hover"
     >
       {fileContent}
     </Popover>

package/src/features/MCPPluginDetail/Deployment/index.tsx

@@ -1,7 +1,17 @@
 import { SiApple, SiLinux } from '@icons-pack/react-simple-icons';
 import { Microsoft } from '@lobehub/icons';
-import { ActionIcon, Block, Collapse, Empty, Flexbox, Icon, Snippet, Tag } from '@lobehub/ui';
-import { Divider, Popover, Steps } from 'antd';
+import {
+  ActionIcon,
+  Block,
+  Collapse,
+  Empty,
+  Flexbox,
+  Icon,
+  Popover,
+  Snippet,
+  Tag,
+} from '@lobehub/ui';
+import { Divider, Steps } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { startCase } from 'es-toolkit/compat';
 import {
@@ -220,7 +230,6 @@ const Deployment = memo<{ mobile?: boolean }>(({ mobile }) => {
                               </span>
                               {dep.installInstructions && (
                                 <Popover
-                                  arrow={false}
                                   content={
                                     <Flexbox gap={8}>
                                       <Descriptions
@@ -265,7 +274,7 @@ const Deployment = memo<{ mobile?: boolean }>(({ mobile }) => {
                                       )}
                                     </Flexbox>
                                   }
-                                  trigger={['hover']}
+                                  trigger="hover"
                                 >
                                   <ActionIcon
                                     color={cssVar.colorTextDescription}

package/src/features/MCPPluginDetail/Score/TotalScore.tsx

@@ -1,5 +1,5 @@
-import { Block, Center, Flexbox } from '@lobehub/ui';
-import { Popover, Progress } from 'antd';
+import { Block, Center, Flexbox, Popover } from '@lobehub/ui';
+import { Progress } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -248,10 +248,15 @@ const TotalScore = memo<TotalScoreProps>(({ scoreResult, scoreItems = [], isVali
 
       <div className={styles.progressContainer}>
         <Popover
-          arrow={false}
-          content={renderTooltipContent()}
+          content={
+            <div>
+              <div style={{ fontWeight: 'bold', marginBottom: 8 }}>
+                {t('mcp.details.totalScore.popover.title')}
+              </div>
+              {renderTooltipContent()}
+            </div>
+          }
           placement="bottom"
-          title={t('mcp.details.totalScore.popover.title')}
           trigger={['hover', 'click']}
         >
           <Progress

package/src/features/ModelSwitchPanel/index.tsx

@@ -1,5 +1,4 @@
-import { TooltipGroup } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { Popover, TooltipGroup } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { PanelContent } from './components/PanelContent';
@@ -32,9 +31,8 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
     return (
       <TooltipGroup>
         <Popover
-          arrow={false}
           classNames={{
-            container: styles.container,
+            content: styles.container,
           }}
           content={
             <PanelContent

package/src/features/PageEditor/Copilot/Toolbar.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Block, Flexbox } from '@lobehub/ui';
-import { Popover } from 'antd';
+import { ActionIcon, Block, Flexbox, Popover } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { ChevronsUpDownIcon, Clock3Icon, PanelRightCloseIcon, PlusIcon } from 'lucide-react';
 import { Suspense, memo, useMemo, useState } from 'react';
@@ -108,7 +107,6 @@ const AgentSelector = memo<AgentSelectorProps>(({ agentId, onAgentChange }) => {
 
   return (
     <Popover
-      arrow={false}
       content={
         <Suspense fallback={<SkeletonList rows={6} />}>
           <AgentModalProvider>
@@ -120,12 +118,12 @@ const AgentSelector = memo<AgentSelectorProps>(({ agentId, onAgentChange }) => {
       open={open}
       placement="bottomLeft"
       styles={{
-        container: {
+        content: {
           padding: 0,
           width: 240,
         },
       }}
-      trigger={['click']}
+      trigger="click"
     >
       <Block
         align={'center'}
@@ -197,7 +195,6 @@ const CopilotToolbar = memo<CopilotToolbarProps>(({ agentId, isHovered }) => {
             />
             {!hideHistory && (
               <Popover
-                arrow={false}
                 content={
                   <Flexbox
                     gap={4}
@@ -224,12 +221,12 @@ const CopilotToolbar = memo<CopilotToolbarProps>(({ agentId, isHovered }) => {
                 open={topicPopoverOpen}
                 placement="bottomRight"
                 styles={{
-                  container: {
+                  content: {
                     padding: 0,
                     width: 240,
                   },
                 }}
-                trigger={['click']}
+                trigger="click"
               >
                 <ActionIcon icon={Clock3Icon} size={DESKTOP_HEADER_ICON_SIZE} />
               </Popover>