fix(import): fix lobehub ui es import path (#10893)

chore: update package dependencies and import paths

* Updated @lobehub/ui from version 3.4.2 to 3.4.4 in package.json.
* Adjusted import paths for components from '@lobehub/ui/es/' to include '.mjs' extension where necessary.
* Refactored imports for motion library to use 'motion/react-m' instead of 'motion/react'.
* Cleaned up import statements in various components for consistency.

Signed-off-by: Innei <tukon479@gmail.com>

.cursor/rules/react.mdc

@@ -15,7 +15,7 @@ alwaysApply: false
 
 - If unsure how to use `@lobehub/ui` components or what props they accept, search for existing usage in this project instead of guessing. Most components extend antd components with additional props
 - For specific usage, search online. For example, for ActionIcon visit <https://ui.lobehub.com/components/action-icon>
-- Read `node_modules/@lobehub/ui/es/index.js` to see all available components and their props
+- Read `node_modules/@lobehub/ui/es/index.mjs` to see all available components and their props
 
 - General
   - ActionIcon

package.json

@@ -196,7 +196,7 @@
     "@lobehub/icons": "^3.0.0",
     "@lobehub/market-sdk": "^0.23.8",
     "@lobehub/tts": "^3.0.0",
-    "@lobehub/ui": "^3.4.2",
+    "@lobehub/ui": "^3.4.4",
     "@modelcontextprotocol/sdk": "^1.25.1",
     "@neondatabase/serverless": "^1.0.2",
     "@next/third-parties": "^16.1.0",
@@ -392,7 +392,7 @@
     "@typescript/native-preview": "7.0.0-dev.20251210.1",
     "@vitest/coverage-v8": "^3.2.4",
     "ajv-keywords": "^5.1.0",
-    "code-inspector-plugin": "1.3.0",
+    "code-inspector-plugin": "1.3.3",
     "commitlint": "^19.8.1",
     "consola": "^3.4.2",
     "cross-env": "^10.1.0",

src/components/Error/Description.tsx

@@ -13,7 +13,7 @@ const container = css`
   }
 `;
 
-const Highlighter = dynamic(() => import('@lobehub/ui/es/Highlighter'), {
+const Highlighter = dynamic(() => import('@lobehub/ui/es/Highlighter/index.mjs'), {
   loading: () => <Skeleton avatar={false} title={false} />,
   ssr: false,
 });

src/components/InfoTooltip/index.tsx

@@ -1,5 +1,5 @@
 import { Icon, Tooltip, TooltipProps } from '@lobehub/ui';
-import { IconSizeType } from '@lobehub/ui/es/Icon';
+import { IconSizeType } from '@lobehub/ui/es/Icon/index.mjs';
 import { useTheme } from 'antd-style';
 import { CircleHelp } from 'lucide-react';
 import { CSSProperties, memo } from 'react';

src/components/Loading/UpdateLoading/index.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@lobehub/ui';
-import { IconSizeType } from '@lobehub/ui/es/Icon';
+import { IconSizeType } from '@lobehub/ui/es/Icon/index.mjs';
 import { Loader2 } from 'lucide-react';
 import { CSSProperties, memo } from 'react';
 

src/features/ChatInput/store/initialState.ts

@@ -1,6 +1,6 @@
 import { IEditor, SlashOptions } from '@lobehub/editor';
 import type { ChatInputProps } from '@lobehub/editor/react';
-import type { MenuProps } from '@lobehub/ui/es/Menu';
+import type { MenuProps } from '@lobehub/ui/es/Menu/index.mjs';
 
 import { ActionKeys } from '@/features/ChatInput';
 

src/features/Conversation/ChatInput/index.tsx

@@ -2,7 +2,7 @@
 
 import type { SlashOptions } from '@lobehub/editor';
 import { Alert, Flexbox } from '@lobehub/ui';
-import type { MenuProps } from '@lobehub/ui/es/Menu';
+import type { MenuProps } from '@lobehub/ui/es/Menu/index.mjs';
 import { type ReactNode, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 

src/features/DesktopOnboarding/Navigation.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { m as motion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import React from 'react';
 
 import { getThemeToken } from './styles/theme';

src/features/MCP/MCPInstallProgress/InstallError/ErrorDetails.tsx

@@ -1,7 +1,7 @@
-import { Flexbox, Highlighter, Icon , Tag , Button } from '@lobehub/ui';
+import { Button, Flexbox, Highlighter, Icon, Tag } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { m as motion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

src/features/MCP/MCPInstallProgress/MCPConfigForm.tsx

@@ -1,7 +1,7 @@
-import { Flexbox, Form, Markdown , Button } from '@lobehub/ui';
+import { Button, Flexbox, Form, Markdown } from '@lobehub/ui';
 import { Form as AForm } from 'antd';
 import { createStyles } from 'antd-style';
-import { m as motion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

src/features/MCP/MCPInstallProgress/MCPDependenciesGuide.tsx

@@ -2,7 +2,7 @@ import { Button, Flexbox, Markdown, Snippet, Text } from '@lobehub/ui';
 import { Card, Space } from 'antd';
 import { createStyles } from 'antd-style';
 import { AlertTriangle, CheckCircle, ExternalLink, Terminal } from 'lucide-react';
-import { m as motion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

src/features/MCP/MCPInstallProgress/index.tsx

@@ -2,7 +2,7 @@ import { Flexbox, Text } from '@lobehub/ui';
 import { Progress } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { m as motion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

src/features/ResourceManager/components/FolderTree/index.tsx

@@ -4,7 +4,7 @@ import { CaretDownFilled } from '@ant-design/icons';
 import { ActionIcon, Flexbox, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { FolderIcon, FolderOpenIcon } from 'lucide-react';
-import { m as motion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import { memo, useCallback } from 'react';
 
 const useStyles = createStyles(({ css, token }) => ({

src/features/ResourceManager/components/Tree/index.tsx

@@ -5,7 +5,7 @@ import { ActionIcon, Block, Dropdown, Flexbox, Icon } from '@lobehub/ui';
 import { App, Input } from 'antd';
 import { createStyles } from 'antd-style';
 import { FileText, FolderIcon, FolderOpenIcon } from 'lucide-react';
-import { m as motion } from 'motion/react';
+import * as motion from 'motion/react-m';
 import React, { memo, useCallback, useMemo, useReducer, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';