@lobehub/chat 1.63.2 → 1.64.0

package/src/tools/web-browsing/components/SearchBar.tsx

@@ -0,0 +1,134 @@
+import { Icon, Tooltip } from '@lobehub/ui';
+import { Button, Checkbox, Input, Select, Space, Typography } from 'antd';
+import { SearchIcon } from 'lucide-react';
+import { ReactNode, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useChatStore } from '@/store/chat';
+import { chatToolSelectors } from '@/store/chat/selectors';
+import { SearchQuery } from '@/types/tool/search';
+
+import { ENGINE_ICON_MAP } from '../const';
+import { EngineAvatar } from './EngineAvatar';
+
+interface SearchBarProps {
+  aiSummary?: boolean;
+  defaultEngines?: string[];
+  defaultQuery: string;
+  messageId: string;
+  onSearch?: (searchQuery: SearchQuery) => void;
+  searchAddon?: ReactNode;
+  tooltip?: boolean;
+}
+
+const SearchBar = memo<SearchBarProps>(
+  ({
+    defaultEngines = [],
+    aiSummary = true,
+    defaultQuery,
+    tooltip = true,
+    searchAddon,
+    onSearch,
+    messageId,
+  }) => {
+    const { t } = useTranslation('tool');
+    const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
+    const [query, setQuery] = useState(defaultQuery);
+    const [engines, setEngines] = useState(defaultEngines);
+    const isMobile = useIsMobile();
+    const [reSearchWithSearXNG] = useChatStore((s) => [s.reSearchWithSearXNG]);
+
+    const updateAndSearch = async () => {
+      const data: SearchQuery = { query, searchEngines: engines };
+      onSearch?.(data);
+      await reSearchWithSearXNG(messageId, data, { aiSummary });
+    };
+
+    const searchButton = (
+      <Button
+        icon={<Icon icon={SearchIcon} />}
+        loading={loading}
+        onClick={updateAndSearch}
+        type={'primary'}
+      >
+        {isMobile ? undefined : t('search.searchBar.button')}
+      </Button>
+    );
+
+    return (
+      <Flexbox gap={16}>
+        <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: isMobile ? undefined : 400 }}
+              value={query}
+              variant={'filled'}
+            />
+            {tooltip ? (
+              <Tooltip title={t('search.searchBar.tooltip')}>{searchButton}</Tooltip>
+            ) : (
+              searchButton
+            )}
+          </Space.Compact>
+          {searchAddon}
+        </Flexbox>
+
+        {isMobile ? (
+          <Select
+            mode={'multiple'}
+            onChange={(checkedValue) => {
+              setEngines(checkedValue);
+            }}
+            optionRender={(item) => (
+              <Flexbox align={'center'} gap={8} horizontal>
+                <EngineAvatar engine={item.value as string} />
+                {item.value}
+              </Flexbox>
+            )}
+            options={Object.keys(ENGINE_ICON_MAP).map((item) => ({
+              label: (
+                <Flexbox align={'center'} gap={8} horizontal>
+                  <EngineAvatar engine={item} />
+                </Flexbox>
+              ),
+              value: item,
+            }))}
+            size={'small'}
+            value={engines}
+            variant={'filled'}
+          />
+        ) : (
+          <Flexbox align={'flex-start'} gap={8} horizontal>
+            <Typography.Text style={{ marginTop: 2, wordBreak: 'keep-all' }} type={'secondary'}>
+              {t('search.searchEngine')}
+            </Typography.Text>
+            <Checkbox.Group
+              onChange={(checkedValue) => {
+                setEngines(checkedValue);
+              }}
+              options={Object.keys(ENGINE_ICON_MAP).map((item) => ({
+                label: (
+                  <Flexbox align={'center'} gap={8} horizontal>
+                    <EngineAvatar engine={item} />
+                    {item}
+                  </Flexbox>
+                ),
+                value: item,
+              }))}
+              value={engines}
+            />
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+export default SearchBar;

package/src/tools/web-browsing/const.ts

@@ -0,0 +1,11 @@
+export const ENGINE_ICON_MAP: Record<string, string> = {
+  arxiv: 'https://arxiv.org/static/browse/0.3.4/images/icons/favicon-32x32.png',
+  bilibili: 'https://www.bilibili.com/favicon.ico',
+  bing: 'https://www.bing.com/favicon.ico',
+  brave: 'https://brave.com/static-assets/images/brave-favicon.png',
+  duckduckgo: 'https://www.duckduckgo.com/favicon.ico',
+  google: 'https://www.google.com/favicon.ico',
+  npm: 'https://static-production.npmjs.com/da3ab40fb0861d15c83854c29f5f2962.png',
+  qwant: 'https://www.qwant.com/favicon.ico',
+  youtube: 'https://www.youtube.com/favicon.ico',
+};

package/src/tools/web-browsing/index.ts

@@ -0,0 +1,102 @@
+import dayjs from 'dayjs';
+
+import { BuiltinToolManifest } from '@/types/tool';
+
+export const WebBrowsingManifest: BuiltinToolManifest = {
+  api: [
+    {
+      description:
+        'A meta search engine. Useful for when you need to answer questions about current events. Input should be a search query. Output is a JSON array of the query results',
+      name: 'searchWithSearXNG',
+      parameters: {
+        properties: {
+          query: {
+            description: 'The search query',
+            type: 'string',
+          },
+          searchEngines: {
+            description: 'The search engine you can use:',
+            items: {
+              enum: [
+                'google',
+                'bilibili',
+                'bing',
+                'duckduckgo',
+                'npm',
+                'pypi',
+                'github',
+                'arxiv',
+                'google scholar',
+                'z-library',
+                'reddit',
+                'imdb',
+                'brave',
+                'wikipedia',
+                'pinterest',
+                'unsplash',
+                'vimeo',
+                'youtube',
+              ],
+              type: 'string',
+            },
+            type: 'array',
+          },
+        },
+        required: ['query'],
+        type: 'object',
+      },
+    },
+  ],
+  identifier: 'lobe-web-browsing',
+  meta: {
+    avatar: '🌐',
+    title: 'Web Browsing',
+  },
+  systemRole: `You are a search tool that uses SearxNG, a meta search engine. When given a search query, you will return relevant results from various search engines. Your results will be in JSON format, containing titles, links, and snippets of relevant web pages. If no good results are found, you will say so. You can also provide answers, infoboxes, or suggestions if available.
+
+SearXNG combine with these engines:
+- Google: The world's most popular search engine, offering a wide range of general web results.,
+- Bilibili: A Chinese video sharing website themed around animation, comic, and games (ACG) ，（又名 B 站）,
+- Bing: Microsoft's search engine, providing web results with a focus on visual search.,
+- DuckDuckGo: A privacy-focused search engine that doesn't track users.,
+- npm: The package manager for JavaScript, used to find Node.js packages.,
+- PyPI: The Python Package Index, used to find Python packages.,
+- GitHub: A platform for version control and collaboration, search for code repositories.,
+- arXiv: A repository of electronic preprints for scientific papers.,
+- Google Scholar: A freely accessible web search engine for scholarly literature.,
+- Z-Library: A shadow library project for file-sharing access to scholarly journal articles and books.,
+- Reddit: A network of communities based on people's interests, search for discussions and content.,
+- IMDb: An online database of information related to films, TV programs, and video games.,
+- Brave: A privacy-focused browser with its own search engine.,
+- Wikipedia: A free online encyclopedia, search for articles on various topics.,
+- Pinterest: An image sharing and social media service, search for images and ideas.,
+- Unsplash: A website dedicated to sharing stock photography, search for high-quality images.,
+- Vimeo: A video hosting, sharing, and services platform.,
+- YouTube: A video sharing platform, search for a wide variety of video content.
+
+SearXNG comes with a search syntax by with you can modify the categories, engines, languages and more.
+
+## \`!\` select engine and category
+
+To set category and/or engine names use a \`!\` prefix. To give a few examples:
+
+- search in category **map** for **paris**
+  - \`!map paris\`
+- image search
+  - \`!images Wau Holland\`
+
+Abbreviations of the engines and languages are also accepted. Engine/category modifiers are chain able and inclusive. E.g. with \`!map !ddg !wp paris\` search in map category and DuckDuckGo and Wikipedia for **paris**.
+
+## \`:\` select language
+
+To select language filter use a \`:\` prefix. To give an example:
+
+- search Wikipedia by a custom language
+  - \`:fr !wp Wau Holland\`
+
+You need to summarize in the language of the user's question. If you use search content in your reply, you must use Markdown footnote format to indicate the source, Such as [^1].
+
+current date: ${dayjs(new Date()).format('YYYY-MM-DD')}
+`,
+  type: 'builtin',
+};

package/src/types/message/chat.ts

@@ -92,6 +92,7 @@ export interface ChatMessage {
   parentId?: string;
 
   plugin?: ChatPluginPayload;
+  pluginError?: any;
   pluginState?: any;
   /**
    * quoted other message's id

package/src/types/message/tools.ts

@@ -1,3 +1,4 @@
+import { IPluginErrorType } from '@lobehub/chat-plugin-sdk';
 import { DeepPartial } from 'utility-types';
 import { z } from 'zod';
 
@@ -63,3 +64,12 @@ export const MessageToolCallSchema = z.object({
   id: z.string(),
   type: z.string(),
 });
+
+/**
+ * 聊天消息错误对象
+ */
+export interface ChatMessagePluginError {
+  body?: any;
+  message: string;
+  type: IPluginErrorType;
+}

package/src/types/tool/builtin.ts

@@ -22,6 +22,7 @@ export interface BuiltinToolManifest {
 }
 
 export interface LobeBuiltinTool {
+  hidden?: boolean;
   identifier: string;
   manifest: BuiltinToolManifest;
   type: 'builtin';
@@ -32,6 +33,7 @@ export interface BuiltinRenderProps<Content = any, Arguments = any, State = any>
   content: Content;
   identifier?: string;
   messageId: string;
+  pluginError?: any;
   pluginState?: State;
 }
 

package/src/types/tool/search.ts

@@ -0,0 +1,38 @@
+export interface SearchQuery {
+  query: string;
+  searchEngines?: string[];
+}
+export const SEARCH_SEARXNG_NOT_CONFIG = 'SearXNG is not configured';
+
+export interface SearchResponse {
+  answers: any[];
+  corrections: any[];
+  infoboxes: any[];
+  number_of_results: number;
+  query: string;
+  results: SearchResult[];
+  suggestions: string[];
+  unresponsive_engines: any[];
+}
+
+export interface SearchResult {
+  category: string;
+  content?: string;
+  engine: string;
+  engines: string[];
+  iframe_src?: string;
+  parsed_url: string[];
+  positions: number[];
+  publishedDate?: string | null;
+  score: number;
+  template: string;
+  thumbnail?: string | null;
+  title: string;
+  url: string;
+}
+
+export interface SearchContent {
+  content?: string;
+  title: string;
+  url: string;
+}

package/src/types/user/settings/keyVaults.ts

@@ -25,7 +25,14 @@ export interface CloudflareKeyVault {
   baseURLOrAccountID?: string;
 }
 
-export interface UserKeyVaults {
+export interface SearchEngineKeyVaults {
+  searchxng?: {
+    apiKey?: string;
+    baseURL?: string;
+  };
+}
+
+export interface UserKeyVaults extends SearchEngineKeyVaults {
   ai21?: OpenAICompatibleKeyVault;
   ai360?: OpenAICompatibleKeyVault;
   anthropic?: OpenAICompatibleKeyVault;

package/src/utils/toolManifest.ts

@@ -1,7 +1,10 @@
 import { LobeChatPluginManifest, pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
+import { uniqBy } from 'lodash-es';
 
 import { API_ENDPOINTS } from '@/services/_url';
+import { ChatCompletionTool } from '@/types/openai/chat';
 import { OpenAIPluginManifest } from '@/types/openai/plugin';
+import { genToolCallingName } from '@/utils/toolCall';
 
 const fetchJSON = async <T = any>(url: string, proxy = false): Promise<T> => {
   // 2. 发送请求
@@ -122,3 +125,20 @@ export const getToolManifest = async (
 
   return data;
 };
+
+/**
+ *
+ */
+export const convertPluginManifestToToolsCalling = (
+  manifests: LobeChatPluginManifest[],
+): ChatCompletionTool[] => {
+  const list = manifests.flatMap((manifest) =>
+    manifest.api.map((m) => ({
+      description: m.description,
+      name: genToolCallingName(manifest.identifier, m.name, manifest.type),
+      parameters: m.parameters,
+    })),
+  );
+
+  return uniqBy(list, 'name').map((i) => ({ function: i, type: 'function' }));
+};