@lobehub/chat 1.77.17 → 1.78.0

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

@@ -1,5 +1,5 @@
 import { Icon, Tooltip } from '@lobehub/ui';
-import { Button, Checkbox, Input, Select, Space, Typography } from 'antd';
+import { Button, Checkbox, Input, Radio, Select, Space, Typography } from 'antd';
 import { SearchIcon } from 'lucide-react';
 import { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,13 +10,16 @@ import { useChatStore } from '@/store/chat';
 import { chatToolSelectors } from '@/store/chat/selectors';
 import { SearchQuery } from '@/types/tool/search';
 
-import { ENGINE_ICON_MAP } from '../const';
+import { CATEGORY_ICON_MAP, ENGINE_ICON_MAP } from '../const';
+import { CategoryAvatar } from './CategoryAvatar';
 import { EngineAvatar } from './EngineAvatar';
 
 interface SearchBarProps {
   aiSummary?: boolean;
+  defaultCategories?: string[];
   defaultEngines?: string[];
   defaultQuery: string;
+  defaultTimeRange?: string;
   messageId: string;
   onSearch?: (searchQuery: SearchQuery) => void;
   searchAddon?: ReactNode;
@@ -25,7 +28,9 @@ interface SearchBarProps {
 
 const SearchBar = memo<SearchBarProps>(
   ({
+    defaultCategories = [],
     defaultEngines = [],
+    defaultTimeRange,
     aiSummary = true,
     defaultQuery,
     tooltip = true,
@@ -36,12 +41,21 @@ const SearchBar = memo<SearchBarProps>(
     const { t } = useTranslation('tool');
     const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
     const [query, setQuery] = useState(defaultQuery);
+    const [categories, setCategories] = useState(defaultCategories);
     const [engines, setEngines] = useState(defaultEngines);
+    const [time_range, setTimeRange] = useState(defaultTimeRange);
     const isMobile = useIsMobile();
     const [reSearchWithSearXNG] = useChatStore((s) => [s.reSearchWithSearXNG]);
 
     const updateAndSearch = async () => {
-      const data: SearchQuery = { query, searchEngines: engines };
+      const data: SearchQuery = {
+        optionalParams: {
+          searchCategories: categories,
+          searchEngines: engines,
+          searchTimeRange: time_range,
+        },
+        query,
+      };
       onSearch?.(data);
       await reSearchWithSearXNG(messageId, data, { aiSummary });
     };
@@ -101,6 +115,7 @@ const SearchBar = memo<SearchBarProps>(
               ),
               value: item,
             }))}
+            placeholder={t('search.searchEngine.placeholder')}
             size={'small'}
             value={engines}
             variant={'filled'}
@@ -108,7 +123,7 @@ const SearchBar = memo<SearchBarProps>(
         ) : (
           <Flexbox align={'flex-start'} gap={8} horizontal>
             <Typography.Text style={{ marginTop: 2, wordBreak: 'keep-all' }} type={'secondary'}>
-              {t('search.searchEngine')}
+              {t('search.searchEngine.title')}
             </Typography.Text>
             <Checkbox.Group
               onChange={(checkedValue) => {
@@ -127,6 +142,71 @@ const SearchBar = memo<SearchBarProps>(
             />
           </Flexbox>
         )}
+
+        {isMobile ? (
+          <Select
+            mode="multiple"
+            onChange={(checkedValue) => {
+              setCategories(checkedValue);
+            }}
+            optionRender={(item) => (
+              <Flexbox align={'center'} gap={8} horizontal>
+                <CategoryAvatar category={item.value as string} />
+                {t(`search.searchCategory.value.${item.value}` as any)}
+              </Flexbox>
+            )}
+            options={Object.keys(CATEGORY_ICON_MAP).map((item) => ({
+              label: (
+                <Flexbox align={'center'} gap={8} horizontal>
+                  <CategoryAvatar category={item as any} />
+                  {t(`search.searchCategory.value.${item}` as any)}
+                </Flexbox>
+              ),
+              value: item,
+            }))}
+            placeholder={t('search.searchCategory.placeholder')}
+            size="small"
+            value={categories}
+            variant="filled"
+          />
+        ) : (
+          <Flexbox align="flex-start" gap={8} horizontal>
+            <Typography.Text style={{ marginTop: 2, wordBreak: 'keep-all' }} type={'secondary'}>
+              {t('search.searchCategory.title')}
+            </Typography.Text>
+            <Checkbox.Group
+              onChange={(checkedValue) => setCategories(checkedValue)}
+              options={Object.keys(CATEGORY_ICON_MAP).map((item) => ({
+                label: (
+                  <Flexbox align={'center'} gap={8} horizontal>
+                    <CategoryAvatar category={item as any} />
+                    {t(`search.searchCategory.value.${item}` as any)}
+                  </Flexbox>
+                ),
+                value: item,
+              }))}
+              value={categories}
+            />
+          </Flexbox>
+        )}
+
+        <Flexbox align={'center'} gap={16} horizontal wrap={'wrap'}>
+          <Typography.Text type={'secondary'}>
+            {t('search.searchTimeRange.title')}
+          </Typography.Text>
+          <Radio.Group
+            onChange={(e) => setTimeRange(e.target.value)}
+            optionType="button"
+            options={[
+              { label: t('search.searchTimeRange.value.anytime'), value: 'anytime' },
+              { label: t('search.searchTimeRange.value.day'), value: 'day' },
+              { label: t('search.searchTimeRange.value.week'), value: 'week' },
+              { label: t('search.searchTimeRange.value.month'), value: 'month' },
+              { label: t('search.searchTimeRange.value.year'), value: 'year' },
+            ]}
+            value={time_range}
+          />
+        </Flexbox>
       </Flexbox>
     );
   },

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

@@ -1,3 +1,29 @@
+import { 
+  CodeIcon,
+  FileIcon,
+  FlaskConicalIcon,
+  ImageIcon,
+  MapIcon,
+  MusicIcon,
+  NewspaperIcon,
+  SearchIcon,
+  Share2Icon,
+  VideoIcon,
+} from 'lucide-react';
+
+export const CATEGORY_ICON_MAP: Record<string, any> = {
+   'files': FileIcon,
+   'general': SearchIcon,
+   'images': ImageIcon,
+   'it': CodeIcon,
+   'map': MapIcon,
+   'music': MusicIcon,
+   'news': NewspaperIcon,
+   'science': FlaskConicalIcon,
+   'social_media': Share2Icon,
+   'videos': VideoIcon,
+};
+
 export const ENGINE_ICON_MAP: Record<string, string> = {
   'arxiv': 'https://icons.duckduckgo.com/ip3/arxiv.org.ico',
   'bilibili': 'https://icons.duckduckgo.com/ip3/bilibili.com.ico',

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

@@ -18,37 +18,67 @@ export const WebBrowsingManifest: BuiltinToolManifest = {
       name: WebBrowsingApiName.searchWithSearXNG,
       parameters: {
         properties: {
+          optionalParams: {
+            description: "The optional parameters for search query",
+            properties: {
+              searchCategories: {
+                description: 'The search categories you can set:',
+                items: {
+                  enum: [
+                    'files',
+                    'general',
+                    'images',
+                    'it',
+                    'map',
+                    'music',
+                    'news',
+                    'science',
+                    'social_media',
+                    'videos',
+                  ],
+                  type: 'string',
+                },
+                type: 'array',
+              },
+              searchEngines: {
+                description: 'The search engines 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',
+              },
+              searchTimeRange: {
+                description: "The time range you can set:",
+                enum: ['anytime', 'day', 'week', 'month', 'year'],
+                type: 'string',
+              },
+            },
+            type: 'object',
+          },
           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',
@@ -77,7 +107,7 @@ export const WebBrowsingManifest: BuiltinToolManifest = {
         properties: {
           urls: {
             items: {
-              description: 'The url need to be crawled',
+              description: 'The urls need to be crawled',
               type: 'string',
             },
             type: 'array',

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

@@ -22,6 +22,19 @@ export const systemPrompt = (
 - For multi-perspective information or comparative analysis: Use 'crawlMultiPages' on several different relevant sources
 </tool_selection_guidelines>
 
+<search_categories_selection>
+Choose search categories based on query type:
+- General: general
+- News: news
+- Academic & Science: science
+- Technical: it
+- Images: images
+- Videos: videos
+- Geographic & Maps: map
+- Files: files
+- Social Media: social_media
+</search_categories_selection>
+
 <search_engine_selection>
 Choose search engines based on the query type:
 - General knowledge: google, bing, duckduckgo, brave, wikipedia
@@ -30,9 +43,54 @@ Choose search engines based on the query type:
 - Videos: youtube, vimeo, bilibili
 - Images: unsplash, pinterest
 - Entertainment: imdb, reddit
-- For region-specific information, prefer search engines popular in that region
 </search_engine_selection>
 
+<search_time_range_selection>
+Choose time range based on the query type:
+- For no time restriction: anytime
+- For the latest updates: day
+- For recent developments: week
+- For ongoing trends or updates: month
+- For long-term insights: year
+</search_time_range_selection>
+
+<search_strategy_guidelines>
+ - Use engine-based searches when a specific search engine is explicitly required
+ - Use category-based searches when unsure about engine selection
+ - Use time-range filters to prioritize time-sensitive information
+ - Leverage cross-platform meta-search capabilities for comprehensive results
+ - Prioritize authoritative sources in search results when available
+ - For region-specific information, prefer search engines popular in that region
+ - Avoid using both 'engines' and 'categories' in a query, unless the chosen engines do not fall under the selected categories.  
+
+ <search_strategy_best_practices>
+   - Combine categories for multi-faceted queries:
+     * "AI ethics whitepaper PDF" → files + science + general
+     * "Python machine learning tutorial video" → videos + it + science
+     * "Sustainable energy policy analysis" → news + science + general
+
+   - Apply keyword-driven category mapping:
+     * "GitHub repository statistics" → it + files
+     * "Climate change documentary" → videos + science
+     * "Restaurant recommendations Paris" → map + social_media
+
+   - Use file-type targeting for document searches:
+     * "Financial statement xls" → files + news
+     * "Research paper citation RIS" → files + science
+     * "Government policy brief docx" → files + general
+
+   - Region-specific query handling:
+     * "Beijing traffic update" → map + news (engine: baidu)
+     * "Moscow event listings" → social_media + news (engine: yandex)
+     * "Tokyo restaurant reviews" → social_media + map (engine: google)
+
+   - Leverage cross-platform capabilities:
+     * "Open-source project documentation" → files + it (engines: github + pypi)
+     * "Historical weather patterns" → science + general (engines: google scholar + wikipedia)
+     * "Movie release dates 2025" → news + videos (engines: imdb + reddit)
+ </search_strategy_best_practices>
+</search_strategy_guidelines>
+
 <citation_requirements>
 - Always cite sources using markdown footnote format (e.g., [^1])
 - List all referenced URLs at the end of your response
@@ -86,6 +144,9 @@ SearXNG is a metasearch engine that can leverage multiple search engines includi
 
   2. Use \`:\` to select language:
      - Search Wikipedia in a specific language: \`:fr !wp Wau Holland\` (uses French)
+
+  3. Use \`site:\` to restrict results to a specific website:
+     - Search SearXNG from a specific website: \`site:github.com SearXNG\`
   </search_syntax>
 </searxng_description>
 

package/src/types/tool/search.ts

@@ -1,6 +1,10 @@
 export interface SearchQuery {
+  optionalParams?: {
+    searchCategories?: string[];
+    searchEngines?: string[];
+    searchTimeRange?: string;
+  }
   query: string;
-  searchEngines?: string[];
 }
 
 export const SEARCH_SEARXNG_NOT_CONFIG = 'SearXNG is not configured';
@@ -22,18 +26,23 @@ export interface SearchResult {
   engine: string;
   engines: string[];
   iframe_src?: string;
+  img_src?: string;
   parsed_url: string[];
   positions: number[];
   publishedDate?: string | null;
   score: number;
   template: string;
   thumbnail?: string | null;
+  thumbnail_src?: string | null;
   title: string;
   url: string;
 }
 
 export interface SearchContent {
   content?: string;
+  img_src?: string;
+  publishedDate?: string | null;
+  thumbnail?: string | null;
   title: string;
   url: string;
 }

package/src/helpers/url.ts

@@ -1,17 +0,0 @@
-import { ChatMessage } from '@lobehub/ui';
-
-import { Compressor } from '@/utils/compass';
-
-export const genShareMessagesUrl = (messages: ChatMessage[], systemRole?: string) => {
-  const compassedMsg = systemRole
-    ? [{ content: systemRole, role: 'system' }, ...messages]
-    : messages;
-
-  return `/share?messages=${Compressor.compress(JSON.stringify(compassedMsg))}`;
-};
-
-export const genSystemRoleQuery = async (content: string) => {
-  const x = { state: { systemRole: content } };
-  const systemRole = await Compressor.compressAsync(JSON.stringify(x));
-  return `#systemRole=${systemRole}`;
-};