chore: update code block component

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",

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 =
+  const showExecuteButton = currentConnectionCtx?.connection && currentConnectionCtx?.database && language.toUpperCase() === "SQL";
-    language.toUpperCase() === "SQL" && checkStatementIsSelect(value) && currentConnectionCtx?.connection && currentConnectionCtx?.database;
 
   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
+          <Tooltip title={t("common.copy")} side="top">
-            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 && (
             <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>

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",

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": "未选择连接",

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 {