ChatCraft Adventures #13, UI Changes
Tags: beginners, opensource
Published: 2024-04-13 04:21:02

[ChatCraft](https://chatcraft.org/) Release 1.9 is available [here](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.9.0)

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

This Pull Request fixes a bug my class instructor, Dave, [noticed when using ChatCraft on mobile]
(https://github.com/tarasglek/chatcraft.org/issues/569):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52p2521lm82lt1spcrlu.png)

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](https://dev.to/rjwignar/chatcraft-adventures-4-50o7), I described how I fixed a [similar issue](https://github.com/tarasglek/chatcraft.org/issues/289) by using the [useMediaQuery react hook](https://github.com/tarasglek/chatcraft.org/blob/main/src/hooks/use-mobile-breakpoint.ts).

In my Pull Request, I used the `useMobileBreakpoint()` to define a different set of behaviours for Toast messages to follow when on mobile:
```github
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](https://v2.chakra-ui.com/) component library, and one of these components is the [Toast component](https://v2.chakra-ui.com/docs/components/toast/usage) which provides user feedback using messages that pop up, as though coming out of a toaster:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgrvcirq0ulei7gk2a2z.gif)

The Toast component has [props](https://v2.chakra-ui.com/docs/components/toast/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](https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts). 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](https://dev.to/amnish04) for this suggestion.

Sometime after this PR was merged, my classmate, [Katie](https://dev.to/katiel), reported a [bug](https://github.com/tarasglek/chatcraft.org/issues/586) that traces back to this PR. I hope to investigate and solve this bug soon.


### [Replaced Show/Hide button with Eye ReactIcons](https://github.com/tarasglek/chatcraft.org/pull/579)

This Pull Request is a small enhancement of my Katie's feature that [adds support for Custom Providers](https://github.com/tarasglek/chatcraft.org/pull/530).

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

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

Following feedback from Amnish, changing the Show/Hide button to eye [IconButtons](https://v2.chakra-ui.com/docs/components/icon-button/usage) was a proposed enhancement.

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

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

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

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

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

This is an Issue I opened up for a potential feature. A couple weeks ago, I added [nomnoml support](https://github.com/tarasglek/chatcraft.org/pull/526) to ChatCraft. ChatCraft renders previews for [Mermaid](https://mermaid.js.org/) and [Nomnoml](https://www.nomnoml.com/).

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

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

Chat available [here](https://chatcraft.org/c/rjwignar/9Dkbq_a17U4Grso2WQutb)

I don't know whether this is something the community wants, but I opened the issue in case. My classmate, [Mingming](https://dev.to/mingming-ma), suggested we might be able to implement this by adjusting our [react-markdown](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#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:
- [Error Alert Toast Bug](https://github.com/tarasglek/chatcraft.org/issues/586)
- [Re-asking Human message duplicates message](https://github.com/tarasglek/chatcraft.org/issues/587)

If time permits, I hope to work on and possibly solve these issues as well:
- [Don't show 'free mode' banner when multiple providers set](https://github.com/tarasglek/chatcraft.org/issues/544)
- [Add share_target support](https://github.com/tarasglek/chatcraft.org/issues/451)