feat: improve chat record list display

backend/apps/chat/curd/chat.py

@@ -1,10 +1,9 @@
 import datetime
-import sqlparse
 from typing import List
 
 import orjson
-from sqlalchemy import and_
-from sqlalchemy.orm import load_only
+import sqlparse
+from sqlalchemy import and_, select
 
 from apps.chat.models.chat_model import Chat, ChatRecord, CreateChat, ChatInfo, RenameChat, ChatQuestion
 from apps.datasource.models.datasource import CoreDatasource
@@ -47,26 +46,29 @@ def delete_chat(session, chart_id) -> str:
 
 
 def get_chat_chart_data(session: SessionDep, chart_record_id: int):
-    res = session.query(ChatRecord).options(load_only(ChatRecord.data)).get(chart_record_id)
-    if res:
+    stmt = select(ChatRecord.data).where(and_(ChatRecord.id == chart_record_id))
+    res = session.execute(stmt)
+    for row in res:
         try:
-            return orjson.loads(res.data)
+            return orjson.loads(row.data)
         except Exception:
             pass
     return {}
 
 
 def get_chat_predict_data(session: SessionDep, chart_record_id: int):
-    res = session.query(ChatRecord).options(load_only(ChatRecord.predict_data)).get(chart_record_id)
-    if res:
+    stmt = select(ChatRecord.predict_data).where(and_(ChatRecord.id == chart_record_id))
+    res = session.execute(stmt)
+    for row in res:
         try:
-            return orjson.loads(res.predict_data)
+            return orjson.loads(row.predict_data)
         except Exception:
             pass
-    return ''
+    return {}
 
 
-def get_chat_with_records(session: SessionDep, chart_id: int, current_user: CurrentUser, current_assistant: CurrentAssistant) -> ChatInfo:
+def get_chat_with_records(session: SessionDep, chart_id: int, current_user: CurrentUser,
+                          current_assistant: CurrentAssistant) -> ChatInfo:
     chat = session.get(Chat, chart_id)
     if not chat:
         raise Exception(f"Chat with id {chart_id} not found")
