@lobehub/chat 1.81.3 → 1.81.5

package/src/tools/local-files/Render/ReadLocalFile/ReadFileSkeleton.tsx

@@ -0,0 +1,50 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding: 8px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  header: css`
+    margin-block-end: 4px;
+  `,
+  meta: css`
+    font-size: 12px;
+  `,
+  path: css`
+    margin-block-start: 4px;
+  `,
+}));
+
+const ReadFileSkeleton = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.container}>
+      <Flexbox
+        align={'center'}
+        className={styles.header}
+        gap={24}
+        horizontal
+        justify={'space-between'}
+      >
+        <Flexbox align={'center'} flex={1} gap={8} horizontal style={{ overflow: 'hidden' }}>
+          <Skeleton.Avatar active shape="square" size={24} style={{ borderRadius: 4 }} />
+          <Skeleton.Input active size="small" style={{ flex: 1, minWidth: 100 }} />
+        </Flexbox>
+        <Flexbox align={'center'} className={styles.meta} gap={16}>
+          <Skeleton.Input active size="small" style={{ maxWidth: 40 }} />
+        </Flexbox>
+      </Flexbox>
+
+      {/* Path */}
+      <Skeleton.Input active block className={styles.path} size="small" />
+    </Flexbox>
+  );
+});
+
+export default ReadFileSkeleton;

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

@@ -0,0 +1,197 @@
+import { LocalReadFileResult } from '@lobechat/electron-client-ipc';
+import { ActionIcon, Icon, Markdown } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { AlignLeft, Asterisk, ChevronDownIcon, ExternalLink, FolderOpen } from 'lucide-react';
+import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { localFileService } from '@/services/electron/localFileService';
+
+const useStyles = createStyles(({ css, token, cx }) => ({
+  actions: cx(
+    'local-file-actions',
+    css`
+      cursor: pointer;
+      color: ${token.colorTextTertiary};
+      opacity: 0;
+      transition: opacity 0.2s ${token.motionEaseInOut};
+    `,
+  ),
+  container: css`
+    padding: 8px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+    transition: all 0.2s ${token.motionEaseInOut};
+
+    &:hover {
+      border-color: ${token.colorBorder};
+
+      .local-file-actions {
+        opacity: 1;
+      }
+    }
+  `,
+  fileName: css`
+    flex: 1;
+    margin-inline-start: 8px;
+    color: ${token.colorTextSecondary};
+
+    &:hover {
+      color: ${token.colorText};
+    }
+  `,
+  header: css`
+    cursor: pointer;
+  `,
+  meta: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  path: css`
+    margin-block-start: 4px;
+    padding-inline: 4px;
+
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+    word-break: break-all;
+  `,
+  previewBox: css`
+    position: relative;
+
+    overflow: hidden;
+
+    margin-block-start: 8px;
+    padding: 8px;
+    border-radius: 8px;
+
+    background: ${token.colorFillQuaternary};
+  `,
+  previewText: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    line-height: 1.6;
+    word-break: break-all;
+    white-space: pre-wrap;
+  `,
+}));
+
+// Assuming the result object might include the original path and an optional warning
+interface ReadFileViewProps extends LocalReadFileResult {
+  path: string; // The full path requested
+}
+
+const ReadFileView = memo<ReadFileViewProps>(
+  ({
+    filename,
+    path,
+    fileType,
+    charCount,
+    lineCount, // Assuming the 250 is total lines?
+    content, // The actual content preview
+  }) => {
+    const { t } = useTranslation('tool');
+    const { styles } = useStyles();
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const handleToggleExpand = () => {
+      setIsExpanded(!isExpanded);
+    };
+
+    const handleOpenFile = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      localFileService.openLocalFile({ path });
+    };
+
+    const handleOpenFolder = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      localFileService.openLocalFolder({ isDirectory: false, path });
+    };
+
+    return (
+      <Flexbox className={styles.container}>
+        <Flexbox
+          align={'center'}
+          className={styles.header}
+          horizontal
+          justify={'space-between'}
+          onClick={handleToggleExpand}
+        >
+          <Flexbox align={'center'} flex={1} gap={0} horizontal style={{ overflow: 'hidden' }}>
+            <FileIcon fileName={filename} fileType={fileType} size={24} variant={'pure'} />
+            <Flexbox horizontal>
+              <Typography.Text className={styles.fileName} ellipsis>
+                {filename}
+              </Typography.Text>
+              {/* Actions on Hover */}
+              <Flexbox className={styles.actions} gap={8} 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 align={'center'} className={styles.meta} gap={8} horizontal>
+            <Flexbox align={'center'} gap={4} horizontal>
+              <Icon icon={Asterisk} size={'small'} />
+              <span>{charCount}</span>
+            </Flexbox>
+            <Flexbox align={'center'} gap={4} horizontal>
+              <Icon icon={AlignLeft} size={'small'} />
+              <span>
+                {content?.split('\n').length || 0} / {lineCount}
+              </span>
+              {/* Display preview lines / total lines */}
+            </Flexbox>
+            <ActionIcon
+              active={isExpanded}
+              icon={ChevronDownIcon}
+              onClick={handleToggleExpand}
+              size="small"
+              style={{
+                marginLeft: 8,
+                transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s',
+              }}
+            />
+          </Flexbox>
+        </Flexbox>
+
+        {/* Path */}
+        <Typography.Text className={styles.path} ellipsis type={'secondary'}>
+          {path}
+        </Typography.Text>
+
+        {/* Content Preview (Collapsible) */}
+        {isExpanded && (
+          <Flexbox className={styles.previewBox}>
+            {fileType === 'md' ? (
+              <Markdown style={{ maxHeight: 240, overflow: 'auto' }}>{content}</Markdown>
+            ) : (
+              <Typography.Paragraph
+                className={styles.previewText}
+                ellipsis={{ expandable: true, rows: 10, symbol: t('localFiles.read.more') }}
+                style={{ maxHeight: 240, overflow: 'auto' }}
+              >
+                {content}
+              </Typography.Paragraph>
+            )}
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default ReadFileView;

package/src/tools/local-files/Render/ReadLocalFile/index.tsx

@@ -0,0 +1,31 @@
+import { LocalReadFileParams } from '@lobechat/electron-client-ipc';
+import { memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatToolSelectors } from '@/store/chat/slices/builtinTool/selectors';
+import { LocalReadFileState } from '@/tools/local-files/type';
+import { ChatMessagePluginError } from '@/types/message';
+
+import ReadFileSkeleton from './ReadFileSkeleton';
+import ReadFileView from './ReadFileView';
+
+interface ReadFileQueryProps {
+  args: LocalReadFileParams;
+  messageId: string;
+  pluginError: ChatMessagePluginError;
+  pluginState: LocalReadFileState;
+}
+
+const ReadFileQuery = memo<ReadFileQueryProps>(({ args, pluginState, messageId }) => {
+  const loading = useChatStore(chatToolSelectors.isSearchingLocalFiles(messageId));
+
+  if (loading) {
+    return <ReadFileSkeleton />;
+  }
+
+  if (!args?.path || !pluginState) return null;
+
+  return <ReadFileView {...pluginState.fileContent} path={args.path} />;
+});
+
+export default ReadFileQuery;

package/src/tools/local-files/Render/ReadLocalFile/style.ts

@@ -0,0 +1,37 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    overflow: hidden;
+
+    max-width: 100%;
+    padding: 12px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadius}px;
+  `,
+  fileName: css`
+    color: ${token.colorTextSecondary};
+  `,
+  meta: css`
+    font-size: 10px;
+    color: ${token.colorTextSecondary};
+  `,
+  metaItem: css`
+    white-space: nowrap;
+  `,
+  path: css`
+    font-size: 12px;
+    line-height: 1;
+  `,
+  previewBox: css`
+    padding-block: 8px;
+    padding-inline: 12px;
+    border-radius: ${token.borderRadiusSM}px;
+    background: ${token.colorFillTertiary};
+  `,
+  previewText: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+  `,
+}));

package/src/tools/local-files/Render/SearchFiles/Result.tsx

@@ -0,0 +1,42 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatToolSelectors } from '@/store/chat/selectors';
+import FileItem from '@/tools/local-files/components/FileItem';
+import { FileResult } from '@/tools/local-files/type';
+import { ChatMessagePluginError } from '@/types/message';
+
+interface SearchFilesProps {
+  messageId: string;
+  pluginError: ChatMessagePluginError;
+  searchResults?: FileResult[];
+}
+
+const SearchFiles = memo<SearchFilesProps>(({ searchResults = [], messageId }) => {
+  const loading = useChatStore(chatToolSelectors.isSearchingLocalFiles(messageId));
+
+  if (loading) {
+    return (
+      <Flexbox gap={4}>
+        <Skeleton.Button active block style={{ height: 16 }} />
+        <Skeleton.Button active block style={{ height: 16 }} />
+        <Skeleton.Button active block style={{ height: 16 }} />
+        <Skeleton.Button active block style={{ height: 16 }} />
+      </Flexbox>
+    );
+  }
+
+  return (
+    <Flexbox gap={2} style={{ maxHeight: 260, overflow: 'scroll' }}>
+      {searchResults.map((item) => (
+        <FileItem key={item.path} {...item} />
+      ))}
+    </Flexbox>
+  );
+});
+
+SearchFiles.displayName = 'SearchFiles';
+
+export default SearchFiles;

package/src/tools/local-files/Render/SearchFiles/SearchQuery/SearchView.tsx

@@ -0,0 +1,77 @@
+import { Icon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { SearchIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { shinyTextStylish } from '@/styles/loading';
+
+const useStyles = createStyles(({ css, token }) => ({
+  font: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  query: css`
+    cursor: pointer;
+
+    padding-block: 4px;
+    padding-inline: 8px;
+    border-radius: 8px;
+
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  shinyText: shinyTextStylish(token),
+}));
+
+interface SearchBarProps {
+  defaultQuery: string;
+  onEditingChange: (editing: boolean) => void;
+  resultsNumber: number;
+  searching?: boolean;
+}
+
+const SearchBar = memo<SearchBarProps>(
+  ({ defaultQuery, resultsNumber, onEditingChange, searching }) => {
+    const { t } = useTranslation('tool');
+    const isMobile = useIsMobile();
+    const { styles, cx } = useStyles();
+    return (
+      <Flexbox
+        align={isMobile ? 'flex-start' : 'center'}
+        distribution={'space-between'}
+        gap={isMobile ? 8 : 40}
+        height={isMobile ? undefined : 32}
+        horizontal={!isMobile}
+      >
+        <Flexbox
+          align={'center'}
+          className={cx(styles.query, searching && styles.shinyText)}
+          gap={8}
+          horizontal
+          onClick={() => {
+            onEditingChange(true);
+          }}
+        >
+          <Icon icon={SearchIcon} />
+          {defaultQuery}
+        </Flexbox>
+
+        <Flexbox align={'center'} horizontal>
+          <>
+            <div className={styles.font}>{t('search.searchResult')}</div>
+            {searching ? <Skeleton.Button active size={'small'} /> : resultsNumber}
+          </>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+export default SearchBar;

package/src/tools/local-files/Render/SearchFiles/SearchQuery/index.tsx

@@ -0,0 +1,72 @@
+import { LocalSearchFilesParams } from '@lobechat/electron-client-ipc';
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Input, Space } from 'antd';
+import { SearchIcon, XIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatToolSelectors } from '@/store/chat/selectors';
+import { LocalFileSearchState } from '@/tools/local-files/type';
+
+import SearchView from './SearchView';
+
+interface SearchQueryViewProps {
+  args: LocalSearchFilesParams;
+
+  messageId: string;
+  pluginState?: LocalFileSearchState;
+}
+
+const SearchQueryView = memo<SearchQueryViewProps>(({ messageId, args, pluginState }) => {
+  const { t } = useTranslation('tool');
+  const loading = useChatStore(chatToolSelectors.isSearchingLocalFiles(messageId));
+  const reSearchLocalFiles = useChatStore((s) => s.reSearchLocalFiles);
+  const searchResults = pluginState?.searchResults || [];
+
+  const [editing, setEditing] = useState(false);
+  const [query, setQuery] = useState(args.keywords);
+
+  const updateAndSearch = async () => {
+    const data: LocalSearchFilesParams = { keywords: query };
+
+    await reSearchLocalFiles(messageId, data);
+  };
+
+  return editing ? (
+    <Flexbox align={'center'} flex={1} gap={8} height={32} horizontal>
+      <Space.Compact style={{ width: '100%' }}>
+        <Input
+          autoFocus
+          onChange={(e) => {
+            setQuery(e.target.value);
+          }}
+          onPressEnter={updateAndSearch}
+          placeholder={t('search.searchBar.placeholder')}
+          style={{ minWidth: 400 }}
+          value={query}
+          variant={'filled'}
+        />
+        <Button
+          icon={<Icon icon={SearchIcon} />}
+          loading={loading}
+          onClick={updateAndSearch}
+          type={'primary'}
+        >
+          {t('search.searchBar.button')}
+        </Button>
+      </Space.Compact>
+      <ActionIcon icon={XIcon} onClick={() => setEditing(false)} />
+    </Flexbox>
+  ) : (
+    <SearchView
+      defaultQuery={args?.keywords}
+      onEditingChange={setEditing}
+      resultsNumber={searchResults.length}
+      searching={loading || !pluginState}
+    />
+  );
+});
+
+export default SearchQueryView;

package/src/tools/local-files/Render/SearchFiles/index.tsx

@@ -0,0 +1,32 @@
+import { LocalSearchFilesParams } from '@lobechat/electron-client-ipc';
+import { memo } from 'react';
+
+import { LocalFileSearchState } from '@/tools/local-files/type';
+import { ChatMessagePluginError } from '@/types/message';
+
+import SearchResult from './Result';
+import SearchQuery from './SearchQuery';
+
+interface SearchFilesProps {
+  args: LocalSearchFilesParams;
+  messageId: string;
+  pluginError: ChatMessagePluginError;
+  pluginState?: LocalFileSearchState;
+}
+
+const SearchFiles = memo<SearchFilesProps>(({ messageId, pluginError, args, pluginState }) => {
+  return (
+    <>
+      <SearchQuery args={args} messageId={messageId} pluginState={pluginState} />
+      <SearchResult
+        messageId={messageId}
+        pluginError={pluginError}
+        searchResults={pluginState?.searchResults}
+      />
+    </>
+  );
+});
+
+SearchFiles.displayName = 'SearchFiles';
+
+export default SearchFiles;

package/src/tools/local-files/Render/index.tsx

@@ -0,0 +1,36 @@
+import { LocalFileItem } from '@lobechat/electron-client-ipc';
+import { memo } from 'react';
+
+import { LocalFilesApiName } from '@/tools/local-files';
+import { BuiltinRenderProps } from '@/types/tool';
+
+import ListFiles from './ListFiles';
+import ReadLocalFile from './ReadLocalFile';
+import SearchFiles from './SearchFiles';
+
+const RenderMap = {
+  [LocalFilesApiName.searchLocalFiles]: SearchFiles,
+  [LocalFilesApiName.listLocalFiles]: ListFiles,
+  [LocalFilesApiName.readLocalFile]: ReadLocalFile,
+};
+
+const LocalFilesRender = memo<BuiltinRenderProps<LocalFileItem[]>>(
+  ({ pluginState, apiName, messageId, pluginError, args }) => {
+    const Render = RenderMap[apiName as any];
+
+    if (!Render) return;
+
+    return (
+      <Render
+        args={args}
+        messageId={messageId}
+        pluginError={pluginError}
+        pluginState={pluginState}
+      />
+    );
+  },
+);
+
+LocalFilesRender.displayName = 'LocalFilesRender';
+
+export default LocalFilesRender;

package/src/tools/local-files/components/FileItem.tsx

@@ -0,0 +1,117 @@
+import { LocalFileItem } from '@lobechat/electron-client-ipc';
+import { ActionIcon, FileTypeIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { FolderOpen } from 'lucide-react';
+import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { localFileService } from '@/services/electron/localFileService';
+import { formatSize } from '@/utils/format';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    border-radius: 4px;
+    color: ${token.colorTextSecondary};
+
+    :hover {
+      color: ${token.colorText};
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  path: css`
+    overflow: hidden;
+
+    font-size: 10px;
+    line-height: 1;
+    color: ${token.colorTextDescription};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  size: css`
+    min-width: 50px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 10px;
+    color: ${token.colorTextTertiary};
+    text-align: end;
+  `,
+  title: css`
+    overflow: hidden;
+    display: block;
+
+    color: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+}));
+
+interface FileItemProps extends LocalFileItem {
+  showTime?: boolean;
+}
+const FileItem = memo<FileItemProps>(
+  ({ isDirectory, name, path, size, type, showTime = false, createdTime }) => {
+    const { t } = useTranslation('tool');
+    const { styles } = useStyles();
+    const [isHovering, setIsHovering] = useState(false);
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={styles.container}
+        gap={12}
+        horizontal
+        onClick={() => {
+          if (isDirectory) {
+            localFileService.openLocalFolder({ isDirectory, path });
+          } else {
+            localFileService.openLocalFile({ path });
+          }
+        }}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        padding={'2px 8px'}
+        style={{ cursor: 'pointer', fontSize: 12, width: '100%' }}
+      >
+        {isDirectory ? (
+          <FileTypeIcon size={16} type={'folder'} variant={'mono'} />
+        ) : (
+          <FileIcon fileName={name} fileType={type} size={16} variant={'pure'} />
+        )}
+        <Flexbox
+          align={'baseline'}
+          gap={4}
+          horizontal
+          style={{ overflow: 'hidden', width: '100%' }}
+        >
+          <div className={styles.title}>{name}</div>
+          {showTime ? (
+            <div className={styles.path}>{dayjs(createdTime).format('MMM DD hh:mm')}</div>
+          ) : (
+            <div className={styles.path}>{path}</div>
+          )}
+        </Flexbox>
+        {isHovering ? (
+          <Flexbox direction={'horizontal-reverse'} gap={8} style={{ minWidth: 50 }}>
+            <ActionIcon
+              icon={FolderOpen}
+              onClick={(e) => {
+                e.stopPropagation();
+                localFileService.openLocalFolder({ isDirectory, path });
+              }}
+              size={'small'}
+              style={{ height: 16, width: 16 }}
+              title={t('localFiles.openFolder')}
+            />
+          </Flexbox>
+        ) : (
+          <span className={styles.size}>{formatSize(size)}</span>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default FileItem;