改行コードを含むLexセッション属性をConnectのListPickerで使用した際に発生した表示問題と対処法

# はじめに
本記事では、Amazon ConnectとAmazon Lex v2を連携させる際に、Lexのセッション属性に改行コード（`\n`）が含まれているパラメータを指定し、それをConnectのListPickerで使用すると、Connectのテストチャット時にインターフェースで表示に想定外（真っ白になる）事象とその対処方法について記載します。

# やりたいこと
LambdaでLexのセッション属性に設定した値をConnectのListPickerで使用したい。

# 書かない事
- Lambdaの権限周りについて
- Connectのインスタンス作成について

# 環境
- Lex v2

# 事象
Connectのテストチャットから動作を確認すると、フロー上のGet Customer inputブロックに到達した際に文言が表示されず、画面が真っ白になります。
下記のようなイメージです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/2d9abef4-ab27-df2b-72ae-c9a1dd387f9c.png)


# 原因 & 対処法
Lambdaのレスポンスに含まれていた改行コード（\n）が原因でした。
こちらを取り除くと想定通りの文言が表示されました。


# Connectのフロー

本記事で使用してるConnectのフローは次の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/c49ad9f8-b4d2-025b-95cf-5d14f1a1ccec.png)

図のブロックの用途はそれぞれ次の通りです。

```
① Get Customer inputブロック：ListPickerを指定したブロック
② Play Promptブロック：LexのsessionAttributesに設定されたテキスト（＝★）を表示するブロック
③ Get Customer inputブロック：ListPickerを指定したブロック（element > title には★を設定）
```

## ① Get Customer Inputブロック

```json:読み上げるテキストを入力
{
   "templateType": "ListPicker",
   "version": "1.0",
   "data": {
      "content": {
         "title": "サンプルテキスト",
         "subtitle": "",
         "elements": [
            { "title": "サンプル選択肢" }
         ]
      }
   }
}
```

## ② Play Promptブロック

```json:読み上げるテキストを入力
$.Lex.SessionAttributes.response
```

https://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/connect-attrib-list.html#attribs-lex-table

## ③ Get Customer Inputブロック

```json:読み上げるテキストを入力
{
   "templateType": "ListPicker",
   "version": "1.0",
   "data": {
      "content": {
         "title": "$.Lex.SessionAttributes.response",
         "subtitle": "",
         "elements": [
            { "title": "サンプル選択肢" }
         ]
      }
   }
}
```

# Lex

## インテントの設定

次のようにインテントの設定をいたします。

- インテント名：sample_intent
- サンプル発話：サンプル選択肢
- Code hooks：☑をいれた状態

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/3626e24d-e415-813d-0e6c-6c13cbe4113e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/0b9a38c3-b10e-9909-7054-566c99fe69e8.png)


## Lexから呼ぶLambdaの設定

エイリアスから設定しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/b080908f-bd2d-1ed9-b831-0b10dd42228f.png)



# Lambda

次の通りLexから呼ばれる用のLambdaを作成します。

```python
def lambda_handler(event, context):
    intent_name = event['sessionState']['intent']['name']
    slots = event['sessionState']['intent']['slots']
    
    return {
        'sessionState': {
            'sessionAttributes': {
                'response': 'ああああ\nあああ'
            },
            'dialogAction': {
                'type': 'Close',
            },
            'intent': {
                'name': intent_name,
                'slots': slots,
                'state': 'Fulfilled'
            }
        }
    }
```

# Connectのテストチャットから動作確認


②Play Promptブロックでは改行コードが含まれていても問題なく表示できていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/994fdffe-6926-e37a-051b-8909929170ee.png)


Play Promptブロックの後のブロック（③ Get Customer inputブロック）に到達すると、テストチャットの画面が真っ白になってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/2d9abef4-ab27-df2b-72ae-c9a1dd387f9c.png)

CloudWatchからフローログを確認すると次のようになっており、LambdaでLexのセッション属性に設定していた`"ああああ\nあああ\"`も値が入っています。

```json
{
    "ContactId": "～～～",
    "ContactFlowId": "～～～",
    "ContactFlowName": "～～～",
    "ContactFlowModuleType": "GetUserInput",
    "Identifier": "ListPicker指定ブロック2",
    "Timestamp": "～～～",
    "Parameters": {
        "NoInputTimeout": "～～～",
        "TextToSpeechType": "text",
        "LexVersion": "V2",
        "BotAliasArn": "～～～",
        "Parameter": "～～～",
        "Text": "{\n   \"templateType\": \"ListPicker\",\n   \"version\": \"1.0\",\n   \"data\": {\n      \"content\": {\n         \"title\": \"ああああ\nあああ\",\n         \"subtitle\": \"\",\n         \"elements\": [\n            { \"title\": \"サンプル選択肢\" }\n         ]\n      }\n   }\n}",
        "Voice": "～～～",
        "MaxSpeechDuration": "～～～"
    }
}
```

見た感じブロックでエラーは起きてないように見えますが、原因を追っていくとLambdaで設定した次の部分の改行コード `\n` でした。

```json:sessionAttributes
"response": "ああああ\nあああ"
```

以下は修正後のLambdaのソースです。
改行コードを含まない文字列（"あああああああ"）を設定することで、ConnectのListPickerでの表示問題を回避できました。

```python:lambda_function.py（修正後）
def lambda_handler(event, context):
    intent_name = event['sessionState']['intent']['name']
    slots = event['sessionState']['intent']['slots']
    
    return {
        "sessionState": {
            "sessionAttributes": {
                "response": "あああああああ"
            },
            "dialogAction": {
                "type": "Close",
            },
            "intent": {
                "name": intent_name,
                "slots": slots,
                "state": "Fulfilled"
            }
        }
    }
```

試しに `\n` を取り除いて動かしてみると、今回起きていた事象は改善されました。
何か参考になれば幸いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/5ea8e354-216f-46e5-81bf-e2346fece795.png)


# 参考

https://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/connect-attrib-list.html#attribs-lex-table