Forem: Leigh Ola

Creating a Telegram chatbot with ChatGPT: A Step-by-Step Guide

Leigh Ola — Sun, 04 Dec 2022 03:09:50 +0000

Introduction

In this tutorial, we will be building a telegram bot that can interact with OpenAI's chatbot, ChatGPT. ChatGPT is a large language model that can understand and generate human-like text.

This tutorial will show you how to create a telegram bot that can send messages to ChatGPT and receive responses from it.

Introduction
Table Of Contents
Prerequisites
Step 1: Import the necessary libraries
Step 2: Setup environment variables
Step 3: Load the environment variables
Step 4: Define the ChatGPT methods
Step 5: Define the send and receive method
Step 6: Define the telegram methods
Step 7: Listening for messages
Step 8: Starting up our app
Results
Conclusion

Prerequisites

A telegram account and a telegram bot. If you do not have a telegram bot, you can easily create one by following these steps.
An OpenAI account. You can create one here.
Python 3.7 or higher installed on your system
The requests, playwright, and dotenv libraries installed using pip

Let's Begin!

Step 1: Import the necessary libraries

Before we can start building our telegram bot, we need to import the necessary libraries.

We will be using the requests library to make HTTP requests to the telegram API, the playwright library to interact with ChatGPT, and the dotenv and os library to load our OpenAI API credentials from the environment variables.

Additionally, we will be using the time and re libraries for pausing code execution and checking regular expressions, respectively.

If you do not have any of the libraries, simply install them by using the pip install command.

import time
import re
import os
import requests
from dotenv import load_dotenv
from playwright.sync_api import sync_playwright

Step 2: Setup environment variables

First, it's time to set up our environment variables.
The TELEGRAM_TOKEN environment variable is used to store the token for our telegram bot. This is a long string of letters and numbers that is used to authenticate our bot with the telegram API. We need this token to be able to send and receive messages from telegram.

The CHAT_ID environment variable is used to store a comma-separated collection of the chat ID's of the chats who are allowed to use our bot. The chat_id is a unique identifier for each chat on telegram, and we can use it to only allow certain users to use our bot. This way, we can keep our bot private and only allow our friends to use it.

NOTE: The CHAT_ID env variable is optional.

We will create a .env file at the root of our project. It should look something like this:

TELEGRAM_TOKEN=123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11
CHAT_ID=-246810121416, 0123456789

Step 3: Load the environment variables

Next, we will load our OpenAI API credentials from the environment variables. We will use the load_dotenv function to load the environment variables from a file named .env in the same directory as our script.

load_dotenv()

Step 4: Define the ChatGPT methods

Next, we will define a few methods that will allow us to interact with ChatGPT. The first method, get_input_box, will return the textarea where we can enter our messages to ChatGPT.

The is_logged_in method will check if we are logged in to ChatGPT by looking for the root data-id on the input textarea.

The send_message method will send a message to ChatGPT by entering the message in the input textarea and pressing the Enter key.

Finally, the get_last_message method will return the latest message from ChatGPT by querying the page for div elements with the ConversationItemMessage class.

Here's the code:

def get_input_box():
    return PAGE.query_selector("textarea")

def is_logged_in():
    return get_input_box() is not None

def send_message(message):
    box = get_input_box()
    box.click()
    box.fill(message)
    box.press("Enter")

def get_last_message():
    last_page_element_text = PAGE.query_selector_all("div[class*='ConversationItem__Message']")[-1].inner_text()
    time.sleep(1)
    last_page_element_text_latest = PAGE.query_selector_all("div[class*='ConversationItem__Message']")[-1].inner_text()
    if last_page_element_text == last_page_element_text_latest:
        return last_page_element_text
    else:
        # print(f"Last message changed from '{last_page_element_text}' to '{last_page_element_text_latest}'")
        return get_last_message()

The get_last_message method is used to retrieve the latest message from ChatGPT.
It does this by querying the page for div elements with the ConversationItemMessage class. This class is used by ChatGPT to style messages, so by querying for elements with this class, we can find the latest message from ChatGPT.

