@lobehub/chat 0.74.0 → 0.75.0

package/src/pages/market/features/Header/Desktop.tsx

@@ -1,9 +1,13 @@
-import { ChatHeader, Logo, SearchBar } from '@lobehub/ui';
+import { ChatHeader, Icon, Logo } from '@lobehub/ui';
+import { Button } from 'antd';
 import { createStyles } from 'antd-style';
+import { Bot } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { AGENTS_INDEX_GITHUB } from '@/const/url';
+
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`
     color: ${token.colorText};
@@ -13,16 +17,23 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const Header = memo(() => {
   const { styles } = useStyles();
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('market');
 
   return (
     <ChatHeader
       left={
         <Link href={'/'}>
-          <Logo className={styles.logo} extra={t('tab.market')} size={36} type={'text'} />
+          <Logo className={styles.logo} extra={'Discover'} size={36} type={'text'} />
         </Link>
       }
-      right={<SearchBar allowClear spotlight type={'ghost'} />}
+      right={
+        <Button
+          icon={<Icon icon={Bot} />}
+          onClick={() => window.open(AGENTS_INDEX_GITHUB, '__blank')}
+        >
+          {t('submitAgent')}
+        </Button>
+      }
     />
   );
 });

package/src/pages/market/features/Header/Mobile.tsx

@@ -1,39 +1,22 @@
 import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { MessageSquarePlus, Settings2 } from 'lucide-react';
+import { Settings2 } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useSessionStore } from '@/store/session';
-
-export const useStyles = createStyles(({ css, token }) => ({
-  logo: css`
-    fill: ${token.colorText};
-  `,
-  top: css`
-    position: sticky;
-    top: 0;
-  `,
-}));
 
 const Header = memo(() => {
-  const [createSession] = useSessionStore((s) => [s.createSession]);
-
   return (
     <MobileNavBar
       center={<Logo type={'text'} />}
       left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
       right={
-        <>
-          <ActionIcon icon={MessageSquarePlus} onClick={createSession} />
-          <ActionIcon
-            icon={Settings2}
-            onClick={() => {
-              Router.push({ pathname: `/settings` });
-            }}
-          />
-        </>
+        <ActionIcon
+          icon={Settings2}
+          onClick={() => {
+            Router.push({ pathname: `/settings` });
+          }}
+        />
       }
     />
   );

package/src/pages/market/features/SideBar/AgentInfo/Comment.tsx

@@ -0,0 +1,16 @@
+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/pages/market/features/SideBar/AgentInfo/Header.tsx

@@ -0,0 +1,68 @@
+import { Avatar, Tag } from '@lobehub/ui';
+import { Button, Typography } from 'antd';
+import { startCase } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import { useSessionStore } from '@/store/session';
+
+import { useStyles } from './style';
+
+const { Link } = Typography;
+
+const Header = memo(() => {
+  const { t } = useTranslation('market');
+  const { styles, theme } = useStyles();
+
+  const createSession = useSessionStore((s) => s.createSession);
+  const switchSideBar = useGlobalStore((s) => s.switchSideBar);
+  const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);
+
+  const { meta, createAt, author, homepage, config } = agentItem;
+  const { avatar, title, description, tags, backgroundColor } = meta;
+
+  return (
+    <Center className={styles.container} gap={16}>
+      <Avatar
+        avatar={avatar}
+        background={backgroundColor || theme.colorFillTertiary}
+        className={styles.avatar}
+        size={100}
+      />
+      <div className={styles.title}>{title}</div>
+      <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
+        {(tags as string[]).map((tag: string, index) => (
+          <Tag
+            key={index}
+            onClick={() => useMarketStore.setState({ searchKeywords: tag })}
+            style={{ margin: 0 }}
+          >
+            {startCase(tag).trim()}
+          </Tag>
+        ))}
+      </Center>
+      <div className={styles.desc}>{description}</div>
+      <Link className={styles.author} href={homepage} target={'_blank'}>
+        @{author}
+      </Link>
+      <Button
+        block
+        onClick={() => {
+          if (!agentItem) return;
+
+          createSession({ config, meta });
+          switchSideBar('chat');
+        }}
+        type={'primary'}
+      >
+        {t('addAgent')}
+      </Button>
+      <div className={styles.date}>{createAt}</div>
+    </Center>
+  );
+});
+
+export default Header;

package/src/pages/market/features/SideBar/AgentInfo/Loading.tsx

@@ -0,0 +1,61 @@
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+
+const Loading = memo(() => {
+  const { styles } = useStyles();
+  return (
+    <>
+      <Center className={styles.container} gap={16} style={{ paddingTop: 80 }}>
+        <Skeleton.Avatar active shape={'circle'} size={100} />
+        <Skeleton
+          active
+          className={styles.loading}
+          paragraph={{
+            rows: 3,
+            style: {
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+            },
+            width: ['60%', '80%', '20%'],
+          }}
+          title={{
+            style: {
+              alignSelf: 'center',
+              marginBottom: 0,
+            },
+            width: '50%',
+          }}
+        />
+        <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/pages/market/features/SideBar/AgentInfo/TokenTag.tsx

@@ -0,0 +1,25 @@
+import { createStyles } from 'antd-style';
+import { encode } from 'gpt-tokenizer';
+import { memo, useMemo } from 'react';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    padding: 2px 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 = useMemo(() => encode(systemRole).length, [systemRole]);
+
+  return <div className={styles}>{value}</div>;
+});
+
+export default TokenTag;

package/src/pages/market/features/SideBar/AgentInfo/index.tsx

@@ -0,0 +1,68 @@
+import { Markdown, TabsNav } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import TokenTag from '@/pages/market/features/SideBar/AgentInfo/TokenTag';
+import { useMarketStore } from '@/store/market';
+
+import AgentCardBanner from '../../AgentCard/AgentCardBanner';
+import Comment from './Comment';
+import Header from './Header';
+import Loading from './Loading';
+import { useStyles } from './style';
+
+enum InfoTabs {
+  comment = 'comment',
+  prompt = 'prompt',
+}
+
+const AgentModalInner = memo(() => {
+  const [useFetchAgent, currentIdentifier] = useMarketStore((s) => [
+    s.useFetchAgent,
+    s.currentIdentifier,
+  ]);
+  const { styles } = useStyles();
+  const { data, isLoading } = useFetchAgent(currentIdentifier);
+  const { t } = useTranslation('market');
+  const [tab, setTab] = useState<string>(InfoTabs.prompt);
+
+  if (isLoading || !data?.meta) return <Loading />;
+
+  const { config, meta, identifier } = data;
+  const { systemRole } = config;
+
+  return (
+    <>
+      <AgentCardBanner mask meta={meta} size={10} style={{ height: 120, marginBottom: -60 }} />
+      <Header />
+      <Flexbox align={'center'}>
+        <TabsNav
+          activeKey={tab}
+          className={styles.nav}
+          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}
+        />
+      </Flexbox>
+      <Flexbox style={{ padding: 16 }}>
+        {tab === InfoTabs.prompt && <Markdown fullFeaturedCodeBlock>{systemRole}</Markdown>}
+        {tab === InfoTabs.comment && <Comment identifier={identifier} />}
+      </Flexbox>
+    </>
+  );
+});
+
+export default AgentModalInner;

package/src/pages/market/features/SideBar/AgentInfo/style.ts

@@ -0,0 +1,46 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  author: css`
+    font-size: 12px;
+  `,
+
+  avatar: css`
+    flex: none;
+  `,
+  container: css`
+    position: relative;
+    padding: 16px 16px 24px;
+    border-bottom: 1px solid ${token.colorBorderSecondary};
+  `,
+  date: css`
+    font-size: 12px;
+    color: ${token.colorTextDescription};
+  `,
+  desc: css`
+    color: ${token.colorTextDescription};
+    text-align: center;
+  `,
+  loading: css`
+    .ant-skeleton-content {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+  nav: css`
+    padding-top: 4px;
+
+    .ant-tabs-tab {
+      margin: 4px !important;
+
+      + .ant-tabs-tab {
+        margin: 4px !important;
+      }
+    }
+  `,
+  title: css`
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+  `,
+}));

