@lobehub/chat 0.40.4 → 0.40.6

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+### [Version 0.40.6](https://github.com/lobehub/lobe-chat/compare/v0.40.5...v0.40.6)
+
+<sup>Released on **2023-08-10**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 重构优化 hydrated 的判断逻辑.
+
+#### 💄 Styles
+
+- **misc**: 优化水合前的加载效果.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 重构优化 hydrated 的判断逻辑 ([1781119](https://github.com/lobehub/lobe-chat/commit/1781119))
+
+#### Styles
+
+- **misc**: 优化水合前的加载效果 ([6bbd978](https://github.com/lobehub/lobe-chat/commit/6bbd978))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.40.5](https://github.com/lobehub/lobe-chat/compare/v0.40.4...v0.40.5)
+
+<sup>Released on **2023-08-10**</sup>
+
+#### 💄 Styles
+
+- **misc**: 增加未初始化的 loading 态.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: 增加未初始化的 loading 态 ([dcb7c07](https://github.com/lobehub/lobe-chat/commit/dcb7c07))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.40.4](https://github.com/lobehub/lobe-chat/compare/v0.40.3...v0.40.4)
 
 <sup>Released on **2023-08-10**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.40.4",
+  "version": "0.40.6",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/pages/chat/SessionList/List/SkeletonItem.tsx

@@ -0,0 +1,47 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css }) => ({
+  avatar: css``,
+  paragraph: css`
+    height: 12px !important;
+    margin-top: 12px !important;
+
+    > li {
+      height: 12px !important;
+    }
+  `,
+  title: css`
+    height: 14px !important;
+    margin-top: 4px !important;
+    margin-bottom: 12px !important;
+
+    > li {
+      height: 14px !important;
+    }
+  `,
+}));
+
+//  从 3~10 随机取一个整数
+
+const SkeletonItem = () => {
+  const { styles } = useStyles();
+
+  const list = Array.from({ length: 4 }).fill('');
+  return (
+    <Flexbox gap={8} paddingInline={16}>
+      {list.map((_, index) => (
+        <Skeleton
+          active
+          avatar
+          key={index}
+          paragraph={{ className: styles.paragraph, rows: 1 }}
+          round
+          title={{ className: styles.title }}
+        />
+      ))}
+    </Flexbox>
+  );
+};
+export default SkeletonItem;

package/src/pages/chat/SessionList/List/index.tsx

@@ -3,9 +3,10 @@ import Link from 'next/link';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { sessionSelectors, useSessionStore } from '@/store/session';
+import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import SessionItem from './SessionItem';
+import SkeletonItem from './SkeletonItem';
 
 const SessionList = memo(() => {
   const list = useSessionStore((s) => sessionSelectors.sessionList(s), isEqual);
@@ -14,7 +15,11 @@ const SessionList = memo(() => {
     shallow,
   );
 
-  return (
+  const isInit = useSessionHydrated();
+
+  return !isInit ? (
+    <SkeletonItem />
+  ) : (
     <>
       {list.map(({ id }) => (
         <Link href={`/chat/${id}`} key={id}>

package/src/pages/chat/[id]/Conversation/ChatList/index.tsx

@@ -5,7 +5,12 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+import {
+  agentSelectors,
+  chatSelectors,
+  useSessionHydrated,
+  useSessionStore,
+} from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 import { ErrorType } from '@/types/fetch';
 import { isFunctionMessage } from '@/utils/message';
@@ -29,7 +34,9 @@ const renderErrorMessage: RenderErrorMessage = (error, message) => {
 
 const List = () => {
   const { t } = useTranslation('common');
+  const hydrated = useSessionHydrated();
   const data = useSessionStore(chatSelectors.currentChats, isEqual);
+  console.log(hydrated, data);
   const [displayMode, chatLoadingId, deleteMessage, resendMessage, dispatchMessage] =
     useSessionStore(
       (s) => [

package/src/pages/chat/[id]/Header/index.tsx

@@ -1,5 +1,6 @@
 import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
@@ -9,12 +10,13 @@ import { shallow } from 'zustand/shallow';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
 import PluginTag from './PluginTag';
 
 const Header = memo(() => {
+  const init = useSessionHydrated();
   const { t } = useTranslation('common');
 
   const [title, description, avatar, backgroundColor, id, model, plugins] = useSessionStore(
@@ -38,31 +40,43 @@ const Header = memo(() => {
   return (
     <ChatHeader
       left={
-        <Flexbox align={'flex-start'} horizontal>
-          <Avatar
-            avatar={avatar}
-            background={backgroundColor}
-            onClick={() => {
-              Router.push(`/chat/${id}/setting`);
-            }}
-            size={40}
-            style={{ cursor: 'pointer', flex: 'none' }}
-            title={title}
-          />
-          <HeaderTitle
-            desc={description}
-            tag={
-              <>
-                <Tag>
-                  <SiOpenai size={'11px'} style={{ marginTop: 3 }} />
-                  {model}
-                </Tag>
-                {plugins?.length > 0 && <PluginTag plugins={plugins} />}
-              </>
-            }
-            title={title}
-          />
-        </Flexbox>
+        !init ? (
+          <Flexbox horizontal>
+            <Skeleton
+              active
+              avatar={{ shape: 'circle', size: 'default' }}
+              paragraph={false}
+              round
+              title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
+            />
+          </Flexbox>
+        ) : (
+          <Flexbox align={'flex-start'} gap={12} horizontal>
+            <Avatar
+              avatar={avatar}
+              background={backgroundColor}
+              onClick={() => {
+                Router.push(`/chat/${id}/setting`);
+              }}
+              size={40}
+              style={{ cursor: 'pointer', flex: 'none' }}
+              title={title}
+            />
+            <HeaderTitle
+              desc={description}
+              tag={
+                <>
+                  <Tag>
+                    <SiOpenai size={'11px'} style={{ marginTop: 3 }} />
+                    {model}
+                  </Tag>
+                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+                </>
+              }
+              title={title}
+            />
+          </Flexbox>
+        )
       }
       right={
         id && (

package/src/pages/chat/[id]/Sidebar/Inner.tsx

@@ -1,4 +1,5 @@
 import { ActionIcon, DraggablePanelBody, EditableMessage, SearchBar } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { Maximize2Icon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -6,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { agentSelectors, useSessionStore } from '@/store/session';
+import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import Header from './Header';
 import { Topic } from './Topic';
@@ -21,13 +22,7 @@ const useStyles = createStyles(({ css, token }) => ({
   prompt: css`
     overflow-x: hidden;
     overflow-y: auto;
-
-    height: 200px;
-    padding: 0 16px 16px;
-
     opacity: 0.75;
-    border-bottom: 1px solid ${token.colorBorder};
-
     transition: opacity 200ms ${token.motionEaseOut};
 
     &:hover {
@@ -38,6 +33,9 @@ const useStyles = createStyles(({ css, token }) => ({
     font-size: ${token.fontSizeHeading4}px;
     font-weight: bold;
   `,
+  topic: css`
+    border-top: 1px solid ${token.colorBorder};
+  `,
 }));
 
 const Inner = memo(() => {
@@ -48,6 +46,7 @@ const Inner = memo(() => {
     shallow,
   );
 
+  const hydrated = useSessionHydrated();
   const { t } = useTranslation('common');
   return (
     <DraggablePanelBody style={{ padding: 0 }}>
@@ -62,24 +61,30 @@ const Inner = memo(() => {
         }
         title={t('settingAgent.prompt.title', { ns: 'setting' })}
       />
-      <EditableMessage
-        classNames={{ markdown: styles.prompt }}
-        onChange={(e) => {
-          updateAgentConfig({ systemRole: e });
-        }}
-        onOpenChange={setOpenModal}
-        openModal={openModal}
-        placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
-        styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
-        text={{
-          cancel: t('cancel'),
-          confirm: t('ok'),
-          edit: t('edit'),
-          title: t('settingAgent.prompt.title', { ns: 'setting' }),
-        }}
-        value={systemRole}
-      />
-      <Flexbox gap={16} style={{ padding: 16 }}>
+      <Flexbox height={200} padding={'0 16px 16px'}>
+        {hydrated ? (
+          <EditableMessage
+            classNames={{ markdown: styles.prompt }}
+            onChange={(e) => {
+              updateAgentConfig({ systemRole: e });
+            }}
+            onOpenChange={setOpenModal}
+            openModal={openModal}
+            placeholder={`${t('settingAgent.prompt.placeholder', { ns: 'setting' })}...`}
+            styles={{ markdown: systemRole ? {} : { opacity: 0.5 } }}
+            text={{
+              cancel: t('cancel'),
+              confirm: t('ok'),
+              edit: t('edit'),
+              title: t('settingAgent.prompt.title', { ns: 'setting' }),
+            }}
+            value={systemRole}
+          />
+        ) : (
+          <Skeleton active avatar={false} style={{ marginTop: 12 }} title={false} />
+        )}
+      </Flexbox>
+      <Flexbox className={styles.topic} gap={16} padding={16}>
         <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
         <Topic />
       </Flexbox>

package/src/store/session/hooks/useSessionHydrated.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+import { useSessionStore } from '@/store/session';
+
+export const useSessionHydrated = () => {
+  const [isInit, setInit] = useState(false);
+
+  useEffect(() => {
+    const hasRehydrated = useSessionStore.persist.hasHydrated();
+
+    if (hasRehydrated) {
+      setInit(true);
+    }
+  }, []);
+
+  return isInit;
+};

package/src/store/session/index.ts

@@ -1,39 +1,6 @@
-import equal from 'fast-deep-equal';
-import { PersistOptions, devtools, persist } from 'zustand/middleware';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { isDev } from '@/utils/env';
-
-import { SessionStore, createStore } from './store';
-
-type SessionPersist = Pick<SessionStore, 'sessions'>;
-
-export const LOBE_CHAT = 'LOBE_CHAT';
-
-const persistOptions: PersistOptions<SessionStore, SessionPersist> = {
-  name: LOBE_CHAT,
-
-  partialize: (s) => ({
-    sessions: s.sessions,
-  }),
-
-  // 手动控制 Hydration ，避免 ssr 报错
-  skipHydration: true,
-  version: 0,
-  // version: Migration.targetVersion,
-};
-
-export const useSessionStore = createWithEqualityFn<SessionStore>()(
-  persist(
-    devtools(createStore, {
-      name: LOBE_CHAT + (isDev ? '_DEV' : ''),
-    }),
-    persistOptions,
-  ),
-  equal,
-);
-
+export * from './hooks/useSessionHydrated';
 export * from './selectors';
 export { initialLobeAgentConfig } from './slices/agentConfig';
 export { initLobeSession } from './slices/session';
 export type { SessionStore } from './store';
+export { useSessionStore } from './store';

package/src/store/session/store.ts

@@ -1,5 +1,10 @@
+import equal from 'fast-deep-equal';
+import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
+import { isDev } from '@/utils/env';
+
 import { SessionStoreState, initialState } from './initialState';
 import { AgentAction, createAgentSlice } from './slices/agentConfig';
 import { ChatAction, createChatSlice } from './slices/chat';
@@ -7,11 +12,36 @@ import { SessionAction, createSessionSlice } from './slices/session';
 
 export type SessionStore = SessionAction & AgentAction & ChatAction & SessionStoreState;
 
-export const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
-  ...parameters
-) => ({
+const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
   ...createAgentSlice(...parameters),
   ...createSessionSlice(...parameters),
   ...createChatSlice(...parameters),
 });
+
+type SessionPersist = Pick<SessionStore, 'sessions'>;
+
+const LOBE_CHAT = 'LOBE_CHAT';
+
+const persistOptions: PersistOptions<SessionStore, SessionPersist> = {
+  name: LOBE_CHAT,
+
+  partialize: (s) => ({
+    sessions: s.sessions,
+  }),
+
+  // 手动控制 Hydration ，避免 ssr 报错
+  skipHydration: true,
+  version: 0,
+  // version: Migration.targetVersion,
+};
+
+export const useSessionStore = createWithEqualityFn<SessionStore>()(
+  persist(
+    devtools(createStore, {
+      name: LOBE_CHAT + (isDev ? '_DEV' : ''),
+    }),
+    persistOptions,
+  ),
+  equal,
+);