create a chatbot service

Nguyễn Thành Thiện Student ID: 19110143 Student ID: 19110105 Student ID: 19110150 Project’s name: CREATE A CHATBOT SERVICE Implementation content: Theory: • Spring Boot • ReactJS • Bo

INTRODUCTION TO THE TOPIC

I NTRODUCTION

In the ever-evolving landscape of conversational technology, the demand for sophisticated and user-friendly chatbot services is on the rise Our project, "Chatbot Service," is a culmination of innovative design and practical utility aimed at providing a seamless conversational experience Our chatbot platform is meticulously crafted to meet the diverse needs of businesses and users alike

The "Chatbot Service" not only strives for efficiency but also prioritizes adaptability It offers a robust framework that enables users to easily build, deploy, and manage chatbots for various applications From customer support to natural language understanding, our platform empowers developers to create intelligent and context- aware conversational agents

Complementing the chatbot platform is our second component, the

"DataEverywhere" website Recognizing the pivotal role of data in enhancing chatbot capabilities, this platform serves as a marketplace for curated datasets

"DataEverywhere" is designed to cater to the growing demand for high-quality training data, fostering a community where businesses and developers can access, share, and purchase datasets tailored for refining their chatbot models

Through "Chatbot Service" and "DataEverywhere," our project aims to contribute to the flourishing ecosystem of conversational AI, offering a comprehensive solution for both chatbot development and the acquisition of relevant datasets Join us on this journey, where innovation meets practicality, and where the potential of conversational technology is harnessed for a more connected and intelligent future.

R EASON FOR CHOOSING TOPIC

The decision to embark on the development of "Chatbot Service" and

"DataEverywhere" stems from a confluence of factors driven by both the current technological landscape and the identified needs within the industry

- Rising Demand for Conversational Interfaces: With the escalating demand for seamless and intuitive conversational interfaces in diverse industries, the creation of an advanced chatbot platform becomes not just relevant but essential Businesses are increasingly recognizing the potential of chatbots in enhancing customer interactions, and our project aims to address this growing need

- Acknowledging the Role of Data in AI Success: Understanding that the performance of chatbots hinges significantly on the quality of training data,

"DataEverywhere" comes as a response to the scarcity of easily accessible, high- quality datasets The platform recognizes the pivotal role of data in refining chatbot models and seeks to bridge the gap between data seekers and providers

- Practical Application and Innovation: The project is driven by a commitment to practical application and innovation "Chatbot Service" is designed not just as a theoretical concept but as a hands-on, adaptable solution that developers can implement for real-world scenarios This practicality extends to "DataEverywhere," providing a tangible marketplace for datasets that can fuel the advancement of conversational AI

- Contributing to the Conversational AI Ecosystem: Choosing this topic aligns with a broader vision of contributing to the dynamic ecosystem of conversational AI By creating a comprehensive chatbot platform and facilitating the exchange of relevant datasets, we aim to foster a collaborative community where knowledge and resources are shared, ultimately advancing the capabilities of conversational agents

In essence, our choice of "Chatbot Service" and "DataEverywhere" as the focal point of our project is rooted in a strategic response to the evolving needs of the industry, a recognition of the critical role of data, and a commitment to practical innovation in the realm of conversational AI.

P ROJECT O BJECTIVES

• Objective: Enable seamless user experiences

• Develop functionalities for account creation, password changes, and profile editing

• Objective: Empower businesses to create and deploy personalized chatbot scripts

• Provide a user-friendly interface for script creation

• Ensure smooth implementation of scripts on business websites

Intent, Pattern, and Entity Management:

• Objective: Facilitate precision in chatbot responses through effective management of intents, patterns, and entities

• Develop robust tools for businesses to define and customize intents, patterns, and entities

• Implement a user-friendly dashboard for easy management

• Objective: Ensure smooth user interactions, even when deviating from pre-set scripts

• Create a dedicated channel for businesses to guide users back to the correct script

• Implement real-time guidance mechanisms

Admin Panel for Account Management and Communication:

• Objective: Provide administrative control for efficient account management and communication

• Develop an admin panel with features for managing customer accounts

• Implement communication channels through Zalo and Google Meet

• Objective: Establish a robust marketplace for chatbot-relevant datasets

• Design and launch the DataEverywhere platform

• Ensure secure and transparent transactions for buying and selling datasets

• Objective: Empower customers to enhance their chatbots with high- quality datasets

• Provide customers with access to the DataEverywhere marketplace

• Enable easy purchase and utilization of datasets within the chatbot service

• Objective: Ensure seamless integration of Spring Boot, ReactJS,

Bootstrap, FlashAPI, Redis Cached, Apache Kafka, and Machine Learning

• Establish a cohesive and efficient technological stack

• Implement functionalities leveraging each technology for optimal performance

• Objective: Guarantee reliability and performance through rigorous testing

• Conduct extensive testing of all components

• Gather user feedback and iteratively improve the system based on real-world usage

By achieving these objectives, the project aims to deliver a comprehensive chatbot service that not only meets business needs but also provides a marketplace for datasets, contributing to the advancement of conversational AI.

R ESEARCH OBJECTIVES

• Objective: Understand user preferences and expectations in interacting with chatbots

• Conduct user surveys and interviews

• Analyze user feedback on existing chatbot interactions

Effectiveness of Dynamic Script Guidance:

• Objective: Assess the effectiveness of the dynamic script guidance feature

• Conduct usability testing with businesses and users

• Analyze user interactions during deviations from pre-set scripts

Impact of Script Customization on Engagement:

• Objective: Evaluate how businesses benefit from creating and customizing chatbot scripts

• Monitor and analyze engagement metrics for businesses using customized scripts

• Gather feedback from businesses on the impact of script customization on customer interactions

