@lobehub/chat 1.96.19 → 1.97.0

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

@@ -0,0 +1,68 @@
+import { Avatar, Block, Text } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDiscoverStore } from '@/store/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 PluginItem = memo<{ identifier: string }>(({ identifier }) => {
+  const usePluginDetail = useDiscoverStore((s) => s.usePluginDetail);
+  const { data, isLoading } = usePluginDetail({ identifier, withManifest: false });
+  const { styles } = useStyles();
+
+  if (isLoading || !data)
+    return (
+      <Block gap={12} horizontal key={identifier} padding={12} variant={'outlined'}>
+        <Skeleton paragraph={{ rows: 1 }} title={false} />
+      </Block>
+    );
+
+  return (
+    <Block gap={12} horizontal key={identifier} padding={12} variant={'outlined'}>
+      <Avatar avatar={data.avatar} size={40} style={{ flex: 'none' }} />
+      <Flexbox
+        flex={1}
+        gap={6}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <Text as={'h2'} className={styles.title} ellipsis>
+          {data.title}
+        </Text>
+        <Text
+          as={'p'}
+          className={styles.desc}
+          ellipsis={{
+            rows: 2,
+          }}
+        >
+          {data.description}
+        </Text>
+      </Flexbox>
+    </Block>
+  );
+});
+
+export default PluginItem;

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

@@ -0,0 +1,32 @@
+import { Block } from '@lobehub/ui';
+import { Empty } from 'antd';
+import Link from 'next/link';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { useDetailContext } from '../../DetailProvider';
+import PluginItem from './PluginItem';
+
+const Plugin = memo(() => {
+  const { config } = useDetailContext();
+
+  if (!config?.plugins?.length)
+    return (
+      <Block variant={'outlined'}>
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      </Block>
+    );
+
+  return (
+    <Flexbox gap={8}>
+      {config?.plugins.map((item) => (
+        <Link href={urlJoin('/discover/plugin', item)} key={item}>
+          <PluginItem identifier={item} />
+        </Link>
+      ))}
+    </Flexbox>
+  );
+});
+
+export default Plugin;

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

