@lobehub/lobehub 2.0.0-next.231 → 2.0.0-next.232

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.232](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.231...v2.0.0-next.232)
+
+<sup>Released on **2026-01-07**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Correct BrandTextLoading position after removing SSG CSS-in-JS injection.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Correct BrandTextLoading position after removing SSG CSS-in-JS injection, closes [#11312](https://github.com/lobehub/lobe-chat/issues/11312) ([0de4eb8](https://github.com/lobehub/lobe-chat/commit/0de4eb8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.231](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.230...v2.0.0-next.231)
 
 <sup>Released on **2026-01-07**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Correct BrandTextLoading position after removing SSG CSS-in-JS injection."
+      ]
+    },
+    "date": "2026-01-07",
+    "version": "2.0.0-next.232"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.231",
+  "version": "2.0.0-next.232",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/components/Loading/BrandTextLoading/index.module.css

@@ -0,0 +1,81 @@
+.container {
+  --brand-text-color: var(--colorText, #1f1f1f);
+  --brand-muted-color: var(--colorTextSecondary, #8c8c8c);
+  --brand-border-color: var(--colorBorder, #d9d9d9);
+  --brand-tag-bg: var(--colorFillTertiary, rgba(0, 0, 0, 0.04));
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  gap: 12px;
+}
+
+[data-theme='dark'] .container {
+  --brand-text-color: var(--colorText, #f0f0f0);
+  --brand-muted-color: var(--colorTextSecondary, #a6a6a6);
+  --brand-border-color: var(--colorBorder, #424242);
+  --brand-tag-bg: var(--colorFillTertiary, rgba(255, 255, 255, 0.08));
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  opacity: 0.6;
+  color: var(--brand-text-color);
+}
+
+.brand :global(.lobe-brand-loading) {
+  display: block;
+  color: inherit;
+}
+
+.debug {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+
+  padding: 16px;
+}
+
+.debugRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  font-size: 12px;
+  color: var(--brand-muted-color);
+}
+
+.debugRow code {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+}
+
+.debugTag {
+  display: inline-flex;
+  align-items: center;
+
+  padding: 2px 8px;
+  border: 1px solid var(--brand-border-color);
+  border-radius: 6px;
+
+  background: var(--brand-tag-bg);
+}
+
+.debugTag code {
+  color: var(--brand-text-color);
+}
+
+.debugHint {
+  font-size: 12px;
+  color: var(--brand-muted-color);
+}

package/src/components/Loading/BrandTextLoading/index.tsx

@@ -1,34 +1,41 @@
-import { Center, Tag, Text } from '@lobehub/ui';
 import { BrandLoading, LobeHubText } from '@lobehub/ui/brand';
 
 import { isCustomBranding } from '@/const/version';
 
 import CircleLoading from '../CircleLoading';
+import styles from './index.module.css';
 
 interface BrandTextLoadingProps {
   debugId: string;
 }
 
 const BrandTextLoading = ({ debugId }: BrandTextLoadingProps) => {
-  if (isCustomBranding) return <CircleLoading />;
+  if (isCustomBranding)
+    return (
+      <div className={styles.container}>
+        <CircleLoading />
+      </div>
+    );
+
+  const showDebug = process.env.NODE_ENV === 'development' && debugId;
 
   return (
-    <Center height={'100%'} width={'100%'}>
-      <BrandLoading size={40} style={{ opacity: 0.6 }} text={LobeHubText} />
-      {process.env.NODE_ENV === 'development' && debugId && (
-        <Center gap={4} padding={16}>
-          <Text code style={{ alignItems: 'center', display: 'flex' }}>
-            Debug ID:{' '}
-            <Tag size={'large'}>
-              <Text code>{debugId}</Text>
-            </Tag>
-          </Text>
-          <Text fontSize={12} type={'secondary'}>
-            only visible in development
-          </Text>
-        </Center>
+    <div className={styles.container}>
+      <div aria-label="Loading" className={styles.brand} role="status">
+        <BrandLoading size={40} text={LobeHubText} />
+      </div>
+      {showDebug && (
+        <div className={styles.debug}>
+          <div className={styles.debugRow}>
+            <code>Debug ID:</code>
+            <span className={styles.debugTag}>
+              <code>{debugId}</code>
+            </span>
+          </div>
+          <div className={styles.debugHint}>only visible in development</div>
+        </div>
       )}
-    </Center>
+    </div>
   );
 };
 

package/src/libs/redis/manager.ts

@@ -94,3 +94,66 @@ export const createRedisWithPrefix = async (
   await provider.initialize();
   return provider;
 };
+
+/**
+ * Manages singleton Redis clients per prefix
+ */
+class PrefixedRedisManager {
+  private static instances = new Map<string, BaseRedisProvider>();
+  private static initPromises = new Map<string, Promise<BaseRedisProvider | null>>();
+
+  static async initialize(config: RedisConfig, prefix: string): Promise<BaseRedisProvider | null> {
+    const existing = this.instances.get(prefix);
+    if (existing) return existing;
+
+    const pendingPromise = this.initPromises.get(prefix);
+    if (pendingPromise) return pendingPromise;
+
+    const initPromise = (async () => {
+      const provider = createProvider(config, prefix);
+      if (!provider) return null;
+
+      await provider.initialize();
+      this.instances.set(prefix, provider);
+      return provider;
+    })().catch((error) => {
+      this.initPromises.delete(prefix);
+      throw error;
+    });
+
+    this.initPromises.set(prefix, initPromise);
+    return initPromise;
+  }
+
+  static async reset(prefix?: string) {
+    if (prefix) {
+      const instance = this.instances.get(prefix);
+      if (instance) {
+        await instance.disconnect();
+        this.instances.delete(prefix);
+        this.initPromises.delete(prefix);
+      }
+    } else {
+      for (const instance of this.instances.values()) {
+        await instance.disconnect();
+      }
+      this.instances.clear();
+      this.initPromises.clear();
+    }
+  }
+}
+
+/**
+ * Initialize a singleton Redis client with custom prefix
+ *
+ * Unlike createRedisWithPrefix, this reuses the same client for each prefix,
+ * avoiding connection leaks when called frequently.
+ *
+ * @param config - Redis config
+ * @param prefix - Custom prefix for all keys (e.g., 'aiGeneration')
+ * @returns Redis client or null if Redis is disabled
+ */
+export const initializeRedisWithPrefix = (config: RedisConfig, prefix: string) =>
+  PrefixedRedisManager.initialize(config, prefix);
+
+export const resetPrefixedRedisClient = (prefix?: string) => PrefixedRedisManager.reset(prefix);

package/src/server/services/agent/index.test.ts

@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { AgentModel } from '@/database/models/agent';
 import { SessionModel } from '@/database/models/session';
 import { UserModel } from '@/database/models/user';
-import { RedisKeys, createRedisWithPrefix } from '@/libs/redis';
+import { RedisKeys, initializeRedisWithPrefix, isRedisEnabled } from '@/libs/redis';
 import { parseAgentConfig } from '@/server/globalConfig/parseDefaultAgent';
 
 import { AgentService } from './index';
@@ -43,7 +43,8 @@ vi.mock('@/libs/redis', async (importOriginal) => {
   const original = await importOriginal<typeof import('@/libs/redis')>();
   return {
     ...original,
-    createRedisWithPrefix: vi.fn(),
+    initializeRedisWithPrefix: vi.fn(),
+    isRedisEnabled: vi.fn(),
   };
 });
 
@@ -290,7 +291,8 @@ describe('AgentService', () => {
       const mockRedisClient = { get: mockRedisGet };
 
       beforeEach(() => {
-        vi.mocked(createRedisWithPrefix).mockReset();
+        vi.mocked(initializeRedisWithPrefix).mockReset();
+        vi.mocked(isRedisEnabled).mockReset();
         mockRedisGet.mockReset();
       });
 
@@ -310,7 +312,8 @@ describe('AgentService', () => {
 
         (AgentModel as any).mockImplementation(() => mockAgentModel);
         (parseAgentConfig as any).mockReturnValue({});
-        vi.mocked(createRedisWithPrefix).mockResolvedValue(mockRedisClient as any);
+        vi.mocked(isRedisEnabled).mockReturnValue(true);
+        vi.mocked(initializeRedisWithPrefix).mockResolvedValue(mockRedisClient as any);
         mockRedisGet.mockResolvedValue(JSON.stringify(welcomeData));
 
         const newService = new AgentService(mockDb, mockUserId);
@@ -334,7 +337,7 @@ describe('AgentService', () => {
 
         (AgentModel as any).mockImplementation(() => mockAgentModel);
         (parseAgentConfig as any).mockReturnValue({});
-        vi.mocked(createRedisWithPrefix).mockResolvedValue(null);
+        vi.mocked(isRedisEnabled).mockReturnValue(false);
 
         const newService = new AgentService(mockDb, mockUserId);
         const result = await newService.getAgentConfigById('agent-1');
@@ -343,6 +346,7 @@ describe('AgentService', () => {
         expect(result?.openingMessage).toBe('Default message');
         // openingQuestions comes from DEFAULT_AGENT_CONFIG (empty array)
         expect(result?.openingQuestions).toEqual([]);
+        expect(initializeRedisWithPrefix).not.toHaveBeenCalled();
       });
 
       it('should return normal config when Redis key does not exist', async () => {
@@ -357,7 +361,8 @@ describe('AgentService', () => {
 
         (AgentModel as any).mockImplementation(() => mockAgentModel);
         (parseAgentConfig as any).mockReturnValue({});
-        vi.mocked(createRedisWithPrefix).mockResolvedValue(mockRedisClient as any);
+        vi.mocked(isRedisEnabled).mockReturnValue(true);
+        vi.mocked(initializeRedisWithPrefix).mockResolvedValue(mockRedisClient as any);
         mockRedisGet.mockResolvedValue(null);
 
         const newService = new AgentService(mockDb, mockUserId);
@@ -381,7 +386,8 @@ describe('AgentService', () => {
 
         (AgentModel as any).mockImplementation(() => mockAgentModel);
         (parseAgentConfig as any).mockReturnValue({});
-        vi.mocked(createRedisWithPrefix).mockRejectedValue(new Error('Redis connection failed'));
+        vi.mocked(isRedisEnabled).mockReturnValue(true);
+        vi.mocked(initializeRedisWithPrefix).mockRejectedValue(new Error('Redis connection failed'));
 
         const newService = new AgentService(mockDb, mockUserId);
         const result = await newService.getAgentConfigById('agent-1');
@@ -403,7 +409,8 @@ describe('AgentService', () => {
 
         (AgentModel as any).mockImplementation(() => mockAgentModel);
         (parseAgentConfig as any).mockReturnValue({});
-        vi.mocked(createRedisWithPrefix).mockResolvedValue(mockRedisClient as any);
+        vi.mocked(isRedisEnabled).mockReturnValue(true);
+        vi.mocked(initializeRedisWithPrefix).mockResolvedValue(mockRedisClient as any);
         mockRedisGet.mockResolvedValue('invalid json {');
 
         const newService = new AgentService(mockDb, mockUserId);

package/src/server/services/agent/index.ts

@@ -3,17 +3,20 @@ import { DEFAULT_AGENT_CONFIG } from '@lobechat/const';
 import { type LobeChatDatabase } from '@lobechat/database';
 import { type AgentItem, type LobeAgentConfig } from '@lobechat/types';
 import { cleanObject, merge } from '@lobechat/utils';
+import debug from 'debug';
 import type { PartialDeep } from 'type-fest';
 
 import { AgentModel } from '@/database/models/agent';
 import { SessionModel } from '@/database/models/session';
 import { UserModel } from '@/database/models/user';
 import { getRedisConfig } from '@/envs/redis';
-import { RedisKeyNamespace, RedisKeys, createRedisWithPrefix } from '@/libs/redis';
+import { RedisKeyNamespace, RedisKeys, initializeRedisWithPrefix, isRedisEnabled } from '@/libs/redis';
 import { getServerDefaultAgentConfig } from '@/server/globalConfig';
 
 import { type UpdateAgentResult } from './type';
 
+const log = debug('lobe-agent:service');
+
 interface AgentWelcomeData {
   openQuestions: string[];
   welcomeMessage: string;
@@ -113,7 +116,10 @@ export class AgentService {
    */
   private async getAgentWelcomeFromRedis(agentId: string): Promise<AgentWelcomeData | null> {
     try {
-      const redis = await createRedisWithPrefix(getRedisConfig(), RedisKeyNamespace.AI_GENERATION);
+      const redisConfig = getRedisConfig();
+      if (!isRedisEnabled(redisConfig)) return null;
+
+      const redis = await initializeRedisWithPrefix(redisConfig, RedisKeyNamespace.AI_GENERATION);
       if (!redis) return null;
 
       const key = RedisKeys.aiGeneration.agentWelcome(agentId);
@@ -121,8 +127,9 @@ export class AgentService {
       if (!value) return null;
 
       return JSON.parse(value) as AgentWelcomeData;
-    } catch {
-      // Silently fail - Redis errors shouldn't break agent retrieval
+    } catch (error) {
+      // Log error for observability but don't break agent retrieval
+      log('Failed to get agent welcome from Redis for agent %s: %O', agentId, error);
       return null;
     }
   }