User Interaction with Admin Panel Features:

• Objective: Explore how businesses and administrators interact with the admin panel

• Conduct usability studies with administrators

• Analyze usage patterns and feedback related to admin panel features

Effectiveness of Zalo and Google Meet Integration:

• Objective: Assess the impact of integrating Zalo and Google Meet for user communication

• Analyze user satisfaction and engagement through Zalo and Google Meet

• Collect feedback from users and businesses on the effectiveness of these communication channels

DataEverywhere Marketplace Adoption and Satisfaction:

• Objective: Evaluate the adoption and satisfaction levels of businesses using the DataEverywhere marketplace

• Track the number of transactions on DataEverywhere

• Collect feedback on the quality and relevance of datasets from businesses

Technological Stack Performance and Integration Challenges:

• Objective: Assess the performance of the chosen technological stack

• Conduct performance testing under various conditions

• Identify and address any integration challenges among Spring Boot, ReactJS, Bootstrap, FlashAPI, Redis Cached, Apache Kafka, and Machine Learning components

User Learning Curve and Training Needs:

• Objective: Understand the learning curve for businesses and users adopting the chatbot service

• Gather feedback on onboarding experiences

• Identify training needs through user surveys and interactions

Market Trends and Competitor Analysis:

• Objective: Stay informed about current market trends in chatbot services and dataset marketplaces

• Conduct regular reviews of industry publications

• Analyze competitor offerings and user reviews

Ethical Considerations in Data Usage:

• Objective: Investigate ethical considerations surrounding the use of datasets in chatbot development

• Explore ethical guidelines and best practices in the AI industry

• Gather user opinions on data privacy and ethical concerns

By addressing these research objectives, the project aims to gather valuable insights into user behaviors, system effectiveness, and market dynamics, contributing to the continuous improvement and success of the "Chatbot Service" and

U RGENCY OF THE TOPIC

Increasing Demand for Chatbot Solutions: Businesses are increasingly recognizing the value of chatbots in improving customer interactions, reducing costs, and enhancing overall efficiency The demand for effective chatbot solutions is on the rise across various industries

Personalized Customer Engagement: With the shift towards personalized customer experiences, the ability to connect with customers in a meaningful way is crucial Chatbots offer a scalable solution for businesses to engage with customers on a personal level, providing timely and relevant assistance

Competitive Edge in Business: The integration of advanced technologies like Spring Boot, ReactJS, Bootstrap, FlashAPI, Redis Cached, Apache Kafka, and Machine Learning gives businesses a competitive edge Staying ahead in technological

18 innovation is imperative for businesses looking to differentiate themselves in the market

Data-Driven Decision Making: The importance of data in enhancing chatbot capabilities cannot be overstated The creation of DataEverywhere as a dataset marketplace reflects the urgency to provide businesses with easy access to high-quality datasets, enabling them to make data-driven decisions and refine their chatbot models

Efficient Communication Channels: The inclusion of communication channels like Zalo and Google Meet within the admin panel highlights the urgency of providing businesses with efficient tools for communication In a fast-paced business environment, seamless communication is essential for customer support and engagement

Adaptation to Technological Trends: The chosen technological stack reflects an awareness of and adaptation to current technological trends Integrating technologies like Spring Boot and ReactJS ensures that the chatbot service remains modern, scalable, and aligned with industry best practices

Market Dynamics and User Expectations: The dynamic nature of the market and evolving user expectations necessitate a continuous improvement and adaptation of chatbot services Regular research, as outlined in your project objectives, is essential to staying informed about market trends and meeting user needs effectively Ethical Considerations: As AI technologies continue to evolve, addressing ethical considerations becomes increasingly urgent Proactively investigating and incorporating ethical practices in data usage aligns with the growing emphasis on responsible AI development

In summary, the urgency of your project lies in meeting the current demands of businesses for effective chatbot solutions, staying competitive through technological innovation, and adapting to the dynamic landscape of conversational AI while ensuring ethical and responsible practices

SYSTEM ARCHITECTURE

S YSTEM ARCHITECTURE OVERVIEW

In the development of the chatbot service for the capstone project, various technologies were carefully selected and integrated to ensure a seamless and efficient user experience This chapter delves into the technologies employed, highlighting their significance and specific applications in the project

T ECHNOLOGIES E MPLOYED

ReactJs, a widely adopted JavaScript library for building user interfaces, serves as the foundation for the client-side development in both the chatbot and dataanywhere modules The decision to choose ReactJs was influenced by its robust community

20 support, virtual DOM for optimized rendering, and compatibility with reactFlow, a crucial component in the script creation page

Rationale for Choosing ReactJs:Several factors contributed to the preference for ReactJs over alternative frameworks such as NextJs or Angular The thriving ReactJs community ensures a wealth of resources, including documentation, tutorials, and third-party libraries The virtual DOM mechanism enhances performance by selectively updating only the necessary components, resulting in faster rendering and improved user experience Additionally, ReactJs seamlessly integrates with reactFlow, providing a powerful and customizable solution for visualizing and manipulating flowcharts, an essential feature in the script creation process.

Implementing: In the implementation phase, Axios, a popular HTTP client for making asynchronous requests, was employed to call APIs and retrieve data This data, crucial for various functionalities within the chatbot and dataanywhere modules, is seamlessly integrated into the ReactJs application The use of Axios facilitates efficient communication with external servers, ensuring timely data updates and enhancing the overall responsiveness of the application

Using Reactjs: In the development process, various ReactJs hooks were employed to manage state, side effects, and lifecycle events Some commonly used hooks include:

- useState: The useState hook enables the creation and manipulation of state variables within functional components, allowing for dynamic updates and re-renders based on user interactions or data changes

- useEffect: The useEffect hook facilitates the management of side effects in functional components It is instrumental in scenarios such as data fetching, subscriptions, or manually changing the DOM

