smartai2dian0/src/modules/conversation-chat/DialogList.vue

<template>
  <a-scrollbar
    type="track"
    :style="container_style"
    ref="scroll_container"
    data-flat="list-container"
    :class="is_show_right_page ? 'scrollbar_klass' : ''"
  >
    <slot name="left"></slot>

    <div class="dialog-list dialog-markdown-container">
      <DialogItem
        v-for="(item, index) of list"
        :dialog="item"
        :index="index"
        :width="width"
        :key="item.client_custom_unique_id"
        :answer_action_list="answer_action_list"
        @select="handleSelectChat(item)"
        @edit="handleEditChat(item)"
        @toSearchPage="toSearchPage(item)"
      />

      <DialogSuggestion v-if="suggestion.length !== 0" :suggestion="suggestion" />
    </div>

    <slot name="right"></slot>
  </a-scrollbar>
</template>

<script setup>
import { computed } from 'vue';
import DialogItem from './DialogItem.vue';
import DialogSuggestion from './DialogSuggestion.vue';

import useScrollBottom from './use-scroll-bottom';

const props = defineProps({
  /**
   * 对话区域的告诉
   */
  height: Number,
  /**
   * 对话区域的宽度
   */
  width: Number,

  /**
   * 智能体的ID
   */
  agent_id: String,

  /**
   * 对话内容数据项
   */
  list: Array,

  /**
   * 推荐项
   * 当一轮对话结束时，智能体可能会返回推荐项目信息
   */
  suggestion: Array,

  answer_action_list: Array,
  /**
   * 控制滚动条展示
   * */
  is_show_right_page: Boolean
});
const emit = defineEmits(['edit']);

const scroll2Bottom = useScrollBottom('scroll_container');

const container_style = computed(() => {
  return {
    height: props.height + 'px',
    overflow: 'auto',
    display: 'flex'
  };
});

/**
 * 选择某个项目
 * @param item
 */
const handleSelectChat = (item) => {};

const handleEditChat = (item) => {
  emit('edit', item);
};

const toSearchPage = (item) => {
  emit('toSearchPage', item);
};
defineExpose({
  scroll2Bottom: () => {
    scroll2Bottom(1000000);
  }
});
</script>

<style src="./chat-content.css"></style>
<style lang="css" scoped>
.dialog-list {
  color: var(--color-text-1);
  flex-grow: 1;
}
:deep(.scrollbar_klass ~ .arco-scrollbar-track.arco-scrollbar-track-direction-vertical) {
  display: none;
}
</style>

<style>
/* 隐藏横向滚动条 */
.conversation-chat-main-container .arco-scrollbar-track.arco-scrollbar-track-direction-horizontal {
  display: none;
}
</style>