@lobehub/chat 0.83.10 → 0.84.0-beta.1

package/.dockerignore

@@ -0,0 +1,10 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+.next
+.git
+scripts
+docs
+.github
+*.md

package/.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - main
+      - beta
 
 jobs:
   release:
@@ -28,3 +29,5 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          DOCKER_REGISTRY_PASSWORD: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+          DOCKER_REGISTRY_USER: ${{ secrets.DOCKER_REGISTRY_USER }}

package/.releaserc.js

@@ -1 +1,14 @@
-module.exports = require('@lobehub/lint').semanticRelease;
+const release = require('@lobehub/lint').semanticRelease;
+
+module.exports = {
+  ...release,
+  plugins: [
+    ...release.plugins,
+    [
+      '@codedependant/semantic-release-docker',
+      {
+        dockerImage: 'lobe-chat',
+      },
+    ],
+  ],
+};

package/CHANGELOG.md

@@ -2,34 +2,22 @@
 
 # Changelog
 
-### [Version 0.83.10](https://github.com/lobehub/lobe-chat/compare/v0.83.9...v0.83.10)
+## [Version 0.84.0-beta.1](https://github.com/lobehub/lobe-chat/compare/v0.83.9...v0.84.0-beta.1)
 
 <sup>Released on **2023-10-09**</sup>
 
-#### ♻ Code Refactoring
-
-- **layout**: Refactor layout, Refactor settings layout, Refactor ssc layout.
-- **share**: Use modern-screenshot.
-
-#### 🐛 Bug Fixes
+#### ✨ Features
 
-- **misc**: Fix rsc layout.
+- **misc**: Dockerize lobe-chat.
 
 <br/>
 
 <details>
 <summary><kbd>Improvements and Fixes</kbd></summary>
 
