@lobehub/chat 0.57.0 → 0.59.0

package/src/pages/chat/features/Conversation/ChatList/Plugins/CustomRender.tsx

@@ -1,6 +1,6 @@
 import { PluginRender, PluginRenderProps } from '@lobehub/chat-plugin-sdk';
 import { Skeleton } from 'antd';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { system } from './dynamticLoader';
 
@@ -10,7 +10,7 @@ interface CustomRenderProps extends PluginRenderProps {
 const CustomRender = memo<CustomRenderProps>(({ url, ...props }) => {
   const [component, setComp] = useState<PluginRender | null>(null);
 
-  if (!component) {
+  useEffect(() => {
     system
       .import(url)
       .then((module1) => {
@@ -21,12 +21,14 @@ const CustomRender = memo<CustomRenderProps>(({ url, ...props }) => {
         setComp(null);
         console.error(error);
       });
+  }, [url]);
 
+  if (!component) {
     return <Skeleton active style={{ width: 300 }} />;
   }
 
-  const Comp = component;
+  const Render = component;
 
-  return <Comp {...props} />;
+  return <Render {...props} />;
 });
 export default CustomRender;

package/src/pages/chat/features/Conversation/index.tsx

@@ -3,19 +3,19 @@ import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
 
 import ChatList from './ChatList';
 import ChatInput from './Input';
 
-const Conversation = () => {
+const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
         <div ref={ref} style={{ height: '100%', overflowY: 'scroll' }}>
-          <HeaderSpacing />
+          {!mobile && <SafeSpacing />}
           <ChatList />
         </div>
         <BackBottom target={ref} text={t('backToBottom')} />
@@ -23,6 +23,6 @@ const Conversation = () => {
       <ChatInput />
     </Flexbox>
   );
-};
+});
 
-export default memo(Conversation);
+export default Conversation;

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

@@ -0,0 +1,47 @@
+import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { LayoutList, Settings } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useGlobalStore } from '@/store/global';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+const MobileHeader = memo<{ settings?: boolean }>(({ settings = true }) => {
+  const { t } = useTranslation('common');
+
+  const [id, title, model] = useSessionStore((s) => [
+    s.activeId,
+    agentSelectors.currentAgentTitle(s),
+    agentSelectors.currentAgentModel(s),
+  ]);
+
+  const isInbox = id === INBOX_SESSION_ID;
+  const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+
+  return (
+    <MobileNavBar
+      center={<MobileNavBarTitle desc={model} title={displayTitle} />}
+      onBackClick={() => Router.back()}
+      right={
+        <>
+          <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />
+          {settings && (
+            <ActionIcon
+              icon={Settings}
+              onClick={() => {
+                Router.push(`/chat/${id}/setting`);
+              }}
+            />
+          )}
+        </>
+      }
+      showBackButton
+    />
+  );
+});
+
+export default MobileHeader;

package/src/pages/chat/features/Header/PC.tsx

@@ -0,0 +1,101 @@
+import { SiOpenai } from '@icons-pack/react-simple-icons';
+import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useGlobalStore } from '@/store/global';
+import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
+
+import PluginTag from './PluginTag';
+
+const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
+  const init = useSessionChatInit();
+
+  const { t } = useTranslation('common');
+
+  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
+    s.activeId,
+
+    agentSelectors.currentAgentTitle(s),
+    agentSelectors.currentAgentDescription(s),
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentBackgroundColor(s),
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentPlugins(s),
+  ]);
+
+  const isInbox = id === INBOX_SESSION_ID;
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    s.preference.showChatSideBar,
+    s.toggleChatSideBar,
+  ]);
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+  const displayDesc = isInbox ? t('inbox.desc') : description;
+
+  return (
+    <ChatHeader
+      left={
+        !init ? (
+          <Flexbox horizontal>
+            <Skeleton
+              active
+              avatar={{ shape: 'circle', size: 'default' }}
+              paragraph={false}
+              title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
+            />
+          </Flexbox>
+        ) : (
+          <Flexbox align={'flex-start'} gap={12} horizontal>
+            <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
+            <ChatHeaderTitle
+              desc={displayDesc}
+              tag={
+                <>
+                  <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
+                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+                </>
+              }
+              title={displayTitle}
+            />
+          </Flexbox>
+        )
+      }
+      right={
+        <>
+          {/*<ActionIcon*/}
+          {/*  icon={Share2}*/}
+          {/*  onClick={() => {*/}
+          {/*    // genShareUrl();*/}
+          {/*  }}*/}
+          {/*  size={{ fontSize: 24 }}*/}
+          {/*  title={t('share')}*/}
+          {/*/>*/}
+          <ActionIcon
+            icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
+            onClick={() => toggleConfig()}
+            size={{ fontSize: 24 }}
+            title={t('roleAndArchive')}
+          />
+          {settings && (
+            <ActionIcon
+              icon={Settings}
+              onClick={() => {
+                Router.push(`/chat/${id}/setting`);
+              }}
+              size={{ fontSize: 24 }}
+              title={t('header.session', { ns: 'setting' })}
+            />
+          )}
+        </>
+      }
+    />
+  );
+});
+
+export default Header;

package/src/pages/chat/features/Header/PluginTag.tsx

@@ -1,33 +1,59 @@
-import { Avatar, Icon, Tag } from '@lobehub/ui';
+import { ActionIcon, Avatar, Icon, Tag } from '@lobehub/ui';
 import type { MenuProps } from 'antd';
-import { Dropdown } from 'antd';
-import { LucideToyBrick } from 'lucide-react';
-import { memo } from 'react';
+import { Badge, Dropdown } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { LucideRotateCw, LucideToyBrick } from 'lucide-react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { usePluginStore } from '@/store/plugin';
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+
+const PluginStatus = memo<{ id: string; title?: string }>(({ title, id }) => {
+  const { t } = useTranslation('common');
+  const status = usePluginStore(pluginSelectors.getPluginManifestLoadingStatus(id));
+
+  const renderStatus = useMemo(() => {
+    switch (status) {
+      case 'loading': {
+        return <Badge color={'blue'} status={'processing'} />;
+      }
+      case 'error': {
+        return <ActionIcon icon={LucideRotateCw} size={'small'} title={t('retry')} />;
+      }
+      case 'success': {
+        return <Badge status={status} />;
+      }
+    }
+  }, [status]);
+
+  return (
+    <Flexbox gap={12} horizontal justify={'space-between'}>
+      {title} {renderStatus}
+    </Flexbox>
+  );
+});
 
 export interface PluginTagProps {
   plugins: string[];
 }
 
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
-  const { t } = useTranslation('plugin');
-
-  const list = usePluginStore((s) => s.pluginList);
+  const list = usePluginStore(pluginSelectors.displayPluginList);
+  const displayPlugin = usePluginStore(pluginSelectors.getPluginMetaById(plugins[0]), isEqual);
 
   if (plugins.length === 0) return null;
 
   const items: MenuProps['items'] = plugins.map((id) => {
-    const item = list?.find((p) => p.identifier === id);
+    const item = list.find((i) => i.identifier === id);
+
     return {
-      icon: (
-        <Avatar avatar={item?.meta.avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />
-      ),
+      icon: <Avatar avatar={item?.avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />,
       key: id,
-      label: t(`plugins.${id}` as any),
+      label: <PluginStatus id={id} title={item?.title} />,
     };
   });
+
   const count = plugins.length;
 
   return (
@@ -35,7 +61,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
       <div>
         <Tag>
           {<Icon icon={LucideToyBrick} />}
-          {t(`plugins.${plugins[0]}` as any)}
+          {pluginHelpers.getPluginTitle(displayPlugin?.meta)}
           {count > 1 && <div>({plugins.length - 1}+)</div>}
         </Tag>
       </div>

package/src/pages/chat/features/Header/index.tsx

@@ -1,101 +1,15 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
-import Router from 'next/router';
+import { useResponsive } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { INBOX_SESSION_ID } from '@/const/session';
-import { useGlobalStore } from '@/store/global';
-import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
+import Mobile from './Mobile';
+import PC from './PC';
 
-import PluginTag from './PluginTag';
+const Header = memo<{ settings?: boolean }>((props) => {
+  const { mobile } = useResponsive();
 
-const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
-  const init = useSessionChatInit();
+  if (mobile) return <Mobile {...props} />;
 
-  const { t } = useTranslation('common');
-
-  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
-    s.activeId,
-
-    agentSelectors.currentAgentTitle(s),
-    agentSelectors.currentAgentDescription(s),
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentBackgroundColor(s),
-    agentSelectors.currentAgentModel(s),
-    agentSelectors.currentAgentPlugins(s),
-  ]);
-
-  const isInbox = id === INBOX_SESSION_ID;
-  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
-    s.preference.showChatSideBar,
-    s.toggleChatSideBar,
-  ]);
-
-  const displayTitle = isInbox ? t('inbox.title') : title;
-  const displayDesc = isInbox ? t('inbox.desc') : description;
-
-  return (
-    <ChatHeader
-      left={
-        !init ? (
-          <Flexbox horizontal>
-            <Skeleton
-              active
-              avatar={{ shape: 'circle', size: 'default' }}
-              paragraph={false}
-              title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
-            />
-          </Flexbox>
-        ) : (
-          <Flexbox align={'flex-start'} gap={12} horizontal>
-            <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
-            <ChatHeaderTitle
-              desc={displayDesc}
-              tag={
-                <>
-                  <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
-                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
-                </>
-              }
-              title={displayTitle}
-            />
-          </Flexbox>
-        )
-      }
-      right={
-        <>
-          {/*<ActionIcon*/}
-          {/*  icon={Share2}*/}
-          {/*  onClick={() => {*/}
-          {/*    // genShareUrl();*/}
-          {/*  }}*/}
-          {/*  size={{ fontSize: 24 }}*/}
-          {/*  title={t('share')}*/}
-          {/*/>*/}
-          <ActionIcon
-            icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
-            onClick={() => toggleConfig()}
-            size={{ fontSize: 24 }}
-            title={t('roleAndArchive')}
-          />
-          {settings && (
-            <ActionIcon
-              icon={Settings}
-              onClick={() => {
-                Router.push(`/chat/${id}/setting`);
-              }}
-              size={{ fontSize: 24 }}
-              title={t('header.session', { ns: 'setting' })}
-            />
-          )}
-        </>
-      }
-    />
-  );
+  return <PC {...props} />;
 });
 
 export default Header;

