@lobehub/chat 1.96.19 → 1.97.0

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Header.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { Github, MCP } from '@lobehub/icons';
+import { ActionIcon, Avatar, Button, Icon, Text, Tooltip } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { BookTextIcon, CoinsIcon, DotIcon } from 'lucide-react';
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { formatIntergerNumber } from '@/utils/format';
+
+import { useCategory } from '../../../../(list)/assistant/features/Category/useCategory';
+import PublishedTime from '../../../../../../../../components/PublishedTime';
+import { useDetailContext } from './DetailProvider';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      color: ${token.colorTextSecondary};
+    `,
+    time: css`
+      font-size: 12px;
+      color: ${token.colorTextDescription};
+    `,
+    version: css`
+      font-family: ${token.fontFamilyCode};
+      font-size: 13px;
+    `,
+  };
+});
+
+const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { t } = useTranslation('discover');
+  const {
+    author,
+    identifier,
+    createdAt,
+    category,
+    avatar,
+    title,
+    tokenUsage,
+    pluginCount,
+    knowledgeCount,
+  } = useDetailContext();
+  const { styles, theme } = useStyles();
+  const { mobile = isMobile } = useResponsive();
+  const categories = useCategory();
+  const cate = categories.find((c) => c.key === category);
+
+  const cateButton = (
+    <Link
+      href={qs.stringifyUrl({
+        query: { category: cate?.key },
+        url: '/discover/assistant',
+      })}
+    >
+      <Button icon={cate?.icon} size={'middle'} variant={'outlined'}>
+        {cate?.label}
+      </Button>
+    </Link>
+  );
+
+  return (
+    <Flexbox gap={12}>
+      <Flexbox align={'flex-start'} gap={16} horizontal width={'100%'}>
+        <Avatar avatar={avatar} size={mobile ? 48 : 64} />
+        <Flexbox
+          flex={1}
+          gap={4}
+          style={{
+            overflow: 'hidden',
+          }}
+        >
+          <Flexbox
+            align={'center'}
+            gap={8}
+            horizontal
+            justify={'space-between'}
+            style={{
+              overflow: 'hidden',
+              position: 'relative',
+            }}
+          >
+            <Flexbox
+              align={'center'}
+              flex={1}
+              gap={12}
+              horizontal
+              style={{
+                overflow: 'hidden',
+                position: 'relative',
+              }}
+            >
+              <Text
+                as={'h1'}
+                ellipsis
+                style={{ fontSize: mobile ? 18 : 24, margin: 0 }}
+                title={identifier}
+              >
+                {title}
+              </Text>
+            </Flexbox>
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Link
+                href={urlJoin(
+                  'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
+                  identifier as string,
+                )}
+                onClick={(e) => e.stopPropagation()}
+                target={'_blank'}
+              >
+                <ActionIcon fill={theme.colorTextDescription} icon={Github} />
+              </Link>
+            </Flexbox>
+          </Flexbox>
+          <Flexbox align={'center'} gap={4} horizontal>
+            {author && (
+              <Link href={urlJoin('https://github.com', author)} target={'_blank'}>
+                {author}
+              </Link>
+            )}
+            <Icon icon={DotIcon} />
+            <PublishedTime
+              className={styles.time}
+              date={createdAt as string}
+              template={'MMM DD, YYYY'}
+            />
+          </Flexbox>
+        </Flexbox>
+      </Flexbox>
+      <Flexbox
+        align={'center'}
+        gap={mobile ? 12 : 24}
+        horizontal
+        style={{
+          color: theme.colorTextSecondary,
+        }}
+      >
+        {!mobile && cateButton}
+        {Boolean(tokenUsage) && (
+          <Tooltip styles={{ root: { pointerEvents: 'none' } }} title={t('assistants.tokenUsage')}>
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Icon icon={CoinsIcon} />
+              {formatIntergerNumber(tokenUsage)}
+            </Flexbox>
+          </Tooltip>
+        )}
+        {Boolean(pluginCount) && (
+          <Tooltip styles={{ root: { pointerEvents: 'none' } }} title={t('assistants.withPlugin')}>
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Icon fill={theme.colorTextSecondary} icon={MCP} />
+              {pluginCount}
+            </Flexbox>
+          </Tooltip>
+        )}
+        {Boolean(knowledgeCount) && (
+          <Tooltip
+            styles={{ root: { pointerEvents: 'none' } }}
+            title={t('assistants.withKnowledge')}
+          >
+            <Flexbox align={'center'} gap={6} horizontal>
+              <Icon icon={BookTextIcon} />
+              {knowledgeCount}
+            </Flexbox>
+          </Tooltip>
+        )}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[slug]/features → [...slugs]/features/Sidebar/ActionButton}/AddAgent.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import { ActionIcon, Icon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { App, Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
-import { ChevronDownIcon, PlusIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { ChevronDownIcon } from 'lucide-react';
+import { useRouter } from 'nextjs-toploader/app';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionStore } from '@/store/session';
-import { DiscoverAssistantItem } from '@/types/discover';
+
+import { useDetailContext } from '../../DetailProvider';
 
 const useStyles = createStyles(({ css }) => ({
   button: css`
