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

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

@@ -1,8 +1,7 @@
-import { Button, Flexbox, Highlighter, Icon, Tag } from '@lobehub/ui';
+import { Flexbox, Highlighter, Tag } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import { ChevronDown, ChevronRight } from 'lucide-react';
 import * as motion from 'motion/react-m';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { type MCPErrorInfoMetadata } from '@/types/plugins';
@@ -12,94 +11,73 @@ const ErrorDetails = memo<{
   errorMessage?: string;
 }>(({ errorInfo, errorMessage }) => {
   const { t } = useTranslation('plugin');
-  const [expanded, setExpanded] = useState(false);
 
   return (
     <Flexbox gap={8}>
-      <Button
-        color={'default'}
-        icon={<Icon icon={expanded ? ChevronDown : ChevronRight} />}
-        onClick={() => setExpanded(!expanded)}
-        size="small"
-        style={{
-          fontSize: '12px',
-          padding: '0 4px',
-        }}
-        variant="filled"
+      <motion.div
+        animate={{ height: 'auto', opacity: 1 }}
+        initial={{ height: 0, opacity: 0 }}
+        style={{ overflow: 'hidden' }}
       >
-        {expanded
-          ? t('mcpInstall.errorDetails.hideDetails')
-          : t('mcpInstall.errorDetails.showDetails')}
-      </Button>
-
-      {expanded && (
-        <motion.div
-          animate={{ height: 'auto', opacity: 1 }}
-          initial={{ height: 0, opacity: 0 }}
-          style={{ overflow: 'hidden' }}
+        <Flexbox
+          gap={8}
+          style={{
+            backgroundColor: cssVar.colorFillQuaternary,
+            borderRadius: 8,
+            fontFamily: 'monospace',
+            fontSize: '11px',
+            padding: '8px 12px',
+          }}
         >
-          <Flexbox
-            gap={8}
-            style={{
-              backgroundColor: cssVar.colorFillQuaternary,
-              borderRadius: 8,
-              fontFamily: 'monospace',
-              fontSize: '11px',
-              padding: '8px 12px',
-            }}
-          >
-            {errorInfo.params && (
-              <Flexbox gap={4}>
-                <div>
-                  <Tag color="blue" variant={'filled'}>
-                    {t('mcpInstall.errorDetails.connectionParams')}
-                  </Tag>
-                </div>
-                <div style={{ marginTop: 4, wordBreak: 'break-all' }}>
-                  {errorInfo.params.command && (
-                    <div>
-                      {t('mcpInstall.errorDetails.command')}: {errorInfo.params.command}
-                    </div>
-                  )}
-                  {errorInfo.params.args && (
-                    <div>
-                      {t('mcpInstall.errorDetails.args')}: {errorInfo.params.args.join(' ')}
-                    </div>
-                  )}
-                </div>
-              </Flexbox>
-            )}
-
-            {errorInfo.errorLog && (
-              <Flexbox gap={4}>
-                <div>
-                  <Tag color="red" variant={'filled'}>
-                    {t('mcpInstall.errorDetails.errorOutput')}
-                  </Tag>
-                </div>
-                <Highlighter
-                  language={'log'}
-                  style={{
-                    maxHeight: 200,
-                    overflow: 'auto',
-                  }}
-                >
-                  {errorInfo.errorLog}
-                </Highlighter>
-              </Flexbox>
-            )}
+          {errorInfo.params && (
+            <Flexbox gap={4}>
+              <div>
+                <Tag color="blue" variant={'filled'}>
+                  {t('mcpInstall.errorDetails.connectionParams')}
+                </Tag>
+              </div>
+              <div style={{ marginTop: 4, wordBreak: 'break-all' }}>
+                {errorInfo.params.command && (
+                  <div>
+                    {t('mcpInstall.errorDetails.command')}: {errorInfo.params.command}
+                  </div>
+                )}
+                {errorInfo.params.args && (
+                  <div>
+                    {t('mcpInstall.errorDetails.args')}: {errorInfo.params.args.join(' ')}
+                  </div>
+                )}
+              </div>
+            </Flexbox>
+          )}
 
-            {errorInfo.originalError && errorInfo.originalError !== errorMessage && (
+          {errorInfo.errorLog && (
+            <Flexbox gap={4}>
               <div>
-                <Tag color="orange">{t('mcpInstall.errorDetails.originalError')}</Tag>
-                <div style={{ marginTop: 4, wordBreak: 'break-all' }}>
-                  {errorInfo.originalError}
-                </div>
+                <Tag color="red" variant={'filled'}>
+                  {t('mcpInstall.errorDetails.errorOutput')}
+                </Tag>
               </div>
-            )}
-          </Flexbox>
-        </motion.div>
-      )}
+              <Highlighter
+                language={'log'}
+                style={{
+                  maxHeight: 200,
+                  overflow: 'auto',
+                }}
+              >
+                {errorInfo.errorLog}
+              </Highlighter>
+            </Flexbox>
+          )}
+
+          {errorInfo.originalError && errorInfo.originalError !== errorMessage && (
+            <div>
+              <Tag color="orange">{t('mcpInstall.errorDetails.originalError')}</Tag>
+              <div style={{ marginTop: 4, wordBreak: 'break-all' }}>{errorInfo.originalError}</div>
+            </div>
+          )}
+        </Flexbox>
+      </motion.div>
     </Flexbox>
   );
 });

