From 80e4d7c353510901dac58e3ec378b2b2e09af296 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Fri, 14 Apr 2023 14:09:32 +0800
Subject: [PATCH] chore: update code block component

---
 package.json                 |  2 +-
 src/components/CodeBlock.tsx | 31 ++++++++++++++++++-------------
 src/locales/en.json          |  5 +++--
 src/locales/zh.json          |  5 +++--
 src/styles/tailwind.css      |  2 +-
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 55a3966..62d1060 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "sqlchat",
   "private": false,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "export": "next export",
     "start": "next start",
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
index 194f2b0..4836ce1 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@@ -1,9 +1,10 @@
 import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { useConnectionStore, useQueryStore } from "@/store";
-import { checkStatementIsSelect } from "@/utils";
 import Icon from "./Icon";
+import Tooltip from "./kit/Tooltip";
 
 interface Props {
   language: string;
@@ -12,14 +13,14 @@ interface Props {
 
 export const CodeBlock = (props: Props) => {
   const { language, value } = props;
+  const { t } = useTranslation();
   const connectionStore = useConnectionStore();
   const queryStore = useQueryStore();
   const currentConnectionCtx = connectionStore.currentConnectionCtx;
   // Only show execute button in the following situations:
-  // * SQL code, and it is a SELECT statement;
+  // * SQL code;
   // * Connection setup;
-  const showExecuteButton =
-    language.toUpperCase() === "SQL" && checkStatementIsSelect(value) && currentConnectionCtx?.connection && currentConnectionCtx?.database;
+  const showExecuteButton = currentConnectionCtx?.connection && currentConnectionCtx?.database && language.toUpperCase() === "SQL";
 
   const copyToClipboard = () => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {
@@ -50,19 +51,23 @@ export const CodeBlock = (props: Props) => {
       <div className="flex items-center justify-between py-2 px-4">
         <span className="text-xs text-white font-mono">{language}</span>
         <div className="flex items-center space-x-2">
-          <button
-            className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
-            onClick={copyToClipboard}
-          >
-            <Icon.BiClipboard className="w-full h-auto" />
-          </button>
-          {showExecuteButton && (
+          <Tooltip title={t("common.copy")} side="top">
             <button
               className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
-              onClick={handleExecuteQuery}
+              onClick={copyToClipboard}
             >
-              <Icon.IoPlay className="w-full h-auto" />
+              <Icon.BiClipboard className="w-full h-auto" />
             </button>
+          </Tooltip>
+          {showExecuteButton && (
+            <Tooltip title={t("common.execute")} side="top">
+              <button
+                className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
+                onClick={handleExecuteQuery}
+              >
+                <Icon.IoPlay className="w-full h-auto" />
+              </button>
+            </Tooltip>
           )}
         </div>
       </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index ed03206..52e6572 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -8,7 +8,8 @@
     "loading": "Loading",
     "setting": "Setting",
     "copy": "Copy",
-    "delete": "Delete"
+    "delete": "Delete",
+    "execute": "Execute"
   },
   "conversation": {
     "new-chat": "New Chat",
@@ -21,7 +22,7 @@
     "select-database": "Select your database"
   },
   "execution": {
-    "title": "Execute query",
+    "title": "Execute SQL",
     "message": {
       "executing": "Executing query...",
       "no-connection": "No connection selected",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 6c6c5d5..1513066 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -8,7 +8,8 @@
     "loading": "加载中",
     "setting": "设置",
     "copy": "复制",
-    "delete": "删除"
+    "delete": "删除",
+    "execute": "执行"
   },
   "conversation": {
     "new-chat": "新建会话",
@@ -21,7 +22,7 @@
     "select-database": "选择数据库"
   },
   "execution": {
-    "title": "执行查询",
+    "title": "执行 SQL",
     "message": {
       "executing": "正在执行查询...",
       "no-connection": "未选择连接",
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9cdb0b0..ac73208 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -15,7 +15,7 @@
 }
 
 .btn {
-  @apply hide-scrollbar text-base px-3 py-2 rounded-lg border border-none outline-none bg-zinc-600 text-gray-200 hover:opacity-80 disabled:!opacity-60 disabled:cursor-not-allowed;
+  @apply flex flex-row justify-center items-center text-base px-3 py-2 rounded-lg border border-none outline-none bg-zinc-600 text-gray-200 hover:opacity-80 disabled:!opacity-60 disabled:cursor-not-allowed;
 }
 
 .btn-outline {