Adding Chat

CodeCook.live is built with Supabase on the backend, which has realtime available. Hopefully this will go quick!

I use Cursor to add some migrations to my local Supabase. I add a new chat_messages table and a new chat_enabled column to my sessions table. Cursor writes the sql and I do a single pnpm db:local:migrate to run the migration.

Next up some frontend. I get Cursor to add a simple toggle switch to the UI.

Next we will create a chat window component. I want it to sit on top of the ui, be draggable and collapsible. Cursor and Claude are working on it as I type (agent mode of course). It finishes up but not seeing the window appear. After a little back and forth (like 2 prompts) the css positioning issue is fixed and we have a chat window.

Next up, we generate the components, types and server actions. Had to do some more backend adjustments but it is basically working now at least on the admin side.

Next up, we can add a read-only view for people on the session page. Had to do some refactoring but we got it working. WOOT!

The look isn’t quite what I want though. I prompt Cursor with “I want to refactor the chat interface to be a twitch chat drawer on the right that pushes the content over” but unfortunately after several prompts it has trouble with the implementation. Ultimately, it takes some actual manual coding (😱 the horror!!!) to get it right.

Next up, I want to allow people to actually chat back at me. I don't want to force people to sign up with full accounts. I’ve already got the site set up for ReCAPTCHA with the waitlist, so I’m going to use that to gate chat participation.

Cursor does a pretty good oneshot at the UI.

Next prompt: I think we need a way in supabase to store guestChatUsers. What do you propose?

In response, Cursor creates a migration file with sql code to create a new guest_chat_users table and apply an update to my existing chat_messages table. You can apply these updates directly in the terminal in Cursor so that Cursor can see the output. In this case it added a foreign key reference to the guest_chat_users table's id column before creating the primary key constraint.

In general, I find that it is good to have all the backend sql for creating your tables in the codebase. However when using Cursor to write migrations on supabase, it tends to make things overly complicated, with triggers and other things that may not be necessary. Also it frequently may try to use deprecated or old packages because its training model isn't up to date.

As always, be sure to scrutinize the generated code closely, especially the critical backend aspects.

For example, when creating the original table for chat_messages it set a requirement that there be a user_id which does not exist for a guest_user. This then caused a User not found error when the guest account would send a message. Cursor was not able to figure the fix for the bug on its own.

Ok not as quick as I had hoped, but eventually, it works!

OK I think I can wrap this up here. In my next CodeCook session, I’ll have chat enabled.