buerokratt / chat-widget

Bürokratt Widget

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm test:coverage

Launches the test runner and displays code coverage

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\

npm run webpack

Bundles the app into a single bundle named widget_bundle.js for easy embedding

Snippet embedding

Snippet can be embedded to any site using the following html:

<div id="byk-va"></div>
<script>
  window._env_ = {
    RUUTER_API_URL: 'LOCATION_OF_RUUTER',
    NOTIFICATION_NODE_URL: 'Notification Node Server Url'
    ENVIRONMENT: 'development', // 'developement | production'
    TIM_AUTHENTICATION_URL: 'TIM url with callback parameter',
    OFFICE_HOURS: {
      TIMEZONE: 'Europe/Tallinn',
      BEGIN: 8,
      END: 17,
      DAYS: [1, 2, 4, 5],
    },
    ENABLE_HIDDEN_FEATURES: 'FALSE',
    other variables...
  };
</script>
<script id="script-bundle" type="text/javascript" src="LOCATION_OF_WIDGET_BUNDLE" crossorigin=""></script>

Configurable variables

• RUUTER_API_URL: Location of newer back end for fetching data
• TIM_AUTHENTICATION_URL: Link to authenticate user
• OFFICE_HOURS: If this variable is added, widget will be hidden when not in defined work hours. If this variable is not added, the widget will always be displayed
  • TIMEZONE: Used for comparing the following variables against a specific timezone.
  • BEGIN: Beginning of office hours. If current time is before this hour (24H), the widget will not be displayed
  • END: End of office hours. If current time is after this hour (24H), the widget will not be displayed
  • DAYS: List of days in numbers, where 1=monday, 2=tuesday, 3=wednesday... If current day is in the list of days, the widget will be displayed according to BEGIN and END times.
• ENABLE_HIDDEN_FEATURES: set it to 'TRUE' will show experimental features, 'FALSE' will hide them

Licence

See licence here.

chat-widget's Issues

Apply fixed conversation flow mode to Chat Widget

AS A Product Owner
I WANT chatbot conversations to be both text- and fixed conversation flow-based
SO THAT I could apply them both according to what's most suitable in given situation

Acceptance Criteria

• Chat Widget displays optional selections for End User to choose from
• End User can press on the button of choice
• When in fixed conversation flow mode, the End User can not send any text
• Conversations can be either text- or fixed conversation flow-based depending on how they have been defined in the back-end (Rasa + Ruuter DSLs)

DSL

• Define JSON schema for chats in conversation flow mode

GUI

• Apply buttons based on JSON input from the backend
• Button values must be translatable i18n values

Remove all MSW requests

Make chat Widget responsive to window size

AS A End Users
I WANT the chat Widget will be responsive to widow size
SO THAT I will be able to see the chat Widget header all the time

Acceptance Criteria

• When changing the window size where the chat Widget is visible, the chat Widget responses to the change and adjusts its size automatically so that the header of the Widget will be visible all the time.

Remove bugs, vulnerabilities, etc. for Chat Widget

Important

This is a sub-issue of buerokratt/Test-Driven-Development#5

Acceptance Criteria

• All AC of an epic apply

Scope

• https://github.com/buerokratt/Chat-Widget

Dockerfiles to serve all of Chat Widget's static files via Nginx and Vite

Important

This is a sub-issue of buerokratt/Buerokratt-Chatbot#612

Acceptance Criteria

• All AC of an epic apply

Notify end user that chat has been taken over by CSA

AS AN end user
I WANT TO get notified when CSA takes over the chat
SO THAT I know whether I am chatting with a robot or with a human

Acceptance Criteria

• When CSA takes over the chat, a notification "Inimene võttis vestluse üle" is displayed in the widget, indicating that the end user is now chatting with a human

Message should look same when permission is given (message with gray background).

Keep End-Client on the page they were at after TARA authentication

AS AN End-User
I WANT TO stay on the same page after authenticating myself with TARA during an ongoing chat session
SO THAT I COULD continue my chat after TARA authentication without interruptions

Acceptance Criteria

• The following AC applies to both new and ongoing chat sessions
• No changes in End-User authenticating via TARA regarding authentication flow
• After TARA authentication flow ends, End-User is redirected to the same page where they started their authentication

GUI

• When TARA authentication process is initiated, a cookie is set to indicate an incomplete authentication process
• Given cookie contains URL of where the process was initiated
• After successful TARA authentication process, End-Client is redirected to the URL extracted from the cookie
• After TARA authentication process has been finished, cookie is deleted

Re-write Chat Widget to prevent overwriting styles by client GUI

AS A Bürokratt Chat Widget Implementer
I WANT Chat Widget styles to be independent of GUI
SO THAT Chat Widget would always look the same regardless of GUI styles