feat: add arxiv operator #918 (#1683)

### What problem does this PR solve?

feat: add arxiv operator #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/operate-dropdown/index.tsx

@@ -9,6 +9,7 @@ import styles from './index.less';
 interface IProps {
   deleteItem: () => Promise<any> | void;
   iconFontSize?: number;
+  iconFontColor?: string;
   items?: MenuProps['items'];
   height?: number;
   needsDeletionValidation?: boolean;
@@ -18,6 +19,7 @@ const OperateDropdown = ({
   deleteItem,
   children,
   iconFontSize = 30,
+  iconFontColor = 'gray',
   items: otherItems = [],
   height = 24,
   needsDeletionValidation = true,
@@ -69,7 +71,7 @@ const OperateDropdown = ({
             rotate={90}
             style={{
               fontSize: iconFontSize,
-              color: 'gray',
+              color: iconFontColor,
               cursor: 'pointer',
               height,
             }}

web/src/locales/en.ts

@@ -632,6 +632,13 @@ The above is the content you need to summarize.`,
       email: 'Email',
       emailTip:
         'This component is used to get search result from https://pubmed.ncbi.nlm.nih.gov/. Typically, it performs as a supplement to knowledgebases. Top N specifies the number of search results you need to adapt. E-mail is a required field.',
+      arxiv: 'Arxiv',
+      arxivTip:
+        'This component is used to get search result from https://arxiv.org/. Typically, it performs as a supplement to knowledgebases. Top N specifies the number of search results you need to adapt.',
+      sortBy: 'Sort by',
+      submittedDate: 'Submitted date',
+      lastUpdatedDate: 'Last updated date',
+      relevance: 'Relevance',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -592,6 +592,13 @@ export default {
       email: '信箱',
       emailTip:
         '此元件用於從 https://pubmed.ncbi.nlm.nih.gov/ 取得搜尋結果。通常，它充當知識庫的補充。 Top N 指定您需要適應的搜尋結果的數量。電子郵件是必填欄位。',
+      arxiv: 'Arxiv',
+      arxivTip:
+        '此元件用於從 https://arxiv.org/ 取得搜尋結果。通常，它充當知識庫的補充。 Top N 指定您需要適應的搜尋結果的數量。',
+      sortBy: '排序方式',
+      submittedDate: '提交日期',
+      lastUpdatedDate: '最後更新日期',
+      relevance: '關聯',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -610,6 +610,13 @@ export default {
       email: '邮箱',
       emailTip:
         '此组件用于从 https://pubmed.ncbi.nlm.nih.gov/ 获取搜索结果。通常，它作为知识库的补充。Top N 指定您需要调整的搜索结果数。电子邮件是必填字段。',
+      arxiv: 'Arxiv',
+      arxivTip:
+        '此组件用于从 https://arxiv.org/ 获取搜索结果。通常，它作为知识库的补充。Top N 指定您需要调整的搜索结果数量。',
+      sortBy: '排序方式',
+      submittedDate: '提交日期',
+      lastUpdatedDate: '最后更新日期',
+      relevance: '关联',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/arxiv-form/index.tsx

@@ -0,0 +1,34 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Select } from 'antd';
+import { useMemo } from 'react';
+import { IOperatorForm } from '../interface';
+
+const ArxivForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['submittedDate', 'lastUpdatedDate', 'relevance'].map((x) => ({
+      value: x,
+      label: t(x),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem initialValue={10}></TopNItem>
+      <Form.Item label={t('sortBy')} name={'sort_by'}>
+        <Select options={options}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default ArxivForm;

web/src/pages/flow/canvas/node/dropdown.tsx

@@ -7,9 +7,10 @@ import useGraphStore from '../../store';
 
 interface IProps {
   id: string;
+  iconFontColor?: string;
 }
 
-const NodeDropdown = ({ id }: IProps) => {
+const NodeDropdown = ({ id, iconFontColor }: IProps) => {
   const { t } = useTranslation();
   const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
   const duplicateNodeById = useGraphStore((store) => store.duplicateNode);
@@ -42,6 +43,7 @@ const NodeDropdown = ({ id }: IProps) => {
       deleteItem={deleteNode}
       items={items}
       needsDeletionValidation={false}
+      iconFontColor={iconFontColor}
     ></OperateDropdown>
   );
 };

web/src/pages/flow/canvas/node/index.tsx

@@ -11,7 +11,11 @@ import NodeDropdown from './dropdown';
 import styles from './index.less';
 import NodePopover from './popover';
 
-const ZeroGapOperators = [Operator.RewriteQuestion, Operator.KeywordExtract];
+const ZeroGapOperators = [
+  Operator.RewriteQuestion,
+  Operator.KeywordExtract,
+  Operator.Arxiv,
+];
 
 export function RagNode({
   id,
@@ -69,8 +73,10 @@ export function RagNode({
             </span>
           </Flex>
           <Flex flex={1}>
-            {' '}
-            <NodeDropdown id={id}></NodeDropdown>
+            <NodeDropdown
+              id={id}
+              iconFontColor={style?.moreIconColor}
+            ></NodeDropdown>
           </Flex>
         </Flex>
 

web/src/pages/flow/constant.tsx

@@ -1,3 +1,4 @@
+import { ReactComponent as ArxivIcon } from '@/assets/svg/arxiv.svg';
 import { ReactComponent as BaiduIcon } from '@/assets/svg/baidu.svg';
 import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
 import { ReactComponent as KeywordIcon } from '@/assets/svg/keyword.svg';
@@ -38,6 +39,7 @@ export enum Operator {
   DuckDuckGo = 'DuckDuckGo',
   Wikipedia = 'Wikipedia',
   PubMed = 'PubMed',
+  Arxiv = 'Arxiv',
 }
 
 export const operatorIconMap = {
@@ -54,6 +56,7 @@ export const operatorIconMap = {
   [Operator.Baidu]: BaiduIcon,
   [Operator.Wikipedia]: WikipediaIcon,
   [Operator.PubMed]: PubMedIcon,
+  [Operator.Arxiv]: ArxivIcon,
 };
 
 export const operatorMap = {
@@ -120,6 +123,16 @@ export const operatorMap = {
   [Operator.PubMed]: {
     backgroundColor: '#a2ccf0',
   },
+  [Operator.Arxiv]: {
+    width: 70,
+    height: 70,
+    fontSize: 12,
+    iconWidth: 16,
+    iconFontSize: 16,
+    moreIconColor: 'white',
+    backgroundColor: '#b31b1b',
+    color: 'white',
+  },
 };
 
 export const componentMenuList = [
@@ -159,6 +172,9 @@ export const componentMenuList = [
   {
     name: Operator.PubMed,
   },
+  {
+    name: Operator.Arxiv,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -236,6 +252,11 @@ export const initialPubMedValues = {
   email: '',
 };
 
+export const initialArxivValues = {
+  top_n: 10,
+  sort_by: 'relevance',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -296,6 +317,7 @@ export const RestrictedUpstreamMap = {
   [Operator.DuckDuckGo]: [Operator.Begin, Operator.Retrieval],
   [Operator.Wikipedia]: [Operator.Begin, Operator.Retrieval],
   [Operator.PubMed]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Arxiv]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
@@ -312,6 +334,7 @@ export const NodeMap = {
   [Operator.Baidu]: 'ragNode',
   [Operator.Wikipedia]: 'ragNode',
   [Operator.PubMed]: 'ragNode',
+  [Operator.Arxiv]: 'ragNode',
 };
 
 export const LanguageOptions = [

web/src/pages/flow/flow-drawer/index.tsx

@@ -4,6 +4,7 @@ import { Drawer, Flex, Form, Input } from 'antd';
 import { useEffect } from 'react';
 import { Node } from 'reactflow';
 import AnswerForm from '../answer-form';
+import ArxivForm from '../arxiv-form';
 import BaiduForm from '../baidu-form';
 import BeginForm from '../begin-form';
 import CategorizeForm from '../categorize-form';
@@ -40,6 +41,7 @@ const FormMap = {
   [Operator.KeywordExtract]: KeywordExtractForm,
   [Operator.Wikipedia]: WikipediaForm,
   [Operator.PubMed]: PubMedForm,
+  [Operator.Arxiv]: ArxivForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/hooks.ts

@@ -31,6 +31,7 @@ import {
   NodeMap,
   Operator,
   RestrictedUpstreamMap,
+  initialArxivValues,
   initialBaiduValues,
   initialBeginValues,
   initialCategorizeValues,
@@ -92,6 +93,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.Baidu]: initialBaiduValues,
       [Operator.Wikipedia]: initialWikipediaValues,
       [Operator.PubMed]: initialPubMedValues,
+      [Operator.Arxiv]: initialArxivValues,
     };
   }, [llmId]);