Freestyle Chat

About

Freestyle Chat is a completely open source package that provides chat built for Freestyle Projects. It’s designed to be simple to use and easy to extend.

Installation

To install the Freestyle Chat package, run:

npm install freestyle-chat

Usage

The simplest starting point is with the Chat Component and MessageList Cloudstate. This component is a simple chat interface that you can use to get started quickly.

To do this, first you import the MessageList class from freestyle-chat and create your own class that extends it.

Then, you create your own @cloudstate class that extends the MessageListCS class.

Give it your own id, and now you’ve got a base chat backend set up.

import { MessageListCS } from "freestyle-chat";
import { cloudstate } from "freestyle-sh";


@cloudstate
export class ChatCS extends MessageListCS {
  static readonly id = "chat";
}

Next, to connect it to your frontend, you can use the Chat component.

import { Chat } from "freestyle-chat/react";
import { ChatCS } from "./Chat.ts";

export function ChatPage() {
  const chat = useCloud("chat");

  return (
    <div className="h-screen">
      <Chat messageList={chat} />
    </div>
  );
}

This will give you a simple chat interface that you can use to get started quickly.

Customization

Frontend

The Chat component is designed to be easily customizable. You can pass in your own components to customize the look and feel of the chat interface.

Your options are:

Prop	Description
displayMessage	Set the component used to display messages to any React Component.
messageInput	Set the component used to input messages to any React Component.
placeholder	Set the placeholder text for the message input.
submitButtonBackgroundColor	Set the background color of the submit button. This is useful when you want to change the color, but don’t want to write a full new input section

Backend

The MessageListCS class is designed to be extended. You use it by creating another class that extends it, and then you can override the methods to customize the behavior of the chat backend.

import { MessageListCS } from "freestyle-chat";
import { cloudstate } from "freestyle-sh";

@cloudstate
export class ChatCS extends MessageListCS {
  static readonly id = "chat";

  // your customization goes here
}

Your options are:

Method	Description
getCurrentUser	Override this method to customize how the current user is determined. This is useful because you can bring any auth provider to work with the chat.
_onMessageAdded	Override this method to customize what happens when a message is added. This is useful for building bots, creating analytics or any thing else you might want to do when a user sends a message.

Demo

Here’s a simple example of a chat interface using the Chat component: