Dialogflow CX format the data stores output in the chat window

[onprint]

I have created a chatbot using Dialogflow CX the chatbot gives the answers to the users questions from our site data store

I have added our site data into the vertex ai data store and connected it to the Dialogflow cx. I am using a pdf file as a data store and its file has a list of products my issue is below

I created the list of products with their actual website URL, but whenever I make a query through the chatbot it gives me the result of products from the data store but it doesn't format the list like I created the pdf with lists and each products link in response it only gives me the plain text instead of link and list

How can I format the data store response in the chatbot? I tried to added HTML tags and markdown syntax in my pdf but it doesn't works for me. 

Also, which is the best data format approach to store product information which gives us the proper formatted output from the data store? I tried with pdf and docs but didn't get successed

[dawnberdan]

Hi @onprint,

Welcome to Google Cloud Community!

To format responses in your Dialogflow CX chatbot using data from Vertex AI, here are some strategies and tips to consider:

1. Use Structured Data Formats: Instead of using PDF or Word documents, consider storing your product data in a structured format such as:

• JSON: A user-friendly data interchange format that simplifies the processes of reading and writing data. By structuring product data in key-value pairs, JSON enhances parsing and formatting capabilities in response handling.
• CSV: CSV, while not as adaptable as JSON, can effectively store and process product information for formatted responses, especially when well-structured.

2. Modify the Response in Your Fulfillment: Once you have retrieved the product information, you can structure the response using your fulfillment logic. This process may need to occur in the backend logic that is connected to Dialogflow CX.

• Create a Response Builder: When building the response, you can create a string with HTML or Markdown that includes links. For example, in JavaScript, you could create a response like this:

const response = products.map(product => `<a href="${product.url}">${product.name}</a>`).join('<br/>');

3. Use Rich Responses: Dialogflow CX supports rich responses, including cards, lists, and quick replies. You can structure your data into rich response formats, which may help in presenting links and additional information in a user-friendly manner.
4. Test Different Output Formats: If you're using Markdown or HTML, make sure your chatbot interface supports them. Not all platforms render HTML or Markdown the same way. 
5. Consider External APIs or Services: To dynamically retrieve and format product data, explore using an external service or API. This approach allows you to query the API for product information and receive well-formatted results directly within your chatbot.

Example Approach:

1. Store Product Data in JSON:

[
  {
    "name": "Product 1",
    "url": "http://example.com/product1"
  },
  {
    "name": "Product 2",
    "url": "http://example.com/product2"
  }
]

2. In your Fulfillment Logic:

const formattedResponse = products.map(product => `${product.name}: <a href="${product.url}">${product.url}</a>`).join('<br/>');

3. Return the Response: Ensure the output is sent as part of the chatbot's response.

For more details, you can check the Dialogflow CX and Vertex AI documentation.

I hope the above information is helpful.