@lobehub/lobehub 2.0.0-next.72 → 2.0.0-next.74

package/src/tools/local-system/Render/ReadLocalFile/ReadFileView.tsx

@@ -1,8 +1,8 @@
 import { LocalReadFileResult } from '@lobechat/electron-client-ipc';
 import { ActionIcon, Icon, Markdown, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { AlignLeft, Asterisk, ChevronDownIcon, ExternalLink, FolderOpen } from 'lucide-react';
-import React, { memo, useState } from 'react';
+import { AlignLeft, Asterisk, ExternalLink, FolderOpen } from 'lucide-react';
+import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -24,7 +24,6 @@ const useStyles = createStyles(({ css, token, cx }) => ({
   container: css`
     justify-content: space-between;
 
-    height: 64px;
     padding: 8px;
     border-radius: ${token.borderRadiusLG}px;
 
@@ -79,11 +78,11 @@ const useStyles = createStyles(({ css, token, cx }) => ({
 
     overflow: hidden;
 
-    margin-block-start: 8px;
-    padding: 8px;
+    padding-block: 0;
+    padding-inline: 8px;
     border-radius: 8px;
 
-    background: ${token.colorFillQuaternary};
+    background: ${token.colorBgContainer};
   `,
   previewText: css`
     font-size: 12px;
@@ -102,11 +101,6 @@ const ReadFileView = memo<ReadFileViewProps>(
   ({ filename, path, fileType, charCount, content, totalLineCount, totalCharCount, loc }) => {
     const { t } = useTranslation('tool');
     const { styles } = useStyles();
-    const [isExpanded, setIsExpanded] = useState(false);
-
-    const handleToggleExpand = () => {
-      setIsExpanded(!isExpanded);
-    };
 
     const handleOpenFile = (e: React.MouseEvent) => {
       e.stopPropagation();
@@ -121,89 +115,70 @@ const ReadFileView = memo<ReadFileViewProps>(
     const displayPath = useElectronStore(desktopStateSelectors.displayRelativePath(path));
 
     return (
-      <Flexbox className={styles.container}>
-        <Flexbox
-          align={'center'}
-          className={styles.header}
-          gap={12}
-          horizontal
-          justify={'space-between'}
-          onClick={handleToggleExpand}
-        >
-          <Flexbox align={'center'} flex={1} gap={0} horizontal style={{ overflow: 'hidden' }}>
-            <FileIcon fileName={filename} fileType={fileType} size={16} variant={'raw'} />
-            <Flexbox horizontal>
-              <Text className={styles.fileName} ellipsis>
-                {filename}
-              </Text>
-              {/* Actions on Hover */}
-              <Flexbox className={styles.actions} gap={2} horizontal style={{ marginLeft: 8 }}>
-                <ActionIcon
-                  icon={ExternalLink}
-                  onClick={handleOpenFile}
-                  size="small"
-                  title={t('localFiles.openFile')}
-                />
-                <ActionIcon
-                  icon={FolderOpen}
-                  onClick={handleOpenFolder}
-                  size="small"
-                  title={t('localFiles.openFolder')}
-                />
+      <Flexbox className={styles.container} gap={12}>
+        <Flexbox>
+          <Flexbox
+            align={'center'}
+            className={styles.header}
+            gap={12}
+            horizontal
+            justify={'space-between'}
+          >
+            <Flexbox align={'center'} flex={1} gap={0} horizontal style={{ overflow: 'hidden' }}>
+              <FileIcon fileName={filename} fileType={fileType} size={16} variant={'raw'} />
+              <Flexbox horizontal>
+                <Text className={styles.fileName} ellipsis>
+                  {filename}
+                </Text>
+                {/* Actions on Hover */}
+                <Flexbox className={styles.actions} gap={2} horizontal style={{ marginLeft: 8 }}>
+                  <ActionIcon
+                    icon={ExternalLink}
+                    onClick={handleOpenFile}
+                    size="small"
+                    title={t('localFiles.openFile')}
+                  />
+                  <ActionIcon
+                    icon={FolderOpen}
+                    onClick={handleOpenFolder}
+                    size="small"
+                    title={t('localFiles.openFolder')}
+                  />
+                </Flexbox>
               </Flexbox>
             </Flexbox>
-          </Flexbox>
-          <Flexbox align={'center'} className={styles.meta} gap={8} horizontal>
-            {isExpanded && (
+            <Flexbox align={'center'} className={styles.meta} gap={16} horizontal>
               <Flexbox align={'center'} gap={4} horizontal>
                 <Icon icon={Asterisk} size={'small'} />
                 <span>
                   {charCount} / <span className={styles.lineCount}>{totalCharCount}</span>
                 </span>
               </Flexbox>
-            )}
-            <Flexbox align={'center'} gap={4} horizontal>
-              <Icon icon={AlignLeft} size={'small'} />
-              {isExpanded ? (
+              <Flexbox align={'center'} gap={4} horizontal>
+                <Icon icon={AlignLeft} size={'small'} />
                 <span>
                   L{loc?.[0]}-{loc?.[1]} /{' '}
                   <span className={styles.lineCount}>{totalLineCount}</span>
                 </span>
-              ) : (
-                <span>
-                  L{loc?.[0]}-{loc?.[1]}
-                </span>
-              )}
+              </Flexbox>
             </Flexbox>
-            <ActionIcon
-              active={isExpanded}
-              icon={ChevronDownIcon}
-              onClick={handleToggleExpand}
-              size="small"
-              style={{
-                transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 0.2s',
-              }}
-            />
           </Flexbox>
+
+          {/* Path */}
+          <Text className={styles.path} ellipsis type={'secondary'}>
+            {displayPath}
+          </Text>
         </Flexbox>
 
-        {/* Path */}
-        <Text className={styles.path} ellipsis type={'secondary'}>
-          {displayPath}
-        </Text>
-
-        {isExpanded && (
-          <Flexbox className={styles.previewBox} style={{ maxHeight: 240, overflow: 'auto' }}>
-            {fileType === 'md' ? (
-              <Markdown>{content}</Markdown>
-            ) : (
-              <div className={styles.previewText} style={{ width: '100%' }}>
-                {content}
-              </div>
-            )}
-          </Flexbox>
-        )}
+        <Flexbox className={styles.previewBox} style={{ maxHeight: 240 }}>
+          {fileType === 'md' ? (
+            <Markdown style={{ overflow: 'auto' }}>{content}</Markdown>
+          ) : (
+            <div className={styles.previewText} style={{ width: '100%' }}>
+              {content}
+            </div>
+          )}
+        </Flexbox>
       </Flexbox>
     );
   },

package/src/tools/local-system/Render/index.ts

@@ -1,4 +1,5 @@
 import { LocalSystemApiName } from '../index';
+import EditLocalFile from './EditLocalFile';
 import ListFiles from './ListFiles';
 import MoveLocalFiles from './MoveLocalFiles';
 import ReadLocalFile from './ReadLocalFile';
@@ -11,6 +12,7 @@ import WriteFile from './WriteFile';
  * Local System Render Components Registry
  */
 export const LocalSystemRenders = {
+  [LocalSystemApiName.editLocalFile]: EditLocalFile,
   [LocalSystemApiName.listLocalFiles]: ListFiles,
   [LocalSystemApiName.moveLocalFiles]: MoveLocalFiles,
   [LocalSystemApiName.readLocalFile]: ReadLocalFile,

package/src/tools/local-system/index.ts

@@ -206,6 +206,7 @@ export const LocalSystemManifest: BuiltinToolManifest = {
     {
       description:
         'Perform exact string replacements in files. Must read the file first before editing.',
+      humanIntervention: 'required',
       name: LocalSystemApiName.editLocalFile,
       parameters: {
         properties: {

package/src/tools/local-system/type.ts

@@ -1,5 +1,4 @@
 import {
-  EditLocalFileResult,
   GetCommandOutputResult,
   GlobFilesResult,
   GrepContentResult,
@@ -85,6 +84,8 @@ export interface GlobFilesState {
 
 // Edit State
 export interface EditLocalFileState {
-  message: string;
-  result: EditLocalFileResult;
+  diffText?: string;
+  linesAdded?: number;
+  linesDeleted?: number;
+  replacements: number;
 }

package/src/app/[variants]/(main)/(mobile)/me/(home)/loading.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import { Skeleton } from 'antd';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Divider from '@/components/Cell/Divider';
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-
-const Loading = memo(() => {
-  return (
-    <>
-      <Flexbox align={'center'} gap={12} horizontal paddingBlock={12} paddingInline={12}>
-        <Skeleton.Avatar active shape={'circle'} size={48} />
-        <Skeleton.Button active block />
-      </Flexbox>
-      <Flexbox gap={4} horizontal paddingBlock={12} paddingInline={16}>
-        <Skeleton.Button active block />
-        <Skeleton.Button active block />
-        <Skeleton.Button active block />
-      </Flexbox>
-      <Divider />
-      <SkeletonLoading
-        active
-        paragraph={{ rows: 6, style: { marginBottom: 0 }, width: '100%' }}
-        title={false}
-      />
-      <Divider />
-      <SkeletonLoading
-        active
-        paragraph={{ rows: 3, style: { marginBottom: 0 }, width: '100%' }}
-        title={false}
-      />
-    </>
-  );
-});
-
-export default Loading;

package/src/app/[variants]/(main)/(mobile)/me/(home)/page.tsx

@@ -1,40 +0,0 @@
-import { redirect } from 'next/navigation';
-import { Center } from 'react-layout-kit';
-
-import BrandWatermark from '@/components/BrandWatermark';
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Category from './features/Category';
-import UserBanner from './features/UserBanner';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('common', locale);
-  return metadataModule.generate({
-    title: t('tab.me'),
-    url: '/me',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const isMobile = await RouteVariants.getIsMobile(props);
-
-  if (!isMobile) return redirect('/chat');
-
-  return (
-    <>
-      <UserBanner />
-      <Category />
-      <Center padding={16}>
-        <BrandWatermark />
-      </Center>
-    </>
-  );
-};
-
-Page.displayName = 'Me';
-
-export default Page;

package/src/app/[variants]/(main)/(mobile)/me/profile/loading.tsx

@@ -1,5 +0,0 @@
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-
-export default () => {
-  return <SkeletonLoading paragraph={{ rows: 8 }} />;
-};

package/src/app/[variants]/(main)/(mobile)/me/profile/page.tsx

@@ -1,30 +0,0 @@
-import { redirect } from 'next/navigation';
-
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Category from './features/Category';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('auth', locale);
-  return metadataModule.generate({
-    description: t('header.desc'),
-    title: t('header.title'),
-    url: '/me/profile',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const isMobile = await RouteVariants.getIsMobile(props);
-
-  if (!isMobile) return redirect('/profile');
-
-  return <Category />;
-};
-
-Page.displayName = 'MeProfile';
-
-export default Page;

package/src/app/[variants]/(main)/(mobile)/me/settings/loading.tsx

@@ -1,5 +0,0 @@
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-
-export default () => {
-  return <SkeletonLoading paragraph={{ rows: 8 }} />;
-};

package/src/app/[variants]/(main)/(mobile)/me/settings/page.tsx

@@ -1,30 +0,0 @@
-import { redirect } from 'next/navigation';
-
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Category from './features/Category';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('setting', locale);
-  return metadataModule.generate({
-    description: t('header.desc'),
-    title: t('header.title'),
-    url: '/me/settings',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const isMobile = await RouteVariants.getIsMobile(props);
-
-  if (!isMobile) return redirect('/settings');
-
-  return <Category />;
-};
-
-Page.displayName = 'MeSettings';
-
-export default Page;

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/TopActions.tsx

@@ -1,106 +0,0 @@
-import { ActionIcon, ActionIconProps, Hotkey } from '@lobehub/ui';
-import { Compass, FolderClosed, MessageSquare, Palette } from 'lucide-react';
-import Link from 'next/link';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { useSessionStore } from '@/store/session';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-import { HotkeyEnum } from '@/types/hotkey';
-
-const ICON_SIZE: ActionIconProps['size'] = {
-  blockSize: 40,
-  size: 24,
-  strokeWidth: 2,
-};
-
-export interface TopActionProps {
-  isPinned?: boolean | null;
-  tab?: SidebarTabKey;
-}
-
-//  TODO Change icons
-const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
-  const { t } = useTranslation('common');
-  const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
-  const { showMarket, enableKnowledgeBase, showAiImage } =
-    useServerConfigStore(featureFlagsSelectors);
-  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.NavigateToChat));
-
-  const isChatActive = tab === SidebarTabKey.Chat && !isPinned;
-  const isFilesActive = tab === SidebarTabKey.Files;
-  const isDiscoverActive = tab === SidebarTabKey.Discover;
-  const isImageActive = tab === SidebarTabKey.Image;
-
-  return (
-    <Flexbox gap={8}>
-      <Link
-        aria-label={t('tab.chat')}
-        href={'/chat'}
-        onClick={(e) => {
-          // If Cmd key is pressed, let the default link behavior happen (open in new tab)
-          if (e.metaKey || e.ctrlKey) {
-            return;
-          }
-
-          // Otherwise, prevent default and switch session within the current tab
-          e.preventDefault();
-          switchBackToChat(useSessionStore.getState().activeId);
-        }}
-      >
-        <ActionIcon
-          active={isChatActive}
-          icon={MessageSquare}
-          size={ICON_SIZE}
-          title={
-            <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
-              <span>{t('tab.chat')}</span>
-              <Hotkey inverseTheme keys={hotkey} />
-            </Flexbox>
-          }
-          tooltipProps={{ placement: 'right' }}
-        />
-      </Link>
-      {enableKnowledgeBase && (
-        <Link aria-label={t('tab.knowledgeBase')} href={'/knowledge'}>
-          <ActionIcon
-            active={isFilesActive}
-            icon={FolderClosed}
-            size={ICON_SIZE}
-            title={t('tab.knowledgeBase')}
-            tooltipProps={{ placement: 'right' }}
-          />
-        </Link>
-      )}
-      {showAiImage && (
-        <Link aria-label={t('tab.aiImage')} href={'/image'}>
-          <ActionIcon
-            active={isImageActive}
-            icon={Palette}
-            size={ICON_SIZE}
-            title={t('tab.aiImage')}
-            tooltipProps={{ placement: 'right' }}
-          />
-        </Link>
-      )}
-      {showMarket && (
-        <Link aria-label={t('tab.discover')} href={'/discover'}>
-          <ActionIcon
-            active={isDiscoverActive}
-            icon={Compass}
-            size={ICON_SIZE}
-            title={t('tab.discover')}
-            tooltipProps={{ placement: 'right' }}
-          />
-        </Link>
-      )}
-    </Flexbox>
-  );
-});
-
-export default TopActions;

package/src/app/[variants]/(main)/changelog/layout.tsx

@@ -1,10 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-
-import Desktop from './_layout/Desktop';
-import Mobile from './_layout/Mobile';
-
-const MainLayout = ServerLayout({ Desktop, Mobile });
-
-MainLayout.displayName = 'ChangelogLayout';
-
-export default MainLayout;

package/src/app/[variants]/(main)/changelog/modal/page.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import { useQueryRoute } from '@/hooks/useQueryRoute';
-
-/**
- * @description: Changelog Modal (intercepting routes fallback when hard refresh)
- * @example: /changelog/modal => /changelog
- * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
- */
-
-const ChangelogModal = () => {
-  const router = useQueryRoute();
-
-  useEffect(() => {
-    router.replace('/changelog');
-  }, []);
-
-  return null;
-};
-
-export default ChangelogModal;

package/src/app/[variants]/(main)/changelog/page.tsx

@@ -1,78 +0,0 @@
-import { Divider, Skeleton } from 'antd';
-import { notFound } from 'next/navigation';
-import { Fragment, Suspense } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import Pagination from '@/app/[variants]/@modal/(.)changelog/modal/features/Pagination';
-import UpdateChangelogStatus from '@/app/[variants]/@modal/(.)changelog/modal/features/UpdateChangelogStatus';
-import StructuredData from '@/components/StructuredData';
-import { serverFeatureFlags } from '@/config/featureFlags';
-import { BRANDING_NAME } from '@/const/branding';
-import { OFFICIAL_SITE } from '@/const/url';
-import { ldModule } from '@/server/ld';
-import { metadataModule } from '@/server/metadata';
-import { ChangelogService } from '@/server/services/changelog';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import GridLayout from './features/GridLayout';
-import Post from './features/Post';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('metadata', locale);
-  return metadataModule.generate({
-    canonical: urlJoin(OFFICIAL_SITE, 'changelog'),
-    description: t('changelog.description', { appName: BRANDING_NAME }),
-    title: t('changelog.title'),
-    url: '/changelog',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const hideDocs = serverFeatureFlags().hideDocs;
-  if (hideDocs) return notFound();
-
-  const { isMobile, locale } = await RouteVariants.getVariantsFromProps(props);
-  const { t } = await translation('metadata', locale);
-  const changelogService = new ChangelogService();
-  const data = await changelogService.getChangelogIndex();
-
-  if (!data) return notFound();
-
-  const ld = ldModule.generate({
-    description: t('changelog.description', { appName: BRANDING_NAME }),
-    title: t('changelog.title', { appName: BRANDING_NAME }),
-    url: '/changelog',
-  });
-
-  return (
-    <>
-      <StructuredData ld={ld} />
-      <Flexbox gap={isMobile ? 16 : 48}>
-        {data?.map((item) => (
-          <Fragment key={item.id}>
-            <Suspense
-              fallback={
-                <GridLayout>
-                  <Divider />
-                  <Skeleton active paragraph={{ rows: 5 }} />
-                </GridLayout>
-              }
-            >
-              <Post locale={locale} mobile={isMobile} {...item} />
-            </Suspense>
-          </Fragment>
-        ))}
-      </Flexbox>
-      <GridLayout>
-        <Pagination />
-      </GridLayout>
-      <UpdateChangelogStatus currentId={data[0]?.id} />
-    </>
-  );
-};
-
-export default Page;