- useContext: The useContext hook simplifies the access and usage of context within a React application, providing a convenient way to share state or functionality between components When user choose a script, in script page can also access the value of that state

- useMemo and useCallback: The useMemo and useCallback hooks aid in optimizing performance by memoizing values and functions, respectively, preventing unnecessary recalculations and re-renders

Figure 5: Using useMemo and useCallback

- Advantages of Hook-based Architecture: The adoption of ReactJs hooks enhances the modularity, reusability, and maintainability of the codebase The declarative nature of hooks streamlines the development process, making it more intuitive and efficient Additionally, hooks contribute to a more functional programming paradigm, aligning with modern best practices in ReactJs development

In conclusion, ReactJs, coupled with the strategic use of Axios for data retrieval and the incorporation of various hooks, forms the backbone of a robust and dynamic chatbot service The thoughtful selection and implementation of these technologies

22 underscore the commitment to delivering a responsive, user-friendly, and maintainable application

AntDesign, a design system and React UI library, played a pivotal role in accelerating the development process Leveraging the pre-built components from AntDesign allowed for the quick implementation of a visually appealing and consistent user interface The library's extensive collection of components not only saved development time but also ensured a cohesive and aesthetically pleasing design across the entire application [2]

Beyond its functional benefits, the decision to incorporate AntDesign was influenced by the library's visually appealing components The availability of beautifully designed elements facilitated the creation of an intuitive and user-friendly interface, contributing to a positive overall user experience

In throughout application, Most of component are used by antd

Figure 7: Using modal of AntD

Figure 8: Using Button of AntD

This library specializes in building interactive node-based graphs or flowcharts It's beneficial when visualizing complex relationships or processes within your application

Role in Chatbot Script Creation: Within the chatbot module, users are tasked with creating scripts to train the chatbot ReactFlow emerged as a valuable tool for

24 simplifying this process by providing features for creating, dragging, dropping, and connecting nodes in a visually intuitive manner

Customization for Project Requirements: While ReactFlow offered a solid foundation, customizations were necessary to tailor the component to the specific requirements of the project This involved adapting the drag-and-drop functionality, node creation, and edge connections to align with the unique needs of the chatbot service

In conclusion, the combination of ReactJs, AntDesign, and ReactFlow has empowered the development of a robust and user-friendly chatbot service The strategic selection of these technologies, driven by considerations of community support, efficiency, aesthetics, and customization capabilities, lays the groundwork for a successful implementation of the capstone project [1]

- useEdgesState: This particular hook provides an array containing the current edges Components utilizing this hook will undergo re-rendering whenever there is any change in edges For instance, this occurs when a new edge is created by connecting nodes to each other

- useNodes: This hook makes it easy to prototype a controlled flow where you manage the state of nodes and edges outside the ReactFlowInstance You can think of it like React's useState hook with an additional helper callback

SockJS and StompJS often go hand in hand when it comes to implementing real-time communication in web applications SockJS provides the transport layer with fallback mechanisms, ensuring connectivity, while StompJS simplifies the messaging protocol implementation, allowing your application to easily send and receive messages in a real-time manner

SockJS: This library enables real-time communication between clients and servers through WebSocket-like APIs It's useful for creating responsive and dynamic applications that require instant updates [11]

StompJS: StompJS is a JavaScript library that provides a STOMP (Simple Text Oriented Messaging Protocol) client for web browsers STOMP is a lightweight and easy-to-implement messaging protocol often used for real-time communication between web servers and clients [10]

Spring Boot is an open-source Java-based framework developed by Pivotal Team (now part of VMware) that simplifies the process of building and deploying production-ready applications It is built on top of the Spring framework and follows the convention over configuration and opinionated defaults principles Spring Boot

C OMMUNICATIONS

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource Although they can also be nouns, these request methods are sometimes referred to as HTTP verbs Each of them implements a different semantic, but some common features are shared by a group of them: e.g a request method can be safe, idempotent, or cacheable

The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

T RAIN AND P REDICTION E XPLANATION

LLM (Large Language Models) are used to describe computer language models that are large in size and capable of processing natural language effectively These

30 language models are often trained on big data and use deep neural network architecture to learn complex language representations

One of the typical examples of Large Language Models is OpenAI's GPT (Generative Pre-trained Transformer) versions, such as GPT-3 Models like GPT-3 have billions or even trillions of parameters, allowing them to understand and generate natural language with high levels of complexity Applications of Large Language Models include text generation, language translation, text summarization, question answering, and many other applications related to natural language processing

Vector Database is a database designed to store and perform query operations based on vector representations of data Usually, each entry in the database is represented as a vector of numbers

Each data item in the database is represented as a vector of numbers For different applications, this vector representation can come from a variety of sources, such as from word embeddings, machine learning models, or other artificial intelligence algorithms In this project, our team uses Vector Database's Similarity Search application to integrate into the Prediction function of Chatbot

2.4.3 What is Embeddding (for Vector Database)?

In the context of Machine Learning and Natural Language Processing,

"Embedding" typically refers to the process of representing words or objects in vector space Embedding is an important technique for converting unstructured data (such as words, text, images) into ordered numeric vectors, making it easier for computers to understand and process the information

Here are some common types of embedding:

The embedding process reduces the dimensionality of data, reducing its size and structure, helping the model learn important features and perform tasks such as classification, similarity search, or prediction

In this project, we use Sentence/Document Embedding to integrate to the Train/Prediction process of Chatbot

2.4.4 How are they applied to this project?

When a customer enters a message into the chat box, we need to analyze what the customer's intention/desire is for that message To do that, we need to have a dataset like the following:

- Intent "Nói tên" has these patterns: "Tên tôi là Vỹ", "Mình tên Linh nha",

