Add a copy button to copy sent prompts to clipboard

Implements the copy to clipboard functionality for sent prompt messages Close ai-shifu#769
PeterDaveHelloKitchen · May 3, 2024 · f3ea650 · f3ea650
1 parent 0a9a37d
commit f3ea650
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 7 deletions.
diff --git a/src/components/Messages/ChatPrompt.vue b/src/components/Messages/ChatPrompt.vue
@@ -4,6 +4,13 @@
     class="message prompt"
     :class="isThread ? 'thread-prompt' : ''"
   >
+    <v-card-title class="title">
+      {{ $t("chat.promptTitle") }}
+      <v-spacer></v-spacer>
+      <v-btn flat size="x-small" icon @click="copyToClipboard">
+        <v-icon>mdi-content-copy</v-icon>
+      </v-btn>
+    </v-card-title>
     <pre>{{ message ? message.content : "" }}</pre>
   </v-card>
 </template>
@@ -37,6 +44,10 @@ watch(
 onMounted(() => {
   root.value.$el.style.setProperty("--columns", props.columns);
 });
+
+function copyToClipboard() {
+  navigator.clipboard.writeText(props.message.content);
+}
 </script>
 
 <style scoped>
@@ -63,4 +74,12 @@ onMounted(() => {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+
+.title {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  padding: 0;
+  margin-bottom: 8px;
+}
 </style>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -87,7 +87,8 @@
     "botResponseDesc": "the selected response",
     "loading": "Loading...",
     "updateDebounceInterval": "Message Updating Interval (milliseconds)",
-    "updateDebounceIntervalDesc": "The value controls the message update speed when the AI bot responds. A higher value delays the message processing and updates them all at once, which is more efficient. A lower value updates the messages faster, but may cause performance issues."
+    "updateDebounceIntervalDesc": "The value controls the message update speed when the AI bot responds. A higher value delays the message processing and updates them all at once, which is more efficient. A lower value updates the messages faster, but may cause performance issues.",
+    "promptTitle": "Prompt"
   },
   "bot": {
     "creatingConversation": "Creating conversation...",

diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -52,7 +52,8 @@
     "newChat": "Nuevo chat",
     "deleteAllChatHistory": "Eliminar todo el historial de chat",
     "downloadAllChatHistory": "Guardar todo el historial de chat",
-    "confirmDeleteAllChatHistory": "¿Está seguro de que desea eliminar todo el historial de chat? Esta acción no se puede deshacer."
+    "confirmDeleteAllChatHistory": "¿Está seguro de que desea eliminar todo el historial de chat? Esta acción no se puede deshacer.",
+    "promptTitle": "Entrada"
   },
   "bot": {
     "creatingConversation": "Creando conversación...",

diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
@@ -33,7 +33,8 @@
     "done": "Fatto"
   },
   "chat": {
-    "newChat": "Nuova Chat"
+    "newChat": "Nuova Chat",
+    "promptTitle": "Prompt"
   },
   "bot": {
     "creatingConversation": "Creazione della conversazione in corso...",

diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
@@ -43,7 +43,8 @@
     "name": "チャット",
     "newChat": "新しいチャット",
     "deleteAllChatHistory": "全てのチャット履歴を削除",
-    "confirmDeleteAllChatHistory": "全てのチャット履歴を削除しますか？この操作は取り消せません。"
+    "confirmDeleteAllChatHistory": "全てのチャット履歴を削除しますか？この操作は取り消せません。",
+    "promptTitle": "プロンプト"
   },
   "bot": {
     "creatingConversation": "会話を作成中...",

diff --git a/src/i18n/locales/ko.json b/src/i18n/locales/ko.json
@@ -84,7 +84,8 @@
     "botResponseDesc": "선택된 응답",
     "loading": "로드 중...",
     "updateDebounceInterval": "메시지 업데이트 간격 (밀리초)",
-    "updateDebounceIntervalDesc": "이 값은 AI봇이 응답할 때 메시지 업데이트 속도를 조절합니다. 값이 높으면 메시지 처리가 지연되고 한 번에 업데이트되는 것이 더 효율적입니다. 값이 낮으면 메시지가 더 빨리 업데이트되지만 성능 문제가 발생할 수 있습니다."
+    "updateDebounceIntervalDesc": "이 값은 AI봇이 응답할 때 메시지 업데이트 속도를 조절합니다. 값이 높으면 메시지 처리가 지연되고 한 번에 업데이트되는 것이 더 효율적입니다. 값이 낮으면 메시지가 더 빨리 업데이트되지만 성능 문제가 발생할 수 있습니다.",
+    "promptTitle": "프롬프트"
   },
   "bot": {
     "creatingConversation": "대화를 만드는 중...",

diff --git a/src/i18n/locales/vi.json b/src/i18n/locales/vi.json
@@ -82,7 +82,8 @@
     "description": "Mô tả",
     "botNameDesc": "Tên của bot",
     "botResponseDesc": "Phản hồi của bot",
-    "loading": "Đang tải..."
+    "loading": "Đang tải...",
+    "promptTitle": "Nhập liệu"
   },
   "bot": {
     "creatingConversation": "Đang tạo hội thoại...",

diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
@@ -87,7 +87,8 @@
     "botResponseDesc": "所选响应内容",
     "loading": "加载中...",
     "updateDebounceInterval": "消息更新间隔（毫秒）",
-    "updateDebounceIntervalDesc": "此值控制 AI 机器人回复时，消息更新速度。更高的值会延迟消息处理，并一次性更新所有消息，效率更高。更低的值会更快更新消息，但可能会导致性能问题。"
+    "updateDebounceIntervalDesc": "此值控制 AI 机器人回复时，消息更新速度。更高的值会延迟消息处理，并一次性更新所有消息，效率更高。更低的值会更快更新消息，但可能会导致性能问题。",
+    "promptTitle": "提示"
   },
   "bot": {
     "creatingConversation": "创建新对话...",