@lobehub/chat 1.74.2 → 1.74.4

package/src/features/InitClientDB/ErrorResult.tsx

@@ -1,18 +1,21 @@
-import { Highlighter, Icon, Modal } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Alert, Highlighter, Icon, Modal } from '@lobehub/ui';
+import { Button, Spin } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { TriangleAlert } from 'lucide-react';
-import Link from 'next/link';
+import { PenToolIcon, TriangleAlert } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import { ReactNode, memo, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
-import Balancer from 'react-wrap-balancer';
 
-import { GITHUB_ISSUES } from '@/const/url';
 import { githubService } from '@/services/github';
 import { useGlobalStore } from '@/store/global';
 
+const DatabaseRepair = dynamic(() => import('./features/DatabaseRepair'), {
+  loading: () => <Spin fullscreen />,
+  ssr: false,
+});
+
 const useStyles = createStyles(({ css, token }) => ({
   bg: css`
     cursor: pointer;
@@ -33,7 +36,6 @@ const useStyles = createStyles(({ css, token }) => ({
       transform: scale(1);
     }
   `,
-
   text: css`
     font-size: 15px;
     color: ${token.colorText};
@@ -56,6 +58,7 @@ const ErrorResult = memo<FailedModalProps>(({ children }) => {
   const initializeClientDB = useGlobalStore((s) => s.initializeClientDB);
   const error = useGlobalStore((s) => s.initClientDBError, isEqual);
   const [open, setOpen] = useState(false);
+  const [showRepair, setShowRepair] = useState(true);
 
   return (
     <>
@@ -88,35 +91,53 @@ const ErrorResult = memo<FailedModalProps>(({ children }) => {
         open={open}
         title={t('clientDB.error.title')}
       >
-        <Center gap={24}>
-          <Balancer>
-            <Trans i18nKey="clientDB.error.desc" ns={'common'}>
-              非常抱歉，Pglite 数据库初始化过程中发生异常。请尝试重试，或
-              <Link
-                aria-label={'issue'}
-                href={GITHUB_ISSUES}
+        {showRepair ? (
+          <DatabaseRepair setShowRepair={setShowRepair} />
+        ) : (
+          <Center gap={24}>
+            <div>{t('clientDB.error.desc')}</div>
+            <Flexbox width={'100%'}>
+              <Alert
+                description={`[${error?.name}] ${error?.message}`}
+                extra={
+                  <Flexbox gap={8} style={{ marginTop: 8, overflow: 'scroll' }} width={'100%'}>
+                    <Highlighter copyButtonSize={'small'} language={'json'}>
+                      {JSON.stringify(error, null, 2)}
+                    </Highlighter>
+                  </Flexbox>
+                }
+                message={t('clientDB.error.detailTitle')}
+                type={'error'}
+              />
+            </Flexbox>
+
+            <Flexbox horizontal justify={'space-between'}>
+              <Button
                 onClick={(e) => {
                   e.preventDefault();
                   githubService.submitPgliteInitError(error);
                 }}
-                target="_blank"
+                target={'_blank'}
+                type={'text'}
               >
-                提交问题
-              </Link>
-              我们将会第一时间帮你排查问题。
-            </Trans>
-          </Balancer>
-          <Button onClick={() => initializeClientDB()} size={'large'} type={'primary'}>
-            {t('clientDB.error.retry')}
-          </Button>
-
-          <Flexbox gap={8} style={{ marginTop: 8 }} width={'100%'}>
-            {t('clientDB.error.detail', { message: error?.message, type: error?.name })}
-            <Highlighter copyButtonSize={'small'} language={'json'}>
-              {JSON.stringify(error, null, 2)}
-            </Highlighter>
-          </Flexbox>
-        </Center>
+                {t('clientDB.error.report')}
+              </Button>
+              <Flexbox gap={8} horizontal>
+                <Button
+                  icon={<Icon icon={PenToolIcon} />}
+                  onClick={() => {
+                    setShowRepair(true);
+                  }}
+                >
+                  {t('clientDB.error.selfSolve')}
+                </Button>
+                <Button onClick={() => initializeClientDB()} type={'primary'}>
+                  {t('clientDB.error.retry')}
+                </Button>
+              </Flexbox>
+            </Flexbox>
+          </Center>
+        )}
       </Modal>
     </>
   );

package/src/features/InitClientDB/features/DatabaseRepair/Backup.tsx

@@ -0,0 +1,77 @@
+import { Alert } from '@lobehub/ui';
+import { App, Button, Card, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { AlertCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { resetClientDatabase } from '@/database/client/db';
+
+const { Text, Paragraph } = Typography;
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+}));
+
+const Backup = () => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+
+  const { modal } = App.useApp();
+  return (
+    <Flexbox gap={24}>
+      <Card
+        className={styles.card}
+        extra={<Text type="secondary">{t('clientDB.solve.backup.desc')}</Text>}
+        title={t('clientDB.solve.backup.title')}
+      >
+        <Paragraph>{t('clientDB.solve.backup.exportDesc')}</Paragraph>
+        <Button block type={'primary'}>
+          {t('clientDB.solve.backup.export')}
+        </Button>
+      </Card>
+
+      <Card
+        className={styles.card}
+        extra={<Text type="secondary">{t('clientDB.solve.backup.reset.desc')}</Text>}
+        title={t('clientDB.solve.backup.reset.title')}
+      >
+        <Flexbox gap={24}>
+          <Alert
+            description={t('clientDB.solve.backup.reset.alertDesc')}
+            icon={<AlertCircle size={16} />}
+            message={t('clientDB.solve.backup.reset.alert')}
+            showIcon
+            type="error"
+            variant={'pure'}
+          />
+
+          <Button
+            block
+            danger
+            onClick={() => {
+              modal.confirm({
+                content: t('clientDB.solve.backup.reset.confirm.desc'),
+                okButtonProps: {
+                  danger: true,
+                },
+                onOk: async () => {
+                  await resetClientDatabase();
+
+                  location.reload();
+                },
+                title: t('clientDB.solve.backup.reset.confirm.title'),
+              });
+            }}
+          >
+            {t('clientDB.solve.backup.reset.button')}
+          </Button>
+        </Flexbox>
+      </Card>
+    </Flexbox>
+  );
+};
+
+export default Backup;

package/src/features/InitClientDB/features/DatabaseRepair/Diagnosis.tsx

@@ -0,0 +1,98 @@
+import { Highlighter } from '@lobehub/ui';
+import { Card, List, Popover, Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import isEqual from 'fast-deep-equal';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useGlobalStore } from '@/store/global';
+import { clientDBSelectors } from '@/store/global/selectors';
+
+const useStyles = createStyles(({ css, token }) => ({
+  card: css`
+    margin-block-end: ${token.marginMD}px;
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  hash: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+  sql: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    font-size: 12px;
+  `,
+  time: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+const Diagnosis = () => {
+  const { t } = useTranslation('common');
+  const { styles, cx } = useStyles();
+
+  const migrations = useGlobalStore(clientDBSelectors.displayMigrationStatus, isEqual);
+
+  return (
+    <Card
+      className={styles.card}
+      styles={{ body: { padding: 0 } }}
+      title={t('clientDB.solve.diagnosis.title')}
+    >
+      <List
+        dataSource={migrations}
+        renderItem={(migration) => (
+          <List.Item
+            key={migration.id}
+            style={{ display: 'flex', gap: 12, justifyContent: 'space-between' }}
+          >
+            <Flexbox gap={4} horizontal>
+              <Flexbox style={{ minWidth: 20 }} width={20}>
+                {migration.index}
+              </Flexbox>
+              <Popover
+                content={
+                  <Flexbox gap={8}>
+                    <div className={styles.hash}>Hash: {migration.id}</div>
+                    <Highlighter
+                      language={'sql'}
+                      style={{ maxHeight: '30vh', maxWidth: '70vw', overflow: 'scroll' }}
+                    >
+                      {migration.sql.join('\n')}
+                    </Highlighter>
+                  </Flexbox>
+                }
+                title={t('clientDB.solve.diagnosis.sql')}
+              >
+                <Flexbox gap={8}>
+                  <Flexbox
+                    className={cx(styles.sql, migration.status === 'success' && styles.time)}
+                  >
+                    {migration.desc}
+                  </Flexbox>
+                  <Flexbox>
+                    <Flexbox className={styles.time}>
+                      {t('clientDB.solve.diagnosis.createdAt')}
+                      {dayjs(migration.createdAt).format('YYYY-MM-DD hh:mm:ss')} ·{' '}
+                      {t('clientDB.solve.diagnosis.migratedAt')}{' '}
+                      {dayjs(migration.migratedAt).format('YYYY-MM-DD hh:mm:ss')}
+                    </Flexbox>
+                  </Flexbox>
+                </Flexbox>
+              </Popover>
+            </Flexbox>
+            <Tag bordered={false} color={migration.status}>
+              {migration.status}
+            </Tag>
+          </List.Item>
+        )}
+        size="small"
+      />
+    </Card>
+  );
+};
+export default Diagnosis;

package/src/features/InitClientDB/features/DatabaseRepair/Repair.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { Alert, CodeEditor, Icon } from '@lobehub/ui';
+import { Button, Card, List, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import isEqual from 'fast-deep-equal';
+import { AlertCircle, CheckCircle, Play } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { clientDB, updateMigrationRecord } from '@/database/client/db';
+import { useGlobalStore } from '@/store/global';
+import { clientDBSelectors } from '@/store/global/selectors';
+
+const { Text } = Typography;
+
+// 使用 antd-style 创建样式
+const useStyles = createStyles(({ css, token }) => ({
+  actionBar: css`
+    display: flex;
+    justify-content: flex-end;
+    margin-block-start: ${token.marginSM}px;
+  `,
+  card: css`
+    margin-block-end: ${token.marginMD}px;
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  codeBlock: css`
+    overflow-x: auto;
+
+    margin-block: ${token.marginSM}px;
+    margin-inline: 0;
+    padding: ${token.paddingSM}px;
+    border-radius: ${token.borderRadiusSM}px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+
+    background: ${token.colorBgTextHover};
+  `,
+  container: css`
+    overflow-y: auto;
+    padding: 0;
+  `,
+  header: css`
+    display: flex;
+    align-items: center;
+    margin-block-end: ${token.marginMD}px;
+  `,
+  migrationItem: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: ${token.paddingSM}px;
+    padding-inline: 0;
+    border-block-end: none;
+  `,
+  spotlight: css`
+    margin-block-end: ${token.marginLG}px;
+  `,
+
+  templateCard: css`
+    margin-block-end: ${token.marginSM}px;
+  `,
+}));
+
+interface QueryResult {
+  message: string;
+  success: boolean;
+}
+const Repair = memo(() => {
+  const { t } = useTranslation('common');
+
+  const { styles } = useStyles();
+  const [sqlQuery, setSqlQuery] = useState('');
+  const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
+  const [showSQLHash, setShowSQLHash] = useState('');
+
+  const errorMigrations = useGlobalStore(clientDBSelectors.errorMigrations, isEqual);
+
+  const handleExecuteSQL = async () => {
+    try {
+      // 移除 BEGIN 和 COMMIT
+      let processedSQL = sqlQuery.replaceAll(/BEGIN;|COMMIT;/g, '');
+
+      // 分割 SQL 语句（使用 statement-breakpoint 作为分隔符）
+      const migrationQueries = processedSQL.split('--> statement-breakpoint');
+
+      // 手动管理事务
+      await clientDB.execute('BEGIN;');
+
+      try {
+        for (const query of migrationQueries) {
+          if (query.trim()) {
+            await clientDB.execute(query);
+          }
+        }
+        await clientDB.execute('COMMIT;');
+
+        setQueryResult({
+          message: `SQL executed successfully.`,
+          success: true,
+        });
+      } catch (error) {
+        await clientDB.execute('ROLLBACK;');
+
+        throw error;
+      }
+    } catch (error) {
+      setQueryResult({ message: (error as Error).message, success: false });
+    }
+  };
+
+  return (
+    <div>
+      <Card
+        className={styles.card}
+        extra={<Text type="secondary">{t('clientDB.solve.repair.desc')}</Text>}
+        title={t('clientDB.solve.repair.title')}
+        variant={'borderless'}
+      >
+        <List
+          dataSource={errorMigrations}
+          renderItem={(migration) => (
+            <>
+              <List.Item
+                actions={[
+                  <Button
+                    icon={<Icon icon={Play} />}
+                    key="retry"
+                    onClick={() => {
+                      setShowSQLHash(!!showSQLHash ? '' : migration.hash);
+                      setSqlQuery(migration.sql.join('--> statement-breakpoint\n'));
+                    }}
+                  >
+                    {t('clientDB.solve.repair.runSQL')}
+                  </Button>,
+                ]}
+                className={styles.migrationItem}
+                key={migration.hash}
+              >
+                <List.Item.Meta
+                  description={
+                    <Flexbox>
+                      {t('clientDB.solve.diagnosis.createdAt')}
+                      {dayjs(migration.folderMillis).format('YYYY-MM-DD hh:mm:ss')} ·
+                    </Flexbox>
+                  }
+                  title={migration.sql[0]}
+                />
+              </List.Item>
+              {showSQLHash === migration.hash && (
+                <Card
+                  className={styles.card}
+                  extra={<Text type="secondary">{t('clientDB.solve.repair.sql.desc')}</Text>}
+                  title={t('clientDB.solve.repair.sql.title')}
+                >
+                  <Flexbox gap={16}>
+                    <CodeEditor
+                      language={'sql'}
+                      onValueChange={(e) => setSqlQuery(e)}
+                      placeholder={t('clientDB.solve.repair.sql.placeholder')}
+                      style={{ fontFamily: 'monospace', height: 300 }}
+                      value={sqlQuery}
+                    />
+                    <Flexbox horizontal style={{ justifyContent: 'space-between' }}>
+                      <Button onClick={() => setSqlQuery('')}>
+                        {t('clientDB.solve.repair.sql.clear')}
+                      </Button>
+                      <Button disabled={!sqlQuery.trim()} onClick={handleExecuteSQL} type="primary">
+                        {t('clientDB.solve.repair.sql.run')}
+                      </Button>
+                    </Flexbox>
+
+                    {queryResult && (
+                      <Alert
+                        action={
+                          queryResult.success && (
+                            <Button
+                              key="complete"
+                              onClick={() => updateMigrationRecord(migration.hash)}
+                              size={'small'}
+                              type="primary"
+                            >
+                              {t('clientDB.solve.repair.sql.markFinished')}
+                            </Button>
+                          )
+                        }
+                        description={
+                          <pre style={{ marginTop: '8px', whiteSpace: 'pre-wrap' }}>
+                            {queryResult.message}
+                          </pre>
+                        }
+                        icon={
+                          queryResult.success ? (
+                            <AlertCircle size={16} />
+                          ) : (
+                            <CheckCircle size={16} />
+                          )
+                        }
+                        message={t('clientDB.solve.repair.sql.result')}
+                        showIcon
+                        type={queryResult.success ? 'success' : 'error'}
+                      />
+                    )}
+                  </Flexbox>
+                </Card>
+              )}
+            </>
+          )}
+        />
+      </Card>
+    </div>
+  );
+});
+
+export default Repair;

package/src/features/InitClientDB/features/DatabaseRepair/index.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { Button, Segmented } from 'antd';
+import { createStyles } from 'antd-style';
+import { AlertCircle, ArrowLeft, PenToolIcon as Tool } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Backup from './Backup';
+import Diagnosis from './Diagnosis';
+import Repair from './Repair';
+
+const useStyles = createStyles(({ css, token }) => ({
+  backButton: css`
+    margin-inline-end: ${token.marginSM}px;
+    padding-block: 4px;
+    padding-inline: 8px;
+  `,
+}));
+
+interface DatabaseRepairProps {
+  setShowRepair: (value: boolean) => void;
+}
+
+const DatabaseRepair = memo<DatabaseRepairProps>(({ setShowRepair }) => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const [activeTab, setActiveTab] = useState('diagnosis');
+
+  return (
+    <Flexbox gap={12}>
+      <Flexbox horizontal justify={'space-between'}>
+        <Button
+          className={styles.backButton}
+          icon={<ArrowLeft size={16} />}
+          onClick={() => setShowRepair(false)}
+          type="text"
+        >
+          {t('back')}
+        </Button>
+        <Segmented
+          onChange={setActiveTab}
+          options={[
+            {
+              label: (
+                <Flexbox align={'center'} horizontal>
+                  <AlertCircle size={16} style={{ marginRight: 8 }} />
+                  {t('clientDB.solve.tabs.diagnosis')}
+                </Flexbox>
+              ),
+              value: 'diagnosis',
+            },
+            {
+              label: (
+                <Flexbox align={'center'} horizontal>
+                  <Tool size={16} style={{ marginRight: 8 }} />
+                  {t('clientDB.solve.tabs.repair')}
+                </Flexbox>
+              ),
+              value: 'repair',
+            },
+            // {
+            //   label: (
+            //     <Flexbox align={'center'} horizontal>
+            //       <Shield size={16} style={{ marginRight: 8 }} />
+            //       {t('clientDB.solve.tabs.backup')}
+            //     </Flexbox>
+            //   ),
+            //   value: 'backup',
+            // },
+          ]}
+          value={activeTab}
+        />
+        <Flexbox width={36} />
+      </Flexbox>
+
+      {activeTab === 'diagnosis' && <Diagnosis />}
+      {activeTab === 'repair' && <Repair />}
+      {activeTab === 'backup' && <Backup />}
+    </Flexbox>
+  );
+});
+
+export default DatabaseRepair;

package/src/features/ModelSwitchPanel/index.tsx

@@ -15,6 +15,7 @@ import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { EnabledProviderWithModels } from '@/types/aiProvider';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
@@ -49,6 +50,7 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
     s.updateAgentConfig,
   ]);
 
+  const { showLLM } = useServerConfigStore(featureFlagsSelectors);
   const isMobile = useIsMobile();
 
   const router = useRouter();
@@ -115,13 +117,17 @@ const ModelSwitchPanel = memo<PropsWithChildren>(({ children }) => {
             provider={provider.id}
             source={provider.source}
           />
-          <Link href={isDeprecatedEdition ? '/settings/llm' : `/settings/provider/${provider.id}`}>
-            <ActionIcon
-              icon={LucideBolt}
-              size={'small'}
-              title={t('ModelSwitchPanel.goToSettings')}
-            />
-          </Link>
+          {showLLM && (
+            <Link
+              href={isDeprecatedEdition ? '/settings/llm' : `/settings/provider/${provider.id}`}
+            >
+              <ActionIcon
+                icon={LucideBolt}
+                size={'small'}
+                title={t('ModelSwitchPanel.goToSettings')}
+              />
+            </Link>
+          )}
         </Flexbox>
       ),
       type: 'group',