DialogItem.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <div class="dialog-item-container">
  3. <DialogQuestion v-if="item_type === 'q'" :question="questionInfo" @select="handleSelectChat" />
  4. <DialogAnswer
  5. v-if="item_type === 'a'"
  6. :answer="answerInfo"
  7. @stop="handleStopChat"
  8. @retry="handleRetryChat"
  9. @select="handleSelectChat"
  10. />
  11. </div>
  12. </template>
  13. <script setup>
  14. import { ref, computed } from 'vue';
  15. import DialogQuestion from './dialog-item/DialogQuestion.vue';
  16. import DialogAnswer from './dialog-item/DialogAnswer.vue';
  17. const props = defineProps({
  18. dialog: Object
  19. });
  20. const emit = defineEmits(['stop', 'retry', 'select']);
  21. /**
  22. * 当前这一项的类别,有两个值
  23. * q 提问
  24. * a 智能体的回答
  25. */
  26. const item_type = computed(() => {
  27. const item = props.dialog;
  28. return item.client_custom_item_type;
  29. });
  30. /**
  31. * 客户端提问数据
  32. */
  33. const questionInfo = computed(() => {
  34. return {
  35. content: props.dialog.question
  36. };
  37. });
  38. /**
  39. * 智能体回答的答案
  40. */
  41. const answerInfo = computed(() => {
  42. const chat_info = props.dialog;
  43. const obj = {};
  44. // 智能体回答的内容
  45. if (chat_info.answer) {
  46. obj.content = chat_info.answer;
  47. }
  48. /**
  49. * 状态值信息
  50. * 0 加载中
  51. * 1 正在对话
  52. * 2 已结束
  53. */
  54. obj.client_custom_chat_status = chat_info.client_custom_chat_status;
  55. return obj;
  56. });
  57. /**
  58. * 停止答案的生成
  59. */
  60. const handleStopChat = () => {
  61. emit('stop');
  62. };
  63. const handleRetryChat = () => {
  64. emit('retry');
  65. };
  66. const handleSelectChat = () => {
  67. emit('select');
  68. };
  69. </script>
  70. <style lang="css" scoped>
  71. .dialog-item-container {
  72. margin-top: 10px;
  73. margin-bottom: 10px;
  74. }
  75. </style>