# Chat Field Types (Email, Password, Location, Upload)

## Email Field

The email field applies email validation against what's input. You will not be able to proceed until the validation completes.&#x20;

{% hint style="info" %}
You could probably bypass the email validation by using an ASR input..
{% endhint %}

### Screenshots

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-Lc3MpIoZVtiPKlz5x-d%2F-Lc3MvSbFYwm2nE20nQW%2Fe1.jpg?alt=media&#x26;token=20903f42-5372-4808-aef7-0bb013ecb279" alt=""></div>

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-Lc3MpIoZVtiPKlz5x-d%2F-Lc3MvSe2qk1qbLrVZwg%2Fe2.jpg?alt=media&#x26;token=2d6a28c5-8fd5-45d7-970f-682eb8572177" alt=""></div>

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-Lc3MpIoZVtiPKlz5x-d%2F-Lc3MvShRFct_H9ixZdO%2Fe3.jpg?alt=media&#x26;token=5ace8ee8-9b51-4ad1-a130-0cae622c3701" alt=""></div>

### Output Parameter

```
inputType = email
```

## Password Field

The password field will mask the users password as they enter it in. It will also ensure that once the password is sent to Teneo that the user's password is masked in the chat UI.

### Screenshots

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-Lc3N5mCoY5kMXtyKjXz%2F-Lc3N9_Qi2Wza-Z6HKTQ%2Fp3.jpg?alt=media&#x26;token=7a18c853-56b6-4bf8-927c-e303d1cf604c" alt=""></div>

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-Lc3N5mCoY5kMXtyKjXz%2F-Lc3N9_TGX-mILQvNdQP%2Fp1.jpg?alt=media&#x26;token=eb84c249-69dc-4114-9826-f1ba301e5c27" alt=""></div>

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-Lc3N5mCoY5kMXtyKjXz%2F-Lc3N9_WRX9lvgmmTyou%2Fp2.jpg?alt=media&#x26;token=71a8de02-f935-4067-8f15-bf83cb8f2dfa" alt=""></div>

### Output Parameter

```
inputType = password
```

## Location Information

For some conversations it might be desirable to use the user's current browser location as a means of refining a back end query. To request the location information from the browser you just need to set one of the following output parameters on a node in a Teneo Flow.&#x20;

| Output Param Name | Value                | Example Response Format     |
| ----------------- | -------------------- | --------------------------- |
| inputType         | locationCityStateZip | Sammamish, Washington 98075 |
| inputType         | locationZip          | 98075                       |
| inputType         | locationLatLong      | 40.748736,-73.98486         |
| inputType         | locationJson         | JSON Format seen below      |

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-Lcbp4hBwpejoanGyM8h%2F-Lcbp7Kh58yaltbR1ch9%2Fcarbon.png?alt=media&#x26;token=4812686e-60ae-4728-88de-8314664491ff" alt="JSON Format for inputType=locationJson"></div>

{% hint style="info" %}
To be able to retrieve any info other than "**locationLatLong**" you will need to define a license key for <https://locationiq.com> in **.env** called: **VUE\_APP\_LOCATION\_IQ\_KEY**
{% endhint %}

Teneo will automatically send back the requested information to Teneo. This will come in as request parameters with the same names: (**locationCityStateZip/locationZip/locationLatLong/locationJson**) The parameter values are URL Encoded and you should URL decode them retrieving the location information. This can be done either in a pre-processing script, a listener or a transition.

For example:

```java
import java.net.URLDecoder;
URLDecoder.decode(engineEnvironment.getParameter("locationCityStateZip"), "UTF-8")}
```

## Upload Field

The upload field will swap out the user input field with an icon that will allow the user to upload a file. You can choose to provide some additional configuration that will tell Leopard what to do with the uploaded file.&#x20;

### Output Parameter

```
inputType = upload
```

This but itself will instruct Leopard to present an upload button and it will simulate an upload of the file. A progress spinner will be shown and when it completed the user will be notified that the file is uploaded and an empty user input will be sent to Teneo so that the conversation can continue.

{% tabs %}
{% tab title="Upload button" %}
![](https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-LdPHll5hUa91OYRi0X4%2F-LdPI2E_YxlZNQljOkTe%2Fupload-button.jpg?alt=media\&token=a9ff85ea-2883-4c08-a844-f8e3ff2464d7)
{% endtab %}

{% tab title="Upload Progress" %}
![](https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-LdPHll5hUa91OYRi0X4%2F-LdPI8G4QNMp_UodY998%2Fupload-progress.jpg?alt=media\&token=facd7154-6ecc-4b15-9ec5-acac09ae25f8)
{% endtab %}

{% tab title="Upload Confirmation" %}
![](https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-LdPHll5hUa91OYRi0X4%2F-LdPIBv7pnMKE6LYBq7m%2Fupload-confirmation.jpg?alt=media\&token=67bdc2c3-bbe3-48a3-8ec9-997f60e04a45)
{% endtab %}
{% endtabs %}

### Upload Configuration

In all likelihood you will probably want the file to be upload to another server. To instruct Leopard to achieve that you will need to send along and upload configuration object to Leopard from Teneo.

#### Output Parameter

```
uploadConfig = ${ExtensionHelper.setUploadConfig(configMap)}
```

Where `configMap` is a Groovy map:

```groovy
def configMap = [
    "postUrl": "http://url-to-post-file-to.com/some-context",
	"postFileNameParam": "file",
	"postParams": [
		"my_key": "my_value"
	],
	"teneoSuccessQuery": "&uploadResult=success",
	"teneoFailureQuery": "&uploadResult=error",
	"reqUserInputSuccess": "I have uploaded my file",
	"reqUserInputFailure": "I tried uploading but it didn't work"
]
```

{% hint style="info" %}
You don't have to define all the keys in the map.  At the very least you need to define a `postUrl` a `postFileNameParam` and your choice the remaining keys.
{% endhint %}

#### JSON

```javascript
{
  "name"       : "uploadConfig",
  "parameters" : {
    "postUrl"             : "http://url-to-post-file-to.com/some-context",
    "postFileNameParam"   : "file",
    "postParams"          : { "my_key":"my_value" },
    "teneoSuccessQuery"   : "&uploadResult=success",
    "teneoFailureQuery"   : "&uploadResult=error",
    "reqUserInputSuccess" : "I have uploaded my file",
    "reqUserInputFailure" : "I tried uploading but it didn't work"
  }
}
```

#### Description of the config variables

| Key                 | Action                                                                                        |
| ------------------- | --------------------------------------------------------------------------------------------- |
| postUrl             | Where should the file be posted                                                               |
| postFileNameParam   | When posting the file this will be the name on file file in the form data that is posted      |
| postParams          | An object representing additional form parameters that might need posting along with the file |
| teneoSuccessQuery   | If the file is successfully posted then this query string will be sent to Teneo               |
| teneoFailureQuery   | If the file can't be posted then this query string will be sent to Teneo                      |
| reqUserInputSuccess | If the file is successfully posted then this user input will automatically be sent to Teneo   |
| reqUserInputFailure | If the file can't be posted then this user input will automatically be sent to Teneo          |

&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jolzee.gitbook.io/leopard/components/field-types.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
