@lobehub/chat 0.74.0 → 0.76.0

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
     />
   );

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

@@ -9,7 +9,7 @@ const Header = memo(() => {
   return (
     <MobileNavBar
       center={<MobileNavBarTitle title={t('header.global')} />}
-      onBackClick={() => Router.push('/chat')}
+      onBackClick={() => Router.back()}
       showBackButton
     />
   );

package/src/pages/settings/features/Settings/Common.tsx

@@ -1,4 +1,4 @@
-import { Form, type ItemGroup, SliderWithInput } from '@lobehub/ui';
+import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
 import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { changeLanguage } from 'i18next';
@@ -7,7 +7,6 @@ import { AppWindow, Monitor, Moon, Palette, Sun } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SelectWithImg from '@/components/SelectWithImg';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';

package/src/pages/settings/features/Settings/LLM/index.tsx

@@ -8,6 +8,7 @@ import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { getClientConfig } from '@/config/client';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { globalSelectors, useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
 
@@ -81,7 +82,17 @@ const LLM = memo(() => {
         name: [configKey, 'openAI', 'endpoint'],
       },
       {
-        children: <Switch />,
+        children: (
+          <Switch disabled={getClientConfig().USE_AZURE_OPENAI} />
+          //   <Flexbox gap={4}>
+          //   <div>
+          //
+          //   </div>
+          //   {getClientConfig().USE_AZURE_OPENAI && (
+          //     <div className={styles.tip}>{t('llm.OpenAI.useAzure.serverConfig')}</div>
+          //   )}
+          // </Flexbox>
+        ),
         desc: t('llm.OpenAI.useAzure.desc'),
         label: t('llm.OpenAI.useAzure.title'),
         name: [configKey, 'openAI', 'useAzure'],

package/src/pages/settings/features/Settings/index.tsx

@@ -2,7 +2,7 @@ import { GridBackground, Icon, Logo, TabsNav } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { PackageCheck } from 'lucide-react';
 import { rgba } from 'polished';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -64,6 +64,21 @@ const Settings = memo(() => {
 
   const [tab, setTab] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
 
+  const content = useMemo(() => {
+    switch (tab) {
+      case 'llm': {
+        return <LLM />;
+      }
+      case 'agent': {
+        return <Agent />;
+      }
+      default:
+      case 'common': {
+        return <Common />;
+      }
+    }
+  }, [tab]);
+
   return (
     <Center gap={16} width={'100%'}>
       <Flexbox align={'flex-end'} className={styles.tabs} horizontal justify={'center'}>
@@ -91,9 +106,7 @@ const Settings = memo(() => {
           <div>{`${pkg.version}`}</div>
         </Flexbox>
       </Flexbox>
-      {tab === 'common' && <Common />}
-      {tab === 'llm' && <LLM />}
-      {tab === 'agent' && <Agent />}
+      {content}
     </Center>
   );
 });

package/src/services/_header.ts

@@ -24,7 +24,7 @@ export const createHeaderWithOpenAI = (header?: HeadersInit): HeadersInit => {
 
   if (openai.useAzure) {
     Object.assign(result, {
-      [AZURE_OPENAI_API_VERSION]: openai.azureApiVersion,
+      [AZURE_OPENAI_API_VERSION]: openai.azureApiVersion || '',
       [USE_AZURE_OPENAI]: '1',
     });
   }

package/src/services/agentMarket.ts

@@ -0,0 +1,21 @@
+import { getAgentIndexJSON, getAgentJSON } from '@/const/url';
+import { useGlobalStore } from '@/store/global';
+
+/**
+ * 请求助手列表
+ */
+export const getAgentList = async () => {
+  const res = await fetch(getAgentIndexJSON(useGlobalStore.getState().settings.language));
+
+  return res.json();
+};
+
+/**
+ * 请求助手 manifest
+ */
+export const getAgentManifest = async (identifier?: string) => {
+  if (!identifier) return;
+  const res = await fetch(getAgentJSON(identifier, useGlobalStore.getState().settings.language));
+
+  return res.json();
+};

package/src/store/global/initialState.ts

@@ -21,7 +21,7 @@ export interface GlobalState {
    * 用户设置
    */
   settings: GlobalSettings;
-  settingsTab: SettingsTabs;
+  settingsTab?: SettingsTabs;
   sidebarKey: SidebarTabKey;
 }
 
@@ -44,6 +44,5 @@ export const initialState: GlobalState = {
     showSessionPanel: true,
   },
   settings: DEFAULT_SETTINGS,
-  settingsTab: 'common',
   sidebarKey: 'chat',
 };

package/src/store/global/selectors.test.ts

@@ -68,7 +68,6 @@ describe('globalSelectors', () => {
         languageModel: {
           openAI: {
             OPENAI_API_KEY: 'openai-api-key',
-            azureApiVersion: '2023-08-01-preview',
             endpoint: 'https://openai-endpoint.com',
             models: ['gpt-3.5-turbo'],
           },

package/src/store/market/action.ts

@@ -0,0 +1,57 @@
+import isEqual from 'fast-deep-equal';
+import { produce } from 'immer';
+import useSWR, { SWRResponse } from 'swr';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { getAgentList, getAgentManifest } from '@/services/agentMarket';
+import { AgentsMarketItem, LobeChatAgentsMarketIndex } from '@/types/market';
+
+import type { Store } from './store';
+
+export interface StoreAction {
+  activateAgent: (identifier: string) => void;
+  deactivateAgent: () => 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: undefined }, false, 'deactivateAgent');
+  },
+  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, getAgentManifest, {
+      onError: () => {
+        get().deactivateAgent();
+      },
+      onSuccess: (data, key) => {
+        get().updateAgentMap(key, data);
+      },
+    }),
+  useFetchAgentList: () =>
+    useSWR<LobeChatAgentsMarketIndex>('fetchAgentList', getAgentList, {
+      onSuccess: (agentMarketIndex) => {
+        set({ agentList: agentMarketIndex.agents }, false, 'useFetchAgentList');
+      },
+    }),
+});

package/src/store/market/index.ts

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

package/src/store/market/initialState.ts

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

package/src/store/market/selectors.ts

@@ -0,0 +1,36 @@
+import { flatten } from 'lodash-es';
+
+import { DEFAULT_AGENTS_MARKET_ITEM } from '@/const/market';
+import { AgentsMarketItem } from '@/types/market';
+import { findDuplicates } from '@/utils/findDuplicates';
+
+import type { Store } from './store';
+
+const getAgentList = (s: Store) => s.agentList;
+const getAgentTagList = (s: Store) => {
+  const agentList = s.agentList;
+  const rawAgentTagList = flatten(agentList.map((item) => item.meta.tags)) as string[];
+  return findDuplicates(rawAgentTagList);
+};
+
+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

@@ -0,0 +1,51 @@
+import { PersistOptions, devtools, 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 { isDev } from '@/utils/env';
+
+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: 'hash',
+      selectors: [
+        // map state key to storage key
+        { currentIdentifier: 'agent' },
+      ],
+    },
+  }),
+
+  version: 0,
+};
+
+const createStore: StateCreator<Store, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createMarketAction(...parameters),
+});
+
+export const useMarketStore = createWithEqualityFn<Store>()(
+  persist(
+    devtools(createStore, {
+      name: LOBE_AGENT_MARKET + (isDev ? '_DEV' : ''),
+    }),
+    persistOptions,
+  ),
+  shallow,
+);

