feat: copy sql

frontend/src/assets/svg/icon_copy_outlined.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33333 5.3335V13.3335H10V5.3335H3.33333ZM11.3333 4.66683V14.0742C11.3333 14.4015 11.0548 14.6668 10.7111 14.6668H2.62222C2.27858 14.6668 2 14.4015 2 14.0742V4.59276C2 4.26548 2.27858 4.00016 2.62222 4.00016H10.6667C11.0349 4.00016 11.3333 4.29864 11.3333 4.66683ZM13.8047 1.52876C13.9254 1.6494 14 1.81607 14 2.00016V10.3335C14 10.5176 13.8508 10.6668 13.6667 10.6668H13C12.8159 10.6668 12.6667 10.5176 12.6667 10.3335V2.66683H6.33333C6.14924 2.66683 6 2.51759 6 2.3335V1.66683C6 1.48273 6.14924 1.3335 6.33333 1.3335H13.3333C13.5174 1.3335 13.6841 1.40812 13.8047 1.52876Z" fill="#1F2329"/>
+</svg>

frontend/src/i18n/en.json

@@ -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/zh-CN.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/views/chat/chat-block/ChartBlock.vue

@@ -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>