Skip to content
This repository was archived by the owner on Jul 29, 2025. It is now read-only.

Markdown Support for Chatroom and Stylistic Changes #124

Merged
merged 9 commits into from
Aug 4, 2024

Conversation

AnoldGH
Copy link
Contributor

@AnoldGH AnoldGH commented Jul 31, 2024

Added markdown support to chatroom with solid markdown and remarkGfm.
Chatroom can now display Markdown as well as its Github extensions:
image

Also added are some stylistic changes inspired by Github UI. Messages from local user are displayed in a light blue box much like Github discussions, while messages from foreign users are displayed in black and white.
image

Copy link
Collaborator

@zjkmxy zjkmxy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, but you moved too fast. Let's first discuss if we should go this direction.

This is a temporary hold. No actual change requested.

@AnoldGH
Copy link
Contributor Author

AnoldGH commented Jul 31, 2024

Sure thing. This PR mainly touches on two parts:

  1. Adds Markdown support. This was a TODO label in the original chat.tsx, which I think could be useful. This code here does it:

    <SolidMarkdown
    children={msg.value.content}
    remarkPlugins={[remarkGfm]}
    components={{ code: Code }}
    />

    solid-markdown claims they are 90% similar to the original react-markdown. During my tests I didn't encounter any notable issues, and so I decided to go with it.

  2. Stylistic changes
    I decided to make these changes upon realizing Markdown display doesn't go well with the original style, since the message box was wrapped in different colors and it was hard to distinguish between codes and texts.
    Several assumptions I made during the changes:

    1. Workspace is used mainly during collaborative working, so the message box should be clear to display full segments of code, latex formula, etc.
    2. Since it is more often a working environment, some inconvenience for casual talks can be tolerated.
    3. The lack of profile choosing features is likely to continue, so the sender's username must be displayed somewhere clear

    I find Github UI and some online forums to be rather good references for these requirements, and made the changes inspired by these designs.

--msg-font-size-regular: 10px;
--msg-font-size-header: 16px;

--msg-local-border-color: #46a9ff66;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't recommend to create your own color instead of using the one managed by global themes. However, since the existing chat already created a lot of colors (very bad experience in dark theme), I will accept this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It indeed looks atrocious in dark theme, I will see what I can do later

@zjkmxy zjkmxy merged commit 2ba2321 into UCLA-IRL:main Aug 4, 2024
1 check failed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants