<template>
  <div class="chat-box">
    <div class="message" ref="messageContainer">
      <div v-for="(message, index) in props.messages" :key="index">
        {{ message }}
        <br /> <!-- 换行 -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect  } from 'vue'

type propsType = {
  messages: string
}
//使用父组件传递过来的值
const props = defineProps<propsType>()

const messageContainer = ref<HTMLDivElement>();
function scrollToBottom() {
  messageContainer.value!.scrollTop = messageContainer.value!.scrollHeight;
}

watchEffect(() => {
  // 在 messages 更新后滚动到底部
  scrollToBottom();
});

</script>

<style scoped>
.chat-box {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  overflow-y: auto;
}

.message {
  padding: 8px;
  margin: 4px;
  border-radius: 4px;
  background-color: #f0f0f0;
}
</style>