"Mình là Thiện An nha bạn", "Tôi tên Thiện", etc

- Intent "Chào hỏi" has these patterns: "Xin chào", "Chào bạn", "Chào nha ",

After the customer sends a message to the system, we need to compare which pattern the customer's message is similar to in the user’s dataset, from which we can deduce what intent the customer's message has For example:

- Customer message: "Mình tên là Vỹ nha bạn"

- This sentence has a similarity level with the pattern "Mình tên Linh nha" which is 0.8, this pattern belongs to the intent "Nói tên"

→ From there we know that the customer's message belongs to the intent "Nói tên"

To do the above, we need to convert the pattern in the user's dataset into Vector type so that it can be stored in the Vector Database When saving Pattern Vector to Vector Database, Pattern Vectors that have the same or close meaning (same intent) and have a high degree of similarity will be placed closer together When a customer sends a message, we will convert the customer's message to Vector type and use the

Similarity Search function of the Vector Database to search for an available Vector Pattern that is similar to the customer's Pattern Vector

So the question is: How to convert a pattern into vector type? That's when Embedding comes into play

As mentioned above, Embedding is a model that collects algorithms for converting data (text, images, sounds, etc.) into vector type Choosing a correct and suitable Embedding model is extremely important In our case, we will use Sentence/Document Embeddings to perform the integration

Searching on Hugging Face, we get the following model: keepitreal/vietnamese-sbert:

- This is a Sentence/Document Embedding Model, exactly what we need

- More importantly, this model is specifically designed for the Vietnamese language, which helps convert and arrange data much more accurately

REQUIREMENT DETERMINATION

C URRENT STATUS SURVEY

Chatbot Service is crucial as it provides 24/7 interaction capabilities, reduces human resource costs, and optimizes customer support processes It offers high customization, allowing businesses to create personalized interaction experiences based on specific customer needs

Amazon Lex is a service provided by Amazon Web Services (AWS) that enables the building of conversational interfaces and chatbots using natural language understanding (NLU) [7]

Amazon Lex uses advanced natural language understanding to interpret and comprehend user input, allowing the creation of conversational interfaces that understand user intent

Seamless integration with other AWS services, such as Lambda, S3, and DynamoDB, enables the creation of robust and scalable applications with minimal effort

Scalability: Being a cloud service, Amazon Lex provides scalability to handle varying workloads and user interactions, making it suitable for applications with changing demands

Amazon Lex supports multiple platforms, including web and mobile, allowing developers to create consistent conversational experiences across various devices

Built-In Slot Types: Amazon Lex offers built-in slot types for common data types like dates, numbers, and cities This simplifies the process of handling specific types of user input

Cost-Effective: Amazon Lex follows a pay-as-you-go pricing model, making it cost-effective for a range of applications, from small projects to large-scale deployments

Table 1: Advantages of Amazon Lex

Designing and managing complex dialog flows can be challenging, especially for applications with intricate conversational requirements

While Amazon Lex supports multiple languages, the range is not as extensive as some other natural language processing platforms, which may limit its applicability in certain regions

Learning Curve: Implementing advanced features and handling complex scenarios may require a learning curve for developers, particularly those new to natural language processing

Limited Customization of Speech Recognition:

Users may experience limitations in customizing the speech recognition models Fine-tuning for specific accents or domain-specific vocabulary might be restricted

Organizations heavily invested in the AWS ecosystem benefit from seamless integration, but for those using different cloud providers, there may be challenges in integrating Amazon Lex with their existing infrastructure

Real-time processing limitations may be a concern for applications requiring extremely low-latency responses, such as certain real-time communication scenarios

While Amazon Lex provides some analytics and monitoring capabilities, it may be less comprehensive compared to dedicated analytics platforms, making it challenging to gather detailed insights into user interactions

Table 2: Disadvantages of Amazon Lex

Dialogflow is a natural language processing (NLP) platform developed by Google for building conversational interfaces, including chatbots, virtual agents, and voice-enabled applications It enables developers to create interactive and natural conversations between users and applications [8]

Ease of Use: Dialogflow provides a user-friendly interface and a low learning curve, making it accessible to developers and non- developers alike

Dialogflow leverages powerful NLP capabilities, allowing it to understand and process natural language inputs, making interactions with users more intuitive

Dialogflow offers a rich set of features, including intent recognition, entity extraction, context management, and support for different languages, providing a comprehensive toolkit for building conversational interfaces

Dialogflow is part of the Google Cloud ecosystem, allowing easy integration with other Google services and leveraging Google's infrastructure for scalability and reliability

Pre-built Agents and Templates:

Dialogflow provides pre-built agents and templates for common use cases, saving development time and serving as a starting point for building custom chatbots or virtual assistants

Dialogflow has an active community and extensive documentation, providing resources, tutorials, and support for developers

While powerful, Dialogflow's natural language understanding (NLU) capabilities may have limitations in terms of fine-tuning and customization for specific use cases

Pricing Structure: Dialogflow's pricing can become a concern for larger or enterprise-level projects, especially if there is high usage or a need for advanced features

The integration with the Google ecosystem may be a limitation for users who prefer or are required to use alternative cloud providers

Creating complex conversational flows with intricate conditions might be challenging, and the visual

38 representation in the interface can become cluttered

The free tier of Dialogflow may have limitations on advanced features, and users may need to upgrade to a paid plan for access to certain functionalities

For applications with strict privacy or data residency requirements, storing conversational data on external cloud services might raise concerns

Dialogflow relies on internet connectivity, and interruptions in connectivity could impact the ability to process user requests

L IST OF SYSTEM FUNCTIONAL REQUIREMENTS

3.2.1 Intent, Pattern, Script information management function

