Amplify Vue Chatbot not setting up - vue.js

Question

I'm trying to use the Amplify Chatbot Component in my application but I keep getting:
Chatbot - Bot not provided.
I've used the Amplify CLI to add Interactions, which added the correct configuration into the aws-exports.js file. I then set the Amplify.Configure to use the exports file.
But when I try to use the component in my app, I can't seem to get it to run.
App.vue
<template>
<amplify-chatbot ></amplify-chatbot>
</template>
<script>
import { Interactions } from 'aws-amplify';
export default {
name: 'App',
components: {
Interactions
},
data(){
return {
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
AWS-Exports
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
const awsmobile = {
"aws_project_region": "eu-west-1",
"aws_cognito_identity_pool_id": "eu-west-1:fbc545c0-ddac-410b-8f8d-4ba3cffadbb2",
"aws_cognito_region": "eu-west-1",
"oauth": {},
"aws_bots": "enable",
"aws_bots_config": [
{
"name": "ScheduleAppointment_dev",
"alias": "$LATEST",
"region": "eu-west-1"
}
]
};
export default awsmobile;
main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
Vue.use(AmplifyPlugin, AmplifyModules)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')

Answer 1

Here's a modified version of your app.vue and that will work:
<template>
<amplify-chatbot v-bind:chatbotConfig="chatbotConfig"></amplify-chatbot>
</template>
<script>
import { Interactions } from 'aws-amplify';
export default {
name: 'App',
data: () => ({
chatbotConfig:{
bot: "addTheBotNameHere",
clearComplete: true
},
}),
mounted() {
Interactions.onComplete("addTheBotNameHere", this.handleComplete);
},
methods: {
handleComplete(err,confirmation) {
if(err) {
alert("bot conversation failed");
return;
}
return "Thank You";
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>