ChatCraft Adventures #3
Published: 2024-01-27 03:57:00

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](https://aws.amazon.com/pm/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](https://nextjs.org/) to write our project, which requires different steps for integration. Integration involved using [NextAuth.js](https://next-auth.js.org/), 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](https://chatcraft.org/c/rjwignar/V1Y6R3BuEDYVlvTiGbY-N).

## 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](https://en.wikipedia.org/wiki/Speech_synthesis) produces speech from text, and my classmate Amnish is working on a version of [text-to-speech support in ChatCraft](https://github.com/tarasglek/chatcraft.org/pull/357). I wasn't comfortable speaking on the new code, as I wasn't familiar with [OpenAI's audio API](https://platform.openai.com/docs/guides/text-to-speech?lang=node). 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0i8hed7a6b5yk51qu19.png)

My classmate, Yumei, made a recently-merged PR that adds a button that [opens code in a new tab](https://github.com/tarasglek/chatcraft.org/pull/361):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8oyee5gbnqujvtpzobf.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifghf9e9p6dgj2l5s3t4.png)

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](https://github.com/tarasglek/chatcraft.org/pull/286).
Here's what it looks like in action:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk7r8du6n9givvny0f4z.png)

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](https://github.com/tarasglek/chatcraft.org/issues/367):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddobadyhdlk9noph4vxi.png)

Another issue I'm working on is [ensuring keyboard hints don't appear on mobile](https://github.com/tarasglek/chatcraft.org/issues/289).

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