DEV Community: Aswin Rajeev

Technical writing in the age of AI

Aswin Rajeev — Fri, 14 Nov 2025 12:30:35 +0000

Technical writing has changed so much over the past few years. When I started working as a freelance technical writer almost 9 years back, I used to get an outline, the expected length of the article, areas to cover, and a deadline. After a week or so of research and implementation, I submit the article with a code sample and it gets reviewed. After a couple of rounds of back and forth, it finally goes live and I get paid.

Fast forward to today, things have changed quite drastically. What used to be hours of typing, multiple review rounds, and cluttered publishing processes are being replaced by AI and workflow tools.

Outline? What outline?

From receiving detailed outlines to just receiving topic names. Technical writers are expected to use AI tools to research and understand what to write. Not just that, we're also expected to question what we write so that users don't hit any unexpected roadblocks.

The first draft

The first draft no longer takes a week to prepare. Within hours, we're ready with an understanding of the topic at hand and ready to generate a draft using AI.

Using information from the topic's research that was already output by AI, it can generate a nice draft with formatted headings and sections. We also have to fact check the AI's research based on the sources it has referred from. Grammar and spelling are (mostly) accurate outright. If you need the draft to follow company guidelines, feed the AI your standards, and it gives you something that's pretty much ready to go.

What's the catch?

But, here's the problem. The output is only as good as the input and its relevance. Outdated content, lack of context, newer features, all require a human, to understand and make it consumable by AI.

Moreover, technical writers aren't expected to just write. We're expected to outgrow our role and turn into information architects, part-time coders, automation maestros, and more.

If you're ever stuck somewhere not having the opportunity to innovate or in a place that believes AI won't bring any value, it's high time you start reevaluating your strategy and long term goals.

AI is here to stay and you got to be one step ahead and become valuable in ways you don't really associate with your role. The role of a technical writer is evolving. You're expected to create content that goes into models so that the end user that sits in front of a chat interface gets the right information. There may soon be a shift in documentation websites that just have a chat interface with the top chats from users or something that's pinned by the company.

Until the next monthly log, happy writing!

Using DeepSeek R1 on an AMD GPU

Aswin Rajeev — Wed, 29 Jan 2025 20:22:31 +0000

The cover of this article is from a video where Sam Altman goes on and claims, "It is hopeless to compete with us!". But they've spoken too soon and have finally found a worthy opponent. A Chinese company, DeepSeek, announced their flagship model, R1, that matches the performance of OpenAI's flagship models GPT-4o and o1.

Why is this huge?

There are a few pointers here:

• The computing power used to train the model was 1/10th that of similar LLMs.
• It costed them only $6 million compared to the $100+ million of GPT 4 and newer models.
• It is open source.
• It was all done amid sanctions on their use of Nvidia chips.

The points above puts into perspective how a significant player can emerge in the A.I race out of nowhere. Enough of this, let's get our hands on this beast of a model.

Prerequisites

To run the R1 locally, you must have Ollama. Download it for your OS and you're all set.

Downloading DeepSeek R1

Being open source, you can easily download R1 and start using it right away. Right away, as long as you have the computing resources to run the lighter versions.

The original model has 671b (404GB) parameters but there are 6 other distilled variants with the following parameters and sizes:

• 1.5b - 1.1GB
• 7b - 4.7GB
• 8b - 4.9GB
• 14b - 9.0GB
• 32b - 20.0GB
• 70b - 43GB

I'm running the 14b model on my i5-12600k, with 32GB of RAM, and the AMD Radeon 7800XT with 16GB of VRAM. It seems to be working fine, although the GPU utilization goes over 90% when I run queries.

Don't try and use models with 32B parameters and above locally, unless you have the latest and greatest GPU from Nvidia and tons of processing power. If you're having a GPU with less than 8GB of VRAM, consider using the 1.5b model only.

To download the 14b parameter model,

ollama run deepseek-r1:14b

It starts the download immediately and you should see something like this. If it doesn't, make sure Ollama is running by executing ollama serve.

To download the other models, simply change the parameter value. For instance, if you want to download and run the 8b model, change 14b to 8b in the above query.

After the download completes, it immediately starts the model as well. I've read that this model performs extremely well with reasoning, especially in the field of mathematics.

Output versus ChatGPT

I asked a very simple question, what is (a+b)^2?

The output from DeepSeek R1 was so detailed, almost like a professor teaching.

>>> What is a + b the whole squared?
<think>
To determine \( (a + b)^2 \), I recall that squaring a binomial involves using the distributive property.

First, I apply the formula for the square of a sum: \( (a + b)^2 = a^2 + 2ab + b^2 \).

Next, I verify this by expanding \( (a + b)(a + b) \):
- Multiply the first terms: \( a \times a = a^2 \).
- Multiply the outer terms: \( a \times b = ab \).
- Multiply the inner terms: \( b \times a = ab \).
- Multiply the last terms: \( b \times b = b^2 \).

Adding these products together gives \( a^2 + 2ab + b^2 \), confirming that the expansion is correct.
</think>

To find the value of \( (a + b)^2 \), we can use the distributive property (also known as the FOIL method) to
expand the expression.

**Step-by-Step Solution:**

1. **Apply the Distributive Property:**

   \[
   (a + b)^2 = (a + b)(a + b)
   \]

2. **Multiply Each Term in the First Parenthesis by Each Term in the Second Parenthesis:**

   - **First Terms:** \( a \times a = a^2 \)
   - **Outer Terms:** \( a \times b = ab \)
   - **Inner Terms:** \( b \times a = ab \)
   - **Last Terms:** \( b \times b = b^2 \)

3. **Add All the Products Together:**

   \[
   (a + b)^2 = a^2 + ab + ab + b^2
   \]

4. **Combine Like Terms (\(ab + ab = 2ab\)):**

   \[
   (a + b)^2 = a^2 + 2ab + b^2
   \]

**Final Answer:**

\[
\boxed{(a + b)^2 = a^2 + 2ab + b^2}
\]

The same question, when I asked ChatGPT online, gave me this:

Conclusion

This article is not about finding the better A.I model, but a way to reflect on how A.I has grown over the past couple of years. It is very easy to conclude that ignorance can hit you hard or in terms of the U.S stock market, a $1.2 trillion drop in tech stocks! Anyways, have fun playing around with DeepSeek R1. Be sure to try other open source models available on Ollama and see what best suits your needs!

How to create a product carousel for a TalkJS chat

Aswin Rajeev — Thu, 18 May 2023 19:32:25 +0000

In this tutorial, we are going to use HTMLPanels in TalkJS to create a product carousel. If you haven’t used HTMLPanels before, do check our official documentation. The app we are going to build uses the Sneaks-API as a backend server and displays sneakers and other products based on user input. We use HTMLPanels to display the retrieved products in a beautiful carousel. You can even click on the product name and visit the reseller website. Here’s a peek into what we’re going to build.

Prerequisites

Note that we are using the Sneaks-API as a reference backend server in this project. This could be any backend that connects to a database and houses product data. For example, you could be running a marketplace with hundreds of different products with specific categories and tags attached to each product. You can give your users information on how to use these filters in the chatbox itself and then when they type something in, use your APIs to retrieve products that satisfy the required criteria. To run this project, you need to have the following:

A working TalkJS account (free for development and testing)
A clone of the Sneaks-API project from GitHub

Running the Sneaks-API Server Locally

To run the Sneaks-API server locally, you must clone their Github repo. Then, go to index.js and uncomment these three lines:

app.listen(port, function () {
  console.log(`Sneaks app listening on port `, port);
});

Now, run the following commands: npm install and npm start from the same directory. The server should start on port 4000.

Setting up the Chatbox

Follow the TalkJS Getting Started guide to set up a working chat in minutes. The guide uses the Inbox UI mode, but this example uses a chatbox. Replace the following two lines:

var inbox = talkSession.createInbox({ selected: conversation });
  inbox.mount(document.getElementById('talkjs-container'));

With these three lines of code:

const chatbox = talkSession.createChatbox();
chatbox.select(conversation);
chatbox.mount(document.getElementById("talkjs-container"));

Right below this, we initialize our HTML Panel. The createHtmlPanel() function on the chatbox object returns a Promise, so we use await. The three parameters specify the location of the HTML file that contains our HTML panel, the height of the panel and whether to display it after initialization.

  const htmlPanel = await chatbox.createHtmlPanel({
    url: "./product-recommendations.html",
    height: 285,
    show: false,
  });

Now, we use the onSendMessage() function of the chatbox object to perform a function every time the user sends a message. We store the message and the conversation ID in two variables. First, we call the getProducts() method passing the message text. This returns an array of products which we pass as an argument along with the HTML panel and conversation ID to the addProductsToHTMLPanel() method. The first line hides the HTML panel if it's already visible.

  chatbox.onSendMessage(async function (data) {
    if(htmlPanel.isVisible())
      htmlPanel.hide();
    const messageText = data.message.text;
    const conversationId = data.conversation.id;
    const productData = await getProducts(messageText, htmlPanel);
    addProductsToHTMLPanel(productData, htmlPanel, conversationId);
  });

