@lobehub/chat 1.17.7 → 1.18.1

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/InfoSidebar/SuggestionItem.tsx

@@ -0,0 +1,62 @@
+import { Avatar } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { DiscoverAssistantItem } from '@/types/discover';
+
+const { Paragraph, Title } = Typography;
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  banner: css`
+    opacity: ${isDarkMode ? 0.9 : 0.4};
+  `,
+  container: css`
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+  `,
+  desc: css`
+    margin-block-end: 0 !important;
+    color: ${token.colorTextDescription};
+  `,
+  title: css`
+    margin-block-end: 0 !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+  `,
+}));
+
+export interface SuggestionItemProps
+  extends Omit<DiscoverAssistantItem, 'suggestions' | 'socialData' | 'category' | 'config'>,
+    FlexboxProps {}
+
+const SuggestionItem = memo<SuggestionItemProps>(({ className, meta, identifier, ...rest }) => {
+  const { avatar, title, description, backgroundColor } = meta;
+
+  const { cx, styles, theme } = useStyles();
+
+  return (
+    <Flexbox className={cx(styles.container, className)} gap={12} key={identifier} {...rest}>
+      <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
+        <Avatar
+          alt={title}
+          avatar={avatar}
+          background={backgroundColor || theme.colorFillTertiary}
+          size={36}
+          title={title}
+        />
+        <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+          {title}
+        </Title>
+      </Flexbox>
+      <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+        {description}
+      </Paragraph>
+    </Flexbox>
+  );
+});
+
+export default SuggestionItem;

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/InfoSidebar/ToolItem.tsx

