@lobehub/lobehub 2.0.0-next.294 → 2.0.0-next.295

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx

@@ -16,7 +16,6 @@ import { useDebounceFn } from 'ahooks';
 import { Form as AntdForm, Switch } from 'antd';
 import { createStaticStyles, cssVar, cx, responsive } from 'antd-style';
 import { Loader2Icon, LockIcon } from 'lucide-react';
-import Link from 'next/link';
 import { type ReactNode, memo, useCallback, useLayoutEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -261,7 +260,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
                   <span key="0" />,
                   <span key="1" />,
                   <span key="2" />,
-                  <Link href={apiKeyUrl} key="3" target={'_blank'} />,
+                  <a href={apiKeyUrl} key="3" rel="noreferrer" target="_blank" />,
                 ]}
                 i18nKey="providerModels.config.apiKey.descWithUrl"
                 ns={'modelProvider'}
@@ -282,7 +281,13 @@ const ProviderConfig = memo<ProviderConfigProps>(
           <Trans
             components={[
               <span key="0" />,
-              <Link href={AES_GCM_URL} key="1" style={{ marginInline: 4 }} target={'_blank'} />,
+              <a
+                href={AES_GCM_URL}
+                key="1"
+                rel="noreferrer"
+                style={{ marginInline: 4 }}
+                target="_blank"
+              />,
             ]}
             i18nKey="providerModels.config.aesGcm"
             ns={'modelProvider'}
@@ -437,15 +442,16 @@ const ProviderConfig = memo<ProviderConfigProps>(
             <>
               {title ?? <ProviderCombine provider={id} size={24} />}
               <Tooltip title={t('providerModels.config.helpDoc')}>
-                <Link
+                <a
                   href={urlJoin(BASE_PROVIDER_DOC_URL, id)}
                   onClick={(e) => e.stopPropagation()}
-                  target={'_blank'}
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   <Center className={styles.help} height={20} width={20}>
                     ?
                   </Center>
-                </Link>
+                </a>
               </Tooltip>
             </>
           )}

package/src/app/[variants]/(main)/settings/security/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 

package/src/app/[variants]/(main)/settings/stats/features/overview/ShareButton/ShareModal.tsx

@@ -3,7 +3,7 @@
 import { type FormItemProps, FormModal, type FormModalProps, Segmented } from '@lobehub/ui';
 import { Skeleton } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/settings/stats/features/rankings/AssistantsRank.tsx

@@ -1,7 +1,7 @@
 import { BarList } from '@lobehub/charts';
 import { ActionIcon, Avatar, Modal } from '@lobehub/ui';
 import { MaximizeIcon } from 'lucide-react';
-import Link from 'next/link';
+import Link from '@/libs/router/Link';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(main)/settings/stats/features/rankings/TopicsRank.tsx

@@ -2,7 +2,7 @@ import { BarList } from '@lobehub/charts';
 import { ActionIcon, Icon, Modal } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { MaximizeIcon, MessageSquareIcon } from 'lucide-react';
-import Link from 'next/link';
+import Link from '@/libs/router/Link';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(mobile)/_layout/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type FC, Suspense } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 

package/src/app/[variants]/(mobile)/chat/settings/features/AgentInfoDescription/index.tsx

@@ -3,7 +3,7 @@
 import { ProDescriptions } from '@ant-design/pro-components';
 import { type AgentItemDetail } from '@lobehub/market-sdk';
 import { Flexbox, Tag } from '@lobehub/ui';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(mobile)/chat/settings/features/SettingButton.tsx

@@ -2,12 +2,12 @@
 
 import { ActionIcon } from '@lobehub/ui';
 import { AlignJustify } from 'lucide-react';
-import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
+import dynamic from '@/libs/next/dynamic';
 import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';

package/src/app/[variants]/(mobile)/router/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 

package/src/app/[variants]/page.tsx

@@ -1,4 +1,4 @@
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 import { type DynamicLayoutProps } from '@/types/next';

