Dialogflow CX - using webhook fulfilment to reply user

https://i.sstatic.net/oqT5V.png https://i.sstatic.net/r3thU.png

{
  "currentPage": {
    "displayName": "Start Page",
    "name": "projects/agent3-293107/locations/global/agents/5ca68c8a-abfc-4b35-a06a-f50cd4b697bd/flows/00000000-0000-0000-0000-000000000000/pages/START_PAGE"
  },
  "diagnosticInfo": {
    "Triggered Transition Names": [
      "e03439ef-fc0c-49f1-943e-2b5d46d68474"
    ],
    "Execution Sequence": [
      {
        "Step 1": {
          "InitialState": {
            "FlowState": {
              "Name": "Default Start Flow",
              "PageState": {
                "Name": "Start Page",
                "Status": "TRANSITION_ROUTING"
              }
            },
            "MatchedIntent": {
              "Type": "NLU",
              "DisplayName": "Default Welcome Intent",
              "Active": true,
              "Id": "00000000-0000-0000-0000-000000000000",
              "Score": 1
            }
          },
          "Type": "INITIAL_STATE"
        }
      },
      {
        "Step 2": {
          "Type": "STATE_MACHINE",
          "StateMachine": {
            "TriggeredIntent": "Default Welcome Intent",
            "FlowState": {
              "PageState": {
                "Name": "Start Page",
                "Status": "TRANSITION_ROUTING"
              },
              "Version": 0,
              "Name": "Default Start Flow"
            },
            "TransitionId": "e03439ef-fc0c-49f1-943e-2b5d46d68474"
          }
        }
      },
      {
        "Step 3": {
          "Type": "FUNCTION_EXECUTION",
          "FunctionExecution": {
            "Responses": [],
            "Webhook": {
              "Status": "OK",
              "Latency": "95 ms"
            }
          }
        }
      },
      {
        "Step 4": {
          "Type": "STATE_MACHINE",
          "StateMachine": {
            "FlowState": {
              "Name": "Default Start Flow",
              "Version": 0,
              "PageState": {
                "Name": "Start Page",
                "Status": "TRANSITION_ROUTING"
              }
            }
          }
        }
      }
    ],
    "Transition Targets Chain": [],
    "Webhook Latencies (ms)": [
      95
    ],
    "Alternative Matched Intents": [
      {
        "Id": "00000000-0000-0000-0000-000000000000",
        "DisplayName": "Default Welcome Intent",
        "Type": "NLU",
        "Score": 1,
        "Active": true
      }
    ]
  },
  "intent": {
    "displayName": "Default Welcome Intent",
    "name": "projects/agent3-293107/locations/global/agents/5ca68c8a-abfc-4b35-a06a-f50cd4b697bd/intents/00000000-0000-0000-0000-000000000000"
  },
  "intentDetectionConfidence": 1,
  "languageCode": "en",
  "match": {
    "confidence": 1,
    "intent": {
      "displayName": "Default Welcome Intent",
      "name": "projects/agent3-293107/locations/global/agents/5ca68c8a-abfc-4b35-a06a-f50cd4b697bd/intents/00000000-0000-0000-0000-000000000000"
    },
    "matchType": "INTENT",
    "modelType": "MODEL_TYPE_STANDARD",
    "resolvedInput": "hi"
  },
  "sentimentAnalysisResult": {
    "magnitude": 0.3,
    "score": 0.3
  },
  "text": "hi",
  "webhookPayloads": [
    {}
  ],
  "webhookStatuses": [
    {}
  ]
}

I am learning how to use webhook within dialogflow CX fulfilment. The above code is the "original response" inside of dialogflow CX's test agent simulator. Step 3 says my webhook status is ok but there is no response. Is the returning JSON contents correct? How does dialogflow CX parse its response differently from ES?

Solution

Dialogflow CX webhooks are similar to Dialogflow ES webhooks, except that request and response fields have been changed to support Dialogflow CX features. This is the reason why Dialogflow CX parses its response differently from Dialogflow ES.

As observed in your attached screenshots, you used only a text field parameter in your object instead of fulfillment_response.messages[] to represent a response message that can be returned by your conversational agent. To get the desired webhook response for your use case, please make sure that you follow the webhook response format of Dialogflow CX. If you use Flask, consider using the jsonify method as shown below:

from flask import Flask, request, jsonify
app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def hello_world():
    tag = request.json['fulfillmentInfo']['tag']
    fulfillmentResponse = {
        'fulfillmentResponse': {
            'messages': [{
                'text': {
                    'text': 'Hello World!'
                }
            }]
            },
    'sessionInfo':request.json['sessionInfo']
    }
    return jsonify(fulfillmentResponse)

@app.route('/webhook', methods=['GET', 'POST'])
def webhook():
    tag = request.json['fulfillmentInfo']['tag']
    fulfillmentResponse = {
        'fulfillmentResponse': {
            'messages': [{
                'text': {
                    'text': 'Hi there'
                }
            }]
        },
    'sessionInfo':request.json['sessionInfo']
    }
    return jsonify(fulfillmentResponse)

    app.run(host='0.0.0.0', port=8080)

Here is the result:

Webhook Response JSON Result:

{
   "fulfillmentResponse":{
      "messages":[
         {
            "text":{
               "text":[
                  "Hello World"
               ]
            }
         }
      ]
   },
   "sessionInfo":{
      "session":"projects/project-id/locations/location-id/agents/agent-id/sessions/sessions-id"
   }
}

In addition, the original response that you got in Dialogflow CX is the returned response content after the webhook is processed.