@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 +25 -0
- package/changelog/v1.json +9 -0
- package/package.json +1 -1
- package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx +29 -30
- package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx +21 -23
- package/src/components/AnimatedCollapsed/index.tsx +59 -0
- package/src/features/Conversation/Messages/Assistant/Tool/index.tsx +12 -27
- package/src/tools/web-browsing/Portal/ResultList/index.tsx +1 -1
- package/src/tools/web-browsing/Portal/index.tsx +30 -18
- package/src/tools/web-browsing/Render/SearchResult/SearchResultItem.tsx +1 -1
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
|
+
[](#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
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@lobehub/chat",
|
3
|
-
"version": "1.66.
|
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
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
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
|
-
<
|
95
|
-
|
96
|
-
|
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
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
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
|
-
|
66
|
-
|
67
|
-
|
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
|
-
<
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
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 <
|
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
|
-
|
33
|
-
|
34
|
-
<
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
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
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
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
|
},
|