package/src/app/[variants]/router/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 

package/src/components/404/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { Button, Flexbox, FluentEmoji } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -32,9 +31,10 @@ const NotFound = memo(() => {
         <div>{t('notFound.desc')}</div>
         <div style={{ marginTop: '0.5em' }}>{t('notFound.check')}</div>
       </div>
-      <Link href="/">
-        <Button type={'primary'}>{t('notFound.backHome')}</Button>
-      </Link>
+
+      <Button onClick={() => (window.location.href = '/')} type={'primary'}>
+        {t('notFound.backHome')}
+      </Button>
     </Flexbox>
   );
 });

package/src/components/Analytics/index.tsx

@@ -1,4 +1,4 @@
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 
 import { isDesktop } from '@/const/version';
 import { analyticsEnv } from '@/envs/analytics';

package/src/components/BrandWatermark/index.tsx

@@ -4,7 +4,6 @@ import { ORG_NAME, UTM_SOURCE } from '@lobechat/business-const';
 import { Flexbox, type FlexboxProps } from '@lobehub/ui';
 import { LobeHub } from '@lobehub/ui/brand';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 
 import { isCustomORG } from '@/const/version';
@@ -35,13 +34,14 @@ const BrandWatermark = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest })
       {isCustomORG ? (
         <span>{ORG_NAME}</span>
       ) : (
-        <Link
+        <a
           className={styles.logoLink}
           href={`https://lobehub.com?utm_source=${UTM_SOURCE}&utm_content=brand_watermark`}
-          target={'_blank'}
+          rel="noreferrer"
+          target="_blank"
         >
           <LobeHub size={20} type={'text'} />
-        </Link>
+        </a>
       )}
     </Flexbox>
   );

package/src/components/Branding/ProductLogo/Custom.tsx

@@ -3,7 +3,7 @@ import type { IconType } from '@lobehub/icons';
 import { Flexbox, type FlexboxProps } from '@lobehub/ui';
 import type { LobeChatProps } from '@lobehub/ui/brand';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Image, { type ImageProps } from 'next/image';
