mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toggle color of Chat Edit Icon and Translation Icon

Browse Source
This commit is contained in:
LL
2023-05-29 02:37:38 +09:00
parent 4faad3c7b4
commit 2039797cad
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/ChatScreens/Chat.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { ArrowLeft, ArrowRight, ChevronLeftIcon, ChevronRightIcon, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte"; import { ArrowLeft, ArrowRight, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
import { ParseMarkdown } from "../../ts/parser"; import { ParseMarkdown } from "../../ts/parser";
import AutoresizeArea from "./AutoresizeArea.svelte"; import AutoresizeArea from "./AutoresizeArea.svelte";
import { alertConfirm } from "../../ts/alert"; import { alertConfirm } from "../../ts/alert";
@@ -22,7 +22,8 @@
export let altGreeting = false export let altGreeting = false
let msgDisplay = '' let msgDisplay = ''
let msgTranslated = ''
let translated = false;
async function rm(){ async function rm(){
const rm = $DataBase.askRemoval ? await alertConfirm(language.removeChat) : true const rm = $DataBase.askRemoval ? await alertConfirm(language.removeChat) : true
if(rm){ if(rm){
@@ -55,6 +56,8 @@
if($DataBase.autoTranslate && $DataBase.translator !== ''){ if($DataBase.autoTranslate && $DataBase.translator !== ''){
msgDisplay = replacePlaceholders(message, name) msgDisplay = replacePlaceholders(message, name)
msgDisplay = await translate(replacePlaceholders(message, name), false) msgDisplay = await translate(replacePlaceholders(message, name), false)
msgTranslated = msgDisplay
translated = true;
} }
else{ else{
msgDisplay = replacePlaceholders(message, name) msgDisplay = replacePlaceholders(message, name)
@@ -77,7 +80,7 @@
<span class="chat text-xl unmargin">{name}</span> <span class="chat text-xl unmargin">{name}</span>
<div class="flex-grow flex items-center justify-end text-gray-500"> <div class="flex-grow flex items-center justify-end text-gray-500">
{#if idx > -1} {#if idx > -1}
<button class="hover:text-green-500 transition-colors" on:click={() => { <button class={"hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
if(!editMode){ if(!editMode){
editMode = true editMode = true
} }
@@ -93,17 +96,26 @@
</button> </button>
{/if} {/if}
{#if $DataBase.translator !== ''} {#if $DataBase.translator !== ''}
<button class="ml-2 cursor-pointer hover:text-green-500 transition-colors" class:translating={translating} on:click={async () => { <button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} on:click={async () => {
if(translating){ if(translating){
return return
} }
if(msgDisplay === replacePlaceholders(message, name)){ if(!translated){
translating = true translating = true
msgDisplay = (await translate(replacePlaceholders(message, name), false)) if(msgTranslated !== ''){
msgDisplay = msgTranslated
translating = false translating = false
translated = true
return
}
msgDisplay = (await translate(replacePlaceholders(message, name), false))
msgTranslated = msgDisplay
translating = false
translated = true
} }
else{ else{
msgDisplay = replacePlaceholders(message, name) msgDisplay = replacePlaceholders(message, name)
translated = false
} }
}}> }}>
<LanguagesIcon /> <LanguagesIcon />