@lobehub/chat 1.17.7 → 1.18.0

package/src/app/(main)/market/@detail/default.tsx

@@ -1,12 +0,0 @@
-import { isMobileDevice } from '@/utils/responsive';
-
-import AgentDetailContent from './features/AgentDetailContent';
-
-const Detail = () => {
-  const mobile = isMobileDevice();
-  return <AgentDetailContent mobile={mobile} />;
-};
-
-Detail.displayName = 'AgentDetail';
-
-export default Detail;

package/src/app/(main)/market/@detail/features/AgentDetailContent.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { Markdown, TabsNav } from '@lobehub/ui';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import Banner from '@/app/(main)/market/@detail/features/Banner';
-import { useMarketStore } from '@/store/market';
-
-import Comment from './Comment';
-import Header from './Header';
-import Loading from './Loading';
-import TokenTag from './TokenTag';
-
-enum InfoTabs {
-  comment = 'comment',
-  prompt = 'prompt',
-}
-
-const AgentDetailContent = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const [useFetchAgent, currentIdentifier] = useMarketStore((s) => [
-    s.useFetchAgent,
-    s.currentIdentifier,
-  ]);
-  const { t } = useTranslation('market');
-  const [tab, setTab] = useState<string>(InfoTabs.prompt);
-  const { data, isLoading } = useFetchAgent(currentIdentifier);
-
-  if (isLoading || !data?.meta) return <Loading />;
-
-  const { config, meta, identifier } = data;
-  const { systemRole } = config;
-
-  return (
-    <>
-      <Banner avatar={meta.avatar} backgroundColor={meta.backgroundColor} mobile={mobile} />
-      <Header />
-      <Flexbox align={'center'}>
-        <TabsNav
-          activeKey={tab}
-          items={[
-            {
-              key: InfoTabs.prompt,
-              label: (
-                <Flexbox align={'center'} gap={8} horizontal>
-                  {t('sidebar.prompt')} <TokenTag systemRole={systemRole} />
-                </Flexbox>
-              ),
-            },
-            {
-              key: InfoTabs.comment,
-              label: t('sidebar.comment'),
-            },
-          ]}
-          onChange={setTab}
-          style={{ paddingTop: 8 }}
-          variant={'compact'}
-        />
-      </Flexbox>
-      <Flexbox style={{ padding: 16 }}>
-        {tab === InfoTabs.prompt && (
-          <Markdown fullFeaturedCodeBlock variant={'chat'}>
-            {systemRole}
-          </Markdown>
-        )}
-        {tab === InfoTabs.comment && <Comment identifier={identifier} />}
-      </Flexbox>
-    </>
-  );
-});
-
-export default AgentDetailContent;

package/src/app/(main)/market/@detail/features/Banner.tsx