The method first retrieves the inner text of the last element with this class, then waits for one second and retrieves the inner text of the last element with this class again. If the two texts are the same, it returns the text. If they are different, it means that the last message has changed, and it calls itself again to retrieve the latest message.

This is necessary because ChatGPT may take some time to generate a response, so we need to make sure we only return a complete response, and not one that is still being generated by ChatGPT.

Step 5: Define the send_and_receive method

Next, we will define the send_and_receive method, which will be used to send a message to ChatGPT and get a response from it. This method takes a message as input and sends it to ChatGPT using the send_message method we defined earlier. It then waits for a response from ChatGPT and returns it. If ChatGPT doesn't respond within a certain amount of time, the method will retry a few times before giving up and returning an error message.

Here's how the send_and_receive method works:

The method takes a message as input and sends it to ChatGPT using the send_message method.
It waits for a response from ChatGPT for a certain amount of time (the longer it takes, the longer it will wait).
If it receives a response, it will return it.
If it doesn't receive a response within that time, it will retry a few times (the more it retries, the longer it will wait for a response)
After the third retry, it will give up and return an error message.

def send_and_receive(message, trial=1):
    if trial == 1:
        send_message(message)
    time.sleep(5*trial)
    response = str(get_last_message()).strip()
    # its important to use a regex to check if the response is empty or not
    if (not response or re.match(r"^[^a-zA-Z0-9]$", response)) and trial <= 3:
        return send_and_receive(message, trial=trial*1.5)
    elif trial > 3:
        return "<ChatGPT is not responding.>"
    return response

Step 6: Define the telegram methods

Next, we will define a few methods that will allow us to interact with the telegram API. The first method, send_message_to_telegram, will be used to send a message to the telegram user who sent the original message to our bot. It takes the message, the chat_id of the user, and the message_id of the original message as input and sends the message to the user using the telegram API.

The check_chat_id function takes the chat_id of a user as input, and returns True if the user is allowed to use our bot, or False if they are not allowed. This function is used to check if a user is allowed to use our bot or not, based on the list of allowed chat ID's that we specified in the CHAT_ID environment variable. If the CHAT_ID env variable is invalid or unavailable, this function returns True by default.

last_update = 0
url = f"https://api.telegram.org/bot{os.environ['TELEGRAM_TOKEN']}"
def send_message_to_telegram(message, chat_id, message_id):
    global url
    params = {"chat_id": chat_id, "reply_to_message_id": message_id, "text": message}

    response = requests.get(url+"/sendMessage", params)
    if response.status_code == 200:
        print("Sent response to telegram successfully")
    else:
        print("Error sending response to telegram:", response.text)
    return None

def check_chat_id(chat_id):
    try:
        chat_id_env = os.environ['CHAT_ID']
    except:
        return True
    if chat_id_env == "":
        return True
    chat_id_list = chat_id_env.split(',')
    chat_id_list = [x.strip() for x in chat_id_list]
    return str(chat_id) in chat_id_list

The check_for_new_updates function is used to check for new updates from the telegram API. This function is called periodically to check for new messages from telegram users.

Here's how it works:

The function gets a list of updates from the telegram API using the /getUpdates endpoint
It then loops through the list of updates and checks for any new messages.
It skips over invalid (non-message) updates.
If it finds a valid new message, it checks if the user who sent the message is allowed to use our bot using the check_chat_id method.
If the user is allowed to use our bot, it sends the message to ChatGPT using the send_and_receive method, and gets a response from ChatGPT.
It then sends the response to the user who sent the original message using the send_message_to_telegram method.

