Giter Club home page Giter Club logo

dialogflow-web-v2's Introduction

Dialogflow for Web v2

Dialogflow for Web v2

Dialogflow lets you build conversational interfaces on top of your products and services by providing a powerful natural language understanding (NLU) engine to process and understand natural language input

This is a unofficial Web Integration for the Dialogflow V2

Notice: August 2021, i upgraded the web app to Vue 3, fixed security vulnerabilities and updated dependencies. The software comes for free, but my time is not. Consider supporting me on PayPal or through a commercial agreement

Features

  • Progressive Web App (100/100 Lighthouse score)
  • Accessibility Features
  • Extensive Browser Support (IE8+), offline capabilities (history) and great SEO
  • Familiar UI & UX, based on the official Google Assistant Design Specifications
  • Dark Mode & Theming
  • Hands-free interaction with Voice Input and Speech Feedback (with SSML)
  • Language independent
  • Docker and Kubernetes support
  • Rich-component, Webhook and Actions on Google Support (demo)
  • Floating Widget for embedding on websites (repo and demo)
  • Based on Vue 3, Webpack, Babel and PostCSS
  • Lightweight (build is ~50KB gzipped)
  • Free and fully Documented
  • Made in Germany
  • Recommended by Dialogflow and MadeWithVueJS

sponsored by Vokode - an audio marketing studio from Paris, which does: sound design, podcast and voice apps

Vokode

Installation

Requirements

  • NodeJS
  • npm or yarn
  • Google Account and Dialogflow V2 Agent (if you look for V1, please use my old repo)

Backend

Dialogflow Gateway enables third-party integrations like this to securely access the Dialogflow V2 API

AD Dialogflow Gateway by Ushakov (Hosted) is the quickest way to get started with Dialogflow for Web v2

Clone the repository

You can use git or download from GitHub

Clone Dialogflow for Web v2

Install the dependencies

Open the cloned folder. Then, using your package manager install the dependencies

Using npm

npm i

Using yarn

yarn

Connect the Agent

Open src/config/index.js and change the endpoint variable to your Dialogflow Gateway URL

Hint: the URL for Dialogflow Gateway Hosted by Ushakov is always your google cloud project id + .core.ushaflow.io. If you have any troubles, make sure you connected your Agent to the Gateway, then visit the console, click on "Manage" and copy the Gateway URL

Example

export default {
    endpoint: 'https://dialogflow-web-v2.core.ushaflow.io'
    [...]
}

[...]

The logo, agent name, description and available languages are fetched from Dialogflow. Change them in Dialogflow and it will sync to the UI. Please note, when adding new languages, you may have to translate some of the UI as well (translations.json in src/translations)

Develop

Open your cloned folder. Then, using your favorite package manager run the serve command

Using npm

npm run serve

Using yarn

yarn serve

Your default browser should open and redirect to localhost:8080. If the port 8080 is already in use, you can give a port argument to connect at specified port

Using npm

npm run serve --port 9090

Using yarn

yarn serve --port 9090

PLEASE DO NOT USE THE DEVELOPMENT SERVER TO SERVE YOUR APP FOR VISITORS, DEVELOPMENT SERVER IS MEANT FOR THE DEVELOPMENT. PLEASE UPLOAD BUILD ARTIFACTS TO A STATIC WEB-SERVER

Theme

You can make a custom theme for Dialogflow for Web v2, according to the specification:

Theme Dialogflow for Web v2

To apply the variables, open src/style/theme.sass and change them in the \:root selector

You can also optimize your theme for Dark-mode-enabled clients within the same file and selector under the @media (prefers-color-scheme: dark)

Build

Your app will be bundled to the dist directory

To build it you can use npm or yarn

Using npm

npm run build

Using yarn

yarn build

Update

Run git pull origin master to integrate changes

Additionally, keep vue packages up-to-date

vue upgrade

Frequently Asked Questions

  • Q: I don't see any changes
  • A: Make sure you cleaned the cache and rebuilt the app. In Safari go to "Develop" > "Empty Caches". In Chrome: "Developer Tools" > "Application" > "Clear storage" > "Clear site data"

Inquiries

Contact the developer or open a issue

dialogflow-web-v2's People

Contributors

mishushakov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dialogflow-web-v2's Issues

Dialogflow CX Support

Do you plan on supporting the Dialogflow CX API?

Alternatively, is it easy enough to adapt this for CX?

Thanks for developing this!

Missing avatars and responses

Hello,

I am trying to integrate my dialogflow bot into our website by using one of your applications, but I am running into different problems.

• I am getting double responses.
• The bot’s logo is not showing up.
• Lastly it takes enormously long to get a response and sometimes doesn’t get any response.

I hope you can help me fix these problems or maybe you know what can cause these.

To be clear I tried the df-btn script, dialogflow-web-v2 and the source: https://jipsnel-assistant.ui.dialogflow.cloud.ushakov.co/
(It is a dutch bot tho, so that might give a problem for you to test it?)

Time of transcription

Hello.
First, thank you for your awesome work, very useful.

When running the app, when using the mic to communicate, often when the input sentence is long, the Speech-to-Text stops in the middle of my sentence, when there are silence periods between words.

I was wondering if there is a parameter or config, that can make the STT ignore short silence periods and only end the transcription when the silence is longer than N seconds.

Thank you for your time,

Nelson

Speech Feedback Lenth

Hi
We are faced with the problem of limiting the length of the feedback speech. After pronouncing about 200 characters, the bot stops voicing. And then he does not voice the following response messages.

How we can fix it? Maybe there is some setup of speech lenth in project config?

Dialogflow's automatic text to speech and SSML

People are requesting a feature to play Dialogflow's text-to-speech (instead of the browser one)

However:

  • The implementation on Google's side seems incomplete. For example Webhook responses do get the audio, but platform-specific don't:

Screenshot 2019-10-11 at 14 56 36

  • Actions on Google don't work properly with Dialogflow and therefor do not get audio feedback as well:

Screenshot 2019-10-11 at 14 55 37

So ladies and gentlemen, what are your thoughts on this? Thanks

deprecated packages

npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated @hapi/[email protected]: joi is leaving the @Hapi organization and moving back to 'joi' (hapijs/joi#2411)
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

Knowledge Base Support

Hi @mishushakov ,

First thing first, This is an awesome project, thank you.

Now for the issue, I have create a DialogFlow Agent to support the knowledge base provided by dialog flow.

I followed the steps mentioned and it does respond back to the small talk options but knowledge base its not responding to the question.

I was wondering if that is supported by this project or is there something I am missing

https://cloud.google.com/dialogflow/docs/knowledge-connectors

Regards,
Wenceslaus Dsilva

Missing Avatar on Web Demo (Agent icon)

I select an image for be the avatar for my agent but this image not showing.

Using the web demo link the image is showing like this:
opera_pDlI37BIlW

the image in only a .png and i tried to change with another file but i had no success

edit: I changed the image several times with the same image I had chosen. In one of those times it somehow worked.

Dump question, gateway URL?

Where do you find the gateway URL? I've primarily been testing via Slack and WhatsApp so this is my first attempt at using a chat UI like this. In my console I can see my project ID, my API key, etc, but no clue where I would find the gateway URL.

Sorry I did try and rtfm via the docs on Dialogflow but no help.

Dialogflow Gateway URL - How to generate?

Where and how to integrate "Dialogflow Gateway", there is not proper instructions on it.
The Dialogflow gateway link in you repo, i.e https://dialogflow-gateway.ushakov.co/ is not working.

the fist step in your application is to change the gateway in config file, but how to create a gateway. Please say the proper way to generate like gateway URL link..??

Thanks in advance.

Change UI

Hey, I would like to change the UI of the gateway: the colours and background. How can I do it or where di I update the CSS for it?
Also, I would like to disable the voice output too.

Vue clie service not found

I am getting this error for any command like

dialogflow-web-v2@ serve /app
vue-cli-service serve --open

sh: 1: vue-cli-service: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! dialogflow-web-v2@ serve: vue-cli-service serve --open
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the dialogflow-web-v2@ serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Freeze chat input form when suggestion button comes out.

Hey @mishushakov , I noticed that the chat input form can still send inputs although suggestion buttons pop up. This might break the flow as the user is free of inputting whatever he wants and might not press any suggestion. Is there a way I can implement a form freezing up to the point the user presses the suggestion?

No mic input for embedded chatbot

We're using the embed code on our site and we've noticed that the mic input feature is not working on embed. The mic does work on the bot website source.

Reply double up.

Hi, not sure if its just me or not but im always getting the Reply as a double up.
Ive taken a look, but cant quite figure out why it would be doing this.
In google assitant simulator, or Dialogflow i only get the single reply.

image

Cheers

Change language

How do you change the default language, when accessing the bot? It looks like, that the default language is "en". But we want to change it to "de"

How to use Lists

Hello there. ✋

First of all, thank you very much for this great project. We have been testing it in a project and it's perfect.

I wonder how can we use Lists responses.

In order to use cards, we do:

const { Card, Suggestion } = require("dialogflow-fulfillment");

However, Lists are not part of dialogflow-fulfillment and I didn't find any example... only the GIF at the readme.

getting error using npm run serve command

Error: [BABEL] C:\Users\athen\Datascience\Dialogflow Bot\New folder\dialogflow-web-v2-master\src\main.js: Package exports for 'C:\Users\athen\Datascience\Dialogflow Bot\New folder\dialogflow-web-v2-master\node_modules@babel\helper-compilation-targets' do not define a '.' subpath (While processing: "C:\Users\athen\Datascience\Dialogflow Bot\New folder\dialogflow-web-v2-master\node_modules\@VUE\babel-preset-app\index.js")

How to fix this?

Payload format to display list

Hi Mikhail,
Thank you for coming up with this library to support v2 apis.
I am trying this with a sample dialogflow agent that uses dialogflow-fulfillment-nodejs library as webhook.
I have some intent handlers that return a payload for listSelect for ACTIONS_ON_GOOGLE platform. The sample code looks like below:

agent.add(new Payload(agent.ACTIONS_ON_GOOGLE, {
        "expectUserResponse": true,
        "richResponse": {
          "items": [{ "simpleResponse": { "textToSpeech": "Please select an option from below list." } }]
        },
        "systemIntent": {
          "intent": "actions.intent.OPTION",
          "data": {
            "@type": "type.googleapis.com/google.actions.v2.OptionValueSpec",
            "listSelect": {
              "items": [{
                "optionInfo": { "key": "Option1"},
                "title": "Option1"
              },
              {
                "optionInfo": { "key": "Option2" },
                "title": "Option2"
              },
              {
                "optionInfo": { "key": "Option3" },
                "title": "Option3"
              }]
           }
        }
     }
}));

However, an empty text response is rendered instead of list.
The fulfillment[component].platform in the response in index.js of dialogflow-gateway-master is returned as PLATFORM_UNSPECIFIED.
What should be the platform and format of payload in order to render the list correctly?

Web app stopped working?

Hey,
some people reported, that their app suddenly broke
i proposed and shipped an update months ago already
but some are still left behind

i would use the opportunity to remind you, that i offer free, hosted integration that is updated automatically, here

to update your self-hosted integration, run git pull
i recommend you watching this repository, so you are in check with any updates or issues. You can do so by pressing the "Watch" button on top of the page

Let me know if you need any assistance. Thanks

Sending first message automatically

Hi, is there any way to send a message to dialogflow from the users side automatically when the user opens the page, for example, when the user opens the page, he automatically says hi to dialogflow

How to send my customer id

Hi! first of all thank you so much for this project, looks really promising!

I have a question I couldn't find anywhere, I want to run the both in my app, where the user is already logged in, so I would like to get its user id in all the webhooks calls so I know how to filter them,

is there any way to achieve that?

Thank you!

The deployment was not found

"
Capture
The deployment was not found" appears when I try to run the Web using run serve. I'm using my own Dialogflow agent for the gateway.

Calendar support

Is there any way to get a date input from the calendar as Carousel Selector ?

Userid / Userstorage working?

Hi,

Thanks for the great work.
I was wondering if there's any possibility to access the user's ID or Userstorage by this framework?

Thanks in advance,

Bas

Integrating Dialogflow Web Agent with Actions on Google through Dialogflow Fullfilment

Hi there,
I'm currently been experimenting on dialogflow web v2 agent. So far, I couldn't manage to send back an audio media content attachment as a message response to the web agent via Dialogflow's fullfulment index.js

I've tested it on my google assistant running on my google pixel and it worked so I was wondering if you could share with me how to integrate it with the web agent?

Thank you!

Vue js Native Script

Hi Mishushakov,
thank you for your great work. I just started playing around with your web interface and I really like it. I'm just wondering if you can commit a native version of your work. As far as I've read, by using Vuejs Native script library it involves a couple of changes in a couple of lines to turn your web interface into an android or iOS app. But when I try, I face a package conflict.
This is not an issue but rather a suggestion. If you could add this option would be amazing.

Production not running

I´m trying to pass the demo to a production server to make some test.
When i run the: 'npm run build' no errors show.
But if i run 'netstat -tnl | grep 8080' to see the services running on that port, nothing is running.
On dev its all OK

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.