@@ -0,0 +1,19 @@
+import { Avatar } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverPlugintem } from '@/types/discover';
+
+const ToolItem = memo<DiscoverPlugintem>(({ meta }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox align={'center'} gap={12} horizontal>
+      <Avatar avatar={meta?.avatar || '🧩'} background={theme.colorFillTertiary} size={36} />
+      <span style={{ fontSize: 16, fontWeight: 500 }}>{meta?.title}</span>
+    </Flexbox>
+  );
+});
+
+export default ToolItem;

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/InfoSidebar/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import InterceptingLink from '@/components/InterceptingLink';
+import { DiscoverAssistantItem, DiscoverPlugintem } from '@/types/discover';
+
+import Block from '../../../../features/Block';
+import SuggestionItem from './SuggestionItem';
+import ToolItem from './ToolItem';
+
+interface InfoSidebarProps extends FlexboxProps {
+  data: DiscoverAssistantItem;
+  identifier: string;
+  mobile?: boolean;
+  pluginData?: DiscoverPlugintem[];
+}
+
+const InfoSidebar = memo<InfoSidebarProps>(({ pluginData, data, ...rest }) => {
+  const { t } = useTranslation('discover');
+
+  return (
+    <Flexbox gap={48} style={{ position: 'relative' }} width={'100%'} {...rest}>
+      {pluginData && pluginData?.length > 0 && (
+        <Block gap={12} title={t('assistants.plugins')}>
+          {pluginData.map((item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/plugin', item.identifier)}
+              key={item.identifier}
+              style={{ color: 'inherit' }}
+            >
+              <ToolItem {...item} />
+            </InterceptingLink>
+          ))}
+        </Block>
+      )}
+      <Block
+        gap={24}
+        more={t('assistants.more')}
+        moreLink={urlJoin('/discover/assistants', data.meta?.category || '')}
+        title={t('assistants.suggestions')}
+      >
+        {data?.suggestions?.length > 0 ? (
+          data?.suggestions.map((item) => (
+            <InterceptingLink
+              href={urlJoin('/discover/assistant', item.identifier)}
+              key={item.identifier}
+            >
+              <SuggestionItem {...item} />
+            </InterceptingLink>
+          ))
+        ) : (
+          <Skeleton active paragraph={{ rows: 5 }} title={false} />
+        )}
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default InfoSidebar;

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/SystemRole.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Markdown } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Block from '../../../features/Block';
+
+const SystemRole = memo<{ children?: string }>(({ children }) => {
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+
+  return (
+    <Block title={t('assistants.systemRole')}>
+      {children ? (
+        <Markdown
+          fontSize={theme.fontSize}
+          style={{
+            border: `1px solid ${theme.colorBorderSecondary}`,
+            borderRadius: theme.borderRadiusLG,
+            paddingInline: 16,
+          }}
+        >
+          {children}
+        </Markdown>
+      ) : (
+        <Skeleton paragraph={{ rows: 4 }} title={false} />
+      )}
+    </Block>
+  );
+});
+
+export default SystemRole;

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/Temp.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Markdown } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { BotMessageSquare } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { DiscoverAssistantItem } from '@/types/discover';
+
+import HighlightBlock from '../../../features/HighlightBlock';
+
+interface ConversationExampleProps extends FlexboxProps {
+  data: DiscoverAssistantItem;
+  identifier: string;
+  mobile?: boolean;
+}
+
+const ConversationExample = memo<ConversationExampleProps>(({ data }) => {
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+
+  return (
+    <HighlightBlock
+      avatar={data?.meta.avatar}
+      icon={BotMessageSquare}
+      justify={'space-between'}
+      style={{ background: theme.colorBgContainer }}
+      title={t('assistants.systemRole')}
+    >
+      <Flexbox paddingInline={16}>
+        {data.config.systemRole ? (
+          <Markdown fontSize={theme.fontSize}>{data.config.systemRole}</Markdown>
+        ) : (
+          <Skeleton paragraph={{ rows: 4 }} title={false} />
+        )}
+      </Flexbox>
+    </HighlightBlock>
+  );
+});
+
+export default ConversationExample;

package/src/app/(main)/discover/(detail)/assistant/[slug]/page.tsx

@@ -0,0 +1,121 @@
+import { notFound } from 'next/navigation';
+import urlJoin from 'url-join';
+
+import StructuredData from '@/components/StructuredData';
+import { Locales } from '@/locales/resources';
+import { ldModule } from '@/server/ld';
+import { metadataModule } from '@/server/metadata';
+import { DiscoverService } from '@/server/services/discover';
+import { translation } from '@/server/translation';
+import { DiscoverPlugintem } from '@/types/discover';
+import { isMobileDevice } from '@/utils/responsive';
+
+import DetailLayout from '../../features/DetailLayout';
+import Actions from './features/Actions';
+import Header from './features/Header';
+import InfoSidebar from './features/InfoSidebar';
+import Temp from './features/Temp';
+
+// import ConversationExample from './features/ConversationExample';
+// import SystemRole from './features/SystemRole';
+
+type Props = { params: { slug: string }; searchParams: { hl?: Locales } };
+
+export const generateMetadata = async ({ params, searchParams }: Props) => {
+  const { slug: identifier } = params;
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+
+  const discoverService = new DiscoverService();
+  const data = await discoverService.getAssistantById(locale, identifier);
+  if (!data) return notFound();
+
+  const { meta, createdAt, homepage, author } = data;
+
+  return {
+    authors: [
+      { name: author, url: homepage },
+      { name: 'LobeHub', url: 'https://github.com/lobehub' },
+      { name: 'LobeChat', url: 'https://github.com/lobehub/lobe-chat' },
+    ],
+    keywords: meta.tags,
+    ...metadataModule.generate({
+      alternate: true,
+      description: meta.description,
+      locale,
+      tags: meta.tags,
+      title: [meta.title, t('discover.assistants.title')].join(' · '),
+      url: urlJoin('/discover/assistant', identifier),
+    }),
+    other: {
+      'article:author': author,
+      'article:published_time': createdAt
+        ? new Date(createdAt).toISOString()
+        : new Date().toISOString(),
+      'robots': 'index,follow,max-image-preview:large',
+    },
+  };
+};
+
+const Page = async ({ params, searchParams }: Props) => {
+  const { slug: identifier } = params;
+  const { t, locale } = await translation('metadata', searchParams?.hl);
+  const mobile = isMobileDevice();
+
+  const discoverService = new DiscoverService();
+  const data = await discoverService.getAssistantById(locale, identifier);
+  if (!data) return notFound();
+
+  const { meta, createdAt, author, config } = data;
+
+  let pluginData: DiscoverPlugintem[] = [];
+  if (config?.plugins && config.plugins?.length > 0) {
+    pluginData = await discoverService.getPluginByIds(locale, config.plugins);
+  }
+
+  const ld = ldModule.generate({
+    article: {
+      author: [author],
+      enable: true,
+      identifier,
+      tags: meta.tags,
+    },
+    date: createdAt ? new Date(createdAt).toISOString() : new Date().toISOString(),
+    description: meta.description || t('discover.assistants.description'),
+    title: [meta.title, t('discover.assistants.title')].join(' · '),
+    url: urlJoin('/discover/assistant', identifier),
+    webpage: {
+      enable: true,
+      search: '/discover/search',
+    },
+  });
+
+  return (
+    <>
+      <StructuredData ld={ld} />
+      <DetailLayout
+        actions={<Actions data={data} identifier={identifier} />}
+        header={<Header data={data} identifier={identifier} mobile={mobile} />}
+        mobile={mobile}
+        sidebar={
+          <InfoSidebar
+            data={data}
+            identifier={identifier}
+            mobile={mobile}
+            pluginData={pluginData}
+          />
+        }
+        /* ↓ cloud slot ↓ */
+        /* ↑ cloud slot ↑ */
+      >
+        <Temp data={data} identifier={identifier} />
+        {/* TODO: Chat Preview */}
+        {/*<ConversationExample data={data} identifier={identifier} />*/}
+        {/*<SystemRole>{data?.config?.systemRole}</SystemRole>*/}
+      </DetailLayout>
+    </>
+  );
+};
+
+Page.DisplayName = 'DiscoverAssistantsDetail';
+
+export default Page;

package/src/app/(main)/discover/(detail)/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/discover/(detail)/features/Back.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { CSSProperties, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    back: css`
+      color: ${token.colorTextDescription};
+
+      &:hover {
+        color: ${token.colorText};
+      }
+    `,
+  };
+});
+
+const Back = memo<{ href: string; style?: CSSProperties }>(({ href, style }) => {
+  const { isIntercepted } = useInterceptingRoutes();
+  const { t } = useTranslation('discover');
+  const { styles } = useStyles();
+
+  if (isIntercepted) return null;
+
+  return (
+    <Link className={styles.back} href={href} style={{ marginBottom: 8, ...style }}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Icon icon={ArrowLeft} />
+        {t(`back`)}
+      </Flexbox>
+    </Link>
+  );
+});
+
+export default Back;

