From 54c6a9ef9c9bd7239edcc530ff3eface8576602a Mon Sep 17 00:00:00 2001
From: LL <ljh5650@gmail.com>
Date: Tue, 6 Jun 2023 12:36:37 +0900
Subject: [PATCH] Add copy chat message feature in Chat panel and enable usage
 in 'use chat copy' setting.

- Added 'copied' string to language translation in multiple translations file.
- Added 'CopyIcon' to svelte import.
- Defined a new status message variable in Chat.svelte.
- Created a new function 'setStatusMessage' to display the current panel's state after certain action.
- Added a new setting 'useChatCopy' in 'DisplaySettings.svelte'.
- Created a checkbox with label 'useChatCopy' to toggle the Chat message copy.
- Integrated Clipboard API in Chat code to handle chat message copy via button click.
---
 src/lang/cn.ts                               |  4 +++-
 src/lang/en.ts                               |  4 +++-
 src/lang/ko.ts                               |  4 +++-
 src/lib/ChatScreens/Chat.svelte              | 23 ++++++++++++++++++--
 src/lib/Setting/Pages/DisplaySettings.svelte |  6 ++++-
 src/ts/storage/database.ts                   |  3 ++-
 6 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index ac34c54e..86a62b8c 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -300,5 +300,7 @@ export const languageChinese = {
     activationProbability: "概率",
     shareCloud: "分享到RisuRealm",
     hub: "RisuRealm",
-    tags: "标签"
+    tags: "标签",
+    copied: "已复制",
+    useChatCopy: "使用聊天复制",
 }
\ No newline at end of file
diff --git a/src/lang/en.ts b/src/lang/en.ts
index c5e5ec2b..ecd47d60 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -304,5 +304,7 @@ export const languageEnglish = {
     shareCloud: "Share to RisuRealm",
     hub: "RisuRealm",
     tags: "Tags",
-    backgroundHTML: "Background Embedding"
+    backgroundHTML: "Background Embedding",
+    copied: "Copied",
+    useChatCopy: "Use Chat Message Copy",
 }
\ No newline at end of file
diff --git a/src/lang/ko.ts b/src/lang/ko.ts
index 9049a5c6..c8a0a245 100644
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -276,5 +276,7 @@ export const languageKorean = {
     active: "활성화",
     loreRandomActivation: "확률 조건 사용",
     activationProbability: "발동 확률",
-    backgroundHTML: "백그라운드 임베딩"
+    backgroundHTML: "백그라운드 임베딩",
+    copied: "복사됨",
+    useChatCopy: "채팅 메시지 복사 사용",
 }
\ No newline at end of file
diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index c7c4eb4a..fb6e37bc 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ArrowLeft, ArrowRight, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon, CopyIcon } from "lucide-svelte";
     import { ParseMarkdown } from "../../ts/parser";
     import AutoresizeArea from "./AutoresizeArea.svelte";
     import { alertConfirm } from "../../ts/alert";
@@ -19,6 +19,7 @@
     export let character:character|groupChat|null = null
     let translating = false
     let editMode = false
+    let statusMessage:string = ''
     export let altGreeting = false
 
     let msgDisplay = ''
@@ -65,6 +66,14 @@
         }
     }
 
+    const setStatusMessage = (message:string, timeout:number = 0)=>{
+        statusMessage = message
+        if(timeout === 0) return
+        setTimeout(() => {
+            statusMessage = ''
+        }, timeout)
+    }
+
     $: displaya(message)
 </script>
 <div class="flex max-w-full justify-center" class:bgc={isLastMemory}>
@@ -80,8 +89,18 @@
             <div class="flexium items-center chat">
                 <span class="chat text-xl unmargin">{name}</span>
                 <div class="flex-grow flex items-center justify-end text-gray-500">
+                    <span class="text-xs">{statusMessage}</span>
+                    {#if $DataBase.useChatCopy}
+                        <button class="ml-2 hover:text-green-500 transition-colors" on:click={()=>{
+                            window.navigator.clipboard.writeText(msgDisplay).then(() => {
+                                setStatusMessage(language.copied)
+                            })
+                        }}>
+                            <CopyIcon size={20}/>
+                        </button>    
+                    {/if}
                     {#if idx > -1}
-                        <button class={"hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
+                        <button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
                             if(!editMode){
                                 editMode = true
                                 msgTranslated = ""
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index f414a469..7971af99 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -145,5 +145,9 @@
         }}/>
         <span>{language.textScreenBorder}</span>
     </div>
+{/if}
 
-{/if}
\ No newline at end of file
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.useChatCopy}/>
+    <span>{language.useChatCopy}</span>
+</div>
\ No newline at end of file
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.ts
index 7742a4d5..19331574 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -501,7 +501,8 @@ export interface Database{
     advancedBotSettings:boolean
     useAutoSuggestions:boolean
     autoSuggestPrompt:string,
-    claudeAPIKey:string
+    claudeAPIKey:string,
+    useChatCopy:boolean,
 }
 
 interface hordeConfig{