Iterating on Web Handlers Implementation
Tags: opensource, webdev, react, experiment
Published: 2024-03-31 18:56:28

Last week, I wrote about introducing the idea of [Web Handlers](https://dev.to/amnish04/introducing-the-idea-of-web-handlers-in-chatcraft-1b4i) in [ChatCraft](https://chatcraft.org/), and how I implemented an initial proof of concept with a hard-coded Web Handler.

This week, after receiving some feedback, I extended upon that functionality by adding a form that allows users to configure as many Web Handlers as they wish in YAML, which are ultimately persisted in their browser's `localStorage`.

## Table of Contents
&nbsp;1. [How it works 🏃](#how-it-works)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.1. [The Model](#the-model)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.2. [Ability to Configure](#ability-to-configure)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.3. [Executing Handlers](#executing-handlers)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.4. [Making Sense of it](#making-sense-of-it)
&nbsp;2. [Looking Ahead 👀](#looking-ahead)

## How it works 🏃

At this point, you might have been a little confused about what exactly I've been talking about all this time. Trust me, I was also confused when I signed up for this task.

So, here's a quick demo 🥂

### The Model

If you remember from my [last post](https://dev.to/amnish04/introducing-the-idea-of-web-handlers-in-chatcraft-1b4i), I was mostly discussing about the model of Web Handlers.

It looks something like this in its current state.

```ts
export class WebHandler {
  handlerUrl: string;
  method: HttpMethod;
  matchPattern: RegExp;

  constructor({
    handlerUrl,
    method,
    matchPattern,
  }: {
    handlerUrl: string;
    method: HttpMethod;
    matchPattern: RegExp | string;
  }) {
    this.handlerUrl = handlerUrl;
    this.method = method;
    this.matchPattern = matchPattern instanceof RegExp ? matchPattern : new RegExp(matchPattern);
  }

  isMatchingHandler(message: string) {
    return this.matchPattern.test(message);
  }
  ...
  ...
  ...
}
```

### Ability to Configure

Users will now have the ability to configure their own Web Handlers in YAML. 

Here's an example:

![Web Handlers Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6c47imd5hbneztnt5sgi.png)

### Executing Handlers

And the first matching handler gets executed. In my case, I have configured YouTube URLs to be handled by a mock api just for demonstration purposes.

**Prompt:**

```
https://www.youtube.com/watch?v=bnFa4Mq5PAM
```

**Result:**

![Handler Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m36938cl2cio4bsx9pm.png)

### Making Sense of it

This might not make sense at first, but essentially, you can extend the functionality of **ChatCraft** without the project implementing new features. You can write your own [Microservices](https://aws.amazon.com/microservices/) to provide some functionality and register **Web Handlers** in ChatCraft to send HTTP requests to your Microservice with your entered message attached to it.

A more realistic example would be using [Taras](https://github.com/tarasglek)'s [Scrape2Md](https://taras-scrape2md.web.val.run/) Microservice as `handlerUrl`.

![Taras Microservice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o72ghs9j5o3umpv38un5.png)

Let's try another YouTube URL now with updated config:

**Prompt:**
```
https://www.youtube.com/watch?v=tfSS1e3kYeo
```

**Result:**
![Web handler response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8rk6eh4o7rvnoast6ob.png)

It gave me the lyrics of the song I pasted, and since we have Text to Speech in ChatCraft, I can ask **one of our singers**

![our singers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2weqbbhboxpd07ler0c.png)

to sing or download an **instantly remixed** song for me 🎶🪩🤩

![Download Song](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p53vdoicugzbkg2mtir1.png)

## Looking Ahead 👀

You must have noticed that it is already kinda powerful, and still holds a lot of potential as I said in [my last post](https://dev.to/amnish04/introducing-the-idea-of-web-handlers-in-chatcraft-1b4i) as well.

The coding part for this was fairly simple as I just had to implement a UI for the functionality I wrote last week.

If you really want to follow along, you can look this PR.
{% embed https://github.com/tarasglek/chatcraft.org/pull/519 %}

Next week, I am planning to replace the **TextArea** being used for configuration with a **dedicated code editor** called [CodeMirror](https://github.com/uiwjs/react-codemirror) for a better developer experience.

I may also work on making the configuration more flexible by allowing more options to be configured for the handler.

If you have any questions or suggestions, feel free to start a conversation in the comments!

I will follow up with another post 🔜