@lobehub/chat 1.66.4 → 1.66.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,31 @@
2
2
 
3
3
  # Changelog
4
4
 
5
+ ### [Version 1.66.5](https://github.com/lobehub/lobe-chat/compare/v1.66.4...v1.66.5)
6
+
7
+ <sup>Released on **2025-02-28**</sup>
8
+
9
+ #### 💄 Styles
10
+
11
+ - **misc**: Improve portal style.
12
+
13
+ <br/>
14
+
15
+ <details>
16
+ <summary><kbd>Improvements and Fixes</kbd></summary>
17
+
18
+ #### Styles
19
+
20
+ - **misc**: Improve portal style, closes [#6588](https://github.com/lobehub/lobe-chat/issues/6588) ([55b5416](https://github.com/lobehub/lobe-chat/commit/55b5416))
21
+
22
+ </details>
23
+
24
+ <div align="right">
25
+
26
+ [![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
27
+
28
+ </div>
29
+
5
30
  ### [Version 1.66.4](https://github.com/lobehub/lobe-chat/compare/v1.66.3...v1.66.4)
6
31
 
7
32
  <sup>Released on **2025-02-28**</sup>
package/changelog/v1.json CHANGED
@@ -1,4 +1,13 @@
1
1
  [
2
+ {
3
+ "children": {
4
+ "improvements": [
5
+ "Improve portal style."
6
+ ]
7
+ },
8
+ "date": "2025-02-28",
9
+ "version": "1.66.5"
10
+ },
2
11
  {
3
12
  "children": {
4
13
  "improvements": [
package/package.json CHANGED
@@ -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",
@@ -25,6 +25,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
25
25
  `,
26
26
  drawer: css`
27
27
  z-index: 10;
28
+ height: 100%;
28
29
  background: ${token.colorBgLayout};
29
30
  `,
30
31
  header: css`
@@ -71,38 +72,36 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
71
72
  };
72
73
 
73
74
  return (
74
- showInspector && (
75
- <DraggablePanel
76
- className={styles.drawer}
77
- classNames={{
78
- content: styles.content,
75
+ <DraggablePanel
76
+ className={styles.drawer}
77
+ classNames={{
78
+ content: styles.content,
79
+ }}
80
+ defaultSize={{ width: tmpWidth }}
81
+ expand={showInspector}
82
+ hanlderStyle={{ display: 'none' }}
83
+ maxWidth={CHAT_PORTAL_MAX_WIDTH}
84
+ minWidth={
85
+ showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
86
+ }
87
+ mode={md ? 'fixed' : 'float'}
88
+ onSizeChange={handleSizeChange}
89
+ placement={'right'}
90
+ showHandlerWhenUnexpand={false}
91
+ showHandlerWideArea={false}
92
+ size={{ height: '100%', width: portalWidth }}
93
+ >
94
+ <DraggablePanelContainer
95
+ style={{
96
+ flex: 'none',
97
+ height: '100%',
98
+ maxHeight: '100vh',
99
+ minWidth: CHAT_PORTAL_WIDTH,
79
100
  }}
80
- defaultSize={{ width: tmpWidth }}
81
- expand
82
- hanlderStyle={{ display: 'none' }}
83
- maxWidth={CHAT_PORTAL_MAX_WIDTH}
84
- minWidth={
85
- showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
86
- }
87
- mode={md ? 'fixed' : 'float'}
88
- onSizeChange={handleSizeChange}
89
- placement={'right'}
90
- showHandlerWhenUnexpand={false}
91
- showHandlerWideArea={false}
92
- size={{ height: '100%', width: portalWidth }}
93
101
  >
94
- <DraggablePanelContainer
95
- style={{
96
- flex: 'none',
97
- height: '100%',
98
- maxHeight: '100vh',
99
- minWidth: CHAT_PORTAL_WIDTH,
100
- }}
101
- >
102
- <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
103
- </DraggablePanelContainer>
104
- </DraggablePanel>
105
- )
102
+ <Flexbox className={cx(styles.panel, showThread && styles.thread)}>{children}</Flexbox>
103
+ </DraggablePanelContainer>
104
+ </DraggablePanel>
106
105
  );
107
106
  });
108
107
 
@@ -49,31 +49,29 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
49
49
  }, [lg, cacheExpand]);
50
50
 
51
51
  return (
52
- !showPortal && (
53
- <DraggablePanel
54
- className={styles.drawer}
55
- classNames={{
56
- content: styles.content,
52
+ <DraggablePanel
53
+ className={styles.drawer}
54
+ classNames={{
55
+ content: styles.content,
56
+ }}
57
+ expand={showTopic && !showPortal}
58
+ minWidth={CHAT_SIDEBAR_WIDTH}
59
+ mode={md ? 'fixed' : 'float'}
60
+ onExpandChange={handleExpand}
61
+ placement={'right'}
62
+ showHandlerWideArea={false}
63
+ >
64
+ <DraggablePanelContainer
65
+ style={{
66
+ flex: 'none',
67
+ height: '100%',
68
+ maxHeight: '100vh',
69
+ minWidth: CHAT_SIDEBAR_WIDTH,
57
70
  }}
58
- expand={showTopic}
59
- minWidth={CHAT_SIDEBAR_WIDTH}
60
- mode={md ? 'fixed' : 'float'}
61
- onExpandChange={handleExpand}
62
- placement={'right'}
63
- showHandlerWideArea={false}
64
71
  >
65
- <DraggablePanelContainer
66
- style={{
67
- flex: 'none',
68
- height: '100%',
69
- maxHeight: '100vh',
70
- minWidth: CHAT_SIDEBAR_WIDTH,
71
- }}
72
- >
73
- {children}
74
- </DraggablePanelContainer>
75
- </DraggablePanel>
76
- )
72
+ {children}
73
+ </DraggablePanelContainer>
74
+ </DraggablePanel>
77
75
  );
78
76
  });
79
77
 
@@ -0,0 +1,59 @@
1
+ import { AnimatePresence, motion } from 'framer-motion';
2
+ import { CSSProperties, ReactNode, memo } from 'react';
3
+
4
+ interface AnimatedCollapsedProps {
5
+ children: ReactNode;
6
+ height?: {
7
+ collapsed?: string | number;
8
+ open?: string | number;
9
+ };
10
+ open: boolean;
11
+ style?: CSSProperties;
12
+ styles?: {
13
+ collapsed?: CSSProperties;
14
+ open?: CSSProperties;
15
+ };
16
+ width?: {
17
+ collapsed?: string | number;
18
+ open?: string | number;
19
+ };
20
+ }
21
+
22
+ const AnimatedCollapsed = memo<AnimatedCollapsedProps>(
23
+ ({ open, children, styles, style, width, height }) => {
24
+ return (
25
+ <AnimatePresence initial={false}>
26
+ {open && (
27
+ <motion.div
28
+ animate="open"
29
+ exit="collapsed"
30
+ initial="collapsed"
31
+ style={style}
32
+ transition={{
33
+ duration: 0.2,
34
+ ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
35
+ }}
36
+ variants={{
37
+ collapsed: {
38
+ ...(styles?.collapsed as any),
39
+ height: height?.collapsed ?? 0,
40
+ opacity: 0,
41
+ width: width?.collapsed ?? 0,
42
+ },
43
+ open: {
44
+ ...(styles?.open as any),
45
+ height: height?.open ?? 'auto',
46
+ opacity: 1,
47
+ width: width?.open ?? 'auto',
48
+ },
49
+ }}
50
+ >
51
+ {children}
52
+ </motion.div>
53
+ )}
54
+ </AnimatePresence>
55
+ );
56
+ },
57
+ );
58
+
59
+ export default AnimatedCollapsed;
@@ -1,7 +1,8 @@
1
- import { AnimatePresence, motion } from 'framer-motion';
2
1
  import { CSSProperties, memo, useState } from 'react';
3
2
  import { Flexbox } from 'react-layout-kit';
4
3
 
4
+ import AnimatedCollapsed from '@/components/AnimatedCollapsed';
5
+
5
6
  import Inspectors from './Inspector';
6
7
  import Render from './Render';
7
8
 
@@ -36,32 +37,16 @@ const Tool = memo<InspectorProps>(
36
37
  showPluginRender={showPluginRender}
37
38
  showRender={showRender}
38
39
  />
39
- <AnimatePresence initial={false}>
40
- {showRender && (
41
- <motion.div
42
- animate="open"
43
- exit="collapsed"
44
- initial="collapsed"
45
- transition={{
46
- duration: 0.1,
47
- ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
48
- }}
49
- variants={{
50
- collapsed: { height: 0, opacity: 0, width: 0 },
51
- open: { height: 'auto', opacity: 1, width: 'auto' },
52
- }}
53
- >
54
- <Render
55
- messageId={messageId}
56
- requestArgs={requestArgs}
57
- setShowPluginRender={setShowPluginRender}
58
- showPluginRender={showPluginRender}
59
- toolCallId={id}
60
- toolIndex={index}
61
- />
62
- </motion.div>
63
- )}
64
- </AnimatePresence>
40
+ <AnimatedCollapsed open={showRender}>
41
+ <Render
42
+ messageId={messageId}
43
+ requestArgs={requestArgs}
44
+ setShowPluginRender={setShowPluginRender}
45
+ showPluginRender={showPluginRender}
46
+ toolCallId={id}
47
+ toolIndex={index}
48
+ />
49
+ </AnimatedCollapsed>
65
50
  </Flexbox>
66
51
  );
67
52
  },
@@ -11,7 +11,7 @@ interface ResultListProps {
11
11
 
12
12
  const ResultList = memo<ResultListProps>(({ dataSources }) => {
13
13
  const itemContent = useCallback(
14
- (index: number, result: SearchResult) => <Item {...result} highlight={index < 5} />,
14
+ (index: number, result: SearchResult) => <Item {...result} highlight={index < 15} />,
15
15
  [],
16
16
  );
17
17
 
@@ -29,16 +29,17 @@ const Inspector = memo<InspectorUIProps<SearchArguments, SearchResponse>>(
29
29
  const defaultEngines = engines.length > 0 ? engines : args.searchEngine || [];
30
30
  const loading = useChatStore(chatToolSelectors.isSearXNGSearching(messageId));
31
31
 
32
- return (
33
- <Flexbox gap={12} height={'100%'}>
34
- <SearchBar
35
- aiSummary={false}
36
- defaultEngines={defaultEngines}
37
- defaultQuery={args.query}
38
- messageId={messageId}
39
- tooltip={false}
40
- />
41
- {loading ? (
32
+ if (loading) {
33
+ return (
34
+ <Flexbox gap={12} height={'100%'}>
35
+ <SearchBar
36
+ aiSummary={false}
37
+ defaultEngines={defaultEngines}
38
+ defaultQuery={args.query}
39
+ messageId={messageId}
40
+ tooltip={false}
41
+ />
42
+
42
43
  <Flexbox gap={16} paddingBlock={16} paddingInline={12}>
43
44
  {[1, 2, 3, 4, 6].map((id) => (
44
45
  <Skeleton
@@ -49,14 +50,25 @@ const Inspector = memo<InspectorUIProps<SearchArguments, SearchResponse>>(
49
50
  />
50
51
  ))}
51
52
  </Flexbox>
52
- ) : (
53
- <>
54
- <Flexbox height={'100%'} width={'100%'}>
55
- <ResultList dataSources={state.results} />
56
- </Flexbox>
57
- <Footer />
58
- </>
59
- )}
53
+ </Flexbox>
54
+ );
55
+ }
56
+
57
+ return (
58
+ <Flexbox gap={0} height={'100%'}>
59
+ <Flexbox gap={12} height={'100%'}>
60
+ <SearchBar
61
+ aiSummary={false}
62
+ defaultEngines={defaultEngines}
63
+ defaultQuery={args.query}
64
+ messageId={messageId}
65
+ tooltip={false}
66
+ />
67
+ <Flexbox height={'100%'} width={'100%'}>
68
+ <ResultList dataSources={state.results} />
69
+ </Flexbox>
70
+ </Flexbox>
71
+ <Footer />
60
72
  </Flexbox>
61
73
  );
62
74
  },
@@ -30,7 +30,7 @@ const useStyles = createStyles(({ css, token }) => ({
30
30
  -webkit-box-orient: vertical;
31
31
  -webkit-line-clamp: 2;
32
32
 
33
- color: ${token.colorTextSecondary};
33
+ color: ${token.colorText};
34
34
  text-overflow: ellipsis;
35
35
  `,
36
36
  url: css`