@lobehub/chat 0.83.6 → 0.83.8

package/CHANGELOG.md

@@ -2,6 +2,58 @@
 
 # Changelog
 
+### [Version 0.83.8](https://github.com/lobehub/lobe-chat/compare/v0.83.7...v0.83.8)
+
+<sup>Released on **2023-10-07**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.83.7](https://github.com/lobehub/lobe-chat/compare/v0.83.6...v0.83.7)
+
+<sup>Released on **2023-10-07**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix shuffle, use search url with agent item.
+
+#### 💄 Styles
+
+- **misc**: Better tag style, improve loading state.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix shuffle ([d4b9dc3](https://github.com/lobehub/lobe-chat/commit/d4b9dc3))
+- **misc**: Use search url with agent item ([98df623](https://github.com/lobehub/lobe-chat/commit/98df623))
+
+#### Styles
+
+- **misc**: Better tag style ([38e42ea](https://github.com/lobehub/lobe-chat/commit/38e42ea))
+- **misc**: Improve loading state ([f00c868](https://github.com/lobehub/lobe-chat/commit/f00c868))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.83.6](https://github.com/lobehub/lobe-chat/compare/v0.83.5...v0.83.6)
 
 <sup>Released on **2023-10-06**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.83.6",
+  "version": "0.83.8",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

package/src/app/chat/(desktop)/index.tsx

@@ -9,16 +9,14 @@ import ChatHeader from './features/ChatHeader';
 import ChatInput from './features/ChatInput';
 import SideBar from './features/SideBar';
 
-const DesktopPage = memo(() => {
-  return (
-    <>
-      <PageTitle />
-      <ChatHeader />
-      <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-        <Conversation chatInput={<ChatInput />} />
-        <SideBar />
-      </Flexbox>
-    </>
-  );
-});
+const DesktopPage = memo(() => (
+  <>
+    <PageTitle />
+    <ChatHeader />
+    <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+      <Conversation chatInput={<ChatInput />} />
+      <SideBar />
+    </Flexbox>
+  </>
+));
 export default DesktopPage;

package/src/app/chat/features/Conversation/ChatList/Plugins/PluginMessage.tsx

@@ -1,5 +1,7 @@
 import { Loading3QuartersOutlined } from '@ant-design/icons';
-import { memo, useMemo } from 'react';
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { Suspense, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -7,7 +9,8 @@ import { usePluginStore } from '@/store/plugin';
 import { ChatMessage } from '@/types/chatMessage';
 
 import IFrameRender from './IFrameRender';
-import SystemJsRender from './SystemJsRender';
+
+const SystemJsRender = dynamic(() => import('./SystemJsRender'), { ssr: false });
 
 export interface FunctionMessageProps extends ChatMessage {
   loading?: boolean;
@@ -46,7 +49,11 @@ const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
   if (!ui.url) return;
 
   if (ui.mode === 'module')
-    return <SystemJsRender content={contentObj} name={name || 'unknown'} url={ui.url} />;
+    return (
+      <Suspense fallback={<Skeleton active style={{ width: 300 }} />}>
+        <SystemJsRender content={contentObj} name={name || 'unknown'} url={ui.url} />
+      </Suspense>
+    );
 
   return (
     <IFrameRender

package/src/app/chat/layout.tsx

@@ -1,14 +1,15 @@
 import { PropsWithChildren } from 'react';
 
+import ResponsiveLayout from '@/components/ResponsiveLayout';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Desktop from './(desktop)/layout';
 import Mobile from './(mobile)/layout';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  const mobile = isMobileDevice();
-
-  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
-};
+const Layout = ({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>
+    {children}
+  </ResponsiveLayout>
+);
 
 export default Layout;

package/src/app/market/features/AgentCard/index.tsx

@@ -1,11 +1,11 @@
 import { SpotlightCard } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import { shuffle } from 'lodash-es';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
+import { AgentsMarketIndexItem } from '@/types/market';
 
 import TagList from '../TagList';
 import AgentCardItem from './AgentCardItem';
@@ -14,23 +14,30 @@ import { useStyles } from './style';
 
 const gridRender = (item: any) => <AgentCardItem {...item} />;
 
-const AgentCard = memo(() => {
-  const { mobile } = useResponsive();
-  const agentList = useMarketStore(agentMarketSelectors.getAgentList);
+export interface AgentCardProps {
+  defaultAgents?: AgentsMarketIndexItem[];
+}
+
+const AgentCard = memo<AgentCardProps>(({ defaultAgents }) => {
   const { t } = useTranslation('market');
+  const { mobile } = useResponsive();
+  const { styles } = useStyles();
+
   const [useFetchAgentList, keywords] = useMarketStore((s) => [
     s.useFetchAgentList,
     s.searchKeywords,
   ]);
-  const { styles } = useStyles();
-  const { isLoading } = useFetchAgentList();
+  useFetchAgentList();
+
+  const clientAgentList = useMarketStore(agentMarketSelectors.getAgentList);
+  const agentList = clientAgentList.length === 0 && defaultAgents ? defaultAgents : clientAgentList;
 
   const agentListData = useMemo(() => {
     if (!keywords) return agentList;
     return agentList.filter(({ meta }) => JSON.stringify(meta).toLowerCase().includes(keywords));
   }, [agentList, keywords]);
 
-  if (isLoading || !agentList) return <Loading />;
+  if (agentList.length === 0) return <Loading />;
 
   return (
     <Flexbox gap={mobile ? 16 : 24}>
@@ -42,11 +49,7 @@ const AgentCard = memo(() => {
           <div className={styles.subTitle}>{t('title.recentSubmits')}</div>
           <SpotlightCard items={agentListData.slice(0, 3)} renderItem={gridRender} />
           <div className={styles.subTitle}>{t('title.allAgents')}</div>
-          <SpotlightCard
-            items={shuffle(agentListData.slice(3))}
-            renderItem={gridRender}
-            spotlight={false}
-          />
+          <SpotlightCard items={agentListData.slice(3)} renderItem={gridRender} spotlight={false} />
         </>
       )}
     </Flexbox>

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

@@ -16,7 +16,7 @@ const TagList = memo(() => {
         <Button
           key={item}
           onClick={() => useMarketStore.setState({ searchKeywords: item })}
-          size={'small'}
+          shape={'round'}
           type={keywords === item ? 'primary' : 'default'}
         >
           {startCase(item)}

package/src/app/market/index.tsx

@@ -1,39 +1,29 @@
 'use client';
 
-import { useResponsive } from 'antd-style';
-import Head from 'next/head';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import PageTitle from '@/components/PageTitle';
 import { useMarketStore } from '@/store/market';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import AgentCard from './features/AgentCard';
+import AgentCard, { AgentCardProps } from './features/AgentCard';
 import AgentSearchBar from './features/AgentSearchBar';
-import DesktopLayout from './layout.desktop';
-import MobileLayout from './layout.mobile';
 
-const Market = memo(() => {
+const Market = memo<AgentCardProps>(({ defaultAgents }) => {
   const { t } = useTranslation('common');
   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 (
     <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <RenderLayout>
-        <AgentSearchBar />
-        <AgentCard />
-      </RenderLayout>
+      <PageTitle title={pageTitle} />
+      <AgentSearchBar />
+      <AgentCard defaultAgents={defaultAgents} />
     </>
   );
 });

package/src/app/market/{layout.desktop.tsx → layout.desktop/Desktop.tsx}

@@ -8,9 +8,9 @@ import { MAX_WIDTH } from '@/const/layoutTokens';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import AppLayout from '../../layout/AppLayout';
-import Header from './features/Header';
-import SideBar from './features/SideBar';
+import AppLayout from '../../../layout/AppLayout';
+import Header from '../features/Header';
+import SideBar from '../features/SideBar';
 
 const useStyles = createStyles(({ css }) => ({
   background: css`

package/src/app/market/layout.desktop/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import Mobile from '../layout.mobile';
+import Desktop from './Desktop';
+
+const Market = ({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile}>
+    {children}
+  </ResponsiveLayout>
+);
+
+export default Market;

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

@@ -1,4 +1,6 @@
-import { ReactNode, memo } from 'react';
+'use client';
+
+import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
@@ -8,7 +10,7 @@ import { SidebarTabKey } from '@/store/global/initialState';
 import Header from './features/Header';
 import SideBar from './features/SideBar';
 
-const MarketLayout = memo<{ children: ReactNode }>(({ children }) => {
+const MarketLayout = ({ children }: PropsWithChildren) => {
   useSwitchSideBarOnInit(SidebarTabKey.Market);
 
   return (
@@ -19,6 +21,6 @@ const MarketLayout = memo<{ children: ReactNode }>(({ children }) => {
       <SideBar />
     </AppMobileLayout>
   );
-});
+};
 
 export default MarketLayout;

package/src/app/market/layout.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './layout.desktop';
+import Mobile from './layout.mobile';
+
+export default ({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>
+    {children}
+  </ResponsiveLayout>
+);

package/src/app/market/page.tsx

@@ -1,7 +1,29 @@
-import Page from './index';
+import { cookies } from 'next/headers';
 
-const Index = () => {
-  return <Page />;
+import { LOBE_LOCALE_COOKIE } from '@/const/locale';
+import { getAgentIndexJSON } from '@/const/url';
+import { Locales } from '@/locales/resources';
+import { LobeChatAgentsMarketIndex } from '@/types/market';
+
+import Market from './index';
+
+const getAgentList = async (): Promise<LobeChatAgentsMarketIndex> => {
+  const cookieStore = cookies();
+  const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
+
+  try {
+    const res = await fetch(getAgentIndexJSON(lang?.value as Locales));
+
+    return res.json();
+  } catch {
+    return { agents: [], schemaVersion: 1 };
+  }
+};
+
+const Page = async () => {
+  const data = await getAgentList();
+
+  return <Market defaultAgents={data.agents} />;
 };
 
-export default Index;
+export default Page;

package/src/app/settings/layout.desktop/Desktop.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, memo } from 'react';
+import { PropsWithChildren } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
@@ -7,7 +7,7 @@ import AppLayout from '@/layout/AppLayout';
 import Header from '../features/Header';
 import SideBar from '../features/SideBar';
 
-const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
+const SettingLayout = ({ children }: PropsWithChildren) => {
   return (
     <AppLayout>
       <SideBar />
@@ -22,6 +22,6 @@ const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
       </Flexbox>
     </AppLayout>
   );
-});
+};
 
 export default SettingLayout;

package/src/app/settings/layout.desktop/index.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { useResponsive } from 'antd-style';
-import { ReactNode, memo } from 'react';
+import { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
@@ -12,21 +13,20 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 import MobileLayout from '../layout.mobile';
 import DesktopLayout from './Desktop';
 
-const Setting = memo<{ children: ReactNode }>(({ children }) => {
-  const { mobile } = useResponsive();
+const Setting = ({ children }: PropsWithChildren) => {
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('header.global'));
 
-  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
-
   useSwitchSideBarOnInit(SidebarTabKey.Setting);
 
   return (
     <>
       <PageTitle title={pageTitle} />
-      <RenderLayout>{children}</RenderLayout>
+      <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} isMobile={useIsMobile}>
+        {children}
+      </ResponsiveLayout>
     </>
   );
-});
+};
 
 export default Setting;

package/src/app/settings/layout.mobile.tsx

@@ -1,18 +1,16 @@
 'use client';
 
-import { ReactNode, memo } from 'react';
+import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
 
 import Header from './features/Header';
 
-const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
-  return (
-    <AppMobileLayout navBar={<Header />}>
-      <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
-    </AppMobileLayout>
-  );
-});
+const SettingLayout = ({ children }: PropsWithChildren) => (
+  <AppMobileLayout navBar={<Header />}>
+    <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
+  </AppMobileLayout>
+);
 
 export default SettingLayout;

package/src/app/settings/layout.tsx

@@ -1,14 +1,15 @@
 import { PropsWithChildren } from 'react';
 
+import ResponsiveLayout from '@/components/ResponsiveLayout';
 import { isMobileDevice } from '@/utils/responsive';
 
 import Desktop from './layout.desktop';
 import Mobile from './layout.mobile';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  const mobile = isMobileDevice();
-
-  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
-};
+const Layout = ({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>
+    {children}
+  </ResponsiveLayout>
+);
 
 export default Layout;

package/src/components/ResponsiveLayout.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren, ReactNode } from 'react';
+
+interface ServerResponsiveLayoutProps {
+  Desktop: (props: PropsWithChildren) => ReactNode;
+  Mobile: (props: PropsWithChildren) => ReactNode;
+  children: ReactNode;
+  isMobile: () => boolean;
+}
+const ResponsiveLayout = ({ children, Desktop, Mobile, isMobile }: ServerResponsiveLayoutProps) => {
+  const mobile = isMobile();
+
+  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+};
+
+export default ResponsiveLayout;

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,7 @@
+import { useResponsive } from 'antd-style';
+
+export const useIsMobile = (): boolean => {
+  const { mobile } = useResponsive();
+
+  return !!mobile;
+};

package/src/services/agentMarket.ts

@@ -1,5 +1,6 @@
 import { getAgentIndexJSON, getAgentJSON } from '@/const/url';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { LobeChatAgentsMarketIndex } from '@/types/market';
 
 /**
  * 请求助手列表
@@ -9,7 +10,9 @@ export const getAgentList = async () => {
     getAgentIndexJSON(settingsSelectors.currentLanguage(useGlobalStore.getState())),
   );
 
-  return res.json();
+  const data: LobeChatAgentsMarketIndex = await res.json();
+
+  return data;
 };
 
 /**

package/src/services/latestVersion.ts

@@ -0,0 +1 @@
+fetch('https://registry.npmmirror.com/@lobehub/chat');

package/src/store/market/store.ts

@@ -24,7 +24,7 @@ const persistOptions: PersistOptions<Store> = {
       selectors: ['agentMap'],
     },
     url: {
-      mode: 'hash',
+      mode: 'search',
       selectors: [
         // map state key to storage key
         { currentIdentifier: 'agent' },

package/src/store/middleware/createHyperStorage/urlStorage.ts

@@ -15,7 +15,11 @@ const createUrlSearch = (mode: 'search' | 'hash' = 'hash'): UrlSearchHelper => {
 
   return {
     getUrlSearch: () => location.search.slice(1),
-    setUrlSearch: (params: URLSearchParams) => (location.search = params.toString()),
+    setUrlSearch: (params: URLSearchParams) => {
+      if (params.size === 0) return;
+
+      history.replaceState({}, '', '?' + params.toString());
+    },
   };
 };