ui: shadcn svelte -> tooltips + sonner

[jannikstdl]

fix #259

shadcn-svelte

https://github.com/open-webui/open-webui/assets/69747628/836db88c-8154-4c3a-8469-c4ab7383eb25

Edit Also implemented the Sonner/Toaster from svelte-shadcn (they use svelte-sonner). Replaced it with svelte-french-toast since i found it more clean and it stacks:

https://github.com/open-webui/open-webui/assets/69747628/104efc2f-b1f8-4813-be53-f3647fc69aad

Maybe in future we could replace the model selector with shadcns combobox. Somebody mentioned this on Discord that the native selector is inconsistent in design.

[tjbck]

Thanks for the PR! svelte-sonner I think is great and looks better than the svelte-toast but I'm still debating if it's a good idea to include external UI libraries to our project. If Tooltip is all we need from the library, it's probably best if we implement one our own, I should be able to take a deep dive into this and create one later this week, how does that sound?

[jannikstdl]

Ok, so shadcn is a very popular component library and highly customizable. We could use other UI elements in our App wich all have the same style. (I was thinking about the progress bar or the switches) So you basically set the darkmode tone shape etc. for the elements once and it gets applied whenever you use these elements. This could lead to cleaner code.

Building there elements from scratch would be unnecessary work imo. But thats just an idea, let me know if you have any other plans on that.

[jannikstdl]

Thanks for the PR! svelte-sonner I think is great and looks better than the svelte-toast

Should I cerate a PR with only svelte-sonner?

[tjbck]

@jannikstdl yep, that would expedite the PR merge!

[jannikstdl]

Splitted in #986 and #982