package/src/app/(main)/discover/(detail)/features/Block.tsx

@@ -0,0 +1,50 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  more: css`
+    display: flex;
+    align-items: center;
+    color: ${token.colorTextSecondary};
+  `,
+  title: css`
+    margin-block: 0;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1.2;
+  `,
+}));
+
+interface BlockProps extends FlexboxProps {
+  more?: string;
+  moreLink?: string;
+  title: string;
+}
+
+const Block = memo<BlockProps>(({ title, more, moreLink, children, ...rest }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox gap={16} style={{ position: 'relative' }} width={'100%'}>
+      <Flexbox align={'center'} gap={16} horizontal justify={'space-between'} width={'100%'}>
+        <h2 className={styles.title}>{title}</h2>
+        {moreLink && (
+          <Link href={moreLink} target={moreLink.startsWith('http') ? '_blank' : undefined}>
+            <Button className={styles.more} type={'text'}>
+              <span>{more}</span>
+              <Icon icon={ChevronRight} />
+            </Button>
+          </Link>
+        )}
+      </Flexbox>
+      <Flexbox {...rest}>{children}</Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Block;

package/src/app/(main)/discover/(detail)/features/DetailLayout.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Footer from '@/features/Setting/Footer';
+import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
+
+import SidebarContainer from './SidebarContainer';
+
+interface DetailLayoutProps {
+  actions?: ReactNode;
+  children?: ReactNode;
+  header: ReactNode;
+  mobile?: boolean;
+  sidebar?: ReactNode;
+  statistics?: ReactNode;
+}
+
+const DetailLayout = memo<DetailLayoutProps>(
+  ({ statistics, mobile, header, sidebar, children, actions }) => {
+    const { md = true, xl = true } = useResponsive();
+    const { isIntercepted } = useInterceptingRoutes();
+
+    if (mobile || !md || (isIntercepted && !xl))
+      return (
+        <>
+          {header}
+          <Flexbox gap={16} width={'100%'}>
+            {actions}
+            {statistics}
+          </Flexbox>
+          {children}
+          {sidebar}
+          <Footer />
+        </>
+      );
+
+    if (isIntercepted) {
+      return (
+        <>
+          <Flexbox flex={1} gap={24} style={{ overflow: 'hidden', position: 'relative' }}>
+            <Flexbox style={{ paddingRight: 16 }}>{header}</Flexbox>
+            <Flexbox
+              gap={24}
+              style={{
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                paddingBottom: 48,
+                paddingRight: 16,
+                position: 'relative',
+              }}
+            >
+              {children}
+              <Footer />
+            </Flexbox>
+          </Flexbox>
+          <SidebarContainer style={{ position: 'sticky', top: '0' }}>
+            <Flexbox gap={16} width={'100%'}>
+              {actions}
+              {statistics}
+            </Flexbox>
+            {sidebar}
+          </SidebarContainer>
+        </>
+      );
+    }
+
+    return (
+      <>
+        {header}
+        <Flexbox gap={32} horizontal width={'100%'}>
+          <Flexbox flex={1} gap={48} style={{ overflow: 'hidden', position: 'relative' }}>
+            {children}
+            <Footer />
+          </Flexbox>
+          <SidebarContainer>
+            <Flexbox gap={16} width={'100%'}>
+              {actions}
+              {statistics}
+            </Flexbox>
+            {sidebar}
+          </SidebarContainer>
+        </Flexbox>
+      </>
+    );
+  },
+);
+
+export default DetailLayout;

package/src/app/(main)/discover/(detail)/features/HighlightBlock.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideIcon } from 'lucide-react';
+import { rgba } from 'polished';
+import { ReactNode, memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import { useServerConfigStore } from '@/store/serverConfig';
+
+import CardBanner from '../../components/CardBanner';
+
+const useStyles = createStyles(({ css, token }) => ({
+  background: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    transform: scale(3);
+
+    overflow: hidden;
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+
+      width: 100%;
+      height: 100%;
+
+      background: ${rgba(token.colorBgContainer, 0.5)};
+    }
+  `,
+  container: css`
+    position: relative;
+    overflow: hidden;
+    border-radius: ${token.borderRadiusLG}px;
+    box-shadow:
+      0 0 0 1px ${token.colorFill} inset,
+      ${token.boxShadowTertiary};
+  `,
+  header: css`
+    position: relative;
+    overflow: hidden;
+    height: 58px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+  `,
+}));
+
+interface HighlightBlockProps extends FlexboxProps {
+  avatar?: string | ReactNode;
+  icon: LucideIcon;
+  title: string;
+}
+
+const HighlightBlock = memo<HighlightBlockProps>(({ avatar, title, icon, children, ...rest }) => {
+  const { styles } = useStyles();
+  const mobile = useServerConfigStore((s) => s.isMobile);
+  return (
+    <Flexbox className={styles.container} flex={'none'} width={'100%'} {...rest}>
+      <Flexbox
+        align={'center'}
+        className={styles.header}
+        flex={'none'}
+        gap={12}
+        horizontal
+        padding={16}
+      >
+        <Icon icon={icon} size={{ fontSize: 20 }} style={{ zIndex: 1 }} />
+        <h2 style={{ fontSize: 16, fontWeight: 'bold', margin: 0, zIndex: 1 }}>{title}</h2>
+        <CardBanner avatar={avatar} className={styles.background} size={mobile ? 64 : 512} />
+      </Flexbox>
+      {children}
+    </Flexbox>
+  );
+});
+
+export default HighlightBlock;