@lobehub/lobehub 2.0.0-next.267 → 2.0.0-next.269

package/src/components/DragUpload/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-undef */
 import { Center, Flexbox, Icon } from '@lobehub/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { FileImage, FileText, FileUpIcon } from 'lucide-react';
 import { memo } from 'react';
 import { createPortal } from 'react-dom';
@@ -11,22 +11,22 @@ import { getContainer, useDragUpload } from './useDragUpload';
 const BLOCK_SIZE = 64;
 const ICON_SIZE = { size: 36, strokeWidth: 1.5 };
 
-const styles = createStaticStyles(({ css }) => {
+const useStyles = createStyles(({ css, token }) => {
   return {
     container: css`
       width: 320px;
       height: 200px;
-      padding: calc(${cssVar.borderRadiusLG} + 4px);
+      padding: calc(${token.borderRadiusLG}px + 4px);
       border-radius: 16px;
 
-      background: ${cssVar.geekblue};
+      background: ${token.geekblue};
     `,
     content: css`
       width: 100%;
       height: 100%;
       padding: 16px;
       border: 1.5px dashed #fff;
-      border-radius: ${cssVar.borderRadiusLG};
+      border-radius: ${token.borderRadiusLG}px;
     `,
     desc: css`
       font-size: 14px;
@@ -34,13 +34,25 @@ const styles = createStaticStyles(({ css }) => {
       color: #fff;
     `,
     icon: css`
-      border-radius: ${cssVar.borderRadiusLG};
-      color: color-mix(in srgb, ${cssVar.geekblue} 95%, black);
-      background: color-mix(in srgb, ${cssVar.geekblue} 38%, white);
+      border-radius: ${token.borderRadiusLG}px;
+      color: color-mix(in srgb, ${token.geekblue} 95%, black);
+      background: color-mix(in srgb, ${token.geekblue} 38%, white);
     `,
     iconGroup: css`
       margin-block-start: -44px;
     `,
+    iconLeft: css`
+      transform: rotateZ(-20deg) translateX(10px);
+      border-radius: ${token.borderRadiusLG}px;
+      color: color-mix(in srgb, ${token.geekblue} 95%, black);
+      background: color-mix(in srgb, ${token.geekblue} 68%, white);
+    `,
+    iconRight: css`
+      transform: rotateZ(20deg) translateX(-10px);
+      border-radius: ${token.borderRadiusLG}px;
+      color: color-mix(in srgb, ${token.geekblue} 95%, black);
+      background: color-mix(in srgb, ${token.geekblue} 68%, white);
+    `,
     title: css`
       font-size: 20px;
       font-weight: bold;
@@ -54,7 +66,7 @@ const styles = createStaticStyles(({ css }) => {
       width: 100%;
       height: 100%;
 
-      background: ${cssVar.colorBgMask};
+      background: ${token.colorBgMask};
 
       transition: all 0.3s ease-in-out;
     `,
@@ -68,6 +80,7 @@ interface DragUploadProps {
 
 const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }) => {
   const { t } = useTranslation('components');
+  const { styles } = useStyles();
 
   const isDragging = useDragUpload(onUploadFiles);
 
@@ -78,15 +91,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
       <div className={styles.container}>
         <Center className={styles.content} gap={12}>
           <Flexbox className={styles.iconGroup} horizontal>
-            <Center
-              className={styles.icon}
-              height={BLOCK_SIZE * 1.25}
-              style={{
-                background: `color-mix(in srgb, ${cssVar.geekblue} 68%, white)`,
-                transform: 'rotateZ(-20deg) translateX(10px)',
-              }}
-              width={BLOCK_SIZE}
-            >
+            <Center className={styles.iconLeft} height={BLOCK_SIZE * 1.25} width={BLOCK_SIZE}>
               <Icon icon={FileImage} size={ICON_SIZE} />
             </Center>
             <Center
@@ -100,15 +105,7 @@ const DragUpload = memo<DragUploadProps>(({ enabledFiles = true, onUploadFiles }
             >
               <Icon icon={FileUpIcon} size={ICON_SIZE} />
             </Center>
-            <Center
-              className={styles.icon}
-              height={BLOCK_SIZE * 1.25}
-              style={{
-                background: `color-mix(in srgb, ${cssVar.geekblue} 68%, white)`,
-                transform: 'rotateZ(20deg) translateX(-10px)',
-              }}
-              width={BLOCK_SIZE}
-            >
+            <Center className={styles.iconRight} height={BLOCK_SIZE * 1.25} width={BLOCK_SIZE}>
               <Icon icon={FileText} size={ICON_SIZE} />
             </Center>
           </Flexbox>

package/src/components/MemberSelectionModal/MemberSelectionModal.tsx

@@ -162,11 +162,7 @@ export interface MemberSelectionModalProps {
    */
   mode: MemberSelectionMode;
   onCancel: () => void;
-  onConfirm: (
-    selectedAgents: string[],
-    hostConfig?: { model?: string; provider?: string },
-    enableSupervisor?: boolean,
-  ) => void | Promise<void>;
+  onConfirm: (selectedAgents: string[]) => void | Promise<void>;
   open: boolean;
   /**
    * Pre-selected agent IDs (useful for editing existing groups)
@@ -338,12 +334,7 @@ const MemberSelectionModal = memo<MemberSelectionModalProps>(
     const handleConfirm = async () => {
       try {
         setIsAdding(true);
-        // Only pass host config if the host card is visible (being managed in this modal)
-        const shouldManageHost = !isHostCurrentlyEnabled;
-        const hostConfig =
-          shouldManageHost && !isHostRemoved ? normalizedHostModelConfig : undefined;
-        const enableSupervisor = shouldManageHost ? !isHostRemoved : undefined;
-        await onConfirm(selectedAgents, hostConfig, enableSupervisor);
+        await onConfirm(selectedAgents);
         handleReset();
       } catch (error) {
         console.error('Failed to confirm action:', error);

package/src/features/CommandMenu/useCommandMenu.ts

@@ -169,21 +169,11 @@ export const useCommandMenu = () => {
   const handleCreateAgentTeam = async () => {
     closeCommandMenu();
     openGroupWizard({
-      onCreateCustom: async (selectedAgents, hostConfig, enableSupervisor) => {
-        await createGroupWithMembers(selectedAgents, undefined, hostConfig, enableSupervisor);
+      onCreateCustom: async (selectedAgents) => {
+        await createGroupWithMembers(selectedAgents);
       },
-      onCreateFromTemplate: async (
-        templateId,
-        hostConfig,
-        enableSupervisor,
-        selectedMemberTitles,
-      ) => {
-        await createGroupFromTemplate(
-          templateId,
-          hostConfig,
-          enableSupervisor,
-          selectedMemberTitles,
-        );
+      onCreateFromTemplate: async (templateId, selectedMemberTitles) => {
+        await createGroupFromTemplate(templateId, selectedMemberTitles);
       },
     });
   };

package/src/features/ElectronTitlebar/SimpleTitleBar.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Flexbox } from '@lobehub/ui';
+import { type FC } from 'react';
+
+import { ProductLogo } from '@/components/Branding/ProductLogo';
+import { electronStylish } from '@/styles/electron';
+
+import { TITLE_BAR_HEIGHT } from './const';
+
+/**
+ * A simple, minimal TitleBar for Electron windows.
+ * Provides draggable area without business logic (navigation, updates, etc.)
+ * Use this for secondary windows like onboarding, settings, etc.
+ */
+const SimpleTitleBar: FC = () => {
+  return (
+    <Flexbox
+      align={'center'}
+      className={electronStylish.draggable}
+      height={TITLE_BAR_HEIGHT}
+      horizontal
+      justify={'center'}
+      width={'100%'}
+    >
+      <ProductLogo size={16} type={'text'} />
+    </Flexbox>
+  );
+};
+
+export default SimpleTitleBar;

package/src/features/ElectronTitlebar/index.tsx

@@ -67,3 +67,4 @@ const TitleBar = memo(() => {
 export default TitleBar;
 
 export { TITLE_BAR_HEIGHT } from './const';
+export { default as SimpleTitleBar } from './SimpleTitleBar';

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

@@ -4,7 +4,7 @@ import { BUILTIN_AGENT_SLUGS } from '@lobechat/builtin-agents';
 import { ActionIcon, Flexbox } from '@lobehub/ui';
 import { Modal } from 'antd';
 import { cssVar, useTheme } from 'antd-style';
-import { ArrowLeftIcon, BotMessageSquareIcon, DownloadIcon, InfoIcon } from 'lucide-react';
+import { ArrowLeftIcon, DownloadIcon, InfoIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,6 @@ import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/featur
 import Loading from '@/components/Loading/BrandTextLoading';
 import NavHeader from '@/features/NavHeader';
 import PageAgentProvider from '@/features/PageEditor/PageAgentProvider';
-import ToggleRightPanelButton from '@/features/RightPanel/ToggleRightPanelButton';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
@@ -56,7 +55,7 @@ const FileEditorCanvas = memo<FileEditorProps>(({ onBack }) => {
             }
             right={
               <Flexbox gap={8} horizontal>
-                <ToggleRightPanelButton icon={BotMessageSquareIcon} showActive={true} size={20} />
+                {/* <ToggleRightPanelButton icon={BotMessageSquareIcon} showActive={true} size={20} /> */}
                 {fileDetail?.url && (
                   <ActionIcon
                     icon={DownloadIcon}

package/src/features/ResourceManager/components/Explorer/Header/index.tsx

@@ -29,18 +29,18 @@ const Header = memo(() => {
   ]);
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
 
-  // Disable batch actions dropdown when no items selected and not in any library
-  const isBatchActionsDisabled = selectFileIds.length === 0 && !libraryId;
-
-  // If no libraryId, show just the category name
-  const leftContent =
-    !libraryId && category && category !== FilesTabs.All ? (
-      <Flexbox style={{ marginLeft: 8 }}>{t(`tab.${category as FilesTabs}` as any)}</Flexbox>
-    ) : (
-      <Flexbox style={{ marginLeft: 8 }}>
-        <Breadcrumb category={category} knowledgeBaseId={libraryId} />
-      </Flexbox>
-    );
+  // If no libraryId, show category name or "Resource" for All
+  const leftContent = !libraryId ? (
+    <Flexbox style={{ marginLeft: 8 }}>
+      {category === FilesTabs.All
+        ? t('resource', { defaultValue: 'Resource' })
+        : t(`tab.${category as FilesTabs}` as any)}
+    </Flexbox>
+  ) : (
+    <Flexbox style={{ marginLeft: 8 }}>
+      <Breadcrumb category={category} knowledgeBaseId={libraryId} />
+    </Flexbox>
+  );
 
   return (
     <NavHeader
@@ -49,11 +49,7 @@ const Header = memo(() => {
         <>
           <ActionIcon icon={SearchIcon} onClick={() => toggleCommandMenu(true)} />
           <SortDropdown />
-          <BatchActionsDropdown
-            disabled={isBatchActionsDisabled}
-            onActionClick={onActionClick}
-            selectCount={selectFileIds.length}
-          />
+          <BatchActionsDropdown onActionClick={onActionClick} selectCount={selectFileIds.length} />
           <ViewSwitcher />
           <Flexbox style={{ marginLeft: 8 }}>
             <AddButton />

package/src/features/ResourceManager/components/Explorer/ItemDropdown/useFileItemDropdown.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import RepoIcon from '@/components/LibIcon';
-import { clearTreeFolderCache } from '@/features/ResourceManager/components/Tree';
+import { clearTreeFolderCache } from '@/features/ResourceManager/components/LibraryHierarchy';
 import { PAGE_FILE_TYPE } from '@/features/ResourceManager/constants';
 import { documentService } from '@/services/document';
 import { useFileStore } from '@/store/file';

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/TruncatedFileName.tsx

@@ -0,0 +1,130 @@
+import { memo, useEffect, useRef, useState } from 'react';
+
+interface TruncatedFileNameProps {
+  className?: string;
+  name: string;
+}
+
+/**
+ * Truncates file name from the center, preserving the extension at the end
+ * Similar to macOS Finder behavior
+ */
+const TruncatedFileName = memo<TruncatedFileNameProps>(({ name, className }) => {
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const [displayName, setDisplayName] = useState(name);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const updateTruncation = () => {
+      const containerWidth = container.offsetWidth;
+      if (containerWidth === 0) return;
+
+      // Create a temporary span to measure text width
+      const measureSpan = document.createElement('span');
+      measureSpan.style.visibility = 'hidden';
+      measureSpan.style.position = 'absolute';
+      measureSpan.style.whiteSpace = 'nowrap';
+      measureSpan.style.font = window.getComputedStyle(container).font;
+      document.body.append(measureSpan);
+
+      // Measure full name
+      measureSpan.textContent = name;
+      const fullWidth = measureSpan.offsetWidth;
+
+      // If it fits, show the full name
+      if (fullWidth <= containerWidth) {
+        setDisplayName(name);
+        measureSpan.remove();
+        return;
+      }
+
+      // Split filename and extension
+      const lastDotIndex = name.lastIndexOf('.');
+      let baseName = name;
+      let extension = '';
+
+      // Only treat as extension if dot is not at the start and there's content after it
+      if (lastDotIndex > 0 && lastDotIndex < name.length - 1) {
+        baseName = name.slice(0, lastDotIndex);
+        extension = name.slice(lastDotIndex); // includes the dot
+      }
+
+      // Measure ellipsis width
+      measureSpan.textContent = '...';
+      const ellipsisWidth = measureSpan.offsetWidth;
+
+      // Measure extension width
+      measureSpan.textContent = extension;
+      const extensionWidth = measureSpan.offsetWidth;
+
+      // Calculate available width for base name
+      const availableWidth = containerWidth - ellipsisWidth - extensionWidth;
+
+      if (availableWidth <= 0) {
+        // Not enough space, just show ellipsis + extension
+        setDisplayName(`...${extension}`);
+        measureSpan.remove();
+        return;
+      }
+
+      // Binary search to find the optimal split point
+      let left = 0;
+      let right = baseName.length;
+      let bestFit = '';
+
+      while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        const startChars = Math.ceil(mid / 2);
+        const endChars = Math.floor(mid / 2);
+
+        const truncated =
+          baseName.slice(0, startChars) + (mid > 0 ? baseName.slice(-endChars) : '');
+
+        measureSpan.textContent = truncated;
+        const truncatedWidth = measureSpan.offsetWidth;
+
+        if (truncatedWidth <= availableWidth) {
+          bestFit = truncated;
+          left = mid + 1;
+        } else {
+          right = mid - 1;
+        }
+      }
+
+      measureSpan.remove();
+
+      // Construct final truncated name
+      if (bestFit.length === 0) {
+        setDisplayName(`...${extension}`);
+      } else {
+        const startChars = Math.ceil(bestFit.length / 2);
+        const endChars = Math.floor(bestFit.length / 2);
+        setDisplayName(
+          `${baseName.slice(0, startChars)}...${baseName.slice(-endChars)}${extension}`,
+        );
+      }
+    };
+
+    updateTruncation();
+
+    // Use ResizeObserver to handle container size changes
+    const resizeObserver = new ResizeObserver(updateTruncation);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [name]);
+
+  return (
+    <span className={className} ref={containerRef} title={name}>
+      {displayName}
+    </span>
+  );
+});
+
+TruncatedFileName.displayName = 'TruncatedFileName';
+
+export default TruncatedFileName;

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx

@@ -17,7 +17,7 @@ import {
 } from '@/app/[variants]/(main)/resource/features/DndContextWrapper';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import FileIcon from '@/components/FileIcon';
-import { clearTreeFolderCache } from '@/features/ResourceManager/components/Tree';
+import { clearTreeFolderCache } from '@/features/ResourceManager/components/LibraryHierarchy';
 import { PAGE_FILE_TYPE } from '@/features/ResourceManager/constants';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
 import { type FileListItem as FileListItemType } from '@/types/files';
@@ -27,6 +27,7 @@ import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
 import DropdownMenu from '../../ItemDropdown/DropdownMenu';
 import { useFileItemDropdown } from '../../ItemDropdown/useFileItemDropdown';
 import ChunksBadge from './ChunkTag';
+import TruncatedFileName from './TruncatedFileName';
 
 // Initialize dayjs plugin once at module level
 dayjs.extend(relativeTime);
@@ -40,6 +41,7 @@ const styles = createStaticStyles(({ css }) => {
       cursor: pointer;
       min-width: 800px;
 
+      /* Hover effect for individual rows */
       &:hover {
         background: ${cssVar.colorFillTertiary};
       }
@@ -59,6 +61,25 @@ const styles = createStaticStyles(({ css }) => {
       opacity: 0.5;
     `,
 
+    evenRow: css`
+      background: ${cssVar.colorFillQuaternary};
+
+      /* Hover effect overrides zebra striping on the hovered row only */
+      &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      /* Hide zebra striping when any row is hovered */
+      .any-row-hovered & {
+        background: transparent;
+      }
+
+      /* But keep hover effect on the actual hovered row */
+      .any-row-hovered &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+    `,
+
     hover: css`
       opacity: 0;
 
@@ -80,7 +101,6 @@ const styles = createStaticStyles(({ css }) => {
       margin-inline-start: 12px;
 
       color: ${cssVar.colorText};
-      text-overflow: ellipsis;
       white-space: nowrap;
     `,
     nameContainer: css`
@@ -105,6 +125,8 @@ interface FileListItemProps extends FileListItemType {
     size: number;
   };
   index: number;
+  isAnyRowHovered: boolean;
+  onHoverChange: (isHovered: boolean) => void;
   onSelectedChange: (id: string, selected: boolean, shiftKey: boolean, index: number) => void;
   pendingRenameItemId?: string | null;
   selected?: boolean;
@@ -133,6 +155,7 @@ const FileListItem = memo<FileListItemProps>(
     sourceType,
     slug,
     pendingRenameItemId,
+    onHoverChange,
   }) => {
     const { t } = useTranslation(['components', 'file']);
     const { message } = App.useApp();
@@ -376,12 +399,14 @@ const FileListItem = memo<FileListItemProps>(
           className={cx(
             styles.container,
             'file-list-item-group',
+            index % 2 === 0 && styles.evenRow,
             selected && styles.selected,
             isDragging && styles.dragging,
             isOver && styles.dragOver,
           )}
           data-drop-target-id={id}
           data-is-folder={String(isFolder)}
+          data-row-index={index}
           draggable={!!resourceManagerState.libraryId}
           height={48}
           horizontal
@@ -390,6 +415,8 @@ const FileListItem = memo<FileListItemProps>(
           onDragOver={handleDragOver}
           onDragStart={handleDragStart}
           onDrop={handleDrop}
+          onMouseEnter={() => onHoverChange(true)}
+          onMouseLeave={() => onHoverChange(false)}
           paddingInline={8}
           style={{
             borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
@@ -469,7 +496,10 @@ const FileListItem = memo<FileListItemProps>(
                   value={renamingValue}
                 />
               ) : (
-                <span className={styles.name}>{name || t('file:pageList.untitled')}</span>
+                <TruncatedFileName
+                  className={styles.name}
+                  name={name || t('file:pageList.untitled')}
+                />
               )}
             </Flexbox>
             <Flexbox
@@ -482,6 +512,7 @@ const FileListItem = memo<FileListItemProps>(
               onPointerDown={(e) => e.stopPropagation()}
             >
               {!isFolder &&
+                !isPage &&
                 (fileStoreState.isCreatingFileParseTask ||
                 isNull(chunkingStatus) ||
                 !chunkingStatus ? (
@@ -562,7 +593,8 @@ const FileListItem = memo<FileListItemProps>(
       prevProps.url === nextProps.url &&
       prevProps.columnWidths.name === nextProps.columnWidths.name &&
       prevProps.columnWidths.date === nextProps.columnWidths.date &&
-      prevProps.columnWidths.size === nextProps.columnWidths.size
+      prevProps.columnWidths.size === nextProps.columnWidths.size &&
+      prevProps.isAnyRowHovered === nextProps.isAnyRowHovered
     );
   },
 );

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

@@ -29,6 +29,7 @@ const ListViewSkeleton = ({
           key={index}
           paddingInline={8}
           style={{
+            background: index % 2 === 0 ? cssVar.colorFillQuaternary : 'transparent',
             borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
             opacity: getOpacity(index),
           }}
@@ -39,21 +40,21 @@ const ListViewSkeleton = ({
         <Flexbox
           align={'center'}
           horizontal
-          paddingInline={8}
           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 paddingInline={24} style={{ flexShrink: 0 }} width={columnWidths.date}>
+        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.date}>
           <Skeleton.Button active style={{ height: 16, width: '80%' }} />
         </Flexbox>
-        <Flexbox paddingInline={24} style={{ flexShrink: 0 }} width={columnWidths.size}>
+        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.size}>
           <Skeleton.Button active style={{ height: 16, width: '60%' }} />
         </Flexbox>
       </Flexbox>