feat: chat

Author: ulleo

frontend/src/api/chat.ts

@@ -24,6 +24,7 @@ export interface ChatMessage {
   isTyping?: boolean
   first_chat?: boolean
   recommended_question?: string
+  index: number
 }
 
 export class ChatRecord {

frontend/src/assets/svg/icon_down_outlined.svg

@@ -82,7 +82,9 @@
     "continue_to_ask": "继续提问:",
     "data_analysis": "数据预测",
     "data_predict": "数据分析",
-    "chat_search": "搜索"
+    "chat_search": "搜索",
+    "thinking": "思考中",
+    "thinking_step": "思考过程"
   },
   "ds": {
     "title": "数据源",
@@ -354,4 +356,4 @@
     "back_community": "还原至社区版",
     "confirm_tips": "确定还原至社区版？"
   }
-}
+}

frontend/src/assets/svg/icon_up_outlined.svg

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-// import ChatBlock from './ChatBlock.vue'
-// import ChatRecordFirst from './ChatRecordFirst.vue'
 import { ChatInfo, type ChatMessage } from '@/api/chat.ts'
-// import { UserFilled } from '@element-plus/icons-vue'
 import logo_fold from '@/assets/LOGO-fold.svg'
 
 withDefaults(
@@ -18,42 +15,52 @@ withDefaults(
 </script>
 
 <template>
-  <div class="chat-row" :class="{ 'right-to-left': msg.role === 'user' }">
-    <el-avatar v-if="msg.role === 'assistant'" class="ai-avatar" shape="square">
-      <el-icon>
-        <logo_fold v-if="!hideAvatar" />
-      </el-icon>
-    </el-avatar>
-    <div :class="{ 'row-full': msg.role === 'assistant' }">
-      <slot></slot>
+  <div class="chat-row-container">
+    <div class="chat-row" :class="{ 'right-to-left': msg.role === 'user' }">
+      <div v-if="msg.role === 'assistant'" class="ai-avatar">
+        <el-icon>
+          <logo_fold v-if="!hideAvatar" />
+        </el-icon>
+      </div>
+      <div :class="{ 'row-full': msg.role === 'assistant' }">
+        <slot></slot>
+      </div>
     </div>
+    <slot name="footer"></slot>
   </div>
 </template>
 
 <style scoped lang="less">
-.chat-row {
+.chat-row-container {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
   gap: 8px;
-
-  padding: 20px 0 0;
-  max-width: 800px;
   width: 100%;
+  max-width: 800px;
 
-  &.right-to-left {
-    flex-direction: row-reverse;
-  }
+  .chat-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 20px 0 0;
 
-  .row-full {
-    flex: 1;
-    width: 0;
-  }
+    width: 100%;
+
+    &.right-to-left {
+      flex-direction: row-reverse;
+    }
+
+    .row-full {
+      flex: 1;
+      width: 0;
+    }
 
-  .ai-avatar {
-    font-size: 28px;
-    background: transparent;
-    width: 28px;
+    .ai-avatar {
+      font-size: 28px;
+      background: transparent;
+      width: 28px;
+    }
   }
 }
 </style>

frontend/src/i18n/zh-CN.json

@@ -37,31 +37,51 @@ function clickQuestion(question: string): void {
 <template>
   <div v-if="computedQuestions.length > 0" class="recommend-questions">
     <div v-if="firstChat">{{ t('qa.guess_u_ask') }}</div>
-    <div v-else>{{ t('qa.continue_to_ask') }}</div>
-    <div v-for="(question, index) in computedQuestions" :key="index">
-      <span class="question" @click="clickQuestion(question)">
+    <div v-else class="continue-ask">{{ t('qa.continue_to_ask') }}</div>
+    <div class="question-grid">
+      <div
+        v-for="(question, index) in computedQuestions"
+        :key="index"
+        class="question"
+        @click="clickQuestion(question)"
+      >
         {{ question }}
-      </span>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="less">
 .recommend-questions {
   padding: 8px;
-  font-size: 12px;
-  font-weight: 400;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  .continue-ask {
+    color: rgba(100, 106, 115, 1);
+    font-weight: 400;
+  }
+
+  .question-grid {
+    display: grid;
+    grid-gap: 12px;
+    grid-template-columns: repeat(2, 50%);
+  }
+
   .question {
+    font-weight: 400;
     cursor: pointer;
-    background: lightgray;
-    border-radius: 4px;
-    padding: 4px;
-    line-height: 20px;
+    background: rgba(245, 246, 247, 1);
+    min-height: 46px;
+    border-radius: 6px;
+    padding: 12px;
+    line-height: 22px;
     &:hover {
-      background: grey;
+      background: rgba(31, 35, 41, 0.1);
     }
   }
 }