@@ -1,46 +0,0 @@
-import { Avatar } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { useTheme } from 'antd-style';
-import { memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import AgentCardBanner from '../../features/AgentCard/AgentCardBanner';
-
-const Banner = memo<{
-  avatar?: string;
-  backgroundColor?: string;
-  loading?: boolean;
-  mobile?: boolean;
-}>(({ avatar, backgroundColor, mobile, loading }) => {
-  const theme = useTheme();
-
-  return (
-    <Flexbox align={'center'}>
-      <AgentCardBanner
-        avatar={loading ? undefined : avatar}
-        size={800}
-        style={{ height: 120, marginBottom: -60 }}
-      />
-      <Center
-        flex={'none'}
-        height={120}
-        style={{
-          backgroundColor:
-            backgroundColor || mobile ? theme.colorBgElevated : theme.colorBgContainer,
-          borderRadius: '50%',
-          overflow: 'hidden',
-          zIndex: 2,
-        }}
-        width={120}
-      >
-        {loading ? (
-          <Skeleton.Avatar active size={100} />
-        ) : (
-          <Avatar animation avatar={avatar} shape={'circle'} size={100} />
-        )}
-      </Center>
-    </Flexbox>
-  );
-});
-
-export default Banner;

package/src/app/(main)/market/@detail/features/Comment.tsx

@@ -1,16 +0,0 @@
-import { Giscus } from '@lobehub/ui';
-import { memo } from 'react';
-
-const Comment = memo<{ identifier: string }>(({ identifier }) => (
-  <Giscus
-    category="General"
-    categoryId="DIC_kwDOKON5YM4CZNRJ"
-    id="lobehub"
-    mapping="specific"
-    repo="lobehub/lobe-chat-agents"
-    repoId="R_kgDOKON5YA"
-    term={identifier}
-  />
-));
-
-export default Comment;

package/src/app/(main)/market/@detail/features/Header.tsx

@@ -1,81 +0,0 @@
-import { Tag } from '@lobehub/ui';
-import { App, Button, Typography } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { startCase } from 'lodash-es';
-import { useRouter } from 'next/navigation';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import { SESSION_CHAT_URL } from '@/const/url';
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
-import { useServerConfigStore } from '@/store/serverConfig';
-import { useSessionStore } from '@/store/session';
-
-import { useStyles } from './style';
-
-const { Link } = Typography;
-
-const Header = memo(() => {
-  const setSearchKeywords = useMarketStore((s) => s.setSearchKeywords);
-  const router = useRouter();
-  const { t } = useTranslation('market');
-  const { styles } = useStyles();
-  const createSession = useSessionStore((s) => s.createSession);
-  const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem, isEqual);
-  const [isLoading, setIsLoading] = useState(false);
-  const { message } = App.useApp();
-
-  const { meta, createAt, author, homepage, config } = agentItem;
-  const { title, description, tags } = meta;
-
-  const isMobile = useServerConfigStore((s) => s.isMobile);
-
-  const handleAddAgentAndConverse = async () => {
-    if (!agentItem) return;
-
-    setIsLoading(true);
-    const session = await createSession({ config, meta });
-    setIsLoading(false);
-    message.success(t('addAgentSuccess'));
-    router.push(SESSION_CHAT_URL(session, isMobile));
-  };
-
-  const handleAddAgent = async () => {
-    if (!agentItem) return;
-    setIsLoading(true);
-    createSession({ config, meta }, false);
-    message.success(t('addAgentSuccess'));
-    setIsLoading(false);
-  };
-
-  return (
-    <Center className={styles.container} gap={16}>
-      <h2 className={styles.title}>{title}</h2>
-      <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-        {(tags as string[]).map((tag: string, index) => (
-          <Tag key={index} onClick={() => setSearchKeywords(tag)} style={{ margin: 0 }}>
-            {startCase(tag).trim()}
-          </Tag>
-        ))}
-      </Center>
-      <div className={styles.desc}>{description}</div>
-      <Button block loading={isLoading} onClick={handleAddAgentAndConverse} type={'primary'}>
-        {t('addAgentAndConverse')}
-      </Button>
-      <Button block loading={isLoading} onClick={handleAddAgent}>
-        {t('addAgent')}
-      </Button>
-      <Flexbox align={'center'} gap={12} horizontal>
-        <Link aria-label={author} className={styles.author} href={homepage} target={'_blank'}>
-          @{author}
-        </Link>
-        <time className={styles.time} dateTime={new Date(createAt).toISOString()}>
-          {createAt}
-        </time>
-      </Flexbox>
-    </Center>
-  );
-});
-
-export default Header;

package/src/app/(main)/market/@detail/features/Loading.tsx

@@ -1,63 +0,0 @@
-import { Skeleton } from 'antd';
-import { memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import Banner from './Banner';
-import { useStyles } from './style';
-
-const Loading = memo(() => {
-  const { styles } = useStyles();
-  return (
-    <>
-      <Banner loading />
-      <Center className={styles.container} gap={16}>
-        <Skeleton
-          active
-          className={styles.loading}
-          paragraph={{
-            rows: 2,
-            style: {
-              alignItems: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-            },
-            width: ['60%', '80%'],
-          }}
-          title={{
-            style: {
-              alignSelf: 'center',
-              marginBottom: 0,
-            },
-            width: '50%',
-          }}
-        />
-        <Skeleton.Button active block />
-        <Skeleton.Button active block />
-        <Skeleton
-          active
-          className={styles.loading}
-          paragraph={{
-            rows: 1,
-            style: {
-              alignItems: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              marginBottom: 0,
-            },
-            width: ['20%'],
-          }}
-          title={false}
-        />
-      </Center>
-      <Center gap={16} style={{ padding: 16 }}>
-        <Flexbox gap={16} horizontal>
-          <Skeleton.Button active size={'small'} />
-          <Skeleton.Button active size={'small'} />
-        </Flexbox>
-        <Skeleton active paragraph={{ rows: 6 }} title={false} />
-      </Center>
-    </>
-  );
-});
-
-export default Loading;

package/src/app/(main)/market/@detail/features/TokenTag.tsx

@@ -1,27 +0,0 @@
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-
-import { useTokenCount } from '@/hooks/useTokenCount';
-
-const useStyles = createStyles(
-  ({ css, token }) => css`
-    padding-block: 2px;
-    padding-inline: 5px;
-
-    font-size: 12px;
-    line-height: 1;
-    color: ${token.colorBgLayout};
-
-    background: ${token.colorText};
-    border-radius: 12px;
-  `,
-);
-
-const TokenTag = memo<{ systemRole: string }>(({ systemRole }) => {
-  const { styles } = useStyles();
-  const value = useTokenCount(systemRole);
-
-  return <div className={styles}>{value}</div>;
-});
-
-export default TokenTag;

package/src/app/(main)/market/@detail/features/style.ts

@@ -1,32 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  author: css`
-    font-size: 12px;
-  `,
-  container: css`
-    position: relative;
-    padding-block: 16px 24px;
-    padding-inline: 16px;
-    border-block-end: 1px solid ${token.colorBorderSecondary};
-  `,
-  desc: css`
-    color: ${token.colorTextSecondary};
-    text-align: center;
-  `,
-  loading: css`
-    .${prefixCls}-skeleton-content {
-      display: flex;
-      flex-direction: column;
-    }
-  `,
-  time: css`
-    font-size: 12px;
-    color: ${token.colorTextDescription};
-  `,
-  title: css`
-    margin-block-end: 0;
-    font-weight: bold;
-    text-align: center;
-  `,
-}));

