Added command bar to search chats and navigate

ShipBit / slickgpt

SlickGPT is a light-weight "use-your-own-API-key" web client for the OpenAI API written in Svelte. It offers GPT-4 integration, a userless share feature and other superpowers.

https://slickgpt.vercel.app

MIT License

461 stars 99 forks source link

Added command bar to search chats and navigate #80

Closed th8m0z closed 4 months ago

th8m0z commented 7 months ago

I added a command bar which lets users fuzzy search through their chats based on the title, slug, first and second message. The indexing could definitely be improved in the future. I also changed the z-value for the toolbar, so that the command bar always shows up above it.

Here is a screenshot:

Also let me know if you have any suggestions for the UI.

PS: This is my first contribution to any SvelteKit project, definitely tell me if I made any mistakes.

Issue: #74

vercel[bot] commented 7 months ago

@th8m0z is attempting to deploy a commit to the ShipBit Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 7 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
slickgpt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 4, 2024 0:14am

Shackless commented 7 months ago

Very cool, thank you! I have 3 ideas for improvement after quickly testing on the playground:

new chats are only "indexed" after reloading the page. Navigating back home or to another chat doesn't help
The UI seems to be very tailored for the light theme and is a bit "too bright" for my taste (even there). It should "blend in" more with the surrounding and also react to theme changes.
We need an activator for mobile devices as they can't press CMD+K. Maybe a search button / bar in the header (?)

Let me know if you need help with that!

th8m0z commented 6 months ago

With the newest commits chats are automatically added to the command palette without reloading the page. Additionally there is now a search toggle button for mobile users.

Unfortunately, I have very little experience with Tailwind, so I didn't manage to get the component to look good in dark mode, maybe someone else can take this over?

https://github.com/ShipBit/slickgpt/assets/41947147/6ffd5bf7-bdc2-43a2-9480-4b90c08f2511

Shackless commented 4 months ago

@th8m0z I did some minor refactorings and improved the styling a bit. Thank you!