Untitled

<template>
  <div class="chat-view">
    <div v-for="msg in messages" :key="msg.id">
      <chat-message :msg="msg"/>
    </div>

    <div v-if="quickReplies && quickReplies.length" class="quick-replies">
      <button 
        v-for="(reply, index) in quickReplies" 
        :key="index" 
        @click="selectReply(reply)">
        {{ reply }}
      </button>
    </div>

    <chat-input @send="handleSend"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      quickReplies: []
    }
  },
  methods: {
    handleNewMessageFromBot(botMessage) {
      this.messages.push(botMessage);
      if(botMessage.quickReplies) {
        this.quickReplies = botMessage.quickReplies;
      } else {
        this.quickReplies = [];
      }
    },
    selectReply(reply) {
      // Отправка выбранного ответа
      this.$emit('sendMessage', reply);
      // Скрыть варианты
      this.quickReplies = [];
    }
  }
}
</script>