smartai2dian0/src/modules/conversation-item/DialogAnswer.vue

<template>
  <div class="dialog-item dialog-anwser" :class="anwser_klass">
    <BtnSelectItem v-if="select_btn_visible" @change="handleSelectChange" />

    <div class="dialog-main answer-main">
      <div class="dialog-icon answer-icon">
        <img :src="answer.client_custom_icon" />
      </div>

      <div class="dialog-content answer-content">
        <div>
          <DialogContent :content="answer_html" :is_loading="is_content_loading">
            <DialogActions
              v-if="answer_status === 2"
              class="answer-actions-btns"
              @copy="handleAnswerCopy"
              @share="handleAnswerShare"
              @retry="handleAnswerRetry"
            />
          </DialogContent>

          <BtnStopChat v-if="answer_status === 1" @stop="handleStopChat" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 智能体的回答内容，可能需要包括下面一些功能
 *
 * 4. 回答反馈：分享、点赞、复制
 */
import { computed, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import BtnSelectItem from './BtnSelectItem.vue';

import DialogActions from './DialogActions.vue';
import BtnStopChat from './BtnStopChat.vue';
import DialogContent from '../conversation-content/DialogContent.vue';

import formatAnwserString from '../conversation-dialog/format-anwser-string';
import { formatFileDownloadStr } from '../conversation-dialog/format-dialog-answer-custom-markdown-str';
import { getIconIntelligent } from '../common/icon-map';
import { formatStaticAssetsUrl } from '../../utils/utils';

import applyRefferencePopover4RefFlag from '../answer-refference/apply-refference-popover-4-ref-flag';
import applyRefferencePopover4FileName from '../answer-refference/apply-refference-popover-4-filename';
import { applyCodeHighLight } from '../conversation-dialog/format-code-string';

import copyText from '../../3rd-libs/clipboard';

const props = defineProps({
  /**
   * 是否显示选择按钮
   * 仿照kimi，当用户选择分享时，选择按钮会展示
   */
  show_select: true,

  /**
   * 答案内容数据
   */
  answer: Object
});

const emit = defineEmits(['stop', 'retry', 'select']);

const select_btn_visible = computed(() => {
  return props.show_select === true;
});

/**
 * 当前对话的状态
 * 0 加载中
 * 1 正在对话
 * 2 已结束
 */
const answer_status = computed(() => {
  const answer = props.answer;

  return answer.client_custom_chat_status;
});

/**
 * 内容是否正在加载中
 */
const is_content_loading = computed(() => {
  return answer_status.value === 0;
});

/**
 * 智能体回答的内容的html字符串
 * 是markdown格式
 * 需要使用markdown解析器进行解析
 */
const answer_html = computed(() => {
  const answer = props.answer;
  const str = answer.content;

  let answer_string = formatAnwserString(str);

  // 由于SQL和代码不能通过markdown解析，所以此处进行字符串的拼接
  // 在markdown转换结束后，添加拼接字符串
  if (answer.client_custom_linked_code) {
    answer_string = answer_string + answer.client_custom_linked_code;
  }

  if (answer.client_custom_linked_sql) {
    answer_string = answer_string + answer.client_custom_linked_sql;
  }

  if (answer.client_custom_linked_image) {
    const img_url = formatStaticAssetsUrl(answer.client_custom_linked_image);
    answer_string = answer_string + `<img src="${img_url}" />`;
  }

  // 处理下载链接
  if (answer.client_custom_linked_download_files) {
    const file_name = answer.client_custom_linked_download_files.file_name;
    const file_url = answer.client_custom_linked_download_files.file_url;
    const download_file_str = formatFileDownloadStr(file_name, file_url);
    answer_string = answer_string + download_file_str;
  }

  return answer_string;
});

const anwser_klass = computed(() => {
  const answer = props.answer;

  // console.log(answer, '答案数据');

  return `klass-${answer.client_custom_unique_id}-answer-content`;
});

const handleSelectChange = () => {
  emit('select');
};

/**
 * 停止答案的生成
 */
const handleStopChat = () => {
  emit('stop');
};

/**
 * copy
 */
const handleAnswerCopy = () => {
  copyText(answer_html.value);
  Message.success('已复制');
};

/**
 * 分享答案
 */
const handleAnswerShare = () => {};

/**
 * 重新生成答案
 */
const handleAnswerRetry = () => {
  emit('retry');
};

onMounted(() => {
  const container_klass = anwser_klass.value;
  const answer = props.answer;

  /**
   * 文档引用效果
   */
  applyRefferencePopover4RefFlag(container_klass, answer.client_custom_linked_refference_full_content);
  applyRefferencePopover4FileName(container_klass, answer.client_custom_linked_refference_full_content);
  /**
   * 处理代码样式
   */
  applyCodeHighLight(container_klass);
});
</script>

<style src="./dialog-item-common.css" />
<style lang="css" scoped>
.dialog-anwser {
  color: var(--color-text-1);

  display: flex;
  justify-content: space-between;
}

.answer-main {
}
.answer-content {
  display: flex;
  justify-content: flex-start;
}

.answer-icon {
  margin-right: 5px;
}
.answer-icon img {
  width: 100%;
}

.answer-actions-btns {
  margin-top: 5px;
}
</style>