Merge branch 'main' of https://github.com/lobehub/lobe-chat

actions-user · actions-user · commit 88272f5eb3ae · 2025-02-28T05:02:38.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.66.5](https://github.com/lobehub/lobe-chat/compare/v1.66.4...v1.66.5)
+
+<sup>Released on **2025-02-28**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve portal style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve portal style, closes [#6588](https://github.com/lobehub/lobe-chat/issues/6588) ([55b5416](https://github.com/lobehub/lobe-chat/commit/55b5416))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.66.4](https://github.com/lobehub/lobe-chat/compare/v1.66.3...v1.66.4)
 
 <sup>Released on **2025-02-28**</sup>
diff --git a/changelog/v1.json b/changelog/v1.json
@@ -1,4 +1,11 @@
 [
+  {
+    "children": {
+      "improvements": ["Improve portal style."]
+    },
+    "date": "2025-02-28",
+    "version": "1.66.5"
+  },
   {
     "children": {
       "improvements": ["Optimize smooth output."]
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.66.4",
+  "version": "1.66.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot 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",
diff --git a/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx b/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx
@@ -25,6 +25,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
   drawer: css`
     z-index: 10;
+    height: 100%;
     background: ${token.colorBgLayout};
   `,
   header: css`
@@ -71,38 +72,36 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
   };
 
   return (
-    showInspector && (
-      <DraggablePanel
-        className={styles.drawer}
-        classNames={{
-          content: styles.content,
+    <DraggablePanel
+      className={styles.drawer}
+      classNames={{
+        content: styles.content,
+      }}
+      defaultSize={{ width: tmpWidth }}
+      expand={showInspector}
+      hanlderStyle={{ display: 'none' }}
+      maxWidth={CHAT_PORTAL_MAX_WIDTH}
+      minWidth={
+        showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
+      }
+      mode={md ? 'fixed' : 'float'}
+      onSizeChange={handleSizeChange}
+      placement={'right'}
+      showHandlerWhenUnexpand={false}
+      showHandlerWideArea={false}
+      size={{ height: '100%', width: portalWidth }}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          maxHeight: '100vh',
+          minWidth: CHAT_PORTAL_WIDTH,
         }}
-        defaultSize={{ width: tmpWidth }}
-        expand
-        hanlderStyle={{ display: 'none' }}
-        maxWidth={CHAT_PORTAL_MAX_WIDTH}
-        minWidth={
-          showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
-        }
-        mode={md ? 'fixed' : 'float'}
-        onSizeChange={handleSizeChange}
-        placement={'right'}
-        showHandlerWhenUnexpand={false}
-        showHandlerWideArea={false}
-        size={{ height: '100%', width: portalWidth }}
       >
-        <DraggablePanelContainer
-          style={{
-            flex: 'none',
-            height: '100%',
-            maxHeight: '100vh',
-            minWidth: CHAT_PORTAL_WIDTH,
-          }}
-        >
-          <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
-        </DraggablePanelContainer>
-      </DraggablePanel>
-    )
+        <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
+      </DraggablePanelContainer>
+    </DraggablePanel>
   );
 });
 
diff --git a/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx b/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx
@@ -49,31 +49,29 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
   }, [lg, cacheExpand]);
 
   return (
-    !showPortal && (
-      <DraggablePanel
-        className={styles.drawer}
-        classNames={{
-          content: styles.content,
+    <DraggablePanel
+      className={styles.drawer}
+      classNames={{
+        content: styles.content,
+      }}
+      expand={showTopic && !showPortal}
+      minWidth={CHAT_SIDEBAR_WIDTH}
+      mode={md ? 'fixed' : 'float'}
+      onExpandChange={handleExpand}
+      placement={'right'}
+      showHandlerWideArea={false}
+    >
+      <DraggablePanelContainer
+        style={{
+          flex: 'none',
+          height: '100%',
+          maxHeight: '100vh',
+          minWidth: CHAT_SIDEBAR_WIDTH,
         }}
-        expand={showTopic}
-        minWidth={CHAT_SIDEBAR_WIDTH}
-        mode={md ? 'fixed' : 'float'}
-        onExpandChange={handleExpand}
-        placement={'right'}
-        showHandlerWideArea={false}
       >
-        <DraggablePanelContainer
-          style={{
-            flex: 'none',
-            height: '100%',
-            maxHeight: '100vh',
-            minWidth: CHAT_SIDEBAR_WIDTH,
-          }}
-        >
-          {children}
-        </DraggablePanelContainer>
-      </DraggablePanel>
-    )
+        {children}
+      </DraggablePanelContainer>
+    </DraggablePanel>
   );
 });
 
diff --git a/src/components/AnimatedCollapsed/index.tsx b/src/components/AnimatedCollapsed/index.tsx
@@ -0,0 +1,59 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { CSSProperties, ReactNode, memo } from 'react';
+
+interface AnimatedCollapsedProps {
+  children: ReactNode;
+  height?: {
+    collapsed?: string | number;
+    open?: string | number;
+  };
+  open: boolean;
+  style?: CSSProperties;
+  styles?: {
+    collapsed?: CSSProperties;
+    open?: CSSProperties;
+  };
+  width?: {
+    collapsed?: string | number;
+    open?: string | number;
+  };
+}
+
+const AnimatedCollapsed = memo<AnimatedCollapsedProps>(
+  ({ open, children, styles, style, width, height }) => {
+    return (
+      <AnimatePresence initial={false}>
+        {open && (
+          <motion.div
+            animate="open"
+            exit="collapsed"
+            initial="collapsed"
+            style={style}
+            transition={{
+              duration: 0.2,
+              ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
+            }}
+            variants={{
+              collapsed: {
+                ...(styles?.collapsed as any),
+                height: height?.collapsed ?? 0,
+                opacity: 0,
+                width: width?.collapsed ?? 0,
+              },
+              open: {
+                ...(styles?.open as any),
+                height: height?.open ?? 'auto',
+                opacity: 1,
+                width: width?.open ?? 'auto',
+              },
+            }}
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    );
+  },
+);
+
+export default AnimatedCollapsed;
diff --git a/src/features/Conversation/Messages/Assistant/Tool/index.tsx b/src/features/Conversation/Messages/Assistant/Tool/index.tsx
@@ -1,7 +1,8 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import { CSSProperties, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import AnimatedCollapsed from '@/components/AnimatedCollapsed';
+
 import Inspectors from './Inspector';
 import Render from './Render';
 
@@ -36,32 +37,16 @@ const Tool = memo<InspectorProps>(
           showPluginRender={showPluginRender}
           showRender={showRender}
         />
-        <AnimatePresence initial={false}>
-          {showRender && (
-            <motion.div
-              animate="open"
-              exit="collapsed"
-              initial="collapsed"
-              transition={{
-                duration: 0.1,
-                ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
-              }}
-              variants={{
-                collapsed: { height: 0, opacity: 0, width: 0 },
-                open: { height: 'auto', opacity: 1, width: 'auto' },
-              }}
-            >
-              <Render
-                messageId={messageId}
-                requestArgs={requestArgs}
-                setShowPluginRender={setShowPluginRender}
-                showPluginRender={showPluginRender}
-                toolCallId={id}
-                toolIndex={index}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
+        <AnimatedCollapsed open={showRender}>
+          <Render
+            messageId={messageId}
+            requestArgs={requestArgs}
+            setShowPluginRender={setShowPluginRender}
+            showPluginRender={showPluginRender}
+            toolCallId={id}
+            toolIndex={index}
+          />
+        </AnimatedCollapsed>
       </Flexbox>
     );
   },
diff --git a/src/tools/web-browsing/Portal/ResultList/index.tsx b/src/tools/web-browsing/Portal/ResultList/index.tsx
@@ -11,7 +11,7 @@ interface ResultListProps {
 
 const ResultList = memo<ResultListProps>(({ dataSources }) => {
   const itemContent = useCallback(
-    (index: number, result: SearchResult) => <Item {...result} highlight={index < 5} />,
+    (index: number, result: SearchResult) => <Item {...result} highlight={index < 15} />,
     [],
   );
 
diff --git a/src/tools/web-browsing/Portal/index.tsx b/src/tools/web-browsing/Portal/index.tsx
@@ -29,16 +29,17 @@ const Inspector = memo<InspectorUIProps<SearchArguments, SearchResponse>>(
     const defaultEngines = engines.length > 0 ? engines : args.searchEngine || [];
     const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
 
-    return (
-      <Flexbox gap={12} height={'100%'}>
-        <SearchBar
-          aiSummary={false}
-          defaultEngines={defaultEngines}
-          defaultQuery={args.query}
-          messageId={messageId}
-          tooltip={false}
-        />
-        {loading ? (
+    if (loading) {
+      return (
+        <Flexbox gap={12} height={'100%'}>
+          <SearchBar
+            aiSummary={false}
+            defaultEngines={defaultEngines}
+            defaultQuery={args.query}
+            messageId={messageId}
+            tooltip={false}
+          />
+
           <Flexbox gap={16} paddingBlock={16} paddingInline={12}>
             {[1, 2, 3, 4, 6].map((id) => (
               <Skeleton
@@ -49,14 +50,25 @@ const Inspector = memo<InspectorUIProps<SearchArguments, SearchResponse>>(
               />
             ))}
           </Flexbox>
-        ) : (
-          <>
-            <Flexbox height={'100%'} width={'100%'}>
-              <ResultList dataSources={state.results} />
-            </Flexbox>
-            <Footer />
-          </>
-        )}
+        </Flexbox>
+      );
+    }
+
+    return (
+      <Flexbox gap={0} height={'100%'}>
+        <Flexbox gap={12} height={'100%'}>
+          <SearchBar
+            aiSummary={false}
+            defaultEngines={defaultEngines}
+            defaultQuery={args.query}
+            messageId={messageId}
+            tooltip={false}
+          />
+          <Flexbox height={'100%'} width={'100%'}>
+            <ResultList dataSources={state.results} />
+          </Flexbox>
+        </Flexbox>
+        <Footer />
       </Flexbox>
     );
   },
diff --git a/src/tools/web-browsing/Render/SearchResult/SearchResultItem.tsx b/src/tools/web-browsing/Render/SearchResult/SearchResultItem.tsx
@@ -30,7 +30,7 @@ const useStyles = createStyles(({ css, token }) => ({
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
 
-    color: ${token.colorTextSecondary};
+    color: ${token.colorText};
     text-overflow: ellipsis;
   `,
   url: css`

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,11 @@`
`1`	`1`	`[`
	`2`	`+ {`
	`3`	`+ "children": {`
	`4`	`+ "improvements": ["Improve portal style."]`
	`5`	`+ },`
	`6`	`+ "date": "2025-02-28",`
	`7`	`+ "version": "1.66.5"`
	`8`	`+ },`
`2`	`9`	`{`
`3`	`10`	`"children": {`
`4`	`11`	`"improvements": ["Optimize smooth output."]`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@lobehub/chat",`
`3`		`- "version": "1.66.4",`
	`3`	`+ "version": "1.66.5",`
`4`	`4`	`"description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"framework",`