ChatCraft 2.0 is almost Here!

That's right. The BIG 2.0 release for ChatCraft is scheduled by the end of next week. We have been working to build on ChatCraft's existing functionality in its v1.0 state for almost 13 weeks now, and have successfully added lots of cool features (even this post's cover photo is generated by ChatCraft).

However, adding these features in such a short span of time has also led to some technical debt that needs to be cleaned up and subtle bugs that need to be fixed so any future contributors have a good experience working on this project.

This week, I did some of the refactoring work, fixed a bug and also helped my peers to do the same by reviewing their PRs and help wherever possible.

In this post, I will be briefly talking about what I've been up to, and what I plan to do this upcoming week so we can make our 2.0 release a success!

Table of Contents

 1. Fixing a Web Handlers related bug
 2. Refactoring PasswordInput Component
 3. Reviewing other PRs
 4. Next Plans

Fixing a Web Handlers related bug

For the past few weeks, I had been working on adding a new feature called Web Handlers to ChatCraft. Even though there are many more ways to still extend that feature, I think its a good time to fix any bugs introduced with it before for now since a major release is coming up.

The issue was that when the user changed any of his previous messages and pressed Re-Ask button, it would not invoke any Web Handlers even if the updated prompt text matched with one of the registered handlers' match pattern.

The reason for this happening was that prompt text was not at all being passed to the resubmit function which led to the message being sent to LLM by default.

Hence, the fix was as simple as follows:

Refactoring PasswordInput Component

Recently, support for custom AI providers was added to ChatCraft and in implementing the UI for providers selection, changes were made to the existing RevealablePasswordInput component to make the appearance ideal for a particular use case.

However, I felt that the code had some design issues.

This is what it looked like:

import { useState, type ComponentPropsWithRef } from "react";
import { Input, InputGroup, InputRightElement, Button } from "@chakra-ui/react";

type PasswordInputProps = ComponentPropsWithRef<typeof Input> & {
  inputSize?: "sm" | "md";
  isInvalid?: boolean;
};

function PasswordInput({ inputSize = "md", isInvalid, ...props }: PasswordInputProps) {
  const [show, setShow] = useState(false);

  const paddingRight = inputSize === "sm" ? "2.5rem" : "4.5rem";
  const paddingLeft = inputSize === "sm" ? "0.4rem" : undefined;
  const inputFieldSize = inputSize === "sm" ? "sm" : "md";
  const buttonSize = inputSize === "sm" ? "xs" : "sm";

  return (
    <InputGroup size={inputFieldSize}>
      <Input
        {...props}
        pr={paddingRight}
        pl={paddingLeft}
        type={show ? "text" : "password"}
        focusBorderColor={isInvalid ? "red.500" : "blue.500"}
        borderColor={isInvalid ? "red.500" : "gray.200"}
        isInvalid={isInvalid}
      />
      <InputRightElement width={paddingRight}>
        <Button variant="ghost" h="1.75rem" size={buttonSize} onClick={() => setShow(!show)}>
          {show ? "Hide" : "Show"}
        </Button>
      </InputRightElement>
    </InputGroup>
  );
}

export default PasswordInput;

1. Programatically determining styles based on other styles and hard coding values inside component caused tight coupling between different styles making it hard to reuse in other cases in the future. (Would need to add more if statements every time a new appearance was required)

2. In a way, it overrode Chakra's in-built styling system which is not good.

Which is why I created a Pull Request to refactor that part.
I tried to make use of Chakra's own design system as much as possible turning it into a more generic wrapper around the regular Input component provided by Chakra.
In other words, PasswordInput now behaves more like a component provided by Chakra itself since most of the styles/props are being mapped directly.

Reviewing other PRs

I also reviewed some Pull Requests opened by other contributors.
Here's a list with hyperlinks.

1. Replaced Show/Hide button with Eye ReactIcons
2. Feed icon should open raw feed in a new tab
3. Fix toast message width for mobile devices

You can take a look if interested.

Next Plans

With all these contributions and many more, we were able to do a minor v1.9.0 release taking us one step closer 2.0.

We are very close to a successful major release 😎

Who else is excited? Any ChatCraft users here? Share your thoughts in comments!