def check_for_new_updates():
    params = {"allowed_updates": ["message"]}
    global last_update
    if last_update != 0:
        params['offset'] = last_update + 1

    response = requests.get(url+"/getUpdates", params)
    if response.status_code == 200:
        data = response.json()
        if data["ok"]:
            if data["result"]:
                for update in data["result"]:
                    try:
                        key = 'message' if 'message' in update else 'edited_message'

                        try:
                            #  get the chat id
                            chat_id = update[key]["chat"]["id"]
                            message_id = update[key]["message_id"]
                        except:
                            last_update = update['update_id']
                            # print("Neither message nor edited_message found in update")
                            continue
                        if not check_chat_id(chat_id):
                            last_update = update['update_id']
                            # print("Chat ID not allowed")
                            continue
                        #  get the message and send it to openai and receive a response
                        message = update[key]["text"]
                        response = send_and_receive(message)
                        #  send the response to telegram
                        send_message_to_telegram(response, chat_id, message_id)
                        last_update = update['update_id']
                    except Exception as e:
                        print("Error processing update", update['update_id'], e)
                return data["result"][0]
            else:
                print("No new updates")
                return None
    print("Error getting updates:", response.text)

Step 7: Listening for messages

The check_for_new_updates_periodically function is used to periodically check for new updates from the telegram API. This function is called every 5 seconds, and it calls the check_for_new_updates function that we defined earlier to check for new messages from telegram users. If there are any new messages, the function will process them with ChatGPT using the send_and_receive and send a response with the send_message_to_telegram methods that we defined earlier.

Here's the code:

def check_for_new_updates_periodically():
    while True:
        check_for_new_updates()
        time.sleep(5)

Step 8: Starting up our app

The start_browser function is used to start the browser and create a new page. This function is called at the beginning of our code, and it uses the playwright library to start the browser and create a new page.
The start_browser function is used to start the browser, navigate to the OpenAI Chat website, and check if the user is logged in or not.
This function is called at the beginning of our code, and it uses the playwright library to start the browser, navigate to the OpenAI Chat website, and check if the user is logged in or not.

def start_browser():
    global PAGE
    PLAY = sync_playwright().start()
    BROWSER = PLAY.chromium.launch_persistent_context(
        user_data_dir="/tmp/playwright",
        headless=False,
    )
    PAGE = BROWSER.new_page()
    PAGE.goto("https://chat.openai.com/")
    if not is_logged_in():
        print("Please log in to OpenAI Chat")
        print("Press enter when you're done")
        input()
    else:        
        check_for_new_updates_periodically()

if __name__ == "__main__":
    start_browser()

The user_data_dir option specifies the directory where the browser's user data will be stored.
The headless option specifies whether the browser should run in headless mode or not. In this case, the browser is not running in headless mode, so you can see it on your screen when you run the code. > NOTE: It is important to set headless during the first run of the code, so that you can login to OpenAI with your credentials.

When this script is run, the following will happen:

The start_browser function will be called to start the browser, navigate to the OpenAI Chat website, and check if the user is logged in or not.
If the user is not logged in to OpenAI Chat, a message will be printed asking the user to log in.
If the user is logged in, the check_for_new_updates_periodically function will be called to start the main loop of our code, which listens for telegram messages and responds accordingly.

Results

Conclusion

In conclusion, this article has shown you how to create a telegram bot for ChatGPT using the playwright library and the telegram API. We explained each step in detail, and provided code snippets for each step.

We hope that this tutorial was helpful, and that you now have a better understanding of how to create a telegram bot for ChatGPT. Remember that you can customize the code to suit your needs, and experiment with different settings and options to see how they affect the behavior of your bot.

It's also worth mentioning that the majority of this article was written by ChatGPT, a large language model trained by OpenAI. ChatGPT was able to understand the code and provide clear explanations and examples, so it's a great tool for developers who want to learn more about creating bots and other applications. You can try it out for yourself by visiting https://beta.openai.com/docs/chat/overview.

You check out the repo for this project here.

That's all for now.
Bye! 🖖

The best sources for AI news updates?

Leigh Ola — Fri, 11 Nov 2022 14:32:39 +0000

It could be a Twitter account, an online blog, a YouTube channel, news site, or literally any other online source.

I'm compiling a list of the best sources of AI news updates and possibly creating a bot (open source, of course!) that curates the news and updates any subscribers.

Currently, I know of @ai__pub on Twitter, but I'd like multiple new sources.

Example: (@ai_pub on Twitter):
// Detect dark theme var iframe = document.getElementById('tweet-1587077146182238208-819'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1587077146182238208&theme=dark" }

