Skip to content

Commit 2201173

Browse files
csmeynscsmeyns
authored
Merge pull request #549 from talkjs/feat/add-how-to-add-tabs-to-inbox
Add 'How to add tabs to your inbox' example
2 parents 2643deb + a78f809 commit 2201173

File tree

4 files changed

+212
-0
lines changed

4 files changed

+212
-0
lines changed

‎howtos/how-to-add-tabs-to-your-inbox/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# How to add tabs to your inbox
2+
3+
This is an example project to go with the [How to add tabs to your inbox](https://talkjs.com/resources/how-to-add-tabs-to-your-inbox/) tutorial.
4+
5+
## Prerequisites
6+
7+
To run this tutorial, you will need:
8+
9+
- A [TalkJS account](https://talkjs.com/dashboard/)
10+
11+
## How to run the tutorial
12+
13+
1. Clone or download this project.
14+
2. Go to `index.js`, and replace `<APP_ID>` with your own app ID. You can find your app ID on the **Settings** page of the [TalkJS dashboard](https://talkjs.com/dashboard/).
15+
3. Run the HTML file by opening it in your browser.
16+
17+
Conversations only show up in the conversation list in the inbox [if the conversation contains at least one message](https://talkjs.com/docs/Features/Chat_UI_Modes/The_Inbox/#conversations-in-the-inbox). To try out the inbox tab filtering, create at least one 1-on-1 conversation (direct message), and one group chat.

‎howtos/how-to-add-tabs-to-your-inbox/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>How to add tabs to your inbox</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="styles.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10+
</head>
11+
12+
<body>
13+
<!-- minified snippet to load TalkJS without delaying your page -->
14+
<script>
15+
(function (t, a, l, k, j, s) {
16+
s = a.createElement("script");
17+
s.async = 1;
18+
s.src = "https://cdn.talkjs.com/talk.js";
19+
a.head.appendChild(s);
20+
k = t.Promise;
21+
t.Talk = {
22+
v: 3,
23+
ready: {
24+
then: function (f) {
25+
if (k)
26+
return new k(function (r, e) {
27+
l.push([f, r, e]);
28+
});
29+
l.push([f]);
30+
},
31+
catch: function () {
32+
return k && new k();
33+
},
34+
c: l,
35+
},
36+
};
37+
})(window, document, []);
38+
</script>
39+
40+
<script src="index.js" async defer></script>
41+
42+
<!-- container element in which TalkJS will display a chat UI -->
43+
<div id="main-wrapper">
44+
<div id="tab-navigation">
45+
<button id="tab-chat" class="tab active-tab"><i class="fas fa-comments"></i> Chats</button>
46+
<button id="tab-contacts" class="tab"><i class="fas fa-user"></i> Contacts</button>
47+
<button id="tab-groups" class="tab"><i class="fas fa-users"></i> Groups</button>
48+
</div>
49+
<div id="talkjs-container">
50+
<i>Loading...</i>
51+
</div>
52+
</div>
53+
54+
</body>
55+
</html>

‎howtos/how-to-add-tabs-to-your-inbox/index.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
Talk.ready.then(function () {
2+
3+
// Define current user
4+
const me = new Talk.User({
5+
id: "rizal",
6+
name: "Rizal",
7+
});
8+
9+
// Initialize the TalkJS session
10+
const talkSession = new Talk.Session({
11+
appId: '<APP_ID>',
12+
me: me,
13+
});
14+
15+
// Add other user
16+
const oya = new Talk.User({
17+
id: 'oya',
18+
name: 'Oya',
19+
});
20+
21+
const jinfeng = new Talk.User({
22+
id: 'jinfeng',
23+
name: 'Jinfeng',
24+
});
25+
26+
// Get or create the conversation
27+
const conversation = talkSession.getOrCreateConversation('summer-hike');
28+
29+
// Set the conversation participants
30+
conversation.setParticipant(me);
31+
conversation.setParticipant(oya);
32+
conversation.setParticipant(jinfeng);
33+
34+
// Function to add the conversation type
35+
function updateConversationType(conversation) {
36+
const participantCount = Object.keys(conversation.participants).length;
37+
console.log(conversation.participants);
38+
39+
// Set the conversation type based on the number of participants
40+
const conversationType = participantCount > 2 ? 'group' : 'dm';
41+
42+
// Update the custom attribute 'type' on the conversation
43+
conversation.setAttributes({
44+
custom: { type: conversationType }
45+
});
46+
}
47+
48+
// Define filters for each tab
49+
const filters = {
50+
chat: {},
51+
contacts: { custom: { type: ["==", "dm"] } },
52+
groups: { custom: { type: ["==", "group"] } }
53+
};
54+
55+
// Set chat as the default tab
56+
let tab = 'chat';
57+
58+
// Handle tab switching
59+
const tabButtons = {
60+
'tab-chat': 'chat',
61+
'tab-contacts': 'contacts',
62+
'tab-groups': 'groups',
63+
};
64+
65+
Object.keys(tabButtons).forEach(tabId => {
66+
document.getElementById(tabId).addEventListener("click", () => {
67+
tab = tabButtons[tabId];
68+
inbox.setFeedFilter(filters[tab]);
69+
inbox.select(null);
70+
setActiveTab(tabId);
71+
});
72+
});
73+
74+
// Set active tab style
75+
function setActiveTab(activeTabId) {
76+
document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active-tab'));
77+
document.getElementById(activeTabId).classList.add('active-tab');
78+
}
79+
80+
// Create the inbox, select the conversation, mount the UI
81+
const inbox = talkSession.createInbox();
82+
inbox.select(conversation);
83+
inbox.mount(document.getElementById('talkjs-container'));
84+
});
85+

‎howtos/how-to-add-tabs-to-your-inbox/styles.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
#main-wrapper {
2+
width: 700px;
3+
margin: 10px auto;
4+
}
5+
6+
#tab-navigation {
7+
display: flex;
8+
justify-content: flex-start;
9+
background-color: #f8f8f8;
10+
border-radius: 10px;
11+
padding: 10px 20px;
12+
margin-bottom: 15px;
13+
width: 100%;
14+
}
15+
16+
.tab {
17+
padding: 12px 24px;
18+
cursor: pointer;
19+
border: none;
20+
background-color: #ececec;
21+
border-radius: 5px;
22+
font-weight: bold;
23+
transition: background-color 0.2s ease;
24+
display: flex;
25+
align-items: center;
26+
margin: 0px 5px;
27+
gap: 8px;
28+
}
29+
30+
.tab i {
31+
font-size: 16px;
32+
}
33+
34+
.tab:hover {
35+
color: #007DF9;
36+
}
37+
38+
.active-tab {
39+
background-color: #007DF9;
40+
color: white;
41+
}
42+
43+
.active-tab:hover {
44+
background-color: #014e9b;
45+
color: white;
46+
}
47+
48+
#talkjs-container {
49+
height: 500px;
50+
width: 100%;
51+
background-color: #ffffff;
52+
border: 1px solid #dcdcdc;
53+
border-radius: 10px;
54+
padding: 20px;
55+
}

0 commit comments

Comments
 (0)