feat: copy sql

Author: ulleo

frontend/src/assets/svg/icon_copy_outlined.svg

@@ -118,7 +118,8 @@
     "earlier": "Earlier",
     "no_time": "No Time",
     "rename_conversation_title": "Rename conversation title",
-    "conversation_title": "Conversation title"
+    "conversation_title": "Conversation title",
+    "copied": "Copied"
   },
   "ds": {
     "title": "Data Source",
@@ -513,4 +514,4 @@
     "back_community": "Restore to Community Edition",
     "confirm_tips": "Are you sure to restore to Community Edition?"
   }
-}
+}

frontend/src/i18n/en.json

@@ -121,7 +121,8 @@
     "earlier": "更早以前",
     "no_time": "没有时间",
     "rename_conversation_title": "重命名对话标题",
-    "conversation_title": "对话标题"
+    "conversation_title": "对话标题",
+    "copied": "已复制"
   },
   "ds": {
     "title": "数据源",
@@ -525,4 +526,4 @@
     "back_community": "还原至社区版",
     "confirm_tips": "确定还原至社区版？"
   }
-}
+}

frontend/src/i18n/zh-CN.json

@@ -15,6 +15,7 @@ import icon_export_outlined from '@/assets/svg/icon_export_outlined.svg'
 import icon_into_item_outlined from '@/assets/svg/icon_into-item_outlined.svg'
 import icon_window_max_outlined from '@/assets/svg/icon_window-max_outlined.svg'
 import icon_window_mini_outlined from '@/assets/svg/icon_window-mini_outlined.svg'
+import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
 import { useI18n } from 'vue-i18n'
 import SQLComponent from '@/views/chat/component/SQLComponent.vue'
 
@@ -189,6 +190,13 @@ function showSql() {
 function addToDashboard() {
   console.log('todo')
 }
+
+function copy() {
+  if (props.message?.record?.sql) {
+    navigator.clipboard.writeText(props.message.record.sql)
+    ElMessage.info(t('qa.copied'))
+  }
+}
 </script>
 
 <template>
@@ -318,12 +326,17 @@ function addToDashboard() {
       direction="rtl"
       body-class="chart-sql-drawer-body"
     >
-      <div>
+      <div class="sql-block">
         <SQLComponent
           v-if="message.record?.sql"
           :sql="message.record?.sql"
           style="margin-top: 12px"
         />
+        <el-button v-if="message.record?.sql" circle class="input-icon" @click="copy">
+          <el-icon size="16">
+            <icon_copy_outlined />
+          </el-icon>
+        </el-button>
       </div>
     </el-drawer>
   </div>
@@ -490,4 +503,18 @@ function addToDashboard() {
     margin-top: 16px;
   }
 }
+
+.sql-block {
+  position: relative;
+
+  .input-icon {
+    min-width: unset;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+
+    border-color: #dee0e3;
+    box-shadow: 0px 4px 8px 0px #1f23291a;
+  }
+}
 </style>