beem-component 1.0.9 → 1.1.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/dist/assets/css/sidebar.css +58 -0
- package/dist/components/ChatBody/chatBody.js +3 -3
- package/package.json +1 -1
- package/src/App.js +21 -80
- package/src/Chat.js +120 -0
- package/src/ChatHeader.js +16 -0
- package/src/CustomerInfo.js +46 -0
- package/src/SideBar.js +78 -0
- package/src/lib/assets/css/sidebar.css +58 -0
- package/src/lib/components/ChatBody/chatBody.js +4 -0
- package/src/lib/components/ChatBody/chatBody.stories.js +27 -27
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
overflow: auto;
|
|
7
7
|
max-width: 20%;
|
|
8
8
|
width: 20%;
|
|
9
|
+
border: 1px solid #E2E2E2;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.sidebar>* {
|
|
13
|
+
margin-bottom: 1.5rem;
|
|
9
14
|
}
|
|
10
15
|
|
|
11
16
|
.main-sidebar-tabs {
|
|
@@ -19,4 +24,57 @@
|
|
|
19
24
|
.main-sidebar-tabs>.sidebar-tabs {
|
|
20
25
|
padding: 1.714rem;
|
|
21
26
|
flex: 1;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.sidebar-contacts {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
margin: 0rem;
|
|
33
|
+
overflow: auto;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.main-chat-container {
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: row;
|
|
39
|
+
align-items: center;
|
|
40
|
+
height: calc(100vh - 180px);
|
|
41
|
+
max-width: 100%;
|
|
42
|
+
width: 100%;
|
|
43
|
+
background: white;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.chat {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
max-height: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
flex-grow: 1;
|
|
52
|
+
max-height: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.chat-menu {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: row;
|
|
59
|
+
height: 0%;
|
|
60
|
+
flex-grow: 1;
|
|
61
|
+
width: 100%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.chat-messages {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
height: 100%;
|
|
68
|
+
overflow: auto;
|
|
69
|
+
width: 80%;
|
|
70
|
+
border: 1px solid #E2E2E2;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.chat-contact-info {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
height: 100%;
|
|
77
|
+
overflow: auto;
|
|
78
|
+
width: 25%;
|
|
79
|
+
border: 1px solid #E2E2E2;
|
|
22
80
|
}
|
|
@@ -31,13 +31,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
31
31
|
|
|
32
32
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
33
33
|
|
|
34
|
-
var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n ", "\n"])), ""
|
|
34
|
+
var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: 100%;\n ", "\n"])), ""
|
|
35
35
|
/* border: 0.071rem solid ${BmGrey400}; */
|
|
36
36
|
);
|
|
37
37
|
|
|
38
|
-
BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 0rem 1.5rem;\n"])));
|
|
38
|
+
BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 0rem 1.5rem;\n flex-grow: 1;\n overflow: auto;\n"])));
|
|
39
39
|
|
|
40
|
-
var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n ", "\n justify-content: ", ";\n > *:not(:last-child) {\n margin-right: 1rem;\n }\n overflow-wrap: break-word !important;\n word-wrap: break-word !important;\n margin: 0rem;\n"])), ""
|
|
40
|
+
var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n ", "\n justify-content: ", ";\n > *:not(:last-child) {\n margin-right: 1rem;\n }\n overflow-wrap: break-word !important;\n word-wrap: break-word !important;\n margin: 0rem;\n flex-grow: 1;\n"])), ""
|
|
41
41
|
/* align-items: center; */
|
|
42
42
|
, function (_ref) {
|
|
43
43
|
var state = _ref.state;
|
package/package.json
CHANGED
package/src/App.js
CHANGED
|
@@ -1,94 +1,35 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import "../src/main.scss";
|
|
3
|
-
import {
|
|
3
|
+
import { MainWrapper } from "./lib/components";
|
|
4
4
|
import { GlobalStyle } from "./lib/components/globalStyles";
|
|
5
|
-
import { BmSideBar } from "./lib/components/sidebar";
|
|
6
5
|
import "./lib/assets/css/sidebar.css";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import AttachFileIcon from "@mui/icons-material/AttachFile";
|
|
12
|
-
import QuickreplyIcon from "@mui/icons-material/Quickreply";
|
|
13
|
-
import SendIcon from "@mui/icons-material/Send";
|
|
14
|
-
import BmInfoTab from "./lib/components/InfoTab/infoTab";
|
|
15
|
-
import { BmButton } from "./lib/components/Buttons/buttons";
|
|
16
|
-
import {
|
|
17
|
-
BmCustomizedDropdown,
|
|
18
|
-
BmDropDownMenu,
|
|
19
|
-
BmDropDownItem,
|
|
20
|
-
BmButtonDropdownItem,
|
|
21
|
-
} from "./lib/components/dropdownItems";
|
|
22
|
-
|
|
23
|
-
import { BmButtonDropDown } from "./lib/components/dropdownButton";
|
|
24
|
-
import { BmListBox } from "./lib/components/Lists/listBox";
|
|
25
|
-
import { BmRowLabel } from "./lib/components/Lists/rowLabels";
|
|
6
|
+
import SideBar from "./SideBar";
|
|
7
|
+
import ChatHeader from "./ChatHeader";
|
|
8
|
+
import Chat from "./Chat";
|
|
9
|
+
import CustomerInfo from "./CustomerInfo";
|
|
26
10
|
|
|
27
11
|
export const App = () => {
|
|
28
|
-
const [dropDownItem, setDropdownItem] = useState(false);
|
|
29
12
|
|
|
30
13
|
return (
|
|
31
14
|
<>
|
|
32
15
|
<GlobalStyle />
|
|
33
16
|
<MainWrapper>
|
|
34
|
-
<
|
|
35
|
-
<div className="
|
|
36
|
-
<
|
|
37
|
-
<h3>Tabs</h3>
|
|
38
|
-
</BmTab>
|
|
39
|
-
<BmTab state="inactive" className="sidebar-tabs">
|
|
40
|
-
<h3>Tabs</h3>
|
|
41
|
-
</BmTab>
|
|
17
|
+
<div className="main-chat-container">
|
|
18
|
+
<div className="sidebar">
|
|
19
|
+
<SideBar />
|
|
42
20
|
</div>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<BmChat.Details
|
|
56
|
-
state="outbound"
|
|
57
|
-
session="live"
|
|
58
|
-
displayTime={<p>10:00am</p>}
|
|
59
|
-
status="failed"
|
|
60
|
-
>
|
|
61
|
-
<p>Outbound</p>
|
|
62
|
-
</BmChat.Details>
|
|
63
|
-
</BmChat.Body>
|
|
64
|
-
<BmChat.Footer>
|
|
65
|
-
<BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
|
|
66
|
-
<BmIcons icon={<AttachFileIcon />} size="xlarge" />
|
|
67
|
-
<BmIcons icon={<QuickreplyIcon />} size="xlarge" />
|
|
68
|
-
<BmInput placeholder="Enter Message" />
|
|
69
|
-
<BmIcons icon={<SendIcon />} size="xlarge" />
|
|
70
|
-
</BmChat.Footer>
|
|
71
|
-
</BmChat>
|
|
72
|
-
{/* <BmCustomizedDropdown> */}
|
|
73
|
-
<BmButton>Create Ticket</BmButton>
|
|
74
|
-
<BmButtonDropDown
|
|
75
|
-
size="medium"
|
|
76
|
-
onClick={() => {
|
|
77
|
-
setDropdownItem(!dropDownItem);
|
|
78
|
-
}}
|
|
79
|
-
variant="primary"
|
|
80
|
-
>
|
|
81
|
-
Session
|
|
82
|
-
</BmButtonDropDown>
|
|
83
|
-
<BmListBox isOpen={dropDownItem}>
|
|
84
|
-
<BmRowLabel trailingIcon={<Person />} size="large">
|
|
85
|
-
<h4>Row Label</h4>
|
|
86
|
-
</BmRowLabel>
|
|
87
|
-
<BmRowLabel size="large">
|
|
88
|
-
<h4>Row Label</h4>
|
|
89
|
-
</BmRowLabel>
|
|
90
|
-
</BmListBox>
|
|
91
|
-
{/* </BmCustomizedDropdown> */}
|
|
21
|
+
<div className="chat">
|
|
22
|
+
<ChatHeader />
|
|
23
|
+
<div className="chat-menu">
|
|
24
|
+
<div className="chat-messages">
|
|
25
|
+
<Chat />
|
|
26
|
+
</div>
|
|
27
|
+
<div className="chat-contact-info">
|
|
28
|
+
<CustomerInfo />
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
92
33
|
</MainWrapper>
|
|
93
34
|
</>
|
|
94
35
|
);
|
package/src/Chat.js
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AttachFile } from '@material-ui/icons';
|
|
3
|
+
import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
|
|
4
|
+
import QuickreplyIcon from '@mui/icons-material/Quickreply';
|
|
5
|
+
import SendIcon from '@mui/icons-material/Send';
|
|
6
|
+
import { BmChat, BmIcons, BmInput } from './lib/components';
|
|
7
|
+
|
|
8
|
+
const Chat = () => {
|
|
9
|
+
return (
|
|
10
|
+
<BmChat>
|
|
11
|
+
<BmChat.Body style={{ flex: 1 }}>
|
|
12
|
+
<BmChat.Details
|
|
13
|
+
state="inbound"
|
|
14
|
+
session="bot"
|
|
15
|
+
displayTime={<p>12:00pm</p>}
|
|
16
|
+
status="sent"
|
|
17
|
+
>
|
|
18
|
+
<p>Inbound</p>
|
|
19
|
+
</BmChat.Details>
|
|
20
|
+
<BmChat.Details
|
|
21
|
+
state="outbound"
|
|
22
|
+
session="live"
|
|
23
|
+
displayTime={<p>10:00am</p>}
|
|
24
|
+
status="failed"
|
|
25
|
+
>
|
|
26
|
+
<p>Outbound</p>
|
|
27
|
+
</BmChat.Details>
|
|
28
|
+
<BmChat.Details
|
|
29
|
+
state="outbound"
|
|
30
|
+
session="live"
|
|
31
|
+
displayTime={<p>10:00am</p>}
|
|
32
|
+
status="failed"
|
|
33
|
+
>
|
|
34
|
+
<p>Outbound</p>
|
|
35
|
+
</BmChat.Details>
|
|
36
|
+
<BmChat.Details
|
|
37
|
+
state="outbound"
|
|
38
|
+
session="live"
|
|
39
|
+
displayTime={<p>10:00am</p>}
|
|
40
|
+
status="failed"
|
|
41
|
+
>
|
|
42
|
+
<p>Outbound</p>
|
|
43
|
+
</BmChat.Details>
|
|
44
|
+
<BmChat.Details
|
|
45
|
+
state="outbound"
|
|
46
|
+
session="live"
|
|
47
|
+
displayTime={<p>10:00am</p>}
|
|
48
|
+
status="failed"
|
|
49
|
+
>
|
|
50
|
+
<p>Outbound</p>
|
|
51
|
+
</BmChat.Details>{' '}
|
|
52
|
+
<BmChat.Details
|
|
53
|
+
state="outbound"
|
|
54
|
+
session="live"
|
|
55
|
+
displayTime={<p>10:00am</p>}
|
|
56
|
+
status="failed"
|
|
57
|
+
>
|
|
58
|
+
<p>Outbound</p>
|
|
59
|
+
</BmChat.Details>{' '}
|
|
60
|
+
<BmChat.Details
|
|
61
|
+
state="outbound"
|
|
62
|
+
session="live"
|
|
63
|
+
displayTime={<p>10:00am</p>}
|
|
64
|
+
status="failed"
|
|
65
|
+
>
|
|
66
|
+
<p>Outbound</p>
|
|
67
|
+
</BmChat.Details>{' '}
|
|
68
|
+
<BmChat.Details
|
|
69
|
+
state="outbound"
|
|
70
|
+
session="live"
|
|
71
|
+
displayTime={<p>10:00am</p>}
|
|
72
|
+
status="failed"
|
|
73
|
+
>
|
|
74
|
+
<p>Outbound</p>
|
|
75
|
+
</BmChat.Details>{' '}
|
|
76
|
+
<BmChat.Details
|
|
77
|
+
state="outbound"
|
|
78
|
+
session="live"
|
|
79
|
+
displayTime={<p>10:00am</p>}
|
|
80
|
+
status="failed"
|
|
81
|
+
>
|
|
82
|
+
<p>Outbound</p>
|
|
83
|
+
</BmChat.Details>{' '}
|
|
84
|
+
<BmChat.Details
|
|
85
|
+
state="outbound"
|
|
86
|
+
session="live"
|
|
87
|
+
displayTime={<p>10:00am</p>}
|
|
88
|
+
status="failed"
|
|
89
|
+
>
|
|
90
|
+
<p>Outbound</p>
|
|
91
|
+
</BmChat.Details>{' '}
|
|
92
|
+
<BmChat.Details
|
|
93
|
+
state="outbound"
|
|
94
|
+
session="live"
|
|
95
|
+
displayTime={<p>10:00am</p>}
|
|
96
|
+
status="failed"
|
|
97
|
+
>
|
|
98
|
+
<p>Outbound</p>
|
|
99
|
+
</BmChat.Details>{' '}
|
|
100
|
+
<BmChat.Details
|
|
101
|
+
state="outbound"
|
|
102
|
+
session="live"
|
|
103
|
+
displayTime={<p>10:00am</p>}
|
|
104
|
+
status="failed"
|
|
105
|
+
>
|
|
106
|
+
<p>Outbound</p>
|
|
107
|
+
</BmChat.Details>
|
|
108
|
+
</BmChat.Body>
|
|
109
|
+
<BmChat.Footer>
|
|
110
|
+
<BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
|
|
111
|
+
<BmIcons icon={<AttachFile />} size="xlarge" />
|
|
112
|
+
<BmIcons icon={<QuickreplyIcon />} size="xlarge" />
|
|
113
|
+
<BmInput placeholder="Enter Message" />
|
|
114
|
+
<BmIcons icon={<SendIcon />} size="xlarge" />
|
|
115
|
+
</BmChat.Footer>
|
|
116
|
+
</BmChat>
|
|
117
|
+
);
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export default Chat;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BmChatHeader, BmButton} from '../src/lib/components/';
|
|
3
|
+
|
|
4
|
+
export const ChatHeader = ({ info }) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<BmChatHeader style={{ border: "1px solid #E2E2E2" }}>
|
|
8
|
+
<h2>Contact Name</h2>
|
|
9
|
+
<p>Last seen: 00:00</p>
|
|
10
|
+
<BmButton size="medium">End Session</BmButton>
|
|
11
|
+
</BmChatHeader>
|
|
12
|
+
</>
|
|
13
|
+
);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default ChatHeader;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* eslint-disable react/prop-types */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { BmBtnIcon, BmInfoTab, BmIcons } from '../src/lib/components/';
|
|
4
|
+
import CallIcon from '@material-ui/icons/Call';
|
|
5
|
+
import EmailIcon from '@material-ui/icons/Email';
|
|
6
|
+
import NoteAddIcon from '@material-ui/icons/NoteAdd';
|
|
7
|
+
import AddIcon from '@material-ui/icons/Add';
|
|
8
|
+
import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
|
|
9
|
+
import { MoreVert } from '@material-ui/icons';
|
|
10
|
+
|
|
11
|
+
const CustomerInfo = () => {
|
|
12
|
+
return (
|
|
13
|
+
<>
|
|
14
|
+
<BmInfoTab>
|
|
15
|
+
<BmInfoTab.Content>
|
|
16
|
+
<h3>Contact Name</h3>
|
|
17
|
+
<BmIcons icon={<MoreVert />} />
|
|
18
|
+
</BmInfoTab.Content>
|
|
19
|
+
<BmInfoTab.Content>
|
|
20
|
+
<BmInfoTab.Tabs>
|
|
21
|
+
<BmBtnIcon icon={<CallIcon />} />
|
|
22
|
+
<h4>Call</h4>
|
|
23
|
+
</BmInfoTab.Tabs>
|
|
24
|
+
<BmInfoTab.Tabs>
|
|
25
|
+
<BmBtnIcon icon={<EmailIcon />} />
|
|
26
|
+
<h4>Email</h4>
|
|
27
|
+
</BmInfoTab.Tabs>
|
|
28
|
+
<BmInfoTab.Tabs>
|
|
29
|
+
<BmBtnIcon icon={<NoteAddIcon />} />
|
|
30
|
+
<h4>Note</h4>
|
|
31
|
+
</BmInfoTab.Tabs>
|
|
32
|
+
<BmInfoTab.Tabs>
|
|
33
|
+
<BmBtnIcon icon={<AddIcon />} />
|
|
34
|
+
<h4>Log</h4>
|
|
35
|
+
</BmInfoTab.Tabs>
|
|
36
|
+
<BmInfoTab.Tabs>
|
|
37
|
+
<BmBtnIcon icon={<PriorityHighIcon />} variant="enabled" />
|
|
38
|
+
<h4>Priority</h4>
|
|
39
|
+
</BmInfoTab.Tabs>
|
|
40
|
+
</BmInfoTab.Content>
|
|
41
|
+
</BmInfoTab>
|
|
42
|
+
</>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export default CustomerInfo;
|
package/src/SideBar.js
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BmTab } from "./lib/components/Tabs/tabs";
|
|
3
|
+
import ForumIcon from '@material-ui/icons/Forum';
|
|
4
|
+
import { BmContactCard, BmAvatar, BmCounter, BmTag } from "./lib/components";
|
|
5
|
+
|
|
6
|
+
const SideBar = () => {
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<div className="main-sidebar-tabs">
|
|
10
|
+
<BmTab
|
|
11
|
+
state="active"
|
|
12
|
+
className="sidebar-tabs"
|
|
13
|
+
leadingIcon={<ForumIcon />}
|
|
14
|
+
>
|
|
15
|
+
<h3>Chats</h3>
|
|
16
|
+
</BmTab>
|
|
17
|
+
</div>
|
|
18
|
+
<div className="sidebar-contacts">
|
|
19
|
+
<BmContactCard>
|
|
20
|
+
<BmContactCard.Profile>
|
|
21
|
+
<BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
|
|
22
|
+
</BmContactCard.Profile>
|
|
23
|
+
<BmContactCard.Details>
|
|
24
|
+
<BmContactCard.SubDetails>
|
|
25
|
+
<h3>Contact Names</h3>
|
|
26
|
+
</BmContactCard.SubDetails>
|
|
27
|
+
<BmContactCard.SubDetails>
|
|
28
|
+
<p>Message text</p>
|
|
29
|
+
<BmCounter>10</BmCounter>
|
|
30
|
+
</BmContactCard.SubDetails>
|
|
31
|
+
<BmContactCard.SubDetails>
|
|
32
|
+
<BmTag variant="success">label</BmTag>
|
|
33
|
+
<p>10:00 am</p>
|
|
34
|
+
</BmContactCard.SubDetails>
|
|
35
|
+
</BmContactCard.Details>
|
|
36
|
+
</BmContactCard>
|
|
37
|
+
<BmContactCard>
|
|
38
|
+
<BmContactCard.Profile>
|
|
39
|
+
<BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
|
|
40
|
+
</BmContactCard.Profile>
|
|
41
|
+
<BmContactCard.Details>
|
|
42
|
+
<BmContactCard.SubDetails>
|
|
43
|
+
<h3>Contact Names</h3>
|
|
44
|
+
</BmContactCard.SubDetails>
|
|
45
|
+
<BmContactCard.SubDetails>
|
|
46
|
+
<p>Message text</p>
|
|
47
|
+
<BmCounter>10</BmCounter>
|
|
48
|
+
</BmContactCard.SubDetails>
|
|
49
|
+
<BmContactCard.SubDetails>
|
|
50
|
+
<BmTag variant="success">label</BmTag>
|
|
51
|
+
<p>10:00 am</p>
|
|
52
|
+
</BmContactCard.SubDetails>
|
|
53
|
+
</BmContactCard.Details>
|
|
54
|
+
</BmContactCard>
|
|
55
|
+
<BmContactCard>
|
|
56
|
+
<BmContactCard.Profile>
|
|
57
|
+
<BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
|
|
58
|
+
</BmContactCard.Profile>
|
|
59
|
+
<BmContactCard.Details>
|
|
60
|
+
<BmContactCard.SubDetails>
|
|
61
|
+
<h3>Contact Names</h3>
|
|
62
|
+
</BmContactCard.SubDetails>
|
|
63
|
+
<BmContactCard.SubDetails>
|
|
64
|
+
<p>Message text</p>
|
|
65
|
+
<BmCounter>10</BmCounter>
|
|
66
|
+
</BmContactCard.SubDetails>
|
|
67
|
+
<BmContactCard.SubDetails>
|
|
68
|
+
{/* <BmTag variant="success">label</BmTag> */}
|
|
69
|
+
<p>10:00 am</p>
|
|
70
|
+
</BmContactCard.SubDetails>
|
|
71
|
+
</BmContactCard.Details>
|
|
72
|
+
</BmContactCard>
|
|
73
|
+
</div>
|
|
74
|
+
</>
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export default SideBar;
|
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
overflow: auto;
|
|
7
7
|
max-width: 20%;
|
|
8
8
|
width: 20%;
|
|
9
|
+
border: 1px solid #E2E2E2;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.sidebar>* {
|
|
13
|
+
margin-bottom: 1.5rem;
|
|
9
14
|
}
|
|
10
15
|
|
|
11
16
|
.main-sidebar-tabs {
|
|
@@ -19,4 +24,57 @@
|
|
|
19
24
|
.main-sidebar-tabs>.sidebar-tabs {
|
|
20
25
|
padding: 1.714rem;
|
|
21
26
|
flex: 1;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.sidebar-contacts {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
margin: 0rem;
|
|
33
|
+
overflow: auto;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.main-chat-container {
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: row;
|
|
39
|
+
align-items: center;
|
|
40
|
+
height: calc(100vh - 180px);
|
|
41
|
+
max-width: 100%;
|
|
42
|
+
width: 100%;
|
|
43
|
+
background: white;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.chat {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
max-height: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
flex-grow: 1;
|
|
52
|
+
max-height: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.chat-menu {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: row;
|
|
59
|
+
height: 0%;
|
|
60
|
+
flex-grow: 1;
|
|
61
|
+
width: 100%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.chat-messages {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
height: 100%;
|
|
68
|
+
overflow: auto;
|
|
69
|
+
width: 80%;
|
|
70
|
+
border: 1px solid #E2E2E2;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.chat-contact-info {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
height: 100%;
|
|
77
|
+
overflow: auto;
|
|
78
|
+
width: 25%;
|
|
79
|
+
border: 1px solid #E2E2E2;
|
|
22
80
|
}
|
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
const BmChat = styled.div`
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: column;
|
|
18
|
+
height: 100%;
|
|
18
19
|
${"" /* border: 0.071rem solid ${BmGrey400}; */}
|
|
19
20
|
`;
|
|
20
21
|
|
|
@@ -22,6 +23,8 @@ BmChat.Body = styled.div`
|
|
|
22
23
|
display: flex;
|
|
23
24
|
flex-direction: column;
|
|
24
25
|
padding: 0rem 1.5rem;
|
|
26
|
+
flex-grow: 1;
|
|
27
|
+
overflow: auto;
|
|
25
28
|
`;
|
|
26
29
|
|
|
27
30
|
const Details = styled.div`
|
|
@@ -42,6 +45,7 @@ const Details = styled.div`
|
|
|
42
45
|
overflow-wrap: break-word !important;
|
|
43
46
|
word-wrap: break-word !important;
|
|
44
47
|
margin: 0rem;
|
|
48
|
+
flex-grow: 1;
|
|
45
49
|
`;
|
|
46
50
|
|
|
47
51
|
const MessageDetails = styled.div`
|
|
@@ -17,32 +17,32 @@ export default {
|
|
|
17
17
|
|
|
18
18
|
export const ChatBody = () => {
|
|
19
19
|
return (
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
20
|
+
<BmChat>
|
|
21
|
+
<BmChat.Body>
|
|
22
|
+
<BmChat.Details
|
|
23
|
+
state="inbound"
|
|
24
|
+
session="bot"
|
|
25
|
+
displayTime={<p>12:00pm</p>}
|
|
26
|
+
status="sent"
|
|
27
|
+
>
|
|
28
|
+
<p>Inbound</p>
|
|
29
|
+
</BmChat.Details>
|
|
30
|
+
<BmChat.Details
|
|
31
|
+
state="outbound"
|
|
32
|
+
session="live"
|
|
33
|
+
displayTime={<p>10:00am</p>}
|
|
34
|
+
status="failed"
|
|
35
|
+
>
|
|
36
|
+
<p>Outbound</p>
|
|
37
|
+
</BmChat.Details>
|
|
38
|
+
</BmChat.Body>
|
|
39
|
+
<BmChat.Footer>
|
|
40
|
+
<BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
|
|
41
|
+
<BmIcons icon={<AttachFileIcon />} size="xlarge" />
|
|
42
|
+
<BmIcons icon={<QuickreplyIcon />} size="xlarge" />
|
|
43
|
+
<BmInput placeholder="Enter Message" />
|
|
44
|
+
<BmIcons icon={<SendIcon />} size="xlarge" />
|
|
45
|
+
</BmChat.Footer>
|
|
46
|
+
</BmChat>
|
|
47
47
|
);
|
|
48
48
|
};
|