feat: format sql during chat

backend/apps/chat/task/llm.py

@@ -1,4 +1,5 @@
 import json
+import sqlparse
 import logging
 import traceback
 import warnings
@@ -775,10 +776,11 @@ def run_task(llm_service: LLMService, in_chat: bool = True):
         # sql = llm_service.check_save_sql(res=full_sql_text)
 
         print(sql)
+        format_sql = sqlparse.format(sql, reindent=True)
         if in_chat:
-            yield orjson.dumps({'content': sql, 'type': 'sql'}).decode() + '\n\n'
+            yield orjson.dumps({'content': format_sql, 'type': 'sql'}).decode() + '\n\n'
         else:
-            yield f'```sql\n{sql}\n```\n\n'
+            yield f'```sql\n{format_sql}\n```\n\n'
 
         # execute sql
         result = llm_service.execute_sql(sql=sql)

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

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import type { ChatMessage } from '@/api/chat.ts'
-import { computed, watch, ref } from 'vue'
-import type { ChartTypes } from '@/views/chat/component/BaseChart.ts'
-import DisplayChartBlock from '@/views/chat/component/DisplayChartBlock.vue'
-import { concat } from 'lodash-es'
-
-const props = defineProps<{
-  id?: number | string
-  chartType: ChartTypes
-  message: ChatMessage
-  data: string | any
-}>()
-
-const dataObject = computed<{
-  fields: Array<string>
-  data: Array<{ [key: string]: any }>
-}>(() => {
-  if (props.message?.record?.data) {
-    if (typeof props.message?.record?.data === 'string') {
-      return JSON.parse(props.message.record.data)
-    } else {
-      return props.message.record.data
-    }
-  }
-  return {}
-})
-
-const _data = computed(() => {
-  let _list = []
-  if (props.data && typeof props.data === 'string') {
-    if (
-      props.data.length > 0 &&
-      props.data.trim().startsWith('[') &&
-      props.data.trim().endsWith(']')
-    ) {
-      try {
-        _list = JSON.parse(props.data)
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  } else {
-    if (props.data.length > 0) {
-      _list = props.data
-    }
-  }
-
-  if (_list.length == 0) {
-    return _list
-  }
-
-  if (dataObject.value.data && dataObject.value.data.length > 0) {
-    return concat(dataObject.value.data, _list)
-  }
-
-  return _list
-})
-
-const blockRef = ref()
-
-watch(
-  () => props.chartType,
-  () => {
-    blockRef.value?.onTypeChange()
-  }
-)
-</script>
-
-<template>
-  <DisplayChartBlock
-    v-if="_data.length > 0"
-    :id="id"
-    ref="blockRef"
-    :chart-type="chartType"
-    :message="message"
-    :data="_data"
-  />
-</template>
-
-<style scoped lang="less">
-.chart-base-container {
-  padding: 20px;
-  background: rgba(224, 224, 226, 0.29);
-}
-</style>