@@ -21,7 +21,8 @@ const useStyles = createStyles(({ css }) => ({
   `,
 }));
 
-const AddAgent = memo<{ data: DiscoverAssistantItem; mobile?: boolean }>(({ data, mobile }) => {
+const AddAgent = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { avatar, description, tags, title, config, backgroundColor } = useDetailContext();
   const { styles } = useStyles();
   const [isLoading, setIsLoading] = useState(false);
   const createSession = useSessionStore((s) => s.createSession);
@@ -29,35 +30,35 @@ const AddAgent = memo<{ data: DiscoverAssistantItem; mobile?: boolean }>(({ data
   const router = useRouter();
   const { t } = useTranslation('discover');
 
+  const meta = {
+    avatar,
+    backgroundColor,
+    description,
+    tags,
+    title,
+  };
+
   const handleAddAgentAndConverse = async () => {
-    if (!data) return;
+    if (!config) return;
 
     setIsLoading(true);
-    const session = await createSession({ config: data.config, meta: data.meta });
+    const session = await createSession({
+      config,
+      meta,
+    });
     setIsLoading(false);
     message.success(t('assistants.addAgentSuccess'));
     router.push(SESSION_CHAT_URL(session, mobile));
   };
 
   const handleAddAgent = async () => {
-    if (!data) return;
+    if (!config) return;
     setIsLoading(true);
-    createSession({ config: data.config, meta: data.meta }, false);
+    createSession({ config, meta }, false);
     message.success(t('assistants.addAgentSuccess'));
     setIsLoading(false);
   };
 
-  if (mobile)
-    return (
-      <ActionIcon
-        active
-        icon={PlusIcon}
-        onClick={handleAddAgentAndConverse}
-        size={MOBILE_HEADER_ICON_SIZE}
-        title={t('assistants.addAgentAndConverse')}
-      />
-    );
-
   return (
     <Dropdown.Button
       className={styles.button}

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/ActionButton/index.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { OFFICIAL_URL } from '@/const/url';
+
+import ShareButton from '../../../../../features/ShareButton';
+import { useDetailContext } from '../../DetailProvider';
+import AddAgent from './AddAgent';
+
+const ActionButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { avatar, description, tags, title, identifier } = useDetailContext();
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <AddAgent mobile={mobile} />
+      <ShareButton
+        meta={{
+          avatar: avatar,
+          desc: description,
+          hashtags: tags,
+          title: title,
+          url: urlJoin(OFFICIAL_URL, '/discover/assistant', identifier as string),
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default ActionButton;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/Related/Item.tsx

@@ -0,0 +1,57 @@
+import { Avatar, Block, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { DiscoverAssistantItem } from '@/types/discover';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    desc: css`
+      flex: 1;
+      margin: 0 !important;
+      font-size: 14px !important;
+      color: ${token.colorTextSecondary};
+    `,
+    title: css`
+      margin: 0 !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+
+      &:hover {
+        color: ${token.colorLink};
+      }
+    `,
+  };
+});
+
+const RelatedItem = memo<DiscoverAssistantItem>(({ avatar, title, description, identifier }) => {
+  const { styles } = useStyles();
+  return (
+    <Block gap={12} horizontal key={identifier} padding={12} variant={'outlined'}>
+      <Avatar avatar={avatar} size={40} style={{ flex: 'none' }} />
+      <Flexbox
+        flex={1}
+        gap={6}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <Text as={'h2'} className={styles.title} ellipsis>
+          {title}
+        </Text>
+        <Text
+          as={'p'}
+          className={styles.desc}
+          ellipsis={{
+            rows: 2,
+          }}
+        >
+          {description}
+        </Text>
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default RelatedItem;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/Related/index.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+import Item from './Item';
+
+const Related = memo(() => {
+  const { t } = useTranslation('discover');
+  const { related, category } = useDetailContext();
+
+  return (
+    <Flexbox gap={16}>
+      <Title
+        more={t('assistants.details.related.more')}
+        moreLink={qs.stringifyUrl({
+          query: {
+            category,
+          },
+          url: '/discover/assistant',
+        })}
+      >
+        {t('assistants.details.related.listTitle')}
+      </Title>
+      <Flexbox gap={8}>
+        {related?.map((item, index) => {
+          const link = urlJoin('/discover/assistant', item.identifier);
+          return (
+            <Link href={link} key={index} style={{ color: 'inherit', overflow: 'hidden' }}>
+              <Item {...item} />
+            </Link>
+          );
+        })}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Related;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/Summary/index.tsx

@@ -0,0 +1,38 @@
+import { Collapse } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDetailContext } from '../../DetailProvider';
+
+const Summary = memo(() => {
+  const { description, summary } = useDetailContext();
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+  return (
+    <Collapse
+      defaultActiveKey={['summary']}
+      expandIconPosition={'end'}
+      items={[
+        {
+          children: (
+            <p
+              style={{
+                color: theme.colorTextSecondary,
+                margin: 0,
+              }}
+            >
+              {summary || description}
+            </p>
+          ),
+          key: 'summary',
+          label: t('assistants.details.summary.title'),
+        },
+      ]}
+      size={'small'}
+      variant={'borderless'}
+    />
+  );
+});
+
+export default Summary;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/TocList/index.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { AnchorProps } from 'antd';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToc } from '@/app/[variants]/(main)/discover/(detail)/features/Toc/useToc';
+import { useQuery } from '@/hooks/useQuery';
+import { AssistantNavKey } from '@/types/discover';
+
+import Title from '../../../../../../features/Title';
+import Toc from '../../../../../features/Toc';
+
+const TocList = memo(() => {
+  const { t } = useTranslation('discover');
+  const { toc = [] } = useToc();
+  const { activeTab = AssistantNavKey.Overview } = useQuery() as { activeTab: AssistantNavKey };
+  // const { deploymentOptions = [], tools = [], prompts = [] } = useDetailContext();
+  //
+  // const schemaToc: AnchorProps['items'] = useMemo(() => {
+  //   return [
+  //     {
+  //       href: `#tools`,
+  //       key: `tools`,
+  //       level: 2,
+  //       title: t('mcp.details.schema.tools.title'),
+  //     },
+  //     ...tools.map((item) => ({
+  //       href: `#tools-${item.name}`,
+  //       key: `tools-${item.name}`,
+  //       level: 3,
+  //       title: item.name,
+  //     })),
+  //     {
+  //       href: `#prompts`,
+  //       key: `prompts`,
+  //       level: 2,
+  //       title: t('mcp.details.schema.prompts.title'),
+  //     },
+  //     ...prompts.map((item) => ({
+  //       href: `#prompts-${item.name}`,
+  //       key: `prompts-${item.name}`,
+  //       level: 3,
+  //       title: item.name,
+  //     })),
+  //     {
+  //       href: `#resources`,
+  //       key: `resources`,
+  //       level: 2,
+  //       title: t('mcp.details.schema.resources.title'),
+  //     },
+  //   ].filter(Boolean) as AnchorProps['items'];
+  // }, [tools, prompts, t]);
+
+  const items: AnchorProps['items'] | undefined = useMemo(() => {
+    switch (activeTab) {
+      case AssistantNavKey.SystemRole: {
+        return toc;
+      }
+      default: {
+        return undefined;
+      }
+    }
+  }, [activeTab, toc]);
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <Flexbox gap={16}>
+      <Title>{t('assistants.details.sidebar.toc')}</Title>
+      <Toc items={items} />
+    </Flexbox>
+  );
+});
+
+export default TocList;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/features/Sidebar/index.tsx