package/src/pages/market/features/SideBar/Desktop.tsx

@@ -0,0 +1,70 @@
+import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo, useState } from 'react';
+
+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;
+  `,
+  drawer: css`
+    background: ${token.colorBgLayout};
+  `,
+  header: css`
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+  noScrollbar: stylish.noScrollbar,
+}));
+
+const SideBar = memo<{ children: ReactNode }>(({ children }) => {
+  const { styles } = useStyles();
+  const [tempId, setTempId] = useState<string>('');
+  const [showAgentSidebar, deactivateAgent, activateAgent] = useMarketStore((s) => [
+    agentMarketSelectors.showSideBar(s),
+    s.deactivateAgent,
+    s.activateAgent,
+  ]);
+
+  return (
+    <DraggablePanel
+      className={styles.drawer}
+      classNames={{
+        content: styles.content,
+      }}
+      expand={showAgentSidebar}
+      minWidth={MARKET_SIDEBAR_WIDTH}
+      mode={'fixed'}
+      onExpandChange={(show) => {
+        if (!show) {
+          setTempId(useMarketStore.getState().currentIdentifier);
+          deactivateAgent();
+        } else if (tempId) {
+          activateAgent(tempId);
+        }
+      }}
+      placement={'right'}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100vh',
+          minWidth: MARKET_SIDEBAR_WIDTH,
+        }}
+      >
+        <SafeSpacing />
+        <DraggablePanelBody
+          className={styles.noScrollbar}
+          style={{ padding: 0, position: 'relative' }}
+        >
+          {children}
+        </DraggablePanelBody>
+      </DraggablePanelContainer>
+    </DraggablePanel>
+  );
+});
+
+export default SideBar;

package/src/pages/market/features/SideBar/Mobile.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Drawer } from 'antd';
+import { useTheme } from 'antd-style';
+import { X } from 'lucide-react';
+import { PropsWithChildren, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+const Mobile = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
+    agentMarketSelectors.showSideBar(s),
+    s.deactivateAgent,
+  ]);
+
+  const { t } = useTranslation('market');
+
+  return (
+    <Drawer
+      bodyStyle={{ padding: 0 }}
+      closeIcon={<ActionIcon icon={X} size={{ blockSize: 32, fontSize: 20 }} />}
+      drawerStyle={{ background: theme.colorBgContainer }}
+      headerStyle={{ padding: '8px 4px' }}
+      height={'75vh'}
+      onClose={deactivateAgent}
+      open={showAgentSidebar}
+      placement={'bottom'}
+      title={t('sidebar.title')}
+    >
+      {children}
+    </Drawer>
+  );
+});
+
+export default Mobile;

package/src/pages/market/features/SideBar/index.tsx

@@ -0,0 +1,23 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AgentInfo from './AgentInfo';
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+
+const SideBar = memo(() => {
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  return (
+    <Render>
+      <Flexbox>
+        <AgentInfo />
+      </Flexbox>
+    </Render>
+  );
+});
+
+export default SideBar;

package/src/pages/market/features/TagList/index.tsx

@@ -0,0 +1,29 @@
+import { Button } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { startCase } from 'lodash-es';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { agentMarketSelectors, useMarketStore } from '@/store/market';
+
+const TagList = memo(() => {
+  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
+  const keywords = useMarketStore((s) => s.searchKeywords);
+
+  return (
+    <Flexbox gap={8} horizontal style={{ flexWrap: 'wrap' }}>
+      {agentTagList.map((item) => (
+        <Button
+          key={item}
+          onClick={() => useMarketStore.setState({ searchKeywords: item })}
+          size={'small'}
+          type={keywords === item ? 'primary' : 'default'}
+        >
+          {startCase(item)}
+        </Button>
+      ))}
+    </Flexbox>
+  );
+});
+
+export default TagList;

package/src/pages/market/index.page.tsx