This function helps users to manage and create, read, update, delete Intent, Pattern, Script In addition, users can also get the code to integrate the chatbot with their website Priority: High

- Trainning Pattern & Intent with server Python

Customers must be responsible for their own chatbot

Table 5: CRUD Intent, Pattern, Script function

This function helps users to train the patterns and intents they have created for Chatbot After creating, you can train at the python server and check if the server is Free or Busy Priority: High

- Trainning Pattern & Intent with server Python

Customers must be responsible for their own chatbot

This function helps users to create their own Chatbot scenrio, test and use it Priority: High

Customers must be responsible for their own chatbot

This function will help to access the system through username and password

At the same time, display the interface corresponding to the position in which the user is logged in Priority: High

- Login with username and password

Customers must be responsible for their own account

- Register with Display name, username and password

Customers must be responsible for their own account

No Work Work type Regulations/Related

1 View list of dataset collections

Search Search by dataset collection name, dataset category

3 Add dataset collection to cart

Store If user’s cart already contains the dataset collection, not allow user to add it again

4 See the list of the cart item in cart

5 Make payment Store Make payment by Paypal

No Content Detail description Note

Users have the right to view dataset collection information, view prices, look up dataset collection

L IST OF NON - FUNCTIONAL REQUIREMENTS

Allow to change the intent, chatbot, pattern Evolution

Software customers can change the unit Create, Read, Update, Delete intent, script, pattern and integrate API chatbot

The training form is convenient, natural, and intuitive

Comfortable Support the ability to look up approximate, look up by content,

Speed of training chatbot Effective Up to 5 seconds for one of create chatbot

Table 12: List of non-functional requirements of the system Chatbot

1 - The website can be edited and upgraded to suit the tastes of customers and the needs of the admin such as promotions, etc

- The website works well with many devices

- Function buttons are arranged not too complicated and easy to see

- The functional screens interact well with each other, creating convenience for users

3 - The database is stored securely and easily accessible

- The website works stably, accessing and processing speed is fast

4 - Websites accessed on different devices can share common information with each other

- The website meets the requirements of the user without affecting the activities of other users

5 - The design and functionality of the website can be reused for future development

- The code can be used many times and can be applied to many different programs without having to change the code too much

Table 13: List of non-functional requirements of the system DataEverywhere

SYSTEM DESIGN

R EQUIREMENT MODELING

Description Allows customer login & register into the system

Pre-conditions Customer access the Chatbot Service

(2) Enter username and password or register if haven’t already account

(3) Click “Login” or Register button or press Enter

(4) If failure, message “Login or Register failed” Re- enter and login or register again

(5) If the login or register is successful, show Homepage

Table 14: Login usecase ChatbotService specifications

Description Allows customer Create, Read, Update & Delete their intent

Pre-conditions Customer have already account

Steps (1) Login with customer’s account

(2) Read list Intent when access list Intent on Service (3) Create Intent with button “Create” then the Service add intent and train from Database

(4) Update Intent with button “Edit” then the Service update intent and train from Database

(5) Delete Intent with button “Delete” then the Service delete intent and train from Database

(6) Click button “Train” to train the intent by tensor flow with server python

Table 15: Usecase CRUD intent specifications

Description Allows customer Create, Read, Update & Delete their pattern

Pre-conditions Customer have already account

Steps 1 Login with customer’s account

3 Update pattern with button “Edit” then the Service update pattern and train from Database

4 Delete Script with button “Delete” then the Service delete pattern and train from Database

5 Click each Script to create or edit their pattern

Table 16: Usecase CURD pattern specifications

Description Allows customer Create, Read, Update & Delete their script

Pre-conditions Customer have already account

Steps (1) Login with customer’s account

(2) Read list Script (3) Update Script with button “Edit” then the Service update script and train from Database

(4) Delete Script with button “Delete” then the Service delete script and train from Database

(5) Click each Script to create or edit their scenrio

Table 17: Usecase CURD script specifications

Description Allows customer create their scenrio

Pre-conditions Customer have already account

Steps (1) Login with customer’s account

(2) Read list Script and each script have a scenrio

(3) Click each script to create scenrio (4) Click button “Save” to save scenrio (5) Click button “Try” to try the scenrio you have already created

Table 18: Usecase CURD scenrio specifications

- See the dataset collection list

- See the dataset collection detail

- Manage all purchased dataset collections

Table 19: Usecase overall for DataEverywhere

- Login by Chatbot Service account

- See the dataset collection list

- See the dataset collection detail

- See the preview of a dataset collection

- Add a dataset collection to user’s cart

- Remove a dataset collection from user’s cart

- Purchase for cart items in the user’s cart

- See all purchased dataset collections

- Download the purchased dataset collection

Table 20: Detail usecase for DataEverywhere

S EQUENCE DIAGRAM

Figure 27: Sign up sequence diagram

Figure 28: Get profile sequence diagram

Figure 29: Add intent sequence diagram

Figure 30: Get intent sequence diagram

Figure 31: Update intent sequence diagram

Figure 32: Delete intent sequence diagram

4.2.1.8 Add pattern for an intent sequence diagram

Figure 33: Add pattern for an intent sequence diagram

Figure 34: Add script sequence diagram

Figure 35: Update script sequence diagram

Figure 36: Delete script sequence diagram

Figure 37: Login sequence diagram for DataEverywhere

Figure 38: Sign up sequence diagram DataEverywhere

Figure 39: Get profile sequence diagram DataEverywhere

Figure 40: Update profile sequence diagram DataEverywhere

4.2.2.5 Add dataset collection to cart sequence diagram

Figure 41: Add dataset collection to cart sequence diagram

4.2.2.6 Remove cart item from cart sequence diagram

Figure 42: Remove cart item from cart sequence diagram

Figure 43: Make payment sequence diagram

