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

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

    <div class="dialog-main question-main">
      <div class="dialog-content question-content">
        <div class="question-main-content">
          <DialogContent :content="question.content" :show_think="false" class="question-content-core-text">
          </DialogContent>

          <FileUploadPreviewV2
            v-if="question_attached_files.length !== 0"
            :file_list="question_attached_files"
            :enable_remove="false"
          />
        </div>
      </div>

      <div class="dialog-icon question-icon">
        <img :src="question.client_custom_icon" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import BtnSelectItem from './BtnSelectItem.vue';
import DialogContent from '../conversation-content/DialogContent.vue';

import FileUploadPreviewV2 from '../file-preview/FileUploadPreviewV2.vue';

const props = defineProps({
  show_select: true,

  /**
   * 用户提问数据
   */
  question: Object
});

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

const question_attached_files = computed(() => {
  if (Array.isArray(props.question.client_custom_upload_file_list)) {
    return props.question.client_custom_upload_file_list;
  } else {
    return [];
  }
});

const emit = defineEmits(['select']);

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

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

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

.question-main {
}

.question-content {
  display: flex;
  justify-content: flex-end;
}
.question-content-core-text {
  background-color: rgb(var(--primary-6));
  color: #fff;
}
.question-icon {
  margin-left: 22px;
  border-radius: 50%;
}

.question-icon img {
  width: 100%;
}

.question-main-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>