Updates

mishushakov · Mar 21, 2019 · ea206be · ea206be
1 parent d0b9720
commit ea206be
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 36 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+src
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -0,0 +1,21 @@
+stages:
+  - release
+
+variables:
+  CONTAINER_IMAGE: ${CI_REGISTRY}/${CI_PROJECT_PATH}:${CI_BUILD_REF_NAME}-${CI_BUILD_REF}
+  CONTAINER_IMAGE_LATEST: ${CI_REGISTRY}/${CI_PROJECT_PATH}:latest
+  DOCKER_HOST: tcp://docker:2375/
+  DOCKER_DRIVER: overlay2
+
+services:
+  - docker:dind
+
+release:
+  stage: release
+  image: docker
+  script:
+    - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY}
+    - docker build -t ${CONTAINER_IMAGE} .
+    - docker tag ${CONTAINER_IMAGE} ${CONTAINER_IMAGE_LATEST}
+    - docker push ${CONTAINER_IMAGE}
+    - docker push ${CONTAINER_IMAGE_LATEST}
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,2 @@
+FROM nginx:alpine
+COPY . /usr/share/nginx/html
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ The development of this project was made possible by [me](https://linkedin.com/i
 - Onboarding, Branding, UX
 - Hands-free interaction using Voice Input and Voice Feedback
 - Language Independent (polyglot). Runs multiple languages at the same time
-- Rich-component and Webhook Support (for the list of supported components see [Dialogflow Gateway](https://i.ushakov.co/dialogflow-gateway))
+- Rich-component and Webhook Support
 - Based on Vue, Webpack 4, Babel 7
 - Integrated Component API (means, you can build the UI from different sources, not only Dialogflow Gateway, but your own APIs)
 - Lightweight (without polyfills and fonts the build shrinks down to 100 KB)
@@ -43,7 +43,7 @@ No more words, [IT'S A DEMO-TIME NOW](https://i.ushakov.co/dialogflow-web-v2)
 - NodeJS
 - NPM or Yarn
 - Basic knowledge in ES6 (JavaScript)
-- [Dialogflow Gateway](https://i.ushakov.co/dialogflow-gateway)
+- [Dialogflow Gateway](https://dialogflow-gateway.ushakov.co) connected App
 
 ## Cloning the repository to your machine
 
@@ -62,13 +62,9 @@ Example using yarn
 
 `yarn`
 
-## [Installing Dialogflow Gateway](https://i.ushakov.co/dialogflow-gateway)
-
 ## Customizing App & Connecting your agent
 
-After you have setup your gateway and it has indicated, that it works, you can now add this UI to it
-
-Open `config.js` and change the `gateway` variable, to connect your bot. You can use my gateway URL as reference, by the way.
+Open `config.js` and change the `gateway` variable, to connect to your Dialogflow Gateway. You can use my gateway URL as reference, by the way.
 
 Example
 

diff --git a/dist/build.js b/dist/build.js
diff --git a/src/Components/App/App.vue b/src/Components/App/App.vue
@@ -2,55 +2,43 @@
     <main id="app">
 
         <!-- TopHead is the header with the information about the app -->
-
         <TopHead v-if="app" :app="app"></TopHead>
-
         <section class="container">
 
             <!-- Welcome component is for onboarding experience and language picker -->
-
             <Welcome v-if="messages.length == 0" :app="app" @start="send(config.i18n[lang()].startPhrase)"></Welcome>
 
             <!-- Messages Table -->
-
             <section class="messages" v-if="messages.length > 0">
                 <table v-for="m in messages" class="chat-window">
                     <tr>
 
                         <!-- My message -->
-
                         <td><Bubble :text="m.query" from="me" /></td>
                     </tr>
 
                     <!-- Component iterator (Dialogflow Gateway Feature) -->
-
                     <tr v-for="component in m.components">
                         <td>
 
                             <!-- Default / Webhook bubble -->
-
                             <Bubble :text="component.content" v-if="component.name == 'DEFAULT'" />
 
                             <!-- Simple Response -->
-
                             <Bubble :text="component.content.displayText || component.content.textToSpeech" v-if="component.name == 'SIMPLE_RESPONSE'" />
 
                             <!-- Card -->
-
                             <Card :title="component.content.title" :subtitle="component.content.subtitle" :image="component.content.image" :text="component.content.formattedText" :button="component.content.buttons[0]" v-if="component.name == 'CARD'" />
 
                             <!-- Carousel layout and cards -->
-
                             <div class="carousel" v-if="component.name == 'CAROUSEL_CARD'">
                                 <Card v-for="card in component.content" @click.native="send(card.info.key)" :key="card.info.key" :title="card.title" :image="card.image" :subtitle="card.subtitle" :text="card.description" />
                             </div>
 
                             <!-- List -->
-
                             <List @select="send" :items="component.content.items" :title="component.content.title" v-if="component.name == 'LIST'" />
 
                             <!-- Webhook Image -->
-
                             <Picture v-if="component.name == 'IMAGE'" :image="component.content" />
                         </td>
                     </tr>
@@ -59,15 +47,12 @@
         </section>
 
         <!-- #bottom is the anchor, we need, when new messages arrive, to scroll down -->
-
         <div id="bottom"></div>
 
         <!-- ChatInput is made for submitting queres and displaying suggestions -->
-
         <ChatInput v-if="messages.length > 0" @submit="send" :suggestions="suggestions"></ChatInput>
 
         <!-- Audio toggle (on the top right corner), used to toggle the audio output, default mode is defined in the settings -->
-
         <div :aria-label="config.i18n[lang()].muteTitle" :title="config.i18n[lang()].muteTitle" class="audio-toggle" @click="config.app.muted = !config.app.muted">
             <i aria-hidden="true" class="material-icons" v-if="!config.app.muted">volume_up</i>
             <i aria-hidden="true" class="material-icons" v-else>volume_off</i>

diff --git a/src/Components/Partials/ChatInput.vue b/src/Components/Partials/ChatInput.vue
@@ -3,27 +3,23 @@
         <div class="chat-container">
 
             <!-- Here are the suggestions -->
-
             <div class="suggestions">
                 <Suggestion v-if="suggestions.text_suggestions" v-for="(suggestion, index) in suggestions.text_suggestions" :key="index" @click.native="$emit('submit', suggestion)" :title="suggestion" />
                 <Suggestion v-if="suggestions.link_suggestion" :title="suggestions.link_suggestion.destinationName" :url="suggestions.link_suggestion.uri" />
             </div>
             <div class="flexible">
 
                 <!-- Text input -->
-
                 <div class="input-container">
                     <input :aria-label="config.i18n[lang()].inputTitle" class="input" type="text" :placeholder="config.i18n[lang()].inputTitle" v-model="query" @keypress.enter="submit()" />
                 </div>
 
                 <!-- Send message button (arrow button) -->
-
                 <div :aria-label="config.i18n[lang()].sendTitle" :title="config.i18n[lang()].sendTitle" class="button-container" v-if="micro == false && query.length > 0" @click="submit()">
                     <i class="material-icons" aria-hidden="true">arrow_upward</i>
                 </div>
 
                 <!-- Microphone Button -->
-
                 <div :aria-label="config.i18n[lang()].microphoneTitle" :title="config.i18n[lang()].microphoneTitle" class="button-container mic_button" :class="{'mic_active': micro}" @click="micro = !micro" v-else>
                     <i class="material-icons" aria-hidden="true">mic</i>
                 </div>

diff --git a/src/Components/Partials/TopHead.vue b/src/Components/Partials/TopHead.vue
@@ -2,7 +2,6 @@
     <header class="app-head" :class="{'shrink': shrinked}">
         <img :alt="app.displayName" class="app-icon" :src="app.avatarUri" v-if="app.avatarUri" />
         <img :alt="app.displayName" class="app-icon" src="https://console.dialogflow.com/api-client/assets/img/logo-short.png" v-else />
-
         <span class="app-name">{{app.displayName}}</span>
     </header>
 </template>

diff --git a/src/Components/Welcome/Welcome.vue b/src/Components/Welcome/Welcome.vue
@@ -2,19 +2,15 @@
     <div class="overlay">
 
         <!-- Welcome Emoji (optional) -->
-
         <span class="app-welcome-emoji">🖖</span>
 
         <!-- Agent Title -->
-
         <h1 class="app-title" v-if="app">{{config.i18n[sel_lang].welcomeTitle}} {{app.displayName}}</h1>
 
         <!-- Agent Description -->
-
         <p class="app-description" v-if="app">{{app.description}}</p>
 
         <!-- Language picker, when your Agent supports more than one Language -->
-
         <div v-if="app && app.supportedLanguageCodes.length > 0">
             <span>{{config.i18n[sel_lang].selectLang}}</span>
 
@@ -30,12 +26,10 @@
 
         <br>
 
-        <!-- Please do not remove my copyright notice, i will sue you for 150.000 EUR in damages. I know who you are, when you clone the repo -->
-
+        <!-- Please do not remove my copyright notice -->
         <p class="notice">Built by <a href="https://ushakov.co">Ushakov</a>. Powered by <a href="https://dialogflow.com">Dialogflow</a></p>
 
         <!-- Start Button -->
-
         <div class="button" @click="start()">{{config.i18n[sel_lang].startTitle}}</div>
     </div>
 </template>