Figure 44: Class diagram for Chatbot

Figure 45: Class diagram for DataEverywhere

D ATABASE TABLE DESIGN FOR C HATBOT

Ord Attribute Type Domain Meaning Note

2 username string Username of user

3 password string Password of user

4 fullname string Full name of user

5 phone string Phone of user

6 zalo_group_link string Zalo group link that admin set to this user

7 google_meet_link string Google meet link that admin set to this user

8 secret_key string Secret key of user

9 token string Token of user for authentication and authorization

Current service pack of user

Table 21: User table database for Chatbot

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of script

2 user_id string Foreign Key Id of user

3 name string Name of script

4 description string Description of script

5 ui_rendering string String data FE saves to rendering UI of script

Table 22: Script table database for Chatbot

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of node

2 node_id string Foreign Key Id of node FE generates and saves

3 message string Message of node

4 script_id string Foreign Key Id of script this node belongs to

5 is_first_node boolean First node checking

Table 23: Node table database for Chatbot

Ord Attribute Type Domain Meaning Note

Predict type of condition mapping

3 intent_id string Id of intent (not null when predict_type=INTENT)

4 keyword string Keyword of condition mapping (not null when predict_type=KEYWO RD)

Id of node this condition mapping belongs to

6 next_node_id string Foreign

Id of node for mapping condition

Table 24: Condition_mapping table database for Chatbot

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of intent

2 code string Code of intent

3 user_id string Foreign Key Id of user

4 name string Name of intent

Table 25: Intent table database for Chatbot

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of pattern

2 code string Content of pattern

3 intent_id string Foreign Key Id of intent this pattern belongs to

4 uuid string Id generated before creating pattern

Table 26: Pattern table database for Chatbot

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of entity

2 value string Value of entity

3 pattern_id string Foreign Key Id of pattern

4 entity_type_id string Foreign Key Id of entity type

5 start_position int Value’s start position in content of pattern

6 end_position int Value’s end position in content of pattern

Table 27: Entity table database for Chatbot

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of entity type

2 uuid string Id generated before creating entity type

3 user_id string Foreign Key Id of user

4 name string Name of entity type

5 lower_case_ name string Lower case name of entity type

6 searchable_n ame string Searchable name of entity type

Table 28: Entity_type table database for Chatbot

Ord Attribute Type Domain Meaning Note

4 session_id string Session Id of message history that FE generates

5 message string Message content of message history

7 entities json Collected entities from the message field

Table 29: message_history table database for Chatbot

D ATABASE TABLE DESIGN FOR D ATA E VERYWHERE

Ord Attribute Type Domain Meaning Note

1 id string Primary Id of user

2 username string Username of user

3 password string Password of user

4 full_name string Full name of user

5 birthday string Birthday of user

6 address string Address of user

7 avatar string Avatar of user

Current service package of user

Table 30: Table design for DataEverywhere

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of cart

2 user_id string Foreign Key Id of user

Table 31: Cart table for DataEverywhere

Ord Attribute Type Domain Meaning Note

_id string Foreign Key Id of dataset collection

3 transaction_id string Foreign Key Id of transaction

4 cart_id string Foreign Key Id of cart

Ord Attribute Type Domain Meaning Note

2 name string Name of dataset collection

3 short_descr iption string Short description of dataset collection

4 description string Description of dataset collection

5 picture string Link of picture of dataset collection

6 preview string Link of preview pdf file of dataset collection

7 amount long Price of dataset collection

8 download_ path string Link to download all dataset items of dataset collection

9 dataset_cat egory_id string Foreign Key Id of dataset category

Attribute Type Domain Meaning Note

1 id string Primary Key Id of cart item

2 dataset_collec tion_id string Foreign Key Id of dataset collection

3 name string Name of dataset item

4 path string Link to download dataset items

Attribute Type Domain Meaning Note

2 payment_metho d_id string Foreign

3 amount long Amount of transaction

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of payment method

2 name string Name of payment method

3 code string Code of payment method

Ord Attribute Type Domain Meaning Note

1 id string Primary Key Id of dataset category

2 name string Name of dataset category

IMPLEMENTATION AND TESTING

GUI C HATBOT SERVICE

SCU01 Login Screen Login page for registered users

SCU02 Register Screen Register page for new users

SCU03 Home Page Screen Main Home page so that users can see the first overview of the website SCU04 Dashboard Screen Page to help users manage all their resources:

Scripts, Intents, Patterns, Entity Types

SCU05 My Profile Screen Page contains all information of a user

Page to help users manage all their chatbot’s scripts

SCU07 See Embedded Code of Script Modal

Modal to help users see the embedded code of a chatbot’s script SCU08 Edit Script Screen Page to help users edit a chatbot’s script

Modal to help users set up the information of a script SCU10 Try Script Modal Modal to help users test their created chatbot’s script SCU11 Chat History Modal Modal to help users see all the conversations between client and chatbot

Page to help users manage all chatbot’s intents

Modal to help users manage patterns of an intent

SCU14 Create Intent Modal Modal to help users create an intent

SCU15 Update Intent Modal Modal to help users update information of an intent

Page to help users manage their chatbot’s patterns

Page to help users manage their chatbot’s entity types

SCU18 Upgrade Screen Page to provide all the information of

Service Package of the Chatbot Service SCU19 User Management

Page to help the admin user manages all the users in the system

Table 38: GUI chatbot service overall

Figure 48: Log in screen chatbot

Text Display main purpose of page

2 Username Text Box For user to enter the account’s username

3 Password Text Box For user to enter the account’s password

4 Login Button After clicking, the page will go to the

5 Sign Up Link After clicking, the page will go to the

Table 39: Log in screen chatbot

Figure 49: Sign up screen chatbot

Text Display main purpose of page

