@lobehub/chat 1.63.2 → 1.64.0

package/src/tools/index.ts

@@ -2,6 +2,7 @@ import { LobeBuiltinTool } from '@/types/tool';
 
 import { ArtifactsManifest } from './artifacts';
 import { DalleManifest } from './dalle';
+import { WebBrowsingManifest } from './web-browsing';
 
 export const builtinTools: LobeBuiltinTool[] = [
   {
@@ -14,4 +15,10 @@ export const builtinTools: LobeBuiltinTool[] = [
     manifest: DalleManifest,
     type: 'builtin',
   },
+  {
+    hidden: true,
+    identifier: WebBrowsingManifest.identifier,
+    manifest: WebBrowsingManifest,
+    type: 'builtin',
+  },
 ];

package/src/tools/portals.ts

@@ -1,3 +1,8 @@
 import { BuiltinPortal } from '@/types/tool';
 
-export const BuiltinToolsPortals: Record<string, BuiltinPortal> = {};
+import { WebBrowsingManifest } from './web-browsing';
+import WebBrowsing from './web-browsing/Portal';
+
+export const BuiltinToolsPortals: Record<string, BuiltinPortal> = {
+  [WebBrowsingManifest.identifier]: WebBrowsing as BuiltinPortal,
+};

package/src/tools/renders.ts

@@ -2,7 +2,10 @@ import { BuiltinRender } from '@/types/tool';
 
 import { DalleManifest } from './dalle';
 import DalleRender from './dalle/Render';
+import { WebBrowsingManifest } from './web-browsing';
+import WebBrowsing from './web-browsing/Render';
 
 export const BuiltinToolsRenders: Record<string, BuiltinRender> = {
   [DalleManifest.identifier]: DalleRender as BuiltinRender,
+  [WebBrowsingManifest.identifier]: WebBrowsing as BuiltinRender,
 };

package/src/{features/Portal/Plugins → tools/web-browsing/Portal}/Footer.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { Button } from 'antd';
-import { LucideBotMessageSquare, LucideNotepadText } from 'lucide-react';
+import { LucideNotepadText, PlusSquareIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -8,34 +8,37 @@ import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, chatSelectors } from '@/store/chat/selectors';
 
 const Footer = () => {
-  const [messageId, isAIGenerating, triggerAIMessage, summaryPluginContent] = useChatStore((s) => [
+  const [messageId, isAIGenerating, triggerAIMessage, saveSearchResult] = useChatStore((s) => [
     chatPortalSelectors.toolMessageId(s),
     chatSelectors.isAIGenerating(s),
     s.triggerAIMessage,
-    s.summaryPluginContent,
+    s.saveSearXNGSearchResult,
   ]);
-  const { t } = useTranslation('portal');
+
+  const { t } = useTranslation('tool');
 
   return (
     <Flexbox gap={8} horizontal paddingBlock={12} paddingInline={12}>
       <Button
-        icon={<Icon icon={LucideBotMessageSquare} />}
+        icon={<Icon icon={LucideNotepadText} />}
         loading={isAIGenerating}
         onClick={() => {
-          triggerAIMessage({ parentId: messageId });
+          if (!messageId) return;
+
+          triggerAIMessage({});
         }}
       >
-        {t('actions.genAiMessage')}
+        {t('search.summaryTooltip')}
       </Button>
       <ActionIcon
-        icon={LucideNotepadText}
+        icon={PlusSquareIcon}
         loading={isAIGenerating}
         onClick={() => {
           if (!messageId) return;
 
-          summaryPluginContent(messageId);
+          saveSearchResult(messageId);
         }}
-        title={t('actions.summaryTooltip')}
+        title={t('search.createNewSearch')}
       />
     </Flexbox>
   );

package/src/tools/web-browsing/Portal/ResultList/SearchItem/CategoryAvatar.tsx

@@ -0,0 +1,70 @@
+import { Avatar, Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import {
+  LucideAtom,
+  LucideClapperboard,
+  LucideFiles,
+  LucideImages,
+  LucideLaptop,
+  LucideMusic,
+  LucideNewspaper,
+  LucideShoppingBag,
+  LucideTextSearch,
+  LucideUserRound,
+} from 'lucide-react';
+import { memo, useMemo } from 'react';
+
+interface CategoryAvatarProps {
+  category: string;
+  size?: number;
+}
+
+const CategoryAvatar = memo<CategoryAvatarProps>(({ category, size = 24 }) => {
+  const theme = useTheme();
+
+  const categoryIcon = useMemo(() => {
+    switch (category) {
+      default:
+      case 'general': {
+        return LucideTextSearch;
+      }
+      case 'videos': {
+        return LucideClapperboard;
+      }
+      case 'images': {
+        return LucideImages;
+      }
+      case 'files': {
+        return LucideFiles;
+      }
+      case 'music': {
+        return LucideMusic;
+      }
+      case 'shopping': {
+        return LucideShoppingBag;
+      }
+      case 'social': {
+        return LucideUserRound;
+      }
+      case 'it': {
+        return LucideLaptop;
+      }
+      case 'news': {
+        return LucideNewspaper;
+      }
+      case 'science': {
+        return LucideAtom;
+      }
+    }
+  }, [category]);
+
+  return (
+    <Avatar
+      avatar={<Icon icon={categoryIcon} style={{ color: theme.colorTextSecondary }} />}
+      background={theme.colorFillTertiary}
+      size={size}
+    />
+  );
+});
+
+export default CategoryAvatar;

package/src/tools/web-browsing/Portal/ResultList/SearchItem/TitleExtra.tsx

@@ -0,0 +1,38 @@
+import { Tooltip } from '@lobehub/ui';
+import { Tag, Typography } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import CategoryAvatar from './CategoryAvatar';
+
+interface TitleExtraProps {
+  category: string;
+  highlight?: boolean;
+  score: number;
+}
+
+const TitleExtra = memo<TitleExtraProps>(({ category, score, highlight }) => {
+  const { t } = useTranslation('tool');
+
+  return (
+    <Flexbox align={'center'} gap={4} horizontal>
+      <Tooltip title={t(highlight ? 'search.includedTooltip' : 'search.scoreTooltip')}>
+        {highlight ? (
+          <Tag bordered={false} color={'blue'} style={{ marginInlineEnd: 0 }}>
+            {score.toFixed(1)}
+          </Tag>
+        ) : (
+          <Typography.Text
+            style={{ textAlign: 'center', width: 32, wordBreak: 'keep-all' }}
+            type={'secondary'}
+          >
+            {score.toFixed(1)}
+          </Typography.Text>
+        )}
+      </Tooltip>
+      <CategoryAvatar category={category} />
+    </Flexbox>
+  );
+});
+export default TitleExtra;

package/src/tools/web-browsing/Portal/ResultList/SearchItem/Video.tsx

@@ -0,0 +1,135 @@
+import { Avatar as AntAvatar, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { SearchResult } from '@/types/tool/search';
+
+import { ENGINE_ICON_MAP } from '../../../const';
+import TitleExtra from './TitleExtra';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      display: flex;
+      flex: 1;
+
+      padding: 8px;
+      border-radius: 8px;
+
+      color: initial;
+
+      &:hover {
+        background: ${token.colorFillTertiary};
+      }
+    `,
+    desc: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+
+      color: ${token.colorTextTertiary};
+      text-overflow: ellipsis;
+    `,
+    displayLink: css`
+      color: ${token.colorTextQuaternary};
+    `,
+    iframe: css`
+      border: 1px solid ${token.colorBorder};
+      border-radius: 8px;
+    `,
+    title: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+
+      font-size: 16px;
+      color: ${token.colorLink};
+      text-overflow: ellipsis;
+    `,
+    url: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+
+      color: ${token.colorTextDescription};
+      text-overflow: ellipsis;
+    `,
+  };
+});
+
+interface SearchResultProps extends SearchResult {
+  highlight?: boolean;
+}
+const VideoItem = memo<SearchResultProps>(
+  ({ content, url, iframe_src, highlight, score, engines, title, category }) => {
+    const { styles, theme } = useStyles();
+
+    const [expand, setExpand] = useState(false);
+    return (
+      <Flexbox gap={12}>
+        <Flexbox className={styles.container} onClick={() => setExpand(!expand)}>
+          <Flexbox flex={1} gap={8} horizontal padding={12}>
+            {iframe_src && (
+              <Flexbox>
+                <iframe
+                  // alt={title}
+                  className={styles.iframe}
+                  height={100}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  onPlay={(e) => {
+                    e.preventDefault();
+                  }}
+                  src={iframe_src}
+                  style={{
+                    pointerEvents: 'none',
+                  }}
+                  width={200}
+                />
+              </Flexbox>
+            )}
+            <Flexbox flex={1} gap={8}>
+              <Flexbox align={'center'} distribution={'space-between'} gap={12} horizontal>
+                <Flexbox align={'center'} gap={8} horizontal>
+                  <AntAvatar.Group>
+                    {engines.map((engine) => (
+                      <AntAvatar
+                        key={engine}
+                        src={ENGINE_ICON_MAP[engine]}
+                        style={{
+                          background: theme.colorBgLayout,
+                          height: 20,
+                          padding: 3,
+                          width: 20,
+                        }}
+                      />
+                    ))}
+                  </AntAvatar.Group>
+                  <Flexbox className={styles.title}>{title}</Flexbox>
+                </Flexbox>
+                <TitleExtra category={category} highlight={highlight} score={score} />
+              </Flexbox>
+              <Typography.Text className={styles.url} type={'secondary'}>
+                {url}
+              </Typography.Text>
+              <Flexbox className={styles.desc}>{content}</Flexbox>
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+        {expand && iframe_src && (
+          <Flexbox>
+            <iframe className={styles.iframe} height={440} src={iframe_src} width={'100%'} />
+          </Flexbox>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default VideoItem;

package/src/tools/web-browsing/Portal/ResultList/SearchItem/index.tsx

@@ -0,0 +1,91 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { SearchResult } from '@/types/tool/search';
+
+import { EngineAvatarGroup } from '../../../components/EngineAvatar';
+import TitleExtra from './TitleExtra';
+import Video from './Video';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      display: flex;
+      flex: 1;
+
+      padding: 8px;
+
+      color: initial;
+
+      border-radius: 8px;
+
+      &:hover {
+        background: ${token.colorFillTertiary};
+      }
+    `,
+    desc: css`
+      overflow: hidden;
+
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+
+      color: ${token.colorTextTertiary};
+      text-overflow: ellipsis;
+
+      -webkit-line-clamp: 2;
+    `,
+    displayLink: css`
+      color: ${token.colorTextQuaternary};
+    `,
+    title: css`
+      font-size: 16px;
+      color: ${token.colorLink};
+    `,
+    url: css`
+      overflow: hidden;
+     { /* stylelint-disable-line */ }
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+
+      color: ${token.colorTextDescription};
+      text-overflow: ellipsis;
+
+      -webkit-line-clamp: 1;
+    `,
+  };
+});
+
+interface SearchResultProps extends SearchResult {
+  highlight?: boolean;
+}
+
+const SearchItem = memo<SearchResultProps>((props) => {
+  const { content, url, score, engines, title, category } = props;
+  const { styles } = useStyles();
+
+  if (category === 'videos') return <Video {...props} />;
+
+  return (
+    <a className={styles.container} href={url!} rel="noreferrer" target={'_blank'}>
+      <Flexbox distribution={'space-between'} flex={1} gap={8} padding={12}>
+        <Flexbox gap={8}>
+          <Flexbox align={'center'} distribution={'space-between'} horizontal>
+            <Flexbox align={'center'} gap={8} horizontal>
+              <EngineAvatarGroup engines={engines} />
+              <Flexbox className={styles.title}>{title}</Flexbox>
+            </Flexbox>
+            <TitleExtra category={category} highlight={props.highlight} score={score} />
+          </Flexbox>
+          <Typography.Text className={styles.url} type={'secondary'}>
+            {url}
+          </Typography.Text>
+          <Flexbox className={styles.desc}>{content}</Flexbox>
+        </Flexbox>
+      </Flexbox>
+    </a>
+  );
+});
+
+export default SearchItem;

package/src/tools/web-browsing/Portal/ResultList/index.tsx

@@ -0,0 +1,21 @@
+import React, { memo, useCallback } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+import { SearchResult } from '@/types/tool/search';
+
+import Item from './SearchItem';
+
+interface ResultListProps {
+  dataSources: SearchResult[];
+}
+
+const ResultList = memo<ResultListProps>(({ dataSources }) => {
+  const itemContent = useCallback(
+    (index: number, result: SearchResult) => <Item {...result} highlight={index < 5} />,
+    [],
+  );
+
+  return <Virtuoso data={dataSources} height={'100%'} itemContent={itemContent} />;
+});
+
+export default ResultList;

package/src/tools/web-browsing/Portal/index.tsx

@@ -0,0 +1,65 @@
+import { Skeleton } from 'antd';
+import { uniq } from 'lodash-es';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatToolSelectors } from '@/store/chat/selectors';
+import { SearchResponse } from '@/types/tool/search';
+
+import SearchBar from '../components/SearchBar';
+import Footer from './Footer';
+import ResultList from './ResultList';
+
+interface SearchArguments {
+  query: string;
+  searchEngine?: string[];
+}
+
+interface InspectorUIProps<T = Record<string, any>, S = any> {
+  arguments: T;
+  identifier: string;
+  messageId: string;
+  state: S;
+}
+
+const Inspector = memo<InspectorUIProps<SearchArguments, SearchResponse>>(
+  ({ arguments: args, messageId, state }) => {
+    const engines = uniq((state.results || []).map((result) => result.engine));
+    const defaultEngines = engines.length > 0 ? engines : args.searchEngine || [];
+    const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
+
+    return (
+      <Flexbox gap={12} height={'100%'}>
+        <SearchBar
+          aiSummary={false}
+          defaultEngines={defaultEngines}
+          defaultQuery={args.query}
+          messageId={messageId}
+          tooltip={false}
+        />
+        {loading ? (
+          <Flexbox gap={16} paddingBlock={16} paddingInline={12}>
+            {[1, 2, 3, 4, 6].map((id) => (
+              <Skeleton
+                active
+                key={id}
+                paragraph={{ rows: 3, width: `${(id % 4) + 5}0%` }}
+                title={false}
+              />
+            ))}
+          </Flexbox>
+        ) : (
+          <>
+            <Flexbox height={'100%'} width={'100%'}>
+              <ResultList dataSources={state.results} />
+            </Flexbox>
+            <Footer />
+          </>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default Inspector;

package/src/tools/web-browsing/Render/ConfigForm/Form.tsx

@@ -0,0 +1,110 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { KeyRoundIcon, Loader2Icon } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { FormInput, FormPassword } from '@/components/FormInput';
+import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+import { keyVaultsConfigSelectors } from '@/store/user/selectors';
+
+import SearchXNGIcon from './SearchXNGIcon';
+import { FormAction } from './style';
+
+interface ProviderApiKeyFormProps {
+  id: string;
+  provider: string;
+}
+
+const Form = memo<ProviderApiKeyFormProps>(({ provider, id }) => {
+  const { t } = useTranslation('plugin');
+
+  const [apiKey, baseURL, setConfig] = useUserStore((s) => [
+    keyVaultsConfigSelectors.getVaultByProvider(provider as any)(s)?.apiKey,
+    keyVaultsConfigSelectors.getVaultByProvider(provider as any)(s)?.baseURL,
+    s.updateKeyVaultSettings,
+  ]);
+
+  const [showKey, setShow] = useState(false);
+
+  const [resend, deleteMessage] = useChatStore((s) => [s.reInvokeToolMessage, s.deleteMessage]);
+
+  const [loading, setLoading] = useState(false);
+
+  const avatar = useMemo(() => {
+    switch (provider) {
+      default: {
+        return <SearchXNGIcon />;
+      }
+    }
+  }, [provider]);
+
+  return (
+    <Center gap={16} style={{ width: 400 }}>
+      <FormAction
+        avatar={avatar}
+        description={t('search.searchxng.description')}
+        title={t('search.searchxng.title')}
+      >
+        <FormInput
+          onChange={(value) => {
+            setConfig(provider, { baseURL: value });
+          }}
+          placeholder={'https://searxng.xxx'}
+          suffix={<div>{loading && <Icon icon={Loader2Icon} spin />}</div>}
+          value={baseURL}
+        />
+        {showKey ? (
+          <FormPassword
+            autoComplete={'new-password'}
+            onChange={(value) => {
+              setConfig(provider, { apiKey: value });
+            }}
+            placeholder={t('search.searchxng.keyPlaceholder')}
+            suffix={<div>{loading && <Icon icon={Loader2Icon} spin />}</div>}
+            value={apiKey}
+          />
+        ) : (
+          <Button
+            block
+            icon={<Icon icon={KeyRoundIcon} />}
+            onClick={() => {
+              setShow(true);
+            }}
+            type={'text'}
+          >
+            {t('search.config.addKey')}
+          </Button>
+        )}
+        <Flexbox gap={12} width={'100%'}>
+          <Button
+            block
+            disabled={loading}
+            onClick={async () => {
+              setLoading(true);
+              resend(id).then(() => {
+                setLoading(false);
+              });
+              // deleteMessage(id);
+            }}
+            style={{ marginTop: 8 }}
+            type={'primary'}
+          >
+            {t('search.config.confirm')}
+          </Button>
+          <Button
+            onClick={() => {
+              deleteMessage(id);
+            }}
+          >
+            {t('search.config.close')}
+          </Button>
+        </Flexbox>
+      </FormAction>
+    </Center>
+  );
+});
+
+export default Form;

package/src/tools/web-browsing/Render/ConfigForm/SearchXNGIcon.tsx

@@ -0,0 +1,20 @@
+const SearchXNGIcon = () => {
+  return (
+    <svg height={48} viewBox="0 0 300 300" width={48} xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M121.929 66.386a50.717 50.717 0 0 0-31.18 5.052l-7.514-14.523a67.076 67.076 0 0 1 78.427 12.336 67.022 67.022 0 0 1 11.688 78.505l-14.464-7.634a50.677 50.677 0 0 0-8.837-59.357 50.71 50.71 0 0 0-28.12-14.38Z"
+        fill="#3050FF"
+      />
+      <path
+        d="M114.491 34.702c-45.165 0-81.78 36.603-81.78 81.755 0 45.153 36.615 81.756 81.78 81.756 45.166 0 81.78-36.603 81.78-81.756 0-45.152-36.614-81.755-81.78-81.755ZM0 116.457C0 53.244 51.26 2 114.491 2c63.232 0 114.492 51.244 114.492 114.457 0 63.214-51.26 114.458-114.492 114.458C51.26 230.915 0 179.671 0 116.457Z"
+        fill="#3050FF"
+      />
+      <path
+        d="m205.592 163.093-42.644 44.509L257.357 298 300 253.491l-94.408-90.398Z"
+        fill="#3050FF"
+      />
+    </svg>
+  );
+};
+
+export default SearchXNGIcon;