@@ -0,0 +1,37 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useDetailContext } from '../../DetailProvider';
+import Block from './Block';
+import Knowledge from './Knowledge';
+import Plugins from './Plugins';
+
+const Capabilities = memo(() => {
+  const { t } = useTranslation('discover');
+  const { pluginCount, knowledgeCount } = useDetailContext();
+
+  return (
+    <Flexbox gap={64}>
+      <Block
+        count={pluginCount || 0}
+        desc={t('assistants.details.capabilities.plugin.desc')}
+        id={'tools'}
+        title={t('assistants.details.capabilities.plugin.title')}
+      >
+        <Plugins />
+      </Block>
+
+      <Block
+        count={knowledgeCount || 0}
+        desc={t('assistants.details.capabilities.knowledge.desc')}
+        id={'prompts'}
+        title={t('assistants.details.capabilities.knowledge.title')}
+      >
+        <Knowledge />
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default Capabilities;

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

@@ -0,0 +1,121 @@
+'use client';
+
+import { Icon, Tabs, Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { BookOpenIcon, LayersIcon, ListIcon, SquareUserIcon } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
+
+import { SOCIAL_URL } from '@/const/branding';
+import { AssistantNavKey, McpNavKey } from '@/types/discover';
+
+import { useDetailContext } from '../DetailProvider';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    link: css`
+      color: ${token.colorTextDescription};
+
+      &:hover {
+        color: ${token.colorInfo};
+      }
+    `,
+    nav: css`
+      border-block-end: 1px solid ${token.colorBorder};
+    `,
+  };
+});
+
+const Nav = memo<{
+  activeTab?: AssistantNavKey;
+  mobile?: boolean;
+  setActiveTab?: (tab: AssistantNavKey) => void;
+}>(({ mobile, setActiveTab, activeTab = AssistantNavKey.Overview }) => {
+  const { t } = useTranslation('discover');
+  const { pluginCount, knowledgeCount, identifier } = useDetailContext();
+  const { styles } = useStyles();
+
+  const capabilitiesCount = Number(pluginCount) + Number(knowledgeCount);
+
+  const nav = (
+    <Tabs
+      activeKey={activeTab}
+      compact={mobile}
+      items={[
+        {
+          icon: <Icon icon={BookOpenIcon} size={16} />,
+          key: AssistantNavKey.Overview,
+          label: t('assistants.details.overview.title'),
+        },
+        {
+          icon: <Icon icon={SquareUserIcon} size={16} />,
+          key: AssistantNavKey.SystemRole,
+          label: t('assistants.details.systemRole.title'),
+        },
+        {
+          icon: <Icon icon={LayersIcon} size={16} />,
+          key: AssistantNavKey.Capabilities,
+          label:
+            capabilitiesCount > 1 ? (
+              <Flexbox
+                align={'center'}
+                gap={6}
+                horizontal
+                style={{
+                  display: 'inline-flex',
+                }}
+              >
+                {t('assistants.details.capabilities.title')}
+                <Tag>{capabilitiesCount}</Tag>
+              </Flexbox>
+            ) : (
+              t('assistants.details.capabilities.title')
+            ),
+        },
+        {
+          icon: <Icon icon={ListIcon} size={16} />,
+          key: McpNavKey.Related,
+          label: t('assistants.details.related.title'),
+        },
+      ]}
+      onChange={(key) => setActiveTab?.(key as AssistantNavKey)}
+    />
+  );
+
+  return mobile ? (
+    nav
+  ) : (
+    <Flexbox align={'center'} className={styles.nav} horizontal justify={'space-between'}>
+      {nav}
+      <Flexbox gap={12} horizontal>
+        <Link className={styles.link} href={SOCIAL_URL.discord} target={'_blank'}>
+          {t('mcp.details.nav.needHelp')}
+        </Link>
+        {identifier && (
+          <Link
+            className={styles.link}
+            href={urlJoin(
+              'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
+              identifier,
+            )}
+            target={'_blank'}
+          >
+            {t('mcp.details.nav.viewSourceCode')}
+          </Link>
+        )}
+        <Link
+          className={styles.link}
+          href={'https://github.com/lobehub/lobe-chat-agents/issues/new/choose'}
+          target={'_blank'}
+        >
+          {t('mcp.details.nav.reportIssue')}
+        </Link>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Nav;

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    tag: css`
+      margin: 0;
+      padding-block: 4px;
+      padding-inline: 12px;
+      border-radius: 16px;
+
+      color: ${token.colorTextSecondary};
+    `,
+  };
+});
+
+const TagList = memo<{ tags: string[] }>(({ tags }) => {
+  const { styles } = useStyles();
+  const showTags = Boolean(tags?.length && tags?.length > 0);
+  return (
+    showTags && (
+      <Flexbox gap={8} horizontal wrap={'wrap'}>
+        {tags.map((tag) => (
+          <Link
+            href={qs.stringifyUrl({
+              query: {
+                q: tag,
+              },
+              url: '/discover/assistant',
+            })}
+            key={tag}
+          >
+            <Tag className={styles.tag}>{tag}</Tag>
+          </Link>
+        ))}
+      </Flexbox>
+    )
+  );
+});
+
+export default TagList;

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

@@ -0,0 +1,96 @@
+import { Block, Collapse } from '@lobehub/ui';
+import { ChatList } from '@lobehub/ui/chat';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { BRANDING_NAME } from '@/const/branding';
+import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
+import { useUserStore } from '@/store/user';
+import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
+
+import Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+const Overview = memo(() => {
+  const [userAvatar, username] = useUserStore((s) => [
+    userProfileSelectors.userAvatar(s),
+    userProfileSelectors.username(s),
+  ]);
+
+  const isSignedIn = useUserStore(authSelectors.isLogin);
+  const { t } = useTranslation('discover');
+  const theme = useTheme();
+  const {
+    examples = [],
+    description,
+    summary,
+    avatar,
+    title,
+    backgroundColor,
+    config,
+  } = useDetailContext();
+
+  const data: any = [
+    {
+      content: config?.openingMessage,
+      role: 'assistant',
+    },
+    ...examples,
+  ].map((item, index) => {
+    let meta = {
+      avatar,
+      backgroundColor: backgroundColor || 'transparent',
+      title,
+    };
+    if (item.role === 'user') {
+      meta = {
+        avatar: isSignedIn && !!userAvatar ? userAvatar : DEFAULT_USER_AVATAR_URL,
+        backgroundColor: 'transparent',
+        title: isSignedIn && !!username ? username : BRANDING_NAME,
+      };
+    }
+
+    return {
+      extra: {},
+      id: index,
+      ...item,
+      meta,
+    };
+  });
+
+  return (
+    <Flexbox gap={16}>
+      <Collapse
+        defaultActiveKey={['summary']}
+        expandIconPosition={'end'}
+        items={[
+          {
+            children: summary || description,
+            key: 'summary',
+            label: t('assistants.details.summary.title'),
+          },
+        ]}
+        variant={'outlined'}
+      />
+      <Title>{t('assistants.details.overview.example')}</Title>
+      <Block
+        style={{
+          background: theme.colorBgContainerSecondary,
+        }}
+        variant={'outlined'}
+      >
+        <ChatList
+          data={data}
+          renderMessages={{
+            default: ({ id, editableContent }) => <div id={id}>{editableContent}</div>,
+          }}
+          style={{ width: '100%' }}
+        />
+      </Block>
+    </Flexbox>
+  );
+});
+
+export default Overview;

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

@@ -0,0 +1,31 @@
+import qs from 'query-string';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import McpList from '../../../../../../(list)/assistant/features/List';
+import Title from '../../../../../../features/Title';
+import { useDetailContext } from '../../DetailProvider';
+
+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>
+      <McpList data={related} />
+    </Flexbox>
+  );
+});
+
+export default Related;

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { Tag } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Link from 'next/link';
+import qs from 'query-string';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    tag: css`
+      margin: 0;
+      padding-block: 4px;
+      padding-inline: 12px;
+      border-radius: 16px;
+
+      color: ${token.colorTextSecondary};
+    `,
+  };
+});
+
+const TagList = memo<{ tags: string[] }>(({ tags }) => {
+  const { styles } = useStyles();
+  const showTags = Boolean(tags?.length && tags?.length > 0);
+  return (
+    showTags && (
+      <Flexbox gap={8} horizontal wrap={'wrap'}>
+        {tags.map((tag) => (
+          <Link
+            href={qs.stringifyUrl({
+              query: {
+                q: tag,
+              },
+              url: '/discover/assistant',
+            })}
+            key={tag}
+          >
+            <Tag className={styles.tag}>{tag}</Tag>
+          </Link>
+        ))}
+      </Flexbox>
+    )
+  );
+});
+
+export default TagList;

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

