allyourbot / hostedgpt Goto Github PK

Demo here: https://youtu.be/4f4VlQwiBs8

• Ability to upload by manually upload, pasting from clipboard, or drag-and-drop

• Cmd+Enter to submit a chat
• Focus the chat input with the existing shortcut + /
• Close the sidebar with the existing shortcut + Cmd+.
• Something to start a new conversation

https://www.stimulus-components.com/docs
https://github.com/stimulus-use/stimulus-use

When you resize the browser such that the last message is no longer visible in the viewport, it should either auto-scroll down or the scroll-down arrow should appear. I'm not sure which would be the ideal behavior. The risk of auto-scrolling down is that we'd only want to do that if you were definitely scrolled to the bottom of the page because you could have scrolled a specific message into the viewport for reference — you resize your browser — then we jump you down.

Ideal behavior would be: know if you're at the bottom of the page w/ a hidden scroll down arrow, if so then when the browser resizes we re-scroll you down.

Next best behavior: when the browser resizes, we just re-run our logic for determining whether to show the scroll-down arrow.

https://stevepolito.design/blog/rails-authentication-from-scratch

https://rubyonrails.org/2023/10/5/Rails-7-1-0-has-been-released

https://api.rubyonrails.org/classes/ActiveSupport/CurrentAttributes.html

• Streaming responses
• Proper formatting of responses (e.g. markdown) with copy links
• Can create new conversations

A v1 of this could simply be an ILIKE query. But it would be really nice to support some fuzzy matching so people don't have to type a word exactly in order to find it in a past conversation.

Check out the pg_search gem to see if it can help? Someone suggested this.

Also, it's an open question as to where this lives in the UI. I think the basic approach would be a permanent text input below the list of assistants and above the list of conversations. As soon as you start typing and pause for more than X00 milliseconds then it executes a search and replaces the conversation list with the search results.

That's just some quick thinking off the top of my head.

I don't really know what to do here. The turbo docs say that a failed form submission should return Unprocessable Entity, but we don't have a way to re-render the page with the modal popped up.

The correct solution may be easier when we move the modal out of the conversation view and into the layout, but I don't know if it's smart to start showing a modal from a controller flag.

To experience this feature, hover over a conversation in ChatGPT, click the "...", and select Rename.

It gives you a nice textfield right inline and lets you edit the title.

You can cancel the edit by pressing ESC or clicking outside the text field. You can submit the change by pressing ENTER. We should support all this same behavior.

One intentional design difference is that ours is a pencil icon that appears when you hover over the conversation name. You can click this pencil icon but nothing currently happens. That's the behavior we need to implement.

Suggested implementation:

• The left sidebar renders the conversation list with _conversation.html.erb. Within this view partial you can wrap the whole thing in a turbo-frame.
• The edit form can be rendered inline and this can be views/conversations/edit.html.erb. Once you wrap conversation in a turbo-frame then clicking the pencil will, by default, replaces the turbo-frame with the destination (i.e. this form). Then submitting this form will replace the turbo-frame again should redirect to conversation/show which would simply embed the same _conversation partial.
• You can reference the new_message_controller.js for an example of how to handle form submissions. There is also a form_controller.js in our code, generated by rails initially, but I don't think this is being used for anything. At some point we should generalize form handling and move it into form_controller.js but it's probably easier as a v1 to create edit_conversation_controller.js and just model it off of new_message_controller.js. We can create a generalized form handler as patterns emerge.

I'll assign it to myself because awhile back I spent a little bit of time on it and I like these CSS challenges. :) But I'm not actively working on this so I'm also game for someone else to take it.

Demo video: https://share.zight.com/4guW91yE
Codepen: https://codepen.io/krschacht/pen/JjzJpEr

• Forked project can be setup in render easily and README instructions are accurate
• Signing up is a smooth experience
• Immediately after signing up, you’re somehow prompted to enter your API key (maybe auto-popup that modal if we detect OpenAI key is null)