+import Image, { type ImageProps } from '@/libs/next/Image';
 import { type ReactNode, forwardRef, memo } from 'react';
 
 const styles = createStaticStyles(({ css }) => {

package/src/components/Error/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { Button, Flexbox, FluentEmoji } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,9 +38,9 @@ const ErrorCapture = memo<ErrorCaptureProps>(({ reset }) => {
       <p style={{ marginBottom: '2em' }}>{t('error.desc')}</p>
       <Flexbox gap={12} horizontal style={{ marginBottom: '1em' }}>
         <Button onClick={() => reset()}>{t('error.retry')}</Button>
-        <Link href="/">
-          <Button type={'primary'}>{t('error.backHome')}</Button>
-        </Link>
+        <Button onClick={() => (window.location.href = '/')} type={'primary'}>
+          {t('error.backHome')}
+        </Button>
       </Flexbox>
     </Flexbox>
   );

package/src/components/GoBack/index.tsx

@@ -1,9 +1,9 @@
 import { Flexbox, Icon } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { ArrowLeft } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 const styles = createStaticStyles(({ css }) => {
   return {
@@ -31,7 +31,7 @@ const GoBack = memo<GoBackProps>(({ href }) => {
   const { t } = useTranslation('components');
 
   return (
-    <Link href={href}>
+    <Link to={href}>
       <Flexbox align={'center'} className={styles.container} gap={4} horizontal>
         <Icon icon={ArrowLeft} />
         <div>{t('GoBack.back')}</div>

package/src/components/LabsModal/LabCard.tsx

@@ -3,7 +3,7 @@
 import { Flexbox } from '@lobehub/ui';
 import { Switch } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { type PropsWithChildren, memo } from 'react';
 
 import { SkeletonSwitch } from '@/components/Skeleton';

package/src/components/Link.tsx

@@ -1,12 +1,32 @@
-import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
-import React, { memo } from 'react';
+import React, { type AnchorHTMLAttributes, memo } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 
-interface LinkProps extends NextLinkProps {
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   children?: React.ReactNode | undefined;
+  href?: string;
 }
 
-const Link = memo<LinkProps>((props) => {
-  return <NextLink {...props} prefetch={false} />;
+/**
+ * Smart Link component for global use.
+ * - External links (http://, https://) → native <a> tag
+ * - Internal routes → React Router Link
+ */
+const Link = memo<LinkProps>(({ href, children, ...props }) => {
+  // External links use native <a> tag
+  if (href?.startsWith('http://') || href?.startsWith('https://')) {
+    return (
+      <a href={href} rel="noreferrer" {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  // Internal routes use React Router Link
+  return (
+    <RouterLink to={href || '/'} {...props}>
+      {children}
+    </RouterLink>
+  );
 });
 
 export default Link;

package/src/components/OllamaSetupGuide/index.tsx

@@ -2,7 +2,6 @@ import { ProviderCombine } from '@lobehub/icons';
 import { Flexbox, Highlighter, Snippet, Tabs } from '@lobehub/ui';
 import { Steps } from 'antd';
 import { createStaticStyles, cssVar } from 'antd-style';
-import Link from 'next/link';
 import { readableColor } from 'polished';
 import React, { memo, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -48,7 +47,7 @@ const SetupGuide = memo(() => {
                       <Trans
                         components={[
                           <span key="0" />,
-                          <Link href={'https://ollama.com/download'} key="1" />,
+                          <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />,
                         ]}
                         i18nKey={'OllamaSetupGuide.install.description'}
                         ns={'components'}
@@ -94,7 +93,7 @@ const SetupGuide = memo(() => {
                       <Trans
                         components={[
                           <span key="0" />,
-                          <Link href={'https://ollama.com/download'} key="1" />,
+                          <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />,
                         ]}
                         i18nKey={'OllamaSetupGuide.install.description'}
                         ns={'components'}
@@ -139,9 +138,11 @@ const SetupGuide = memo(() => {
                           <Trans
                             components={[
                               <span key="0" />,
-                              <Link
+                              <a
                                 href={'https://github.com/ollama/ollama/blob/main/docs/linux.md'}
                                 key="1"
+                                rel="noreferrer"
+                                target="_blank"
                               />,
                             ]}
                             i18nKey={'OllamaSetupGuide.install.linux.manual'}

package/src/components/WebFavicon/index.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 
 interface WebFaviconProps {
   alt?: string;

package/src/components/client/ClientResponsiveContent/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { type Loader } from 'next/dist/shared/lib/dynamic';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type FC, memo } from 'react';
 
 import MobileSwitchLoading from '@/features/MobileSwitchLoading';

package/src/components/client/ClientResponsiveLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { type Loader } from 'next/dist/shared/lib/dynamic';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type FC, type PropsWithChildren, memo } from 'react';
 
 import MobileSwitchLoading from '@/features/MobileSwitchLoading';

package/src/components/mdx/Image.tsx

@@ -1,7 +1,7 @@
 'use server';
 
 import { Image } from '@lobehub/ui/mdx';
-import Img from 'next/image';
+import Img from '@/libs/next/Image';
 import { getPlaiceholder } from 'plaiceholder';
 import { type FC } from 'react';
 

package/src/components/mdx/Link.tsx

@@ -1,20 +1,37 @@
 'use client';
 
-import Link, { type LinkProps } from 'next/link';
-import { type FC } from 'react';
+import { type AnchorHTMLAttributes, type FC } from 'react';
+import { Link } from 'react-router-dom';
 
 const EXTERNAL_HREF_REGEX = /https?:\/\//;
 
-const A: FC<LinkProps> = ({ href = '', ...props }) => {
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+}
+
+const A: FC<LinkProps> = ({ href = '', children, ...props }) => {
   const isOutbound = EXTERNAL_HREF_REGEX.test(href as string);
   const isOfficial = String(href).includes('lobechat') || String(href).includes('lobehub');
+
+  // External links use native <a> tag
+  if (isOutbound) {
+    return (
+      <a
+        href={href}
+        rel={isOfficial ? 'noreferrer' : 'nofollow noreferrer'}
+        target="_blank"
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // Internal links use React Router
   return (
-    <Link
-      href={href}
-      rel={isOutbound && !isOfficial ? 'nofollow' : undefined}
-      target={isOutbound ? '_blank' : undefined}
-      {...props}
-    />
+    <Link to={href} {...props}>
+      {children}
+    </Link>
   );
 };
 

package/src/features/AlertBanner/CloudBanner.tsx

@@ -5,7 +5,6 @@ import { Button, Center, Flexbox, Icon, lobeStaticStylish } from '@lobehub/ui';
 import { useSize } from 'ahooks';
 import { createStaticStyles, cx } from 'antd-style';
 import { ArrowRightIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo, useEffect, useRef, useState } from 'react';
 import Marquee from 'react-fast-marquee';
 import { useTranslation } from 'react-i18next';
@@ -83,11 +82,11 @@ const CloudBanner = memo<{ mobile?: boolean }>(({ mobile }) => {
       <div className={styles.background} />
       <Center className={styles.wrapper} gap={16} horizontal width={'100%'}>
         {isTruncated ? <Marquee pauseOnHover>{content}</Marquee> : content}
-        <Link href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=banner`} target={'_blank'}>
+        <a href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=banner`} rel="noreferrer" target="_blank">
           <Button size={'small'} type="primary">
             {t('alert.cloud.action')} <Icon icon={ArrowRightIcon} />
           </Button>
-        </Link>
+        </a>
       </Center>
     </Center>
   );

package/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -2,7 +2,6 @@ import { Form } from '@lobehub/ui';
 import type { FormItemProps } from '@lobehub/ui';
 import { Form as AntdForm, Grid, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import Link from 'next/link';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -62,12 +61,13 @@ const ControlsForm = memo(() => {
         <span style={isNarrow ? descNarrow : descWide}>
           <Trans i18nKey={'extendParams.disableContextCaching.desc'} ns={'chat'}>
             单条对话生成成本最高可降低 90%，响应速度提升 4 倍（
-            <Link
+            <a
               href={'https://www.anthropic.com/news/prompt-caching?utm_source=lobechat'}
-              rel={'nofollow'}
+              rel="noreferrer nofollow"
+              target="_blank"
             >
               了解更多
-            </Link>
+            </a>
             ）。开启后将自动禁用历史记录限制
           </Trans>
         </span>
@@ -83,14 +83,15 @@ const ControlsForm = memo(() => {
         <span style={isNarrow ? descNarrow : descWide}>
           <Trans i18nKey={'extendParams.enableReasoning.desc'} ns={'chat'}>
             基于 Claude Thinking 机制限制（
-            <Link
+            <a
               href={
                 'https://docs.anthropic.com/en/docs/build-with-claude/extended-thinking?utm_source=lobechat#why-thinking-blocks-must-be-preserved'
               }
-              rel={'nofollow'}
+              rel="noreferrer nofollow"
+              target="_blank"
             >
               了解更多
-            </Link>
+            </a>
             ），开启后将自动禁用历史消息数限制
           </Trans>
         </span>

package/src/features/ChatInput/ActionBar/Params/Controls.tsx

@@ -306,9 +306,7 @@ const Controls = memo<ControlsProps>(({ setUpdating }) => {
     ...(enableMaxTokens
       ? [
           {
-            children: (
-              <SliderWithInput max={32_000} min={0} step={100} unlimitedInput />
-            ),
+            children: <SliderWithInput max={32_000} min={0} step={100} unlimitedInput />,
             label: (
               <Flexbox align={'center'} className={styles.label} gap={8} horizontal>
                 {t('settingModel.maxTokens.title')}

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

@@ -1,4 +1,4 @@
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type PropsWithChildren, memo } from 'react';
 
 import { useModelHasContextWindowToken } from '@/hooks/useModelHasContextWindowToken';

package/src/features/ChatInput/Mobile/index.tsx

@@ -3,7 +3,7 @@
 import { ChatInput, ChatInputActionBar } from '@lobehub/editor/react';
 import { Flexbox } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import { useChatInputStore } from '@/features/ChatInput/store';

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

@@ -1,6 +1,6 @@
 import { Flexbox } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type ReactNode, Suspense, memo, useCallback } from 'react';
 
 import { useConversationStore } from '@/features/Conversation/store';

package/src/features/Conversation/Error/OllamaBizError/index.tsx

@@ -1,6 +1,6 @@
 import { type ChatMessageError } from '@lobechat/types';
 import { type AlertProps, Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import ErrorContent from '@/features/Conversation/ChatItem/components/ErrorContent';

package/src/features/Conversation/Error/OllamaSetupGuide/Desktop.tsx

@@ -1,6 +1,5 @@
 import { Ollama } from '@lobehub/icons';
 import { Button } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -29,7 +28,7 @@ const OllamaDesktopSetupGuide = memo<{ id?: string }>(({ id }) => {
       avatar={<Ollama.Avatar shape={'square'} size={40} />}
       desc={
         <Trans
-          components={[<span key="0" />, <Link href={'https://ollama.com/download'} key="1" />]}
+          components={[<span key="0" />, <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />]}
           i18nKey={'OllamaSetupGuide.install.description'}
           ns={'components'}
         />

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

@@ -3,7 +3,7 @@ import { AgentRuntimeErrorType, type ILobeAgentRuntimeErrorType } from '@lobecha
 import { ChatErrorType, type ChatMessageError, type ErrorType } from '@lobechat/types';
 import { type IPluginErrorType } from '@lobehub/chat-plugin-sdk';
 import { type AlertProps, Block, Highlighter, Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/features/Conversation/Messages/AssistantGroup/Tool/Actions/Settings.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, createRawModal } from '@lobehub/ui';
 import { LucideSettings } from 'lucide-react';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

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

@@ -2,9 +2,9 @@ import { LOADING_FLAT } from '@lobechat/const';
 import { type ChatToolResult, type ToolIntervention } from '@lobechat/types';
 import { AccordionItem, Flexbox, Skeleton } from '@lobehub/ui';
 import { Divider } from 'antd';
-import dynamic from 'next/dynamic';
 import { memo, useEffect, useState } from 'react';
 
+import dynamic from '@/libs/next/dynamic';
 import { useChatStore } from '@/store/chat';
 import { operationSelectors } from '@/store/chat/slices/operation/selectors';
 import { useToolStore } from '@/store/tool';

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

@@ -2,7 +2,7 @@
 
 import type { AssistantContentBlock } from '@lobechat/types';
 import isEqual from 'fast-deep-equal';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { type MouseEventHandler, Suspense, memo, useCallback, useMemo } from 'react';
 
 import { MESSAGE_ACTION_BAR_PORTAL_ATTRIBUTES } from '@/const/messageActionPortal';

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

@@ -1,8 +1,8 @@
 import { Accordion, AccordionItem, Flexbox, Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
 import { type CSSProperties, memo, useState } from 'react';
 
 import Actions from '@/features/Conversation/Messages/AssistantGroup/Tool/Actions';
+import dynamic from '@/libs/next/dynamic';
 
 import { dataSelectors, messageStateSelectors, useConversationStore } from '../../../store';
 import Inspectors from '../../AssistantGroup/Tool/Inspector';

package/src/features/Conversation/Messages/components/SearchGrounding.tsx

@@ -2,7 +2,7 @@ import { Flexbox, Icon, SearchResultCards, Tag } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { ChevronDown, ChevronRight, Globe } from 'lucide-react';
 import { AnimatePresence, m as motion } from 'motion/react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';