package/src/app/(main)/market/_layout/Desktop/DetailSidebar.tsx

@@ -1,84 +0,0 @@
-'use client';
-
-import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
-import { createStyles, useResponsive } from 'antd-style';
-import { PropsWithChildren, memo, useCallback, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import { MARKET_SIDEBAR_WIDTH } from '@/const/layoutTokens';
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
-
-const useStyles = createStyles(({ css, token, stylish }) => ({
-  content: css`
-    display: flex;
-    flex-direction: column;
-    height: 100% !important;
-  `,
-  drawer: css`
-    background: ${token.colorBgContainer};
-  `,
-  header: css`
-    border-block-end: 1px solid ${token.colorBorder};
-  `,
-  noScrollbar: stylish.noScrollbar,
-}));
-
-const DetailSidebar = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
-  const { md = true } = useResponsive();
-  const [tempId, setTempId] = useState<string>('');
-  const [showAgentSidebar, deactivateAgent, activateAgent] = useMarketStore((s) => [
-    agentMarketSelectors.showSideBar(s),
-    s.deactivateAgent,
-    s.activateAgent,
-  ]);
-
-  const handleExpandChange = useCallback(
-    (show: boolean) => {
-      if (!show) {
-        setTempId(useMarketStore.getState().currentIdentifier);
-        deactivateAgent();
-      } else if (tempId) {
-        activateAgent(tempId);
-      }
-    },
-    [deactivateAgent, activateAgent, tempId],
-  );
-
-  const minWidth = md ? MARKET_SIDEBAR_WIDTH : 350;
-
-  return (
-    <DraggablePanel
-      className={styles.drawer}
-      classNames={{
-        content: styles.content,
-      }}
-      expand={showAgentSidebar}
-      maxWidth={'80vw' as any}
-      minWidth={minWidth}
-      mode={md ? 'fixed' : 'float'}
-      onExpandChange={handleExpandChange}
-      placement={'right'}
-      showHandlerWideArea={false}
-    >
-      <DraggablePanelContainer
-        style={{
-          flex: 'none',
-          height: '100%',
-          minWidth: minWidth,
-        }}
-      >
-        {md && <SafeSpacing />}
-        <DraggablePanelBody
-          className={styles.noScrollbar}
-          style={{ padding: 0, position: 'relative' }}
-        >
-          <Flexbox>{children}</Flexbox>
-        </DraggablePanelBody>
-      </DraggablePanelContainer>
-    </DraggablePanel>
-  );
-});
-
-export default DetailSidebar;

package/src/app/(main)/market/_layout/Desktop/Header.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import { ChatHeader } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-
-import { ProductLogo } from '@/components/Branding';
-
-import ShareAgentButton from '../../features/ShareAgentButton';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  logo: css`
-    color: ${token.colorText};
-    fill: ${token.colorText};
-  `,
-}));
-
-const Header = memo(() => {
-  const { styles } = useStyles();
-
-  return (
-    <ChatHeader
-      left={<ProductLogo className={styles.logo} extra={'Discover'} size={36} type={'text'} />}
-      right={<ShareAgentButton />}
-    />
-  );
-});
-
-export default Header;

