@lobehub/chat 1.63.3 → 1.64.0

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

@@ -0,0 +1,67 @@
+import { Button } from 'antd';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+import SearchXNGIcon from './SearchXNGIcon';
+import { FormAction } from './style';
+
+interface ConfigAlertProps {
+  id: string;
+  provider: string;
+}
+
+const ConfigAlert = memo<ConfigAlertProps>(({ provider, id }) => {
+  const { t } = useTranslation('plugin');
+
+  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.unconfiguredDesc')}
+        title={t('search.searchxng.unconfiguredTitle')}
+      >
+        <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 ConfigAlert;

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

@@ -0,0 +1,63 @@
+import { Avatar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Center, CenterProps, Flexbox } from 'react-layout-kit';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    border-radius: 8px;
+    color: ${token.colorText};
+  `,
+  desc: css`
+    color: ${token.colorTextTertiary};
+    text-align: center;
+  `,
+  form: css`
+    width: 100%;
+    max-width: 300px;
+    padding-block: 12px;
+  `,
+}));
+
+export const FormAction = memo<
+  {
+    animation?: boolean;
+    avatar: ReactNode;
+    background?: string;
+    description: string;
+    title: string;
+  } & CenterProps
+>(
+  ({
+    children,
+    background,
+    title,
+    description,
+    avatar,
+    animation,
+    className,
+    gap = 16,
+    ...rest
+  }) => {
+    const { cx, styles, theme } = useStyles();
+
+    return (
+      <Center className={cx(styles.form, className)} gap={gap} {...rest}>
+        <Avatar
+          animation={animation}
+          avatar={avatar}
+          background={background ?? theme.colorFillContent}
+          gap={12}
+          size={80}
+        />
+        <Flexbox gap={8} width={'100%'}>
+          <Flexbox style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center' }}>
+            {title}
+          </Flexbox>
+          <Flexbox className={styles.desc}>{description}</Flexbox>
+        </Flexbox>
+        {children}
+      </Center>
+    );
+  },
+);

package/src/tools/web-browsing/Render/SearchQuery/SearchView.tsx

@@ -0,0 +1,88 @@
+import { Icon } from '@lobehub/ui';
+import { Divider, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { SearchIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import { EngineAvatarGroup } from '../../components/EngineAvatar';
+
+const useStyles = createStyles(({ css, token }) => ({
+  font: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  query: css`
+    cursor: pointer;
+
+    padding-block: 4px;
+    padding-inline: 8px;
+    border-radius: 8px;
+
+    font-size: 12px;
+    color: ${token.colorTextSecondary};
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+}));
+
+interface SearchBarProps {
+  defaultEngines: string[];
+  defaultQuery: string;
+  onEditingChange: (editing: boolean) => void;
+  resultsNumber: number;
+  searching?: boolean;
+}
+
+const SearchBar = memo<SearchBarProps>(
+  ({ defaultEngines, defaultQuery, resultsNumber, onEditingChange, searching }) => {
+    const { t } = useTranslation('tool');
+    const isMobile = useIsMobile();
+    const { styles } = useStyles();
+    return (
+      <Flexbox
+        align={isMobile ? 'flex-start' : 'center'}
+        distribution={'space-between'}
+        gap={isMobile ? 8 : 40}
+        height={isMobile ? undefined : 32}
+        horizontal={!isMobile}
+      >
+        <Flexbox
+          align={'center'}
+          className={styles.query}
+          gap={8}
+          horizontal
+          onClick={() => {
+            onEditingChange(true);
+          }}
+        >
+          <Icon icon={SearchIcon} />
+          {defaultQuery}
+        </Flexbox>
+
+        <Flexbox align={'center'} horizontal>
+          <div className={styles.font}>{t('search.searchEngine')}</div>
+          {searching ? (
+            <Skeleton.Button active size={'small'} />
+          ) : (
+            <EngineAvatarGroup engines={defaultEngines} />
+          )}
+
+          {!isMobile && (
+            <>
+              <Divider type={'vertical'} />
+              <div className={styles.font}>{t('search.searchResult')}</div>
+              {searching ? <Skeleton.Button active size={'small'} /> : resultsNumber}
+            </>
+          )}
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+export default SearchBar;

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

@@ -0,0 +1,61 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { uniq } from 'lodash-es';
+import { XIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+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 SearchView from './SearchView';
+
+interface SearchQueryViewProps {
+  args: SearchQuery;
+  editing: boolean;
+  messageId: string;
+  pluginState?: SearchResponse;
+  setEditing: (editing: boolean) => void;
+}
+
+const SearchQueryView = memo<SearchQueryViewProps>(
+  ({ messageId, args, pluginState, setEditing, editing }) => {
+    const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
+    const searchResults = pluginState?.results || [];
+
+    const { t } = useTranslation('common');
+
+    const engines = uniq(searchResults.map((result) => result.engine));
+    const defaultEngines = engines.length > 0 ? engines : args.searchEngines || [];
+
+    return !pluginState ? (
+      <Flexbox align={'center'} distribution={'space-between'} height={32} horizontal>
+        <Skeleton.Button active style={{ borderRadius: 8, height: 32, width: 180 }} />
+        <Skeleton.Button active style={{ borderRadius: 8, height: 32, width: 220 }} />
+      </Flexbox>
+    ) : editing ? (
+      <SearchBar
+        defaultEngines={defaultEngines}
+        defaultQuery={args?.query}
+        messageId={messageId}
+        onSearch={() => setEditing(false)}
+        searchAddon={
+          <ActionIcon icon={XIcon} onClick={() => setEditing(false)} title={t('cancel')} />
+        }
+      />
+    ) : (
+      <SearchView
+        defaultEngines={defaultEngines}
+        defaultQuery={args?.query}
+        onEditingChange={setEditing}
+        resultsNumber={searchResults.length}
+        searching={loading}
+      />
+    );
+  },
+);
+
+export default SearchQueryView;

package/src/tools/web-browsing/Render/SearchResult/SearchResultItem.tsx

@@ -0,0 +1,72 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import Image from 'next/image';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { SearchResult } from '@/types/tool/search';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    height: 100%;
+    padding: 8px;
+    border-radius: 8px;
+
+    font-size: 12px;
+    color: initial;
+
+    background: ${token.colorFillQuaternary};
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  title: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    text-overflow: ellipsis;
+  `,
+  url: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    text-overflow: ellipsis;
+  `,
+}));
+
+const SearchResultItem = memo<SearchResult>(({ url, title }) => {
+  const { styles } = useStyles();
+
+  const urlObj = new URL(url);
+  const host = urlObj.hostname;
+  return (
+    <Link href={url} target={'_blank'}>
+      <Flexbox className={styles.container} gap={2} justify={'space-between'} key={url}>
+        <div className={styles.title}>{title}</div>
+        <Flexbox align={'center'} gap={4} horizontal>
+          <Image
+            alt={title || url}
+            height={14}
+            src={`https://icons.duckduckgo.com/ip3/${host}.ico`}
+            style={{ borderRadius: 4 }}
+            unoptimized
+            width={14}
+          />
+          <Typography.Text className={styles.url} type={'secondary'}>
+            {host.replace('www.', '')}
+          </Typography.Text>
+        </Flexbox>
+      </Flexbox>
+    </Link>
+  );
+});
+
+export default SearchResultItem;

package/src/tools/web-browsing/Render/SearchResult/ShowMore.tsx

@@ -0,0 +1,68 @@
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { WebBrowsingManifest } from '@/tools/web-browsing';
+
+import { EngineAvatarGroup } from '../../components/EngineAvatar';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    height: 100%;
+    padding: 8px;
+
+    font-size: 12px;
+    color: initial;
+
+    background: ${token.colorFillQuaternary};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+  `,
+  title: css`
+    overflow: hidden;
+   { /* stylelint-disable-line */ }
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+
+    text-overflow: ellipsis;
+
+    -webkit-line-clamp: 2;
+  `,
+}));
+
+interface ShowMoreProps {
+  engines: string[];
+  messageId: string;
+  resultsNumber: number;
+}
+const ShowMore = memo<ShowMoreProps>(({ messageId, engines, resultsNumber }) => {
+  const { styles } = useStyles();
+  const [openToolUI] = useChatStore((s) => [s.openToolUI]);
+
+  const { t } = useTranslation('tool');
+
+  return (
+    <Flexbox
+      className={styles.container}
+      gap={2}
+      justify={'space-between'}
+      onClick={() => {
+        openToolUI(messageId, WebBrowsingManifest.identifier);
+      }}
+    >
+      <div className={styles.title}>{t('search.viewMoreResults', { results: resultsNumber })}</div>
+      <Flexbox align={'center'} gap={4} horizontal>
+        <EngineAvatarGroup engines={engines} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ShowMore;

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

@@ -0,0 +1,105 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Empty, Skeleton } from 'antd';
+import { uniq } from 'lodash-es';
+import { Edit2Icon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useChatStore } from '@/store/chat';
+import { chatToolSelectors } from '@/store/chat/selectors';
+import { SearchQuery, SearchResponse } from '@/types/tool/search';
+
+import SearchResultItem from './SearchResultItem';
+import ShowMore from './ShowMore';
+
+const ITEM_HEIGHT = 80;
+const ITEM_WIDTH = 160;
+
+interface SearchResultProps {
+  args: SearchQuery;
+  editing: boolean;
+  messageId: string;
+  pluginState?: SearchResponse;
+  setEditing: (editing: boolean) => void;
+}
+
+const SearchResult = memo<SearchResultProps>(
+  ({ messageId, args, pluginState, setEditing, editing }) => {
+    const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
+    const searchResults = pluginState?.results || [];
+    const { t } = useTranslation(['tool', 'common']);
+
+    const engines = uniq(searchResults.map((result) => result.engine));
+    const defaultEngines = engines.length > 0 ? engines : args.searchEngines || [];
+    const isMobile = useIsMobile();
+
+    if (loading || !pluginState)
+      return (
+        <Flexbox gap={12} horizontal>
+          {['1', '2', '3', '4'].map((id) => (
+            <Skeleton.Button
+              active
+              key={id}
+              style={{ borderRadius: 8, height: ITEM_HEIGHT, width: ITEM_WIDTH }}
+            />
+          ))}
+        </Flexbox>
+      );
+
+    if (searchResults.length === 0)
+      return (
+        <Center>
+          <Empty
+            description={
+              <Flexbox gap={8}>
+                <div>{t('search.emptyResult')}</div>
+                {!editing && (
+                  <div>
+                    <Button
+                      icon={<Icon icon={Edit2Icon} />}
+                      onClick={() => {
+                        setEditing(true);
+                      }}
+                      type={'primary'}
+                    >
+                      {t('edit', { ns: 'common' })}
+                    </Button>
+                  </div>
+                )}
+              </Flexbox>
+            }
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+          />
+        </Center>
+      );
+
+    return (
+      <Flexbox gap={8}>
+        <Flexbox
+          gap={12}
+          horizontal
+          style={{ minHeight: ITEM_HEIGHT, overflowX: 'scroll', width: '100%' }}
+        >
+          {searchResults.slice(0, 5).map((result) => (
+            <div key={result.url} style={{ minWidth: ITEM_WIDTH, width: ITEM_WIDTH }}>
+              <SearchResultItem {...result} />
+            </div>
+          ))}
+          {!isMobile && searchResults.length > 5 && (
+            <div style={{ minWidth: ITEM_WIDTH }}>
+              <ShowMore
+                engines={defaultEngines}
+                messageId={messageId}
+                resultsNumber={searchResults.length - 5}
+              />
+            </div>
+          )}
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default SearchResult;

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

@@ -0,0 +1,57 @@
+import { Alert, Highlighter } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { BuiltinRenderProps } from '@/types/tool';
+import { SearchContent, SearchQuery, SearchResponse } from '@/types/tool/search';
+
+import ConfigForm from './ConfigForm';
+import SearchQueryView from './SearchQuery';
+import SearchResult from './SearchResult';
+
+const WebBrowsing = memo<BuiltinRenderProps<SearchContent[], SearchQuery, SearchResponse>>(
+  ({ messageId, args, pluginState, pluginError }) => {
+    const [editing, setEditing] = useState(false);
+
+    if (pluginError) {
+      if (pluginError?.type === 'PluginSettingsInvalid') {
+        return <ConfigForm id={messageId} provider={pluginError.body?.provider} />;
+      }
+
+      return (
+        <Alert
+          extra={
+            <Flexbox>
+              <Highlighter copyButtonSize={'small'} language={'json'} type={'pure'}>
+                {JSON.stringify(pluginError.body?.data || pluginError.body, null, 2)}
+              </Highlighter>
+            </Flexbox>
+          }
+          message={pluginError?.message}
+          type={'error'}
+        />
+      );
+    }
+
+    return (
+      <Flexbox gap={16}>
+        <SearchQueryView
+          args={args}
+          editing={editing}
+          messageId={messageId}
+          pluginState={pluginState}
+          setEditing={setEditing}
+        />
+        <SearchResult
+          args={args}
+          editing={editing}
+          messageId={messageId}
+          pluginState={pluginState}
+          setEditing={setEditing}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+export default WebBrowsing;

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

@@ -0,0 +1,32 @@
+import { Avatar } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import { ENGINE_ICON_MAP } from '../const';
+
+interface EngineAvatarGroupProps {
+  engines: string[];
+}
+
+interface EngineAvatarProps {
+  engine: string;
+  size?: number;
+}
+export const EngineAvatar = memo<EngineAvatarProps>(({ engine }) => (
+  <Avatar alt={engine} src={ENGINE_ICON_MAP[engine]} style={{ height: 16, width: 16 }} />
+));
+
+export const EngineAvatarGroup = memo<EngineAvatarGroupProps>(({ engines }) => {
+  const theme = useTheme();
+  return (
+    <Avatar.Group>
+      {engines.map((engine) => (
+        <Avatar
+          key={engine}
+          src={ENGINE_ICON_MAP[engine]}
+          style={{ background: theme.colorBgLayout, height: 20, padding: 3, width: 20 }}
+        />
+      ))}
+    </Avatar.Group>
+  );
+});