feat: chat css

backend/apps/chat/curd/chat.py

@@ -4,7 +4,6 @@ from typing import List
 import orjson
 from sqlalchemy import and_
 from sqlalchemy.orm import load_only
-from sqlmodel import select
 
 from apps.chat.models.chat_model import Chat, ChatRecord, CreateChat, ChatInfo, RenameChat, ChatQuestion
 from apps.datasource.models.datasource import CoreDatasource
@@ -13,8 +12,9 @@ from common.utils.utils import extract_nested_json
 
 
 def list_chats(session: SessionDep, current_user: CurrentUser) -> List[Chat]:
-    chart_list = session.exec(
-        select(Chat).where(Chat.create_by == current_user.id).order_by(Chat.create_time.desc())).all()
+    oid = current_user.oid if current_user.oid is not None else 1
+    chart_list = session.query(Chat).filter(and_(Chat.create_by == current_user.id, Chat.oid == oid)).order_by(
+        Chat.create_time.desc()).all()
     return chart_list
 
 
@@ -149,6 +149,7 @@ def create_chat(session: SessionDep, current_user: CurrentUser, create_chat_obj:
 
     chat = Chat(create_time=datetime.datetime.now(),
                 create_by=current_user.id,
+                oid=current_user.oid if current_user.oid is not None else 1,
                 brief=create_chat_obj.question.strip()[:20])
     ds: CoreDatasource | None = None
     if create_chat_obj.datasource:

frontend/src/views/chat/ChatToolBar.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { datetimeFormat } from '@/utils/utils.ts'
+import type { ChatMessage } from '@/api/chat.ts'
+
+defineProps<{
+  message: ChatMessage
+}>()
+</script>
+
+<template>
+  <div class="tool-container">
+    <div class="tool-btns">
+      <slot></slot>
+    </div>
+    <div class="tool-times">
+      <div></div>
+      <div class="time">
+        {{ datetimeFormat(message?.record?.create_time) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.tool-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  row-gap: 8px;
+
+  min-height: 22px;
+
+  margin-top: 12px;
+  margin-bottom: 12px;
+
+  .tool-times {
+    flex: 1;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: rgba(100, 106, 115, 1);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .time {
+      white-space: nowrap;
+    }
+  }
+}
+</style>

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

@@ -70,9 +70,9 @@ onMounted(() => {
 
 <template>
   <div class="base-answer-block">
-    <el-button v-if="loading || hasReasoning" class="thinking-btn" @click="clickShow">
+    <el-button v-if="message.isTyping || hasReasoning" class="thinking-btn" @click="clickShow">
       <div class="thinking-btn-inner">
-        <span v-if="loading">{{ t('qa.thinking') }}</span>
+        <span v-if="message.isTyping">{{ t('qa.thinking') }}</span>
         <span v-else>{{ t('qa.thinking_step') }}</span>
         <span class="btn-icon">
           <el-icon v-if="show">
@@ -140,7 +140,14 @@ onMounted(() => {
       line-height: 22px;
       font-weight: 400;
       font-size: 14px;
-      color: rgba(143, 149, 158, 1);
+      color: rgba(143, 149, 158, 1) !important;
+
+      .markdown-body {
+        color: rgba(143, 149, 158, 1) !important;
+        line-height: 22px;
+        font-weight: 400;
+        font-size: 14px;
+      }
 
       padding-bottom: 8px;
       border-bottom: 1px solid rgba(31, 35, 41, 0.15);

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { ChatMessage } from '@/api/chat.ts'
+import DisplayChartBlock from '@/views/chat/component/DisplayChartBlock.vue'
+import { computed, ref } from 'vue'
+import { concat } from 'lodash-es'
+import type { ChartTypes } from '@/views/chat/component/BaseChart.ts'
+
+const props = withDefaults(
+  defineProps<{
+    message: ChatMessage
+    isPredict?: boolean
+  }>(),
+  {
+    isPredict: false,
+  }
+)
+
+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(() => {
+  if (props.isPredict) {
+    let _list = []
+    if (
+      props.message?.record?.predict_data &&
+      typeof props.message?.record?.predict_data === 'string'
+    ) {
+      if (
+        props.message?.record?.predict_data.length > 0 &&
+        props.message?.record?.predict_data.trim().startsWith('[') &&
+        props.message?.record?.predict_data.trim().endsWith(']')
+      ) {
+        try {
+          _list = JSON.parse(props.message?.record?.predict_data)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    } else {
+      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) {
+      return concat(dataObject.value.data, _list)
+    }
+
+    return _list
+  } else {
+    return dataObject.value.data
+  }
+})
+
+const chartRef = ref()
+
+const chartObject = computed<{
+  type: ChartTypes
+  title: string
+  axis: {
+    x: { name: string; value: string }
+    y: { name: string; value: string }
+    series: { name: string; value: string }
+  }
+  columns: Array<{ name: string; value: string }>
+}>(() => {
+  if (props.message?.record?.chart) {
+    return JSON.parse(props.message.record.chart)
+  }
+  return {}
+})
+
+const currentChartType = ref<ChartTypes | undefined>(undefined)
+
+const chartType = computed<ChartTypes>({
+  get() {
+    if (currentChartType.value) {
+      return currentChartType.value
+    }
+    return chartObject.value.type ?? 'table'
+  },
+  set(v) {
+    currentChartType.value = v
+  },
+})
+</script>
+
+<template>
+  <div
+    v-if="
+      (!isPredict && (message?.record?.sql || message?.record?.chart)) ||
+      (isPredict && message?.record?.chart && data.length > 0)
+    "
+    class="chart-component-container"
+  >
+    <div class="header-bar">todo</div>
+    <div v-if="message?.record?.chart" class="chart-block">
+      <DisplayChartBlock
+        :id="message.record.id"
+        ref="chartRef"
+        :chart-type="chartType"
+        :message="message"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.chart-component-container {
+  width: 100%;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+
+  gap: 16px;
+
+  border: 1px solid rgba(222, 224, 227, 1);
+  border-radius: 12px;
+
+  .header-bar {
+    height: 32px;
+  }
+
+  .chart-block {
+    height: 352px;
+    width: 100%;
+  }
+}
+</style>

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

@@ -61,29 +61,26 @@ defineExpose({
 </script>
 
 <template>
-  <div v-if="message?.record">
-    <div v-if="message.record.chart" class="chart-base-container">
-      <div v-if="data?.length > 0">
-        <ChartComponent
-          v-if="message.record.id"
-          :id="id ?? 'default_chat_id'"
-          ref="chartRef"
-          :type="chartType"
-          :columns="chartObject?.columns"
-          :x="xAxis"
-          :y="yAxis"
-          :series="series"
-          :data="data"
-        />
-      </div>
-      <el-empty v-else description="No Data" />
-    </div>
+  <div v-if="message.record?.chart" class="chart-base-container">
+    <ChartComponent
+      v-if="message.record.id && data?.length > 0"
+      :id="id ?? 'default_chat_id'"
+      ref="chartRef"
+      :type="chartType"
+      :columns="chartObject?.columns"
+      :x="xAxis"
+      :y="yAxis"
+      :series="series"
+      :data="data"
+    />
+    <el-empty v-else description="No Data" />
   </div>
 </template>
 
 <style scoped lang="less">
 .chart-base-container {
-  padding: 20px;
+  height: 100%;
+  width: 100%;
   background: rgba(224, 224, 226, 0.29);
 }
 </style>

frontend/src/views/chat/index.vue

@@ -116,14 +116,14 @@
                     @finish="onChartAnswerFinish"
                     @error="onChartAnswerError"
                   >
-                    <div style="height: 100px; width: 100%; background: grey">todo</div>
+                    <ChartBlock :message="message" />
                     <div
                       v-if="message.record?.error && message.record?.error?.trim().length > 0"
                       class="error-container"
                     >
                       {{ message.record?.error }}
                     </div>
-                    <div class="tool-container">
+                    <ChatToolBar :message="message">
                       <div class="tool-btns">
                         <el-tooltip effect="dark" :content="t('qa.ask_again')" placement="top">
                           <el-button
@@ -175,10 +175,7 @@
                           </div>
                         </template>
                       </div>
-                      <div class="tool-times">
-                        {{ datetimeFormat(message.record?.create_time) }}
-                      </div>
-                    </div>
+                    </ChatToolBar>
                     <template #footer>
                       <RecommendQuestion
                         :questions="message.recommended_question"
@@ -207,12 +204,7 @@
                     >
                       {{ message.record?.error }}
                     </div>
-                    <div class="tool-container">
-                      <div class="tool-btns"></div>
-                      <div class="tool-times">
-                        {{ datetimeFormat(message.record?.create_time) }}
-                      </div>
-                    </div>
+                    <ChatToolBar :message="message" />
                   </AnalysisAnswer>
                   <PredictAnswer
                     v-if="
@@ -228,18 +220,14 @@
                     @finish="onPredictAnswerFinish"
                     @error="onPredictAnswerError"
                   >
+                    <ChartBlock :message="message" is-predict />
                     <div
                       v-if="message.record?.error && message.record?.error?.trim().length > 0"
                       class="error-container"
                     >
                       {{ message.record?.error }}
                     </div>
-                    <div class="tool-container">
-                      <div class="tool-btns"></div>
-                      <div class="tool-times">
-                        {{ datetimeFormat(message.record?.create_time) }}
-                      </div>
-                    </div>
+                    <ChatToolBar :message="message" />
                   </PredictAnswer>
                 </template>
               </ChatRow>
@@ -296,9 +284,11 @@ 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'
+import ChatToolBar from './ChatToolBar.vue'
 import { useI18n } from 'vue-i18n'
 import { endsWith, find, startsWith } from 'lodash-es'
 import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
@@ -308,7 +298,6 @@ import icon_screen_outlined from '@/assets/svg/icon_screen_outlined.svg'
 import icon_start_outlined from '@/assets/svg/icon_start_outlined.svg'
 import logo_fold from '@/assets/LOGO-fold.svg'
 import logo from '@/assets/LOGO.svg'
-import { datetimeFormat } from '@/utils/utils.ts'
 
 import { useAssistantStore } from '@/stores/assistant'
 const assistantStore = useAssistantStore()
@@ -839,63 +828,43 @@ defineExpose({
   color: rgba(31, 35, 41, 1);
 }
 
-.tool-container {
+.tool-btns {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
   flex-wrap: wrap;
 
-  min-height: 22px;
+  column-gap: 16px;
+  row-gap: 8px;
 
-  margin-top: 12px;
-  margin-bottom: 12px;
-
-  .tool-times {
+  .tool-btn {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
     color: rgba(100, 106, 115, 1);
+
+    .tool-btn-inner {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &:hover {
+      background: rgba(31, 35, 41, 0.1);
+    }
+    &:active {
+      background: rgba(31, 35, 41, 0.1);
+    }
   }
 
-  .tool-btns {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
+  .btn-text {
+    margin-left: 4px;
+  }
 
-    column-gap: 16px;
-    row-gap: 8px;
-
-    .tool-btn {
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 22px;
-      color: rgba(100, 106, 115, 1);
-
-      .tool-btn-inner {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-
-      &:hover {
-        background: rgba(31, 35, 41, 0.1);
-      }
-      &:active {
-        background: rgba(31, 35, 41, 0.1);
-      }
-    }
-
-    .btn-text {
-      margin-left: 4px;
-    }
-
-    .divider {
-      width: 1px;
-      height: 16px;
-      border-left: 1px solid rgba(31, 35, 41, 0.15);
-    }
+  .divider {
+    width: 1px;
+    height: 16px;
+    border-left: 1px solid rgba(31, 35, 41, 0.15);
   }
 }