package/src/app/(main)/market/_layout/Desktop/Hero.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { GridBackground } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { Center } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, responsive }) => ({
-  background: css`
-    width: 80%;
-    margin-block: -60px -20px;
-    margin-inline: 0;
-
-    ${responsive.md} {
-      display: none;
-    }
-  `,
-  title: css`
-    z-index: 2;
-
-    margin-block-start: 24px;
-
-    font-size: min(56px, 5vw);
-    font-weight: 800;
-    line-height: 1.2;
-    text-align: center;
-  `,
-}));
-
-const Hero = memo(() => {
-  const { theme, styles } = useStyles();
-  return (
-    <Center>
-      <h1 className={styles.title}>Find & Use The Best Assistants</h1>
-      <GridBackground animation className={styles.background} colorFront={theme.colorText} random />
-    </Center>
-  );
-});
-
-export default Hero;

package/src/app/(main)/market/_layout/Desktop/index.tsx

@@ -1,46 +0,0 @@
-import { Flexbox } from 'react-layout-kit';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import { MAX_WIDTH } from '@/const/layoutTokens';
-
-import { LayoutProps } from '../type';
-import DetailSidebar from './DetailSidebar';
-import Header from './Header';
-import Hero from './Hero';
-
-const Layout = ({ children, detail }: LayoutProps) => {
-  return (
-    <>
-      <Flexbox
-        height={'100%'}
-        id={'lobe-market-container'}
-        style={{ position: 'relative' }}
-        width={'100%'}
-      >
-        <Header />
-        <Flexbox height={'100%'} horizontal style={{ position: 'relative' }} width={'100%'}>
-          <Flexbox
-            align={'center'}
-            flex={1}
-            padding={16}
-            style={{ overflowX: 'hidden', overflowY: 'scroll', position: 'relative' }}
-          >
-            <SafeSpacing />
-            <Flexbox gap={16} style={{ maxWidth: MAX_WIDTH, position: 'relative', width: '100%' }}>
-              <Hero />
-              {children}
-            </Flexbox>
-          </Flexbox>
-          <DetailSidebar>{detail}</DetailSidebar>
-        </Flexbox>
-      </Flexbox>
-      {/* ↓ cloud slot ↓ */}
-
-      {/* ↑ cloud slot ↑ */}
-    </>
-  );
-};
-
-Layout.displayName = 'DesktopMarketLayout';
-
-export default Layout;

package/src/app/(main)/market/_layout/Mobile/DetailModal.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { Modal } from '@lobehub/ui';
-import { PropsWithChildren, memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
-
-const DetailModal = memo<PropsWithChildren>(({ children }) => {
-  const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
-    agentMarketSelectors.showSideBar(s),
-    s.deactivateAgent,
-  ]);
-
-  const { t } = useTranslation('market');
-
-  return (
-    <Modal
-      allowFullscreen
-      onCancel={() => {
-        deactivateAgent();
-      }}
-      open={showAgentSidebar}
-      styles={{ body: { padding: 0 } }}
-      title={t('sidebar.title')}
-    >
-      {children}
-    </Modal>
-  );
-});
-
-export default DetailModal;

package/src/app/(main)/market/_layout/Mobile/Header.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import { MobileNavBar } from '@lobehub/ui';
-import { memo } from 'react';
-
-import { mobileHeaderSticky } from '@/styles/mobileHeader';
-
-import ShareAgentButton from '../../features/ShareAgentButton';
-
-const Header = memo(() => {
-  return (
-    <MobileNavBar
-      center={<div style={{ fontSize: 20, fontWeight: 900 }}>Discover</div>}
-      right={<ShareAgentButton mobile />}
-      style={mobileHeaderSticky}
-    />
-  );
-});
-
-export default Header;

package/src/app/(main)/market/_layout/Mobile/index.tsx

@@ -1,25 +0,0 @@
-import MobileContentLayout from '@/components/server/MobileNavLayout';
-
-import { LayoutProps } from '../type';
-import DetailModal from './DetailModal';
-import Header from './Header';
-
-const Layout = ({ children, detail }: LayoutProps) => {
-  return (
-    <>
-      <MobileContentLayout
-        gap={16}
-        header={<Header />}
-        style={{ paddingInline: 16, paddingTop: 8 }}
-        withNav
-      >
-        {children}
-      </MobileContentLayout>
-      <DetailModal>{detail}</DetailModal>
-    </>
-  );
-};
-
-Layout.displayName = 'MobileMarketLayout';
-
-export default Layout;

package/src/app/(main)/market/_layout/type.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface LayoutProps {
-  children: ReactNode;
-  detail: ReactNode;
-}