package/src/store/session/slices/session/action.ts

@@ -1,13 +1,14 @@
 import { produce } from 'immer';
 import { merge } from 'lodash-es';
 import Router from 'next/router';
+import { DeepPartial } from 'utility-types';
 import { StateCreator } from 'zustand/vanilla';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
 import { SessionStore } from '@/store/session';
-import { LobeAgentSession, LobeSessions } from '@/types/session';
+import { LobeAgentSession, LobeAgentSettings, LobeSessions } from '@/types/session';
 import { setNamespace } from '@/utils/storeDebug';
 import { uuid } from '@/utils/uuid';
 
@@ -24,7 +25,7 @@ export interface SessionAction {
    * @param session - 会话信息
    * @returns void
    */
-  createSession: () => Promise<string>;
+  createSession: (agent?: DeepPartial<LobeAgentSettings>) => Promise<string>;
   /**
    * 变更session
    * @param payload - 聊天记录
@@ -79,7 +80,7 @@ export const createSessionSlice: StateCreator<
     set({ sessions: {} }, false, t('clearSessions'));
   },
 
-  createSession: async () => {
+  createSession: async (agent) => {
     const { dispatchSession, switchSession } = get();
 
     const timestamp = Date.now();
@@ -87,6 +88,7 @@ export const createSessionSlice: StateCreator<
     // 合并 settings 里的 defaultAgent
     const globalDefaultAgent = useGlobalStore.getState().settings.defaultAgent;
     const newSession: LobeAgentSession = merge({}, initLobeSession, globalDefaultAgent, {
+      ...agent,
       createAt: timestamp,
       id: uuid(),
       updateAt: timestamp,

package/src/store/session/slices/session/initialState.ts

@@ -16,6 +16,7 @@ export interface SessionState {
   isMobile?: boolean;
   searchKeywords: string;
   sessions: Record<string, LobeAgentSession>;
+  topicSearchKeywords: string;
 }
 
 export const initLobeSession: LobeAgentSession = {
@@ -44,4 +45,5 @@ export const initialSessionState: SessionState = {
   isMobile: false,
   searchKeywords: '',
   sessions: {},
+  topicSearchKeywords: '',
 };

package/src/store/session/slices/session/reducers/session.test.ts

@@ -109,7 +109,7 @@ describe('sessionsReducer', () => {
             avatar: 'avatar-url',
             backgroundColor: 'background-color',
             description: 'description',
-            tag: ['tag1', 'tag2'],
+            tags: ['tag1', 'tag2'],
             title: 'title',
           },
         } as LobeAgentSession,
@@ -151,7 +151,7 @@ describe('sessionsReducer', () => {
             avatar: 'avatar-url',
             backgroundColor: 'background-color',
             description: 'description',
-            tag: ['tag1', 'tag2'],
+            tags: ['tag1', 'tag2'],
             title: 'title',
           },
         } as LobeAgentSession,
@@ -185,7 +185,7 @@ describe('sessionsReducer', () => {
             avatar: 'avatar-url',
             backgroundColor: 'background-color',
             description: 'description',
-            tag: ['tag1', 'tag2'],
+            tags: ['tag1', 'tag2'],
             title: 'title',
           },
         } as LobeAgentSession,
@@ -221,7 +221,7 @@ describe('sessionsReducer', () => {
             avatar: 'avatar-url',
             backgroundColor: 'background-color',
             description: 'description',
-            tag: ['tag1', 'tag2'],
+            tags: ['tag1', 'tag2'],
             title: 'title',
           },
         } as LobeAgentSession,

package/src/types/market.ts

@@ -0,0 +1,19 @@
+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;
+}