@lobehub/chat 1.17.6 → 1.18.0

package/src/app/(main)/market/features/AgentList.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { Grid, SpotlightCardProps } from '@lobehub/ui';
-import { Empty, Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { memo, useCallback, useLayoutEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import LazyLoad from 'react-lazy-load';
-
-import { agentMarketSelectors, useMarketStore } from '@/store/market';
-
-import AgentCard from './AgentCard';
-
-const useStyles = createStyles(({ css, responsive }) => ({
-  compactLazy: css`
-    min-height: 120px;
-  `,
-  lazy: css`
-    min-height: 332px;
-  `,
-  title: css`
-    margin-block-start: 0.5em;
-    font-size: 24px;
-    font-weight: 600;
-    ${responsive.mobile} {
-      font-size: 20px;
-    }
-  `,
-}));
-
-export interface AgentListProps {
-  mobile?: boolean;
-}
-
-const AgentList = memo<AgentListProps>(({ mobile }) => {
-  const { t } = useTranslation('market');
-  const [searchKeywords, useFetchAgentList] = useMarketStore((s) => [
-    s.searchKeywords,
-    s.useFetchAgentList,
-  ]);
-  const { isLoading } = useFetchAgentList();
-  const agentList = useMarketStore(agentMarketSelectors.getAgentList, isEqual);
-  const { styles } = useStyles();
-  const recentLength = mobile ? 3 : 6;
-
-  useLayoutEffect(() => {
-    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useMarketStore.persist.rehydrate();
-  }, []);
-
-  const GridCompactRender: SpotlightCardProps['renderItem'] = useCallback(
-    (props: any) => (
-      <LazyLoad className={styles.compactLazy} offset={332}>
-        <AgentCard variant={'compact'} {...props} />
-      </LazyLoad>
-    ),
-    [],
-  );
-
-  if (isLoading || (!searchKeywords && agentList?.length === 0)) {
-    return (
-      <>
-        <h2 className={styles.title}>{t('title.recentSubmits')}</h2>
-        <Skeleton paragraph={{ rows: 8 }} title={false} />
-        <h2 className={styles.title}>{t('title.allAgents')}</h2>
-        <Skeleton paragraph={{ rows: 8 }} title={false} />
-      </>
-    );
-  }
-
-  if (searchKeywords) {
-    if (agentList.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
-    return (
-      <Grid rows={3}>
-        {agentList.map((item) => (
-          <GridCompactRender key={item.identifier} {...item} />
-        ))}
-      </Grid>
-    );
-  }
-
-  return (
-    <>
-      <h2 className={styles.title}>{t('title.recentSubmits')}</h2>
-      <Grid rows={3}>
-        {agentList.slice(0, recentLength).map((item) => (
-          <AgentCard key={item.identifier} {...item} />
-        ))}
-      </Grid>
-      <h2 className={styles.title}>{t('title.allAgents')}</h2>
-      <Grid rows={3}>
-        {agentList.slice(recentLength).map((item) => (
-          <GridCompactRender key={item.identifier} {...item} />
-        ))}
-      </Grid>
-    </>
-  );
-});
-
-AgentList.displayName = 'AgentList';
-
-export default AgentList;

package/src/app/(main)/market/features/AgentSearchBar.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import { SearchBar } from '@lobehub/ui';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import useControlledState from 'use-merge-value';
-
-import { useMarketStore } from '@/store/market';
-
-interface AgentSearchBarProps {
-  mobile?: boolean;
-}
-
-const AgentSearchBar = memo<AgentSearchBarProps>(({ mobile }) => {
-  const { t } = useTranslation('market');
-  const [searchKeywords, setSearchKeywords] = useMarketStore((s) => [
-    s.searchKeywords,
-    s.setSearchKeywords,
-  ]);
-
-  const [keyword, setKeyword] = useControlledState(searchKeywords, {
-    onChange: setSearchKeywords,
-    value: searchKeywords,
-  });
-
-  return (
-    <SearchBar
-      allowClear
-      enableShortKey={!mobile}
-      onChange={(e) => {
-        setKeyword(e.target.value);
-      }}
-      placeholder={t('search.placeholder')}
-      shortKey={'k'}
-      spotlight={!mobile}
-      type={mobile ? 'block' : 'ghost'}
-      value={keyword}
-    />
-  );
-});
-
-export default AgentSearchBar;

package/src/app/(main)/market/features/TagList.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { Button, Skeleton } from 'antd';
-import { createStyles, useResponsive } from 'antd-style';
-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 useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  active: css`
-    color: ${token.colorBgLayout};
-    background: ${token.colorPrimary};
-
-    &:hover {
-      color: ${token.colorBgLayout} !important;
-      background: ${token.colorPrimary} !important;
-    }
-  `,
-  tag: css`
-    background: ${isDarkMode ? token.colorBgContainer : token.colorFillTertiary};
-    border: none;
-
-    &:hover {
-      background: ${isDarkMode ? token.colorBgElevated : token.colorFill} !important;
-    }
-  `,
-}));
-
-const TagList = memo(() => {
-  const { cx, styles } = useStyles();
-  const { md = true } = useResponsive();
-  const [searchKeywords, setSearchKeywords] = useMarketStore((s) => [
-    s.searchKeywords,
-    s.setSearchKeywords,
-  ]);
-  const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
-
-  if (agentTagList?.length === 0) {
-    return <Skeleton paragraph={{ rows: 4 }} title={false} />;
-  }
-
-  const list = md ? agentTagList : agentTagList.slice(0, 20);
-
-  return (
-    <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
-      {list.map((item) => {
-        const isActive = searchKeywords === item;
-        return (
-          <Button
-            className={cx(styles.tag, isActive && styles.active)}
-            key={item}
-            onClick={() => {
-              setSearchKeywords(isActive ? '' : item);
-            }}
-            shape={'round'}
-            size={'small'}
-          >
-            {startCase(item)}
-          </Button>
-        );
-      })}
-    </Flexbox>
-  );
-});
-
-export default TagList;

