I want to test Bard, ChatGPT, and Bing; they will try to help me refactor a component that wraps around another one. The code is for a simple alert notification component made in a Next.js app (React) using TypeScript.

I coded this component a while back while learning about React hooks, and I strongly believe it has a lot of room for improvement.

Working Code (Bad Code)

import { useEffect } from "react"
import { useState } from "react"
import { useTimeout } from "usehooks-ts"


function AlertContainer({
    msg,
    delay = 4000,
    s__msg,
    badgeClass="ims-badge-faded",
}: any) {
    useEffect(()=>{
        if (msg == "") return

    },[msg])
    const onHide = ()=>{
        s__msg("")
    }

    if (msg != "") {
        return <AlertNotification s__msg={s__msg} delay={delay} onHide={onHide} alertMsg={msg} badgeClass={badgeClass} />
    }
    return <></>
}

/**
 * Primary message to user with crucial information
 */
export function AlertNotification ({
    onHide=()=>{}, delay=4000, badgeClass="ims-badge-faded", alertMsg="",s__msg,
}: any) {
    const [visible, setVisible] = useState(true)

    const hide = ()=>{
        s__msg("")
        setVisible(false)
        onHide()
    }
    // console.log("delay", delay)
    // useEffect(()=>{
    useTimeout(()=>{
        if (!!delay) {
            hide()
        }
    }, delay)
// },[delay])

    if (alertMsg == "") return <></>
    return (
        <div className={
                `${visible ? (!!delay ? "appear-once-4 " : "appear-appear ") : ""} appear-hiding pos-fixed top-0 left-50p mt-3 z-999 translate-x--50`
            }
        >
            <div className={` ${badgeClass} px-3 py-2`}>
                {alertMsg}
            </div>
        </div>
    )
}

export default AlertContainer

To compare the responses of different AI Tutors, I will send the same prompt to each one and add the sentence "think about this" to encourage a general response.

I am expecting a good explanation of the code in the style of a documentation page.

ChatGPT

Bing

Bard

I chose the versions I did because they are all free and open versions of LLMs. GPT-4 is likely to give the best results at the current time, but I’m solely testing free products to provide a reference for the price-quality ratio.

Additionally i tested vicuna13b and gpt4all.

Vicuna

GPT4All

10 minutes later...

Refactoring

Clearing the chat history when generating code is important, as the iterative nature of past messages affect the accuracy of achieving a 0-error code.

Now I'll explain my thinking process on coming up with a good first prompt, then follow the same prompts after in the same order to get me to a decent production ready result straight out of the tutor's response.

As per my previous experiments i have a 3 step process in mind to get to a good result.

First thing is straight up send the code in quotes so the tutors understand the limits of whats text and whats code with the context, a code description and a goal. As you you may guess we'll use one of the descriptions given to us by the tutors themselves on a previous life.

New First Prompt:

The code provided is a React component that displays an alert message to the user and dissapears thnks to a css class plus some react hooks logic. im using typescript
your task is refactor the code so that the duration is not only 4000ms, fix the logic and make it more dynamic
generate only the code snippet with a optimized version of the components

code:"""
// ... code
"""

Secondly, if an answer has more than five errors after the first prompt, I do not attempt to fix them manually. Instead, I send a second prompt that says "The code you gave me has errors. Please detect and fix them."

However, I have not had good results with this approach after many attempts. It seems that code generation is currently more advanced than code refactoring using LLMs.

In future tests, I plan to completely abstract the component's idea in order to generate good and clean code from scratch. I believe that this will be a better approach for "refactoring" code as long as the logic is simple and probably done before. Past experiments have hinted to the fact that the current state of intelligence provided by free LLMs alternatives is on par with previously posted code on stackoverflow, reddit, github or other code-sharing platforms.