@lobehub/chat 0.82.8 → 0.82.9

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 0.82.9](https://github.com/lobehub/lobe-chat/compare/v0.82.8...v0.82.9)
+
+<sup>Released on **2023-10-05**</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.82.8](https://github.com/lobehub/lobe-chat/compare/v0.82.7...v0.82.8)
 
 <sup>Released on **2023-09-30**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.82.8",
+  "version": "0.82.9",
   "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/{features/Header → (desktop)/features/ChatHeader}/Desktop.tsx

@@ -12,8 +12,8 @@ import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import PluginTag from './PluginTag';
-import ShareButton from './ShareButton';
+import PluginTag from '../../../components/ChatHeader/PluginTag';
+import ShareButton from '../../../components/ChatHeader/ShareButton';
 
 const Header = memo(() => {
   const init = useSessionChatInit();

package/src/app/chat/{features/Header → (desktop)/features/ChatHeader}/index.tsx

@@ -1,8 +1,8 @@
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import Mobile from '../../../components/ChatHeader/Mobile';
 import Desktop from './Desktop';
-import Mobile from './Mobile';
 
 const Header = memo(() => {
   const { mobile } = useResponsive();

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

@@ -0,0 +1,22 @@
+import { useResponsive } from 'antd-style';
+import { memo, useState } from 'react';
+
+import { ChatInputContent } from '../../../components/ChatInput';
+import Mobile from '../../../components/ChatInput/Mobile';
+import Desktop from './Desktop';
+
+const ChatInput = () => {
+  const [expand, setExpand] = useState<boolean>(false);
+
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  return (
+    <Render expand={expand}>
+      <ChatInputContent expand={expand} onExpandChange={setExpand} />
+    </Render>
+  );
+};
+
+export default memo(ChatInput);

package/src/app/chat/{features/SessionList/Header → (desktop)/features/SessionHeader}/Desktop.tsx

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
-import SessionSearchBar from '../../SessionSearchBar';
+import SessionSearchBar from '../../../features/SessionSearchBar';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`

package/src/app/chat/{features/SessionList/Header → (desktop)/features/SessionHeader}/index.tsx

@@ -1,8 +1,8 @@
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import Mobile from '../../../(mobile)/features/SessionHeader';
 import Desktop from './Desktop';
-import Mobile from './Mobile';
 
 const Header = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/{features → (desktop)/features}/SessionList/Desktop.tsx

@@ -4,7 +4,7 @@ import { ReactNode, memo } from 'react';
 
 import FolderPanel from '@/features/FolderPanel';
 
-import Header from './Header';
+import Header from '../SessionHeader';
 
 const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
 

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

@@ -0,0 +1,20 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import { SessionListContent } from '../../../components/SessionList';
+import Mobile from '../../../components/SessionList/Mobile';
+import Desktop from './Desktop';
+
+const ResponsiveSessionList = memo(() => {
+  const { mobile } = useResponsive();
+
+  const Wrapper = mobile ? Mobile : Desktop;
+
+  return (
+    <Wrapper>
+      <SessionListContent />
+    </Wrapper>
+  );
+});
+
+export default ResponsiveSessionList;

package/src/app/chat/{features/Sidebar → (desktop)/features/SideBar}/Desktop.tsx

@@ -6,9 +6,9 @@ import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/slices/session/selectors';
+import { sessionSelectors } from '@/store/session/selectors';
 
-import SystemRole from './SystemRole';
+import SystemRole from '../../../components/Inspector/SystemRole';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -23,7 +23,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SideBar = memo<{ children: ReactNode }>(({ children }) => {
+const Desktop = memo<{ children: ReactNode }>(({ children }) => {
   const { styles } = useStyles();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
@@ -55,4 +55,4 @@ const SideBar = memo<{ children: ReactNode }>(({ children }) => {
   );
 });
 
-export default SideBar;
+export default Desktop;

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

@@ -0,0 +1,20 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import { InspectorContent } from '../../../components/Inspector';
+import Mobile from '../../../components/Inspector/Mobile';
+import Desktop from './Desktop';
+
+const SideBar = memo(() => {
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  return (
+    <Render>
+      <InspectorContent />
+    </Render>
+  );
+});
+
+export default SideBar;

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Conversation from '../features/Conversation';
+import PageTitle from '../features/PageTitle';
+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>
+    </>
+  );
+});
+export default DesktopPage;

package/src/app/chat/{layout.desktop.tsx → (desktop)/layout/Desktop.tsx}

@@ -5,14 +5,14 @@ import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import { Sessions } from './features/SessionList';
+import ResponsiveSessionList from '../features/SessionList';
 
-const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+const Desktop = memo<PropsWithChildren>(({ children }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Chat);
 
   return (
     <AppLayout>
-      <Sessions />
+      <ResponsiveSessionList />
       <Flexbox
         flex={1}
         height={'100vh'}
@@ -25,4 +25,4 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default ChatLayout;
+export default Desktop;

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

@@ -0,0 +1,25 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
+
+import MobileLayout from '../../(mobile)/layout';
+import DesktopLayout from './Desktop';
+
+const Chat = memo<PropsWithChildren>(({ children }) => {
+  const { mobile } = useResponsive();
+
+  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
+
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
+  return <RenderLayout>{children}</RenderLayout>;
+});
+export default Chat;

package/src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -0,0 +1 @@
+export { default } from '../../components/ChatHeader/Mobile';

package/src/app/chat/(mobile)/features/ChatInput.tsx

@@ -0,0 +1,14 @@
+import { memo } from 'react';
+
+import { ChatInputContent } from '../../components/ChatInput';
+import Mobile from '../../components/ChatInput/Mobile';
+
+const ChatInput = () => {
+  return (
+    <Mobile>
+      <ChatInputContent mobile />
+    </Mobile>
+  );
+};
+
+export default memo(ChatInput);

package/src/app/chat/(mobile)/features/SessionList.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { SessionListContent } from '../../components/SessionList';
+import Wrapper from '../../components/SessionList/Mobile';
+
+const SessionList = memo(() => (
+  <Wrapper>
+    <SessionListContent />
+  </Wrapper>
+));
+
+export default SessionList;

package/src/app/chat/(mobile)/features/Topics.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { InspectorContent } from '../../components/Inspector';
+import Mobile from '../../components/Inspector/Mobile';
+
+const Topics = memo(() => (
+  <Mobile>
+    <InspectorContent />
+  </Mobile>
+));
+
+export default Topics;

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import PageTitle from '../features/PageTitle';
+import SessionHeader from './features/SessionHeader';
+import SessionList from './features/SessionList';
+
+const ChatMobilePage = memo(() => {
+  return (
+    <AppMobileLayout navBar={<SessionHeader />} showTabBar>
+      <PageTitle />
+      <SessionList />
+    </AppMobileLayout>
+  );
+});
+
+export default ChatMobilePage;

package/src/app/chat/(mobile)/layout.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import { useEffectAfterSessionHydrated } from '@/store/session';
+
+const ChatMobileLayout = memo<PropsWithChildren>(({ children }) => {
+  useEffectAfterSessionHydrated((store) => {
+    store.setState({ isMobile: true });
+  }, []);
+
+  return children;
+});
+
+export default ChatMobileLayout;

package/src/app/chat/(mobile)/mobile/page.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Conversation from '../../features/Conversation';
+import Header from '../features/ChatHeader';
+import ChatInput from '../features/ChatInput';
+import Topics from '../features/Topics';
+
+const Chat = memo(() => (
+  <AppMobileLayout navBar={<Header />}>
+    <Flexbox height={'calc(100vh - 44px)'} horizontal>
+      <Conversation chatInput={<ChatInput />} mobile />
+      <Topics />
+    </Flexbox>
+  </AppMobileLayout>
+));
+export default Chat;

package/src/app/chat/{features/Header → components/ChatHeader}/Mobile.tsx

@@ -4,13 +4,14 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import ShareButton from '@/app/chat/features/Header/ShareButton';
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
+import ShareButton from './ShareButton';
+
 const MobileHeader = memo(() => {
   const { t } = useTranslation('common');
   const router = useRouter();

package/src/app/chat/{features/Header → components/ChatHeader}/ShareButton/Preview.tsx

@@ -6,14 +6,14 @@ import { toJpeg, toPng, toSvg } from 'html-to-image';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import ChatList from 'src/app/chat/features/Conversation/ChatList';
 
-import pkg from '@/../package.json';
-import ChatList from '@/app/chat/features/Conversation/ChatList';
-import PluginTag from '@/app/chat/features/Header/PluginTag';
+import PluginTag from '@/app/chat/components/ChatHeader/PluginTag';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/slices/agentConfig';
 import { sessionSelectors } from '@/store/session/slices/session/selectors';
 
+import pkg from '../../../../../../package.json';
 import { useStyles } from './style';
 
 export enum ImageType {

package/src/app/chat/{features/Conversation/Input → components/ChatInput}/index.tsx

@@ -9,28 +9,32 @@ import { useSessionStore } from '@/store/session';
 
 import ActionLeft from './ActionBar/ActionLeft';
 import ActionsRight from './ActionBar/ActionRight';
-import Desktop from './Desktop';
 import Footer from './Footer';
-import Mobile from './Mobile';
 
 const Token = dynamic(() => import('./ActionBar/Token'), { ssr: false });
 
-const ChatInput = () => {
-  const { t } = useTranslation('common');
-  const [expand, setExpand] = useState<boolean>(false);
-  const [message, setMessage] = useState('');
-  const { mobile } = useResponsive();
+interface ChatContentProps {
+  expand?: boolean;
+  mobile?: boolean;
+  onExpandChange?: (expand: boolean) => void;
+}
 
-  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
-    !!s.chatLoadingId,
-    s.sendMessage,
-    s.stopGenerateMessage,
-  ]);
+export const ChatInputContent = memo<ChatContentProps>(
+  ({ expand, onExpandChange, mobile: defaultMobile }) => {
+    const { t } = useTranslation('common');
 
-  const Render = mobile ? Mobile : Desktop;
+    const [message, setMessage] = useState('');
+    const { mobile: runtimeMobile } = useResponsive();
 
-  return (
-    <Render expand={expand}>
+    const mobile = runtimeMobile || defaultMobile;
+
+    const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
+      !!s.chatLoadingId,
+      s.sendMessage,
+      s.stopGenerateMessage,
+    ]);
+
+    return (
       <ChatInputArea
         actions={
           <>
@@ -45,7 +49,7 @@ const ChatInput = () => {
         footer={<Footer />}
         loading={isLoading}
         minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
-        onExpandChange={setExpand}
+        onExpandChange={onExpandChange}
         onInputChange={setMessage}
         onSend={sendMessage}
         onStop={stopGenerateMessage}
@@ -56,8 +60,6 @@ const ChatInput = () => {
         }}
         value={message}
       />
-    </Render>
-  );
-};
-
-export default memo(ChatInput);
+    );
+  },
+);

package/src/app/chat/components/Inspector/index.tsx

@@ -0,0 +1,17 @@
+import { Flexbox } from 'react-layout-kit';
+
+import { Topic } from './Topic';
+import TopicSearchBar from './TopicSearchBar';
+
+export const InspectorContent = () => {
+  return (
+    <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
+      <Flexbox padding={16}>
+        <TopicSearchBar />
+      </Flexbox>
+      <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
+        <Topic />
+      </Flexbox>
+    </Flexbox>
+  );
+};

package/src/app/chat/{features → components}/SessionList/Mobile.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, memo } from 'react';
 
-import SessionSearchBar from '../SessionSearchBar';
+import SessionSearchBar from '../../features/SessionSearchBar';
 
 const Sessions = memo<{ children: ReactNode }>(({ children }) => {
   return (

package/src/app/chat/{features → components}/SessionList/index.tsx

@@ -1,20 +1,13 @@
 import { CollapseProps } from 'antd';
-import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import CollapseGroup from './CollapseGroup';
-import Desktop from './Desktop';
 import Inbox from './Inbox';
 import SessionList from './List';
-import Mobile from './Mobile';
 
-export const Sessions = memo(() => {
-  const { mobile } = useResponsive();
+export const SessionListContent = memo(() => {
   const { t } = useTranslation('common');
-
-  const Render = mobile ? Mobile : Desktop;
-
   const items: CollapseProps['items'] = useMemo(
     () => [
       {
@@ -27,9 +20,9 @@ export const Sessions = memo(() => {
   );
 
   return (
-    <Render>
+    <>
       <Inbox />
       <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
-    </Render>
+    </>
   );
 });

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

@@ -1,6 +1,6 @@
 import { BackBottom } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useRef } from 'react';
+import { ReactNode, memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -8,7 +8,6 @@ import SafeSpacing from '@/components/SafeSpacing';
 import { usePluginStore } from '@/store/plugin';
 
 import ChatList from './ChatList';
-import ChatInput from './Input';
 import ChatScrollAnchor from './ScrollAnchor';
 
 const useStyles = createStyles(
@@ -23,7 +22,12 @@ const useStyles = createStyles(
   `,
 );
 
-const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
+interface ConversationProps {
+  chatInput: ReactNode;
+  mobile?: boolean;
+}
+
+const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
   const { styles } = useStyles();
@@ -41,7 +45,7 @@ const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
         </div>
         <BackBottom target={ref} text={t('backToBottom')} />
       </div>
-      <ChatInput />
+      {chatInput}
     </Flexbox>
   );
 });

package/src/app/chat/features/PageTitle.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { memo } from 'react';
+
+import PageTitle from '@/components/PageTitle';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+const Title = memo(() => {
+  const [avatar, title] = useSessionStore((s) => [
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
+  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
+
+  return <PageTitle title={pageTitle} />;
+});
+export default Title;

package/src/app/chat/layout.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+
+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>;
+};
+
+export default Layout;

package/src/app/chat/page.tsx

@@ -1,7 +1,12 @@
-import Page from './index';
+import { isMobileDevice } from '@/utils/responsive';
 
-const Index = () => {
-  return <Page />;
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  return mobile ? <MobilePage /> : <DesktopPage />;
 };
 
-export default Index;
+export default Page;

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

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+import { HeaderContent } from '@/app/chat/settings/components/Header';
+
+import Layout from './Desktop';
+
+const Header = memo(() => (
+  <Layout>
+    <HeaderContent />
+  </Layout>
+));
+
+export default Header;