@lobehub/lobehub 2.0.0-next.232 → 2.0.0-next.234

package/src/features/ChatInput/ActionBar/Tools/useControls.tsx

@@ -1,4 +1,9 @@
-import { KLAVIS_SERVER_TYPES, type KlavisServerType } from '@lobechat/const';
+import {
+  KLAVIS_SERVER_TYPES,
+  type KlavisServerType,
+  LOBEHUB_SKILL_PROVIDERS,
+  type LobehubSkillProviderType,
+} from '@lobechat/const';
 import { Avatar, Flexbox, Icon, Image, type ItemType } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -16,11 +21,13 @@ import { useToolStore } from '@/store/tool';
 import {
   builtinToolSelectors,
   klavisStoreSelectors,
+  lobehubSkillStoreSelectors,
   pluginSelectors,
 } from '@/store/tool/selectors';
 
 import { useAgentId } from '../../hooks/useAgentId';
 import KlavisServerItem from './KlavisServerItem';
+import LobehubSkillServerItem from './LobehubSkillServerItem';
 import ToolItem from './ToolItem';
 
 /**
@@ -39,6 +46,21 @@ const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label
 
 KlavisIcon.displayName = 'KlavisIcon';
 
+/**
+ * LobeHub Skill Provider 图标组件
+ */
+const LobehubSkillIcon = memo<Pick<LobehubSkillProviderType, 'icon' | 'label'>>(
+  ({ icon, label }) => {
+    if (typeof icon === 'string') {
+      return <Image alt={label} height={18} src={icon} style={{ flex: 'none' }} width={18} />;
+    }
+
+    return <Icon fill={cssVar.colorText} icon={icon} size={18} />;
+  },
+);
+
+LobehubSkillIcon.displayName = 'LobehubSkillIcon';
+
 export const useControls = ({
   setModalOpen,
   setUpdating,
@@ -66,10 +88,16 @@ export const useControls = ({
   const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
   const isKlavisEnabledInEnv = useServerConfigStore(serverConfigSelectors.enableKlavis);
 
-  const [useFetchPluginStore, useFetchUserKlavisServers] = useToolStore((s) => [
-    s.useFetchPluginStore,
-    s.useFetchUserKlavisServers,
-  ]);
+  // LobeHub Skill 相关状态
+  const allLobehubSkillServers = useToolStore(lobehubSkillStoreSelectors.getServers, isEqual);
+  const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
+
+  const [useFetchPluginStore, useFetchUserKlavisServers, useFetchLobehubSkillConnections] =
+    useToolStore((s) => [
+      s.useFetchPluginStore,
+      s.useFetchUserKlavisServers,
+      s.useFetchLobehubSkillConnections,
+    ]);
 
   useFetchPluginStore();
   useFetchInstalledPlugins();
@@ -78,6 +106,9 @@ export const useControls = ({
   // 使用 SWR 加载用户的 Klavis 集成（从数据库）
   useFetchUserKlavisServers(isKlavisEnabledInEnv);
 
+  // 使用 SWR 加载用户的 LobeHub Skill 连接
+  useFetchLobehubSkillConnections(isLobehubSkillEnabled);
+
   // 根据 identifier 获取已连接的服务器
   const getServerByName = (identifier: string) => {
     return allKlavisServers.find((server) => server.identifier === identifier);
@@ -118,7 +149,20 @@ export const useControls = ({
     [isKlavisEnabledInEnv, allKlavisServers],
   );
 
-  // 合并 builtin 工具和 Klavis 服务器
+  // LobeHub Skill Provider 列表项
+  const lobehubSkillItems = useMemo(
+    () =>
+      isLobehubSkillEnabled
+        ? LOBEHUB_SKILL_PROVIDERS.map((provider) => ({
+            icon: <LobehubSkillIcon icon={provider.icon} label={provider.label} />,
+            key: provider.id, // 使用 provider.id 作为 key，与 pluginId 保持一致
+            label: <LobehubSkillServerItem label={provider.label} provider={provider.id} />,
+          }))
+        : [],
+    [isLobehubSkillEnabled, allLobehubSkillServers],
+  );
+
+  // 合并 builtin 工具、Klavis 服务器和 LobeHub Skill Provider
   const builtinItems = useMemo(
     () => [
       // 原有的 builtin 工具
@@ -140,10 +184,12 @@ export const useControls = ({
           />
         ),
       })),
+      // LobeHub Skill Providers
+      ...lobehubSkillItems,
       // Klavis 服务器
       ...klavisServerItems,
     ],
-    [filteredBuiltinList, klavisServerItems, checked, togglePlugin, setUpdating],
+    [filteredBuiltinList, klavisServerItems, lobehubSkillItems, checked, togglePlugin, setUpdating],
   );
 
   // 市场 tab 的 items
@@ -233,8 +279,17 @@ export const useControls = ({
       checked.includes(item.key as string),
     );
 
-    // 合并 builtin 和 Klavis
-    const allBuiltinItems = [...enabledBuiltinItems, ...connectedKlavisItems];
+    // 已连接的 LobeHub Skill Providers
+    const connectedLobehubSkillItems = lobehubSkillItems.filter((item) =>
+      checked.includes(item.key as string),
+    );
+
+    // 合并 builtin、Klavis 和 LobeHub Skill
+    const allBuiltinItems = [
+      ...enabledBuiltinItems,
+      ...connectedKlavisItems,
+      ...connectedLobehubSkillItems,
+    ];
 
     if (allBuiltinItems.length > 0) {
       installedItems.push({
@@ -279,7 +334,16 @@ export const useControls = ({
     }
 
     return installedItems;
-  }, [filteredBuiltinList, list, klavisServerItems, checked, togglePlugin, setUpdating, t]);
+  }, [
+    filteredBuiltinList,
+    list,
+    klavisServerItems,
+    lobehubSkillItems,
+    checked,
+    togglePlugin,
+    setUpdating,
+    t,
+  ]);
 
   return { installedPluginItems, marketItems };
 };

package/src/features/Conversation/Messages/AssistantGroup/Tool/Inspector/ToolTitle.tsx

@@ -38,6 +38,15 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, apiName, isLoading, isAbor
   const isBuiltinPlugin = builtinToolIdentifiers.includes(identifier);
   const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
+  // Debug logging for LobeHub Skill title issue
+  console.log('[ToolTitle Debug]', {
+    apiName,
+    identifier,
+    isBuiltinPlugin,
+    pluginMeta,
+    pluginTitle,
+  });
+
   return (
     <div
       className={cx(

package/src/features/FileViewer/Renderer/Code/index.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { Center, Flexbox, Highlighter } from '@lobehub/ui';
+import { createStaticStyles } from 'antd-style';
+import { memo } from 'react';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
+
+import { useTextFileLoader } from '../../hooks/useTextFileLoader';
+
+const styles = createStaticStyles(({ css }) => ({
+  page: css`
+    width: 100%;
+    height: 100%;
+    padding-inline: 24px 4px;
+  `,
+}));
+
+const getLanguage = (fileName?: string): string => {
+  if (!fileName) return 'txt';
+
+  const ext = fileName.toLowerCase().split('.').pop();
+  switch (ext) {
+    // JavaScript/TypeScript
+    case 'js':
+    case 'mjs':
+    case 'cjs': {
+      return 'javascript';
+    }
+    case 'ts': {
+      return 'typescript';
+    }
+    case 'tsx': {
+      return 'tsx';
+    }
+    case 'jsx': {
+      return 'jsx';
+    }
+
+    // Python
+    case 'py':
+    case 'pyw': {
+      return 'python';
+    }
+
+    // Java/JVM Languages
+    case 'java': {
+      return 'java';
+    }
+    case 'kt':
+    case 'kts': {
+      return 'kotlin';
+    }
+    case 'scala': {
+      return 'scala';
+    }
+    case 'groovy': {
+      return 'groovy';
+    }
+
+    // C/C++
+    case 'c':
+    case 'h': {
+      return 'c';
+    }
+    case 'cpp':
+    case 'cxx':
+    case 'cc':
+    case 'hpp':
+    case 'hxx': {
+      return 'cpp';
+    }
+
+    // C#
+    case 'cs': {
+      return 'csharp';
+    }
+
+    // Go
+    case 'go': {
+      return 'go';
+    }
+
+    // Rust
+    case 'rs': {
+      return 'rust';
+    }
+
+    // Ruby
+    case 'rb': {
+      return 'ruby';
+    }
+
+    // PHP
+    case 'php': {
+      return 'php';
+    }
+
+    // Swift
+    case 'swift': {
+      return 'swift';
+    }
+
+    // Shell
+    case 'sh':
+    case 'bash':
+    case 'zsh': {
+      return 'bash';
+    }
+
+    // Web
+    case 'html':
+    case 'htm': {
+      return 'html';
+    }
+    case 'css': {
+      return 'css';
+    }
+    case 'scss': {
+      return 'scss';
+    }
+    case 'sass': {
+      return 'sass';
+    }
+    case 'less': {
+      return 'less';
+    }
+
+    // Data formats
+    case 'json': {
+      return 'json';
+    }
+    case 'xml': {
+      return 'xml';
+    }
+    case 'yaml':
+    case 'yml': {
+      return 'yaml';
+    }
+    case 'toml': {
+      return 'toml';
+    }
+
+    // Markdown
+    case 'md':
+    case 'mdx': {
+      return 'markdown';
+    }
+
+    // SQL
+    case 'sql': {
+      return 'sql';
+    }
+
+    // Other popular languages
+    case 'lua': {
+      return 'lua';
+    }
+    case 'r': {
+      return 'r';
+    }
+    case 'dart': {
+      return 'dart';
+    }
+    case 'elixir':
+    case 'ex':
+    case 'exs': {
+      return 'elixir';
+    }
+    case 'erl':
+    case 'hrl': {
+      return 'erlang';
+    }
+    case 'clj':
+    case 'cljs':
+    case 'cljc': {
+      return 'clojure';
+    }
+    case 'vim': {
+      return 'vim';
+    }
+    case 'dockerfile': {
+      return 'dockerfile';
+    }
+    case 'graphql':
+    case 'gql': {
+      return 'graphql';
+    }
+
+    default: {
+      return 'txt';
+    }
+  }
+};
+
+interface CodeViewerProps {
+  fileId: string;
+  fileName?: string;
+  url: string | null;
+}
+
+/**
+ * Render any code file.
+ */
+const CodeViewer = memo<CodeViewerProps>(({ url, fileName }) => {
+  const { fileData, loading } = useTextFileLoader(url);
+  const language = getLanguage(fileName);
+
+  return (
+    <Flexbox className={styles.page}>
+      {!loading && fileData ? (
+        <Highlighter language={language} showLanguage={false} variant={'borderless'}>
+          {fileData}
+        </Highlighter>
+      ) : (
+        <Center height={'100%'}>
+          <NeuralNetworkLoading size={36} />
+        </Center>
+      )}
+    </Flexbox>
+  );
+});
+
+export default CodeViewer;

package/src/features/FileViewer/Renderer/Image/index.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { Center } from '@lobehub/ui';
-import { memo } from 'react';
+import { memo, useState } from 'react';
+
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 
 interface ImageViewerProps {
   fileId: string;
@@ -9,15 +11,20 @@ interface ImageViewerProps {
 }
 
 const ImageViewer = memo<ImageViewerProps>(({ url }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
   if (!url) return null;
 
   return (
     <Center height={'100%'} width={'100%'}>
+      {!isLoaded && <NeuralNetworkLoading size={36} />}
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         alt="Image preview"
+        onLoad={() => setIsLoaded(true)}
         src={url}
         style={{
+          display: isLoaded ? 'block' : 'none',
           height: '100%',
           objectFit: 'contain',
           overflow: 'hidden',

package/src/features/FileViewer/Renderer/PDF/index.tsx

@@ -7,6 +7,7 @@ import { Document, Page, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 import { lambdaQuery } from '@/libs/trpc/client';
 
 import HighlightLayer from './HighlightLayer';
@@ -62,13 +63,14 @@ const PDFViewer = memo<PDFViewerProps>(({ url, fileId }) => {
       <Flexbox
         align={'center'}
         className={styles.documentContainer}
+        justify={isLoaded ? undefined : 'center'}
         padding={24}
         ref={setContainerRef}
-        style={{ height: isLoaded ? undefined : '100%' }}
       >
         <Document
           className={styles.document}
           file={url}
+          loading={<NeuralNetworkLoading size={36} />}
           onLoadSuccess={onDocumentLoadSuccess}
           options={options}
         >

package/src/features/FileViewer/Renderer/PDF/style.ts

@@ -2,12 +2,13 @@ import { createStaticStyles } from 'antd-style';
 
 export const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
-    min-height: 100%;
+    height: 100%;
   `,
   document: css`
     position: relative;
   `,
   documentContainer: css`
+    flex: 1;
     padding-block: 10px;
     background-color: ${cssVar.colorBgLayout};
   `,

package/src/features/FileViewer/index.tsx

@@ -5,12 +5,10 @@ import { type CSSProperties, memo } from 'react';
 import { type FileListItem } from '@/types/files';
 
 import NotSupport from './NotSupport';
+import CodeViewer from './Renderer/Code';
 import ImageViewer from './Renderer/Image';
-import JavaScriptViewer from './Renderer/JavaScript';
 import MSDocViewer from './Renderer/MSDoc';
-import MarkdownViewer from './Renderer/Markdown';
 import PDFViewer from './Renderer/PDF';
-import TXTViewer from './Renderer/TXT';
 import VideoViewer from './Renderer/Video';
 
 // File type definitions
@@ -27,8 +25,79 @@ const IMAGE_MIME_TYPES = new Set([
 const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogg'];
 const VIDEO_MIME_TYPES = new Set(['video/mp4', 'video/webm', 'video/ogg', 'mp4', 'webm', 'ogg']);
 
-const JS_EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];
-const JS_MIME_TYPES = new Set([
+const CODE_EXTENSIONS = [
+  // JavaScript/TypeScript
+  '.js',
+  '.jsx',
+  '.ts',
+  '.tsx',
+  '.mjs',
+  '.cjs',
+  // Python
+  '.py',
+  '.pyw',
+  // Java/JVM
+  '.java',
+  '.kt',
+  '.kts',
+  '.scala',
+  '.groovy',
+  // C/C++
+  '.c',
+  '.h',
+  '.cpp',
+  '.cxx',
+  '.cc',
+  '.hpp',
+  '.hxx',
+  // Other compiled languages
+  '.cs',
+  '.go',
+  '.rs',
+  '.rb',
+  '.php',
+  '.swift',
+  '.lua',
+  '.r',
+  '.dart',
+  // Shell
+  '.sh',
+  '.bash',
+  '.zsh',
+  // Web
+  '.html',
+  '.htm',
+  '.css',
+  '.scss',
+  '.sass',
+  '.less',
+  // Data formats
+  '.json',
+  '.xml',
+  '.yaml',
+  '.yml',
+  '.toml',
+  '.sql',
+  // Functional languages
+  '.ex',
+  '.exs',
+  '.erl',
+  '.hrl',
+  '.clj',
+  '.cljs',
+  '.cljc',
+  // Markdown
+  '.md',
+  '.mdx',
+  // Other
+  '.vim',
+  '.graphql',
+  '.gql',
+  '.txt',
+];
+
+const CODE_MIME_TYPES = new Set([
+  // JavaScript/TypeScript
   'js',
   'jsx',
   'ts',
@@ -38,14 +107,66 @@ const JS_MIME_TYPES = new Set([
   'text/javascript',
   'application/typescript',
   'text/typescript',
+  // Python
+  'python',
+  'text/x-python',
+  'application/x-python-code',
+  // Java/JVM
+  'java',
+  'text/x-java-source',
+  'kotlin',
+  'scala',
+  // C/C++
+  'c',
+  'text/x-c',
+  'cpp',
+  'text/x-c++',
+  // Other languages
+  'csharp',
+  'go',
+  'rust',
+  'ruby',
+  'php',
+  'text/x-php',
+  'swift',
+  'lua',
+  'r',
+  'dart',
+  // Shell
+  'bash',
+  'shell',
+  'text/x-shellscript',
+  // Web
+  'html',
+  'text/html',
+  'css',
+  'text/css',
+  'scss',
+  'sass',
+  'less',
+  // Data
+  'json',
+  'application/json',
+  'xml',
+  'text/xml',
+  'application/xml',
+  'yaml',
+  'text/yaml',
+  'application/x-yaml',
+  'toml',
+  'sql',
+  'text/x-sql',
+  // Markdown
+  'md',
+  'mdx',
+  'text/markdown',
+  'text/x-markdown',
+  // Other
+  'graphql',
+  'txt',
+  'text/plain',
 ]);
 
-const MARKDOWN_EXTENSIONS = ['.md', '.mdx'];
-const MARKDOWN_MIME_TYPES = new Set(['md', 'mdx', 'text/markdown', 'text/x-markdown']);
-
-const TXT_EXTENSIONS = ['.txt'];
-const TXT_MIME_TYPES = new Set(['txt', 'text/plain']);
-
 const MSDOC_EXTENSIONS = ['.doc', '.docx', '.odt', '.ppt', '.pptx', '.xls', '.xlsx'];
 const MSDOC_MIME_TYPES = new Set([
   'doc',
@@ -117,19 +238,9 @@ const FileViewer = memo<FileViewerProps>(({ id, style, fileType, url, name }) =>
     return <VideoViewer fileId={id} url={url} />;
   }
 
-  // JavaScript/TypeScript files
-  if (matchesFileType(fileType, name, JS_EXTENSIONS, JS_MIME_TYPES)) {
-    return <JavaScriptViewer fileId={id} fileName={name} url={url} />;
-  }
-
-  // Markdown files
-  if (matchesFileType(fileType, name, MARKDOWN_EXTENSIONS, MARKDOWN_MIME_TYPES)) {
-    return <MarkdownViewer fileId={id} url={url} />;
-  }
-
-  // Text files
-  if (matchesFileType(fileType, name, TXT_EXTENSIONS, TXT_MIME_TYPES)) {
-    return <TXTViewer fileId={id} url={url} />;
+  // Code files (JavaScript, TypeScript, Python, Java, C++, Go, Rust, Markdown, etc.)
+  if (matchesFileType(fileType, name, CODE_EXTENSIONS, CODE_MIME_TYPES)) {
+    return <CodeViewer fileId={id} fileName={name} url={url} />;
   }
 
   // Microsoft Office documents

package/src/features/PageEditor/EditorCanvas/useSlashItems.tsx

@@ -1,6 +1,7 @@
 import {
   type IEditor,
   INSERT_CHECK_LIST_COMMAND,
+  INSERT_CODEMIRROR_COMMAND,
   INSERT_HEADING_COMMAND,
   INSERT_HORIZONTAL_RULE_COMMAND,
   INSERT_IMAGE_COMMAND,
@@ -28,12 +29,11 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { openFileSelector } from '@/features/PageEditor/EditorCanvas/actions';
-import { usePageEditorStore } from '@/features/PageEditor/store';
 import { useFileStore } from '@/store/file';
 
 export const useSlashItems = (editor: IEditor | undefined): SlashOptions['items'] => {
   const { t } = useTranslation('editor');
-  const editorState = usePageEditorStore((s) => s.editorState);
+
   const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
 
   const handleImageUpload = async (file: File) => {
@@ -179,8 +179,11 @@ export const useSlashItems = (editor: IEditor | undefined): SlashOptions['items'
         icon: SquareDashedBottomCodeIcon,
         key: 'codeblock',
         label: t('typobar.codeblock'),
-        onSelect: () => {
-          editorState.codeblock();
+        onSelect: (editor) => {
+          editor.dispatchCommand(INSERT_CODEMIRROR_COMMAND, undefined);
+          queueMicrotask(() => {
+            editor.focus();
+          });
         },
       },
       {

package/src/features/PageEditor/store/initialState.ts

@@ -1,4 +1,5 @@
 import { type IEditor } from '@lobehub/editor';
+import { type EditorState } from '@lobehub/editor/react';
 
 export interface PublicState {
   autoSave?: boolean;
@@ -16,7 +17,7 @@ export interface State extends PublicState {
   currentEmoji: string | undefined;
   currentTitle: string;
   editor?: IEditor;
-  editorState?: any; // EditorState from useEditorState hook
+  editorState?: EditorState;
   isDirty: boolean; // Track if there are unsaved changes
   isLoadingContent: boolean; // Track if content is being loaded
   lastSavedContent: string; // Last saved content hash for comparison