ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 12:55:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #16783 from itk-dev/feature/high-contrast-chat-messages

Browse source 
FEAT: highContrastMode implemented in chat messages
This commit is contained in:
Tim Jaeryang Baek 2025-08-22 13:22:09 +04:00 committed by GitHub
commit c159a1a120
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 35 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -626,7 +626,10 @@
{#if message.timestamp} {#if message.timestamp}
<div <div
class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]" class="self-center text-xs font-medium first-letter:capitalize ml-0.5 translate-y-[1px] {($settings?.highContrastMode ??
false)
? 'dark:text-gray-100 text-gray-900'
: 'invisible group-hover:visible transition text-gray-400'}"
> >
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}> <Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span> <span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
@ -968,7 +971,7 @@
<Tooltip content={$i18n.t('Edit')} placement="bottom"> <Tooltip content={$i18n.t('Edit')} placement="bottom">
<button <button
aria-label={$i18n.t('Edit')} aria-label={$i18n.t('Edit')}
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {
@ -998,7 +1001,7 @@
<Tooltip content={$i18n.t('Copy')} placement="bottom"> <Tooltip content={$i18n.t('Copy')} placement="bottom">
<button <button
aria-label={$i18n.t('Copy')} aria-label={$i18n.t('Copy')}
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {
@ -1028,7 +1031,7 @@
<button <button
aria-label={$i18n.t('Read Aloud')} aria-label={$i18n.t('Read Aloud')}
id="speak-button-{message.id}" id="speak-button-{message.id}"
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {
@ -1111,7 +1114,7 @@
<Tooltip content={$i18n.t('Generate Image')} placement="bottom"> <Tooltip content={$i18n.t('Generate Image')} placement="bottom">
<button <button
aria-label={$i18n.t('Generate Image')} aria-label={$i18n.t('Generate Image')}
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {
@ -1191,7 +1194,7 @@
> >
<button <button
aria-hidden="true" aria-hidden="true"
class=" {isLastMessage class=" {isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {
@ -1223,7 +1226,7 @@
<Tooltip content={$i18n.t('Good Response')} placement="bottom"> <Tooltip content={$i18n.t('Good Response')} placement="bottom">
<button <button
aria-label={$i18n.t('Good Response')} aria-label={$i18n.t('Good Response')}
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {( : 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
message?.annotation?.rating ?? '' message?.annotation?.rating ?? ''
@ -1261,7 +1264,7 @@
<Tooltip content={$i18n.t('Bad Response')} placement="bottom"> <Tooltip content={$i18n.t('Bad Response')} placement="bottom">
<button <button
aria-label={$i18n.t('Bad Response')} aria-label={$i18n.t('Bad Response')}
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {( : 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg {(
message?.annotation?.rating ?? '' message?.annotation?.rating ?? ''
@ -1303,7 +1306,7 @@
aria-label={$i18n.t('Continue Response')} aria-label={$i18n.t('Continue Response')}
type="button" type="button"
id="continue-response-button" id="continue-response-button"
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {
@ -1449,7 +1452,7 @@
type="button" type="button"
aria-label={$i18n.t('Delete')} aria-label={$i18n.t('Delete')}
id="delete-response-button" id="delete-response-button"
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {
@ -1481,7 +1484,7 @@
<button <button
type="button" type="button"
aria-label={action.name} aria-label={action.name}
class="{isLastMessage class="{isLastMessage || ($settings?.highContrastMode ?? false)
? 'visible' ? '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" : '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"
on:click={() => { on:click={() => {

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

@ -146,7 +146,10 @@
{#if message.timestamp} {#if message.timestamp}
<div <div
class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]" class="self-center text-xs font-medium first-letter:capitalize ml-0.5 translate-y-[1px] {($settings?.highContrastMode ??
false)
? 'dark:text-gray-900 text-gray-100'
: 'invisible group-hover:visible transition'}"
> >
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}> <Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span> <span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
@ -158,7 +161,10 @@
{:else if message.timestamp} {:else if message.timestamp}
<div class="flex justify-end pr-2 text-xs"> <div class="flex justify-end pr-2 text-xs">
<div <div
class="text-[0.65rem] invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize mb-0.5" class="text-[0.65rem] font-medium first-letter:capitalize mb-0.5 {($settings?.highContrastMode ??
false)
? 'dark:text-gray-100 text-gray-900'
: 'invisible group-hover:visible transition text-gray-400'}"
> >
<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}> <Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span> <span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
@ -207,7 +213,10 @@
</div> </div>
<div class=" absolute -top-1 -right-1"> <div class=" absolute -top-1 -right-1">
<button <button
class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition" class=" bg-white text-black border border-white rounded-full {($settings?.highContrastMode ??
false)
? ''
: 'group-hover:visible invisible transition'}"
type="button" type="button"
on:click={() => { on:click={() => {
editedFiles.splice(fileIdx, 1); editedFiles.splice(fileIdx, 1);
@ -433,7 +442,9 @@
{#if !readOnly} {#if !readOnly}
<Tooltip content={$i18n.t('Edit')} placement="bottom"> <Tooltip content={$i18n.t('Edit')} placement="bottom">
<button <button
class="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 edit-user-message-button" class="{($settings?.highContrastMode ?? false)
? ''
: '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 edit-user-message-button"
on:click={() => { on:click={() => {
editMessageHandler(); editMessageHandler();
}} }}
@ -459,7 +470,9 @@
{#if message?.content} {#if message?.content}
<Tooltip content={$i18n.t('Copy')} placement="bottom"> <Tooltip content={$i18n.t('Copy')} placement="bottom">
<button <button
class="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" class="{($settings?.highContrastMode ?? false)
? ''
: '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"
on:click={() => { on:click={() => {
copyToClipboard(message.content); copyToClipboard(message.content);
}} }}
@ -485,7 +498,9 @@
{#if !readOnly && (!isFirstMessage || siblings.length > 1)} {#if !readOnly && (!isFirstMessage || siblings.length > 1)}
<Tooltip content={$i18n.t('Delete')} placement="bottom"> <Tooltip content={$i18n.t('Delete')} placement="bottom">
<button <button
class="invisible group-hover:visible p-1 rounded-sm dark:hover:text-white hover:text-black transition" class="{($settings?.highContrastMode ?? false)
? ''
: 'invisible group-hover:visible'} p-1 rounded-sm dark:hover:text-white hover:text-black transition"
on:click={() => { on:click={() => {
showDeleteConfirm = true; showDeleteConfirm = true;
}} }}