package/src/features/MCP/Scores.tsx

@@ -3,7 +3,7 @@
 import { Center, Flexbox, Icon, Tooltip } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { CircleDashedIcon, HammerIcon, LayersIcon, MessageSquareQuoteIcon } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from '@/libs/router';
 import qs from 'query-string';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/features/MCPPluginDetail/Nav.tsx

@@ -12,7 +12,6 @@ import {
   PackageCheckIcon,
   SettingsIcon,
 } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -178,21 +177,22 @@ const Nav = memo<NavProps>(
         {nav}
         {!inModal && (
           <Flexbox gap={12} horizontal>
-            <Link className={styles.link} href={SOCIAL_URL.discord} target={'_blank'}>
+            <a className={styles.link} href={SOCIAL_URL.discord} rel="noreferrer" target="_blank">
               {t('mcp.details.nav.needHelp')}
-            </Link>
+            </a>
             {github?.url && (
               <>
-                <Link className={styles.link} href={github.url} target={'_blank'}>
+                <a className={styles.link} href={github.url} rel="noreferrer" target="_blank">
                   {t('mcp.details.nav.viewSourceCode')}
-                </Link>
-                <Link
+                </a>
+                <a
                   className={styles.link}
                   href={urlJoin(github.url, 'issues')}
-                  target={'_blank'}
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   {t('mcp.details.nav.reportIssue')}
-                </Link>
+                </a>
               </>
             )}
           </Flexbox>

package/src/features/MCPPluginDetail/Overview/TagList.tsx

@@ -2,7 +2,7 @@
 
 import { Flexbox, Tag } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import Link from 'next/link';
+import { Link } from '@/libs/router';
 import qs from 'query-string';
 import { memo } from 'react';
 

package/src/features/MobileTabBar/index.tsx

@@ -2,10 +2,11 @@ import { Icon } from '@lobehub/ui';
 import { TabBar, type TabBarProps } from '@lobehub/ui/mobile';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { Bot, MessageSquare, User } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useRouter } from '@/libs/router/navigation';
+
 import { SidebarTabKey } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 

package/src/features/OllamaSetupGuide/Desktop.tsx

@@ -1,7 +1,6 @@
 import { Ollama } from '@lobehub/icons';
 import { Center } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -17,7 +16,7 @@ const OllamaDesktopSetupGuide = memo(() => {
         description={
           <span>
             <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/PWAInstall/Install.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { BRANDING_NAME } from '@lobechat/business-const';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useEffect, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/features/PWAInstall/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { pwaInstallHandler } from 'pwa-install-handler';
 import { memo, useEffect, useState } from 'react';
 

package/src/features/PluginDevModal/MCPManifestForm/index.tsx

@@ -6,8 +6,10 @@ import { useTranslation } from 'react-i18next';
 
 import KeyValueEditor from '@/components/KeyValueEditor';
 import MCPStdioCommandInput from '@/components/MCPStdioCommandInput';
+import ErrorDetails from '@/features/MCP/MCPInstallProgress/InstallError/ErrorDetails';
 import { useToolStore } from '@/store/tool';
 import { mcpStoreSelectors, pluginSelectors } from '@/store/tool/selectors';
+import { type MCPErrorInfoMetadata } from '@/types/plugins';
 
 import ArgsInput from './ArgsInput';
 import CollapsibleSection from './CollapsibleSection';
@@ -46,10 +48,12 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
   const testState = useToolStore(mcpStoreSelectors.getMCPConnectionTestState(identifier), isEqual);
 
   const [connectionError, setConnectionError] = useState<string | null>(null);
+  const [errorMetadata, setErrorMetadata] = useState<MCPErrorInfoMetadata | null>(null);
 
   const handleTestConnection = async () => {
     setIsTesting(true);
     setConnectionError(null);
+    setErrorMetadata(null);
 
     // Manually trigger validation for fields needed for the test
     let isValid = false;
@@ -97,12 +101,29 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
         // Be careful about overwriting user input if not desired
         form.setFieldsValue({ manifest: result.manifest });
         setConnectionError(null); // 清除本地错误状态
+        setErrorMetadata(null);
       } else if (result.error) {
         // Store 已经处理了错误状态，这里可以选择显示额外的用户友好提示
         const errorMessage = t('error.testConnectionFailed', {
           error: result.error,
         });
         setConnectionError(errorMessage);
+
+        // Build error metadata for detailed display
+        if (result.errorLog || mcpType === 'stdio') {
+          setErrorMetadata({
+            errorLog: result.errorLog,
+            params:
+              mcpType === 'stdio'
+                ? {
+                    args: mcp?.args,
+                    command: mcp?.command,
+                    type: 'stdio',
+                  }
+                : undefined,
+            timestamp: Date.now(),
+          });
+        }
       }
     } catch (error) {
       // Handle unexpected errors
@@ -121,7 +142,10 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
       <QuickImportSection
         form={form}
         isEditMode={isEditMode}
-        onClearConnectionError={() => setConnectionError(null)}
+        onClearConnectionError={() => {
+          setConnectionError(null);
+          setErrorMetadata(null);
+        }}
       />
       <Form form={form} layout={'vertical'}>
         <Flexbox>
@@ -270,9 +294,12 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
           {(connectionError || testState.error) && (
             <Alert
               closable
-              onClose={() => setConnectionError(null)}
+              extra={errorMetadata ? <ErrorDetails errorInfo={errorMetadata} /> : undefined}
+              onClose={() => {
+                setConnectionError(null);
+                setErrorMetadata(null);
+              }}
               showIcon
-              style={{ marginBottom: 16 }}
               title={connectionError || testState.error}
               type="error"
             />

package/src/features/PluginStore/McpList/index.tsx

@@ -1,6 +1,6 @@
 import { DraggablePanel, Flexbox } from '@lobehub/ui';
 import { cssVar, useTheme } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useRef } from 'react';
 
 import { useServerConfigStore } from '@/store/serverConfig';

package/src/features/PluginStore/PluginList/Detail/Header.tsx

@@ -4,7 +4,6 @@ import { Github } from '@lobehub/icons';
 import { ActionIcon, Avatar, Collapse, Flexbox, Icon, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar, useResponsive } from 'antd-style';
 import { DotIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -77,16 +76,17 @@ const Header = memo<{ inModal?: boolean; mobile?: boolean }>(({ mobile: isMobile
             </Flexbox>
             {identifier && (
               <Flexbox align={'center'} gap={6} horizontal>
-                <Link
+                <a
                   href={urlJoin(
                     'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
                     identifier,
                   )}
                   onClick={(e) => e.stopPropagation()}
-                  target={'_blank'}
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   <ActionIcon fill={cssVar.colorTextDescription} icon={Github} />
-                </Link>
+                </a>
               </Flexbox>
             )}
           </Flexbox>
@@ -94,9 +94,9 @@ const Header = memo<{ inModal?: boolean; mobile?: boolean }>(({ mobile: isMobile
             <Flexbox>
               <Flexbox align={'center'} gap={4} horizontal>
                 {author && (
-                  <Link href={urlJoin('https://github.com', author)} target={'_blank'}>
+                  <a href={urlJoin('https://github.com', author)} rel="noreferrer" target="_blank">
                     {author}
-                  </Link>
+                  </a>
                 )}
                 <Icon icon={DotIcon} />
                 <PublishedTime

package/src/features/PluginsUI/Render/DefaultType/index.tsx

@@ -1,5 +1,5 @@
 import { Skeleton } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { Suspense, memo } from 'react';
 
 import { useToolStore } from '@/store/tool';

package/src/features/Portal/Artifacts/Body/Renderer/index.tsx

@@ -1,5 +1,5 @@
 import { Markdown, Mermaid } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import HTMLRenderer from './HTML';

package/src/features/ResourceManager/components/ChunkDrawer/index.tsx

@@ -1,7 +1,7 @@
 import { Flexbox } from '@lobehub/ui';
 import { Drawer } from 'antd';
 import { cssVar } from 'antd-style';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo } from 'react';
 
 import { fileManagerSelectors, useFileStore } from '@/store/file';

package/src/features/ResourceManager/components/Explorer/ListView/Skeleton.tsx

@@ -34,33 +34,33 @@ const ListViewSkeleton = ({
             opacity: getOpacity(index),
           }}
         >
-        <Center height={40} style={{ paddingInline: 4 }}>
-          <Checkbox disabled />
-        </Center>
-        <Flexbox
-          align={'center'}
-          horizontal
-          style={{
-            flexShrink: 0,
-            maxWidth: columnWidths.name,
-            minWidth: columnWidths.name,
-            paddingInline: 8,
-            width: columnWidths.name,
-          }}
-        >
-          <Skeleton.Avatar active shape={'square'} size={24} style={{ marginInline: 8 }} />
-          <Skeleton.Button active style={{ height: 16, width: '60%' }} />
-        </Flexbox>
-        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.date}>
-          <Skeleton.Button active style={{ height: 16, width: '80%' }} />
-        </Flexbox>
-        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.size}>
-          <Skeleton.Button active style={{ height: 16, width: '60%' }} />
+          <Center height={40} style={{ paddingInline: 4 }}>
+            <Checkbox disabled />
+          </Center>
+          <Flexbox
+            align={'center'}
+            horizontal
+            style={{
+              flexShrink: 0,
+              maxWidth: columnWidths.name,
+              minWidth: columnWidths.name,
+              paddingInline: 8,
+              width: columnWidths.name,
+            }}
+          >
+            <Skeleton.Avatar active shape={'square'} size={24} style={{ marginInline: 8 }} />
+            <Skeleton.Button active style={{ height: 16, width: '60%' }} />
+          </Flexbox>
+          <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.date}>
+            <Skeleton.Button active style={{ height: 16, width: '80%' }} />
+          </Flexbox>
+          <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.size}>
+            <Skeleton.Button active style={{ height: 16, width: '60%' }} />
+          </Flexbox>
         </Flexbox>
-      </Flexbox>
-    ))}
-  </Flexbox>
-);
+      ))}
+    </Flexbox>
+  );
 };
 
 export default ListViewSkeleton;