@lobehub/chat 0.105.2 → 0.107.0

package/src/app/chat/features/Conversation/ChatList/Extras/index.ts

@@ -1,9 +1,9 @@
-import { ChatListProps } from '@lobehub/ui';
+import { ChatListProps, RenderMessageExtra } from '@lobehub/ui';
 
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 
 export const renderMessagesExtra: ChatListProps['renderMessagesExtra'] = {
-  assistant: AssistantMessageExtra,
-  user: UserMessageExtra,
+  assistant: AssistantMessageExtra as unknown as RenderMessageExtra,
+  user: UserMessageExtra as unknown as RenderMessageExtra,
 };

package/src/app/chat/features/Conversation/ChatList/Extras/type.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+import { ChatMessage } from '@/types/chatMessage';
+
+export type RenderMessageExtra = FC<ChatMessage>;

package/src/app/chat/features/Conversation/ChatList/Messages/Assistant.tsx

@@ -1,15 +1,19 @@
-import { RenderMessage } from '@lobehub/ui';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 
-import { useSessionStore } from '@/store/session';
-import { chatSelectors } from '@/store/session/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/chatMessage';
 import { isFunctionMessageAtStart } from '@/utils/message';
 
 import Inspector from '../Plugins/Inspector';
 import { DefaultMessage } from './Default';
 
-export const AssistantMessage: RenderMessage = memo(({ id, plugin, content, ...props }) => {
-  const fcProps = useSessionStore(chatSelectors.getFunctionMessageProps({ content, id, plugin }));
+export const AssistantMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, plugin, content, ...props }) => {
+  const fcProps = useChatStore(chatSelectors.getFunctionMessageProps({ content, id, plugin }));
 
   if (!isFunctionMessageAtStart(content))
     return <DefaultMessage content={content} id={id} {...props} />;

package/src/app/chat/features/Conversation/ChatList/Messages/Default.tsx

@@ -1,11 +1,15 @@
-import { RenderMessage } from '@lobehub/ui';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 
 import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/chatMessage';
 
 import BubblesLoading from '../Loading';
 
-export const DefaultMessage: RenderMessage = memo(({ id, editableContent, content }) => {
+export const DefaultMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, editableContent, content }) => {
   if (content === LOADING_FLAT) return <BubblesLoading />;
 
   return <div id={id}>{editableContent}</div>;

package/src/app/chat/features/Conversation/ChatList/Messages/Function.tsx

@@ -1,19 +1,20 @@
-import { RenderMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSessionStore } from '@/store/session';
-import { chatSelectors } from '@/store/session/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/chatMessage';
 
 import Inspector from '../Plugins/Inspector';
 import PluginRender from '../Plugins/Render';
 
-export const FunctionMessage: RenderMessage = memo(({ id, content, plugin, name }) => {
-  const fcProps = useSessionStore(
+export const FunctionMessage = memo<ChatMessage>(({ id, content, plugin }) => {
+  const fcProps = useChatStore(
     chatSelectors.getFunctionMessageProps({ content, id, plugin }),
     isEqual,
   );
+
   const [showRender, setShow] = useState(true);
 
   return (
@@ -24,7 +25,7 @@ export const FunctionMessage: RenderMessage = memo(({ id, content, plugin, name
           content={content}
           id={id}
           loading={fcProps.loading}
-          name={name}
+          name={plugin?.identifier}
           payload={fcProps.command}
           type={fcProps.type}
         />

package/src/app/chat/features/Conversation/ChatList/Messages/index.ts

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 
 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 { pathString } from '@/utils/url';
 
 import { AssistantMessage } from './Assistant';
@@ -13,10 +13,10 @@ import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
-  assistant: AssistantMessage,
-  default: DefaultMessage,
-  function: FunctionMessage,
-  user: UserMessage,
+  assistant: AssistantMessage as any,
+  default: DefaultMessage as any,
+  function: FunctionMessage as any,
+  user: UserMessage as any,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
@@ -32,8 +32,8 @@ export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {
           isInbox
             ? router.push('/settings/agent')
             : mobile
-            ? router.push(pathString('/chat/settings', { hash: location.hash }))
-            : toggleSystemRole(true);
+              ? router.push(pathString('/chat/settings', { hash: location.hash }))
+              : toggleSystemRole(true);
       }
     }
   };

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;