@lobehub/chat 0.79.6 → 0.79.8

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.79.8](https://github.com/lobehub/lobe-chat/compare/v0.79.7...v0.79.8)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### 💄 Styles
+
+- **misc**: Fix safeare in mobile.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Fix safeare in mobile ([2adfb04](https://github.com/lobehub/lobe-chat/commit/2adfb04))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.79.7](https://github.com/lobehub/lobe-chat/compare/v0.79.6...v0.79.7)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Use hook to check PWA env.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Use hook to check PWA env ([b4234db](https://github.com/lobehub/lobe-chat/commit/b4234db))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.79.6](https://github.com/lobehub/lobe-chat/compare/v0.79.5...v0.79.6)
 
 <sup>Released on **2023-09-27**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.79.6",
+  "version": "0.79.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",
@@ -68,8 +68,8 @@
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",
-    "@lobehub/chat-plugin-sdk": "^1.17.7",
-    "@lobehub/chat-plugins-gateway": "^1.5.3",
+    "@lobehub/chat-plugin-sdk": "latest",
+    "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
@@ -88,16 +88,16 @@
     "lucide-react": "latest",
     "nanoid": "^5",
     "next": "^13.5.3",
-    "openai": "^4.10.0",
+    "openai": "^4",
     "polished": "^4",
     "react": "^18",
     "react-dom": "^18",
     "react-hotkeys-hook": "^4",
     "react-i18next": "^13",
     "react-intersection-observer": "^9",
-    "react-layout-kit": "^1.7.4",
+    "react-layout-kit": "^1",
     "swr": "^2",
-    "systemjs": "^6.14.2",
+    "systemjs": "^6",
     "ts-md5": "^1",
     "url-join": "^5",
     "use-merge-value": "^1",
@@ -118,7 +118,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/systemjs": "^6.13.3",
+    "@types/systemjs": "^6",
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",

package/public/manifest.json

@@ -4,23 +4,38 @@
   "display": "fullscreen",
   "icons": [
     {
-      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/android-chrome-192x192.png",
+      "src": "/icons/icon-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/android-chrome-512x512.png",
+      "src": "/icons/icon-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
+  "id": "/",
   "name": "LobeChat",
   "orientation": "portrait",
   "scope": "/",
   "screenshots": [
     {
-      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x720.png",
-      "sizes": "960x720",
+      "src": "https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-960x540.png",
+      "sizes": "960x540",
       "type": "image/png"
     }
   ],

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

@@ -1,4 +1,5 @@
 import { ChatList, RenderMessage } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,10 +16,22 @@ import FunctionCall from './Plugins/FunctionCall';
 import PluginMessage from './Plugins/PluginMessage';
 import SkeletonList from './SkeletonList';
 
-const List = () => {
+const useStyles = createStyles(({ css, responsive, cx, stylish }) =>
+  cx(
+    stylish.noScrollbar,
+    css`
+      overflow-x: hidden;
+      ${responsive.mobile} {
+        width: 100vw;
+      }
+    `,
+  ),
+);
+
+const List = memo(() => {
   const init = useSessionChatInit();
   const { t } = useTranslation('common');
-
+  const { styles } = useStyles();
   const data = useSessionStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
   const [
@@ -83,6 +96,7 @@ const List = () => {
 
   return (
     <ChatList
+      className={styles}
       data={data}
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
@@ -120,6 +134,6 @@ const List = () => {
       type={displayMode || 'chat'}
     />
   );
-};
+});
 
-export default memo(List);
+export default List;

package/src/app/chat/features/Conversation/Input/ActionBar/ActionRight.tsx

@@ -1,30 +1,36 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
+import { useResponsive } from 'antd-style';
 import { Eraser } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
 
+import SaveTopic from '../Footer/SaveTopic';
+
 const ActionsRight = memo(() => {
   const { t } = useTranslation('setting');
   const [clearMessage] = useSessionStore((s) => [s.clearMessage, s.updateAgentConfig]);
-
+  const { mobile } = useResponsive();
   return (
-    <Popconfirm
-      cancelText={t('cancel', { ns: 'common' })}
-      okButtonProps={{ danger: true }}
-      okText={t('ok', { ns: 'common' })}
-      onConfirm={() => clearMessage()}
-      placement={'topRight'}
-      title={t('confirmClearCurrentMessages', { ns: 'common' })}
-    >
-      <ActionIcon
-        icon={Eraser}
-        placement={'bottom'}
-        title={t('clearCurrentMessages', { ns: 'common' })}
-      />
-    </Popconfirm>
+    <>
+      {mobile && <SaveTopic />}
+      <Popconfirm
+        cancelText={t('cancel', { ns: 'common' })}
+        okButtonProps={{ danger: true }}
+        okText={t('ok', { ns: 'common' })}
+        onConfirm={() => clearMessage()}
+        placement={'topRight'}
+        title={t('confirmClearCurrentMessages', { ns: 'common' })}
+      >
+        <ActionIcon
+          icon={Eraser}
+          placement={'bottom'}
+          title={t('clearCurrentMessages', { ns: 'common' })}
+        />
+      </Popconfirm>
+    </>
   );
 });
 

package/src/app/chat/features/Conversation/Input/Mobile.tsx

@@ -1,12 +1,35 @@
+import { createStyles } from 'antd-style';
 import { ReactNode, memo } from 'react';
 
+import SafeSpacing from '@/components/SafeSpacing';
+import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 100vw;
+
+    background: ${token.colorBgLayout};
+  `,
+);
+
 interface ChatInputMobileLayoutProps {
   children: ReactNode;
   expand?: boolean;
 }
 
 const ChatInputMobileLayout = memo<ChatInputMobileLayoutProps>(({ children }) => {
-  return <div>{children}</div>;
+  const { styles } = useStyles();
+  return (
+    <>
+      <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
+      <div className={styles}>{children}</div>
+    </>
+  );
 });
 
 export default ChatInputMobileLayout;

package/src/app/chat/index.tsx

@@ -13,8 +13,8 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 import Conversation from './features/Conversation';
 import Header from './features/Header';
 import SideBar from './features/Sidebar';
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const Chat = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/settings/index.tsx

@@ -11,8 +11,8 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const EditPage = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/settings/{layout.pc.tsx → layout.desktop.tsx}

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 
-import ChatLayout from '../layout.pc';
+import ChatLayout from '../layout.desktop';
 import Header from './features/Header';
 
 const DesktopLayout = memo<PropsWithChildren>(({ children }) => {

package/src/app/layout.tsx

@@ -19,7 +19,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
 
   return (
-    <html lang="en">
+    <html lang="en-US">
       <body>
         <StyleRegistry>
           <Layout

package/src/app/market/index.tsx

@@ -10,8 +10,8 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import AgentCard from './features/AgentCard';
 import AgentSearchBar from './features/AgentSearchBar';
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const Market = memo(() => {
   const { t } = useTranslation('common');

package/src/app/metadata.ts

@@ -8,13 +8,6 @@ const title = genSiteHeadTitle();
 const description = pkg.description;
 const metadata: Metadata = {
   appleWebApp: {
-    startupImage: [
-      'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/splash-750x1624.png',
-      {
-        media: '(device-width: 768px) and (device-height: 1024px)',
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/splash-2048x2732.png',
-      },
-    ],
     statusBarStyle: 'black-translucent',
     title: title,
   },
@@ -23,10 +16,6 @@ const metadata: Metadata = {
     apple:
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/apple-touch-icon.png',
     icon: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon-32x32.png',
-    other: {
-      rel: 'mask-icon',
-      url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/safari-pinned-tab.svg',
-    },
     shortcut:
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
   },
@@ -37,17 +26,17 @@ const metadata: Metadata = {
       {
         alt: title,
         height: 360,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-480x360.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-480x270.png',
         width: 480,
       },
       {
         alt: title,
         height: 720,
-        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/og-960x720.png',
+        url: 'https://registry.npmmirror.com/@lobehub/assets-favicons/1.4.0/files/assets/og-960x540.png',
         width: 960,
       },
     ],
-    locale: 'en_US',
+    locale: 'en-US',
     siteName: title,
     title: title,
     type: 'website',
@@ -57,7 +46,7 @@ const metadata: Metadata = {
     { color: '#fff', media: '(prefers-color-scheme: light)' },
     { color: '#000', media: '(prefers-color-scheme: dark)' },
   ],
-  title: genSiteHeadTitle(),
+  title: title,
   viewport: {
     initialScale: 1,
     maximumScale: 1,

package/src/app/settings/index.tsx

@@ -9,8 +9,8 @@ import { useSwitchSideBarOnInit } from '@/store/global';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Settings from './features/Settings';
+import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
-import DesktopLayout from './layout.pc';
 
 const Setting = memo(() => {
   const { mobile } = useResponsive();

package/src/app/welcome/index.tsx

@@ -9,8 +9,8 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Banner from './features/Banner';
 import Footer from './features/Footer';
+import Layout from './layout.desktop';
 import Mobile from './layout.mobile';
-import Layout from './layout.pc';
 
 const Welcome = memo(() => {
   const { mobile } = useResponsive();

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

@@ -10,7 +10,7 @@ const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
     <AppMobileLayout
       navBar={<MobileNavBar center={<Logo type={'text'} />} />}
       showTabBar
-      style={{ background: theme.colorBgContainer }}
+      style={{ background: theme.colorBgLayout }}
     >
       {children}
     </AppMobileLayout>

package/src/const/layoutTokens.ts

@@ -4,6 +4,7 @@ export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
 export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
+export const CHAT_TEXTAREA_HEIGHT_MOBILE = 180;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const MARKET_SIDEBAR_WIDTH = 400;
 export const FOLDER_WIDTH = 256;

package/src/hooks/useIsPWA.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+export const useIsPWA = () => {
+  const [isPWA, setIsPWA] = useState(false);
+
+  useEffect(() => {
+    const isInStandaloneMode = () => window.matchMedia('(display-mode: standalone)').matches;
+    if (isInStandaloneMode()) {
+      setIsPWA(true);
+    }
+  }, []);
+
+  return isPWA;
+};

package/src/layout/AppLayout.tsx

@@ -3,15 +3,15 @@ import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
-
-const isPwa = window.matchMedia('(display-mode: standalone)').matches;
+import { useIsPWA } from '@/hooks/useIsPWA';
 
 const AppLayout = memo<PropsWithChildren>(({ children }) => {
+  const isPWA = useIsPWA();
   const theme = useTheme();
   return (
     <Flexbox
       horizontal
-      style={isPwa ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
+      style={isPWA ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
       width={'100%'}
     >
       <SideBar />