RocketChat / RocketChat/fuselage

How can I proceed to use UIKit for a custom chat client?

Open
#406 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
162
Forks
258
Avg merge
2d 23h
Merged PRs (30d)
24

Description

Describe the behavior
I want to reuse the UI Kit from RocketChat in order to draw modals or messages in our custom client chat.
For example, for the poll plugin, I follow the workflow, and the chat integrated by RocketChat is able to render the 'blocks' structure received. How can I reuse that part of the code? is there a function where I can pass the json and receive the html code ready to display?

Let's say something like this:

htmlCode = render({
               ...
               "submit":{
                  "type":"button",
                  "text":{
                     "type":"plain_text",
                     "text":"Create",
                     "emoji":false
                  },
                  "actionId":"dc862121-7b75-11eb-9a12-b98309fc6d2e"
               },
               ...
               "blocks":[
                  {
                     "type":"input",
                     "blockId":"poll",
                     "element":{
                        "type":"plain_text_input",
                        "initialValue":"this is a poll",
                        "actionId":"question"
                     },
                     "label":{
                        "type":"plain_text",
                        "text":"Insert your question",
                        "emoji":false
                     },
                     "appId":"c33fa1a6-68a7-491e-bf49-9d7b99671c48"
                  },
                 ...
             ],
             "appId":"c33fa1a6-68a7-491e-bf49-9d7b99671c48"
         }
     );

Regards.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file, test, or entry point is identified in the issue. Start by locating the Fuselage React components that handle block-based UI, then determine whether they expose a public renderer for the supplied JSON; done means documenting a supported reuse path or defining the missing integration scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.