Vue компонент для лекс бот. Модуль экспорта для VUE. AWS-LEX-веб-интерфейс - PullRequest
Новая
       35

Vue компонент для лекс бот. Модуль экспорта для VUE. AWS-LEX-веб-интерфейс

0 голосов
/ 10 ноября 2019

Я использую aws-lex-web-ui на своем веб-сайте для отображения чат-бота на основе lex. На Vue, похоже, я не делаю экспорт модуля правильно. Использование этого модуля npm для импорта компонента "lex-web-ui"

Компонент: chatbot.vue 

<template>
    <lex-web-ui/>
</template>

<script>
<script>
import { Config as AWSConfig, CognitoIdentityCredentials } from 'aws-sdk/global';
import LexRuntime from 'aws-sdk/clients/lexruntime';
import Polly from 'aws-sdk/clients/polly';
import { Plugin as LexWebUi, Store as LexWebUiStore } from 'aws-lex-web-ui';

const poolId = '________'; //Removed my creds
const region = '________';
const credentials = new CognitoIdentityCredentials(
{ IdentityPoolId: poolId },
{ region },
);
const awsConfig = new AWSConfig({ region, credentials });
const lexRuntimeClient = new LexRuntime(awsConfig);
const pollyClient = new Polly(awsConfig);

export const store = new Vuex.Store(LexWebUiStore);
const config = {
    cognito: { poolId },
    lex: { botName: 'Profiler', initialText: 'Hi!' },
    ui: { toolbarLogo: '~/static/images/logo.png', toolbarTitle: 'Test Chatbot' },
};

LexWebUi.config = config;
LexWebUi.awsConfig = awsConfig;
LexWebUi.lexRuntimeClient = lexRuntimeClient;
LexWebUi.pollyClient = pollyClient;

export default {
    components:{LexWebUi},
    methods: {
        onUpdateLexState(lexState) {
            console.log('State of Lex UI: (Debugging only)'+JSON.stringify(lexState,null,4));
        },
    },
};
</script>

<style>
@import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css';
@import '../node_modules/material-design-icons/iconfont/material-icons.css';
@import '../node_modules/vuetify/dist/vuetify.min.css';
</style>

Когда я использую этот компонент из другого родительского компонента Vue (страница чата) 

<template>
  <section class="container">
    <b-container fluid>
      <b-row>
        <Header />
      </b-row>
      <b-row>
        <Chatbot />
      </b-row>
      <b-row center>
        <Footer />
      </b-row>
    </b-container>
  </section>
</template>

<script>
  import Header from '~/components/Header.vue'
  import Footer from '~/components/Footer.vue'
  import Chatbot from '~/components/chatbot.vue';

export default {
  components: {
    Header,
    Chatbot,
    Footer
  }
}
</script>

Страница, отображающая этого чата просто зависает !

...