@lobehub/chat 1.11.9 → 1.12.1

package/src/features/FileViewer/PDFViewer/HighlightLayer.tsx

@@ -0,0 +1,81 @@
+import { FC, memo } from 'react';
+
+import { useFileStore } from '@/store/file';
+import { ChunkMetadata, Coordinates, FileChunk } from '@/types/chunk';
+
+interface HighlightRectProps {
+  coordinates: Coordinates;
+  highlight: boolean;
+}
+
+const HighlightRect: FC<HighlightRectProps> = ({ coordinates, highlight }) => {
+  const { points } = coordinates;
+
+  // 假设points数组包含矩形的四个顶点坐标
+  const [topLeft, topRight, bottomRight, bottomLeft] = points;
+
+  // 计算矩形的属性
+  const minX = Math.min(topLeft[0], topRight[0], bottomRight[0], bottomLeft[0]);
+  const minY = Math.min(topLeft[1], topRight[1], bottomRight[1], bottomLeft[1]);
+  const width = Math.max(topLeft[0], topRight[0], bottomRight[0], bottomLeft[0]) - minX;
+  const height = Math.max(topLeft[1], topRight[1], bottomRight[1], bottomLeft[1]) - minY;
+
+  return (
+    <rect
+      fill={highlight ? 'rgba(255, 255, 0, 0.5)' : 'rgba(255, 255, 0, 0.3)'}
+      height={height}
+      stroke="rgba(255, 255, 0, 0.7)"
+      strokeWidth="1"
+      width={width}
+      x={minX}
+      y={minY}
+    />
+  );
+};
+
+interface HighlightLayerProps {
+  dataSource: FileChunk[];
+  pageNumber: number;
+  width: number;
+}
+
+const HighlightLayer = memo<HighlightLayerProps>(({ dataSource, pageNumber, width }) => {
+  const chunks = dataSource
+    .filter((chunk) => chunk.pageNumber && chunk.pageNumber === pageNumber)
+    .filter(Boolean);
+  const highlightChunkIds = useFileStore((s) => s.highlightChunkIds);
+
+  const isExist = chunks.length > 0;
+
+  if (!isExist) return null;
+
+  const metadata = chunks[0].metadata as ChunkMetadata;
+  if (!metadata.coordinates) return;
+
+  const { layout_width, layout_height } = metadata.coordinates;
+
+  const height = metadata.coordinates.layout_height * (width / metadata.coordinates.layout_width);
+
+  return (
+    <svg
+      height={height}
+      style={{ left: 0, position: 'absolute', top: 0, zIndex: 100 }}
+      viewBox={`0 0 ${layout_width} ${layout_height}`}
+      width={width}
+    >
+      {chunks.map(
+        (chunk, index) =>
+          chunk.metadata && (
+            <HighlightRect
+              coordinates={chunk.metadata.coordinates}
+              highlight={highlightChunkIds.includes(chunk.id)}
+              key={index}
+            />
+          ),
+      )}
+      s
+    </svg>
+  );
+});
+
+export default HighlightLayer;