The HTMLPanel

The code for the HTMLPanel is mostly boilerplate. See below:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div id="close-button">X</div>
    <div id="row"></div>
</body>
</html>

It contains two Bootstrap files and our very own stylesheet. The body contains two divs: one with the id close-button and one with the ID row. That’s it. Save it as product-recommendations.html in the same directory as the TalkJS JavaScript and HTML files. The rest of the product carousel is built by manipulating the DOM through JavaScript.

Getting Product Data

We have a new async function to get our product data every time the user types a message. In short, the function calls the Sneaks-API’s /search endpoint and returns the results. We only display 10 products in the carousel, so we slice the response to use only the first 10 products. Finally, we return the product array.

//Function to get products from Sneaks API
async function getProducts(messageText) {
  const product_url = `http://localhost:4000/search/${messageText}?count=10`;
  const product_url_options = {
    method: "GET",
  };


  try {
    const response = await fetch(product_url, product_url_options);
    const result = await response.json();
    const productData = result.slice(0, 10);

    return productData;


  } catch (error) {
    console.log(error);
  }
}

Adding Products to the HTMLPanel

This is the HTML template of the carousel that we are trying to achieve by manipulating the DOM.

<body>
  <div id="close-button">X</div>
  <div id="row">
    <div class="card">
      <img
        src=""
        class="card-image">
      <span class="brand-name"></span>
      <span class="price"></span>
      <a href="" target="_blank"></a>
    </div>
  </div>
</body>

The first if-block checks if the HTML panel DOM already has products. If it does, we clear them. Next, we have two lines of code that are very important. The first line waits for the HTML panel DOM to fully load. The next line waits for all assets (like images, scripts, etc) to fully load. We start manipulating the DOM only after this is complete.

await htmlPanel.DOMContentLoadedPromise;
await htmlPanel.windowLoadedPromise;

We start off by retrieving the <div> with the id row and iterating over the product array. For each product, we add a <div> tag, and within that we add an <img> tag, 2 <span> tags and one <a> tag with the classes mentioned above.

//Function to add products to the HTML panel
async function addProductsToHTMLPanel(productData, htmlPanel, conversationId){
  if (htmlPanel.window.document.getElementById("row").hasChildNodes()) {
    htmlPanel.window.document.getElementById("row").innerHTML = "";
  }

  await htmlPanel.DOMContentLoadedPromise;
  await htmlPanel.windowLoadedPromise;  

  const row = htmlPanel.window.document.getElementById("row");


  productData.forEach((product) => {
    const cardDiv = htmlPanel.window.document.createElement("div");
    cardDiv.classList.add("card");


    const brandName = htmlPanel.window.document.createElement("span");
    brandName.classList.add("brand-name");
    brandName.innerHTML = product.brand;


    const cardImageLink = htmlPanel.window.document.createElement("a");
    cardImageLink.href = product.resellLinks["stockX"];
    cardImageLink.target = "_blank";
    cardImageLink.innerHTML = product.shoeName;


    const cardImage = htmlPanel.window.document.createElement("img");
    cardImage.addEventListener("error", () => {
      console.log(cardImage.src);
      cardImage.src = "./static/no_image.png";
    });
    cardImage.src = product.thumbnail;
    cardImage.classList.add("card-image");


    const retailPrice = htmlPanel.window.document.createElement("span");
    retailPrice.classList.add("price");
    retailPrice.innerHTML = "RRP: $" + product.lowestResellPrice["stockX"];


    cardDiv.appendChild(cardImage);
    cardDiv.appendChild(brandName);
    cardDiv.appendChild(retailPrice);
    cardDiv.appendChild(cardImageLink);
    row.appendChild(cardDiv);
  });
  sendReply(conversationId);  
  const closeButton = htmlPanel.window.document.getElementById("close-button");
    closeButton.addEventListener("click", () => {
      htmlPanel.hide();
  });
  htmlPanel.show();
}

Each of these is populated with the data from the product array. For the close button, we add an event listener for the click event and call the htmlPanel.hide() method when clicked.

Posting a Reply

You might be wondering why we sent the conversation ID to the function. Well, that is to post a reply to the chat from our shopping assistant. Once the user types in a product name, the shopping assistant replies back with a positive affirmation. This is just to improve the useability of the chatbox itself. We use another function called sendReply() to achieve it.

//Function to post a success reply to the chat
async function sendReply(conversationId) {
  const data = [
    {
      text: "Awesome. Here are our top recommendations! If you want to view other products, simply type the name of the product you want.",
      sender: "654321",
      type: "UserMessage",
    },
  ];
  const postReplyURL = `http://localhost:4000/postSuccessReply/${conversationId}`;
  try {
    const response = await fetch(postReplyURL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

This function calls the Sneaks-API backend server along with the conversation ID and the message data to POST. It doesn’t have an endpoint to resolve this, so we must add our own endpoint to achieve it.

Go to the Sneaks-API folder and navigate to routes/sneaks.routes.js. Add this import to the first line:

const bodyParser = require("body-parser");

At the very end, add a new route.

  //Posts a success reply to a conversation
  app.post(
    "/postSuccessReply/:conversationId", bodyParser.json(), (req, res) => {
      const conversationId = req.params.conversationId;
      sneaks.postSuccessReply(conversationId, req.body, (error, conversation) => {
        if (error) {
          console.log(error);
          res.send("No conversation found");
        } else {
          res.json(conversation);
        }
      });
    }
  );

Now, navigate to controllers/sneaks.controllers.js, and add the following:

  async postSuccessReply(conversationId, data) {
    const talkJSURL = `${process.env.TALKJS_URL}${process.env.TALKJS_APP_ID}/conversations/${conversationId}/messages`;
    const options = {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.SECRET_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    };

    try {
      const response = await fetch(talkJSURL, options);
      return response;
    } catch (error) {
      console.log(error);
    }
  }

We are using a .env file to store the TALKJS_URL, TALKJS_APP_ID and SECRET_KEY. You must retrieve the app ID and secret key from your dashboard and store it in the .env file. Here is how it should look:

TALKJS_APP_ID=Paste your app ID here
TALKJS_URL=https://api.talkjs.com/v1/
SECRET_KEY=Paste your secret key here

One thing to note here is that the Sneaks-API project uses an older version of Express that requires an additional dependency called body-parser to parse through the request and response. You must install this by executing the command npm install body-parser --save.

Adding our Styles

This is the last part of the tutorial. Create a file named styles.css and use the CSS below as a starting point. Place it in the same directory as the rest of the files.

#row {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}


.card {
  float: left;
  width: 40%;
  padding: 0.4rem;
  margin-bottom: 2rem;
  flex-basis: 33.333%;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0.4rem 0.4rem;
  border: 2px solid rgb(230, 230, 230);
  border-radius: 8%;
  margin: 10px 4px;
  transition: .6s ease;
  background-color: rgb(233, 233, 233);
}


.card:hover {
  transform: scale(1.05);
}


.card-image {
  float: left;
  width: 7.3rem;
  height: 5.5rem;
  vertical-align: middle;
  border-radius: 8%;
  border: 2px solid rgb(216, 216, 216);
}


a {
  font-size: 85%;
  text-decoration: none;
  color: black;
}


.brand-name {
  text-align: left;
  text-transform: capitalize;
  font-weight: bold;
}


.price {
  font-size: 85%;
  text-decoration: none;
  color: black;
}


#close-button{
  padding: 0px 0.2rem;
  border-radius: 1.5rem;
  display: inline-block;
  margin-left: 0.4rem;
  cursor: pointer;
  color: red;
}

Conclusion

That's the end of our sort-of long tutorial. The great thing about TalkJS is how customizable it is right out of the box. It is built with this idea in mind, and you can achieve pretty much anything your use case or requirement demands. You can find the source code for this tutorial on our Github repository.

How to migrate from Sendbird to TalkJS

Aswin Rajeev — Thu, 16 Feb 2023 09:00:00 +0000

In this tutorial, we're going to show you how to export data from Sendbird and import it to TalkJS. This is really helpful if you are trying to switch platforms and onboard with TalkJS. In case you’re using some other chat API the steps would be very similar to this one. The basic flow is to get all the data using Sendbird’s API, make some data transformations so that TalkJS can identify it, and then finally invoke the TalkJS APIs with the transformed data. You can find the entire source code in our Github repository.

Exporting from Sendbird

Shown above is a screenshot of our group chat on Sendbird. They have three main entities that you must import to TalkJS. They are Users, Channels, and Messages. The table below shows the mapping between entities in Sendbird and TalkJS.

Sendbird	TalkJS
Users	Users
Channels	Conversations
Messages	Messages

There are two ways to export data from Sendbird. One is to use the export option from the dashboard, and the other is to use their Export APIs. We are going to use the dashboard here as it is quick and easy.

On your dashboard, navigate to the Data exports page and click on Request. Once there, select the entity you want to export (Channels, Messages, Users), its format, and time frame. Sendbird only allows you to select a date range of 7 days, so if you have older data, you need to perform multiple exports. Click on Request to submit the export request. On the Data exports page, you can see a new entry for the export. It goes through different statuses before becoming available to download. Click on Download and save it to your local storage.

Using the Sendbird Export API

You can also export data from Sendbird using their export REST API. The base URL for the export REST API is:

https://api-APPLICATION_ID.sendbird.com/v3/export/ENTITY_NAME

Replace APPLICATION_ID with your application ID from the Sendbird dashboard and ENTITY_NAME with users, messages or channels based on what you want to export. You also have to provide a custom header called Api-Token and provide it with the value from your Sendbird dashboard as well.

The request must be an HTTP POST and the body requires just two parameters, the start_ts and end_ts. Both of these are in UNIX milliseconds. Sendbird allows you to fetch messages within a 7-day timeframe only even when using the API, so if you have more data, you must submit multiple requests.

{
  "start_ts": "1673352000",
  "end_ts": "1673907200"
}

The default format is JSON, but if you want it in CSV just add the format attribute in the request body and set it to CSV. Don’t forget to add the Api-Token header when you submit each request. After submitting, you should get a response as shown below:

{
  "request_id": "x00000xx0000000",
  "status": "scheduled",
  "data_type": "users",
  "start_ts": 1673352000000,
  "end_ts": 1673907200000,
  "user_ids": [],
  "format": "json",
  "created_at": 1675207070000,
  "timezone": "UTC"
}

The status is scheduled and you can retrieve the file once it is complete by executing a GET request with the request_id as a query parameter. For this example, the request is as shown below:

https://api-APPLICATION_ID.sendbird.com/v3/export/users/x00000xx0000000

Once the status is done, you can download the data using the URL in the response. It has an expiry date of 7 days.

Importing to TalkJS

We have separated the import process into three different programs to make it easier to explain. The code in all three is similar to each other and you can combine them while using it in production. This is just to make the explanation a bit easier for the sake of this tutorial. We have three NodeJS applications that import users, conversations, and messages.

Importing Users

"use strict";
const fs = require("fs");
const axios = require("axios");

const instance = axios.create({
  baseURL: "https://api.talkjs.com",
  headers: {
    Authorization: "Bearer YOUR_SECRET_KEY_FROM_TALKJS_DASHBOARD",
    "Content-Type": "application/json",
  },
});

function importUsers() {
  const userDataRaw = fs.readFileSync("exported-data/active_users.json");
  const usersJson = JSON.parse(userDataRaw);
  const users = usersJson.active_users;
  for(let user of users){
    instance.put(`/v1/YOUR_APP_ID/users/${user.user_id}`, {
      name: user.nickname,
      email: [user.metadata.emailId],
      photoUrl: user.profile_url,
      id: user.user_id,
    })
  }
}
importUsers();

The code above shows how you can import users to TalkJS. We have used two modules in the program. The file system module (fs) reads the exported data and the axios module to make requests. After importing the modules, we create an instance of the axios module passing in the baseURL of the TalkJS API and the necessary headers.

You must obtain the secret key from your TalkJS dashboard to authenticate requests. Be sure to set the Content-Type as application/json, since TalkJS only supports that currently.

The next function is the actual import process. We read the JSON data and loop through each user. Then we call the endpoint with the HTTP PUT method passing in the parameters necessary to create a user. The id and email are the minimum parameters required. Sendbird doesn’t have an email address field for their users, but they do support the addition of custom fields. The metadata field contains the custom fields and we can map the email address from that to the email field for a TalkJS User.

Importing Conversations

function importConversations() {
  const channelsRaw = fs.readFileSync("exported-data/group_channels.json");
  const channelsJson = JSON.parse(channelsRaw);
  const channels = channelsJson.group_channels;
  for(let channel of channels){
    const channelParticipants = [];
    for (let member of channel.members) {
      channelParticipants.push(member.user_id);
    }
    instance.put(`/v1/YOUR_APP_ID/conversations/${channel.channel_url}`, {
      subject: channel.name,
      participants: channelParticipants,
    })
  }
}

importConversations();

The next program is to import conversations. Channels in Sendbird are analogous to Conversations in TalkJS. We read the JSON file just like before and store the data in a variable called channels. The participants of a conversation are stored in a variable called members in Sendbird. We retrieve this and store it in an array before invoking the API to create conversations in TalkJS. The channel’s URL from Sendbird is used as the unique Conversation ID in TalkJS.

Importing Messages

const messagesRaw = fs.readFileSync("exported-data/messages.json");
const messagesJson = JSON.parse(messagesRaw);
const messages = messagesJson.messages;

const uniqueConversations = [ ...new Set(messages.map((item) => item.channel_url))];

let conversationJsonArray = [];

for (let conversation of uniqueConversations) {
  let conversationJsonObj = {};
  conversationJsonObj[conversation] = [];
  conversationJsonArray.push(conversationJsonObj);
}

for(let conversation of conversationJsonArray) {
  for(let message of messages){
    if(Object.keys(conversation)[0] === message.channel_url){
      let messageObj = {};
      messageObj.text = message.message,
      messageObj.sender = message.user.user_id,
      messageObj.type = message.type === "MESG" ? "UserMessage" : "SystemMessage",
      messageObj.timestamp = message.created_at,
      messageObj.readBy = []
      conversation[message.channel_url].push(messageObj);
    }
  }
}

This part is a little different from the other two. You can use the import endpoint in TalkJS to bulk import messages from conversations. But before that, you must prepare your data. The structure of the data is as shown below.

[
  {
    "converstationId": [
      { message_1 }, { message_2 }, { message_3 }
    ]
  },
  {
    "converstationId": [
      { message_1 }, { message_2 }, { message_3 }
  }
]

The first three lines of code are similar to the previous programs where we read the exported data and store it in a constant. Then, we create a constant called uniqueConversations to store the unique IDs of the Channels from Sendbird. We use a Set because it only stores unique values.

In the next for loop, we create a JSON array containing the conversation IDs as keys. The JSON array currently looks as shown below:

[
  {
    "converstationId": []
  },
  {
    "converstationId": []
  }
]

The last part consists of two for loops. One that iterates over the JSON array shown above and the other that iterates over our messages. Then, we check if each message’s conversation ID is equal to the key of the object we are currently in. If they match, we populate it with the required values for TalkJS. The timestamp field helps in keeping the order of the messages intact when importing it from Sendbird to TalkJS. We have used the message.type MESG from Sendbird to map it to the UserMessage type in TalkJS.

function importMessages(conversationJsonArray) {
  for (let conversation of conversationJsonArray) {
    instance.post(`/v1/tAU5JKLC/import/conversations/${Object.keys(conversation)[0]}/messages`, [...conversation[Object.keys(conversation)[0]]])
  }
}
importMessages(conversationJsonArray);

Finally, we invoke the importMessages function passing in the constructed JSON array. We iterate through each of the conversation and pass the entire messages array inside it to the API.

Opening the application in TalkJS

Now, we can create an application in TalkJS and then view the imported data. You can also go to your TalkJS dashboard and navigate to Activity → Conversation History and then select the newly created conversation. It shows you the users and chats in a TalkJS-style UI.

In our sample application, we are going to add their user IDs and names to set them up quickly. When using it in production, you can use the TalkJS APIs to retrieve users, conversations, messages, etc. There are three available UI modes for TalkJS. One is the inbox, the second is the chatbox and the last one is the popup widget. You can read more about them here. We are using the chatbox widget in this example. You can read the Getting Started section to quickly set up your app in TalkJS. Then copy the code below in your script file to retrieve the conversation we exported from Sendbird.

Talk.ready.then(function () {
  var me = new Talk.User({
    id: "523915",
    name: "Mathew Jacob"
  });
  var other1 = new Talk.User({
    id: "523916",
    name: "Morgan Stanley"
  });
  var other2 = new Talk.User({
    id: "523917",
    name: "Shane Riley"
  });
  var other3 = new Talk.User({
    id: "523918",
    name: "Clyde Howell"
  });
  window.talkSession = new Talk.Session({
    appId: "YOUR_APP_ID",
    me: me
  }); 
var conversation = window.talkSession.getOrCreateConversation(
    "SENDBIRD_CONVERSATION_ID"
  );
  conversation.setParticipant(me);
  conversation.setParticipant(other1);
  conversation.setParticipant(other2);
  conversation.setParticipant(other3); 
var chatbox = window.talkSession.createChatbox(conversation);
  chatbox.mount(document.getElementById("talkjs-container"));
});

As mentioned earlier, you may want to use an API to retrieve the names and IDs of users. But in this example, we have hardcoded them based on the values we imported. Once all this is set up, you should have a chatbox UI on your browser with the exported chats from Sendbird. The entire source code for this example is available in our Github repository.

Reporting messages in TalkJS

Aswin Rajeev — Fri, 01 Jul 2022 16:51:25 +0000

TalkJS now supports adding custom actions to chat messages. This opens up possibilities to add support for actions like reporting, deleting, or liking a message. In this how-to, we’ll set up a custom action to report a message in TalkJS using this new feature. Note that the feature by itself does not report a message but provides you with the custom action and its handler. You must invoke a service in the backend that does the reporting functionality based on your business requirements.

Setting up a Report Action

To add a report action, you must log in to your TalkJS account. Click on Roles from the top navbar and select the role for which you want to add the action. For this how-to, we are adding it to the default role. Scroll down to the Custom actions section and enter the name as report and label as Report. The name you give the action will be included in the event that is triggered when the user clicks the action, whereas the label will be shown to the user. In the “Which messages” dropdown, select All, and click on Add action.

The action should look as shown in the image above. Click Save all roles to add the action to the role. As mentioned, the action is available across all roles once you create it, and you must disable them according to your requirements. To disable an action for a role, select the None option from the Which messages dropdown.

Handling the Action

Now that we’ve set up the action, we’ll want to run some code when the user clicks it. To add an event handler, you use the chatbox object (or the inbox or popup objects), and its onCustomMessageAction method. When the user clicks the action’s menu item, our callback is called with an event object containing details about the message. For this how-to, we’ll send a request with this information to the backend.

  chatbox.onCustomMessageAction("report", (event) => {
    let reportAction = {
      id: event.message.id,
      message: event.message.body,
      senderId: event.message.senderId,
      senderName: event.message.sender.name,
      timestamp: event.message.timestamp,
    };
    console.log(event);
    fetch("http://127.0.0.1:3000/reportMessage", {
      method: "POST",
      body: reportAction,
    });
  });

The Backend

We are not going to delve into too many details regarding the backend since it varies according to various requirements. To get you started, you can set up a Node server, listening for POST requests. For the sake of testing it out, you can use the nodemailer module and a fake SMTP server like MailTrap to send and receive emails. If a message is reported, it is best to send it to an administrator who can then review the contents of the message and who it was sent from. Further decisions can be based on company policy and investigations.

Next Steps

After using a fake SMTP server and the details we sent from the frontend, an administrator can receive something like this. Apart from a simple email, you can add a queue to which all the reported messages come in, and the administrator can look at them individually. You can also give capabilities like banning users and deleting them if found to be fraudulent, spam, or something else altogether. Again, all of this depends on the backend system you build. We can’t wait to see what you guys come up with our custom actions.

How to add chat into a NodeJS app with TalkJS

Aswin Rajeev — Wed, 09 Mar 2022 09:02:43 +0000

This article is another entry in our series about integrating the TalkJS chat API with different backends. Today, it is all about shipping a full-fledged chat feature for any NodeJS app. Similar to the previous articles you can find here, we set up a NodeJS server that consists of specific endpoints to get user data as well as store user data and then use this to initialize a chat. The chat uses the same data as the previous articles, so it is very easy to relate. The entire source code is always available on GitHub.

NOTE: This is a barebones example of integration and is to help you get started. When using in a production setting, ensure that users are authenticated and authorized to use the services. We are using an embedded database, which is only for the scope of this tutorial. For production scenarios, you must use a full-fledged database.

Installing the dependencies

To create an empty npm project, use the command npm init -y. The argument -y sets defaults for the parameters inside package.json. Once created, you can start downloading the dependencies. Make sure you add the parameter "type":"module" inside the package.json file to use ES6 style import statements.

We have 4 dependencies that we need for this demo project. They are cors, body-parser, express, lowdb. Express is our go-to choice for creating APIs with NodeJS and body-parser automatically parses your request so that it becomes easy to handle them in our code. LowDB is an embedded database, similar to the ones we used in our Spring Boot and Flask tutorials, but here it is stored in a JSON file. CORS is to enable cross-origin resource sharing.

import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import { LowSync, JSONFileSync } from 'lowdb';

After installing them, create a file called server.js and import them into the application.

LowDB – Easy to use, embedded database for JavaScript

LowDB is an open-source embedded database for JavaScript, and their GitHub page has very comprehensive documentation on how to get started with examples.

const adapter = new JSONFileSync('file.json');
const db = new LowSync(adapter);
db.read();
db.data ||= { users: [] };

To create a simple JSON database, we use the JSONFileSync function and pass in the required filename. If it is not present, LowDB creates it for you. We then pass that to the LowSync method to get an instance of the database in memory. Note that the Sync in the functions means synchronous. There are also asynchronous variants of these functions. By default, we create an empty array of users inside the database.

Creating the APIs

Before creating the APIs, we must initialize our Express application and configure body-parser. For that, we use the below code.

const app = express();
const port = 3000;
app.use(cors());

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

Once that is set, we are good to start creating our APIs. As usual, we have one API for creating the user and one for getting the user data to our frontend.

Create User API

Creating a user is a POST request. We receive all the parameters from the request body and set it to variables. To make it shorter, we can directly assign them when we push it to the database as well.

app.post('/createUser', (req, res) => {
    const id = req.body.id;
    const name = req.body.name;
    const email = req.body.email;
    const photoUrl = req.body.photoUrl;
    const role = req.body.role;
    console.log(id, name, email, photoUrl, role);
    db.data.users.push({
        id: id,
        name: name,
        email: email,
        photoUrl: photoUrl,
        role: role,
    });
    db.write();
    res.status(200).send('User created successfully');
});

Once all the data is ready, we use the statement, db.data.users.push and pass in an object with the values. This does not persist in the file, so we finally need to use the db.write() method.

Get User API

This is a much easier API to get the value of the user. We pass in the id in the URL and then retrieve the record from our JSON file with the id. We use the find method and pass in an arrow function to go through each entry and retrieve the record.

app.get('/getUser/:id', (req, res) => {
    const id = req.params.id;
    let record = db.data.users.find(p => p.id === id);
    if (!record) {
        console.log("No data found!");
    } else {
        console.log("== Record found ==");
        console.log(record);
        res.status(200).send(record);
    }
});

Once retrieved, we send the record to the frontend, where it displays the user information in the chat.

Conclusion

We use the same code as we did for the previous articles for the front end. The only change required is for the getUser API that needs the userId in the following format.

http://127.0.0.1:3000/getUser/1 instead of http://127.0.0.1:8080/getUser?id=1

Once you make that change and deploy the frontend, it should pull the information from the server as long as the data is present. To add data, you can use the /createUser API. You can check out the entire source code at GitHub. Until the next tutorial, happy coding!

How to build chat into a Flask App with a chat API

Aswin Rajeev — Fri, 04 Feb 2022 09:50:48 +0000

Last time, we took a look at adding chat to a Spring Boot app with the help of the TalkJS Chat API. This time, we will be reusing the same frontend code to add chat to a Flask app written in Python. This app is more or less similar to the previous one in terms of experience, but it uses Python. The same rules apply to this one as well. Ensure that you don’t replicate a similar setup for production since we are not implementing any authentication or authorization. This is a simpler example that showcases the integration between the two. The entire source code is available on GitHub.

Setting up a Python-Flask Application

You can install Python from their official website, but if you’re on Windows, the Windows Store also has Python. You can find it here. There are two additional dependencies that you need. One is flask and the other is flask_cors. You can install these using pip.

pip install -U flask-cors
pip install Flask

Note that flask_cors is only needed for allowing requests from the same host. We are also using sqlite3, but it comes out-of-the-box with Python.

Setting up the `USERS` table in SQLite

To setup a table in sqlite3 is very straightforward. You open a connection to the database. Then, execute a normal SQL statement using the execute() method on the connection. Note that we must use the execute() method for every statement execution.

conn = sqlite3.connect('test.db')
conn.execute('''CREATE TABLE IF NOT EXISTS USERS
        (ID INT PRIMARY KEY NOT NULL,
        DP CHAR(100) NOT NULL,
        EMAIL CHAR(100) NOT NULL,
        NAME CHAR(50) NOT NULL,
        ROLE CHAR(20) NOT NULL);''')
print("Table created successfully");
conn.close()

Once complete, close the database connection. Now that we have our table, we must set up the endpoints to insert users and retrieve them to the frontend.

Setting up the endpoints

Similar to the Spring Boot app, we have two endpoints, createUser and getUser. The first one is to create the user so that we can use them in the frontend, and the second one is to retrieve the user. We have given them a role attribute so that we can even theme the chat depending on their role in the future when they log in.

@app.route('/createUser/', methods=['POST'])
def createUser():
    conn = sqlite3.connect('test.db')
    requestData = request.json
    id = requestData['id']
    name = requestData['name']
    dp = requestData['dp']
    email = requestData['email']
    role = requestData['role']
    conn.execute("INSERT INTO USERS (ID,DP,EMAIL,NAME,ROLE) VALUES (?,?,?,?,?)",(id, dp, email, name, role));
    conn.commit()
    conn.close()
    return "User Created", 200

The first line denotes the endpoint and the methods you can use. Here, it is just POST. We open a connection to our test.db and retrieve the data from the request using Flask’s inbuilt methods. Once we have all the fields from the request, we execute an INSERT statement. Once the execution is complete, we commit and close the connection and return a 200 response with the user object.

The next endpoint is to retrieve the user. This API fetches the user based on the user id that is sent from the frontend. We use Flask’s inbuilt args method to get the query params and then retrieve the id from it.

@app.route('/getUser/', methods=['GET'])
def getUser():
    requestData = request.args
    id = requestData['id']
    conn = sqlite3.connect('test.db')
    cursor = conn.execute("SELECT * from USERS WHERE ID = ?", id)
    user = {
    'id': "",
    'name': "",
    'dp': "",
    'email': "",
    'role': ""
    }
    for row in cursor:
    user['id'] = row[0]
    user['dp'] = row[1]
    user['email'] = row[2]
    user['name'] = row[3]
    user['role'] = row[4]
    conn.close()
    response = jsonify(user)
    return response, 200

Once we get the id, we open up a connection to the database, and execute a SELECT statement passing the id. The difference here is that we get a cursor returned from the SELECT statement and we must query each row in it to get the actual data. There’s an empty user object to which we will append the retrieved data and once that’s done, we return it to the frontend with a 200 response.

Integrating with the frontend application

Refer to our previous article here to set up the frontend application. The source code is available in this GitHub repository. You can also look at our Getting Started guide to set up an application quickly. Once you have that setup, you should have a fully running chat application that retrieves user details from a Flask API and a database.

How to build a chat into a React app with TalkJS

Aswin Rajeev — Tue, 02 Nov 2021 12:40:34 +0000

In today’s tutorial, we will add a group chat for students to an existing React application using the TalkJS Chat API. As a pre-requisite, you will need to sign up with TalkJS and get your APP_ID from the Dashboard which will be used to identify your account. For the sake of this article, we have created a fictitious application with React that will be used by students from a specific university to view live lectures. The live lectures will be supplemented with a group chat feature that lets the students ask questions to the lecturer. The source code for the entire project can be downloaded from GitHub.

Application Overview

This fictitious application is run by John Doe University on their intranet to provide live lectures to its students. Since it is on their intranet, students are already expected to be authenticated with the university. Once they land on the main page, they are expected to enter their student ID, name, and email address, which will then take them to the live lecture. For the sake of simplicity, the lecture we have used is a video from YouTube and all students will be redirected to the same lecture. The article will focus more on the integration of the group chat to an existing React application.

Adding TalkJS to a React application

To add TalkJS to your existing React application, use the following command:
npm install talkjs –-save
If you are using the yarn package manager, you should use the command yarn add talkjs.
To use it in the component of your choice, import TalkJS using the following statement.
import Talk from "talkjs";

Component Walkthrough

The application has two main components. One is the Home component and the other is the VideoLecture component. The Home component contains the form that takes the information from the student and then routes them to the VideoLecture component. The handleSubmit() method is of interest here as it handles storage of the student details as well as the redirection.

handleSubmit(event) {
  localStorage.setItem("id", this.state.id);
  localStorage.setItem("name", this.state.name);
  localStorage.setItem("email", this.state.email);
  history.push("/viewLiveLecture");
  event.preventDefault();
}

React’s thin history library is used here to perform the redirection. All the details for the routes are mentioned in the Routes component. The details entered by the user are stored in the local storage for ease of access across all components.

export default class Routes extends Component {
    render() {
        return (
            <Router history={history}>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/home" exact component={Home} />
                    <Route path="/viewLiveLecture" component={VideoLecture} />
                </Switch>
            </Router>
        )
    }
}

The majority of the logic for TalkJS is housed inside the VideoLecture component. The entire code is present inside the constructor. We will take a look at it section by section.

Retrieving student details

this.id = localStorage.getItem("id");
this.userName = localStorage.getItem("name");
this.emailId = localStorage.getItem("email");

We create three variables to hold the user id, user name, and email address. This is accessed from the local storage.

Creating the Users and the TalkJS Session

   Talk.ready
      .then(() => {
        const me = new Talk.User({
          id: this.id,
          name: this.userName,
          email: this.emailId,
          photoUrl: `https://randomuser.me/api/portraits/men/${this.id}.jpg`,
          role: "default",
        });
        const other = new Talk.User({
          id: "1",
          name: "Prof. George Larry",
          email: "george@larry.net",
          photoUrl: "https://randomuser.me/api/portraits/men/83.jpg",
          role: "default",
        });
        if (!window.talkSession) {
          window.talkSession = new Talk.Session({
            appId: "YOUR_APP_ID_HERE",
            me: me,
          });
        }

We use the then() function on the Talk object which can be chained multiple times and returns a Promise. The first thing to do is to set the users in the conversation. Note that the other user here is always the professor who is hosting the lecture and the current user will be the student who enters the live lecture room.
To identify the student, we set their id, username, and email address from what they enter on the Home page. This is also used to retrieve their profile picture. The last step here is to create a session using the APP_ID, from the TalkJS dashboard, and the current user.

Creating the Conversation object

  const conversation = window.talkSession.getOrCreateConversation("999");
  conversation.setAttributes({
    subject: "Robotics: 101"
  });
  conversation.setParticipant(me);
  conversation.setParticipant(other);
  this.chatbox = window.talkSession.createChatbox();
  this.chatbox.select(conversation);
  this.chatbox.mount(this.container);
  })
  .catch((e) => console.error(e));

Once the session and users are created, we will create the conversation object. We are assigning a static id for the conversation here so that all students log in to the same room. In a real use case, the conversation id can be the lecture’s unique key which will then be mapped to all the students taking that module.
To make the subject appear at the top, we have set the attribute ‘subject’ on the conversation object. Again, in a real scenario, this can be retrieved from the database or service. We then set the participants of the conversation and create a chatbox. This is then mounted inside the component shown below.

<div
  className="talk-js-chatbox flex-child"
  ref={(c) => (this.container = c)}
></div>

We have themed the chat a little so that it stays consistent with the university website and looks more like a group chat in a live lecture. Since this article is more about adding group student chat into an existing React application, we will not discuss about theming here. You can check out these articles for reference.

TalkJS UI Customization Tutorials

Here are some additional tutorials on how you can customize the TalkJS UI using our powerful Theme Editor.

Wrapping up

With that, we have successfully added TalkJS to our existing React application. With very minimal code changes, we were able to add a fully working group chat to our fictitious university’s live lecture. Group Chats in TalkJS supports up to 20 users in the Basic plan and up to 40 users in the Growth plan. If your use case requires more than 40 users, you can also go for the Enterprise plan. You can access the complete source code on GitHub, read more about Group Chats, and also about the versatile Theme Editor on TalkJS.

How to build a chat into an Angular app with TalkJS

Aswin Rajeev — Fri, 01 Oct 2021 10:03:15 +0000

In today’s tutorial, we will take a look at how we can integrate the TalkJS Chat API into an existing Angular application. AllParts is an imaginary e-commerce website that specializes in automobile spare parts and accessories. They have an Angular application that is integrated with Firebase. It allows users to authenticate themselves using Google and then purchase spare parts and essentials for automobiles.

With TalkJS, AllParts have implemented a buyer-seller chat that the customers can use to resolve queries, get recommendations or ask general questions. It is not a full-fledged application but goes well with this tutorial. You can set up your project from GitHub before getting started and if you’ve already done that, let’s get going.

Adding TalkJS to an Angular application

To add TalkJS to your Angular application, use the following command:
npm install talkjs –save
This will add the TalkJS dependency to your current project. Next, we will add a component and a service to the project. A service in Angular is used to separate out the component code from functions that are used commonly and also to keep the code modular and scalable. To create a new service, we use the following command:
ng generate service talk
There is also a shorthand equivalent of this command which is ng g s talk. This will create a new service called TalkService. Once that is created we will also create a component for our buyer-seller chat. To create a new component, we will use the following command:
ng generate component talkjs
Just like before, the shorthand equivalent of this command is ng g c talkjs. Once these prerequisite steps are out of the way, we can get started with the actual integration.

Application walkthrough

Before we integrate TalkJS into our application, let’s take a look at the existing application itself. It is intended to be an e-commerce website specializing in automobile spare parts and accessories. Customers can sign in with Google and view products from different manufacturers which they can purchase. The application has a home page with a simple banner and also the products page which only logged-in users can access.

Using TalkJS to add a buyer-seller chat

Our service code looks like this right now.

@Injectable({providedIn: 'root'})
export class TalkService {
  private currentUser: Talk.User;
  constructor() {}
}

We have added a variable for the current user which is of the TalkJS User type. We will create 4 methods inside it. They are given below.

Method 1: async createUser(applicatonUser: any)

The code for this method is given below.

async createUser(applicationUser: any) {
    await Talk.ready;
    console.log(this.user$);
    return new Talk.User({
      id: applicationUser.id,
      name: applicationUser.username,
      photoUrl: applicationUser.photoUrl,
      role: applicationUser.role
    });
  }

This method is used to map the users in the application to a TalkJS User object. This allows TalkJS to identify the users in the system. It also allows keeping track of their conversations. In our case, the user logged in through Google will be mapped to this object so that his name and photo appear inside the chatbox.

Method 2: async createCurrentSession()

This method is used to initialize the user’s current active session and also authenticate TalkJS. TalkJS has an appId that is assigned to each account which is used to authenticate it. To find your appId, simply login to your TalkJS dashboard and you should see it under the Settings tab. You have different appIds for your test environment as well as your live environment.

  async createCurrentSession() {
    await Talk.ready;
    const user = {
      id: this.user$.uid,
      username: this.user$.displayName,
      email: this.user$.email,
      photoUrl: this.user$.photoURL,
      role: 'default'
    };
    this.currentUser = await this.createUser(user);
    const session = new Talk.Session({
         appId: 'YOUR_APP_ID_HERE',
         me: this.currentUser
    });
    return session;
  }

This is also where we initialize our currently logged-in user. If you look at the code above, you can see that we have retrieved the current user using this.user$ and the attributes from it match the one returned from Google after successfully signing in.

Method 3: async getOrCreateConversation(session: Talk.Session, otherApplicationUser: any)

This function creates the conversation between the current user and the other user and also links it up with the session that was created before. This is where you set the participants for the conversation. System messages in TalkJS can also be set up here by adding the conversation.setAttributes() method and setting an array of strings to a property called welcomeMessages.

  private async getOrCreateConversation(session: Talk.Session, otherApplicationUser: any) {
    const otherUser = await this.createUser(otherApplicationUser);
    const conversation = session.getOrCreateConversation(Talk.oneOnOneId(this.currentUser, otherUser));
    conversation.setParticipant(this.currentUser);
    conversation.setParticipant(otherUser);
    conversation.setAttributes({
      welcomeMessages: ["Welcome to AllParts Support Chat!", "Leave your message here and one of our support agents will assist you soon."]
  })
    return conversation;
  }

Method 4: async createPopup(session: Talk.Session)

The last method is to create a popup chat towards the right bottom corner of our screen. The popup UI provided by TalkJS out-of-the-box is really handy in scenarios like this. If you require a full-fledged chatbox or an inbox, they are also provided within TalkJS.

  async createPopup(session: Talk.Session) {
    const supportUser = {
      id: 5,
      username: 'Sebastien',
      email: 'sebastian@allparts.com',
      photoUrl: 'https://randomuser.me/api/portraits/men/71.jpg',
      role: 'default'
    };

    const conversation = await this.getOrCreateConversation(session, supportUser);
    return session.createPopup(conversation, { keepOpen: false });
 }

In the code above, the support user is hardcoded, but when you have your live application, you can use the credentials of actual people that the users can talk to.

TalkJS Component Walkthrough

We have completed writing up all our helper methods, now we just need to set up our TalkJS component that will contain the popup chatbox. The TalkjsComponent consists of just a single line that has a div with an id of talkjsContainer. It also has the *ngIf directive that checks if the user is logged in or not. For unauthenticated users, the chatbox will not appear.

<div *ngIf = "auth.user$ | async" #talkjsContainer style="height: 500px"></div>

Inside the TypeScript file for the component, we have the following code.

export class TalkjsComponent implements OnInit {
  private popup: Talk.Popup;
  private session: Talk.Session;
  @ViewChild('talkjsContainer') talkjsContainer!: ElementRef;
  constructor(private talkService: TalkService, public auth: AuthService) {
  }
  ngOnInit(): void {
    this.createPopup();
  }
  private async createPopup() {
    const session = await this.talkService.createCurrentSession();
    this.popup = await this.talkService.createPopup(session);
    this.popup.mount(this.talkjsContainer.nativeElement);
  }
}

We use the @ViewChild decorator to access the HTML element from the component code to mount our chatbox. We have the AuthService which is used for authenticating the user. The component implements the OnInit interface which provides the lifecycle hook of ngOnInit(). This gets triggered after component initialization and this is where we call the createPopup() method to create the chatbox and mount it to our component.

Full Demo

Below is a full demo of the application. We can see that the user is logged in and his username is displayed at the top. For authenticated users, the chatbox option is available at the bottom right corner and they can also view the products.

Wrapping Up

There you have it. We have successfully integrated TalkJS to our existing Angular application called AllParts. We didn’t go over the Angular code much in-depth and the tutorial assumes that the user has some basic knowledge of Angular. The entire code is available on GitHub. Make sure you create a Firebase project on Firebase Console and use the credentials provided there to authenticate your application with Firebase.

How to build a chat similar to Upwork with TalkJS

Aswin Rajeev — Tue, 03 Aug 2021 13:41:15 +0000

We have been pushing the boundaries of the TalkJS Chat API for a while now. In our previous article, we looked at how to make a Twitter DM lookalike using the TalkJS Chat API and we’ve also seen another article on how to integrate Voice and Video calls in TalkJS using the Daily API. Today, we will be creating a chat similar to Upwork with TalkJS. For those of you who are not familiar with Upwork, it is the world’s largest freelancer marketplace and is even listed on NASDAQ.

Things to do

The Upwork chat looks as shown below. We have quite a few changes to be made here. Let’s review all of them first.

Change the header background to white, correct the title and subtitle sizes
Remove avatar from header
Add a new section under the header to view the contract
Change user message styling
Add user’s name above the message
Add timestamp to the right end of the message
Add system messages to approve milestones, end contract, etc
Change color scheme all over

Before going over all the changes, it is important to have a working inbox ready. You can check out our Getting Started guide to set this up in no time. Unlike the previous articles, you need to make one small change to the talkjs-container. Remove the existing styles from the HTML and add the following.

#talkjs-container{
    margin-top: 7rem;
    height: 600px;
}

The end result of all these changes looks like this. As you can see, we’ve been able to achieve a near lookalike of the Upwork chat using the TalkJS Chat API and its powerful Theme Editor.

ChatHeader

Start off by deleting lines 38-40. This will remove the avatar from the header. After the <header> tag, add the following lines of code. This is to add a new section under the header to view the contract. It will be an empty link as of now but can be populated with the data once it is available.

<div class = "contract">
    <a href = "#" class = "contract-link">View Contract</a>
</div>

Change the .header class’s CSS as shown below:

.header {
    display: flex;
    align-items: center;
    height: 75px;
    background-color: #FFF;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    font-size: 22px;
}

For the new contract div and the contract-link class, add the following styles.

.contract{
    border-bottom: 1px solid #e0e0e0;
    height: 50px;
    padding-left: 25px;
    padding-top: 15px;
    }
.contract-link{
    font-size: 14px;
    text-decoration: none;
    color: #14a800;
    font-weight: 500;
}

For the .title class remove the font-weight: bold style and add a padding-left of 15px and also add a font-size of 22px.

UserMessage

Open up the UserMessage component and replace lines 67-71 with the following:

<div t:if="{{ sender.id != previousSenderId and conversation.others.length > 0 }}"
    class="message-author"
    style="color: #000">
   {{ sender.name }}
</div>

This will ensure that the user’s name will be displayed above every message and the text color will be black. From the <MessageBody> tag remove timestamp, floatTimestamp and showStatus attributes. After the <div> on line 74, add the following bit to display the timestamp.

<div class = "timestamp {{ body.type }} {{ sender.id == previousSenderId | then: 'previous-same' }}">
    {{ timestamp |  date: "%l:%M %p"}} 
 </div>

For the .message-row class add a margin-bottom of 0.5rem. For the .message-row.previous-same class change the margin-top to 0.1rem. Delete the styles from inside the .message-row.by-me class.
Now, let’s alter the message styles. Use the following styles for the .message class. This will remove all the borders and background colors from both the user’s and the other user’s messages.

.message {
    white-space: normal;
    overflow: hidden;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    background-color: #FFF;
    color: #000;
    font-size: 14px;
}
.by-me .message {
    color: #000;
    /* Space between avatar and the message */
    margin-right: 0.25rem;
}

For the .by-me.previous-same class, we need to add a padding-left of 3rem instead of a padding-right. For the message-author class we need to completely replace all the existing styles. Use the following:

.message-author {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 8px;
    padding-left: 12px;
}

Add the following styles for the timestamps.

.timestamp{
    margin-left: auto;
    padding-top: 2rem;
    margin-right: 10px;
    font-size: 12px;
    font-family: "Helvetica";
    color: #000;
}
.timestamp.previous-same {
    padding-top: 2px;
}

SystemMessage

We will be using the TalkJS REST API to send system messages that show different stages of a contract on Upwork. The awesome thing with these System Messages is that they allow formatting within them and we will show you how that works in just a second.
Select the SystemMessage component from the left side menu and add the following line after the <MessageBody>. Don’t forget to delete the timestamp and floatTimestamp attributes from the <MessageBody> tag.

<span><a class = "view-details" href = "#">View Details</a></span>

Now add the following styles for the .message and the .view-details class.

.message {
    line-height: 22px;
    white-space: normal;
    margin-left: 50px;
    overflow: hidden;
    background-color: #fff;
    color: #414649;
    border-left: 5px solid #F2F2F2;
    font-size: 14px;
}
.view-details{
    margin-left: 15px;
    font-size: 13px;
    font-weight: bold;
    color: #14a800;
    text-decoration: none;
}

To send System Messages using the TalkJS REST API, we need to use the following URL.
https://api.talkjs.com/v1/{appI}/conversations/{conversationId}/messages
It is a POST request and the request body should be as follows:

[
  {
    "text": "Jack Hendlin approved the milestone\nMilestone 1: \"How to create direct messages like on Twitter with the TalkJS chat API\"\nDue: Friday, July 23, 2021\nAmount paid: $200.00",
    "type": "SystemMessage"
  }
]

In the above JSON payload, you can see that we have added newlines using the \n escape sequence within the payload and this will be rendered perfectly inside TalkJS. Based on the different stages of the contract, we can change the contents of the message and it will be rendered accordingly.

ConversationListHeader

Remove lines 15 and 16 to remove the desktop toggle as well as the heading. This will give us a plain header on the left-hand side. Change the style of the .conversation-list-header class to the following

.conversation-list-header {
    position: relative;
    padding: 15px 8px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #F9F9F9;
    height: 5.6rem;
}

Layout

Global

In the global sub-section of layout, remove the Open Sans font family.

Panels

Set the borderRadius as 0px and borderColor as #e0e0e0 in the panels sub-section.

Inbox conversation list panel

Change the width, maxWidth and minWidth to 300px for the inbox conversation list panel.

Inbox chat panel

For the inbox chat panel, change the width and maxWidth to 1200px.

Panel footers

There’s only one change here and that is to change the backgroundColor to #F9F9F9.

Message field

For the message field, we need to set the borderColor to #EFEFEF and the borderRadius to 0px.

Highlights

Change the backgroundColor to #F9F9F9 and the color to #000 (black).

Wrapping Up

That’s it for this one. We hope you had a great time coding this one up. You may be already aware of the strength of the Theme Editor on TalkJS, and we’re just getting started. Whatever your application may be, TalkJS can be themed according to it with all the identical functionalities. So, until the next one, happy coding!

How to create direct messages like on Twitter with the TalkJS Chat API

Aswin Rajeev — Wed, 28 Jul 2021 11:41:46 +0000

Would you like to build a DM functionality of one of the most popular social media platforms? If you answered yes, you have come to the right place. We will look at how we can implement the direct messaging functionality of Twitter with the TalkJS Chat API. So far, we’ve seen how powerful the Theme Editor in TalkJS is by creating messaging features like on WhatsApp, Discord, Slack, LinkedIn, and more being implemented with ease. Today, we are going to be taking it to the next step. Here is a snapshot of what we will try and clone.

Things to do

Change the header color to white and center the image and the user’s name
Change the style of the message bubbles
Change the color of the user’s message as well as the other’s message
Add timestamp under each message
Change the style of the message field
Show avatar in chat for the other user only

There’s also a Desktop/Web version of the chat, which we will be implementing using the Inbox mode from TalkJS. We will be making some more edits over the ones mentioned above to achieve this, and we will go over this in the subsequent sections. The end product of the mobile UI looks like this after theming with the TalkJS Theme Editor. It is nearly identical to the Twitter chat we saw above. Now, let’s see how we can achieve this.

ChatHeader

The Twitter chat header has the user’s name and avatar in the center. The background color is white and the text color is black. The .header class should be edited as given below.

.header {
    display: flex;
    height: 6rem;
    background-color: #e7ecee;
    flex-shrink: 0;
    border-bottom: 1px solid #C5CFD6;
    background-color: #FFF;  
    padding: 0px;
    margin: 0px;
}

After that, we need to edit two more classes: .image and .info. These need to have the following changes.

.image {
    width: 45px;
    text-align: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
    position: absolute;
    margin-left: 37%;
    margin-top: 0px;
}

.info {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    position: absolute;
    margin-left: 34%;
    margin-top: 15%;
}

Once you have made those changes, the header should look close to the Twitter DM header. We’ll move to the UserMessage component next, which has the majority of our changes as usual.

UserMessage

The first change we need to make here is for the avatars in the chat. Replace lines 60-62 with the following.

<Avatar t:if="{{ sender.isMe == false and sender.id != previousSenderId }}"
photoUrl="{{ sender.photoUrl }}"
/>

This will ensure that the avatar is displayed only for the other user and only for their first message. To remove the timestamp and status ticks from the message, we need to remove the timestamp, floatTimestamp, and showStatus properties from the <MessageBody> element.
Next up, we need to add a timestamp under the message. This timestamp has subtle differences for the user as well as the other user, therefore, we need two style classes and two components. Add the following lines below the <MessageBody> element to get the timestamp.

<div t:if="{{ sender.isMe == false }}" 
class = "timestamp {{ sender.isMe | then : 'by-me' | else: 'by-other' }}"> {{ timestamp |  date: "%l:%M %p"}} <StatusTicks/>
</div>
<div t:if="{{ sender.isMe == true }}" 
class = "timestamp {{ sender.isMe | then: 'by-me' | else: 'by-other' }}">
{{ timestamp |  date: "%l:%M %p"}} <StatusTicks/>
</div>

Change the margin-bottom for the .message-row class from 0.5rem to 0.1rem. We now need to alter the .message and .by-me .message classes. Make the following changes for the two.

.message {
    white-space: normal;
    overflow: hidden;
    border-radius: 1rem 1rem 1rem 0px;
    border-width: 1px;
    border-style: solid;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 12rem - 0.25rem - 0.25rem);
    border-color: #E7ECEE;
    background-color: #EAEEF0;
    color: #000;
}

.by-me .message {
    border-color: #1E60E1;
    background-color: #1E60E1; 
    color: #fff;
    /* Space between avatar and the message */
    margin-right: 0.25rem;
}

Since we don’t have the avatar for the user inside the chat, remove the padding from the .by-me.previous-same class. For styling the timestamps, add the following two classes.

.timestamp.by-me{
    font-size: 10px;
    padding-left: 3.2rem;
    margin-left: 67%;
}
.timestamp.by-other{
    font-size: 10px;
    padding-left: 3.2rem;
}

Your chat should now look very similar to the Twitter DM. We just need to make a few more changes in the layout component to make it even better.

Layout

Chatbox

Change the maxWidth from 420px to 350px

Panel Footer

Change the background color to #FFF (white)

Message Field

Change the borderRadius from 4px to 20px. Set the borderWidth as 0px and borderColor as #FFF. Next, set the background color to #EAEEF0.

Highlights

Lastly, change the highlights’ background color to #1CA1F2.

Desktop/Web UI

If you want a Desktop/Web version of the Twitter chat, you will have to make a different set of changes. For example, the desktop/web version has the user’s name aligned to the left. They also have their @username mentioned below their actual name on the header. This can only be static as of now with an additional element in the HTML. The desktop/web version of the Twitter DM looks like this. We will try and implement the same using our TalkJS Inbox with some additional changes over the ones we mentioned.

ChatHeader

Add an HTML element after line number 48 to add the user’s @username. We will give it a class of tag as well.

<div class="tag">@alicejohn</div>

Give the tag class the following styles.

.tag{
    font-size: 12px;
    color: #5F6165;
}

Now, if the API gives the option to add a user’s username apart from their full name, we can just replace it with the value from the API rather than the static value mentioned above. Now change the header class’s style to the following. Do not change any of the default styles.

.header {
    display: flex;
    height: 4rem;
    background-color: #FFF;
    flex-shrink: 0;
    border-bottom: 1px solid #E6E6E6;
}

ConversationListHeader

Remove line number 15 to delete the desktop toggle and change the label to ‘Messages’. For the .conversation-list-header class change the padding to 15px 12px and the background-color to #FFF. Now, scroll down to the .toggle-label class and replace the contents with this.

.toggle-label {
    float: left;
    padding-top: 7px;
    font-style: italic;
}

Layout

Panels

In the panels sub-section, change the borderRadius to 0 and the borderColor to #DDDDDD.

Inbox conversation list panel

In this sub-section, change the width to 100%, maxWidth and minWidth both to 320px, borderRadius to 0, borderWidth to 1px and borderColor to #DDDDDD.

Inbox chat panel

For the Inbox chat panel, change the width to calc(70% - 1rem), maxWidth to 480px and set the marginLeft as 0px.

Highlights

We’re at the end now. Change the backgroundColor of the highlights to #EFF3F4 and color to #000 and your inbox should look nearly identical to the Twitter DM.

Wrapping Up

There you have it. We have successfully managed to clone the Twitter direct messages interface from both web/desktop as well as mobile devices. The versatility of the TalkJS Theme Editor allows us to style our chat very efficiently and we have been proving it time and again through our series of theming how-tos. Until the next one, happy coding!

Build a messaging inbox similar to Airbnb by using TalkJS

Aswin Rajeev — Mon, 12 Jul 2021 11:53:00 +0000

Imagine you are starting your very own marketplace start-up. Something along the lines of Airbnb. You would need a real-time chat that allows your users to talk to each other. Airbnb has a very simple and easy-to-follow interface for its chat. Why not build a lookalike of the Airbnb chat using the TalkJS Chat API? The Theme Editor has just added some additional functionality which we will use to achieve a near lookalike of the Airbnb chat. Let’s get started!

Things to do

As usual, you will need to follow the Getting Started guide to set up a basic inbox. The guide is self-explanatory and you should be up and running in no time. Once that is set up we can start styling the chat. We need to make the following changes.

Change header color to white (#FFF)
Remove avatar from the header
Add a faint gray border at the bottom of the header
Remove the desktop notifications toggle from the inbox list panel header and change its color to white
Add the user’s name near the avatar inside the chat
Add timestamp next to the user’s name
Change background to white for the panel footer
Make the message field more rounded
Add a couple of system messages

Login to your TalkJS account and create a new theme called ‘Airbnb’. Then select the ‘Roles’ option from the navbar and apply this theme to any of the roles that you have. We have applied it to the default role here.

ChatHeader

The first component that we’ll edit is the ChatHeader. Remove lines 38-40. This will get rid of the avatar on the header. Now scroll down to the .header class and change the background-color to #FFF and add a border-bottom of 1px solid #F5F5F5. After that, add a margin-left of 10px for the .content class.

ConversationListHeader

In this component, we first need to delete the available toggle. For that, remove line number 15. Now, in Line 16, change the content to ‘Messages’. Go to the .toggle-label class and add the following styles to it.

font-weight: bold;
font-size: 16px;
margin-left: 10px;

UserMessage

As usual, most of our changes are about the UserMessage component. Open up the component on the Theme Editor and replace lines 67-71 with the following.

<div t:if="{{ conversation.others.length > 0 }}" class="message-author"
    style="color: black; font-size: 14px">
   {{ sender.name }} <span class = "time-sent"> {{ timestamp |  date: "%H:%m %p"}}</span>
</div>

After that, scroll down below to the .message-row class and add a margin-left and a margin-right of 30px each. Delete the .message-row.by-me class to align all messages in the same direction. For the timestamp near the user’s name, add the following lines of code.

.time-sent{
    font-weight: 100;
    font-size: 10px;
    color: #71717A;
}

Now, edit the .message class so that it looks like this.

.message {
    white-space: normal;
    overflow: hidden;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    background-color: #FFF;
    color: #000;
}

For the .by-me .message class, change the background-color to #FFF and the color to #000. You can delete the border-color property here as well.

SystemMessage

The Airbnb chat displays messages like these when users discuss a potential property with the homeowners. Luckily, TalkJS has a SystemMessage component that lets us do the exact same thing. For this example, we will put an SVG of the Airbnb logo on our system message, but you can replace this with any logo. Add the SVG to Line 52 and move the existing contents of Line 52 to 53.

For the SVG, we add a class called logo. Then, make the following changes to the .logo class and the .message class.

.logo{
    margin: 10px;
    float: left;
}
.message {
    white-space: pre-wrap;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 20rem;
    padding: 5px;
    overflow: hidden;    
    background-color: #F7F7F7;
    color: #717171;
    font-size: 11px;
    font-weight: bold;
}

Once these changes are made, you should have a system message that looks exactly like the one on Airbnb. But wait? How do you display system messages? For that, we need to head over to our script.js file and add an attribute to the conversation. The welcomeMessages attribute is used to display system messages in your TalkJS conversations. You can add any message that you would like to display to the user in an array of strings.

conversation.setAttributes({
    welcomeMessages: ["To protect your payment, always communicate and pay through the Airbnb website or app", "Hosts can’t see your profile photo until after your booking is confirmed."]
})

Layout

Global

Select the global sub-section and change the font-family to "Helvetica", "Open Sans", sans-serif. Next, change the fontSize to 15px.

Inbox conversation list panel

Head over to the Inbox conversation list panel sub-section and change the width to 100%. Change both the maxWidth and minWidth properties to 300px each. After that change the borderColor to #F5F5F5.

Inbox chat panel

Set the marginLeft property to blank and both the width and maxWidth to 785px.

Panel Header

For the Panel header, change the backgroundColor to #FFF.

Message field

We are almost at the end now. Select the Message field sub-section and add a border-radius of 30px. Change the borderColor to #71717A and color to #000 (black).

Highlights

Lastly, open up the Highlights sub-section and change the backgroundColor to #F7F7F7 and color to #000.

Wrapping Up

With all of those changes made, your inbox should look something like this. If you saw the first screenshot of the Airbnb chat you will notice that our lookalike is almost identical to it. The Theme Editor is continuously growing in capabilities and giving us more and more options to tweak the theme of our TalkJS chat.

Now, if you want the mobile view of the same chat, all you need to do is change the inbox to a chatbox in TalkJS and decrease the width of the chatbox to 380px. That would look something like this.

That’s it for this one. Hope you had an amazing time coding up the Airbnb lookalike using the TalkJS Chat API and the Theme Editor. Until the next one, happy coding!

DEV Community: Aswin Rajeev

Technical writing in the age of AI

Outline? What outline?

The first draft

What's the catch?

Using DeepSeek R1 on an AMD GPU

Why is this huge?

Prerequisites

Downloading DeepSeek R1

Output versus ChatGPT

Conclusion

How to create a product carousel for a TalkJS chat

Prerequisites

Running the Sneaks-API Server Locally

Setting up the Chatbox

The HTMLPanel

Getting Product Data

Adding Products to the HTMLPanel

Posting a Reply

Adding our Styles

Conclusion

How to migrate from Sendbird to TalkJS

Exporting from Sendbird

Using the Sendbird Export API

Importing to TalkJS

Importing Users

Importing Conversations

Importing Messages

Opening the application in TalkJS

Reporting messages in TalkJS

Setting up a Report Action

Handling the Action

The Backend

Next Steps

How to add chat into a NodeJS app with TalkJS

Installing the dependencies

LowDB – Easy to use, embedded database for JavaScript

Creating the APIs

Create User API

Get User API

Conclusion

How to build chat into a Flask App with a chat API

Setting up a Python-Flask Application

Setting up the USERS table in SQLite

Setting up the endpoints

Integrating with the frontend application

How to build a chat into a React app with TalkJS

Application Overview

Adding TalkJS to a React application

Component Walkthrough

Retrieving student details

Creating the Users and the TalkJS Session

Creating the Conversation object

TalkJS UI Customization Tutorials

Wrapping up

How to build a chat into an Angular app with TalkJS

Adding TalkJS to an Angular application

Application walkthrough

Using TalkJS to add a buyer-seller chat

Method 1: async createUser(applicatonUser: any)

Method 2: async createCurrentSession()

Method 3: async getOrCreateConversation(session: Talk.Session, otherApplicationUser: any)

Method 4: async createPopup(session: Talk.Session)

TalkJS Component Walkthrough

Full Demo

Wrapping Up

How to build a chat similar to Upwork with TalkJS

Things to do

ChatHeader

UserMessage

SystemMessage

ConversationListHeader

Layout

Global

Panels

Inbox conversation list panel

Inbox chat panel

Panel footers

Message field

Highlights

Setting up the `USERS` table in SQLite