listpage-next 0.0.71 → 0.0.74
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/dist/demos/demo8.js +8 -3
- package/dist/features/ChatClient/components/ClientContent/Footer.d.ts +4 -1
- package/dist/features/ChatClient/components/ClientContent/Footer.js +7 -3
- package/dist/features/ChatClient/components/ClientContent/Header.d.ts +11 -3
- package/dist/features/ChatClient/components/ClientContent/Header.js +85 -40
- package/dist/features/ChatClient/components/Layout/ChatPage.d.ts +2 -0
- package/dist/features/ChatClient/components/Layout/ChatPage.js +2 -1
- package/package.json +1 -1
package/dist/demos/demo8.js
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
const Demo8 = ()=>/*#__PURE__*/ jsx(
|
|
4
|
-
|
|
2
|
+
import { ClientContent } from "../features/ChatClient/index.js";
|
|
3
|
+
const Demo8 = ()=>/*#__PURE__*/ jsx(ClientContent, {
|
|
4
|
+
style: {
|
|
5
|
+
height: 800
|
|
6
|
+
},
|
|
7
|
+
headerProps: {
|
|
8
|
+
defaultTitle: "搜索海量信息,生成研究报告"
|
|
9
|
+
}
|
|
5
10
|
});
|
|
6
11
|
export { Demo8 };
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
import { ChatSenderProps } from "../ChatSender";
|
|
2
|
-
export
|
|
2
|
+
export interface FooterProps extends ChatSenderProps {
|
|
3
|
+
visible?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export declare const Footer: (props: FooterProps) => false | import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { styled } from "styled-components";
|
|
3
3
|
import { ChatSender } from "../ChatSender/index.js";
|
|
4
|
-
const Footer = (props)
|
|
4
|
+
const Footer = (props)=>{
|
|
5
|
+
const { visible = true, ...rest } = props;
|
|
6
|
+
if (!visible) return false;
|
|
7
|
+
return /*#__PURE__*/ jsx(FooterContainer, {
|
|
5
8
|
children: /*#__PURE__*/ jsx(ChatSender, {
|
|
6
|
-
...
|
|
9
|
+
...rest
|
|
7
10
|
})
|
|
8
11
|
});
|
|
12
|
+
};
|
|
9
13
|
const FooterContainer = styled.div`
|
|
10
|
-
min-height:
|
|
14
|
+
min-height: 104px;
|
|
11
15
|
flex-shrink: 0;
|
|
12
16
|
|
|
13
17
|
display: flex;
|
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
export interface HeaderProps {
|
|
1
|
+
export interface HeaderProps extends HeaderLeftProps {
|
|
2
2
|
extra?: React.ReactNode;
|
|
3
|
-
title: string;
|
|
4
|
-
onTitleChange?: (title: string) => any;
|
|
5
3
|
}
|
|
6
4
|
export declare const Header: (props: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
interface HeaderLeftProps {
|
|
6
|
+
showActions?: boolean;
|
|
7
|
+
showTitle?: boolean;
|
|
8
|
+
onCollapsed?: () => any;
|
|
9
|
+
onClickNewConversation?: () => void;
|
|
10
|
+
disabledNewConversation?: boolean;
|
|
11
|
+
defaultTitle: string;
|
|
12
|
+
onTitleChange?: (title: string) => any;
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -1,43 +1,54 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { EditOutlined } from "@ant-design/icons";
|
|
3
|
-
import {
|
|
4
|
-
import { Button, Input, Modal } from "antd";
|
|
2
|
+
import { EditOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
|
|
3
|
+
import { Button, Divider, Input, Modal } from "antd";
|
|
5
4
|
import { useEffect, useState } from "react";
|
|
6
5
|
import { styled } from "styled-components";
|
|
7
|
-
const
|
|
8
|
-
const {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
okText: "确定",
|
|
19
|
-
cancelText: "取消",
|
|
20
|
-
onCancel: ()=>onClose?.(),
|
|
21
|
-
onOk: async ()=>{
|
|
22
|
-
await onSubmit?.(name);
|
|
23
|
-
onClose?.();
|
|
24
|
-
},
|
|
25
|
-
children: /*#__PURE__*/ jsx(Input, {
|
|
26
|
-
value: name,
|
|
27
|
-
onChange: (e)=>setName(e.target.value)
|
|
28
|
-
})
|
|
6
|
+
const Header = (props)=>{
|
|
7
|
+
const { extra, ...headerLeftProps } = props;
|
|
8
|
+
return /*#__PURE__*/ jsxs(HeaderContainer, {
|
|
9
|
+
children: [
|
|
10
|
+
/*#__PURE__*/ jsx(HeaderLeft, {
|
|
11
|
+
...headerLeftProps
|
|
12
|
+
}),
|
|
13
|
+
/*#__PURE__*/ jsx(Right, {
|
|
14
|
+
children: extra
|
|
15
|
+
})
|
|
16
|
+
]
|
|
29
17
|
});
|
|
30
18
|
};
|
|
31
|
-
const
|
|
32
|
-
const {
|
|
19
|
+
const HeaderLeft = (props)=>{
|
|
20
|
+
const { showActions = false, showTitle = true, onCollapsed, onClickNewConversation, disabledNewConversation, onTitleChange } = props;
|
|
33
21
|
const [open, setOpen] = useState(false);
|
|
34
|
-
const [title,
|
|
35
|
-
|
|
36
|
-
trigger: 'onTitleChange'
|
|
37
|
-
});
|
|
38
|
-
return /*#__PURE__*/ jsxs(HeaderContainer, {
|
|
22
|
+
const [title, setTitle] = useState(props.defaultTitle);
|
|
23
|
+
return /*#__PURE__*/ jsxs(Left, {
|
|
39
24
|
children: [
|
|
40
|
-
/*#__PURE__*/ jsxs(
|
|
25
|
+
showActions && /*#__PURE__*/ jsxs(ActionContainer, {
|
|
26
|
+
children: [
|
|
27
|
+
/*#__PURE__*/ jsx(Button, {
|
|
28
|
+
onClick: onCollapsed,
|
|
29
|
+
type: "text",
|
|
30
|
+
size: "small",
|
|
31
|
+
icon: /*#__PURE__*/ jsx(MenuUnfoldOutlined, {})
|
|
32
|
+
}),
|
|
33
|
+
/*#__PURE__*/ jsx(Button, {
|
|
34
|
+
type: "primary",
|
|
35
|
+
disabled: disabledNewConversation,
|
|
36
|
+
iconPosition: "start",
|
|
37
|
+
onClick: onClickNewConversation,
|
|
38
|
+
shape: "round",
|
|
39
|
+
icon: /*#__PURE__*/ jsx(EditOutlined, {}),
|
|
40
|
+
children: "新对话"
|
|
41
|
+
})
|
|
42
|
+
]
|
|
43
|
+
}),
|
|
44
|
+
showActions && showTitle && /*#__PURE__*/ jsx(Divider, {
|
|
45
|
+
style: {
|
|
46
|
+
height: 30,
|
|
47
|
+
backgroundColor: '#0000001f'
|
|
48
|
+
},
|
|
49
|
+
type: "vertical"
|
|
50
|
+
}),
|
|
51
|
+
showTitle && /*#__PURE__*/ jsxs(NameContainer, {
|
|
41
52
|
children: [
|
|
42
53
|
/*#__PURE__*/ jsx(NameText, {
|
|
43
54
|
children: /*#__PURE__*/ jsx(Button, {
|
|
@@ -54,18 +65,53 @@ const Header = (props)=>{
|
|
|
54
65
|
})
|
|
55
66
|
]
|
|
56
67
|
}),
|
|
57
|
-
/*#__PURE__*/ jsx(Right, {
|
|
58
|
-
children: extra
|
|
59
|
-
}),
|
|
60
68
|
/*#__PURE__*/ jsx(UpdateTitleModal, {
|
|
69
|
+
defaultName: title,
|
|
61
70
|
open: open,
|
|
62
71
|
onClose: ()=>setOpen(false),
|
|
63
|
-
onSubmit:
|
|
64
|
-
|
|
72
|
+
onSubmit: async (value)=>{
|
|
73
|
+
await onTitleChange?.(value);
|
|
74
|
+
setTitle(value);
|
|
75
|
+
}
|
|
65
76
|
})
|
|
66
77
|
]
|
|
67
78
|
});
|
|
68
79
|
};
|
|
80
|
+
const UpdateTitleModal = (props)=>{
|
|
81
|
+
const { defaultName, open, onSubmit, onClose } = props;
|
|
82
|
+
const [name, setName] = useState(defaultName);
|
|
83
|
+
useEffect(()=>{
|
|
84
|
+
if (open) setName(defaultName);
|
|
85
|
+
}, [
|
|
86
|
+
open
|
|
87
|
+
]);
|
|
88
|
+
return /*#__PURE__*/ jsx(Modal, {
|
|
89
|
+
title: "编辑对话名称",
|
|
90
|
+
open: open,
|
|
91
|
+
okText: "确定",
|
|
92
|
+
cancelText: "取消",
|
|
93
|
+
onCancel: ()=>onClose?.(),
|
|
94
|
+
onOk: async ()=>{
|
|
95
|
+
await onSubmit?.(name);
|
|
96
|
+
onClose?.();
|
|
97
|
+
},
|
|
98
|
+
children: /*#__PURE__*/ jsx(Input, {
|
|
99
|
+
value: name,
|
|
100
|
+
onChange: (e)=>setName(e.target.value)
|
|
101
|
+
})
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
const ActionContainer = styled.div`
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
|
|
108
|
+
gap: 4px;
|
|
109
|
+
`;
|
|
110
|
+
const NameContainer = styled.div`
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: flex-start;
|
|
113
|
+
flex-direction: column;
|
|
114
|
+
`;
|
|
69
115
|
const NameText = styled.span`
|
|
70
116
|
font-size: 14px;
|
|
71
117
|
font-weight: 500;
|
|
@@ -80,8 +126,7 @@ const AiTipText = styled.span`
|
|
|
80
126
|
`;
|
|
81
127
|
const Left = styled.div`
|
|
82
128
|
display: flex;
|
|
83
|
-
align-items:
|
|
84
|
-
flex-direction: column;
|
|
129
|
+
align-items: center;
|
|
85
130
|
`;
|
|
86
131
|
const Right = styled.div`
|
|
87
132
|
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { SiderRef } from "./Sider";
|
|
1
2
|
import { InfiniteListProps } from "../../../../components/InfiniteList";
|
|
2
3
|
export interface ChatPageProps<T = any> {
|
|
3
4
|
logo?: string;
|
|
4
5
|
title?: string;
|
|
6
|
+
siderRef?: SiderRef;
|
|
5
7
|
children?: React.ReactNode;
|
|
6
8
|
request: InfiniteListProps["request"];
|
|
7
9
|
onClickConversation?: (key: string, item: T) => void;
|
|
@@ -5,13 +5,14 @@ import { HistoryConversation } from "../HistoryConversation/index.js";
|
|
|
5
5
|
import { NewConversation } from "../NewConversation/index.js";
|
|
6
6
|
import { Content, Layout } from "./styles.js";
|
|
7
7
|
const ChatPage = (props)=>{
|
|
8
|
-
const { logo, title, children, request, onClickConversation, onClickNewConversation, onClickMoreAgent, onRenameConversation, onDeleteConversation } = props;
|
|
8
|
+
const { logo, title, children, siderRef, request, onClickConversation, onClickNewConversation, onClickMoreAgent, onRenameConversation, onDeleteConversation } = props;
|
|
9
9
|
return /*#__PURE__*/ jsxs(Layout, {
|
|
10
10
|
style: {
|
|
11
11
|
height: '100vh'
|
|
12
12
|
},
|
|
13
13
|
children: [
|
|
14
14
|
/*#__PURE__*/ jsxs(Sider, {
|
|
15
|
+
ref: siderRef,
|
|
15
16
|
children: [
|
|
16
17
|
/*#__PURE__*/ jsx(Logo, {
|
|
17
18
|
icon: logo,
|