feat: feedback

ui/src/conversation-panel/components/log-message-footer/feedback/FeedbackCard.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChatFeedback } from '@/api/types'
+
+const props = defineProps<{ feedback: ChatFeedback }>()
+const status = computed(() => props.feedback.vote_status)
+const reason = computed(() => props.feedback.vote_reason)
+const content = computed(() => props.feedback.vote_other_content ?? '')
+
+const reasons = computed(() =>
+  props.feedback.vote_status === '0'
+    ? ([
+        { value: 'accurate', label: '内容准确' },
+        { value: 'complete', label: '内容完善' },
+        { value: 'other', label: '其他' },
+      ] as const)
+    : ([
+        { value: 'inaccurate', label: '内容不准确' },
+        { value: 'incomplete', label: '内容不完善' },
+        { value: 'other', label: '其他' },
+      ] as const),
+)
+</script>
+
+<template>
+  <div class="mk-gray-card-lg border w-full space-y-3 mb-4">
+    <div>
+      <h4>{{ status === '0' ? '你觉得什么让你满意？' : '请告诉我们不满意的原因' }}</h4>
+    </div>
+    <div class="flex flex-wrap gap-2">
+      <template v-for="option in reasons" :key="option.value">
+        <!-- 只读展示反馈原因 -->
+        <el-check-tag :checked="reason === option.value" disabled>
+          {{ option.label }}
+        </el-check-tag>
+      </template>
+    </div>
+    <el-input v-if="reason === 'other'" :model-value="content" type="textarea" :rows="4" disabled placeholder="告诉我们更多关于你的相关体验" />
+  </div>
+</template>

ui/src/conversation-panel/components/log-message-footer/feedback/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ChatFeedback } from '@/api/types'
+
+defineOptions({ name: 'LogMessageFeedback' })
+defineProps<{ status?: ChatFeedback['vote_status'] }>()
+</script>
+
+<template>
+  <span v-if="status === '0'">
+    <!-- 只读展示满意反馈 -->
+    <el-button text disabled>
+      <MkIcon name="icon_thumbsup_filled" class="text-[#FFC60A]!" />
+    </el-button>
+  </span>
+  <span v-if="status === '1'">
+    <!-- 只读展示不满意反馈 -->
+    <el-button text disabled>
+      <MkIcon name="icon_thumbdown_filled" class="text-danger!" />
+    </el-button>
+  </span>
+</template>

ui/src/conversation-panel/components/log-message-footer/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type ChatLogApi from '@/api/admin/workspace/application/chat-log'
 import ButtonImprove from './improve/ButtonImprove.vue'
+import LogMessageFeedback from './feedback/index.vue'
+import FeedbackCard from './feedback/FeedbackCard.vue'
 import { computed } from 'vue'
 import type { ChatContent } from '@/api/types'
 import { copyText } from '@/utils/clipboard'