@@ -0,0 +1,54 @@
+import { Block, Icon, Tag } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { MessageCircleHeartIcon, MessageCircleQuestionIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import TokenTag from '../../../../../../(list)/assistant/features/List/TokenTag';
+import Title from '../../../../../../features/Title';
+import MarkdownRender from '../../../../../features/MakedownRender';
+import { useDetailContext } from '../../DetailProvider';
+import TagList from './TagList';
+
+const Overview = memo(() => {
+  const { t } = useTranslation('discover');
+  const { tokenUsage, tags = [], config } = useDetailContext();
+  const theme = useTheme();
+  return (
+    <Flexbox gap={16}>
+      <Title tag={tokenUsage && <TokenTag tokenUsage={tokenUsage} />}>
+        {t('assistants.details.systemRole.title')}
+      </Title>
+      <Block gap={16} padding={16} variant={'outlined'}>
+        {<MarkdownRender>{config?.systemRole.trimEnd()}</MarkdownRender>}
+        <TagList tags={tags} />
+      </Block>
+      <Title>{t('assistants.details.systemRole.openingMessage')}</Title>
+      <Block align={'flex-start'} gap={12} horizontal padding={16} variant={'outlined'}>
+        <Icon
+          color={theme.colorError}
+          icon={MessageCircleHeartIcon}
+          size={20}
+          style={{
+            marginTop: 4,
+          }}
+        />
+        <MarkdownRender>{config?.openingMessage?.trimEnd()}</MarkdownRender>
+      </Block>
+      <Title tag={<Tag>{config?.openingQuestions?.length}</Tag>}>
+        {t('assistants.details.systemRole.openingQuestions')}
+      </Title>
+      <Flexbox gap={8}>
+        {config?.openingQuestions?.map((item, key) => (
+          <Block gap={12} horizontal key={key} padding={16} variant={'outlined'}>
+            <Icon color={theme.colorWarning} icon={MessageCircleQuestionIcon} size={20} />
+            <MarkdownRender>{item}</MarkdownRender>
+          </Block>
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Overview;

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

@@ -0,0 +1,49 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { useQueryState } from 'nuqs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { AssistantNavKey } from '@/types/discover';
+
+import Sidebar from '../Sidebar';
+import Capabilities from './Capabilities';
+import Nav from './Nav';
+import Overview from './Overview';
+import Related from './Related';
+import SystemRole from './SystemRole';
+
+const Details = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
+  const { mobile = isMobile } = useResponsive();
+  const [activeTab, setActiveTab] = useQueryState('activeTab', {
+    clearOnDefault: true,
+    defaultValue: AssistantNavKey.Overview,
+  });
+
+  return (
+    <Flexbox gap={24}>
+      <Nav activeTab={activeTab as AssistantNavKey} mobile={mobile} setActiveTab={setActiveTab} />
+      <Flexbox
+        gap={48}
+        horizontal={!mobile}
+        style={mobile ? { flexDirection: 'column-reverse' } : undefined}
+      >
+        <Flexbox
+          style={{
+            overflow: 'hidden',
+          }}
+          width={'100%'}
+        >
+          {activeTab === AssistantNavKey.Overview && <Overview />}
+          {activeTab === AssistantNavKey.SystemRole && <SystemRole />}
+          {activeTab === AssistantNavKey.Capabilities && <Capabilities />}
+          {activeTab === AssistantNavKey.Related && <Related />}
+        </Flexbox>
+        <Sidebar mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Details;