All suggestions welcome, thanks in advance!

How to create fast, scalable group chat functionality with Pusher and Vue

Leigh Ola — Sun, 30 Oct 2022 15:51:38 +0000

Implementing speedy group chat functionality with Pusher and Vue.

What is Pusher? Pusher is a tool that enables you to build scalable real-time communication. Fast.

Pusher is used by industry giants such as The Washington Post, DoorDash and MailChimp

Features
Requirements
Setting up Pusher
- Creating a pusher channel
- Getting your App Keys
- Enabling subscription counting
Setting up NodeJS Backend
- Packages
- Adding your App Keys
- Creating an Express server
- Messaging with Pusher
Setting up Vue Frontend
- Instantiating Vue and Pusher
  - Opening a channel
- Sending messages
- Disconnecting from a channel
- Creating and styling HTML
Results

Features

In this tutorial, We will use Pusher & Vue to build a very simple chat app that enables fast, real-time group messaging across multiple users.

Users will be able to create a username, join a group, and send and receive messages to/from all other online users in the group.

This app will have its backend built with NodeJS and Express, and its frontend built with Pusher and Vue.

Requirements

You will need:

Basic NodeJS experience
Basic Vue experience
A Pusher account. More on that in the next section.

Setting up Pusher

Step 1: Creating a Pusher Channel

Sign up for a Pusher account.
Next, head over to channels and click on "Create App".
Provide the following information:
- App Name: This will be the name of the app on your pusher dashboard.
- Cluster: This is the location of the servers that will handle requests from your app. Choose a location nearest to you.
- Tech stack: This is optional. We'll use Vue.js for our frontend and Node.js for our backend.

Your setup configurations should look something like this:

Click on Create App to continue.

Step 2: Get your App Keys

To use Pusher channels, you need App Keys for your app.

Head over to the App Keys section on your Pusher App dashboard.
Copy your app_id, key, secret and cluster.

Step 3: Enabling subscription counting.

Subscription count is an in-built pusher event that lets you know how many clients are connected to a single channel.

If this feature is enabled, Pusher will publish a subscription_count event whenever the number of subscribers on a given channel changes.

Here's how to enable this feature:

From your Pusher App dashboard, head over to App Settings.
Scroll down and toggle the switches to Enable subscription counting and Enable subscription count events in channels

Setting up the NodeJS backend

Step 1: Install packages

Run the following command to install the dependencies we'll need

npm i cors dotenv express pusher

Step 2: Add app keys to your project

Create a .env file in your server directory and paste the Pusher app keys you copied earlier

app_id = "1499155"
key = "326ba7284eae570f59ac"
secret = "0919a7fb769182a2ef69"
cluster = "eu"
Remember to change those values to match your own Pusher app keys.

Step 3: Create express server

Next, create an app.js file in your server directory and add the following code:

const express = require("express");
const Pusher = require("pusher");
const cors = require("cors");

require("dotenv").config();
const app = express();
const port = process.env.PORT || 3000;
const { app_id, key, secret, cluster } = process.env;

app.use(express.json());
app.use(cors());
app.use(express.static("public"));

app.listen(port, () => {
  console.log(`Group chat server started at http://localhost:${port}`);

});

This sets up a basic express http server and fetches the environment variables

Step 4: Messaging with Pusher

Add the below snippet to your app.js to connect to your Pusher app:

// Setup Pusher
const pusher = new Pusher({
  appId: app_id,
  key,
  secret,
  cluster,
});

Next, add the following snippet:

// send message data to all clients connected to a channel
function broadcastMessage({ message, sender, timestamp, channel, user_id }) {
  // create "message-in" event for each new message received 
  pusher
    .trigger(channel, "message-in", {
      message,
      sender,
      user_id,
      timestamp,
    })
    .catch((error) => {
      console.log("Error pushing to client:", error);
    });
}

// receive message data from client
app.post("/message", (req, res) => {
  broadcastMessage(req.body);
  res.send("OK");
});

This creates an endpoint to receive messages from a connected user, and then broadcast the message to all the users on the channel.

Finally, open up your terminal and run:

node app.js

Thats all for NodeJS!

Setting up the Vue frontend

Next, create a /public in your server directory and in it, create the following files:

index.HTML
index.css
index.js

Creating a Vue instance and connecting to Pusher

Open up the index.js file and add the following code:

const PusherAppKey = "d1d37aa9b3e2dd707d91";
const PusherAppCluster = "eu";
var pusher;
var channel;
var user_id;

let app = new Vue({
  el: "#app",
  data() {
    return {
      connectionState: null,
      stage: "subscribe", // subscribe or chat
      //
      username: "",
      usernamePlaceholder: "Username",
      currentChannel: "", // remove this
      onlineUsersCount: 1,
      //
      message: "",
      selectedMessageTimestamp: null,
      messages: [],
      channels: {
        Programming: "programming",
        "Tech News": "tech-news-channel",
        "Dad Jokes": "dad-jokes-channel",
      },
    };
  },
  watch: {
    username(curr, prev) {
      // limit usernames to 20 characters
      if (String(curr).trim().length > 20) this.username = prev;
    },
  },
  beforeMount() {
    // Generate unique user id
    user_id = Math.random().toString(36).substring(2);
    connectToPusher();
    // Watch pusher connection state for changes
    pusher.connection.bind("state_change", (states) => {
      this.connectionState = states.current;
    });
  },
  mounted() {
    this.openChannel();
  },
  methods: {
    verifyInput() {
      if (!this.username) {
        this.usernamePlaceholder = "Please enter a username";
        return false;
      }
      if (!this.currentChannel) return false;
      return true;
    },
    openChannel() {
      // if pusher is not connected, reconnect
      if (this.connectionState !== "disconnected") {
        connectToPusher();
      }
      // ensure inputs are valid before proceeding
      if (!this.verifyInput()) return;
      // subscribe to the chosen channel
      let channelId = this.channels[this.currentChannel];
      channel = pusher.subscribe(channelId);
      // move to the chats screen
      this.stage = "chat";
      // listen for a message events on the channel
      channel.bind("message-in", (data) => {
        // format and add the message to the list
        data.type = data.user_id == user_id ? "outgoing" : "incoming";
        data.dateTime = new Date(data.timestamp).toLocaleString().split(", ");
        this.messages.push(data);
        // scroll to bottom of the chats box after a new message is added
        this.$nextTick(() => {
          let chatsBox = document.querySelector(".chats-box");
          chatsBox.scrollTop = chatsBox.scrollHeight;
        });
      });
      // listen for a subscription count event on the channel
      channel.bind("pusher:subscription_count", (data) => {
        this.onlineUsersCount = data.subscription_count;
      });
    },
  },
});

function connectToPusher() {
  // instantiate Pusher
  pusher = new Pusher(PusherAppKey, {
    cluster: "eu",
  });
}

That's a lot of code. Here's a summary:

First, we instantiate Vue:

  let app = new Vue({
  el: "#app",
    // vue instance options...
  });

Next, we create a function to instantiate Pusher:

  function connectToPusher() {
    // instantiate Pusher
    pusher = new Pusher(PusherAppKey, {
      cluster: PusherAppCluster,
    });
  }

This connects the Pusher client to our Pusher app instance.

Remember to change PusherAppKey and PusherAppCluster to match your own Pusher app key values.

Then we set up a beforeMount hook to:

  beforeMount(){
    // Generate unique user id
    user_id = Math.random().toString(36).substring(2);
    connectToPusher();
    // Watch pusher connection state for changes
    pusher.connection.bind("state_change", (states) => {
      this.connectionState = states.current;
    });
  }

This generates a unique user ID for the user, then it calls the connectToPusher() function we created earlier.

Finally, it binds a function to watch for changes to the Pusher instance's connection.

Listening for channel events

The content of the openChannel() method is especially important, so let's go through it.

First, we subscribe to the specific Pusher channel selected by the user.

  channel = pusher.subscribe(channelId);

Then we bind a function to listen for message-in events on that channel. This function gets triggered every time there's a new message on the channel. It then adds the message data to our Vue instance.

  channel.bind("message-in", (data) => {
    /* some other code */
    this.messages.push(data);
    /* some other code */
  });

