DEV Community: Roy J. Wignarajah

ChatCraft Advenures #14: ChakraUI Troubles, My First Revert, and Final Recap

Roy J. Wignarajah — Sat, 20 Apr 2024 01:53:55 +0000

ChatCraft Release 2.0

ChatCraft Release 2.0 is available here. It was a pleasure working with everyone during this semester. It's amazing to see how many new features, enhancements, and bugfixes have been added with each weekly milestone. I encourage everyone reading to check out ChatCraft yourself if you haven't already. No API key is required! You can use free providers on ChatCraft today!

Pull Requests

My first code reversion

In last week's blog post, I wrote about a Pull Request I made to fix a toast error bug on ChatCraft mobile. It turns out my code in that PR introduced a number of bugs described in this Issue.

I initially tried adding new code to fix this Issue, but there were a number of bugs my code introduced, so I figured the best move was to revert the commit.

How to revert a commit

You can revert a commit in two ways:

from the GitHub UI
from the command line

Reverting a commit from the GitHub UI is straight-forward, and is what I ended up doing. However, my class instructor, Dave, taught me how to do it from the command line:

git checkout main
git checkout -b <topic-branch-name>
git revert <git-sha>
git push origin <topic-branch-name>

You can then make a Pull Request for <topic-branch-name>, noting that it's a Revert PR along with an explanation.

The reversion is done in git revert, which inverses a commit's diff:

removes added lines
adds removed lines

Doing this from a topic branch (non-main branch) isn't necessary but it is strongly recommended. This is because while projects will let you land changes directly on the main branch, doing so will often skip any CI (Continuous Integration).

My reversion was simple, but I think that's because of a few reasons:

my changes were small (affected only 1 file)
my PR commit(s) was/were squashed into one commit
the reversion was made before additional changes to the file were made

I have a feeling that if any of these things were not the case, I would have had a harder time reverting my changes.

Backing out a change

This is the first time I've reverted code from a project. Dave tells me that in software projects, this is often referred to as "backing out a change". It sounds a lot more strategic than "reverting a PR", but I think that's because it really is. If the code remained, ChatCraft would produce a lot of bugs in production, and would affect users and developers. In fact, it was better to revert the code now than later when new code is added to the file.

Reverting a commit is not the end of the world. You can always re-implement a fix or feature later, which is what I ended up doing. Just don't forget to provide an explanation for the revert in your PR, and don't forget to re-open any issues that the revert will affect.

Add mobile-specific error toast custom width

This is a version of my original implementation that doesn't introduce any of the bugs the original introduced.

It's essentially the same code I initially added, a custom containerStyle property for ChakraUI's Toast component:

    containerStyle: {
      width: isMobile ? "90vw" : "initial",
    }

Location, location, location

Here's what that code looked like in my initial PR (introduced bugs):