package/src/features/FileViewer/PDFViewer/index.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import { Fragment, memo, useCallback, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+
+import { lambdaQuery } from '@/libs/trpc/client';
+
+import HighlightLayer from './HighlightLayer';
+import { useStyles } from './style';
+import useResizeObserver from './useResizeObserver';
+
+// 如果海外的地址： https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs
+pdfjs.GlobalWorkerOptions.workerSrc = `https://registry.npmmirror.com/pdfjs-dist/${pdfjs.version}/files/build/pdf.worker.min.mjs`;
+
+const options = {
+  cMapUrl: '/cmaps/',
+  standardFontDataUrl: '/standard_fonts/',
+};
+
+const maxWidth = 1200;
+
+interface PDFViewerProps {
+  fileId: string;
+  url: string | null;
+}
+
+const PDFViewer = memo<PDFViewerProps>(({ url, fileId }) => {
+  const { styles } = useStyles();
+  const [numPages, setNumPages] = useState<number>(0);
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>();
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // eslint-disable-next-line no-undef
+  const onResize = useCallback<ResizeObserverCallback>((entries) => {
+    const [entry] = entries;
+
+    if (entry) {
+      setContainerWidth(entry.contentRect.width);
+    }
+  }, []);
+
+  useResizeObserver(containerRef, onResize);
+
+  const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy) => {
+    setNumPages(nextNumPages);
+    setIsLoaded(true);
+  };
+
+  const { data } = lambdaQuery.chunk.getChunksByFileId.useInfiniteQuery(
+    { id: fileId },
+    { getNextPageParam: (lastPage) => lastPage.nextCursor },
+  );
+
+  const dataSource = data?.pages.flatMap((page) => page.items) || [];
+
+  return (
+    <Flexbox className={styles.container}>
+      <Flexbox
+        align={'center'}
+        className={styles.documentContainer}
+        padding={24}
+        ref={setContainerRef}
+        style={{ height: isLoaded ? undefined : '100%' }}
+      >
+        <Document
+          className={styles.document}
+          file={url}
+          onLoadSuccess={onDocumentLoadSuccess}
+          options={options}
+        >
+          {Array.from({ length: numPages }, (el, index) => {
+            const width = containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth;
+
+            return (
+              <Fragment key={`page_${index + 1}`}>
+                <Page className={styles.page} pageNumber={index + 1} width={width}>
+                  <HighlightLayer dataSource={dataSource} pageNumber={index + 1} width={width} />
+                </Page>
+              </Fragment>
+            );
+          })}
+        </Document>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default PDFViewer;

package/src/features/FileViewer/PDFViewer/style.ts

@@ -0,0 +1,20 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    min-height: 100%;
+  `,
+  document: css`
+    position: relative;
+  `,
+  documentContainer: css`
+    padding-block: 10px;
+    background-color: ${token.colorBgLayout};
+  `,
+  page: css`
+    overflow: hidden;
+    margin-block-end: 12px;
+    border-radius: 4px;
+    box-shadow: ${token.boxShadowTertiary};
+  `,
+}));

package/src/features/FileViewer/PDFViewer/useResizeObserver.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+/**
+ * Observes a given element using ResizeObserver.
+ *
+ * @param {Element} [element] Element to attach ResizeObserver to
+ * @param {ResizeObserverOptions} [options] ResizeObserver options. WARNING! If you define the
+ *   object in component body, make sure to memoize it.
+ * @param {ResizeObserverCallback} observerCallback ResizeObserver callback. WARNING! If you define
+ *   the function in component body, make sure to memoize it.
+ * @returns {void}
+ */
+export default function useResizeObserver(
+  element: Element | null,
+  // eslint-disable-next-line no-undef
+  observerCallback: ResizeObserverCallback,
+  // eslint-disable-next-line no-undef
+  options?: ResizeObserverOptions,
+): void {
+  useEffect(() => {
+    if (!element || !('ResizeObserver' in window)) {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(observerCallback);
+
+    observer.observe(element, options);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, observerCallback, options]);
+}

package/src/features/FileViewer/TXTViewer/index.tsx

@@ -0,0 +1,41 @@
+import { DocRenderer, textFileLoader } from '@cyntler/react-doc-viewer';
+import { Highlighter } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import CircleLoading from '@/components/CircleLoading';
+
+const useStyles = createStyles(({ css, token }) => ({
+  page: css`
+    width: 100%;
+    padding: 24px;
+
+    background: ${token.colorBgContainer};
+    border-radius: 4px;
+    box-shadow: ${token.boxShadowTertiary};
+  `,
+}));
+
+const TXTViewer: DocRenderer = ({ mainState: { currentDocument } }) => {
+  const { styles } = useStyles();
+  return (
+    <Flexbox className={styles.page} id="txt-renderer">
+      {!!currentDocument?.fileData ? (
+        <Highlighter language={'txt'} showLanguage={false} style={{ height: '100%' }} type={'pure'}>
+          {currentDocument?.fileData as string}
+        </Highlighter>
+      ) : (
+        <Center height={'100%'}>
+          <CircleLoading />
+        </Center>
+      )}
+    </Flexbox>
+  );
+};
+
+export default TXTViewer;
+
+TXTViewer.fileTypes = ['txt', 'text/plain'];
+TXTViewer.weight = 0;
+TXTViewer.fileLoader = textFileLoader;

package/src/features/FileViewer/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import DocViewer, { MSDocRenderer } from '@cyntler/react-doc-viewer';
+import { createStyles } from 'antd-style';
+import { CSSProperties, memo } from 'react';
+
+import { FileListItem } from '@/types/files';
+
+import NotSupport from './NotSupport';
+import PDFViewer from './PDFViewer';
+import TXTViewer from './TXTViewer';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding: 12px;
+    background: ${token.colorBgLayout} !important;
+  `,
+}));
+
+interface FileViewerProps extends FileListItem {
+  className?: string;
+  style?: CSSProperties;
+}
+
+const FileViewer = memo<FileViewerProps>(({ id, style, fileType, url, name }) => {
+  const { styles } = useStyles();
+  if (fileType === 'pdf' || name.endsWith('.pdf')) {
+    return <PDFViewer fileId={id} url={url} />;
+  }
+
+  return (
+    <DocViewer
+      className={styles.container}
+      config={{
+        header: { disableHeader: true },
+        noRenderer: { overrideComponent: NotSupport },
+      }}
+      documents={[{ fileName: name, fileType, uri: url }]}
+      pluginRenderers={[TXTViewer, MSDocRenderer]}
+      style={style}
+    />
+  );
+});
+
+export default FileViewer;

