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

feat: message tooltips

Browse source
This commit is contained in:
Timothy J. Baek 2024-03-06 11:26:39 -08:00
parent 434595b3e6
commit 5ae121b087
2 changed files with 328 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/lib/components/chat/Messages/ResponseMessage.svelte
View file

@ -22,6 +22,7 @@
import CodeBlock from './CodeBlock.svelte'; import CodeBlock from './CodeBlock.svelte';
import Image from '$lib/components/common/Image.svelte'; import Image from '$lib/components/common/Image.svelte';
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
import Tooltip from '$lib/components/common/Tooltip.svelte';
export let modelfiles = []; export let modelfiles = [];
export let message; export let message;
@ -463,6 +464,7 @@
</div> </div>
{/if} {/if}
<Tooltip content="Edit" placement="bottom">
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
@ -486,7 +488,9 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
<Tooltip content="Copy" placement="bottom">
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
@ -510,7 +514,9 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
<Tooltip content="Good Response" placement="bottom">
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
@ -535,6 +541,9 @@
/></svg /></svg
> >
</button> </button>
</Tooltip>
<Tooltip content="Bad Response" placement="bottom">
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
@ -559,7 +568,9 @@
/></svg /></svg
> >
</button> </button>
</Tooltip>
<Tooltip content="Read Aloud" placement="bottom">
<button <button
id="speak-button-{message.id}" id="speak-button-{message.id}"
class="{isLastMessage class="{isLastMessage
@ -599,7 +610,12 @@
cx="12" cx="12"
cy="12" cy="12"
r="3" r="3"
/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" /></svg /><circle
class="spinner_S1WN spinner_JApP"
cx="20"
cy="12"
r="3"
/></svg
> >
{:else if speaking} {:else if speaking}
<svg <svg
@ -633,8 +649,10 @@
</svg> </svg>
{/if} {/if}
</button> </button>
</Tooltip>
{#if $config.images} {#if $config.images}
<Tooltip content="Generate Image" placement="bottom">
<button <button
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
@ -697,9 +715,11 @@
</svg> </svg>
{/if} {/if}
</button> </button>
</Tooltip>
{/if} {/if}
{#if message.info} {#if message.info}
<Tooltip content="Generation Info" placement="bottom">
<button <button
class=" {isLastMessage class=" {isLastMessage
? 'visible' ? 'visible'
@ -724,9 +744,11 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
{/if} {/if}
{#if isLastMessage} {#if isLastMessage}
<Tooltip content="Continue Response" placement="bottom">
<button <button
type="button" type="button"
class="{isLastMessage class="{isLastMessage
@ -756,7 +778,9 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
<Tooltip content="Regenerate" placement="bottom">
<button <button
type="button" type="button"
class="{isLastMessage class="{isLastMessage
@ -779,6 +803,7 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
{/if} {/if}
</div> </div>
{/if} {/if}

7
src/lib/components/chat/Messages/UserMessage.svelte
View file

@ -5,6 +5,7 @@
import Name from './Name.svelte'; import Name from './Name.svelte';
import ProfileImage from './ProfileImage.svelte'; import ProfileImage from './ProfileImage.svelte';
import { modelfiles, settings } from '$lib/stores'; import { modelfiles, settings } from '$lib/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -246,6 +247,7 @@
</div> </div>
{/if} {/if}
<Tooltip content="Edit" placement="bottom">
<button <button
class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition edit-user-message-button" class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition edit-user-message-button"
on:click={() => { on:click={() => {
@ -267,7 +269,9 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
<Tooltip content="Copy" placement="bottom">
<button <button
class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition" class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition"
on:click={() => { on:click={() => {
@ -289,8 +293,10 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
{#if !isFirstMessage} {#if !isFirstMessage}
<Tooltip content="Delete" placement="bottom">
<button <button
class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition" class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition"
on:click={() => { on:click={() => {
@ -312,6 +318,7 @@
/> />
</svg> </svg>
</button> </button>
</Tooltip>
{/if} {/if}
</div> </div>
</div> </div>