@lobehub/lobehub 2.0.0-next.73 → 2.0.0-next.75

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;
 }