-#### Code refactoring
-
-- **layout**: Refactor layout ([ace21f4](https://github.com/lobehub/lobe-chat/commit/ace21f4))
-- **layout**: Refactor settings layout ([bd48121](https://github.com/lobehub/lobe-chat/commit/bd48121))
-- **layout**: Refactor ssc layout ([26e1c41](https://github.com/lobehub/lobe-chat/commit/26e1c41))
-- **share**: Use modern-screenshot, closes [#256](https://github.com/lobehub/lobe-chat/issues/256) ([b3d7108](https://github.com/lobehub/lobe-chat/commit/b3d7108))
-
-#### What's fixed
+#### What's improved
 
-- **misc**: Fix rsc layout ([d73f13f](https://github.com/lobehub/lobe-chat/commit/d73f13f))
+- **misc**: Dockerize lobe-chat ([1b750f8](https://github.com/lobehub/lobe-chat/commit/1b750f8))
 
 </details>
 

package/Dockerfile

@@ -0,0 +1,46 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+## Install dependencies only when needed
+FROM base AS builder
+WORKDIR /app
+
+COPY package.json ./
+
+# If you want to build docker in China
+RUN npm config set registry https://registry.npmmirror.com/
+RUN pnpm install
+
+COPY . .
+RUN pnpm run build:docker # run build standalone for docker version
+
+## Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

package/next.config.mjs

@@ -2,6 +2,7 @@ import analyzer from '@next/bundle-analyzer';
 import nextPWA from 'next-pwa';
 
 const isProd = process.env.NODE_ENV === 'production';
+const buildWithDocker = process.env.DOCKER === 'true';
 
 const withBundleAnalyzer = analyzer({
   enabled: process.env.ANALYZE === 'true',
@@ -32,6 +33,8 @@ const nextConfig = {
     AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
     PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
   },
+
+  output: buildWithDocker ? 'standalone' : undefined,
 };
 
 export default isProd ? withBundleAnalyzer(withPWA(nextConfig)) : nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.83.10",
+  "version": "0.84.0-beta.1",
   "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",
@@ -25,6 +25,7 @@
   "scripts": {
     "build": "next build",
     "build:analyze": "ANALYZE=true next build",
+    "build:docker": "DOCKER=true next build",
     "dev": "next dev -p 3010",
     "i18n": "npm run i18n:workflow && lobe-i18n",
     "i18n:workflow": "ts-node --project ./tsconfig.json scripts/i18nWorkflow/index.ts",
@@ -83,6 +84,7 @@
     "emoji-mart": "^5",
     "fast-deep-equal": "^3",
     "gpt-tokenizer": "^2",
+    "html-to-image": "^1",
     "i18next": "^23",
     "i18next-browser-languagedetector": "^7",
     "i18next-resources-for-ts": "^1",
@@ -92,7 +94,6 @@
     "lodash-es": "^4",
     "lucide-react": "latest",
     "mixpanel-browser": "^2",
-    "modern-screenshot": "^4",
     "nanoid": "^5",
     "next": "^13.5.3",
     "openai": "^4.10.0",
@@ -119,6 +120,7 @@
     "zustand-utils": "^1"
   },
   "devDependencies": {
+    "@codedependant/semantic-release-docker": "^4",
     "@commitlint/cli": "^17",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",

package/src/app/chat/(desktop)/features/{ChatHeader.tsx → 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 '../../features/ChatHeader/PluginTag';
-import ShareButton from '../../features/ChatHeader/ShareButton';
+import PluginTag from '../../../components/ChatHeader/PluginTag';
+import ShareButton from '../../../components/ChatHeader/ShareButton';
 
 const Header = memo(() => {
   const init = useSessionChatInit();

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

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

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

@@ -1,13 +1,15 @@
 import { DraggablePanel } from '@lobehub/ui';
-import { memo, useState } from 'react';
+import { ReactNode, memo } from 'react';
 
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
-import ChatInputContent from '../../features/ChatInputContent';
+interface ChatInputDesktopLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
 
-const ChatInputDesktopLayout = memo(() => {
-  const [expand, setExpand] = useState<boolean>(false);
+const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, expand }) => {
   const [inputHeight, updatePreference] = useGlobalStore((s) => [
     s.preference.inputHeight,
     s.updatePreference,
@@ -30,7 +32,7 @@ const ChatInputDesktopLayout = memo(() => {
       size={{ height: inputHeight, width: '100%' }}
       style={{ zIndex: 10 }}
     >
-      <ChatInputContent expand={expand} onExpandChange={setExpand} />
+      {children}
     </DraggablePanel>
   );
 });

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/(desktop)/features/{SessionHeader.tsx → SessionHeader/Desktop.tsx}

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

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

@@ -0,0 +1,14 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import Mobile from '../../../(mobile)/features/SessionHeader';
+import Desktop from './Desktop';
+
+const Header = memo(() => {
+  const { mobile } = useResponsive();
+  const Render = mobile ? Mobile : Desktop;
+
+  return <Render />;
+});
+
+export default Header;

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

@@ -1,22 +1,21 @@
 import { DraggablePanelBody } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 
 import FolderPanel from '@/features/FolderPanel';
 
-import SessionListContent from '../../features/SessionListContent';
-import Header from './SessionHeader';
+import Header from '../SessionHeader';
 
 const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
 
-const Sessions = memo(() => {
+const Sessions = memo<{ children: ReactNode }>(({ children }) => {
   const { styles } = useStyles();
 
   return (
     <FolderPanel>
       <Header />
       <DraggablePanelBody className={styles} style={{ padding: 0 }}>
-        <SessionListContent />
+        {children}
       </DraggablePanelBody>
     </FolderPanel>
   );

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/(desktop)/features/{SideBar.tsx → SideBar/Desktop.tsx}

@@ -1,6 +1,6 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -8,8 +8,7 @@ import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import TopicListContent from '../../features/TopicListContent';
-import SystemRole from '../../features/TopicListContent/SystemRole';
+import SystemRole from '../../../components/Inspector/SystemRole';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -24,7 +23,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Desktop = memo(() => {
+const Desktop = memo<{ children: ReactNode }>(({ children }) => {
   const { styles } = useStyles();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
@@ -50,7 +49,7 @@ const Desktop = memo(() => {
       >
         <SafeSpacing />
         {!isInbox && <SystemRole />}
-        <TopicListContent />
+        {children}
       </DraggablePanelContainer>
     </DraggablePanel>
   );

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

@@ -3,26 +3,20 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
-
-import Mobile from '../(mobile)';
 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';
-import Layout from './layout.responsive';
 
 const DesktopPage = memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
-    <Layout>
-      <PageTitle />
-      <ChatHeader />
-      <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-        <Conversation chatInput={<ChatInput />} />
-        <SideBar />
-      </Flexbox>
-    </Layout>
-  </ResponsiveIndex>
+  <>
+    <PageTitle />
+    <ChatHeader />
+    <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+      <Conversation chatInput={<ChatInput />} />
+      <SideBar />
+    </Flexbox>
+  </>
 ));
 export default DesktopPage;

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

@@ -1,18 +1,17 @@
-'use client';
-
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import AppLayoutDesktop from '@/layout/AppLayout.desktop';
+import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import ResponsiveSessionList from './features/SessionList';
+import ResponsiveSessionList from '../features/SessionList';
 
-export default memo(({ children }: PropsWithChildren) => {
+const Desktop = memo<PropsWithChildren>(({ children }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Chat);
+
   return (
-    <AppLayoutDesktop>
+    <AppLayout>
       <ResponsiveSessionList />
       <Flexbox
         flex={1}
@@ -22,6 +21,8 @@ export default memo(({ children }: PropsWithChildren) => {
       >
         {children}
       </Flexbox>
-    </AppLayoutDesktop>
+    </AppLayout>
   );
 });
+
+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

@@ -1,54 +1 @@
-import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { LayoutList, Settings } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-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 '../../features/ChatHeader/ShareButton';
-
-const MobileHeader = memo(() => {
-  const { t } = useTranslation('common');
-  const router = useRouter();
-
-  const [isInbox, title] = useSessionStore((s) => [
-    sessionSelectors.isInboxSession(s),
-    agentSelectors.currentAgentTitle(s),
-  ]);
-
-  const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
-
-  const displayTitle = isInbox ? t('inbox.title') : title;
-
-  return (
-    <MobileNavBar
-      center={<MobileNavBarTitle title={displayTitle} />}
-      onBackClick={() => router.push('/chat')}
-      right={
-        <>
-          <ShareButton />
-          <ActionIcon
-            icon={LayoutList}
-            onClick={() => toggleConfig()}
-            size={MOBILE_HEADER_ICON_SIZE}
-          />
-          {!isInbox && (
-            <ActionIcon
-              icon={Settings}
-              onClick={() => router.push(pathString('/chat/settings', { hash: location.hash }))}
-              size={MOBILE_HEADER_ICON_SIZE}
-            />
-          )}
-        </>
-      }
-      showBackButton
-    />
-  );
-});
-
-export default MobileHeader;
+export { default } from '../../components/ChatHeader/Mobile';

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

@@ -1,34 +1,14 @@
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
-import SafeSpacing from '@/components/SafeSpacing';
-import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
+import { ChatInputContent } from '../../components/ChatInput';
+import Mobile from '../../components/ChatInput/Mobile';
 
-import ChatInputContent from '../../features/ChatInputContent';
-
-const useStyles = createStyles(
-  ({ css, token }) => css`
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    width: 100vw;
-
-    background: ${token.colorBgLayout};
-  `,
-);
-
-const ChatInputMobileLayout = memo(() => {
-  const { styles } = useStyles();
+const ChatInput = () => {
   return (
-    <>
-      <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
-      <div className={styles}>
-        <ChatInputContent mobile />
-      </div>
-    </>
+    <Mobile>
+      <ChatInputContent mobile />
+    </Mobile>
   );
-});
+};
 
-export default ChatInputMobileLayout;
+export default memo(ChatInput);

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

@@ -1,17 +1,12 @@
 import { memo } from 'react';
 
-import SessionListContent from '../../features/SessionListContent';
-import SessionSearchBar from '../../features/SessionSearchBar';
+import { SessionListContent } from '../../components/SessionList';
+import Wrapper from '../../components/SessionList/Mobile';
 
-const Sessions = memo(() => {
-  return (
-    <>
-      <div style={{ padding: '8px 16px' }}>
-        <SessionSearchBar />
-      </div>
-      <SessionListContent />
-    </>
-  );
-});
+const SessionList = memo(() => (
+  <Wrapper>
+    <SessionListContent />
+  </Wrapper>
+));
 
-export default Sessions;
+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

@@ -2,16 +2,18 @@
 
 import { memo } from 'react';
 
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
 import PageTitle from '../features/PageTitle';
+import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
-import Layout from './layout.mobile';
 
 const ChatMobilePage = memo(() => {
   return (
-    <Layout>
+    <AppMobileLayout navBar={<SessionHeader />} showTabBar>
       <PageTitle />
       <SessionList />
-    </Layout>
+    </AppMobileLayout>
   );
 });