ChatCraft Adventures #6
Tags: beginners, opensource, openai
Published: 2024-02-17 04:59:17

## This week in ChatCraft

This week in ChatCraft, Release 1.3 has been completed, and is available [here](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.3.0).

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](https://openai.com/blog/openai-api) key, I've been using ChatCraft a lot, perhaps too much:

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

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.

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

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

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

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

Luckily, my classmate [Amnish](https://github.com/Amnish04) recognized the cause, as he researched and fixed a very similar issue for [ChatCraft during Hacktoberfest 2023](https://dev.to/amnish04/no-backing-away-when-hacking-away-2h27).
https://github.com/tarasglek/chatcraft.org/pull/445

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

### [Cannot access shared chats](https://github.com/tarasglek/chatcraft.org/issues/446)

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](https://github.com/humphd), my class instructor, figured out the cause and made a [PR](https://github.com/tarasglek/chatcraft.org/pull/469) that fixes the issue.


## Reviews

### [Page Moves Up Solution](https://github.com/tarasglek/chatcraft.org/pull/445#pullrequestreview-1876787728)

I had the pleasure of reviewing Amnish's fix for [Issue 442](https://github.com/tarasglek/chatcraft.org/issues/442), and reading the explanation for the fix on his blog.

### [Enable remote JS/TS execution using val.town endpoint](https://github.com/tarasglek/chatcraft.org/pull/403#pullrequestreview-1881446322)

This Pull Request by Dave involved using the [val.town](https://www.val.town/) [/eval endpoint ](https://docs.val.town/api/eval/) 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](https://github.com/tarasglek/chatcraft.org/pull/448)

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:

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

And then [I asked ChatCraft](https://chatcraft.org/c/rjwignar/oOes55CNAXukfvwrofjxL) (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](https://github.com/tarasglek/chatcraft.org/pull/459)

Previously, ChatCraft links posted on Twitter wouldn't be rendered into a [Twitter Card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards). The ChatCraft page already contained [OpenGraph](https://ogp.me/) metadata but it wasn't enough for Twitter to render a Summary Card (it was missing an `og:type` property):

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

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

```html
    <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:

```js
  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:

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

### 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.