package/src/pages/chat/features/Sidebar/Header.tsx

@@ -2,24 +2,26 @@ import { createStyles } from 'antd-style';
 import { type ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const useStyles = createStyles(
-  ({ css, token }) => css`
+const useStyles = createStyles(({ css, token }) => ({
+  header: css`
     z-index: 10;
     box-shadow: 0 2px 6px ${token.colorBgLayout};
   `,
-);
+}));
 
 interface HeaderProps {
   actions?: ReactNode;
+  mobile?: boolean;
   title: string;
 }
 
 const Header = memo<HeaderProps>(({ title, actions }) => {
   const { styles } = useStyles();
+
   return (
     <Flexbox
       align={'center'}
-      className={styles}
+      className={styles.header}
       distribution={'space-between'}
       horizontal
       padding={12}

package/src/pages/chat/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 { useGlobalStore } from '@/store/global';
+
+const Mobile = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    s.preference.mobileShowTopic,
+    s.toggleMobileTopic,
+  ]);
+
+  const { t } = useTranslation('common');
+
+  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={() => toggleConfig(false)}
+      open={showAgentSettings}
+      placement={'bottom'}
+      title={t('topic.title')}
+    >
+      {children}
+    </Drawer>
+  );
+});
+
+export default Mobile;

package/src/pages/chat/features/Sidebar/SystemRole.tsx

@@ -44,7 +44,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SystemRole = memo(() => {
+const SystemRole = memo<{ mobile?: boolean }>(() => {
   const [openModal, setOpenModal] = useState(false);
 
   const { styles } = useStyles();
@@ -62,7 +62,7 @@ const SystemRole = memo(() => {
           <ActionIcon
             icon={Edit}
             onClick={() => setOpenModal(true)}
-            size="small"
+            size={'small'}
             title={t('edit')}
           />
         }

package/src/pages/chat/features/Sidebar/index.tsx

@@ -5,20 +5,25 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
+import Mobile from './Mobile';
 import SystemRole from './SystemRole';
 import { Topic } from './Topic';
 
-const useStyles = createStyles(({ cx, css, token, stylish }) => ({
+const useStyles = createStyles(({ cx, css, token, stylish }, mobile: boolean) => ({
   content: css`
     display: flex;
     flex-direction: column;
   `,
   drawer: cx(
-    stylish.blurStrong,
+    mobile
+      ? css`
+          background: ${token.colorBgLayout} !important;
+        `
+      : stylish.blurStrong,
     css`
       background: ${rgba(token.colorBgLayout, 0.4)};
     `,
@@ -29,10 +34,11 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 }));
 
 interface SideBarProps {
+  mobile?: boolean;
   systemRole?: boolean;
 }
-const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
-  const { styles } = useStyles();
+const SideBar = memo<SideBarProps>(({ systemRole = true, mobile }) => {
+  const { styles } = useStyles(mobile);
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
@@ -40,6 +46,23 @@ const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
 
   const { t } = useTranslation('common');
 
+  const topic = (
+    <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
+      <Flexbox padding={16}>
+        <SearchBar
+          placeholder={t('topic.searchPlaceholder')}
+          spotlight={!mobile}
+          type={mobile ? 'block' : 'ghost'}
+        />
+      </Flexbox>
+      <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
+        <Topic />
+      </Flexbox>
+    </Flexbox>
+  );
+
+  if (mobile) return <Mobile>{topic}</Mobile>;
+
   return (
     <DraggablePanel
       className={styles.drawer}
@@ -48,22 +71,17 @@ const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
       }}
       expand={showAgentSettings}
       minWidth={CHAT_SIDEBAR_WIDTH}
+      mode={'fixed'}
       onExpandChange={toggleConfig}
       placement={'right'}
     >
       <DraggablePanelContainer
         style={{ flex: 'none', height: '100%', minWidth: CHAT_SIDEBAR_WIDTH }}
       >
-        <HeaderSpacing />
-        {systemRole && <SystemRole />}
-        <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-          <Flexbox padding={16}>
-            <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
-          </Flexbox>
-          <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
-            <Topic />
-          </Flexbox>
-        </Flexbox>
+        <SafeSpacing />
+        {systemRole && <SystemRole mobile={mobile} />}
+
+        {topic}
       </DraggablePanelContainer>
     </DraggablePanel>
   );

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

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,10 +12,11 @@ import Conversation from './features/Conversation';
 import Header from './features/Header';
 import SideBar from './features/Sidebar';
 import Layout from './layout';
+import Mobile from './mobile';
 
 const Chat = memo(() => {
   const { t } = useTranslation('common');
-
+  const { mobile } = useResponsive();
   const pageTitle = genSiteHeadTitle(t('inbox.title'));
 
   useOnFinishHydrationSession(() => {
@@ -26,13 +28,17 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Layout>
-        <Header settings={false} />
-        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-          <Conversation />
-          <SideBar systemRole={false} />
-        </Flexbox>
-      </Layout>
+      {mobile ? (
+        <Mobile />
+      ) : (
+        <Layout>
+          <Header settings={false} />
+          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+            <Conversation />
+            <SideBar systemRole={false} />
+          </Flexbox>
+        </Layout>
+      )}
     </>
   );
 });

package/src/pages/chat/layout.tsx

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -7,19 +8,22 @@ import { useSwitchSideBarOnInit } from '@/store/global';
 import { Sessions } from './SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+  const { mobile } = useResponsive();
   useSwitchSideBarOnInit('chat');
 
   return (
     <AppLayout>
       <Sessions />
-      <Flexbox
-        flex={1}
-        height={'100vh'}
-        id={'lobe-conversion-container'}
-        style={{ position: 'relative' }}
-      >
-        {children}
-      </Flexbox>
+      {!mobile && (
+        <Flexbox
+          flex={1}
+          height={'100vh'}
+          id={'lobe-conversion-container'}
+          style={{ position: 'relative' }}
+        >
+          {children}
+        </Flexbox>
+      )}
     </AppLayout>
   );
 });