@@ -1,10 +1,13 @@
 import { useResponsive } from 'antd-style';
 import Head from 'next/head';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useMarketStore } from '@/store/market';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
+import AgentCard from './features/AgentCard';
+import AgentSearchBar from './features/AgentSearchBar';
 import DesktopLayout from './layout';
 import MobileLayout from './layout.mobile';
 
@@ -13,6 +16,11 @@ const Market = memo(() => {
   const pageTitle = genSiteHeadTitle(t('tab.market'));
   const { mobile } = useResponsive();
 
+  useEffect(() => {
+    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
+    useMarketStore.persist.rehydrate();
+  }, []);
+
   const RenderLayout = mobile ? MobileLayout : DesktopLayout;
 
   return (
@@ -21,7 +29,8 @@ const Market = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <RenderLayout>
-        <h1>🤯 Coming Soon</h1>
+        <AgentSearchBar />
+        <AgentCard />
       </RenderLayout>
     </>
   );

package/src/pages/market/layout.mobile.tsx

@@ -1,19 +1,20 @@
 import { ReactNode, memo } from 'react';
-import { Center } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
-import { useSwitchSideBarOnInit } from '@/store/global';
+import SideBar from '@/pages/market/features/SideBar';
 
 import Header from './features/Header';
 
-const ChatMobileLayout = memo<{ children: ReactNode }>(({ children }) => {
-  useSwitchSideBarOnInit('chat');
-
+const MarketLayout = memo<{ children: ReactNode }>(({ children }) => {
   return (
     <AppMobileLayout navBar={<Header />} showTabBar>
-      <Center flex={1}>{children}</Center>
+      <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
+        {children}
+      </Flexbox>
+      <SideBar />
     </AppMobileLayout>
   );
 });
 
-export default ChatMobileLayout;
+export default MarketLayout;

package/src/pages/market/layout.tsx

@@ -1,10 +1,30 @@
+import { GridBackground } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import SafeSpacing from '@/components/SafeSpacing';
+import { MAX_WIDTH } from '@/const/layoutTokens';
+
 import AppLayout from '../../layout/AppLayout';
 import Header from './features/Header';
+import SideBar from './features/SideBar';
+
+const useStyles = createStyles(({ css }) => ({
+  background: css`
+    width: 80%;
+    margin: -60px 0 -20px;
+  `,
+  title: css`
+    z-index: 2;
+    margin-top: 24px;
+    font-size: 56px;
+    font-weight: 800;
+  `,
+}));
 
 const MarketLayout = memo<PropsWithChildren>(({ children }) => {
+  const { theme, styles } = useStyles();
   return (
     <AppLayout>
       <Flexbox
@@ -14,7 +34,25 @@ const MarketLayout = memo<PropsWithChildren>(({ children }) => {
         style={{ position: 'relative' }}
       >
         <Header />
-        <Center flex={1}>{children}</Center>
+        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+          <Flexbox align={'center'} flex={1} style={{ overflow: 'auto', padding: 16 }}>
+            <SafeSpacing />
+
+            <Flexbox gap={16} style={{ maxWidth: MAX_WIDTH, position: 'relative', width: '100%' }}>
+              <Center>
+                <h1 className={styles.title}>Find & Use The Best Agents</h1>
+                <GridBackground
+                  animation
+                  className={styles.background}
+                  colorFront={theme.colorText}
+                  random
+                />
+              </Center>
+              {children}
+            </Flexbox>
+          </Flexbox>
+          <SideBar />
+        </Flexbox>
       </Flexbox>
     </AppLayout>
   );

package/src/pages/settings/features/Header/Desktop.tsx

@@ -1,17 +1,15 @@
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
+import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSessionStore } from '@/store/session';
-
 const Index = memo(() => {
   const { t } = useTranslation('setting');
-  const [switchBackToChat] = useSessionStore((s) => [s.switchBackToChat]);
 
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.global')} />}
-      onBackClick={switchBackToChat}
+      onBackClick={() => Router.back()}
       showBackButton
     />
   );