When you are chatting with the AI, there is a list of messages in the right column. When you hover over a message, two icons appear beneath it: a circle refresh icon and a clipboard icon.

We need to make the clipboard icon work. When you click it, the contents of the chat message should be copied to the user’s clipboard. There should be a javascript function that does this.

The naive implementation would just be to add an onClick=“” and call that function. But this should be done by creating a new stimulus controller (in javascript/controllers directory). There are many there already that can be referenced.

The tricky part of this will be how do we give the user visual feedback that says “Copied to clipboard”. What ChatGPT does it simply turn the copy icon into a check icon for a couple seconds. That's not the most clear, but it seems like a reasonable v1.

https://platform.openai.com/docs/guides/vision/multiple-image-inputs

Currently when you land in the app at conversations/show, the user menu is a placeholder. There's no way to click to logout.

For example, ChatGPT allows you to upload a PDF document and ask questions about it. I believe this will necessitate moving off of the chat completions API onto the Assistants API since that former appears to only support images: https://platform.openai.com/docs/guides/vision

Right after your new message submits and appears within the body of the page, we should change the composer icon to a stop icon (like ChatGPT does) while the AI's response is streaming in. Clicking that stop icon should abort the worker.

I'm not quite sure how to do this. Changing to stop icon shouldn't be too difficult, however new_form_controller stimulus will need to know when streaming is finished. Probably when we do the broadcast_replace_to within the job we can add an extra boolean param to indicate that it's done.

But we also need an endpoint that can be triggered when the stop icon is clicked. The worker, GetNextAIMessageJob is going to be running, in a loop, streaming the chunks to the browser. Maybe we add a cancelled_at timestamp to the Messages model and wire up message# update to set the cancelled_at timestamp? Then as GetNextAIMessageJob is looping it could continually reload the model to detect that it should stop.

Here is the PR with old context:
#10

This might be the last missing feature to reach parity with ChatGPT. Basically, we want this to work how ChatGPT does. Within assistant_header.html there is a share icon already in there, it’s just been commented out. Here’s an idea for an easy v1:

• We could add another column to each conversation table which is a uuid and maybe call it share_key
• We should create a new route which mirrors the existing conversations/:id/messages route, maybe we call it share/conversation/:key/messages
• Clicking the share icon from the menu pops up a modal (we have existing code for popping up a modal, press the keyboard shortcut “?” to see an example, make sure you aren’t focused inside the chat input field)
• In the modal we just have a static message that something like “here is a publicly shareable URL to this conversation”

Scope which is not included within this:

• Additional messages added to this conversation would also appear in the share
• There is no way to expire the share link, although we’ve laid that foundation by having a column that pre-generates the share key upon creation

I need to pay more attention to what ChatGPT does, although I don't think it does a particularly good job because the titles of my conversations are almost unusable. But the experience I've been considering is:

1. After you submit your first message, which creates a conversation, we hit a GPT-3.5 endpoint using our API and a custom prompt to come up with a title based on that. The conversation.title gets updated with that.
2. Right after that the first reply from the API will come back. We don't do anything then, we wait for the user to send a second message and we wait for the second reply from the API to come back, then we send all 4 messages in the conversation so far to our endpoint again to extract a new conversation.title and update it again.

Hopefully it can be a decent title by this point. Although, if the user were to edit it in between step 1 and step 2 we wouldn't want to overwrite it. We'd either need to track a bit to know if the user edited the title -or- we would need to not do step 2. Probably we should just do step 1 as a v1 to keep things simple.

From render.com

A render.yaml file was found, but there was an issue.

services[0].envVars[1]
must be from group or have a key and value
services[0].envVars[2]
cannot simultaneously specify fields value and sync

Currently whenever we show a toast or flash message, it breaks the whole page layout. They should float and be dismissable somehow.

This is probably just an M1 Mac issue so the fix is just to add the export command inside the Procfile.dev

export OBJC_DISABLE_INITIALIZE_FORK_SAFETY=YES