@lobehub/chat 0.106.0 → 0.107.0

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx

@@ -2,10 +2,10 @@ import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { Skeleton } from 'antd';
 import { memo, useRef, useState } from 'react';
 
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 import { usePluginStore } from '@/store/plugin';
 import { pluginSelectors } from '@/store/plugin/selectors';
-import { useSessionStore } from '@/store/session';
-import { chatSelectors } from '@/store/session/selectors';
 
 import { useOnPluginReadyForInteraction } from '../utils/iframeOnReady';
 import {
@@ -26,7 +26,7 @@ import {
 // just to simplify code a little, don't use this pattern everywhere
 const getSettings = (identifier: string) =>
   pluginSelectors.getPluginSettingsById(identifier)(usePluginStore.getState());
-const getMessage = (id: string) => chatSelectors.getMessageById(id)(useSessionStore.getState());
+const getMessage = (id: string) => chatSelectors.getMessageById(id)(useChatStore.getState());
 
 interface IFrameRenderProps {
   height?: number;
@@ -59,7 +59,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
     const iframeWin = iframeRef.current?.contentWindow;
 
     if (iframeWin) {
-      const message = chatSelectors.getMessageById(id)(useSessionStore.getState());
+      const message = chatSelectors.getMessageById(id)(useChatStore.getState());
       if (!message) return;
       const props = { content: '' };
 
@@ -74,7 +74,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
   }, []);
 
   // when plugin try to send back message, we should fill it to the message content
-  const fillPluginContent = useSessionStore((s) => s.fillPluginMessageContent);
+  const fillPluginContent = useChatStore((s) => s.fillPluginMessageContent);
   useOnPluginFillContent((content) => {
     fillPluginContent(id, content);
   });
@@ -92,7 +92,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
   });
 
   // when plugin update state, we should update it to the message pluginState key
-  const updatePluginState = useSessionStore((s) => s.updatePluginState);
+  const updatePluginState = useChatStore((s) => s.updatePluginState);
   useOnPluginStateUpdate((key, value) => {
     updatePluginState(id, key, value);
   });

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

