@lobehub/chat 1.15.6 → 1.15.8

package/locales/zh-TW/ragEval.json

@@ -0,0 +1,91 @@
+{
+  "addDataset": {
+    "confirm": "新建",
+    "description": {
+      "placeholder": "數據集簡介（選填）"
+    },
+    "name": {
+      "placeholder": "數據集名稱",
+      "required": "請填寫數據集名稱"
+    },
+    "title": "添加數據集"
+  },
+  "dataset": {
+    "addNewButton": "創建數據集",
+    "emptyGuide": "當前數據集為空，請創建一個數據集。",
+    "list": {
+      "table": {
+        "actions": {
+          "importData": "導入數據"
+        },
+        "columns": {
+          "actions": "操作",
+          "ideal": {
+            "title": "期望回答"
+          },
+          "question": {
+            "title": "問題"
+          },
+          "referenceFiles": {
+            "title": "參考文件"
+          }
+        },
+        "notSelected": "請在左側選擇數據集",
+        "title": "數據集詳情"
+      },
+      "title": "數據集"
+    }
+  },
+  "evaluation": {
+    "addEvaluation": {
+      "confirm": "新建",
+      "datasetId": {
+        "placeholder": "請選擇你的評測數據集",
+        "required": "請選擇評測數據集"
+      },
+      "description": {
+        "placeholder": "評測任務簡介（選填）"
+      },
+      "name": {
+        "placeholder": "評測任務名稱",
+        "required": "請填寫評測任務名稱"
+      },
+      "title": "添加評測任務"
+    },
+    "addNewButton": "創建評測",
+    "emptyGuide": "當前評測任務為空，開始創建評測。",
+    "table": {
+      "columns": {
+        "actions": {
+          "checkStatus": "檢查狀態",
+          "confirmDelete": "是否刪除本條評測",
+          "confirmRun": "是否開始運行？開始運行後將在後台異步執行評測任務，關閉頁面不影響異步任務的執行",
+          "downloadRecords": "下載評測",
+          "retry": "重試",
+          "run": "運行",
+          "title": "操作"
+        },
+        "datasetId": {
+          "title": "數據集"
+        },
+        "name": {
+          "title": "評測任務名稱"
+        },
+        "records": {
+          "title": "評測記錄數"
+        },
+        "referenceFiles": {
+          "title": "參考文件"
+        },
+        "status": {
+          "error": "執行出錯",
+          "pending": "待運行",
+          "processing": "運行中",
+          "success": "執行成功",
+          "title": "狀態"
+        }
+      },
+      "title": "評測任務列表"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.15.6",
+  "version": "1.15.8",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -159,6 +159,7 @@
     "ip": "^2.0.1",
     "jose": "^5.7.0",
     "js-sha256": "^0.11.0",
+    "jsonl-parse-stringify": "^1.0.3",
     "langchain": "^0.2.17",
     "langfuse": "^3.19.0",
     "langfuse-core": "^3.19.0",

package/src/app/(main)/repos/[id]/@menu/Head/index.tsx

@@ -1,17 +1,13 @@
 'use client';
 
-import { Skeleton, Typography } from 'antd';
+import { Typography } from 'antd';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import GoBack from '@/components/GoBack';
 import RepoIcon from '@/components/RepoIcon';
 
-import { useKnowledgeBaseItem } from '../../hooks/useKnowledgeItem';
-
-const Head = memo<{ id: string }>(({ id }) => {
-  const { data, isLoading } = useKnowledgeBaseItem(id);
-
+const Head = memo<{ name?: string }>(({ name }) => {
   return (
     <Flexbox gap={8}>
       <GoBack href={'/files'} />
@@ -19,13 +15,8 @@ const Head = memo<{ id: string }>(({ id }) => {
         <Center style={{ minWidth: 24 }} width={24}>
           <RepoIcon />
         </Center>
-        {isLoading ? (
-          <Skeleton active paragraph={{ rows: 1, style: { marginBottom: 0 } }} title={false} />
-        ) : (
-          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
-            {data?.name}
-          </Typography.Text>
-        )}
+
+        <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>{name}</Typography.Text>
       </Flexbox>
     </Flexbox>
   );

package/src/app/(main)/repos/[id]/@menu/Menu/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Icon } from '@lobehub/ui';
-import { FileText } from 'lucide-react';
+import { FileText, GaugeIcon } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { memo, useMemo, useState } from 'react';
@@ -10,31 +10,40 @@ import { Flexbox } from 'react-layout-kit';
 
 import Menu from '@/components/Menu';
 import type { MenuProps } from '@/components/Menu';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 const FileMenu = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('knowledgeBase');
   const pathname = usePathname();
+  const { enableRAGEval } = useServerConfigStore(featureFlagsSelectors);
+  const [activeKey, setActiveKey] = useState(
+    pathname.startsWith(`/repos/${id}/evals`) ? 'eval' : 'files',
+  );
 
-  const [activeKey, setActiveKey] = useState(pathname);
-
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={FileText} />,
-        key: `/repos/${id}`,
-        label: <Link href={`/repos/${id}`}>{t('tab.files')}</Link>,
-      },
-      // {
-      //   icon: <Icon icon={TestTubeDiagonal} />,
-      //   key: `/repos/${id}/testing`,
-      //   label: <Link href={`/repos/${id}/testing`}>{t('tab.testing')}</Link>,
-      // },
-      // {
-      //   icon: <Icon icon={Settings2Icon} />,
-      //   key: `/repos/${id}/settings`,
-      //   label: <Link href={`/repos/${id}/settings`}>{t('tab.settings')}</Link>,
-      // },
-    ],
+  const items = useMemo(
+    () =>
+      [
+        {
+          icon: <Icon icon={FileText} />,
+          key: 'files',
+          label: <Link href={`/repos/${id}`}>{t('tab.files')}</Link>,
+        },
+        enableRAGEval && {
+          icon: <Icon icon={GaugeIcon} />,
+          key: 'eval',
+          label: <Link href={`/repos/${id}/evals/dataset`}>{t('tab.evals')}</Link>,
+        },
+        // {
+        //   icon: <Icon icon={TestTubeDiagonal} />,
+        //   key: `/repos/${id}/testing`,
+        //   label: <Link href={`/repos/${id}/testing`}>{t('tab.testing')}</Link>,
+        // },
+        // {
+        //   icon: <Icon icon={Settings2Icon} />,
+        //   key: `/repos/${id}/settings`,
+        //   label: <Link href={`/repos/${id}/settings`}>{t('tab.settings')}</Link>,
+        // },
+      ].filter(Boolean) as MenuProps['items'],
     [t],
   );
 

package/src/app/(main)/repos/[id]/@menu/default.tsx

@@ -1,5 +1,8 @@
+import { notFound } from 'next/navigation';
 import { Flexbox } from 'react-layout-kit';
 
+import { KnowledgeBaseModel } from '@/database/server/models/knowledgeBase';
+
 import Head from './Head';
 import Menu from './Menu';
 
@@ -9,12 +12,15 @@ interface Params {
 
 type Props = { params: Params };
 
-const MenuPage = ({ params }: Props) => {
+const MenuPage = async ({ params }: Props) => {
   const id = params.id;
+  const item = await KnowledgeBaseModel.findById(params.id);
+
+  if (!item) return notFound();
 
   return (
     <Flexbox gap={16} height={'100%'} paddingInline={12} style={{ paddingTop: 12 }}>
-      <Head id={id} />
+      <Head name={item.name} />
       <Menu id={id} />
     </Flexbox>
   );

package/src/app/(main)/repos/[id]/evals/components/Container.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { PropsWithChildren } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding: 16px;
+    background: ${token.colorBgContainer};
+    border-radius: 8px;
+  `,
+}));
+
+const Container = ({ children }: PropsWithChildren) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} height={'100%'}>
+      {children}
+    </Flexbox>
+  );
+};
+
+export default Container;

package/src/app/(main)/repos/[id]/evals/components/Tabs.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { TabsNav } from '@lobehub/ui';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export const Tabs = ({ knowledgeBaseId }: { knowledgeBaseId: string }) => {
+  const pathname = usePathname();
+
+  const key = pathname.split('/').pop();
+
+  return (
+    <TabsNav
+      activeKey={key}
+      items={[
+        {
+          key: 'dataset',
+          label: (
+            <Link href={`/repos/${knowledgeBaseId}/evals/dataset`} style={{ color: 'initial' }}>
+              数据集
+            </Link>
+          ),
+        },
+        {
+          key: 'evaluation',
+          label: (
+            <Link href={`/repos/${knowledgeBaseId}/evals/evaluation`} style={{ color: 'initial' }}>
+              评测任务
+            </Link>
+          ),
+        },
+      ]}
+    />
+  );
+};

package/src/app/(main)/repos/[id]/evals/dataset/CreateDataset/CreateForm.tsx

@@ -0,0 +1,72 @@
+import { Button, Form, Input } from 'antd';
+import { css, cx } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { CreateNewEvalDatasets } from '@/types/eval';
+
+const formItem = css`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .ant-form-item {
+    margin-block-end: 0;
+  }
+`;
+
+interface CreateFormProps {
+  knowledgeBaseId: string;
+  onClose?: () => void;
+}
+
+const CreateForm = memo<CreateFormProps>(({ onClose, knowledgeBaseId }) => {
+  const { t } = useTranslation('ragEval');
+  const [loading, setLoading] = useState(false);
+  const createNewDataset = useKnowledgeBaseStore((s) => s.createNewDataset);
+
+  const onFinish = async (values: CreateNewEvalDatasets) => {
+    setLoading(true);
+
+    try {
+      await createNewDataset({ ...values, knowledgeBaseId });
+      setLoading(false);
+      onClose?.();
+    } catch (e) {
+      console.error(e);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Flexbox gap={8}>
+      <Form className={cx(formItem)} onFinish={onFinish}>
+        <Form.Item
+          name={'name'}
+          rules={[{ message: t('addDataset.name.required'), required: true }]}
+        >
+          <Input autoFocus placeholder={t('addDataset.name.placeholder')} />
+        </Form.Item>
+        <Form.Item name={'description'}>
+          <Input.TextArea
+            placeholder={t('addDataset.description.placeholder')}
+            style={{ minHeight: 120 }}
+          />
+        </Form.Item>
+        <Button
+          block
+          htmlType={'submit'}
+          loading={loading}
+          style={{ marginTop: 16 }}
+          type={'primary'}
+        >
+          {t('addDataset.confirm')}
+        </Button>
+      </Form>
+    </Flexbox>
+  );
+});
+
+export default CreateForm;

package/src/app/(main)/repos/[id]/evals/dataset/CreateDataset/index.tsx

@@ -0,0 +1,37 @@
+import { Icon } from '@lobehub/ui';
+import { SheetIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { createModal } from '@/components/FunctionModal';
+
+import CreateForm from './CreateForm';
+
+const Title = () => {
+  const { t } = useTranslation('ragEval');
+
+  return (
+    <Flexbox gap={8} horizontal>
+      <Icon icon={SheetIcon} />
+      {t('addDataset.title')}
+    </Flexbox>
+  );
+};
+
+interface CreateDatasetModalProps {
+  knowledgeBaseId: string;
+}
+
+export const useCreateDatasetModal = createModal<CreateDatasetModalProps>((instance, params) => ({
+  content: (
+    <Flexbox paddingInline={16} style={{ marginBlock: 24 }}>
+      <CreateForm
+        knowledgeBaseId={params!.knowledgeBaseId}
+        onClose={() => {
+          instance.current?.destroy();
+        }}
+      />
+    </Flexbox>
+  ),
+  title: <Title />,
+}));

package/src/app/(main)/repos/[id]/evals/dataset/DatasetDetail/index.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { ProColumns, ProTable } from '@ant-design/pro-components';
+import { ActionIcon } from '@lobehub/ui';
+import { Button, Typography, Upload } from 'antd';
+import { createStyles } from 'antd-style';
+import { Edit2Icon, Trash2Icon } from 'lucide-react';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import FileIcon from '@/components/FileIcon';
+import { ragEvalService } from '@/services/ragEval';
+import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { EvalDatasetRecordRefFile } from '@/types/eval';
+
+const createRequest = (activeDatasetId: number) => async () => {
+  const records = await ragEvalService.getDatasetRecords(activeDatasetId);
+
+  return {
+    data: records,
+    success: true,
+    total: records.length,
+  };
+};
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    padding-block: 0;
+    padding-inline: 12px;
+  `,
+  icon: css`
+    min-width: 24px;
+    border-radius: 4px;
+  `,
+  title: css`
+    font-size: 16px;
+  `,
+}));
+
+const DatasetDetail = () => {
+  const { t } = useTranslation(['ragEval', 'common']);
+  const { styles } = useStyles();
+  const [importDataset] = useKnowledgeBaseStore((s) => [s.importDataset]);
+
+  const [activeDatasetId] = useQueryState('id', parseAsInteger);
+
+  const columns: ProColumns[] = [
+    {
+      dataIndex: 'question',
+      ellipsis: true,
+      title: t('dataset.list.table.columns.question.title'),
+      width: '40%',
+    },
+    { dataIndex: 'ideal', ellipsis: true, title: t('dataset.list.table.columns.ideal.title') },
+    {
+      dataIndex: 'referenceFiles',
+      render: (dom, entity) => {
+        const referenceFiles = entity.referenceFiles as EvalDatasetRecordRefFile[];
+
+        return (
+          !!referenceFiles && (
+            <Flexbox>
+              {referenceFiles?.map((file) => (
+                <Flexbox gap={4} horizontal key={file.id}>
+                  <FileIcon fileName={file.name} fileType={file.fileType} size={20} />
+                  <Typography.Text ellipsis={{ tooltip: true }}>{file.name}</Typography.Text>
+                </Flexbox>
+              ))}
+            </Flexbox>
+          )
+        );
+      },
+      title: t('dataset.list.table.columns.referenceFiles.title'),
+      width: 200,
+    },
+    {
+      dataIndex: 'actions',
+      render: () => (
+        <Flexbox gap={4} horizontal>
+          <ActionIcon icon={Edit2Icon} size={'small'} title={t('edit', { ns: 'common' })} />
+          <ActionIcon icon={Trash2Icon} size={'small'} title={t('delete', { ns: 'common' })} />
+        </Flexbox>
+      ),
+      title: t('dataset.list.table.columns.actions'),
+
+      width: 80,
+    },
+  ];
+
+  const request = !!activeDatasetId ? createRequest(activeDatasetId) : undefined;
+
+  return !activeDatasetId ? (
+    <Center height={'100%'} width={'100%'}>
+      {t('dataset.list.table.notSelected')}
+    </Center>
+  ) : (
+    <Flexbox className={styles.container} gap={24}>
+      <ProTable
+        columns={columns}
+        request={request}
+        search={false}
+        size={'small'}
+        toolbar={{
+          actions: [
+            <Upload
+              beforeUpload={async (file) => {
+                await importDataset(file, activeDatasetId);
+
+                return false;
+              }}
+              key={'upload'}
+              multiple={false}
+              showUploadList={false}
+            >
+              <Button type={'primary'}>{t('dataset.list.table.actions.importData')}</Button>
+            </Upload>,
+          ],
+          title: <div className={styles.title}>{t('dataset.list.table.title')}</div>,
+        }}
+      />
+    </Flexbox>
+  );
+};
+
+export default DatasetDetail;

package/src/app/(main)/repos/[id]/evals/dataset/DatasetList/Item.tsx

@@ -0,0 +1,59 @@
+import { createStyles } from 'antd-style';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { RAGEvalDataSetItem } from '@/types/eval';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    background: ${token.colorFillTertiary};
+
+    &:hover {
+      background-color: ${token.colorFillSecondary};
+    }
+  `,
+  container: css`
+    cursor: pointer;
+
+    margin-block-end: 2px;
+    padding-block: 12px;
+    padding-inline: 8px;
+
+    border-radius: 8px;
+
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `,
+  icon: css`
+    min-width: 24px;
+    border-radius: 4px;
+  `,
+  title: css`
+    text-align: start;
+  `,
+}));
+
+const Item = memo<RAGEvalDataSetItem>(({ name, description, id }) => {
+  const { styles, cx } = useStyles();
+
+  const [activeDatasetId, activateDataset] = useQueryState('id', parseAsInteger);
+
+  const isActive = activeDatasetId === id;
+  return (
+    <Flexbox
+      className={cx(styles.container, isActive && styles.active)}
+      onClick={() => {
+        if (!isActive) {
+          activateDataset(id);
+        }
+      }}
+    >
+      <div className={styles.title}>{name}</div>
+      {description && <div>{description}</div>}
+    </Flexbox>
+  );
+});
+
+export default Item;

package/src/app/(main)/repos/[id]/evals/dataset/DatasetList/index.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { PlusIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import { Virtuoso } from 'react-virtuoso';
+
+import { RAGEvalDataSetItem } from '@/types/eval';
+
+import Item from './Item';
+
+interface DatasetListProps {
+  dataSource: RAGEvalDataSetItem[];
+}
+
+const DatasetList = memo<DatasetListProps>(({ dataSource }) => {
+  const { t } = useTranslation('ragEval');
+
+  return (
+    <Flexbox gap={24} height={'100%'}>
+      <Flexbox align={'center'} horizontal justify={'space-between'}>
+        <span>{t('dataset.list.title')}</span>
+        <ActionIcon icon={PlusIcon} size={'small'} />
+      </Flexbox>
+      <Virtuoso data={dataSource} itemContent={(index, data) => <Item {...data} key={data.id} />} />
+    </Flexbox>
+  );
+});
+
+export default DatasetList;

package/src/app/(main)/repos/[id]/evals/dataset/EmptyGuide/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useCreateDatasetModal } from '../CreateDataset';
+
+interface EmptyGuideProps {
+  knowledgeBaseId: string;
+}
+
+const EmptyGuide = memo<EmptyGuideProps>(({ knowledgeBaseId }) => {
+  const { t } = useTranslation('ragEval');
+  const modal = useCreateDatasetModal();
+  return (
+    <Center gap={24} height={'100%'} width={'100%'}>
+      <div>{t('dataset.emptyGuide')}</div>
+      <Flexbox gap={8} horizontal>
+        <Button
+          onClick={() => {
+            modal.open({ knowledgeBaseId });
+          }}
+          type={'primary'}
+        >
+          {t('dataset.addNewButton')}
+        </Button>
+      </Flexbox>
+    </Center>
+  );
+});
+export default EmptyGuide;