@@ -0,0 +1,46 @@
+import { ScrollShadow } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useQuery } from '@/hooks/useQuery';
+import { AssistantNavKey } from '@/types/discover';
+
+import ActionButton from './ActionButton';
+import Related from './Related';
+import Summary from './Summary';
+import TocList from './TocList';
+
+const Sidebar = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { activeTab = AssistantNavKey.Overview } = useQuery() as { activeTab: AssistantNavKey };
+
+  if (mobile) {
+    return (
+      <Flexbox gap={32}>
+        <ActionButton mobile />
+      </Flexbox>
+    );
+  }
+
+  return (
+    <ScrollShadow
+      flex={'none'}
+      gap={32}
+      hideScrollBar
+      size={4}
+      style={{
+        maxHeight: 'calc(100vh - 76px)',
+        paddingBottom: 24,
+        position: 'sticky',
+        top: 0,
+      }}
+      width={360}
+    >
+      <ActionButton />
+      {activeTab !== AssistantNavKey.Overview && <Summary />}
+      {activeTab === AssistantNavKey.SystemRole && <TocList />}
+      {activeTab !== AssistantNavKey.Related && <Related />}
+    </ScrollShadow>
+  );
+});
+
+export default Sidebar;

package/src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/loading.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Nav from './features/Details/Nav';
+
+const Loading = memo(() => {
+  const { mobile } = useResponsive();
+  return (
+    <Flexbox gap={24}>
+      <Flexbox gap={12}>
+        <Flexbox align={'center'} gap={16} horizontal width={'100%'}>
+          <Skeleton.Avatar active size={mobile ? 48 : 64} />
+          <Skeleton.Button active style={{ height: 36, width: 200 }} />
+        </Flexbox>
+        <Skeleton.Button size={'small'} style={{ width: 200 }} />
+      </Flexbox>
+      <Nav />
+      <Flexbox
+        gap={48}
+        horizontal={!mobile}
+        style={mobile ? { flexDirection: 'column-reverse' } : undefined}
+      >
+        <Flexbox
+          flex={1}
+          gap={16}
+          style={{
+            overflow: 'hidden',
+          }}
+          width={'100%'}
+        >
+          <Skeleton paragraph={{ rows: 3 }} title={false} />
+          <Skeleton paragraph={{ rows: 8 }} title={false} />
+          <Skeleton paragraph={{ rows: 8 }} title={false} />
+        </Flexbox>
+        <Flexbox gap={16} width={360}>
+          <Skeleton paragraph={{ rows: 3 }} title={false} />
+          <Skeleton paragraph={{ rows: 4 }} title={false} />
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Loading;