@@ -5,8 +5,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import { PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
-import { useSessionChatInit, useSessionStore } from '@/store/session';
-import { agentSelectors, chatSelectors } from '@/store/session/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 
 import { renderActions, useActionsClick } from './Actions';
 import { renderErrorMessages } from './Error';
@@ -15,28 +17,20 @@ import { renderMessages, useAvatarsClick } from './Messages';
 import SkeletonList from './SkeletonList';
 
 const List = memo(() => {
-  const init = useSessionChatInit();
   const { t } = useTranslation('common');
 
-  const data = useSessionStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
+  const data = useChatStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
 
-  const [
-    displayMode,
-    enableHistoryCount,
-    historyCount,
-    chatLoadingId,
-    resendMessage,
-    dispatchMessage,
-  ] = useSessionStore((s) => {
+  const [init, chatLoadingId, resendMessage, updateMessageContent] = useChatStore((s) => [
+    s.messagesInit,
+    s.chatLoadingId,
+    s.resendMessage,
+    s.updateMessageContent,
+  ]);
+
+  const [displayMode, enableHistoryCount, historyCount] = useSessionStore((s) => {
     const config = agentSelectors.currentAgentConfig(s);
-    return [
-      config.displayMode,
-      config.enableHistoryCount,
-      config.historyCount,
-      s.chatLoadingId,
-      s.resendMessage,
-      s.dispatchMessage,
-    ];
+    return [config.displayMode, config.enableHistoryCount, config.historyCount];
   });
   const onActionsClick = useActionsClick();
   const onAvatarsClick = useAvatarsClick();
@@ -59,15 +53,13 @@ const List = memo(() => {
 
   return (
     <ChatList
-      data={data}
+      data={data as any}
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
       loadingId={chatLoadingId}
       onActionsClick={onActionsClick}
       onAvatarsClick={onAvatarsClick}
-      onMessageChange={(id, content) =>
-        dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })
-      }
+      onMessageChange={(id, content) => updateMessageContent(id, content)}
       renderActions={renderActions}
       renderErrorMessages={renderErrorMessages}
       renderMessages={renderMessages}

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

@@ -1,12 +1,12 @@
 import { memo, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
-import { useSessionStore } from '@/store/session';
+import { useChatStore } from '@/store/chat';
 
 import { useAtBottom } from './useAtBottom';
 
 const ChatScrollAnchor = memo(() => {
-  const trackVisibility = useSessionStore((s) => !!s.chatLoadingId);
+  const trackVisibility = useChatStore((s) => !!s.chatLoadingId);
 
   const isAtBottom = useAtBottom();
   const { ref, entry, inView } = useInView({

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

@@ -8,7 +8,7 @@ import SafeSpacing from '@/components/SafeSpacing';
 
 import ChatList from './ChatList';
 import ChatScrollAnchor from './ScrollAnchor';
-import { usePluginsInit } from './usePluginsInit';
+import { useInitConversation } from './useInitConversation';
 
 const useStyles = createStyles(
   ({ css, responsive, stylish }) => css`
@@ -31,8 +31,8 @@ const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
 
-  // fetch plugin list and init plugins
-  usePluginsInit();
+  // init conversation
+  useInitConversation();
 
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>

package/src/app/chat/features/Conversation/useInitConversation.ts

@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { usePluginStore } from '@/store/plugin';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+export const useInitConversation = () => {
+  const [sessionId] = useSessionStore((s) => [s.activeId]);
+  const plugins = useSessionStore((s) => agentSelectors.currentAgentPlugins(s));
+  const [activeTopicId, switchTopic, useFetchMessages, useFetchTopics] = useChatStore((s) => [
+    s.activeTopicId,
+    s.switchTopic,
+    s.useFetchMessages,
+    s.useFetchTopics,
+  ]);
+
+  useFetchMessages(sessionId, activeTopicId);
+  useFetchTopics(sessionId);
+
+  const [useFetchPluginStore, checkPluginsIsInstalled] = usePluginStore((s) => [
+    s.useFetchPluginStore,
+    s.useCheckPluginsIsInstalled,
+  ]);
+
+  useFetchPluginStore();
+  checkPluginsIsInstalled(plugins);
+
+  useEffect(() => {
+    useChatStore.persist.rehydrate();
+
+    // // when activeId changed, switch topic to undefined
+    const unsubscribe = useSessionStore.subscribe(
+      (s) => s.activeId,
+      () => {
+        switchTopic();
+      },
+    );
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+};

package/src/app/chat/features/Migration/ExportConfigButton.tsx

@@ -0,0 +1,33 @@
+import { Button } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ExportConfigButton = memo<{ primary?: boolean, state: any; }>(({ state, primary }) => {
+  const { t } = useTranslation('migration');
+
+  const exportData = () => {
+    const config = { exportType: 'sessions', state, version: 1 };
+
+    const url = URL.createObjectURL(
+      new Blob([JSON.stringify(config)], { type: 'application/json' }),
+    );
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'LobeChat-backup-v1.json';
+
+    document.body.append(a);
+    a.click();
+
+    URL.revokeObjectURL(url);
+    a.remove();
+  };
+
+  return (
+    <Button onClick={exportData} size={'large'} type={primary ? 'primary' : undefined}>
+      {t('dbV1.action.downloadBackup')}
+    </Button>
+  );
+});
+
+export default ExportConfigButton;

package/src/app/chat/features/Migration/Failed.tsx

@@ -0,0 +1,115 @@
+import { Alert, Highlighter, Icon } from '@lobehub/ui';
+import { Button, Popconfirm, Result } from 'antd';
+import { useTheme } from 'antd-style';
+import { createStore, del, get, set } from 'idb-keyval';
+import { ShieldAlert } from 'lucide-react';
+import Link from 'next/link';
+import { lighten } from 'polished';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import Balancer from 'react-wrap-balancer';
+
+import { githubService } from '@/services/github';
+
+import ExportConfigButton from './ExportConfigButton';
+import UpgradeButton from './UpgradeButton';
+import { MigrationError, UpgradeStatus, V1DB_NAME, V1DB_TABLE_NAME } from './const';
+
+const clearLocal = async () => {
+  const store = createStore(V1DB_NAME, V1DB_TABLE_NAME);
+  // delete the state key and back it up to state_backup for reproduce
+  const state = await get('state', store);
+  await del('state');
+  await set('state_backup', state, store);
+  location.reload();
+};
+
+interface FailedProps {
+  error?: MigrationError;
+  setError: (error: MigrationError) => void;
+  setUpgradeStatus: (status: UpgradeStatus) => void;
+  state: any;
+  upgradeStatus: UpgradeStatus;
+}
+const Failed = memo<FailedProps>(({ error, state, setUpgradeStatus, setError, upgradeStatus }) => {
+  const { t } = useTranslation('migration');
+  const theme = useTheme();
+
+  return (
+    <Result
+      extra={
+        <Flexbox gap={24}>
+          {!!error && (
+            <Alert
+              extra={
+                <Highlighter copyButtonSize={'small'} language={'json'}>
+                  {JSON.stringify(error)}
+                </Highlighter>
+              }
+              message={error.message}
+              style={{ flex: 1 }}
+              type={'error'}
+            />
+          )}
+          <Flexbox
+            gap={16}
+            horizontal
+            justify={'center'}
+            style={{
+              alignSelf: 'center',
+              flexWrap: 'wrap',
+            }}
+          >
+            <ExportConfigButton primary state={state} />
+            <Popconfirm
+              okButtonProps={{
+                danger: true,
+              }}
+              onConfirm={clearLocal}
+              overlayInnerStyle={{ background: lighten(0.03, theme.colorBgElevated) }}
+              overlayStyle={{ width: 340 }}
+              title={t('dbV1.clear.confirm')}
+            >
+              <Button size={'large'}>{t('dbV1.action.clearDB')}</Button>
+            </Popconfirm>
+            <UpgradeButton
+              primary={false}
+              setError={setError}
+              setUpgradeStatus={setUpgradeStatus}
+              state={state}
+              upgradeStatus={upgradeStatus}
+            >
+              {t('dbV1.action.reUpgrade')}
+            </UpgradeButton>
+          </Flexbox>
+        </Flexbox>
+      }
+      icon={<Icon icon={ShieldAlert} />}
+      status={'error'}
+      style={{ paddingBlock: 24, width: 450 }}
+      subTitle={
+        <Balancer>
+          <Trans i18nKey="dbV1.upgrade.error.subTitle" ns={'migration'}>
+            非常抱歉，数据库升级过程发生异常。请重试升级，或
+            <Link
+              aria-label={'issue'}
+              href="https://github.com/lobehub/lobe-chat/issues"
+              onClick={(e) => {
+                e.preventDefault();
+                githubService.submitDBV1UpgradeError(1, error!);
+              }}
+              target="_blank"
+            >
+              提交问题
+            </Link>
+            我们将会第一时间帮你排查问题。
+          </Trans>
+        </Balancer>
+      }
+      title={t('dbV1.upgrade.error.title')}
+    />
+  );
+});
+
+export default Failed;

package/src/app/chat/features/Migration/Modal.tsx

@@ -0,0 +1,80 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Result } from 'antd';
+import { BadgeCheck, CpuIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import DataStyleModal from '@/components/DataStyleModal';
+
+import Failed from './Failed';
+import MigrationStart from './Start';
+import { MigrationError, UpgradeStatus } from './const';
+
+interface MigrationModalProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  state: any;
+}
+
+const MigrationModal = memo<MigrationModalProps>(({ setOpen, open, state: dbState }) => {
+  const { t } = useTranslation('migration');
+  const [upgradeStatus, setUpgradeStatus] = useState<UpgradeStatus>(UpgradeStatus.START);
+
+  const [error, setError] = useState<MigrationError>();
+
+  const close = () => {
+    setOpen(false);
+  };
+
+  const renderContent = () => {
+    switch (upgradeStatus) {
+      case UpgradeStatus.START:
+      case UpgradeStatus.UPGRADING: {
+        return (
+          <MigrationStart
+            setError={setError}
+            setUpgradeStatus={setUpgradeStatus}
+            state={dbState}
+            upgradeStatus={upgradeStatus}
+          />
+        );
+      }
+      case UpgradeStatus.UPGRADED: {
+        return (
+          <Result
+            extra={
+              <Button onClick={close} size={'large'} type={'primary'}>
+                {t('dbV1.action.start')}
+              </Button>
+            }
+            icon={<Icon icon={BadgeCheck} />}
+            status={'success'}
+            style={{ paddingBlock: 24 }}
+            subTitle={t('dbV1.upgrade.success.subTitle')}
+            title={t('dbV1.upgrade.success.title')}
+          />
+        );
+      }
+      case UpgradeStatus.UPGRADE_FAILED: {
+        return (
+          <Failed
+            error={error}
+            setError={setError}
+            setUpgradeStatus={setUpgradeStatus}
+            state={dbState}
+            upgradeStatus={upgradeStatus}
+          />
+        );
+      }
+    }
+  };
+
+  return (
+    <DataStyleModal icon={CpuIcon} open={open} title={t('dbV1.title')}>
+      <Center gap={48}>{renderContent()}</Center>
+    </DataStyleModal>
+  );
+});
+
+export default MigrationModal;

package/src/app/chat/features/Migration/Start.tsx

@@ -0,0 +1,106 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Database, SearchCheck, Zap } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import Balancer from 'react-wrap-balancer';
+
+import ExportConfigButton from './ExportConfigButton';
+import UpgradeButton, { UpgradeButtonProps } from './UpgradeButton';
+
+const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
+  desc: css`
+    width: 280px;
+    color: ${token.colorTextSecondary};
+
+    ${responsive.mobile} {
+      line-height: ${token.lineHeight};
+    }
+  `,
+  hint: css`
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextTertiary};
+    text-align: center;
+  `,
+  icon: css`
+    color: ${isDarkMode ? token.blue : token.geekblue};
+  `,
+  iconCtn: css`
+    width: 72px;
+    height: 72px;
+    background: ${isDarkMode ? token.blue1 : token.geekblue1};
+    border-radius: 50%;
+  `,
+  intro: css`
+    ${responsive.mobile} {
+      width: 350px;
+      margin-top: 24px;
+      line-height: ${token.lineHeight};
+    }
+  `,
+
+  title: css`
+    font-size: ${token.fontSizeLG}px;
+    font-weight: bold;
+  `,
+}));
+
+const MigrationStart = memo<UpgradeButtonProps>((props) => {
+  const { t } = useTranslation('migration');
+  const { styles } = useStyles();
+
+  const features = [
+    {
+      avatar: Database,
+      desc: t('dbV1.features.capability.desc'),
+      title: t('dbV1.features.capability.title'),
+    },
+    {
+      avatar: Zap,
+      desc: t('dbV1.features.performance.desc'),
+      title: t('dbV1.features.performance.title'),
+    },
+    {
+      avatar: SearchCheck,
+      desc: t('dbV1.features.use.desc'),
+      title: t('dbV1.features.use.title'),
+    },
+  ];
+
+  return (
+    <>
+      <Flexbox>
+        <Flexbox className={styles.intro} style={{ textAlign: 'center' }} width={460}>
+          {t('dbV1.description')}
+        </Flexbox>
+      </Flexbox>
+      <Flexbox gap={32}>
+        {features.map((item) => {
+          return (
+            <Flexbox align={'flex-start'} gap={24} horizontal key={item.title}>
+              <Center className={styles.iconCtn}>
+                <Icon className={styles.icon} icon={item.avatar} size={{ fontSize: 36 }} />
+              </Center>
+              <Flexbox gap={8}>
+                <p className={styles.title}>{item.title}</p>
+                <p className={styles.desc}>{item.desc}</p>
+              </Flexbox>
+            </Flexbox>
+          );
+        })}
+      </Flexbox>
+      <Flexbox align={'center'} gap={16} style={{ paddingBottom: 16 }}>
+        <Flexbox gap={16} horizontal justify={'center'} style={{ flexWrap: 'wrap' }}>
+          <ExportConfigButton state={props.state} />
+          <UpgradeButton {...props} />
+        </Flexbox>
+        <Flexbox align={'center'} className={styles.hint}>
+          <Balancer>{t('dbV1.upgradeTip')}</Balancer>
+        </Flexbox>
+      </Flexbox>
+    </>
+  );
+});
+
+export default MigrationStart;

package/src/app/chat/features/Migration/UpgradeButton.tsx

@@ -0,0 +1,74 @@
+import { Button } from 'antd';
+import { createStore, set } from 'idb-keyval';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Migration } from '@/migrations';
+import { configService } from '@/services/config';
+import { useChatStore } from '@/store/chat';
+import { useSessionStore } from '@/store/session';
+
+import { MIGRATE_KEY, MigrationError, UpgradeStatus, V1DB_NAME, V1DB_TABLE_NAME } from './const';
+
+export interface UpgradeButtonProps {
+  children?: ReactNode;
+  primary?: boolean;
+  setError: (error: MigrationError) => void;
+  setUpgradeStatus: (status: UpgradeStatus) => void;
+  state: any;
+  upgradeStatus: UpgradeStatus;
+}
+
+const UpgradeButton = memo<UpgradeButtonProps>(
+  ({ setUpgradeStatus, upgradeStatus, state, setError, primary = true, children }) => {
+    const { t } = useTranslation('migration');
+
+    const refreshSession = useSessionStore((s) => s.refreshSessions);
+    const [refreshMessages, refreshTopic] = useChatStore((s) => [
+      s.refreshMessages,
+      s.refreshTopic,
+    ]);
+
+    const upgrade = async () => {
+      try {
+        const data = Migration.migrate({ state, version: 1 });
+
+        setUpgradeStatus(UpgradeStatus.UPGRADING);
+
+        await configService.importConfigState({
+          exportType: 'sessions',
+          state: data.state,
+          version: 2,
+        });
+
+        await refreshSession();
+        await refreshMessages();
+        await refreshTopic();
+
+        await set(MIGRATE_KEY, true, createStore(V1DB_NAME, V1DB_TABLE_NAME));
+
+        setUpgradeStatus(UpgradeStatus.UPGRADED);
+
+        return { success: true };
+      } catch (error) {
+        setUpgradeStatus(UpgradeStatus.UPGRADE_FAILED);
+        const err = error as { message: string; stack: string };
+
+        setError({ message: err.message, stack: err.stack });
+      }
+    };
+
+    return (
+      <Button
+        loading={upgradeStatus === UpgradeStatus.UPGRADING}
+        onClick={upgrade}
+        size={'large'}
+        type={primary ? 'primary' : undefined}
+      >
+        {children ?? t('dbV1.action.upgrade')}
+      </Button>
+    );
+  },
+);
+
+export default UpgradeButton;

package/src/app/chat/features/Migration/const.ts

@@ -0,0 +1,15 @@
+export const MIGRATE_KEY = 'migrated';
+export enum UpgradeStatus {
+  START,
+  UPGRADING,
+  UPGRADED,
+  UPGRADE_FAILED,
+}
+
+export const V1DB_NAME = 'LobeHub';
+export const V1DB_TABLE_NAME = 'LOBE_CHAT';
+
+export interface MigrationError {
+  message: string;
+  stack: string;
+}

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { Spin } from 'antd';
+import { createStore, getMany } from 'idb-keyval';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren, memo, useEffect, useState } from 'react';
+
+import { MIGRATE_KEY, V1DB_NAME, V1DB_TABLE_NAME } from './const';
+
+const Modal = dynamic(() => import('./Modal'), { loading: () => <Spin fullscreen />, ssr: false });
+
+const Migration = memo<PropsWithChildren>(({ children }) => {
+  const [dbState, setDbState] = useState(null);
+  const [open, setOpen] = useState(false);
+
+  const checkMigration = async () => {
+    const [state, migrated] = await getMany(
+      ['state', MIGRATE_KEY],
+      createStore(V1DB_NAME, V1DB_TABLE_NAME),
+    );
+
+    // if db have migrated already, don't show modal
+    if (migrated) return;
+
+    // if db doesn't exist state key,it means a new user
+    if (!state) return;
+
+    setDbState(state);
+    setOpen(true);
+  };
+
+  useEffect(() => {
+    checkMigration();
+  }, []);
+
+  return (
+    <>
+      {open && <Modal open={open} setOpen={setOpen} state={dbState} />}
+      {children}
+    </>
+  );
+});
+
+export default Migration;