tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

feat: suggestions ui updated

Browse source
This commit is contained in:
Timothy J. Baek 2023-11-08 00:04:05 -08:00
parent 648d14cd23
commit 2d69cf8cf4
3 changed files with 55 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/lib/components/chat/Suggestions.svelte
View file

@ -4,7 +4,7 @@
<div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left"> <div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
<button <button
class=" flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group" class=" flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => { on:click={() => {
submitPrompt(`Tell me a random fun fact about the Roman Empire`); submitPrompt(`Tell me a random fun fact about the Roman Empire`);
}} }}
@ -15,19 +15,25 @@
</div> </div>
<div <div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition" class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4" <svg
><path xmlns="http://www.w3.org/2000/svg"
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
/></svg class="w-4 h-4"
> >
<path
fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
</button> </button>
<button <button
class="flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group" class=" flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => { on:click={() => {
submitPrompt(`Show me a code snippet of a website's sticky header in CSS and JavaScript.`); submitPrompt(`Show me a code snippet of a website's sticky header in CSS and JavaScript.`);
}} }}
@ -37,19 +43,25 @@
<div class="text-sm text-gray-500">of a website's sticky header</div> <div class="text-sm text-gray-500">of a website's sticky header</div>
</div> </div>
<div <div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition" class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4" <svg
><path xmlns="http://www.w3.org/2000/svg"
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
/></svg class="w-4 h-4"
> >
<path
fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
</button> </button>
<button <button
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group" class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => { on:click={() => {
submitPrompt( submitPrompt(
`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.` `Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
@ -61,19 +73,25 @@
<div class="text-sm text-gray-500">vocabulary for a college entrance exam</div> <div class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
</div> </div>
<div <div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition" class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4" <svg
><path xmlns="http://www.w3.org/2000/svg"
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
/></svg class="w-4 h-4"
> >
<path
fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
</button> </button>
<button <button
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group" class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg transition group"
on:click={() => { on:click={() => {
submitPrompt( submitPrompt(
`What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.` `What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
@ -85,14 +103,20 @@
<div class="text-sm text-gray-500">for what to do with my kids' art</div> <div class="text-sm text-gray-500">for what to do with my kids' art</div>
</div> </div>
<div <div
class="self-center text-white group-hover:text-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition" class="self-center p-1 rounded-lg text-white group-hover:bg-gray-100 group-hover:text-gray-800 dark:group-hover:bg-gray-800 dark:group-hover:text-gray-300 dark:text-gray-800 transition"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4" <svg
><path xmlns="http://www.w3.org/2000/svg"
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
/></svg class="w-4 h-4"
> >
<path
fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>

2
src/lib/components/layout/Navbar.svelte
View file

@ -114,7 +114,7 @@
bind:this={navElement} bind:this={navElement}
class="h-screen {show class="h-screen {show
? '' ? ''
: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-gray-900 text-gray-200 shadow-2xl text-sm : '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-[#0a0a0a] text-gray-200 shadow-2xl text-sm
" "
> >
<div class="py-2.5 my-auto flex flex-col justify-between h-screen"> <div class="py-2.5 my-auto flex flex-col justify-between h-screen">

17
src/routes/+page.svelte
View file

@ -795,20 +795,7 @@
<div class="min-h-screen w-full flex justify-center"> <div class="min-h-screen w-full flex justify-center">
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class=" py-2.5 flex flex-col justify-between w-full">
<!-- <div class="max-w-2xl w-full px-2.5"> <div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-14">
<div class="p-3 rounded-lg bg-gray-100 dark:bg-gray-900">
<div>
<label
for="models"
class="block mb-2 text-sm font-medium dark:text-gray-200 flex justify-between"
/>
<div />
</div>
</div>
</div> -->
<div class="max-w-2xl mx-auto w-full mt-14">
<div class="flex justify-between my-2 text-sm"> <div class="flex justify-between my-2 text-sm">
<select <select
id="models" id="models"
@ -861,7 +848,7 @@
<div class=" h-full mt-10 mb-48 w-full flex flex-col"> <div class=" h-full mt-10 mb-48 w-full flex flex-col">
{#if messages.length == 0} {#if messages.length == 0}
<div class="m-auto text-center max-w-md pb-16"> <div class="m-auto text-center max-w-md pb-28 px-2">
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<img src="/ollama.png" class="w-16 invert-[80%]" /> <img src="/ollama.png" class="w-16 invert-[80%]" />
</div> </div>