@lobehub/chat 1.66.5 → 1.67.0

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

@@ -0,0 +1,190 @@
+import { Alert, CopyButton, Icon, Markdown } from '@lobehub/ui';
+import { Descriptions, Segmented, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { ExternalLink } from 'lucide-react';
+import Link from 'next/link';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { CrawlResult } from '@/types/tool/crawler';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    cardBody: css`
+      padding-block: 12px 8px;
+      padding-inline: 16px;
+    `,
+    container: css`
+      cursor: pointer;
+
+      overflow: hidden;
+
+      max-width: 360px;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: 12px;
+
+      transition: border-color 0.2s;
+
+      :hover {
+        border-color: ${token.colorPrimary};
+      }
+    `,
+    description: css`
+      margin-block: 0 4px !important;
+      color: ${token.colorTextSecondary};
+    `,
+    detailsSection: css`
+      padding-block: ${token.paddingSM}px;
+    `,
+    externalLink: css`
+      color: ${token.colorPrimary};
+    `,
+    footer: css`
+      padding: ${token.paddingXS}px;
+      border-radius: 6px;
+      text-align: center;
+      background-color: ${token.colorFillQuaternary};
+    `,
+    footerText: css`
+      font-size: ${token.fontSizeSM}px;
+      color: ${token.colorTextTertiary} !important;
+    `,
+    metaInfo: css`
+      display: flex;
+      align-items: center;
+      color: ${token.colorTextSecondary};
+    `,
+    sliced: css`
+      color: ${token.colorTextQuaternary};
+    `,
+    title: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+
+      margin-block-end: 0;
+
+      font-size: 16px;
+      font-weight: bold;
+    `,
+    titleRow: css`
+      color: ${token.colorText};
+    `,
+
+    url: css`
+      color: ${token.colorTextTertiary};
+    `,
+  };
+});
+
+interface PageContentProps {
+  messageId: string;
+  result?: CrawlResult;
+}
+
+const SLICED_LIMITED = 10_000;
+
+const PageContent = memo<PageContentProps>(({ result }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+  const [display, setDisplay] = useState('render');
+
+  if (!result) return undefined;
+
+  const { url, title, description, content } = result.data;
+  return (
+    <Flexbox gap={24}>
+      <Flexbox gap={8}>
+        <Flexbox
+          align={'center'}
+          className={styles.titleRow}
+          gap={24}
+          horizontal
+          justify={'space-between'}
+        >
+          <Flexbox>
+            <div className={styles.title}>{title || result.originalUrl}</div>
+          </Flexbox>
+        </Flexbox>
+        {description && (
+          <Typography.Paragraph
+            className={styles.description}
+            ellipsis={{ expandable: false, rows: 4 }}
+          >
+            {description}
+          </Typography.Paragraph>
+        )}
+        <Flexbox align={'center'} className={styles.url} gap={4} horizontal>
+          {result.data.siteName && <div>{result.data.siteName} · </div>}
+          <Link
+            className={styles.url}
+            href={url}
+            onClick={(e) => e.stopPropagation()}
+            rel={'nofollow'}
+            style={{ display: 'flex', gap: 4 }}
+            target={'_blank'}
+          >
+            {result.originalUrl}
+            <Icon icon={ExternalLink} />
+          </Link>
+        </Flexbox>
+
+        <div className={styles.footer}>
+          <Descriptions
+            classNames={{
+              content: styles.footerText,
+            }}
+            column={2}
+            items={[
+              {
+                children: result.data.content?.length,
+                label: t('search.crawPages.meta.words'),
+              },
+              {
+                children: result.crawler,
+                label: t('search.crawPages.meta.crawler'),
+              },
+            ]}
+            size="small"
+          />
+        </div>
+      </Flexbox>
+      {content && (
+        <Flexbox gap={12} paddingBlock={'0 12px'}>
+          <Flexbox horizontal justify={'space-between'}>
+            <Segmented
+              onChange={(value) => setDisplay(value)}
+              options={[
+                { label: t('search.crawPages.detail.preview'), value: 'render' },
+                { label: t('search.crawPages.detail.raw'), value: 'raw' },
+              ]}
+              value={display}
+            />
+            <CopyButton content={content} />
+          </Flexbox>
+          {content.length > SLICED_LIMITED && (
+            <Alert message={t('search.crawPages.detail.tooLong')} variant={'pure'} />
+          )}
+          {display === 'render' ? (
+            <Markdown variant={'chat'}>{content}</Markdown>
+          ) : (
+            <div style={{ paddingBlock: '0 12px' }}>
+              {content.length < SLICED_LIMITED ? (
+                content
+              ) : (
+                <>
+                  <span>{content.slice(0, SLICED_LIMITED)}</span>
+                  <span className={styles.sliced}>{content.slice(SLICED_LIMITED, -1)}</span>
+                </>
+              )}
+            </div>
+          )}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});
+
+export default PageContent;

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

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { CrawlResult } from '@/types/tool/crawler';
+
+import PageContent from '../PageContent';
+
+interface PageContentProps {
+  messageId: string;
+  results: CrawlResult[];
+  urls: string[];
+}
+
+const PageContents = memo<PageContentProps>(({ urls, messageId, results }) => {
+  const activePageContentUrl = useChatStore((s) => s.activePageContentUrl);
+
+  const url = urls.find((u) => u === activePageContentUrl);
+  const result = results.find((result) => result.originalUrl === url);
+
+  return <PageContent messageId={messageId} result={result} />;
+});
+
+export default PageContents;

package/src/tools/web-browsing/Portal/{ResultList → Search/ResultList}/SearchItem/Video.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { SearchResult } from '@/types/tool/search';
 
-import { ENGINE_ICON_MAP } from '../../../const';
+import { ENGINE_ICON_MAP } from '../../../../const';
 import TitleExtra from './TitleExtra';
 
 const useStyles = createStyles(({ css, token }) => {

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

@@ -0,0 +1,69 @@
+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 { SearchQuery, SearchResponse } from '@/types/tool/search';
+
+import SearchBar from '../../components/SearchBar';
+import Footer from './Footer';
+import ResultList from './ResultList';
+
+interface InspectorUIProps {
+  messageId: string;
+  query: SearchQuery;
+  response: SearchResponse;
+}
+
+const Inspector = memo<InspectorUIProps>(({ query: args, messageId, response }) => {
+  const engines = uniq((response.results || []).map((result) => result.engine));
+  const defaultEngines = engines.length > 0 ? engines : args.searchEngines || [];
+  const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
+
+  if (loading) {
+    return (
+      <Flexbox gap={12} height={'100%'}>
+        <SearchBar
+          aiSummary={false}
+          defaultEngines={defaultEngines}
+          defaultQuery={args.query}
+          messageId={messageId}
+          tooltip={false}
+        />
+
+        <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>
+    );
+  }
+
+  return (
+    <Flexbox gap={0} height={'100%'}>
+      <Flexbox gap={12} height={'100%'}>
+        <SearchBar
+          aiSummary={false}
+          defaultEngines={defaultEngines}
+          defaultQuery={args.query}
+          messageId={messageId}
+          tooltip={false}
+        />
+        <Flexbox height={'100%'} width={'100%'}>
+          <ResultList dataSources={response.results} />
+        </Flexbox>
+      </Flexbox>
+      <Footer />
+    </Flexbox>
+  );
+});
+
+export default Inspector;

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

@@ -1,77 +1,41 @@
-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 { WebBrowsingApiName } from '@/tools/web-browsing';
+import { BuiltinPortalProps } from '@/types/tool';
+import { CrawlPluginState } from '@/types/tool/crawler';
+import { SearchQuery } from '@/types/tool/search';
 
-import SearchBar from '../components/SearchBar';
-import Footer from './Footer';
-import ResultList from './ResultList';
+import PageContent from './PageContent';
+import PageContents from './PageContents';
+import Search from './Search';
 
-interface SearchArguments {
-  query: string;
-  searchEngine?: string[];
-}
+const Inspector = memo<BuiltinPortalProps>(({ arguments: args, messageId, state, apiName }) => {
+  switch (apiName) {
+    case WebBrowsingApiName.searchWithSearXNG: {
+      return <Search messageId={messageId} query={args as SearchQuery} response={state} />;
+    }
 
-interface InspectorUIProps<T = Record<string, any>, S = any> {
-  arguments: T;
-  identifier: string;
-  messageId: string;
-  state: S;
-}
+    case WebBrowsingApiName.crawlSinglePage: {
+      const url = args.url;
+      const result = (state as CrawlPluginState).results.find(
+        (result) => result.originalUrl === url,
+      );
 
-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 <PageContent messageId={messageId} result={result} />;
+    }
 
-    if (loading) {
+    case WebBrowsingApiName.crawlMultiPages: {
       return (
-        <Flexbox gap={12} height={'100%'}>
-          <SearchBar
-            aiSummary={false}
-            defaultEngines={defaultEngines}
-            defaultQuery={args.query}
-            messageId={messageId}
-            tooltip={false}
-          />
-
-          <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>
+        <PageContents
+          messageId={messageId}
+          results={(state as CrawlPluginState).results}
+          urls={args.urls}
+        />
       );
     }
+  }
 
-    return (
-      <Flexbox gap={0} height={'100%'}>
-        <Flexbox gap={12} height={'100%'}>
-          <SearchBar
-            aiSummary={false}
-            defaultEngines={defaultEngines}
-            defaultQuery={args.query}
-            messageId={messageId}
-            tooltip={false}
-          />
-          <Flexbox height={'100%'} width={'100%'}>
-            <ResultList dataSources={state.results} />
-          </Flexbox>
-        </Flexbox>
-        <Footer />
-      </Flexbox>
-    );
-  },
-);
+  return null;
+});
 
 export default Inspector;

package/src/tools/web-browsing/Render/PageContent/Loading.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { CopyButton } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { shinyTextStylish } from '@/styles/loading';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    cardBody: css`
+      padding-block: 12px 8px;
+      padding-inline: 12px;
+    `,
+    container: css`
+      overflow: hidden;
+      justify-content: space-between;
+
+      max-width: 360px;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: 12px;
+    `,
+
+    footer: css`
+      padding-block: 8px;
+      padding-inline: 12px;
+
+      font-size: ${token.fontSizeSM}px;
+      color: ${token.colorTextTertiary};
+
+      background-color: ${token.colorFillQuaternary};
+    `,
+    shining: shinyTextStylish(token),
+  };
+});
+
+const LoadingCard = memo<{ url: string }>(({ url }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.container}>
+      <Flexbox className={styles.cardBody} horizontal>
+        <Link href={url} rel={'nofollow'} target={'_blank'}>
+          <div className={styles.shining}>{url}</div>
+        </Link>
+        <CopyButton content={url} size={'small'} />
+      </Flexbox>
+      <div className={styles.footer}>{t('search.crawPages.crawling')}</div>
+    </Flexbox>
+  );
+});
+
+export default LoadingCard;

package/src/tools/web-browsing/Render/PageContent/Result.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { CrawlSuccessResult } from '@lobechat/web-crawler';
+import { Icon } from '@lobehub/ui';
+import { Descriptions, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { ExternalLink } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { WebBrowsingManifest } from '@/tools/web-browsing';
+
+const { Paragraph } = Typography;
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    cardBody: css`
+      padding-block: 12px 8px;
+      padding-inline: 16px;
+    `,
+    container: css`
+      cursor: pointer;
+
+      overflow: hidden;
+
+      max-width: 360px;
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: 12px;
+
+      transition: border-color 0.2s;
+
+      :hover {
+        border-color: ${token.colorPrimary};
+      }
+    `,
+    description: css`
+      margin-block: 0 4px !important;
+      color: ${token.colorTextTertiary};
+    `,
+    detailsSection: css`
+      padding-block: ${token.paddingSM}px;
+    `,
+    externalLink: css`
+      color: ${token.colorTextQuaternary};
+
+      :hover {
+        color: ${token.colorText};
+      }
+    `,
+    footer: css`
+      padding: ${token.paddingXS}px;
+      text-align: center;
+      background-color: ${token.colorFillQuaternary};
+    `,
+    footerText: css`
+      font-size: ${token.fontSizeSM}px;
+      color: ${token.colorTextTertiary} !important;
+    `,
+    metaInfo: css`
+      display: flex;
+      align-items: center;
+      color: ${token.colorTextSecondary};
+    `,
+    title: css`
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+
+      margin-block-end: 0;
+    `,
+    titleRow: css`
+      color: ${token.colorText};
+    `,
+  };
+});
+
+interface CrawlerData {
+  crawler: string;
+  messageId: string;
+  originalUrl: string;
+  result: CrawlSuccessResult;
+}
+
+const CrawlerResultCard = memo<CrawlerData>(({ result, messageId, crawler, originalUrl }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+  const [openToolUI, togglePageContent] = useChatStore((s) => [s.openToolUI, s.togglePageContent]);
+
+  const { url, title, description } = result;
+
+  return (
+    <Flexbox
+      className={styles.container}
+      justify={'space-between'}
+      onClick={() => {
+        openToolUI(messageId, WebBrowsingManifest.identifier);
+        togglePageContent(originalUrl);
+      }}
+    >
+      <Flexbox className={styles.cardBody} gap={8}>
+        <Flexbox align={'center'} className={styles.titleRow} horizontal justify={'space-between'}>
+          <Flexbox>
+            <div className={styles.title}>{title || originalUrl}</div>
+          </Flexbox>
+          <Link href={url} onClick={(e) => e.stopPropagation()} target={'_blank'}>
+            <Center className={styles.externalLink}>
+              <Icon icon={ExternalLink} />
+            </Center>
+          </Link>
+        </Flexbox>
+        <Paragraph className={styles.description} ellipsis={{ expandable: false, rows: 2 }}>
+          {description || result.content?.slice(0, 40)}
+        </Paragraph>
+      </Flexbox>
+      <div className={styles.footer}>
+        <Descriptions
+          classNames={{
+            content: styles.footerText,
+          }}
+          column={2}
+          items={[
+            {
+              children: result.content?.length,
+              label: t('search.crawPages.meta.words'),
+            },
+            {
+              children: crawler,
+              label: t('search.crawPages.meta.crawler'),
+            },
+          ]}
+          size="small"
+        />
+      </div>
+    </Flexbox>
+  );
+});
+
+export default CrawlerResultCard;

package/src/tools/web-browsing/Render/PageContent/index.tsx

@@ -0,0 +1,41 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { CrawlPluginState } from '@/types/tool/crawler';
+
+import Loading from './Loading';
+import Result from './Result';
+
+interface PagesContentProps {
+  messageId: string;
+  results?: CrawlPluginState['results'];
+  urls: string[];
+}
+
+const PagesContent = memo<PagesContentProps>(({ results, messageId, urls }) => {
+  if (!results || results.length === 0) {
+    return (
+      <Flexbox gap={12} horizontal>
+        {urls.map((url) => (
+          <Loading key={url} url={url} />
+        ))}
+      </Flexbox>
+    );
+  }
+
+  return (
+    <Flexbox gap={12} horizontal>
+      {results.map((result) => (
+        <Result
+          crawler={result.crawler}
+          key={result.originalUrl}
+          messageId={messageId}
+          originalUrl={result.originalUrl}
+          result={result.data}
+        />
+      ))}
+    </Flexbox>
+  );
+});
+
+export default PagesContent;

package/src/tools/web-browsing/Render/{SearchQuery → Search/SearchQuery}/SearchView.tsx

@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
 
-import { EngineAvatarGroup } from '../../components/EngineAvatar';
+import { EngineAvatarGroup } from '../../../components/EngineAvatar';
 
 const useStyles = createStyles(({ css, token }) => ({
   font: css`

package/src/tools/web-browsing/Render/{SearchQuery → Search/SearchQuery}/index.tsx

@@ -10,7 +10,7 @@ import { useChatStore } from '@/store/chat';
 import { chatToolSelectors } from '@/store/chat/selectors';
 import { SearchQuery, SearchResponse } from '@/types/tool/search';
 
-import SearchBar from '../../components/SearchBar';
+import SearchBar from '../../../components/SearchBar';
 import SearchView from './SearchView';
 
 interface SearchQueryViewProps {

package/src/tools/web-browsing/Render/{SearchResult → Search/SearchResult}/ShowMore.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { WebBrowsingManifest } from '@/tools/web-browsing';
 
-import { EngineAvatarGroup } from '../../components/EngineAvatar';
+import { EngineAvatarGroup } from '../../../components/EngineAvatar';
 
 const useStyles = createStyles(({ css, token }) => ({
   container: css`