@@ -78,7 +80,7 @@ def get_chat_with_records(session: SessionDep, chart_id: int, current_user: Curr
         ds = out_ds_instance.get_ds(chat.datasource)
     else:
         ds = session.get(CoreDatasource, chat.datasource) if chat.datasource else None
-    
+
     if not ds:
         chat_info.datasource_exists = False
         chat_info.datasource_name = 'Datasource not exist'
@@ -87,14 +89,25 @@ def get_chat_with_records(session: SessionDep, chart_id: int, current_user: Curr
         chat_info.datasource_name = ds.name
         chat_info.ds_type = ds.type
 
-    record_list = session.query(ChatRecord).options(
-        load_only(ChatRecord.id, ChatRecord.chat_id, ChatRecord.create_time, ChatRecord.finish_time,
-                  ChatRecord.question, ChatRecord.sql_answer, ChatRecord.sql, ChatRecord.data,
+    stmt = select(ChatRecord.id, ChatRecord.chat_id, ChatRecord.create_time, ChatRecord.finish_time,
+                  ChatRecord.question, ChatRecord.sql_answer, ChatRecord.sql,
                   ChatRecord.chart_answer, ChatRecord.chart, ChatRecord.analysis, ChatRecord.predict,
                   ChatRecord.datasource_select_answer, ChatRecord.analysis_record_id, ChatRecord.predict_record_id,
                   ChatRecord.recommended_question, ChatRecord.first_chat,
-                  ChatRecord.predict_data, ChatRecord.finish, ChatRecord.error)).filter(
-        and_(Chat.create_by == current_user.id, ChatRecord.chat_id == chart_id)).order_by(ChatRecord.create_time).all()
+                  ChatRecord.finish, ChatRecord.error).where(
+        and_(ChatRecord.create_by == current_user.id, ChatRecord.chat_id == chart_id)).order_by(ChatRecord.create_time)
+    result = session.execute(stmt).all()
+    record_list: list[ChatRecord] = []
+    for row in result:
+        record_list.append(
+            ChatRecord(id=row.id, chat_id=row.chat_id, create_time=row.create_time, finish_time=row.finish_time,
+                       question=row.question, sql_answer=row.sql_answer, sql=row.sql,
+                       chart_answer=row.chart_answer, chart=row.chart,
+                       analysis=row.analysis, predict=row.predict,
+                       datasource_select_answer=row.datasource_select_answer,
+                       analysis_record_id=row.analysis_record_id, predict_record_id=row.predict_record_id,
+                       recommended_question=row.recommended_question, first_chat=row.first_chat,
+                       finish=row.finish, error=row.error))
 
     result = list(map(format_record, record_list))
 

frontend/src/views/chat/answer/ChartAnswer.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import BaseAnswer from './BaseAnswer.vue'
 import { Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord, questionApi } from '@/api/chat.ts'
-import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import ChartBlock from '@/views/chat/chat-block/ChartBlock.vue'
 const props = withDefaults(
   defineProps<{
     chatList?: Array<ChatInfo>
@@ -234,11 +235,18 @@ onBeforeUnmount(() => {
   stop()
 })
 
+onMounted(() => {
+  if (props.message?.record?.id && props.message?.record?.finish) {
+    getChatData(props.message.record.id)
+  }
+})
+
 defineExpose({ sendMessage, index: () => index.value, stop })
 </script>
 
 <template>
   <BaseAnswer v-if="message" :message="message" :reasoning-name="reasoningName" :loading="_loading">
+    <ChartBlock style="margin-top: 12px" :message="message" />
     <slot></slot>
     <template #tool>
       <slot name="tool"></slot>

frontend/src/views/chat/answer/PredictAnswer.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import BaseAnswer from './BaseAnswer.vue'
 import { chatApi, ChatInfo, type ChatMessage, ChatRecord } from '@/api/chat.ts'
-import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import MdComponent from '@/views/chat/component/MdComponent.vue'
+import ChartBlock from '@/views/chat/chat-block/ChartBlock.vue'
 const props = withDefaults(
   defineProps<{
     chatList?: Array<ChatInfo>
@@ -174,6 +175,7 @@ const sendMessage = async () => {
             break
           case 'predict-success':
             //currentChat.value.records[_index].predict_data = data.content
+            getChatPredictData(_currentChat.value.records[index.value].id)
             emits('finish', currentRecord.id)
             break
           case 'predict_finish':
@@ -198,6 +200,33 @@ const sendMessage = async () => {
   }
 }
 
+const chartBlockRef = ref()
+
+function getChatPredictData(recordId?: number) {
+  chatApi.get_chart_predict_data(recordId).then((response) => {
+    _currentChat.value.records.forEach((record) => {
+      if (record.id === recordId) {
+        record.predict_data = response ?? []
+
+        if (record.predict_data.length > 1) {
+          getChatData(recordId)
+        }
+      }
+    })
+  })
+}
+
+function getChatData(recordId?: number) {
+  chatApi.get_chart_data(recordId).then((response) => {
+    _currentChat.value.records.forEach((record) => {
+      if (record.id === recordId) {
+        record.data = response
+        console.log(record.data)
+      }
+    })
+  })
+}
+
 function stop() {
   stopFlag.value = true
   _loading.value = false
@@ -208,12 +237,25 @@ onBeforeUnmount(() => {
   stop()
 })
 
+onMounted(() => {
+  if (props.message?.record?.id && props.message?.record?.finish) {
+    getChatPredictData(props.message.record.id)
+  }
+})
+
 defineExpose({ sendMessage, index: () => index.value, chatList: () => _chatList, stop })
 </script>
 
 <template>
   <BaseAnswer v-if="message" :message="message" :reasoning-name="['predict']" :loading="_loading">
     <MdComponent :message="message.record?.predict_content" style="margin-top: 12px" />
+    <ChartBlock
+      v-if="message.record?.predict_data?.length > 0 && message.record?.data"
+      ref="chartBlockRef"
+      style="margin-top: 12px"
+      :message="message"
+      is-predict
+    />
     <slot></slot>
     <template #tool>
       <slot name="tool"></slot>

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

@@ -81,19 +81,17 @@ const data = computed(() => {
         }
       }
     } else {
-      if (props.message?.record?.predict_data.length > 0) {
+      if (props.message?.record?.predict_data?.length > 0) {
         _list = props.message?.record?.predict_data
       }
     }
-
     if (_list.length == 0) {
       return _list
     }
 
-    if (dataObject.value.data && dataObject.value.data.length > 0) {
+    if (dataObject.value.data && dataObject.value.data?.length > 0) {
       return concat(dataObject.value.data, _list)
     }
-
     return _list
   } else {
     return dataObject.value.data
@@ -180,6 +178,10 @@ function onTypeChange(val: any) {
   chartRef.value?.onTypeChange()
 }
 
+function reloadChart() {
+  chartRef.value?.onTypeChange()
+}
+
 const dialogVisible = ref(false)
 
 function openFullScreen() {
@@ -274,6 +276,10 @@ function exportToImage() {
   exportRef.value?.hide()
 }
 
+defineExpose({
+  reloadChart,
+})
+
 watch(
   () => chartObject.value?.type,
   (val) => {

frontend/src/views/chat/index.vue

@@ -160,7 +160,6 @@
                     @error="onChartAnswerError"
                     @stop="onChatStop"
                   >
-                    <ChartBlock style="margin-top: 12px" :message="message" />
                     <ErrorInfo :error="message.record?.error" class="error-container" />
                     <template #tool>
                       <ChatToolBar v-if="!message.isTyping" :message="message">
@@ -265,7 +264,6 @@
                     @error="onPredictAnswerError"
                     @stop="onChatStop"
                   >
-                    <ChartBlock style="margin-top: 12px" :message="message" is-predict />
                     <ErrorInfo :error="message.record?.error" class="error-container" />
                     <template #tool>
                       <ChatToolBar v-if="!message.isTyping" :message="message" />
@@ -337,7 +335,6 @@ import ChartAnswer from './answer/ChartAnswer.vue'
 import AnalysisAnswer from './answer/AnalysisAnswer.vue'
 import PredictAnswer from './answer/PredictAnswer.vue'
 import UserChat from './chat-block/UserChat.vue'
-import ChartBlock from './chat-block/ChartBlock.vue'
 import RecommendQuestion from './RecommendQuestion.vue'
 import ChatListContainer from './ChatListContainer.vue'
 import ChatCreator from '@/views/chat/ChatCreator.vue'
@@ -345,7 +342,7 @@ import ErrorInfo from './ErrorInfo.vue'
 import ChatToolBar from './ChatToolBar.vue'
 import { dsTypeWithImg } from '@/views/ds/js/ds-type'
 import { useI18n } from 'vue-i18n'
-import { find } from 'lodash-es'
+import { find, forEach } from 'lodash-es'
 import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
 import icon_sidebar_outlined from '@/assets/svg/icon_sidebar_outlined.svg'
 import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
@@ -490,9 +487,14 @@ function getChatList(callback?: () => void) {
     })
 }
 
-function onClickHistory(chat: Chat) {
+function onClickHistory(chat: ChatInfo) {
   scrollToBottom()
-  console.debug('click history', chat)
+  forEach(chat?.records, (record: ChatRecord) => {
+    // getChatData(record.id)
+    if (record.predict_record_id) {
+      // getChatPredictData(record.id)
+    }
+  })
 }
 
 const currentChatEngineType = computed(() => {
@@ -629,16 +631,6 @@ const sendMessage = async ($event: any = {}) => {
   })
 }
 
-function getChatPredictData(recordId?: number) {
-  chatApi.get_chart_predict_data(recordId).then((response) => {
-    currentChat.value.records.forEach((record) => {
-      if (record.id === recordId) {
-        record.predict_data = response ?? []
-      }
-    })
-  })
-}
-
 const analysisAnswerRef = ref()
 
 async function onAnalysisAnswerFinish(id: number) {
@@ -704,7 +696,7 @@ const predictAnswerRef = ref()
 async function onPredictAnswerFinish(id: number) {
   loading.value = false
   isTyping.value = false
-  getChatPredictData(id)
+  console.debug('onPredictAnswerFinish: ', id)
   //await getRecommendQuestions(id)
 }
 function onPredictAnswerError() {