@@ -85,9 +87,11 @@ const openExecutionDetail = () => {
           :answer="answerText"
         />
       </span>
+      <!-- 反馈 -->
+      <LogMessageFeedback :status="meta.feedback?.vote_status" />
       <!-- 时间 -->
       <span v-if="meta.createTime" class="text-N600 ml-1">{{ datetimeFormat(meta.createTime) }}</span>
     </div>
-    <div></div>
+    <FeedbackCard v-if="meta.feedback && (meta.feedback.vote_status === '0' || meta.feedback.vote_status === '1')" :feedback="meta.feedback" />
   </div>
 </template>

ui/src/conversation-panel/components/log-message-list/index.ts

@@ -19,6 +19,7 @@ const buildRecordMeta = (raw: ChatLogRecord): ChatRecordMeta => ({
   runTime: raw.run_time || 0,
   knowledgeCount: (raw.paragraph_list || []).length,
   executionDetails: raw.execution_details || [],
+  feedback: { vote_status: raw.vote_status ?? '-1', vote_reason: raw.vote_reason, vote_other_content: raw.vote_other_content },
 })
 
 export function createLogMessageListStore(deps: LogMessageListDeps) {

ui/src/conversation-panel/components/message-footer/feedback/ButtonFeedback.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ChatFeedback } from '@/api/types'
+
+defineProps<{
+  currentStatus: ChatFeedback['vote_status']
+  submitting: boolean
+}>()
+const emit = defineEmits<{ select: [status: '0' | '1'] }>()
+</script>
+
+<template>
+  <div class="flex-align-center gap-1">
+    <!-- 打开满意反馈，再次点击已评价按钮可撤销 -->
+    <MkTooltip v-if="currentStatus === '-1' || currentStatus === '0'" :content="currentStatus === '0' ? '取消赞同' : '赞同'">
+      <el-button text :disabled="submitting" @click="emit('select', '0')">
+        <MkIcon v-if="currentStatus === '0'" name="icon_thumbsup_filled" class="text-[#FFC60A]!" />
+        <MkIcon v-else name="icon_thumbsup_outlined" />
+      </el-button>
+    </MkTooltip>
+    <!-- 打开不满意反馈，再次点击已评价按钮可撤销 -->
+    <MkTooltip v-if="currentStatus === '-1' || currentStatus === '1'" :content="currentStatus === '1' ? '取消反对' : '反对'">
+      <el-button text :disabled="submitting" @click="emit('select', '1')">
+        <MkIcon v-if="currentStatus === '1'" name="icon_thumbdown_filled" class="text-danger!" />
+        <MkIcon v-else name="icon_thumbdown_outlined" />
+      </el-button>
+    </MkTooltip>
+  </div>
+</template>

ui/src/conversation-panel/components/message-footer/feedback/FeedbackCard.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChatFeedback } from '@/api/types'
+
+const props = defineProps<{ status: '0' | '1'; submitting: boolean }>()
+const reason = defineModel<ChatFeedback['vote_reason']>('reason', { required: true })
+const content = defineModel<string>('content', { required: true })
+const emit = defineEmits<{ cancel: []; submit: [] }>()
+
+const reasons = computed(() =>
+  props.status === '0'
+    ? ([
+        { value: 'accurate', label: '内容准确' },
+        { value: 'complete', label: '内容完善' },
+        { value: 'other', label: '其他' },
+      ] as const)
+    : ([
+        { value: 'inaccurate', label: '内容不准确' },
+        { value: 'incomplete', label: '内容不完善' },
+        { value: 'other', label: '其他' },
+      ] as const),
+)
+</script>
+
+<template>
+  <div class="mk-gray-card-lg border w-full space-y-3 mb-4">
+    <div class="flex items-center justify-between gap-2">
+      <h4>{{ status === '0' ? '你觉得什么让你满意？' : '请告诉我们不满意的原因' }}</h4>
+      <!-- 关闭反馈填写面板 -->
+      <el-button text :disabled="submitting" @click="emit('cancel')"><MkIcon name="icon_close_outlined" /></el-button>
+    </div>
+    <div class="flex flex-wrap gap-2">
+      <template v-for="option in reasons" :key="option.value">
+        <!-- 选择或取消反馈原因 -->
+        <el-check-tag :checked="reason === option.value" :disabled="submitting" @change="reason = reason === option.value ? null : option.value">
+          {{ option.label }}
+        </el-check-tag>
+      </template>
+    </div>
+    <el-input
+      v-if="reason === 'other'"
+      v-model="content"
+      type="textarea"
+      :rows="4"
+      :disabled="submitting"
+      placeholder="告诉我们更多关于你的相关体验"
+    />
+    <div class="text-right">
+      <!-- 取消本次反馈 -->
+      <el-button class="w-16! min-w-0!" plain :disabled="submitting" @click="emit('cancel')">取消</el-button>
+      <!-- 提交反馈与补充说明 -->
+      <el-button
+        class="w-16! min-w-0!"
+        type="primary"
+        :loading="submitting"
+        :disabled="!reason || (reason === 'other' && !content.trim())"
+        @click="emit('submit')"
+      >
+        提交
+      </el-button>
+    </div>
+  </div>
+</template>