@lobehub/chat 0.1.6 → 0.2.0
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 0.2.0](https://github.com/lobehub/lobe-chat/compare/v0.1.6...v0.2.0)
|
|
6
|
+
|
|
7
|
+
<sup>Released on **2023-07-18**</sup>
|
|
8
|
+
|
|
9
|
+
#### ✨ Features
|
|
10
|
+
|
|
11
|
+
- **misc**: Add import statement and define CSS styles for Avatar component.
|
|
12
|
+
|
|
13
|
+
<br/>
|
|
14
|
+
|
|
15
|
+
<details>
|
|
16
|
+
<summary><kbd>Improvements and Fixes</kbd></summary>
|
|
17
|
+
|
|
18
|
+
#### What's improved
|
|
19
|
+
|
|
20
|
+
- **misc**: Add import statement and define CSS styles for Avatar component ([8c23a8d](https://github.com/lobehub/lobe-chat/commit/8c23a8d))
|
|
21
|
+
|
|
22
|
+
</details>
|
|
23
|
+
|
|
24
|
+
<div align="right">
|
|
25
|
+
|
|
26
|
+
[](#readme-top)
|
|
27
|
+
|
|
28
|
+
</div>
|
|
29
|
+
|
|
5
30
|
### [Version 0.1.6](https://github.com/lobehub/lobe-chat/compare/v0.1.5...v0.1.6)
|
|
6
31
|
|
|
7
32
|
<sup>Released on **2023-07-18**</sup>
|
package/package.json
CHANGED
|
@@ -1,24 +1,42 @@
|
|
|
1
1
|
import { Avatar, Logo } from '@lobehub/ui';
|
|
2
2
|
import { Upload } from 'antd';
|
|
3
|
+
import { createStyles } from 'antd-style';
|
|
3
4
|
import { memo } from 'react';
|
|
4
5
|
import { shallow } from 'zustand/shallow';
|
|
5
6
|
|
|
6
7
|
import { useSettings } from '@/store/settings';
|
|
7
8
|
import { createUploadImageHandler } from '@/utils/uploadFIle';
|
|
8
9
|
|
|
10
|
+
const useStyle = createStyles(
|
|
11
|
+
({ css, token }) => css`
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
border-radius: 50%;
|
|
14
|
+
transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
|
|
15
|
+
|
|
16
|
+
&:hover {
|
|
17
|
+
box-shadow: 0 0 0 3px ${token.colorText};
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:active {
|
|
21
|
+
scale: 0.8;
|
|
22
|
+
}
|
|
23
|
+
`,
|
|
24
|
+
);
|
|
25
|
+
|
|
9
26
|
interface AvatarWithUploadProps {
|
|
10
27
|
size?: number;
|
|
11
28
|
}
|
|
12
29
|
|
|
13
30
|
export default memo<AvatarWithUploadProps>(({ size = 40 }) => {
|
|
14
31
|
const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings], shallow);
|
|
32
|
+
const { styles } = useStyle();
|
|
15
33
|
|
|
16
34
|
const handleUploadAvatar = createUploadImageHandler((avatar) => {
|
|
17
35
|
setSettings({ avatar });
|
|
18
36
|
});
|
|
19
37
|
|
|
20
38
|
return (
|
|
21
|
-
<div style={{ maxHeight: size, maxWidth: size }}>
|
|
39
|
+
<div className={styles} style={{ maxHeight: size, maxWidth: size }}>
|
|
22
40
|
<Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
|
|
23
41
|
{avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
|
|
24
42
|
</Upload>
|
|
@@ -1,30 +1,16 @@
|
|
|
1
|
-
import { createStyles } from 'antd-style';
|
|
2
1
|
import { memo } from 'react';
|
|
3
|
-
import { Flexbox } from 'react-layout-kit';
|
|
4
2
|
|
|
5
3
|
import ChatInput from '@/pages/chat/[id]/Conversation/Input';
|
|
6
4
|
|
|
7
5
|
import ChatList from './ChatList';
|
|
8
6
|
|
|
9
|
-
const useStyles = createStyles(({ css, token }) => ({
|
|
10
|
-
input: css`
|
|
11
|
-
position: sticky;
|
|
12
|
-
z-index: 10;
|
|
13
|
-
bottom: 0;
|
|
14
|
-
background: ${token.colorBgLayout};
|
|
15
|
-
`,
|
|
16
|
-
}));
|
|
17
|
-
|
|
18
7
|
const Conversation = () => {
|
|
19
|
-
const { styles } = useStyles();
|
|
20
8
|
return (
|
|
21
9
|
<>
|
|
22
10
|
<div style={{ flex: 1, overflowY: 'scroll' }}>
|
|
23
11
|
<ChatList />
|
|
24
12
|
</div>
|
|
25
|
-
<
|
|
26
|
-
<ChatInput />
|
|
27
|
-
</Flexbox>
|
|
13
|
+
<ChatInput />
|
|
28
14
|
</>
|
|
29
15
|
);
|
|
30
16
|
};
|