feat: view sql in chat

backend/apps/chat/curd/chat.py

@@ -1,4 +1,5 @@
 import datetime
+import sqlparse
 from typing import List
 
 import orjson
@@ -128,6 +129,12 @@ def format_record(record: ChatRecord):
             _dict['predict_data'] = _obj
         except Exception:
             pass
+    if record.sql and record.sql.strip() != '':
+        try:
+            _dict['sql'] = sqlparse.format(record.sql, reindent=True)
+        except Exception:
+            pass
+
     return _dict
 
 

backend/pyproject.toml

@@ -38,6 +38,7 @@ dependencies = [
     "tabulate>=0.9.0",
     "sqlbot-xpack==0.0.3.5",
     "fastapi-cache2>=0.2.2",
+    "sqlparse>=0.5.3",
 ]
 [[tool.uv.index]]
 name = "default"

frontend/src/utils/markdown.ts

@@ -11,7 +11,7 @@ const md = new MarkdownIt({
     if (lang && hljs.getLanguage(lang)) {
       try {
         return `<pre class="hljs">
-                  <code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code>
+                  <div>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</div>
                 </pre>`
       } catch (e) {
         console.error(e)

frontend/src/views/chat/chat-block/ChartBlock.vue

@@ -15,7 +15,7 @@ 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 { useI18n } from 'vue-i18n'
-import MdComponent from '@/views/chat/component/MdComponent.vue'
+import SQLComponent from '@/views/chat/component/SQLComponent.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -324,8 +324,9 @@ function addToDashboard() {
       body-class="chart-sql-drawer-body"
     >
       <div>
-        <MdComponent
-          :message="'```sql\n' + message.record?.sql + '\n```'"
+        <SQLComponent
+          v-if="message.record?.sql"
+          :sql="message.record?.sql"
           style="margin-top: 12px"
         />
       </div>

frontend/src/views/chat/component/SQLComponent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import 'highlight.js/styles/github.min.css'
+import 'github-markdown-css/github-markdown-light.css'
+import hljs from 'highlight.js'
+
+defineProps<{
+  sql: string
+}>()
+</script>
+
+<template>
+  <pre class="hljs">
+    <div
+      v-dompurify-html="hljs.highlight(sql, { language: 'sql', ignoreIllegals: true }).value"
+    ></div>
+  </pre>
+</template>
+
+<style lang="less">
+.hljs {
+  overflow: auto;
+  padding: 1rem;
+  display: block;
+
+  background: rgba(245, 246, 247, 1);
+  border: 1px solid rgba(222, 224, 227, 1);
+  border-radius: 6px;
+}
+</style>