ChatCraft Adventures #10

ChatCraft Release 1.6

This week in ChatCraft, Release 1.6 has been released and is available here.

Pull Requests

Make Shared Chats Accessible from UI Again

Recap

Last week, I described a bug that prevented users from accessing their Shared Chats directly from the ChatCraft UI, and described my initial fix for the issue affecting how Shared Chats would be created.

In short, when shared chats are created, they have two URLs:

• a "/c"-style URL
  • e.g. https://chatcraft.org/c/user/chatId
• an "/api/share"-style URL
  • e.g. - https://chatcraft.org/api/share/user/chatId

404 Error

The "/api/share"-style URL is directly given to a Shared Chat and rendered by the ChatCraft frontend. When pasted into your browser's address bar, it redirects to the "/c"-style URL. However, when opening this link from the ChatCraft frontend you get a 404 error stating the route can't be found:

My original solution

We don't know the exact cause for this error, but we believe it has something to do with how the "/api/share"-style URL works with react-router-dom, as react-router-dom is mentioned in the error call stacks.

My original fix involved giving new created Shared Chats the "/c"-style URL so it would be rendered by the UI instead of the "/api/share"-style URL. However, this fix ignored all the current Shared Chats that have an "/api/share"-style URL rendered in the UI.

My new solution

After discussing with my classmates and instructor, we thought of two possible solutions to make Shared Chats with that "/api/share"-style URL accessible again:

1. Render the Shared Chat's "/c"-style URL instead of the "/api/share"-style URL
2. Use window.location to bypass react-router-dom and redirect to the Shared Chats' "/c"-style URL

I opted to implement the first solution, as I believed it would be less invasive. To do this, I added a method called convertToShareUrl to convert any "/api/share"-style URL to a "/c"-style URL before it is rendered by the frontend:

/**
 * Converts "/api/share"-style URLs before passing it to UI
 * This is done to avoid react-router-dom issue involving "/api/share"-style URLs
 * @param url
 * @returns url
 */
export function convertToShareUrl(url: string) {
  return url.includes("/api/share") ? url.replace("/api/share", "/c") : url;
}

Because this change fixes the issue of Shared Chats with "/api/share"-style URLs, I ended up removing my original changes as they were no longer required to fix/prevent this bug. This new fix is a huge improvement over my initial fix, and I'm happy I was able to figure out and fix this bug.

Current Work

This week, I've also been working on a couple issues. They haven't been made into Pull Requests yet, but I'd like to share what I've done so far.

Add nomnoml renderer

Currently, ChatCraft supports Mermaid rendering. This feature request involves adding support for nomnoml rendering. Nomnoml is similar to Mermaid, in that they're both used in generating uml diagrams.

Current progress

When working on this feature, I tried to mirror the files required for the Mermaid rendering feature. By doing this, I've been able to get a rudimentary version of Nomnoml support working. Here's what it looks like:

To support nomnoml rendering, I am using the skanaar/nomnoml library.
However, my feature is not perfect. For one, sometimes the LLM can return bad nomnoml syntax (at least when using GPT-3.5). Other times, the nomnoml render does not fit within the React Card:

Also, as far as I'm aware, the current nomnoml library is missing some features present in the mermaid library, such as custom-theme support. If this is true, then it means all rendered nomnoml will appear in a beige theme.

In the coming days I hope to fully flesh out this feature.

/ Keyboard Shortcut to focus input bar

This is another cool feature I've been working on. Many websites, like Google search, Youtube, and GitHub have a keyboard shortcut to focus the input bar, typically the forward slash key: /. It would be cool to add this feature to ChatCraft so users can press the / key to quickly enter their current chat's input window.

I never really noticed this feature until I saw this feature request. However, once I learned about this feature I could not un-see it. The next time you're browsing the web, see if any websites you browse have this feature.

My current version of this feature is a little buggy. I think it has to deal with which component I'm adding this feature to. I hope to figure it out in the next week.

Next week in ChatCraft

In ChatCraft Release 1.7, I hope to finish these two features I'm working on.