package/src/features/KnowledgeBaseModal/AddFilesToKnowledgeBase/SelectForm.tsx

@@ -0,0 +1,115 @@
+import { MaterialFileTypeIcon } from '@lobehub/ui';
+import { App, Button, Form, Select } from 'antd';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import RepoIcon from '@/components/RepoIcon';
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+
+const useStyles = createStyles(({ css, token }) => ({
+  files: css`
+    height: 48px;
+    padding-block: 4px;
+    padding-inline: 8px;
+
+    border: 1px solid ${token.colorSplit};
+    border-radius: 6px;
+  `,
+  formItem: css`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .ant-form-item {
+      margin-block-end: 0;
+    }
+  `,
+}));
+
+interface CreateFormProps {
+  fileIds: string[];
+  knowledgeBaseId?: string;
+  onClose?: () => void;
+}
+
+const SelectForm = memo<CreateFormProps>(({ onClose, knowledgeBaseId, fileIds }) => {
+  const { t } = useTranslation('knowledgeBase');
+  const { styles } = useStyles();
+  const [loading, setLoading] = useState(false);
+
+  const { message } = App.useApp();
+  const [useFetchKnowledgeBaseList, addFilesToKnowledgeBase] = useKnowledgeBaseStore((s) => [
+    s.useFetchKnowledgeBaseList,
+    s.addFilesToKnowledgeBase,
+  ]);
+  const { data, isLoading } = useFetchKnowledgeBaseList();
+  const onFinish = async (values: { id: string }) => {
+    setLoading(true);
+
+    try {
+      await addFilesToKnowledgeBase(values.id, fileIds);
+      setLoading(false);
+      message.success({
+        content: (
+          <Trans i18nKey={'addToKnowledgeBase.addSuccess'} ns={'knowledgeBase'}>
+            文件添加成功，<Link href={`/repos/${values.id}`}>立即查看</Link>
+          </Trans>
+        ),
+      });
+
+      onClose?.();
+    } catch (e) {
+      console.error(e);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Flexbox gap={24}>
+      <Flexbox align={'center'} className={styles.files} gap={8} horizontal>
+        <MaterialFileTypeIcon filename={''} size={32} />
+        {t('addToKnowledgeBase.totalFiles', { count: fileIds.length })}
+      </Flexbox>
+      <Form className={styles.formItem} layout={'vertical'} onFinish={onFinish}>
+        <Form.Item
+          label={t('addToKnowledgeBase.id.title')}
+          name={'id'}
+          required={false}
+          rules={[{ message: t('addToKnowledgeBase.id.required'), required: true }]}
+        >
+          <Select
+            autoFocus
+            loading={isLoading}
+            options={(data || [])
+              .filter((item) => item.id !== knowledgeBaseId)
+              .map((item) => ({
+                label: (
+                  <Flexbox gap={8} horizontal>
+                    <RepoIcon />
+                    {item.name}
+                  </Flexbox>
+                ),
+                value: item.id,
+              }))}
+            placeholder={t('addToKnowledgeBase.id.placeholder')}
+          />
+        </Form.Item>
+
+        <Button
+          block
+          htmlType={'submit'}
+          loading={loading}
+          style={{ marginTop: 16 }}
+          type={'primary'}
+        >
+          {t('addToKnowledgeBase.confirm')}
+        </Button>
+      </Form>
+    </Flexbox>
+  );
+});
+
+export default SelectForm;

package/src/features/KnowledgeBaseModal/AddFilesToKnowledgeBase/index.tsx

@@ -0,0 +1,43 @@
+import { Icon } from '@lobehub/ui';
+import { BookUp2Icon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { createModal } from '@/components/FunctionModal';
+
+import SelectForm from './SelectForm';
+
+const Title = () => {
+  const { t } = useTranslation('knowledgeBase');
+
+  return (
+    <Flexbox gap={8} horizontal>
+      <Icon icon={BookUp2Icon} />
+      {t('addToKnowledgeBase.title')}
+    </Flexbox>
+  );
+};
+
+interface AddFilesToKnowledgeBaseModalProps {
+  fileIds: string[];
+  knowledgeBaseId?: string;
+  onClose?: () => void;
+}
+
+export const useAddFilesToKnowledgeBaseModal = createModal<AddFilesToKnowledgeBaseModalProps>(
+  (instance, params) => ({
+    content: (
+      <Flexbox paddingInline={16} style={{ marginBlock: 24 }}>
+        <SelectForm
+          fileIds={params?.fileIds || []}
+          knowledgeBaseId={params?.knowledgeBaseId}
+          onClose={() => {
+            instance.current?.destroy();
+            params?.onClose?.();
+          }}
+        />
+      </Flexbox>
+    ),
+    title: <Title />,
+  }),
+);

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/Item/Action.tsx

@@ -0,0 +1,103 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button, Dropdown } from 'antd';
+import { InfoIcon, MoreVerticalIcon, Trash2 } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { KnowledgeType } from '@/types/knowledgeBase';
+
+interface ActionsProps {
+  enabled?: boolean;
+  id: string;
+  type: KnowledgeType;
+}
+
+const Actions = memo<ActionsProps>(({ id, type, enabled }) => {
+  const { t } = useTranslation('chat');
+
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  const [
+    addFilesToAgent,
+    addKnowledgeBasesToAgent,
+    removeFilesFromAgent,
+    removeKnowledgeBasesFromAgent,
+  ] = useAgentStore((s) => [
+    s.addFilesToAgent,
+    s.addKnowledgeBaseToAgent,
+    s.removeFileFromAgent,
+    s.removeKnowledgeBaseFromAgent,
+  ]);
+
+  const [loading, setLoading] = useState(false);
+
+  const assignKnowledge = async () => {
+    setLoading(true);
+    if (type === KnowledgeType.KnowledgeBase) {
+      await addKnowledgeBasesToAgent(id);
+    } else {
+      await addFilesToAgent([id], true);
+    }
+    setLoading(false);
+  };
+
+  const removeKnowledge = async () => {
+    setLoading(true);
+    if (type === KnowledgeType.KnowledgeBase) {
+      await removeKnowledgeBasesFromAgent(id);
+    } else {
+      await removeFilesFromAgent(id);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Flexbox align={'center'} horizontal>
+      {enabled ? (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                icon: <Icon icon={InfoIcon} />,
+                key: 'detail',
+                label: t('knowledgeBase.library.action.detail'),
+                onClick: () => {
+                  if (type === KnowledgeType.KnowledgeBase) {
+                    window.open(`/repos/${id}`);
+                    return;
+                  }
+
+                  window.open(`/files/${id}`);
+                },
+              },
+              {
+                danger: true,
+                icon: <Icon icon={Trash2} />,
+                key: 'remove',
+                label: t('knowledgeBase.library.action.remove'),
+                onClick: removeKnowledge,
+              },
+            ],
+          }}
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <ActionIcon icon={MoreVerticalIcon} loading={loading} />
+        </Dropdown>
+      ) : (
+        <Button
+          loading={loading}
+          onClick={assignKnowledge}
+          size={mobile ? 'small' : undefined}
+          type={'primary'}
+        >
+          {t('knowledgeBase.library.action.add')}
+        </Button>
+      )}
+    </Flexbox>
+  );
+});
+
+export default Actions;

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/Item/EditCustomPlugin.tsx

@@ -0,0 +1,55 @@
+import { ActionIcon } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { PackageSearch } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DevModal from '@/features/PluginDevModal';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+
+const EditCustomPlugin = memo<{ identifier: string }>(({ identifier }) => {
+  const { t } = useTranslation('plugin');
+  const [showModal, setModal] = useState(false);
+
+  const [installCustomPlugin, updateNewDevPlugin, uninstallCustomPlugin] = useToolStore((s) => [
+    s.installCustomPlugin,
+    s.updateNewCustomPlugin,
+    s.uninstallCustomPlugin,
+  ]);
+
+  const customPlugin = useToolStore(pluginSelectors.getCustomPluginById(identifier), isEqual);
+
+  return (
+    <div
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <DevModal
+        mode={'edit'}
+        onDelete={() => {
+          uninstallCustomPlugin(identifier);
+          setModal(false);
+        }}
+        onOpenChange={setModal}
+        onSave={async (devPlugin) => {
+          await installCustomPlugin(devPlugin);
+          setModal(false);
+        }}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+        value={customPlugin}
+      />
+      <ActionIcon
+        icon={PackageSearch}
+        onClick={() => {
+          setModal(true);
+        }}
+        title={t('store.actions.manifest')}
+      />
+    </div>
+  );
+});
+
+export default EditCustomPlugin;

package/src/features/KnowledgeBaseModal/AssignKnowledgeBase/Item/PluginTag.tsx

@@ -0,0 +1,58 @@
+import { Icon, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BadgeCheck, CircleUser, Package } from 'lucide-react';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { InstallPluginMeta } from '@/types/tool/plugin';
+
+const useStyles = createStyles(({ css, token }) => ({
+  community: css`
+    color: ${rgba(token.colorInfo, 0.75)};
+    background: ${token.colorInfoBg};
+
+    &:hover {
+      color: ${token.colorInfo};
+    }
+  `,
+  custom: css`
+    color: ${rgba(token.colorWarning, 0.75)};
+    background: ${token.colorWarningBg};
+
+    &:hover {
+      color: ${token.colorWarning};
+    }
+  `,
+  official: css`
+    color: ${rgba(token.colorSuccess, 0.75)};
+    background: ${token.colorSuccessBg};
+
+    &:hover {
+      color: ${token.colorSuccess};
+    }
+  `,
+}));
+
+interface PluginTagProps extends Pick<InstallPluginMeta, 'author' | 'type'> {
+  showIcon?: boolean;
+  showText?: boolean;
+}
+
+const PluginTag = memo<PluginTagProps>(({ showIcon = true, author, type, showText = true }) => {
+  const { t } = useTranslation('plugin');
+  const { styles, cx } = useStyles();
+  const isCustom = type === 'customPlugin';
+  const isOfficial = author === 'LobeHub';
+
+  return (
+    <Tag
+      className={cx(isCustom ? styles.custom : isOfficial ? styles.official : styles.community)}
+      icon={showIcon && <Icon icon={isCustom ? Package : isOfficial ? BadgeCheck : CircleUser} />}
+    >
+      {showText && (author || t(isCustom ? 'store.customPlugin' : 'store.communityPlugin'))}
+    </Tag>
+  );
+});
+
+export default PluginTag;