Skip to content

Commit 80427ea

Browse files
keerlukeerlu
authored
Merge pull request #436 from aswinrajeevofficial/master
Edit Image or Title of Conversation Tutorial Project Code
2 parents 28cd105 + 8263128 commit 80427ea

File tree

7 files changed

+911
-0
lines changed

7 files changed

+911
-0
lines changed

‎rest-api/edit-conversation-image-title/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
This is an example project to go with our tutorial on How to edit the title and image of your TalkJS Conversation.
2+
<!-- Add link to tutorial once published -->
3+
4+
The project uses TalkJS's [conversation actions](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to add a custom action to the conversation that lets users edit the title or image of group conversations. The action is hooked to a backend server that calls the TalkJS REST API to update the conversation object.
5+
6+
## Prerequisites
7+
8+
To run this tutorial, you will need:
9+
10+
- A [TalkJS account](https://talkjs.com/dashboard/login)
11+
- [Node.js](https://nodejs.org/en) and [npm](https://www.npmjs.com/)
12+
13+
## How to run the tutorial
14+
15+
1. Clone or download this project.
16+
2. Rename the `.env_new` file to `.env` and paste your TalkJS appID and secret key. You can find both of these on your TalkJS dashboard.
17+
3. Go to your TalkJS dashboard and navigate to the Roles tab. Select the “default” role and go down to the Custom conversation actions section. Add a new action and name it “editTitleOrImage” with the label “Edit title or image”. Don’t forget to click Save all roles to persist your changes.
18+
4. Go to the `server` folder and run `npm install` followed by `npm start`. This installs all the required dependencies and starts the NodeJS server.
19+
5. Open `index.html` from a browser, or through an extension like Live Server from your favorite IDE or text editor.

‎rest-api/edit-conversation-image-title/index.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>TalkJS Zoom Integration</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
8+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9+
</head>
10+
11+
<body>
12+
<!-- minified snippet to load TalkJS without delaying your page -->
13+
<script>
14+
(function (t, a, l, k, j, s) {
15+
s = a.createElement("script");
16+
s.async = 1;
17+
s.src = "https://cdn.talkjs.com/talk.js";
18+
a.head.appendChild(s);
19+
k = t.Promise;
20+
t.Talk = {
21+
v: 3,
22+
ready: {
23+
then: function (f) {
24+
if (k)
25+
return new k(function (r, e) {
26+
l.push([f, r, e]);
27+
});
28+
l.push([f]);
29+
},
30+
catch: function () {
31+
return k && new k();
32+
},
33+
c: l,
34+
},
35+
};
36+
})(window, document, []);
37+
</script>
38+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
39+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
40+
</script>
41+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
42+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
43+
</script>
44+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
45+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
46+
</script>
47+
<body>
48+
<!-- container element in which TalkJS will display a chat UI -->
49+
<div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
50+
<i>Loading chat...</i>
51+
</div>
52+
53+
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
54+
aria-hidden="true">
55+
<div class="modal-dialog">
56+
<div class="modal-content">
57+
<div class="modal-header">
58+
<h5 class="modal-title">Edit Conversation Title/Image</h5>
59+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
60+
<span aria-hidden="true">&times;</span>
61+
</button>
62+
</div>
63+
<div class="modal-body">
64+
<form onsubmit="getFormData(event)">
65+
<div class="form-group">
66+
<label for="conversationTitle">Enter a new conversation title:</label>
67+
<input type="text" class="form-control" id="conversationTitle">
68+
</div>
69+
<div class="form-group">
70+
<label for="imageURL">Enter a new image URL:</label>
71+
<input type="text" class="form-control" id="imageURL">
72+
</div>
73+
<input type="submit" class="btn btn-primary">
74+
</form>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</body>
80+
<script src="script.js"></script>
81+
</html>

‎rest-api/edit-conversation-image-title/script.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
let conversationId = "";
2+
3+
const myModal = new bootstrap.Modal(
4+
document.getElementById("editModal"),
5+
{}
6+
);
7+
8+
(async () => {
9+
await Talk.ready;
10+
const me = new Talk.User({
11+
id: "0001",
12+
name: "Kirsten Doe",
13+
email: "[email protected]",
14+
photoUrl: "https://talkjs.com/images/avatar-1.jpg",
15+
role: "default",
16+
});
17+
18+
const other = new Talk.User({
19+
id: "0002",
20+
name: "Mikaela Ross",
21+
email: "[email protected]",
22+
photoUrl: "https://talkjs.com/images/avatar-7.jpg",
23+
role: "default",
24+
});
25+
26+
const other2 = new Talk.User({
27+
id: "0003",
28+
name: "Ross Haydon",
29+
email: "[email protected]",
30+
photoUrl: "https://talkjs.com/images/avatar-4.jpg",
31+
role: "default",
32+
});
33+
34+
window.talkSession = new Talk.Session({
35+
appId: "YOUR_APP_ID",
36+
me: me,
37+
});
38+
39+
const conversation = talkSession.getOrCreateConversation("GROUPCHAT001");
40+
conversation.setParticipant(me);
41+
conversation.setParticipant(other);
42+
conversation.setParticipant(other2);
43+
44+
const chatbox = talkSession.createChatbox();
45+
chatbox.select(conversation);
46+
chatbox.mount(document.getElementById("talkjs-container"));
47+
48+
chatbox.onCustomConversationAction("editTitleOrImage", (event) => {
49+
myModal.show();
50+
conversationId = event.conversation.id;
51+
});
52+
})();
53+
54+
function getFormData(event) {
55+
event.preventDefault();
56+
const imageURL = document.getElementById("imageURL").value;
57+
const conversationTitle = document.getElementById("conversationTitle").value;
58+
editImageOrTitle(conversationId, imageURL, conversationTitle);
59+
myModal.hide();
60+
}
61+
62+
async function editImageOrTitle(conversationId, imageURL, conversationTitle) {
63+
const serverURL = `http://127.0.0.1:3000/editImageOrTitle`;
64+
const data = {
65+
conversationId: conversationId,
66+
conversationTitle: conversationTitle ? conversationTitle : undefined,
67+
imageURL: imageURL ? imageURL : undefined,
68+
};
69+
const response = await fetch(serverURL, {
70+
method: "PUT",
71+
headers: {
72+
"Content-Type": "application/json",
73+
},
74+
body: JSON.stringify(data),
75+
}).catch((err) => console.log(err));
76+
}

‎rest-api/edit-conversation-image-title/server/.env_new

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
TALKJS_URL=https://api.talkjs.com/v1
2+
APP_ID=YOUR_APP_ID
3+
SECRET_KEY=YOUR_SECRET_KEY

0 commit comments

Comments
 (0)