ChatCraft Adventures #6

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.