package/src/app/(main)/market/loading.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import { Skeleton } from 'antd';
-import { Flexbox } from 'react-layout-kit';
-
-export default () => (
-  <Flexbox gap={16}>
-    <Skeleton.Input active block />
-    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
-    <Skeleton.Button active />
-    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
-    <Skeleton.Button active />
-    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
-  </Flexbox>
-);

package/src/app/(main)/market/page.tsx

@@ -1,44 +0,0 @@
-import { Flexbox } from 'react-layout-kit';
-
-import StructuredData from '@/components/StructuredData';
-import { ldModule } from '@/server/ld';
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { isMobileDevice } from '@/utils/responsive';
-
-import AgentList from './features/AgentList';
-import AgentSearchBar from './features/AgentSearchBar';
-import TagList from './features/TagList';
-
-export const generateMetadata = async () => {
-  const { t } = await translation('metadata');
-  return metadataModule.generate({
-    description: t('market.description'),
-    title: t('market.title'),
-    url: '/market',
-  });
-};
-
-const Page = async () => {
-  const mobile = isMobileDevice();
-  const { t } = await translation('metadata');
-  const ld = ldModule.generate({
-    description: t('market.description'),
-    title: t('market.title'),
-    url: '/market',
-  });
-  return (
-    <>
-      <StructuredData ld={ld} />
-      <AgentSearchBar mobile={mobile} />
-      <Flexbox gap={mobile ? 16 : 24}>
-        <TagList />
-        <AgentList mobile={mobile} />
-      </Flexbox>
-    </>
-  );
-};
-
-Page.DisplayName = 'Market';
-
-export default Page;

package/src/const/market.ts

@@ -1,15 +0,0 @@
-import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
-import { AgentsMarketItem } from '@/types/market';
-
-import { DEFAULT_AGENT_META } from './meta';
-
-export const DEFAULT_AGENTS_MARKET_ITEM: AgentsMarketItem = {
-  author: '',
-  config: DEFAULT_AGENT_CONFIG,
-  createAt: Date.now().toString(),
-  homepage: '',
-  identifier: '',
-  manifest: '',
-  meta: DEFAULT_AGENT_META,
-  schemaVersion: 1,
-};

package/src/locales/default/market.ts

@@ -1,32 +0,0 @@
-export default {
-  addAgent: '添加助手',
-  addAgentAndConverse: '添加助手并会话',
-  addAgentSuccess: '添加成功',
-  guide: {
-    func1: {
-      desc1: '在会话窗口中通过右上角设置进入你想提交助手的设置页面;',
-      desc2: '点击右上角提交到助手市场按钮。',
-      tag: '方法一',
-      title: '通过 {{appName}} 提交',
-    },
-    func2: {
-      button: '前往 Github 助手仓库',
-      desc: '如果您想将助手添加到索引中，请使用 agent-template.json 或 agent-template-full.json 在 plugins 目录中创建一个条目，编写简短的描述并适当标记，然后创建一个拉取请求。',
-      tag: '方法二',
-      title: '通过 Github 提交',
-    },
-  },
-  search: {
-    placeholder: '搜索助手名称介绍或关键词...',
-  },
-  sidebar: {
-    comment: '讨论区',
-    prompt: '提示词',
-    title: '助手详情',
-  },
-  submitAgent: '提交助手',
-  title: {
-    allAgents: '全部助手',
-    recentSubmits: '最近新增',
-  },
-};

package/src/services/market.ts

@@ -1,22 +0,0 @@
-import { LobeChatAgentsMarketIndex } from '@/types/market';
-
-import { API_ENDPOINTS } from './_url';
-
-class MarketService {
-  getAgentList = async (locale: string): Promise<LobeChatAgentsMarketIndex> => {
-    const res = await fetch(`${API_ENDPOINTS.market}?locale=${locale}`);
-
-    return res.json();
-  };
-
-  /**
-   * 请求助手 manifest
-   */
-  getAgentManifest = async (identifier: string, locale: string) => {
-    if (!identifier) return;
-    const res = await fetch(`${API_ENDPOINTS.marketItem(identifier)}?locale=${locale}`);
-
-    return res.json();
-  };
-}
-export const marketService = new MarketService();

package/src/store/market/action.ts

@@ -1,82 +0,0 @@
-import isEqual from 'fast-deep-equal';
-import { produce } from 'immer';
-import useSWR, { SWRResponse } from 'swr';
-import type { StateCreator } from 'zustand/vanilla';
-
-import { marketService } from '@/services/market';
-import { globalHelpers } from '@/store/user/helpers';
-import { AgentsMarketItem, LobeChatAgentsMarketIndex } from '@/types/market';
-
-import type { Store } from './store';
-
-export interface StoreAction {
-  activateAgent: (identifier: string) => void;
-  deactivateAgent: () => void;
-  getAgentById: (identifiers: string) => Promise<AgentsMarketItem>;
-  setSearchKeywords: (keywords: string) => void;
-  updateAgentMap: (key: string, value: AgentsMarketItem) => void;
-  useFetchAgent: (identifier: string) => SWRResponse<AgentsMarketItem>;
-  useFetchAgentList: () => SWRResponse<LobeChatAgentsMarketIndex>;
-}
-
-export const createMarketAction: StateCreator<
-  Store,
-  [['zustand/devtools', never]],
-  [],
-  StoreAction
-> = (set, get) => ({
-  activateAgent: (identifier) => {
-    set({ currentIdentifier: identifier });
-  },
-  deactivateAgent: () => {
-    set({ currentIdentifier: '' }, false, 'deactivateAgent');
-  },
-
-  getAgentById: async (identifier) => {
-    const locale = globalHelpers.getCurrentLanguage();
-    return marketService.getAgentManifest(identifier, locale as string);
-  },
-
-  setSearchKeywords: (keywords) => {
-    set({ searchKeywords: keywords });
-  },
-  updateAgentMap: (key, value) => {
-    const { agentMap } = get();
-
-    const nextAgentMap = produce(agentMap, (draft) => {
-      draft[key] = value;
-    });
-
-    if (isEqual(nextAgentMap, agentMap)) return;
-
-    set({ agentMap: nextAgentMap }, false, `setAgentMap/${key}`);
-  },
-  useFetchAgent: (identifier) =>
-    useSWR<AgentsMarketItem>(
-      [identifier, globalHelpers.getCurrentLanguage()],
-      ([id, locale]) => marketService.getAgentManifest(id, locale as string),
-      {
-        onError: () => {
-          get().deactivateAgent();
-        },
-        onSuccess: (data) => {
-          get().updateAgentMap(identifier, data);
-        },
-      },
-    ),
-  useFetchAgentList: () =>
-    useSWR<LobeChatAgentsMarketIndex>(
-      globalHelpers.getCurrentLanguage(),
-      marketService.getAgentList,
-      {
-        onSuccess: (agentMarketIndex) => {
-          set(
-            { agentList: agentMarketIndex.agents, tagList: agentMarketIndex.tags },
-            false,
-            'useFetchAgentList',
-          );
-        },
-        revalidateOnFocus: false,
-      },
-    ),
-});

package/src/store/market/index.ts

@@ -1,3 +0,0 @@
-export { agentMarketSelectors } from './selectors';
-export { useMarketStore } from './store';
-export { type Store } from './store';

package/src/store/market/initialState.ts

@@ -1,19 +0,0 @@
-import { AgentsMarketIndexItem, AgentsMarketItem } from '@/types/market';
-
-export type MarketAgentMap = Record<string, AgentsMarketItem>;
-
-export interface StoreState {
-  agentList: AgentsMarketIndexItem[];
-  agentMap: MarketAgentMap;
-  currentIdentifier: string;
-  searchKeywords: string;
-  tagList: string[];
-}
-
-export const initialState: StoreState = {
-  agentList: [],
-  agentMap: {},
-  currentIdentifier: '',
-  searchKeywords: '',
-  tagList: [],
-};

package/src/store/market/selectors.ts

@@ -1,38 +0,0 @@
-import { DEFAULT_AGENTS_MARKET_ITEM } from '@/const/market';
-import { AgentsMarketItem } from '@/types/market';
-
-import type { Store } from './store';
-
-const getAgentList = (s: Store) => {
-  const { searchKeywords, agentList } = s;
-  if (!searchKeywords) return agentList;
-  return agentList.filter(({ meta }) => {
-    const checkMeta: string = [meta.tags, meta.title, meta.description, meta.avatar]
-      .filter(Boolean)
-      .join('');
-    return checkMeta.toLowerCase().includes(searchKeywords.toLowerCase());
-  });
-};
-const getAgentTagList = (s: Store) => s.tagList;
-
-const getAgentItemById = (d: string) => (s: Store) => s.agentMap[d];
-
-const currentAgentItem = (s: Store) => getAgentItemById(s.currentIdentifier)(s);
-
-const currentAgentItemSafe = (s: Store): AgentsMarketItem => {
-  const item = getAgentItemById(s.currentIdentifier)(s);
-  if (!item) return DEFAULT_AGENTS_MARKET_ITEM;
-
-  return item;
-};
-
-const showSideBar = (s: Store) => !!s.currentIdentifier;
-
-export const agentMarketSelectors = {
-  currentAgentItem,
-  currentAgentItemSafe,
-  getAgentItemById,
-  getAgentList,
-  getAgentTagList,
-  showSideBar,
-};

package/src/store/market/store.ts

@@ -1,48 +0,0 @@
-import { PersistOptions, persist } from 'zustand/middleware';
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
-import type { StateCreator } from 'zustand/vanilla';
-
-import { createHyperStorage } from '@/store/middleware/createHyperStorage';
-
-import { createDevtools } from '../middleware/createDevtools';
-import { type StoreAction, createMarketAction } from './action';
-import { type StoreState, initialState } from './initialState';
-
-export type Store = StoreAction & StoreState;
-
-const LOBE_AGENT_MARKET = 'LOBE_AGENT_MARKET';
-
-const persistOptions: PersistOptions<Store> = {
-  name: LOBE_AGENT_MARKET,
-
-  skipHydration: true,
-
-  storage: createHyperStorage({
-    localStorage: {
-      dbName: 'LobeHub',
-      selectors: ['agentMap'],
-    },
-    url: {
-      mode: 'search',
-      selectors: [
-        // map state key to storage key
-        { currentIdentifier: 'agent' },
-      ],
-    },
-  }),
-
-  version: 0,
-};
-
-const createStore: StateCreator<Store, [['zustand/devtools', never]]> = (...parameters) => ({
-  ...initialState,
-  ...createMarketAction(...parameters),
-});
-
-const devtools = createDevtools('market');
-
-export const useMarketStore = createWithEqualityFn<Store>()(
-  persist(devtools(createStore), persistOptions),
-  shallow,
-);

package/src/types/market.ts

@@ -1,20 +0,0 @@
-import { MetaData } from '@/types/meta';
-import { LobeAgentSettings } from '@/types/session';
-
-export interface AgentsMarketIndexItem {
-  author: string;
-  createAt: string;
-  homepage: string;
-  identifier: string;
-  manifest: string;
-  meta: MetaData;
-  schemaVersion: 1;
-}
-
-export type AgentsMarketItem = AgentsMarketIndexItem & LobeAgentSettings;
-
-export interface LobeChatAgentsMarketIndex {
-  agents: AgentsMarketIndexItem[];
-  schemaVersion: 1;
-  tags: string[];
-}