优化对话框

ui/src/components/ai-dialog/OperationButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-tooltip effect="dark" content="重新生成" placement="top">
-      <el-button text @click.stop>
+      <el-button text @click="regeneration">
         <AppIcon iconName="VideoPlay"></AppIcon>
       </el-button>
     </el-tooltip>
@@ -74,11 +74,15 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:data'])
+const emit = defineEmits(['update:data', 'regeneration'])
 
 const buttonData = ref(props.data)
 const loading = ref(false)
 
+function regeneration() { 
+  emit('regeneration')
+}
+
 function voteHandle(val: string) {
   applicationApi
     .putChatVote(props.applicationId, props.chartId, props.data.record_id, val, loading)

ui/src/components/ai-dialog/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="ai-dialog p-24">
+  <div class="ai-dialog">
     <el-scrollbar ref="scrollDiv">
-      <div ref="dialogScrollbar" class="ai-dialog__content">
+      <div ref="dialogScrollbar" class="ai-dialog__content p-24">
         <div class="item-content mb-16">
           <div class="avatar">
             <AppAvatar class="avatar-gradient">
@@ -56,7 +56,9 @@
             </div>
             <div class="content">
               <div class="flex" v-if="!item.answer_text">
-                <el-card shadow="always" class="dialog-card"> 回答中... </el-card>
+                <el-card shadow="always" class="dialog-card">
+                  回答中 <span class="dotting"></span>
+                </el-card>
               </div>
               <el-card v-else shadow="always" class="dialog-card">
                 <MarkdownRenderer
@@ -79,7 +81,12 @@
                 </div>
 
                 <div v-if="item.write_ed && props.appId">
-                  <OperationButton :data="item" :applicationId="appId" :chartId="chartOpenId" />
+                  <OperationButton
+                    :data="item"
+                    :applicationId="appId"
+                    :chartId="chartOpenId"
+                    @regeneration="regenerationChart(item)"
+                  />
                 </div>
               </div>
             </div>
@@ -132,6 +139,7 @@ const scrollDiv = ref()
 const dialogScrollbar = ref()
 const loading = ref(false)
 const inputValue = ref('')
+const problem_text = ref('') //备份问题
 const chartOpenId = ref('')
 const chatList = ref<chatType[]>([])
 
@@ -198,6 +206,7 @@ function getChartOpenId() {
       })
   }
 }
+
 function chatMessage() {
   loading.value = true
   if (!chartOpenId.value) {
@@ -250,6 +259,11 @@ function chatMessage() {
   }
 }
 
+function regenerationChart(item: chatType) {
+  inputValue.value = item.problem_text
+  chatMessage()
+}
+
 // 滚动到底部
 function handleScrollBottom() {
   nextTick(() => {
@@ -269,12 +283,11 @@ onUpdated(() => {
   flex-direction: column;
   box-sizing: border-box;
   position: relative;
-  padding-right: 20px;
-  padding-top: 0;
   color: var(--app-text-color);
   &__content {
-    width: 99%;
+    padding-top: 0;
     padding-bottom: 96px;
+    box-sizing: border-box;
 
     .avatar {
       float: left;
@@ -282,7 +295,7 @@ onUpdated(() => {
     .content {
       padding-left: var(--padding-left);
       :deep(ol) {
-        margin-left: 16px!important;
+        margin-left: 16px !important;
       }
     }
     .text {
@@ -317,7 +330,6 @@ onUpdated(() => {
     width: 100%;
     box-sizing: border-box;
     z-index: 10;
-    padding-top: 16px;
     &:before {
       background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
       content: '';

ui/src/styles/app.scss

@@ -360,3 +360,52 @@ h4 {
 .primary {
   color: var(--el-color-primary);
 }
+
+.dotting {
+  display: inline-block;
+  width: 10px;
+  min-height: 2px;
+  padding-right: 2px;
+  margin-left: 2px;
+  padding-left: 2px;
+  border-left: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  background-color: currentColor;
+  background-clip: content-box;
+  box-sizing: border-box;
+  -webkit-animation: dot 0.8s infinite step-start both;
+  animation: dot 0.8s infinite step-start both;
+  &:before {
+    content: '...';
+  }
+  &::before {
+    content: '';
+  }
+}
+
+@-webkit-keyframes dot {
+  25% {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  50% {
+    border-right-color: transparent;
+    background-color: transparent;
+  }
+  75% {
+    border-right-color: transparent;
+  }
+}
+@keyframes dot {
+  25% {
+    border-color: transparent;
+    background-color: transparent;
+  }
+  50% {
+    border-right-color: transparent;
+    background-color: transparent;
+  }
+  75% {
+    border-right-color: transparent;
+  }
+}

ui/src/views/chat/index.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="chat">
+  <div class="chat" v-loading="loading">
     <div class="chat__header">
       <div class="chat-width">
         <h2 class="ml-24">{{ applicationDetail?.name }}</h2>
       </div>
     </div>
-    <div class="chat__main chat-width" v-loading="loading">
+    <div class="chat__main chat-width">
       <AiDialog v-model:data="applicationDetail" :appId="applicationDetail?.id"></AiDialog>
     </div>
+    <div class="chat__footer"></div>
   </div>
 </template>
 <script setup lang="ts">
@@ -60,8 +61,26 @@ onMounted(() => {
     padding-top: calc(var(--app-header-height) + 24px);
     height: calc(100vh - var(--app-header-height) - 24px);
   }
+  &__footer {
+    background: #f3f7f9;
+    height: 80px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    &:before {
+      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
+      content: '';
+      position: absolute;
+      width: 100%;
+      top: -16px;
+      left: 0;
+      height: 16px;
+    }
+  }
   .chat-width {
-    width: 840px;
+    width: 860px;
     margin: 0 auto;
   }
 }