export function useAlert() {
  const isMobile = useMobileBreakpoint();
  const toast = useToast({
    containerStyle: {
      width: isMobile ? "90vw" : "initial",
    },
  });

And here's how that code looks in my new PR (no bugs introduced):

  const error = useCallback(
    ({ id, title, message }: AlertArguments) =>
      toast({
        // ...
        containerStyle: {
          width: isMobile ? "90vw" : "initial",
        },
      }),
    [toast, isMobile]
  );

useToast() vs toast()

In the use-alert.ts file, the properties for each toast message (info, error, success, warning) is defined in their individual useCallback's. In my original PR, I added the containerStyle code to the useToast() call instead because I wanted to avoid duplicate code.

I haven't figured out why, but adding the containerStyle code in the useToast() call introduced various bugs, while adding it in the toast() call within the error useCallback didn't introduce any bugs.

I hope any ChakraUI experts reading can help me understand what's happening.

Issues

/import fails on YouTube videos with no captions

ChatCraft has a cool /import command, which will take a URL and import text. One way you can use the /import command is to use it with a YouTube video URL, and if the video has captions, ChatCraft will return the captions in a message:

Shared Chat Available here

However, I once tried it with a music video with no lyrics, like https://www.youtube.com/watch?v=TKfS5zVfGBc and saw this error toast:

When testing the command locally, I found this error in the backend:

I found a similar error when trying the /import command on another music video with non-English captions available:

Now that we know what the issues are, I think I can make error toast message more descriptive for these edge cases.

OSD700 Recap

Below is a recap of my experience working on ChatCraft and my experience taking OSD700 at Seneca Polytechnic (formerly Seneca College) this semester.

Comparison to Previous Open Source Work

Having finished this course, I noticed a number of differences between my past open source work and contributing to ChatCraft. Some of these are differences in experience, while others are things unique to ChatCraft or unique to my open source class.

1-2 PRs in other projects vs multiple PRs in ChatCraft

In my previous open source class, I made 1-2 Pull Requests to various open source projects. Though I was able to contribute code, my understanding of these codebases was limited to the pieces of code I worked on.

In this class, I devoted all of my attention to ChatCraft, and understood more of the codebase by making multiple contributions. Of course, I don't completely understand the entire codebase. There are still many parts of the codebase I either haven't read or don't understand. However, I noticed that by focusing on one project, I naturally read various parts of the code to understand the code I would modify or build upon.

Working on an active project

With my classmates, Dave, and ChatCraft creator Taras also working on ChatCraft, the project became very active, with multiple Pull Requests being made every week. Reviewing Pull Requests was not only another opportunity to read various parts of the codebase, but also an exercise in reading new code.

I found working on such an active project to be a fun experience.
In our last triage meeting, my Dave mentioned how much of a difference it makes to work on an active project. A project with lots of activity gives out a certain kind of energy that encourages people to use and even contribute to the project. There's always new code being added, and the community around the project grows.

I noticed this when working on ChatCraft this semester. With each milestone new features were added that improved the app. As the weeks went by our work attracted more users, and by the end of the semester, developers outside the course began contributing to ChatCraft as well.

Instant vs. non-instant communication

In past projects I've contributed to, the best way to contact the maintainers was often through GitHub, which is non-instant. For ChatCraft, we've been using Discord - an instant messaging app - alongside GitHub. GitHub was still the primary method of communication when reading issues or making/reviewing Pull Requests, but having instant messaging available, through Discord or otherwise, turned out to be a reliable way to reach out to colleagues.

Triage meetings

This is something unique to my open-source class. Every week, the class ran a triage meeting where we discussed showstopper issues/features, confirmed details on sprint/milestone deadlines and feasibility, and made plans for the next sprint/milestone. These meetings would take the entire class time (~2 hours) but in that time we solved a lot of things logistically.

Just over a year ago, I did a co-op placement (internship) in the IT space, albeit in a non-developer role. I remember having daily standup meetings for certain projects, but I don't remember feeling very accomplished during those meetings. Maybe I'd have a different experience as a full-timer, but based on my experience attending triage meetings I think that longer, weekly meetings would be more meaningful than multiple shorter meetings throughout the week.

Sheriff duty

During this semester I was also a 'Code Sheriff' for a couple weeks. I've described my first Sheriff experience in this blog post, but overall I thought it was a fun leadership experience. In my experience, being a code sheriff didn't mean being an 'on-call' who works on every issue or reviews every pull request (though it's good to provide a review when needed). It just meant helping shepherd new code into the project by providing a resource (e.g, finding reviewers for a Pull Request, putting classmates in contact with someone who can help them with a feature or technology).

Secrets management using sops

One thing unique to working on ChatCraft was how we managed secrets (mostly API keys). ChatCraft uses sops to share secrets, and getting access to secrets was a fun experience I wrote about in this blog post. There's still a lot I need to learn about sops, but once I figure out enough I'd like to implement it in my own projects!

My contributions

When I started working on ChatCraft, I wasn't very confident in my web development skills. I took web development courses in school but the concepts didn't stick well. I just enjoyed writing programs in C++ and writing scripts. Because of this, I devoted most of my focus to making bug fixes and enhancements to various parts of the codebase.

I found that with each enhancement or bug fix I did, I understood more of the codebase, and by the third month I was able to add a couple new features. I've listed all of my bug fixes, enhancements, and features below:

Bug Fixes

Enhancements

Features

Regrets

One regret I have is that I didn't take more risk by trying to implement more features. When doing this course I played it safe and mostly contributed to bug fixes and code enhancements. There were some features at the time that I wanted to implement, but I wasn't confident enough to try because I didn't feel familiar enough with the codebase. It was only until halfway through the semester that I felt confident enough to implement larger features, but by then, there weren't enough weeks to fully flesh out a larger feature.

I try not to compare myself to others, but when I look at all the cool features my classmates added, I can't help but feel I should have tried adding at least a couple larger features, instead of seeking comfort in small bugfixes and enhancements. As someone still learning web development, I'm nonetheless proud of the work I did. However, in the future I want to be less risk-averse when it comes to implementing larger features.

How I used ChatCraft

Throughout the course, I mainly used ChatCraft to help me develop ChatCraft. I've listed three use cases, with shared chats, demonstrating how I've used ChatCraft for various aspects of ChatCraft development:

Fixing Syntax Errors
- I'm still re-learning React Hooks, and the syntax often eludes me. Here I used ChatCraft to help me wrap part of a useCallBack in an if conditional.
Finding Enhancements
- In an enhancement I made for the search bar, I used ChatCraft's image input feature to send a picture of the ChatCraft search bar to OpenAI's gpt-4-vision-preview model for suggestions on improving the search bar's visibility. For this use case, I even modified the System Prompt to tell the LLM it's an expert in UX/UI design:
Reviewing Pull Requests
- In this example, I have a shared chat I made when reviewing the UI changes of the Image Input feature.

I've also used ChatCraft to help me learn how to integrate the OpenAI API with the frontend of a class project I'm working on. I'll even be using ChatCraft to help me develop future projects.

With all the new features added, there are a bunch more clever ways you can use ChatCraft. I highly encourage those reading to use ChatCraft today!

My thoughts on OSD700 (Open Source Development II)

OSD700 is course I've been contributing to ChatCraft for, and it's is one of the best courses I've taken, if not the best course in Computer Programming and Analysis at Seneca. The previous courses I've taken in this program gave me the foundation needed to work on ChatCraft, but those courses weren't exciting, and I just wasn't motivated to keep learning. In this course we were given the freedom to help build an actual project that people use, and the tools to figure out how to do it. Before taking the Open Source classes, I wasn't confident enough in my skills to contribute anything. However, after taking OSD600 and OSD700 I've become confident enough to contribute code. Even if there's something I can't fix or implement, I know I'll always be able to find where I can learn something, or find someone who can help. In fact, taking this course has motivated me to give web development another try.

By a stroke of luck

I originally wasn't supposed to take the open source classes.
When I wanted to enroll for the first open source class in Fall, it was full. However, during the first week of that semester I kept looking for open spots, and on a Saturday morning I found an open spot. It was by a stroke of luck I was able to take the open source classes.

From these courses I learned/gained the following:

proficiency with git
how to write good issues and make good pull requests
how to review pull requests
the 'open source' workflow
how to make good code contributions (adding to code vs. rewriting someone's code 'your way')
the confidence to contribute to open source
code reading skills (reading new codebases, reading new code someone's adding)
the importance of blogging and building 'in the open'
a newfound interest in web development

I honestly believe I would be in a very different place, skill-wise, if I didn't take these courses.

Though it's too soon to tell, I'm confident my experiences from these courses will make a lot of difference in my career and personal development. I'd like to thank Taras for letting us contribute to ChatCraft, and Dave for being a great instructor and mentor. I've learned a lot from working with you both on ChatCraft and related projects, and I hope to work with you in the future.

Next Steps

With this blog post, I've finished my last course of the semester and the last semester of my studies. I'll be taking a short break, but after today I'll be on the hunt for software developer jobs.

It's been a little over three years since I went back to school to study software development. Before then I studied to become a chemist, but a number of factors led me to pivot towards software development. Perhaps I can find a career that combines the two, but after my experience this semester, a career in web development sounds exciting.

ChatCraft

As for ChatCraft, I have some Issues I want to close within the next month. I'll have to balance my work on ChatCraft with work on my own projects, my job search, and life, but I think I'll be able to contribute a little while longer. There are some personal projects I want to start working on after I've had some rest, and I think ChatCraft will be very helpful.

Thank you

I think I'll also be blogging for just a while longer, be it about ChatCraft or other projects. Until then, thank you for reading. See you soon.

ChatCraft Adventures #13, UI Changes

Roy J. Wignarajah — Sat, 13 Apr 2024 04:21:02 +0000

ChatCraft Release 1.9 is available here

ChatCraft Week 13 Recap

This week, I worked on addressing more technical debt in ChatCraft. Here's the work I've done.

Pull Requests

Adjust Toast Message Width for Mobile Experience

This Pull Request fixes a bug my class instructor, Dave, noticed when using ChatCraft on mobile:

In this issue, error messages with a lot of text content are too wide on mobile. To ensure users are aware of any errors, ChatCraft error messages can only be closed manually by the user. However, on mobile, these error messages can be so wide that the close button is inaccessible.

Solution

In a previous blog post, I described how I fixed a similar issue by using the useMediaQuery react hook.

In my Pull Request, I used the useMobileBreakpoint() to define a different set of behaviours for Toast messages to follow when on mobile:

import useMobileBreakpoint from "../hooks/use-mobile-breakpoint";

// ...

export function useAlert() {
  const isMobile = useMobileBreakpoint();
  const toast = useToast({
    containerStyle: {
      width: isMobile ? "90vw" : "initial",
    },
  });

ChatCraft uses the ChakraUI component library, and one of these components is the Toast component which provides user feedback using messages that pop up, as though coming out of a toaster:

The Toast component has props, or properties that can define custom behaviours. In this PR, I modify the containerStyle prop depending on whether the user is on mobile (a device with a screen width <= 480px). If the user is on a mobile device, all toast messages will have a width that is 90% of the viewport's width. Otherwise, toast messages will retain their initial width. Before using the initial value, I had trouble getting this PR to work. I have to thank my classmate Amnish for this suggestion.

Sometime after this PR was merged, my classmate, Katie, reported a bug that traces back to this PR. I hope to investigate and solve this bug soon.

Replaced Show/Hide button with Eye ReactIcons

This Pull Request is a small enhancement of my Katie's feature that adds support for Custom Providers.

Previously, the Custom Providers menu controlled API key visibility using a Show/Hide button:

Following feedback from Amnish, changing the Show/Hide button to eye IconButtons was a proposed enhancement.

Solution

My solution implementation involved replacing the pre-existing Button component with an IconButton that uses eye icons:

        <IconButton
          variant="ghost"
          h="1.75rem"
          size={buttonSize}
          icon={show ? <IoMdEyeOff /> : <IoMdEye />}
          onClick={() => setShow(!show)}
          aria-label={show ? "Hide" : "Show"}
          title={show ? "Hide" : "Show"}
        />

I have to thank Amnish again for providing valuable help and feedback for this PR. As someone still learning a lot about web development, I appreciate the opportunity to work on this issue and to learn about new components.

Issues

Re-asking Human message duplicates message

This is a bug I noticed recently, when using ChatCraft to help me debug other code I'm working on.

I haven't been able to locate the bug yet but it produces funny results. I'm hoping to solve it for next Release.

Add Markdown Renderer

This is an Issue I opened up for a potential feature. A couple weeks ago, I added nomnoml support to ChatCraft. ChatCraft renders previews for Mermaid and Nomnoml.

When working with Markdown in ChatCraft I noticed that Markdown isn't rendered in a preview like Mermaid and Nomnoml:

Chat available here

I don't know whether this is something the community wants, but I opened the issue in case. My classmate, Mingming, suggested we might be able to implement this by adjusting our react-markdown. This sounds more involved than the code I added for Nomnoml rendering, but I suppose I wouldn't mind giving it a shot.

Remaining Plans

There is now one more week remaining in my Open Source class. I already had some issues planned, but with the recent bugs I popped up I will be devoting my remaining time to fixing them:

If time permits, I hope to work on and possibly solve these issues as well:

ChatCraft Adventures #12, Slash Commands

Roy J. Wignarajah — Sat, 06 Apr 2024 04:56:55 +0000

ChatCraft Release 1.8 is available here.

ChatCraft Week 12 Recap

This week I started addressing some of the technical debt my classmates and I accrued during the past semester. I have quite a few code enhancements/bug fixes I plan to fix in April, but I've made a slow start.

Sheriff Duty 2: Electric Boogaloo

This week I also wear my Sheriff's hat for a second and final time. I described my first Sheriff duty experience earlier in this series, and it was nice to try it again this week. The largest portion of Sheriff duty is leading the weekly triage meeting, and I feel I did a better job than I did the first time around. Many of the Issues we planned to close in this milestone were completed, though I think I should have helped review more Pull Requests.

Pull Requests

Update Slash Command Handling

ChatCraft has a cool feature we call "slash commands", which start with a forward slash (/). Here's a list of current slash commands:

Typically, when you try to use a slash command that doesn't exist, like /invalidcommand, you receive a message telling you that command is invalid and showing you the list of valid commands:

What if you want to send something that isn't a slash command, but it starts with a forward slash?

ChatCraft creator Taras reported how his ChatCraft Chat crashed when he pasted the following block:

/workspaces/DeepStructure/misc/getsetup/add-to-notion.ts:181
        throw new Error(`Notion API call failed: ${await response.text()}`);
              ^


Error: Notion API call failed: {"object":"error","status":400,"code":"validation_error","message":"body failed validation: body.children[0].heading_1.rich_text should be defined, instead was `undefined`.","request_id":"f73a1254-1204-4610-9820-76f6890821dc"}
    at notionApiCall (/workspaces/DeepStructure/misc/getsetup/add-to-notion.ts:181:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at createHeadingWithText (/workspaces/DeepStructure/misc/getsetup/add-to-notion.ts:137:5)
    at updateOrAppendAiSummary (/workspaces/DeepStructure/misc/getsetup/add-to-notion.ts:113:5)
    at main (/workspaces/DeepStructure/misc/getsetup/add-to-notion.ts:192:5)

Node.js v20.8.1

My investigation

My first instinct was to replicate this error myself and to read the error. After replicating, I found this error using my browser's developer tools:

From this error, it was clear that a function called parseCommand was throwing an error. To determine where parseCommand was called, I used git grep
git grep:

After adding some console.log() calls and replicating the error a few more times, I was able to locate the bug to parseCommand() returning null because although the above block starts with a forward slash, it fails the slash command check (it contains a non-word character - special characters like ;, /, @ - after the [/command] block) in parseCommand:

My solution

Though the error is thrown by parseCommand(), the main issue is that ChatCraft interpreted every prompt that starts with a forward slash as a potential slash command:

Since the above error block starts off with a forward slash, if it is pasted by itself in a ChatCraft chat, it would be treated as a potential slash command, and throwing the error Taras observed.

I'll admit I took a while to figure out a good solution to this issue. Before this PR, routine for handling potential slash commands is as follows:

If prompt is a potential slash command (starts with forward slash)
- If the slash command exists attempt to run it
- Else, parse the invalid command using parseCommand then send a relevant message
Else, Pass prompt to LLM

Although the above error block starts with a forward slash, we don't want to treat it as a potential slash command, and instead, pass it directly the LLM. But how do we do that?

Initial Implementation

My solution was to update the isCommand() method to use stricter criteria for determining a potential slash command. I figured a good start was to reuse the RegEx used in parseCommand:

  // Checks if a string is a command.
  static isCommand(input: string): boolean {
    // Check if there's something resembling a command (no non-word characters in the portion after forward slash)
    const match = input.match(/^\/(\w+)(?:\s+(.*))?$/);
    return !!match;
  }

Final Implementation

Though this implementation worked, I felt I could do the same in one line, but I wasn't sure how. Fortunately, my class instructor Dave suggested a concise way to do this using RegExp.prototype.test(), which became my final implementation:

  // Checks if a string is a command.
  static isCommand(input: string): boolean {
    // Check if there's something resembling a command (no non-word characters in the portion after forward slash)
    return /^\/(\w+)(?:\s+(.*))?$/.test(input);
  }

Aftermath

These changes to isCommand() preserve the functionality of current (as they still satisfy the RegEx check in isCommand()), while allowing things like error blocks (that start with a forward slash) to be directly pasted into a ChatCraft message and sent to the LLM.

However, my update isn't perfect. If a user were to enter something like /badcommand@, instead of the website returning a message saying "badcommand@ is not a valid command", this is sent to the LLM as a message:

I hope I, or someone else can determine a more robust RegEx to use in isCommand().

Remaining Plans

With two weeks left, I hope to complete more code enhancement/bug-fix related issues.
Here are some issues I have planned:

ChatCraft Adventures Week #11, Vite Precaching, Keyboard Shortcuts, Nomnoml Rendering

Roy J. Wignarajah — Sun, 31 Mar 2024 05:17:21 +0000

ChatCraft Release 1.7 is available here.

I had a pretty productive week. I made three Pull Requests, and added a couple cool features I'd like to share with you today.

Pull Requests

Nomnoml Rendering Support

This is a Pull Request I started last week, but completed this week. This PR adds skanaar/nomnoml to let ChatCraft render nomnoml code in a preview.

You can try this feature yourself! On ChatCraft, just request a Nomnoml diagram from your selected LLM. You can also see the feature in action in this chat.

One thing I noticed is that depending on the LLM, you may receive nomnoml with syntax errors. When implementing this, I also noticed the nomnoml library doesn't provide options for a default theme. It would be really cool if I could change the default stylings for dark mode!

I'm proud of this feature. For a while I've been adding bug fixes and code enhancements, but until this PR I never added a feature. I can't take all the credit though. ChatCraft already renders Mermaid diagrams, so my strategy for this PR was to model my implementation off the already exiting Mermaid preview rendering feature.
Viewing the history of the MermaidPreview.tsx component took me to this commit that my class instructor, Dave, added last year. This commit helped inform how I should implement nomnoml preview rendering - what files to add, what files to make changes to and what changes to make.

/ Keyboard Shortcut to focus Chat Input

This is another cool feature I started last week and was able to complete this week. This feature adds a new keyboard shortcut that activates your current Chat's prompt input. If you want to quickly focus your prompt input, just press the forward slash key, /.

This feature is common on websites like YouTube and GitHub, but I never knew about it until this feature was requested for ChatCraft.

When implementing this feature, I originally wanted to make use of this handler for keyboard inputs. However, my initial implementation didn't seem to work, so I added this keyboard shortcut as a useEffect React Hook. Where to place this useEffect was a challenge. I wanted to place it such that the keyboard shortcut would work anywhere on the page, so added it to what I believed was the entire chat window component, ChatBase.

I'm pretty happy with this feature. I've never added keyboard shortcuts, so figuring out and learning how to do it was a fun experience.

Bug Fix: Non Precached Url

For a while, I noticed this error when opening my browser's developer tools on ChatCraft:

So I made an Issue for it and began investigating.

I can't say exactly how long I've seen this error, but even with this error present ChatCraft works just fine.
My investigation involved searching the error message on Google:

Uncaught (in promise) non-precached-url: non-precached-url

My search led me to this discussion, and then to this comment that contained the changes I had to make to fix this issue.

Explanation

I discussed this PR with my classmates earlier this week, and Dave helped me understand what this error was about.

ChatCraft uses vite-plugin-pwa to make ChatCraft a Progressive Web App (PWA). I don't exactly know what a PWA isFrom what I understand, making ChatCraft a PWA allows it to work and provide value even if the user's device isn't connected to the internet.

The error I fixed is related to workbox settings, located in a vite.config.ts. I'm still learning what workbox is, but for now I can say that in our case, the workbox configurations we have define what assets will be pre-cached.

The error was due to these settings expecting ChatCraft's index.html to be pre-cached. Though we precache some assets, we don't precache index.html. The changes I made tells the workbox not to expect index.html to be pre-cached, so the error no longer appears.

Plans for April

Any new code added is more code that must be maintained, whether through refactoring or bug fixes. This is often referred to as technical debt. There are three more weeks in my semester. In those remaining weeks I plan to help manage as much technical debt as I can.

ChatCraft Adventures #10

Roy J. Wignarajah — Sat, 23 Mar 2024 03:42:08 +0000

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:

Render the Shared Chat's "/c"-style URL instead of the "/api/share"-style URL
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.

ChatCraft Adventures #9 - Troubleshooting Bugs with git grep

Roy J. Wignarajah — Sat, 16 Mar 2024 04:12:58 +0000

This week in ChatCraft

Release 1.5

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

Pull Requests

Prompt Updating

I'm happy to share that this week, I was able to extract and get a version of my updated system merged. My change isn't perfect, but it's able to get GPT-3.5-Turbo to return inline math Markdown in KaTeX syntax instead of LaTeX Math mode. One concern we have with this merge is that it might encourage/cause an LLM to add KaTeX syntax into generated code, such as if it's writing code to do any math, but we'll be monitoring this in the coming weeks. The good thing about Open Source is that you can always iterate on and improve code. One thing I learned in my earlier Open Source class is that pursuing perfection often gets in the way of achieving any results at all, or in other words, perfect is the enemy of good. This current change may not be perfect, but it's good enough, and getting it merged means I can finally work on other issues and features.

Cannot Access Shared Bugs - Naive Fix

In a previous blog post, I reported an issue in which shared chats could no longer be accessed. Though a later Pull Request was able to fix the issue at first, some people in the team still had issues accessing their shared Chats. In a meeting this week, we were able to determine that these "broken" shared Chats would redirect to a link with this url pattern:
[website-url]/api/share/{user}/{id},
where {user} is the username of the user who created the chat, and {id} is the chat id.

These redirect url is accessed when the user clicks on one of their shared chats on the ChatCraft UI:

Attempting to access a chat this way returns a 404 error saying the route can't be found:

But the weird thing is, the chat exists, and can be accessed through this link if you enter it directly into your address bar:

This also showed us that the [website-url]/api/share/{user}/{id}-style URLs redirect to another url format, [website-url]/c/{user}/{id}}, which contains the actual chat.

My Investigation

I found the redirect behaviour of the [website-url]/api/share/{user}/{id}-style URL (the "api/share/" URL) to the [website-url]/c/{user}/{id}}-style URL (the "/c/" URL) interesting. Over the past couple of days, I decided to investigate this behaviour.

My first thought was to look at earlier versions of ChatCraft, before we encountered this bug. Luckily, the ChatCraft repo has a workflow that builds and deploys a preview of all branches. Using this feature I was able to find and access an earlier version of ChatCraft I could study.

I noticed that in earlier visions of ChatCraft, created Shared Chats wouldn't redirect to a "api/share/" URL, but rather directly to a "/c/" URL:

Once I figured this out, I spent the last couple days studying how this happened. I knew that both the "api/share/" and "/c/" URLs were both valid, leading me to investigate the API methods written for these routes. The git grep command was useful in showing me this code:

A quick note on `git grep`

I can't stress enough how useful git grep was not just for this issue, but most of my open source work. Whenever I'm investigating an bug, I'm able to find clues like routes (such as the "/api/share" and "/c/" route patterns) or keywords to lookup using git grep. If not for this command I would have spent a lot more time investigating this issue.

However, beyond this point my investigation methods became inefficient. I began littering the codebase with console.log() statements wherever the "api/share" and "/c/" routes were being fetched. I also ended up switching between two branches - one where the bug was present and one where it wasn't - to observe the differences between them. After a day and a half of doing this I was able to figure out the issue, but I wish I knew a better way to do this.

The issue - Chats created with a new url

Eventually, my investigation revealed to me that around a month ago, a PR was merged that changed Shared Chats would be created. Shared Chats created after this PR would be given the "api/share"-style URL in the UI, while those created before the PR were given a "/c/"-style URL.

After some more investigation, I discovered this was due to a new method, createDataShareUrl():

Within this method is another method, createShareUrl(), that returns a "/c/"-style URL:

In the PR, calls to createShareUrl() (when creating a Shared Chat) were replaced with createDataShareUrl():

This turned out to be why some users observed this issue while others haven't: Those who observed the issue were trying to access Shared Chats made after this PR (with the "/api/share" URL), and those who didn't were accessing old Shared Chats made before this PR (with the "/c/" URL).

An imperfect solution

With this in mind, I was able to come up with a fix that uses createShareUrl() to give Shared Chats a "/c/"-style URL as before. However, I don't think it's the best fix. This is because it's only a partial fix. If this PR is merged, new Shared Chats created afterwards will be directly accessible via the UI again, but what about the Shared Chats that already have a "api/share"-style URL? Those still can't be accessed from the UI.

My ideal solution

My ideal solution to this issue would be to figure out why "api/share"-style URLs don't work when accessed through the UI and to fix that issue directly, so that both "api/share" and "/c/"-style URLs work from the UI.

I hope to take another look at this issue in the future, but I'd also like to work on adding new features to ChatCraft.

Next week in ChatCraft

In ChatCraft release 1.6, I hope to add a new feature related to adding Images, or action a better fix for the Shared Chats issue if it's not as difficult as I think.

ChatCraft Adventures #8

Roy J. Wignarajah — Sat, 09 Mar 2024 02:59:59 +0000

This week in ChatCraft

Release 1.4

After a short hiatus, ChatCraft release 1.4 has been released and is available here:
This week has been slow for me. I've been stuck on my Pull Requests described in my previous blog post, and I haven't been able to contribute PR reviews or find new issues. I'm hoping to have these resolved quickly before they go stale, so I can devote more time to larger issues and features.

Pull Requests

Prompt Updating

In this Pull Request, I've updated the ChatCraft system prompt to return inline math in KaTeX, like it currently does with math markdown in its own block:

- When responding with math, inline or otherwise, I ALWAYS use KaTeX syntax in math Markdown by enclosing EVERY mathematical expression, equation, variable, and formula with double-dollar signs \`($$)\`, for example: $$O(n\\log n)$$, $$1024 * 1024 = 1048576$$, $$1024^2$$, $$X$$

This updated is meant to solve the issue of ChatCraft returning inline math expressions in LaTeX Math mode syntax:
(like $2^{20}$ instead of $$2^{20}$$).

With the new prompt, the GPT-3.5-turbo LLM seems to prefer returning inline math markdown as KaTeX, as seen in this conversation.

However, before this can be merged, we're worried that my updated prompt might instruct the LLM to use KaTeX syntax when returning code, which we don't want. We want the prompt to instruct the LLM to use KaTeX only when returning math markdown, and not to mix KaTeX syntax when returning code. I've tried to mitigate this by including the clause "When responding with math..." to the rule, but whether an LLM will properly follow these instructions can be hard to test. I'm hoping to receive feedback from my instructor or even the open source community.

Until working on this issue I never really considered using ChatCraft or ChatGPT for math, but I see the utility now.
I found that the updated prompt can address in-line Math Markdown, but it can fail when asking ChatCraft to describe scientific formulas, like the gas laws or the Michaelis-Menten formula.

In these conversations, ChatCraft fails to return individual variables in KaTeX syntax:

I originally had a second rule that fixes this issue:

- I NEVER wrap mathematical expressions, equations, variables, or formulas in round brackets, \`(\`, \`)\`. For example, instead of responding with (V_{max}), I would respond with $$V_{max}$$

...but I removed it because I was worried about introducing new ways for the LLM to give improper responses.
I'll need to clarify with the community whether this rule should be added back.

Dynamic Imports

This Pull Request involves dynamically importing a few large dependencies to reduce bundle size:

elkjs (for Mermaid)
cytoscape (for Mermaid)
katex (for Math rendering)

In an older PR, I tried dynamically importing the modules that use these dependencies:

mermaid
rehype-katex
remark-math

... but I found that dynamically importing rehype-katex and remark-math crashes my preview app due to a workbox error:

In the new PR, I was able to dynamically import mermaid, but the problem is mermaid is almost always needed, so dynamically importing it doesn't help much. elkjs and cytoscape are never directly called in the source code (at least according to git grep), and are only invoked through mermaid (as dependencies). I'm not sure if there's another way to dynamically import only these dependencies of mermaid.

I'll need some help dynamically importing rehype-katex and remark-math.

Plans for Release 1.5

In release 1.5, I hope to have these PRs revised and merged.
I'm actually thinking about postponing these PRs further so I can focus on a new feature I'd like to add, adding files to a ChatCraft conversation.

ChatCraft Adventures #7

Roy J. Wignarajah — Sat, 24 Feb 2024 04:42:25 +0000

This week in ChatCraft

Release 1.4

ChatCraft release 1.4 has been delayed. However, my classmates and I have been working on bug fixes, enhancements and new features.

This week has been slow compared to previous weeks. So far I've made
two Pull Requests

Pull Requests

Prompt Updating for inline KaTeX

ChatCraft can render math using the rehype-katex package, which renders KaTeX syntax. In most cases, the queried LLM will render Math in KaTeX, but sometimes inline elements do not.

My Pull Request involves a slight adjustment to the default prompt that instructs the LLM to also render any inline mathematical expressions as KaTeX by wrapping the expressions in double dollar signs.

This Pull Request still needs review and hasn't been merged, but I found it fun to work on. I'm using the OpenAI API for my college capstone project, so I've had some experience fine-tuning my prompts so the LLM (typically gpt-3.5-turbo) to respond as required.

Add Dynamic Imports for Mermaid and Math Rendering

Some packages/modules used in ChatCraft are large, and we'd like to import them dynamically. The focus of this PR was to dynamically import a few packages used for Math and Mermaid rendering:

Locally, my changes work, but when I pushed my branch to GitHub and tested my preview, ChatCraft doesn't load. This is something I hope to investigate and solve next week.

Plans for next week and, rest of the semester

This is the halfway point of my semester. At this point, I've been able to contribute small changes to ChatCraft. However, in the remainder of the semester I hope to contribute new code and features to ChatCraft. Some things I'd like to work on include WASM, and the ability to attach files to a chat.

ChatCraft Adventures #6

Roy J. Wignarajah — Sat, 17 Feb 2024 04:59:17 +0000

This week in ChatCraft

This week in ChatCraft, Release 1.3 has been completed, and is available here.

This has been a busy week for in terms of classes. Due to having to meet other deadlines, my PRs involved small code changes. However, I've been able to also discover issues and contribute reviews.

Issues

Searchbar Improvements

After provisioning my own OpenAI API key, I've been using ChatCraft a lot, perhaps too much:

With over 70 chats I was wondering how I'd quickly find previous chats. After asking in the Discord server, I was informed there was a search bar, but I couldn't find it.

The search bar might be easy for readers to find, but it took me a while to notice it. It was from this experience I looked for ways to make the search bar more visible/noticeable.

ChatCraft page moves up

After a recent Pull Request, I noticed that accessing saved chats pushes up the page:

Luckily, my classmate Amnish recognized the cause, as he researched and fixed a very similar issue for ChatCraft during Hacktoberfest 2023.
https://github.com/tarasglek/chatcraft.org/pull/445

In short, the cause was a new ChakraUI Menu that was missing the fixed CSS positioning strategy (from https://v1.chakra-ui.com/docs/components/overlay/menu).

Cannot access shared chats

After the same Pull Request, I noticed that ChatCraft crashes when accessing shared chats and using the search bar. Due to other commitments, I didn't have the bandwidth to investigate and solve the issue. Luckily, Dave, my class instructor, figured out the cause and made a PR that fixes the issue.

Reviews

Page Moves Up Solution

I had the pleasure of reviewing Amnish's fix for Issue 442, and reading the explanation for the fix on his blog.

Enable remote JS/TS execution using val.town endpoint

This Pull Request by Dave involved using the val.town /eval endpoint to run JavaScript/TypeScript remotely. I'm still learning about val.town so I don't know much at the moment, but it seems like a cool integration.

Pull Requests

This week, I've made two pull requests to ChatCraft

Search Bar Placeholder

Following up on the search bar issue I brought up earlier, I added placeholder text to the ChatCraft search bar. I'm not a UI/UX expert, but I figured ChatCraft would have a better idea. In a new ChatCraft conversation, I modified the system prompt to make ChatCraft an expert in UI/UX:

And then I asked ChatCraft (using gpt-4-vision-preview via the new Image Input feature) to make recommendations for improvement, one of which was adding placeholder text.

ChatCraft made other suggestions that would improve the overall search functionality and overall experience, although most of them (besides placeholder text) wouldn't necessarily improve the search bar's visibility. Perhaps I could specifically ask for suggestions for improving visibility.

Adding Twitter Card Metadata to ChatCraft.org

Previously, ChatCraft links posted on Twitter wouldn't be rendered into a Twitter Card. The ChatCraft page already contained OpenGraph metadata but it wasn't enough for Twitter to render a Summary Card (it was missing an og:type property):

I initially added an og:type meta tag, but ultimately also added the required Twitter Tags for robustness:

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="chatcraft.org" />
    <meta name="twitter:description" content="Web-based AI Assistant for Software Developers" />
    <meta name="twitter:image" content="https://chatcraft.org/favicon-32x32.png" />

I also added these new meta tags to the share logic, so shared chats can also be rendered into Summary Cards:

  setMetaContent(clonedDocument, "name", "twitter:card", "summary_large_image");
  setMetaContent(clonedDocument, "name", "twitter:title", "chatcraft.org");
  setMetaContent(clonedDocument, "name", "twitter:description", chat.summary);
  setMetaContent(
    clonedDocument,
    "name",
    "twitter:image",
    "https://chatcraft.org/favicon-32x32.png"
  );

Now ChatCraft can be rendered in a Twitter Card:

Missing Image

You'll notice the Twitter Card is missing an image.
This is not a complete fix, as there's no image in the Twitter Card. I originally wanted to use a Summary Card with the ChatCraft logo as an image, but it doesn't meet the minimum image size requirments.

In future work, we're looking into using a screenshot of the final message as the card image.

Next week in ChatCraft

Next week, I hope to have more time to make larger contributions to ChatCraft.

ChatCraft Adventures #5

Roy J. Wignarajah — Sat, 10 Feb 2024 00:07:39 +0000

This week in ChatCraft

This week in ChatCraft, Release 1.2 is complete, and is available here for those interested.
The ChatCraft community has worked hard to push many changes and an awesome new feature to ChatCraft second release.

New Feature - Image Input

One new feature I'm excited to share with you today Image Input, prepared by my classmate Mingming. Since November 2023, Mingming has been working hard to polish and push this feature into ChatCraft, and his hard work has paid off.

This feature uses GPT-4 with Vision (model name gpt-4-vision-preview) to allow the model to analyze and discuss input images:

You can attach images to the prompt either by clicking on the paperclip icon or by pasting it into the prompt window using Ctrl+V. For a better idea, please take a look at the conversation I screenshotted above.

Sheriff Duties

In my last blog post, I briefly discussed Sheriff duties and my first Sheriff duty experience. This week, I have relinquished and passed on my Sheriff duties to my classmate Rachit. With my duties passed on, this week was more relaxing for me, although I still try to remain available on the Discord server.

Pull Requests

For this week, I've contributed two Pull Requests to ChatCraft: a UI fix and a packaging task.

UI Fix: Broken Iframe Autoresize

You can ask ChatCraft to generate HTML files for you, and ChatCraft will render and preview those HTML files to you (conversation available here):

The HTML preview is contained in an IframeResizer, which we want to automatically resize to fit HTML previews content.

The issue here was the last line that could fit in a preview would be cut off:

My solution

The IframeResizer heightCalculationMethod option calculates the iFrame height by converting the body margin to px then adding the top and bottom figures to the body tag's offSetHeight (bodyOffSet).

There are four main possible values for heightCalculationMethod:

(default) bodyOffset uses document.body.offsetHeight
bodyScroll uses document.body.scrollHeight
documentElementOffset uses document.documentElement.offsetHeight
documentElementScroll uses document.documentElement.scrollHeight

There is also a heightCalculationMethod value of max, which uses the largest value of the above 4. I found that using a heightCalculationMethod value of max fixes the issue by rendering the entire content. Rendering the entire content eliminates the need of a scrollbar in these preview renders, so I removed the scrollbar as well.

Publishing Task: Package and Publish github-to-sops to PyPI

This task isn't exactly a ChatCraft feature, but it's an important part of our secrets management. ChatCraft uses sops to manage and share secrets, and the owner, Taras wrote github-to-sops to make working with sops easier.

You can clone and use github-to-sops on your local machine, but wouldn't it be better to install it with pip instead? With my Pull Request, I was able to package and ship github-to-sops to the Python Package Index (PyPI). You can see its entry here.

How I packaged a Python Package for the first time

Packaging Python packages for PyPI requires a specific kind of project directory structure that github-to-sops didn't have at the time. Before I could publish github-to-sops to PyPI I had to first modify its directory structure. I don't often write programs in Python, so this task would've been very difficult to do on my own. This would end up being the first Python Package I've published, and ironically it's not one I developed myself.

Publishing to PyPI with Simonw's CookieCutter Template

Luckily, Simon Willison (django co-creator) created a cookiecutter template that creates a Python project with a suitable directory structure and all files required to publish a Python project to PyPI. The template even generates two workflow files - one for unit tests and another one that publishes GitHub releases to PyPI. Simon wrote more details on his template in this blog post.

This template provided two important things:

An appropriate package directory structure
A publishing workflow

The publishing workflow was especially helpful, as it automatically publishes new GitHub releases. Thanks, Simon!

To package github-to-sops, I used Simon's template to generate a sample GitHub project, and then I copied appropriate files and mimicked the directory structure in github-to-sops. One thing github-to-sops doesn't require at the moment is unit tests (though it'd be nice to have!), so testing-related artifacts were not copied over. This also required removing the test step in the publish workflow.

Iterating on initial releases

Using Simon's template, I was able to successfully package and publish github-to-sops to PyPI, but version 1.0.0 had a major issue: it was published as a namespace package that you would import in Python code. This wasn't ideal, as github-to-sops is a command-line tool.

To fix this, I would have to somehow package github-to-sops as a command-line tool. Simon's template brought me far enough, it was time for me to research and experiment the rest of the way. Ultimately, it was a combination of documentation and conversations with ChatCraft that helped me figure it out.

After renaming folders and properly setting up custom discovery I was able to get github-to-sops packaged to PyPI as a command-line tool (version 1.1.4):

I must admit that this process was frustrating at times, but the sense of accomplishment I felt after pulling it off was well worth it, and I now have a better idea of packaging and publishing to PyPI, thanks to Simon and ChatCraft.

Next week in ChatCraft

Next week, I'll be looking into extending Mingming's Image Input feature with text file inputs. Stay tuned until then.

ChatCraft Adventures #4

Roy J. Wignarajah — Sat, 03 Feb 2024 04:15:02 +0000

ChatCraft Week 4

ChatCraft First Release

Today marks the completion of Release 1.1.0 of ChatCraft. In this release, my colleagues and I shipped various new features and UI changes. For now, releases mainly serve as project milestones, but it is available here for those interested.

This week also marks some 'firsts' for me in terms of leadership roles, mainly playing as a project 'Sheriff' and leading triage meetings.

My First Sheriff Experience

Each week, someone in my class takes on the role of Sheriff. The Sheriff's role is to steward a project and to help developers get their code shipped to the project cleanly, without breaking any tests, CI or infrastructure. The Sheriff isn't meant to fix every problem, but should help shine a light on problems and coordinate efforts to make fixes and ensure decisions are made quickly.

This week is the first week Sheriff duties are passed to students, and I ended up volunteering to take on the first week of duties. I still have a few days left of Sheriff duty, but for now I'll write on my duties so far.

My First Triage Meeting

It's important to keep a project in an active, healthy state. This includes:

reviewing list of open issues
ensuring pull requests are reviewed in a timely manner
unblocking people from accomplishing tasks
ensure any stuck issues/pull requests are identified and resourced

Holding a Triage meeting is one way to fulfilling the above. For my class, each triage meeting is run by the Sheriff for the week. Since I'm the Sheriff for this week, this was my first time running a triage meeting

My experience

In past classes, I've passively led group project meetings (led meetings when no one else wanted to). However, this was my first time actively leading a meeting like this.

When leading the triage meeting, I tried to focus on unblocking people from getting their work done. If people can't finish their pull requests for whatever reason, pull requests can go stale and a project can eventually become inactive. So for this meeting I checked the status of active Pull Requests and tried to assign resources (assign classmates as PR reviewers or provide expertise on a certain topic) to get Pull Requests merged by the end of this milestone.

Along with running the triage meeting, I also had to keep track of active issues/PRs for this week's release. If an Issue or PR was losing traction, I've been able to ping classmates on Discord or Microsoft Teams for status updates. In one case I reviewed a PR to get conversations started.

However, one close call occurred on my first day of Sheriff duty. My classmate Amnish added a really cool Text-to-Speech feature to ChatCraft, but a bug was discovered after shipping that caused the text-to-speech to play even when disabled, but I was preparing dinner at the time and didn't think to check the feature after it was merged. I'm fortunate and glad that my colleagues were available to identify and quickly resolve the issue, but I think in that moment I didn't live up to my role as Sheriff. In future Sheriff duties, I will check the repo and Discord server more frequently.

Contributions

Apart from my Sheriff duties, this week I contributed some UI fixes to ChatCraft. I chose UI changes because I felt they are good first issues to contribute to. It's often easy to locate where small changes are required, and if I need help, ChatCraft is available to push me in the right direction.

Pull Requests

Margin correction between button and content

ChatCraft can render previews of HTML code, and there is a button available that lets you open the code in a new window, but the button previously cut into the preview content:

My Pull Request corrected the margin between the button and the preview content:

Remove keyboard hints on mobile edit form

You can edit queries in a ChatCraft conversation. The edit form shows a keyboard shortcut for saving your edited query, but this shortcut will clutter mobile screens:

A React hook was previously implemented that detects whether the user is on a mobile device (in ChatCraft, mobile devices have a width equal to or below 480px). This hook is already used in other components, so in my Pull Request I reused the hook to conditionally render the keyboard shortcut on non-mobile devices only:

So far I've been using ChatCraft exclusively on desktop. However, I think it would be great to provide an amazing mobile experience to users.

Next week

Next week I hope to contribute another UI fix and to work on slightly larger issues.

ChatCraft Adventures #3

Roy J. Wignarajah — Sat, 27 Jan 2024 03:57:00 +0000

This week I've been getting more involved in ChatCraft's development.
This is what I've done so far.

How I've been using ChatCraft

To identify improvements or potential new features for ChatCraft I've been playing around with ChatCraft. Sometimes I ask ChatCraft to generate random code, but I've also found it helpful for my classwork.

For example, in my capstone project I'm making a web app with my group. Part of our first sprint was initializing our app and setting up Customer Identity and Access Management (CIAM) using Amazon Cognito.

In a previous course I've integrated AWS Cognito with a barebones web app (simple HTML pages with no framework). However, my group is using NextJS to write our project, which requires different steps for integration. Integration involved using NextAuth.js, which I've never used before.

I was able to do most of the integration, but in the end I encountered an issue, in which logging out of the web app doesn't actually sign the user out of the Cognito user pool.

ChatCraft was able to help me figure out the issue, and even suggested the fix for my code. My conversation with ChatCraft is available here.

Pull Request Reviews

My classmates have been working on various feature additions and chores on ChatCraft. I've had to chance to review a couple of them.

Text to Speech (TTS) Support

Speech synthesis/text-to-speech produces speech from text, and my classmate Amnish is working on a version of text-to-speech support in ChatCraft. I wasn't comfortable speaking on the new code, as I wasn't familiar with OpenAI's audio API. I instead played around with the build and tested the UI and text-to-speech features.

Open Code in New Window

Previously, when ChatCraft generates wide code it can be hard to see on ChatCraft:

My classmate, Yumei, made a recently-merged PR that adds a button that opens code in a new tab:

When reviewing this PR, I was able to find a small UI bug. As a dark-mode user, I noticed the new button was missing a dark mode coloring:

By looking at how the other buttons are coloured in dark mode, I was able to suggest a solution to this bug and become more familiar with ChatCraft's code.

Image as Input

This is a really neat feature my classmate Mingming has been working on. It allows you to send images as input to ChatCraft.
Here's what it looks like in action:

It's a really cool feature, although I wasn't comfortable enough to review the code. For now, I've only reviewed the functionalities and UI.

Issues

Playing around with ChatCraft has helped me brainstorm potential features or UI changes. For now I've been identify one possible UI change. When ChatCraft generates code like HTML, it also renders a preview that you can open in a new tab. However, I noticed that the button that opens the preview protrudes into it:

Another issue I'm working on is ensuring keyboard hints don't appear on mobile.

I hope to have PRs for these issues submitted this weekend.

DEV Community: Roy J. Wignarajah

ChatCraft Advenures #14: ChakraUI Troubles, My First Revert, and Final Recap

ChatCraft Release 2.0

Pull Requests

How to revert a commit

Backing out a change

Location, location, location

useToast() vs toast()

Issues

OSD700 Recap

Comparison to Previous Open Source Work

1-2 PRs in other projects vs multiple PRs in ChatCraft

Working on an active project

Instant vs. non-instant communication

Triage meetings

Sheriff duty

Secrets management using sops

My contributions

Bug Fixes

Enhancements

Features

Regrets

How I used ChatCraft

My thoughts on OSD700 (Open Source Development II)

By a stroke of luck

Next Steps

ChatCraft

Thank you

ChatCraft Adventures #13, UI Changes

ChatCraft Week 13 Recap

Pull Requests

Solution

Solution

Issues

Remaining Plans

ChatCraft Adventures #12, Slash Commands

ChatCraft Week 12 Recap

Sheriff Duty 2: Electric Boogaloo

Pull Requests

My investigation

My solution

Initial Implementation

Final Implementation

Aftermath

Remaining Plans

ChatCraft Adventures Week #11, Vite Precaching, Keyboard Shortcuts, Nomnoml Rendering

Pull Requests

Explanation

Plans for April

ChatCraft Adventures #10

ChatCraft Release 1.6

Pull Requests

Recap

404 Error

My original solution

My new solution

Current Work

Current progress

Next week in ChatCraft

ChatCraft Adventures #9 - Troubleshooting Bugs with git grep

This week in ChatCraft

Release 1.5

Pull Requests

My Investigation

A quick note on git grep

The issue - Chats created with a new url

An imperfect solution

My ideal solution

Next week in ChatCraft

ChatCraft Adventures #8

Release 1.4

Pull Requests

Plans for Release 1.5

ChatCraft Adventures #7

This week in ChatCraft

Release 1.4

Pull Requests

Plans for next week and, rest of the semester

ChatCraft Adventures #6

This week in ChatCraft

A quick note on `git grep`