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

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

package/src/features/ResourceManager/components/Editor/FileContent.tsx

@@ -6,8 +6,6 @@ import { memo } from 'react';
 import FileViewer from '@/features/FileViewer';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
 
-import FileDetail from './FileDetail';
-
 interface FilePreviewerProps {
   fileId?: string;
 }
@@ -22,11 +20,10 @@ const FilePreviewer = memo<FilePreviewerProps>(({ fileId }) => {
   if (!fileId || !displayFile) return null;
 
   return (
-    <Flexbox height={'100%'} horizontal width={'100%'}>
+    <Flexbox height={'100%'} width={'100%'}>
       <Flexbox flex={1} height={'100%'} style={{ overflow: 'auto' }}>
         <FileViewer {...displayFile} />
       </Flexbox>
-      <FileDetail id={fileId} />
     </Flexbox>
   );
 });

package/src/features/ResourceManager/components/Editor/FileCopilot.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { memo, useEffect } from 'react';
+
+import DragUploadZone, { useUploadFiles } from '@/components/DragUploadZone';
+import type { ActionKeys } from '@/features/ChatInput';
+import { ChatInput, ChatList } from '@/features/Conversation';
+import RightPanel from '@/features/RightPanel';
+import { useAgentStore } from '@/store/agent';
+import { agentByIdSelectors, builtinAgentSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+
+const actions: ActionKeys[] = ['model', 'search'];
+
+/**
+ * Help analyze and work with files
+ */
+const FileCopilot = memo(() => {
+  const pageAgentId = useAgentStore(builtinAgentSelectors.pageAgentId);
+  const [activeAgentId, setActiveAgentId, useFetchAgentConfig] = useAgentStore((s) => [
+    s.activeAgentId,
+    s.setActiveAgentId,
+    s.useFetchAgentConfig,
+  ]);
+
+  useEffect(() => {
+    setActiveAgentId(pageAgentId);
+    // Also set the chat store's activeAgentId so topic selectors can work correctly
+    useChatStore.setState({ activeAgentId: pageAgentId });
+  }, [pageAgentId, setActiveAgentId]);
+
+  const currentAgentId = activeAgentId || pageAgentId;
+
+  // Fetch agent config when activeAgentId changes to ensure it's loaded in the store
+  useFetchAgentConfig(true, currentAgentId);
+
+  // Get agent's model info for vision support check
+  const model = useAgentStore((s) => agentByIdSelectors.getAgentModelById(currentAgentId)(s));
+  const provider = useAgentStore((s) =>
+    agentByIdSelectors.getAgentModelProviderById(currentAgentId)(s),
+  );
+  const { handleUploadFiles } = useUploadFiles({ model, provider });
+
+  return (
+    <RightPanel>
+      <DragUploadZone
+        onUploadFiles={handleUploadFiles}
+        style={{ flex: 1, height: '100%', minWidth: 300 }}
+      >
+        <Flexbox flex={1} height={'100%'}>
+          <Flexbox flex={1} style={{ overflow: 'hidden' }}>
+            <ChatList />
+          </Flexbox>
+          <ChatInput leftActions={actions} />
+        </Flexbox>
+      </DragUploadZone>
+    </RightPanel>
+  );
+});
+
+FileCopilot.displayName = 'FileCopilot';
+
+export default FileCopilot;