Finally, we listen for a subscription_count event on the channel. This is a Pusher event that gets automatically triggered each time a client connects to a channel.

channel.bind("pusher:subscription_count", (data) => {
      this.onlineUsersCount = data.subscription_count;
});

This event allows us to show how many users are online in a channel at any given time.

Sending Messages

Add the following function to your Vue instance methods:

sendMessage(event) {
  if (event && event.key) {
    if (event.key != "Enter") return;
  }
  if (!this.message) return;
  let channelId = this.channels[this.currentChannel];
  // send a fetch post request
  let data = {
    message: this.message,
    sender: this.username,
    timestamp: new Date().getTime(),
    channel: channelId,
    user_id,
  };
  fetch("/message", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then(() => {
      this.message = "";
    })
    .catch((e) => {
      console.log("Error sending message", e);
    });
}

Here's what we just did:

We created an object containing the message data we want to send:

let data = {
// 
}

Then we sent the data to our NodeJS server via a POST request to the /message endpoint:

fetch("/message", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
})

Due to our server-side code, when this /message endpoint is called, the message-in event is triggered on the Pusher Channel, with the same data we just sent via our http request.

Disconnecting from a channel

Add one final function to your Vue instance methods:

disconnect() {
  this.stage = "subscribe";
  this.messages = [];
  this.onlineUsersCount = 1;
  pusher.disconnect();
}

This will disconnect from the current channel, clear all the data on our Vue instance related to that channel, and return the user to the group selection menu.

Creating and styling our HTML

Go to the index.js file and paste this snippet:

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <main id="app" v-cloak>
        <div class="subscribe-container" v-show="stage=='subscribe'">
            <header>
                Select A Group
            </header>
            <div class="subscribe-items">
                <div class="subscribe-item" v-for="(v, name) in channels" :class="{selected: currentChannel==name}" @click="currentChannel=name">
                    <span>{{name}}</span>
                </div>
            </div>
            <input type="text" v-model="username" :placeholder="usernamePlaceholder">
            <button :class="{disabled: !username || !currentChannel}" @click="openChannel">Proceed</button>
        </div>

        <div class="chats-container" v-show="stage=='chat'">
            <header>
                <span>{{currentChannel}}</span>
                <small>
                    <ins></ins> {{onlineUsersCount}} users online
                </small>

                <button @click="disconnect">EXIT</button>
            </header>

            <div class="chats-box">
                <div class="chat-item" 
                    v-for="({sender, message, timestamp, type, dateTime}, i) in messages" 
                    :class="{out: type=='outgoing', selected: selectedMessageTimestamp==timestamp}"
                    @click="selectedMessageTimestamp=timestamp"
                >
                    <div class="chat-item-content">
                        <div class="username">{{sender}}</div>
                        <span class="chat-message">{{message}}</span>
                    </div>
                    <span class="timestamp">
                        <small v-for="item in dateTime">
                            {{item}}
                        </small>
                    </span>
                </div>
            </div>

            <footer>
                <input type="text" placeholder="Type a message" v-on:keypress="sendMessage($event)" v-model="message" id="message">
                <button id="send" @click="sendMessage">Send</button>
            </footer>
        </div>
    </main>
</body>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13"></script>
<!-- pusher -->
<script src="https://js.pusher.com/7.2/pusher.min.js"></script>
<!--  -->
<script src="./index.js"></script>
</HTML>

Finally, it's time to style our page. Open up your index.css file and insert this:

/* import roboto font */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
/* import ubuntu font */
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap");

[v-cloak] {
  visibility: hidden;
}

body {
  padding: 0px;
  margin: 0px;
  font-size: 16px;
  width: 100%;
  position: relative;
  font-family: "Roboto", sans-serif;
}

#app {
  display: flex;
  height: 100vh;
  max-height: 100vh;
  width: 100%;
  max-width: 100vw;
  position: relative;
  background: white;
  top: 0px;
  left: 0px;
  padding: 0px;
}

