smartai2dian0/src/modules/conversation-content/DialogContent.vue

<template>
  <div class="dialog-chat-answer-content" :style="custom_style">
    <div class="mind-map" v-if="mind_map">
      <a-button class="mind-map-btn" @click="toShowMindMap">
        <img width="14px" style="margin-right: 10px" src="../../assets/chat/mind-map.png" alt="" />
        思维导图
      </a-button>
    </div>
    <DialogWebPage
      v-if="is_internet_search"
      :internet_search="internet_search"
      @toSearchPage="toSearchPage"
    ></DialogWebPage>
    <!-- <a-button class="think-select" v-if="deep_loading">
      <icon-robot class="robot" @click="handleThinkClick" />
      <span>思考中...</span>
      <icon-down v-if="true" class="down" />
      <icon-up v-else class="down" />
    </a-button> -->
    <DialogThinkContent v-if="is_think && deep_answer" :deep_loading="deep_loading" :deep_answer="deep_answer">
    </DialogThinkContent>

    <div v-if="is_loading">
      <a-spin></a-spin>
    </div>

    <div v-if="content.length !== 0 && !is_loading" v-html="content" class="answer-content-text" />
    <slot></slot>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import DialogWebPage from './DialogWebPage.vue';
import DialogThinkContent from './DialogThinkContent.vue';

// 接收markdown数据，进行一些转换
const props = defineProps({
  /**
   * 内容类型
   */
  type: String,
  /**
   * 文本内容
   */
  content: String,

  /**
   * 状态值
   */
  is_loading: Boolean,

  /**
   * 内容区域最大宽度
   */
  max_width: Number,
  /**
   *  是否展示思考
   * */
  is_think: Boolean,
  /**
   * 是否展示联网搜索
   * */
  is_internet_search: Boolean,
  /**
   * 联网数据
   * */
  internet_search: Array,
  deep_answer: String,
  deep_loading: Boolean,
  mind_map: String
});

const emit = defineEmits(['toSearchPage', 'toShowMindMap']);

/**
 * 内容DOM节点的样式
 * 主要用于控制节点的宽度，避免对话内容中某些内容将对话区域撑开，造成样式异常
 */
const custom_style = computed(() => {
  if (props.max_width) {
    return `max-width: ${props.max_width - 40}px;`;
  } else {
    return '';
  }
});
const toSearchPage = () => {
  emit('toSearchPage');
};
const handleThinkClick = () => {
  // 展开/收起
};
//
const toShowMindMap = () => {
  emit('toShowMindMap');
};
</script>

<style lang="css" scoped>
.dialog-chat-answer-content {
  position: relative;
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
  border-radius: 12px;

  padding-top: 25px;
  padding-bottom: 26px;
  padding-left: 30px;
  padding-right: 30px;
}

.dialog-chat-answer-content code {
  overflow-x: auto;
}

.answer-content-text {
  line-height: 24px;
}
.mind-map {
  margin-bottom: 10px;
}

.mind-map-btn {
  border-radius: 8px;
}
</style>