@lobehub/lobehub 2.0.0-next.275 → 2.0.0-next.276

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+## [Version 2.0.0-next.276](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.275...v2.0.0-next.276)
+
+<sup>Released on **2026-01-13**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.275](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.274...v2.0.0-next.275)
 
 <sup>Released on **2026-01-13**</sup>

package/changelog/v1.json

@@ -1,4 +1,9 @@
 [
+  {
+    "children": {},
+    "date": "2026-01-13",
+    "version": "2.0.0-next.276"
+  },
   {
     "children": {
       "features": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.275",
+  "version": "2.0.0-next.276",
   "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/app/[variants]/(main)/agent/features/Conversation/index.tsx

@@ -1,5 +1,5 @@
 import { Flexbox, TooltipGroup } from '@lobehub/ui';
-import { memo } from 'react';
+import React, { memo } from 'react';
 
 import DragUploadZone, { useUploadFiles } from '@/components/DragUploadZone';
 import { useAgentStore } from '@/store/agent';
@@ -10,6 +10,12 @@ import { systemStatusSelectors } from '@/store/global/selectors';
 import ConversationArea from './ConversationArea';
 import ChatHeader from './Header';
 
+const wrapperStyle: React.CSSProperties = {
+  height: '100%',
+  minWidth: 300,
+  width: '100%',
+};
+
 const ChatConversation = memo(() => {
   const showHeader = useGlobalStore(systemStatusSelectors.showChatHeader);
 
@@ -19,7 +25,7 @@ const ChatConversation = memo(() => {
   const { handleUploadFiles } = useUploadFiles({ model, provider });
 
   return (
-    <DragUploadZone onUploadFiles={handleUploadFiles} style={{ height: '100%', width: '100%' }}>
+    <DragUploadZone onUploadFiles={handleUploadFiles} style={wrapperStyle}>
       <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
         {showHeader && <ChatHeader />}
         <TooltipGroup>

package/src/app/[variants]/(main)/agent/features/Portal/_layout/Mobile.tsx

@@ -39,6 +39,7 @@ const Layout = () => {
     <Modal
       allowFullscreen
       className={cx(isPortalThread && styles.container)}
+      destroyOnHidden
       footer={null}
       height={'95%'}
       onCancel={() => togglePortal(false)}

package/src/app/[variants]/(main)/agent/features/Portal/features/Portal.tsx

@@ -3,7 +3,7 @@
 import { DraggablePanel, type DraggablePanelProps } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { type PropsWithChildren, memo, useState } from 'react';
+import { Activity, type PropsWithChildren, memo, useState } from 'react';
 
 import {
   CHAT_PORTAL_MAX_WIDTH,
@@ -81,7 +81,9 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
       showHandleWideArea={false}
       size={{ height: '100%', width: portalWidth }}
     >
-      {children}
+      <Activity mode={showPortal ? 'visible' : 'hidden'} name="AgentPortal">
+        {children}
+      </Activity>
     </DraggablePanel>
   );
 });

package/src/app/[variants]/(main)/group/features/Portal/_layout/Mobile.tsx

@@ -39,6 +39,7 @@ const Layout = () => {
     <Modal
       allowFullscreen
       className={cx(isPortalThread && styles.container)}
+      destroyOnHidden
       footer={null}
       height={'95%'}
       onCancel={() => togglePortal(false)}

package/src/app/[variants]/(main)/group/features/Portal/features/Portal.tsx

@@ -4,7 +4,7 @@ import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } fro
 import { Flexbox } from '@lobehub/ui';
 import { createStaticStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { type PropsWithChildren, memo, useState } from 'react';
+import { Activity, type PropsWithChildren, memo, useState } from 'react';
 
 import {
   CHAT_PORTAL_MAX_WIDTH,
@@ -94,7 +94,9 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
           minWidth: CHAT_PORTAL_WIDTH,
         }}
       >
-        <Flexbox className={styles.panel}>{children}</Flexbox>
+        <Activity mode={showPortal ? 'visible' : 'hidden'} name="GroupPortal">
+          <Flexbox className={styles.panel}>{children}</Flexbox>
+        </Activity>
       </DraggablePanelContainer>
     </DraggablePanel>
   );

package/src/hooks/useYamlArguments.ts

@@ -1,16 +1,19 @@
 import { parse } from 'partial-json';
+import { useMemo } from 'react';
 import { stringify } from 'yaml';
 
 export const useYamlArguments = (args?: string) => {
-  if (!args) return '';
+  return useMemo(() => {
+    if (!args) return '';
 
-  try {
-    const obj = parse(args);
+    try {
+      const obj = parse(args);
 
-    if (Object.keys(obj).length === 0) return '';
+      if (Object.keys(obj).length === 0) return '';
 
-    return stringify(obj);
-  } catch {
-    return args;
-  }
+      return stringify(obj);
+    } catch {
+      return args;
+    }
+  }, [args]);
 };