/* the popup stage */
.subscribe-container {
  border-radius: 5px;
  display: flex;
  flex-flow: column nowrap;
  box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.75);
  border: 2px solid rgba(0, 0, 0, 0.75);
  box-sizing: border-box;
  width: 300px;
  /* height: ; */
  /* height: 300px; */
  max-height: 300px;
  margin: auto;
  overflow: hidden;
}
.subscribe-container header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(63, 81, 181);
  color: white;
  font-weight: bold;
}
.subscribe-container .subscribe-items {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
}
/* no scrollbar */
.subscribe-container .subscribe-items::-webkit-scrollbar {
  display: none;
}
.subscribe-container .subscribe-items .subscribe-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin: 5px auto;
  width: 96%;
  border-radius: 3px;
  flex-shrink: 0;
  color: rgb(63, 81, 181);
  font-weight: bold;
}
.subscribe-container .subscribe-items .subscribe-item:hover {
  background-color: rgba(63, 81, 181, 0.1);
}
.subscribe-container .subscribe-items .subscribe-item.selected {
  background-color: rgba(63, 81, 181, 0.25);
}
.subscribe-container .subscribe-items .subscribe-item span {
  text-transform: uppercase;
  font-size: 1.1em;
}
.subscribe-container .subscribe-items .subscribe-item small {
  font-size: 0.7em;
}
/* username & submit */
.subscribe-container input {
  background: white;
  height: 40px;
  width: 100%;
  padding: 5px;
  border: none;
  margin-top: 5px;
  text-align: center;
  font-size: 0.85em;
  color: rgb(63, 81, 181);
}
.subscribe-container button {
  width: 100%;
  height: 40px;
  border: none;
  background-color: rgb(21, 138, 1);
  color: white;
  text-transform: uppercase;
  font-size: 1em;
}
.subscribe-container button.disabled {
  background-color: rgba(21, 138, 1, 0.5);
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-container button:active {
  background-color: rgba(21, 138, 1, 0.5);
  color: white;
}

/* the chat stage */
.chats-container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

/* chat header */
.chats-container > header {
  display: flex;
  width: 100%;
  height: 50px;
  background-color: rgb(63, 81, 181);
  /* justify-content: space-between; */
  align-items: center;
  padding: 0px 5px 0px 20px;
  color: white;
  box-sizing: border-box;
}
.chats-container > header > span {
  font-weight: bold;
  font-size: 1.1em;
  text-transform: uppercase;
}
.chats-container > header > small {
  /* position: relative; */
  /* right: 30px; */
  margin-left: 10px;
  font-size: 0.7em;
  display: flex;
}
.chats-container > header > small ins {
  width: 5px;
  height: 5px;
  margin: auto 3px;
  content: "";
  flex-shrink: 0;
  display: inline-block;
  border-radius: 100%;
  background: greenyellow;
}
.chats-container > header > button {
  margin-left: auto;
  border: none;
  background: transparent;
  border-radius: 2px;
  font-size: 0.7em;
  color: white;
  text-transform: uppercase;
  padding: 10px;
  color: red;
}
.chats-container > header > button:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
.chats-container > header > button:active {
  color: white;
  background: red !important;
}

/* chat footer */
.chats-container > footer {
  display: flex;
  width: calc(100% - 8px);
  height: 50px;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  color: white;
  margin: 0px 2px 2px 2px;
  padding: 0px;
  border: 2px solid rgb(63, 81, 181);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  outline: none;
  bottom: 0px;
  position: fixed;
}
.chats-container > footer * {
  border: none;
}
.chats-container > footer #message {
  background: white;
  width: 100%;
  max-width: calc(100% - 80px);
  height: 100%;
  padding: 18px 15px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  box-sizing: border-box;
}
.chats-container > footer #message::-webkit-scrollbar {
  display: none;
}
#message,
#message:focus {
  outline: none !important;
}
.chats-container > footer button {
  flex-shrink: 0;
  height: 46px;
  width: 80px;
  margin: auto 2px;
  background: rgb(63, 81, 181);
  color: white;
  border-radius: 50px;
  border: 0px;
  font-weight: bold;
  text-transform: uppercase;
}

