<script setup lang="ts">
import { computed } from 'vue'
import MessageItem from './message-item.vue'
import ContinueQuestion from './continue-question.vue'
import { useScroll } from '@/composables/useScroll'

interface Props {
  messageList: ConversationMessageItem[]
  continuousQuestionStatus: 'default' | 'close'
  continuousQuestionList: string[]
}

const props = defineProps<Props>()

const { scrollRef, scrollToBottom } = useScroll()

const isShowContinueQuestion = computed(() => {
  return (
    props.continuousQuestionStatus === 'default' &&
    props.messageList.length > 1 &&
    !props.messageList[props.messageList.length - 1].isAnswerResponseLoading
  )
})

defineExpose({
  scrollToBottom,
})
</script>

<template>
  <main ref="scrollRef" class="h-full overflow-y-auto px-5">
    <div>
      <MessageItem
        v-for="messageItem in messageList"
        :key="messageItem.timestamp"
        :role="messageItem.role"
        :message-item="messageItem"
      />
    </div>

    <div v-show="isShowContinueQuestion">
      <ContinueQuestion :continuous-question-list="continuousQuestionList" />
    </div>
  </main>
</template>