2 Full name Text Box For user to enter the Full name

3 Username Text Box For user to enter the account’s username

4 Password Text Box For user to enter the account’s password

5 Confirm Password Text Box For user to enter the confirm password

6 Register Button After clicking, the page will go to the Home page

7 Login Link After clicking, the page will go to the Log In page

Table 40: Sign up screen chatbot

Figure 50: Home page screen chatbot

After clicking, the page will go to the Home page

After clicking, the page will go to the Dashboard page

After clicking, the page will go to the My Profile page

4 Sign Out Button For user to sign out the account

After clicking, the page will go to the Log In page

5 Welcome Title Text The welcome message

Text The short description of the

7 Training now Button After clicking, the page will go to the Dashboard page

Table 41: Home page screen chatbot

1 Search Text Box For users to search the navigation menu

For users to choose the navigation menu

3 Management Part Component For users to manage their resources

Figure 52: My profile screen chatbot

1 My account Text Title to display the main content of the page

2 Setting Button For users to edit their profile

3 Username Text Box Display the username of the account

Text Box Display the phone number of the user

5 Role Text Box Display the role of the account

6 Full name Text Box Display the full name of the user

Text Box Display the Zalo channel link that the user can access to get the support from admin

Text Box Display the Google Meet link that the user can access to get the support from admin

9 Description Text Box Display the short description of the user

Component Display the current service package of the account

Table 43: My profile screen chatbot

Figure 53: Script management screen chatbot

1 Create Button For users to create the script

Button For users to filter the scripts by the created date

3 Search Text Box For users to search the scripts by keyword

4 Script No Text Display the No of the scripts

5 Script name Text Display the name of the script

6 Created at Text Display the created date of the script

Text Display the last updated date of the script

Table 44: Script management screen chatbot 5.1.8 See Embedded Code of Script Modal

Figure 54: See embedded code of script modal chatbot

1 Code Text Title of the modal

Text Box Embedded code of script for users to copy

3 Copy Button After clicking, the embedded code of scripted will be copied

4 Close Button After clicking, the modal will close

Table 45: See embedded code of script modal chatbot

Figure 55: Edit script screen chatbot

1 Back Button After clicking, the page will go to the

Button After clicking, the Setting Script

Information Modal will be displayed

3 Try Script Button After clicking, the Try Script Modal will be displayed

4 History Button After clicking, the Script History Modal will be displayed

Button After clicking, the new node will be created

6 Update Button After clicking, the script will be saved

Display all the information of a node

Table 46: Edit script screen chatbot

Figure 56: Setting script infomation modal chatbot

1 Script name Text Box For users to edit the name of script

2 Wrong message Text Box For users to edit the wrong message of script

Text Box For users to edit the end message conversation

4 Close Button After clicking, the model will close

Table 47: Setting script infomation modal chatbot

Figure 57: Try script modal screen chatbot

1 Title Text Title of the modal

2 Save history Check Box For users to save the conversation to the Script History

3 Speech Check Box For users to use the chatbot speech function

Component The user’s message that user has sent

Text Box For users to enter the message to send to the chatbot

6 Send Button For users to send the message

7 Voice Button For users to use voice to enter the message and paste it into the Message Input

Table 48: Try script modal screen chatbot

Figure 58: Chat history modal screen

1 Title Text Title of the modal

2 Save history Check Box For users to save the conversation to the Script History

3 Speech Check Box For users to use the chatbot speech function

4 User message Component The user’s message that user has sent

5 Message Input Text Box For users to enter the message to send to the chatbot

6 Send Button For users to send the message

7 Voice Button For users to use voice to enter the message and paste it into the Message Input

GUI D ATA E VERYWHERE

1 Username Textbox For user to enter the account’s username

2 Password Textbox For user to enter the account’s password

3 Login Button Login to customer’s account if successfully

Button Login with Chatbot Service account

Button Navigate to register page

6 Home Button Navigate to home page

7 Shop Button Navigate to shop page

8 Login Button Navigate to login page

Figure 60: Home page screen DataEverywhere

1 Home Button Navigate to home page

2 Shop Button Navigate to shop page

3 Cart Button Navigate to cart page

4 Purchased Button Navigate to purchased page

5 User profile Button Navigate to user profile page

Button Navigate to shop page

Figure 61: Shop page screen DataEverywhere

1 Search Button For user search products which they need

2 Keyword Button For user quick search with keyword

3 Product card Button Navigate to products detail

Table 52: Shop page screen DataEverywhere

Image Navigate to detail product page

2 Delete Button Delete product from cart

4 Subtotal Text Total product be selected

Button Navigate to shop page

6 Paypal Button Make payment by paypal

1 Username Textbox Click to edit username

2 Adress Textbox Click to edit address

3 Birthday Date&Time Click to edit birthday

4 Fullname Textbox Click to edit fullname

5 Save Button Save your information update profile

Button Click to change password

I MPLEMENTATION

Introduction: The technological stack chosen for the Chatbot Service project plays a pivotal role in its functionality and performance Our stack includes Spring Boot for backend development, ReactJS and Bootstrap for the frontend, FlaskAPI for backend API development, Redis Cached for data caching, Apache Kafka for message streaming, and Machine Learning for intelligent responses

Implementation Details: Each technology in our stack serves a specific purpose Spring Boot facilitates robust backend development, ReactJS and Bootstrap ensure a responsive and user-friendly frontend, FlaskAPI handles backend API development, Redis Cached optimizes data retrieval, Apache Kafka supports efficient message streaming, and Machine Learning enhances the intelligence of our chatbot responses

User Interface: The script creation and customization feature is designed with user-friendliness in mind Users navigate through an intuitive interface, allowing them to create, edit, and customize scripts seamlessly The interface incorporates drag-and- drop functionality for easy script adjustments