/* main chats box */
.chats-container .chats-box {
  flex-grow: 1;
  width: 100%;
  max-height: calc(100% - 108px);
  display: flex;
  overflow: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 50px;
  margin: 0px;
  flex-flow: column nowrap;
  box-sizing: border-box;
  padding: 5px 0px;
  margin-right: 40px;
}
.chats-container .chats-box::-webkit-scrollbar {
  display: none;
}
.chats-box .chat-item {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 0px 5px;
  justify-content: space-between;
}
.chats-box .chat-item:not(:last-of-type) {
  margin-bottom: 3px;
}
.chats-box .chat-item.selected {
  background: rgba(63, 81, 181, 0.15);
  padding: 2px 5px;
}
.chat-item .chat-item-content {
  position: relative;
  z-index: 2;
  max-width: 400px;
  min-width: 150px;
  min-height: 40px;
  display: flex;
  flex-flow: column nowrap;
  border-radius: 20px;
  background: rgb(60, 111, 238);
  color: white;
  padding: 0px 8px 8px 8px;
  box-sizing: border-box;
  font-family: Ubuntu, Arial, Helvetica, sans-serif;
}
.chat-item.out .chat-item-content {
  order: 1;
  background: rgb(21, 138, 1);
}
.chat-item .chat-item-content::after {
  content: " ";
  position: absolute;
  z-index: 1;
  bottom: 0px;
  left: 0px;
  background: inherit;
  padding: 6px;
  border-radius: 50%;
}
.chat-item.out .chat-item-content::after {
  left: auto;
  right: 0px;
}
.chat-item-content .username {
  font-size: 0.7em;
  width: 100%;
  position: relative;
  left: 15px;
  right: auto;
  top: 3px;
  display: block;
  /* text-align: right; */
  /* margin: auto 5px auto 15px; */
  justify-content: space-between;
  /*  */
  color: rgb(179 249 167);
}
.chat-item.out .chat-item-content .username {
  box-sizing: border-box;
  /* background: white; */
  text-align: right;
  right: 18px;
  left: auto;
}
.chat-item-content .chat-message {
  margin-top: 3px;
  width: auto;
  max-width: 100%;
  /*  */
  word-wrap: break-word;
  white-space: pre-line;
}
.chat-item.out .chat-item-content .chat-message {
  text-align: right;
}
.chat-item .timestamp {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.7em;
  color: black;
  margin: auto 20px;
  text-transform: uppercase;
  font-weight: bold;
  visibility: hidden;
}
.chats-box .chat-item.selected .timestamp {
  visibility: visible;
}
.chat-item .timestamp * {
  display: block;
}

That's All!

Results

Here's our chat app:

Conclusion

This article has taken you through the basic steps required to create a fast, scalable, real-time group-chat application with Vue and Pusher.

Check out the project repo on GitHub. Feel free to fork and contribute.

👋

Forem: Leigh Ola

Creating a Telegram chatbot with ChatGPT: A Step-by-Step Guide

Introduction

Table Of Contents

Prerequisites

Step 1: Import the necessary libraries

Step 2: Setup environment variables

Step 3: Load the environment variables

Step 4: Define the ChatGPT methods

Step 5: Define the send_and_receive method

Step 6: Define the telegram methods

Step 7: Listening for messages

Step 8: Starting up our app

Results

Conclusion

The best sources for AI news updates?

How to create fast, scalable group chat functionality with Pusher and Vue

Implementing speedy group chat functionality with Pusher and Vue.

Table Of Contents

Features

Requirements

Setting up Pusher

Step 1: Creating a Pusher Channel

Step 2: Get your App Keys

Step 3: Enabling subscription counting.

Setting up the NodeJS backend

Step 1: Install packages

Step 2: Add app keys to your project

Step 3: Create express server

Step 4: Messaging with Pusher

Setting up the Vue frontend

Creating a Vue instance and connecting to Pusher

Listening for channel events

Sending Messages

Disconnecting from a channel

Creating and styling our HTML

Results

Conclusion