OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-23 02:16:52 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #14720 from itk-dev/feature/accessibible-chat-buttons

Browse Source 
Feat: accessibible chat buttons
This commit is contained in:
Tim Jaeryang Baek 2025-06-06 12:55:46 +04:00 committed by GitHub
commit 1ff7cb7d2f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -869,12 +869,14 @@
{#if siblings.length > 1}
<div class="flex self-center min-w-fit" dir="ltr">
<button
aria-label={$i18n.t('Previous message')}
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
on:click={() => {
showPreviousMessage(message);
}}
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -940,10 +942,12 @@
on:click={() => {
showNextMessage(message);
}}
aria-label={$i18n.t('Next message')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
aria-hidden="true"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
@ -964,6 +968,7 @@
{#if $user?.role === 'user' ? ($user?.permissions?.chat?.edit ?? true) : true}
<Tooltip content={$i18n.t('Edit')} placement="bottom">
<button
aria-label={$i18n.t('Edit')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
@ -976,6 +981,7 @@
fill="none"
viewBox="0 0 24 24"
stroke-width="2.3"
aria-hidden="true"
stroke="currentColor"
class="w-4 h-4"
>
@ -992,6 +998,7 @@
<Tooltip content={$i18n.t('Copy')} placement="bottom">
<button
aria-label={$i18n.t('Copy')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition copy-response-button"
@ -1002,6 +1009,7 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
aria-hidden="true"
viewBox="0 0 24 24"
stroke-width="2.3"
stroke="currentColor"
@ -1019,6 +1027,7 @@
{#if $user?.role === 'admin' || ($user?.permissions?.chat?.tts ?? true)}
<Tooltip content={$i18n.t('Read Aloud')} placement="bottom">
<button
aria-label={$i18n.t('Read Aloud')}
id="speak-button-{message.id}"
class="{isLastMessage
? 'visible'
@ -1034,6 +1043,7 @@
class=" w-4 h-4"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
>
<style>
@ -1066,6 +1076,7 @@
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
stroke-width="2.3"
stroke="currentColor"
class="w-4 h-4"
@ -1081,6 +1092,7 @@
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
stroke-width="2.3"
stroke="currentColor"
class="w-4 h-4"
@ -1099,6 +1111,7 @@
{#if $config?.features.enable_image_generation && ($user?.role === 'admin' || $user?.permissions?.features?.image_generation) && !readOnly}
<Tooltip content={$i18n.t('Generate Image')} placement="bottom">
<button
aria-label={$i18n.t('Generate Image')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
@ -1110,6 +1123,7 @@
>
{#if generatingImage}
<svg
aria-hidden="true"
class=" w-4 h-4"
fill="currentColor"
viewBox="0 0 24 24"
@ -1144,6 +1158,7 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
aria-hidden="true"
viewBox="0 0 24 24"
stroke-width="2.3"
stroke="currentColor"
@ -1176,6 +1191,7 @@
placement="bottom"
>
<button
aria-hidden="true"
class=" {isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
@ -1185,6 +1201,7 @@
id="info-{message.id}"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -1206,6 +1223,7 @@
{#if !$temporaryChatEnabled && ($config?.features.enable_message_rating ?? true)}
<Tooltip content={$i18n.t('Good Response')} placement="bottom">
<button
aria-label={$i18n.t('Good Response')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
@ -1224,6 +1242,7 @@
}}
>
<svg
aria-hidden="true"
stroke="currentColor"
fill="none"
stroke-width="2.3"
@ -1242,6 +1261,7 @@
<Tooltip content={$i18n.t('Bad Response')} placement="bottom">
<button
aria-label={$i18n.t('Bad Response')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
@ -1260,6 +1280,7 @@
}}
>
<svg
aria-hidden="true"
stroke="currentColor"
fill="none"
stroke-width="2.3"
@ -1280,6 +1301,7 @@
{#if isLastMessage}
<Tooltip content={$i18n.t('Continue Response')} placement="bottom">
<button
aria-label={$i18n.t('Continue Response')}
type="button"
id="continue-response-button"
class="{isLastMessage
@ -1290,6 +1312,7 @@
}}
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
@ -1315,6 +1338,7 @@
<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
<button
type="button"
aria-label={$i18n.t('Regenerate')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
@ -1340,6 +1364,7 @@
fill="none"
viewBox="0 0 24 24"
stroke-width="2.3"
aria-hidden="true"
stroke="currentColor"
class="w-4 h-4"
>
@ -1356,6 +1381,7 @@
<Tooltip content={$i18n.t('Delete')} placement="bottom">
<button
type="button"
aria-label={$i18n.t('Delete')}
id="delete-response-button"
class="{isLastMessage
? 'visible'
@ -1370,6 +1396,7 @@
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
aria-hidden="true"
class="w-4 h-4"
>
<path
@ -1387,6 +1414,7 @@
<Tooltip content={action.name} placement="bottom">
<button
type="button"
aria-label={action.name}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"

4
src/lib/components/common/Tooltip.svelte
View File

@ -2,10 +2,8 @@
import DOMPurify from 'dompurify';
import { onDestroy } from 'svelte';
import { marked } from 'marked';
import tippy from 'tippy.js';
import { roundArrow } from 'tippy.js';
export let placement = 'top';
export let content = `I'm a tooltip!`;
@ -47,6 +45,6 @@
});
</script>
<div bind:this={tooltipElement} aria-label={DOMPurify.sanitize(content)} class={className}>
<div bind:this={tooltipElement} class={className}>
<slot />
</div>

4
src/lib/i18n/locales/da-DK/translation.json
View File

@ -1380,5 +1380,7 @@
"Your entire contribution will go directly to the plugin developer; Open WebUI does not take any percentage. However, the chosen funding platform might have its own fees.": "Hele dit bidrag går direkte til plugin-udvikleren; Open WebUI tager ikke nogen procentdel. Den valgte finansieringsplatform kan dog have sine egne gebyrer.",
"Youtube": "Youtube",
"Youtube Language": "Youtube sprog",
"Youtube Proxy URL": "Youtube Proxy URL"
"Youtube Proxy URL": "Youtube Proxy URL",
"Previous message": "Forrige besked",
"Next message": "Næste besked"
}

4
src/lib/i18n/locales/en-US/translation.json
View File

@ -1380,5 +1380,7 @@
"Your entire contribution will go directly to the plugin developer; Open WebUI does not take any percentage. However, the chosen funding platform might have its own fees.": "",
"Youtube": "",
"Youtube Language": "",
"Youtube Proxy URL": ""
"Youtube Proxy URL": "",
"Previous message": "Previous message",
"Next message": "Next message"
}