Backend Integration: Upon script creation, the backend system dynamically integrates the user-defined scripts This integration ensures that the chatbot adapts to the evolving needs of businesses and users The system constantly monitors deviations from pre-set scripts and adjusts dynamically to provide relevant responses.

T ESTING

Script Functionality: Unit tests ensure the flawless functionality of script creation, customization, and dynamic adjustments These tests cover various scenarios, ensuring the accuracy and effectiveness of the script management features

DataEverywhere Integration: Unit testing for DataEverywhere integration involves validating the smooth retrieval and utilization of datasets Tests confirm that the chatbot effectively integrates external data, providing users with valuable and relevant information

End-to-End Communication: Integration testing focuses on end-to-end communication, ensuring that Zalo and Google Meet channels seamlessly integrate with the admin panel This testing phase guarantees smooth communication between administrators and users

System Performance: Performance testing assesses the scalability and responsiveness of the entire system This includes evaluating response times under varying workloads and identifying potential bottlenecks Performance optimizations are implemented based on the test results

User Authentication: Security testing ensures the robustness of user authentication mechanisms This includes testing for secure login procedures, password encryption, and protection against unauthorized access

Data Security: To safeguard user data and datasets, security testing identifies and addresses potential vulnerabilities Encryption protocols and secure data transmission are rigorously tested to maintain data integrity and privacy.

R ESULT AND O PTIMIZATION

Script Functionality Testing: The unit tests for script functionality validated the seamless creation, customization, and dynamic adjustments of scripts Results indicate

101 a robust script management system, ensuring accurate and effective interactions with users

DataEverywhere Integration Testing: Unit testing for DataEverywhere integration confirmed smooth retrieval and utilization of datasets The chatbot demonstrated effective integration of external data sources, enhancing user interactions with valuable and relevant information Unauthorized

End-to-End Communication Testing: Integration testing for communication channels, including Zalo and Google Meet, revealed a seamless integration with the admin panel Real-time communication between administrators and users was successfully tested, ensuring effective issue resolution

System Performance Testing: Performance testing assessed the scalability and responsiveness of the entire system Results indicated optimal response times under varying workloads, and identified areas for improvement to address potential bottlenecks scripts

User Authentication Testing: Security testing confirmed the robustness of user authentication mechanisms Secure login procedures, password encryption, and protection against unauthorized access were validated, ensuring a secure user environment

Data Security Testing: Security testing for data protection identified and addressed potential vulnerabilities Rigorous testing of encryption protocols and secure data transmission ensured the integrity and privacy of user data

Script Functionality Optimization: Based on testing results, optimizations were implemented to enhance script functionality Dynamic adjustments were fine-tuned to ensure the chatbot adapts seamlessly to user interactions and deviations from pre-set scripts

DataEverywhere Integration Optimization Optimization strategies were applied to improve the integration of datasets from DataEverywhere Efforts focused on streamlining the process of accessing and utilizing datasets, ensuring a more efficient and effective integration

Communication Channel Optimization The integration of communication channels, Zalo and Google Meet, underwent optimization to further enhance real-time communication User feedback and testing results guided improvements to ensure a smooth and responsive communication experience

Overall System Performance Optimization Performance optimizations were implemented based on testing outcomes The system's scalability and responsiveness were further improved, addressing identified bottlenecks and ensuring optimal performance under various scenarios.vulnerabilities

The results and optimizations documented in this section serve as a foundation for continuous improvement Feedback from users and ongoing monitoring will guide future enhancements to ensure the Chatbot Service evolves to meet evolving user expectations and technological advancements

CONCLUSION

A CHIEVEMENTS AND M ILESTONES

The journey from conceptualization to implementation has been marked by significant achievements and key milestones The development of a user-friendly script creation interface empowers businesses to tailor interactions with their audience, providing a personalized and engaging experience The successful integration of the DataEverywhere Marketplace not only expands the capabilities of our chatbot but also establishes a vibrant ecosystem for the exchange of valuable datasets.

T ECHNOLOGICAL I NNOVATION

The technological stack, featuring Spring Boot, ReactJS, Bootstrap, FlaskAPI, Redis Cached, Apache Kafka, and Machine Learning, stands as a testament to our commitment to innovation These technologies synergize to create a seamless and responsive system that adapts to the evolving needs of businesses and users.

U SER -C ENTRIC A PPROACH

Our emphasis on a user-centric approach is evident in the intuitive admin panel, facilitating effortless account management and real-time communication through Zalo and Google Meet The dedicated channel for business users ensures effective guidance back to predefined scripts when deviations occur, fostering a streamlined and efficient user experience.

S ECURITY AND O PTIMIZATION

Security measures, including robust user authentication and data encryption protocols, underscore our dedication to safeguarding user information The optimization strategies derived from extensive testing ensure that the Chatbot Service

104 performs optimally under varying conditions, meeting the demands of a dynamic and ever-changing digital landscape.

F UTURE P ROSPECTS

As we conclude this phase of development, it is crucial to acknowledge that technology is a perpetual journey Future iterations of the Chatbot Service will be guided by user feedback, emerging technologies, and the evolving landscape of chatbot solutions Continuous improvement remains at the core of our commitment to delivering a service that exceeds expectations

In closing, the "Chatbot Service" project represents a significant stride towards redefining customer engagement in the digital era The collaborative efforts of the development team, the invaluable insights from user testing, and the strategic integration of technologies have converged to create a platform poised for ongoing success

We look forward to the continued evolution of the Chatbot Service and its impact on reshaping the way businesses connect with their audiences

[1] React Flow - Build interactive node-based UIs

[2] Ant Design of React - Ant Design

[3] Bootstrap ã The most popular HTML, CSS, and JS library in the world (getbootstrap.com)