diff --git a/docs/docs/components/inputs.mdx b/docs/docs/components/inputs.mdx
index 78ca6f0f6..de46f3ad7 100644
--- a/docs/docs/components/inputs.mdx
+++ b/docs/docs/components/inputs.mdx
@@ -1,4 +1,5 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
# Inputs
@@ -17,42 +18,147 @@ This component is designed to get user input from the chat.
- **Session ID:** specifies the session ID of the chat history. If provided, the message will be saved in the Message History.
-
- If _`As Record`_ is _`true`_ and the _`Message`_ is a _`Record`_, the data of the _`Record`_ will be updated with the _`Sender`_, _`Sender Name`_, and _`Session ID`_.
-
+
+ If _`As Record`_ is _`true`_ and the _`Message`_ is a _`Record`_, the data
+ of the _`Record`_ will be updated with the _`Sender`_, _`Sender Name`_, and
+ _`Session ID`_.
+
+When you get it from the sidebar, it will look like the image below but that is because some fields are in the advanced section.
+
+
+
+If you expose all its fields, it will look like the image below.
+
+
+
+One key capability of the Chat Input component is how it transforms the Interaction Panel into a chat window. This feature is particularly useful for scenarios where user input is required to initiate or influence the flow.
+
+
+
---
### Prompt
-Create a prompt template with dynamic variables.
+Create a prompt template with dynamic variables. This is a very useful component for structuring prompts and passing dynamic data to a language model.
**Parameters**
-- **Template:** the template for the prompt.
+- **Template:** the template for the prompt. This field allows you to create other fields dynamically by using curly brackets `{}`. For example, if you have a template like this: _`"Hello {name}, how are you?"`_, a new field called _`name`_ will be created.
-
- Prompt variables can be created with any chosen name inside curly brackets, e.g. `{variable_name}`
-
+
+ Prompt variables can be created with any chosen name inside curly brackets,
+ e.g. `{variable_name}`
+
----
+Here is how it looks when you get it from the sidebar.
+
+
+And here when you add a Template with the value _`Hello {name}, how are you?`_.
+
+
+
+---
### Text Input
This component is designed for simple text input, allowing users to pass textual data to subsequent components in the workflow. It's particularly useful for scenarios where a brief user input is required to initiate or influence the flow.
-
**Params**
- **Value:** Specifies the text input value. This is where the user can input the text data that will be passed to the next component in the sequence. If no value is provided, it defaults to an empty string.
+- **Record Template:** Specifies how a Record should be converted into Text.
-
- The `TextInput` component serves as a straightforward means for setting Text input values in the chat window. It ensures that textual data can be seamlessly passed to subsequent components in the flow.
-
+
+ The `TextInput` component serves as a straightforward means for setting Text
+ input values in the chat window. It ensures that textual data can be
+ seamlessly passed to subsequent components in the flow.
+
+It should look like this when dropped directly from the sidebar.
+
+
+
+And when you expose all its fields, it will look like the image below.
+
+The **Record Template** field is used to specify how a Record should be converted into Text. This is particularly useful when you want to extract specific information from a Record and pass it as text to the next component in the sequence.
+
+For example, if you have a Record with the following structure:
+
+```json
+{
+ "name": "John Doe",
+ "age": 30,
+ "email": "johndoe@email.com"
+}
+```
+
+You can use a template like this: _`"Name: {name}, Age: {age}"`_ to convert the Record into a text string like this: _`"Name: John Doe, Age: 30"`_, and if you pass more than one Record, the text will be concatenated with a new line separator.
+
+
+
+The Text Input component gives you the possibility to add an Input field on the Interaction Panel. This is useful because it allows you to define parameters while running and testing your flow.
+
+
diff --git a/docs/docs/migration/inputs-and-outputs.mdx b/docs/docs/migration/inputs-and-outputs.mdx
index 8a9ce10ed..5db3f3af2 100644
--- a/docs/docs/migration/inputs-and-outputs.mdx
+++ b/docs/docs/migration/inputs-and-outputs.mdx
@@ -33,4 +33,4 @@ Outputs are components that are used to define where data comes out of your flow
The Chat Output works similarly to the Chat Input but does not have a field that allows for written input. It is used as an Output definition and can be used to send data to the user.
-You can find out more about it and the other Outputs [here](../components/outputs).
\ No newline at end of file
+You can find out more about it and the other Outputs [here](../components/outputs).
diff --git a/docs/static/img/chat-input-expanded.png b/docs/static/img/chat-input-expanded.png
new file mode 100644
index 000000000..befe5afbd
Binary files /dev/null and b/docs/static/img/chat-input-expanded.png differ
diff --git a/docs/static/img/chat-input.png b/docs/static/img/chat-input.png
new file mode 100644
index 000000000..29605c1b1
Binary files /dev/null and b/docs/static/img/chat-input.png differ
diff --git a/docs/static/img/interaction-panel-text-input.png b/docs/static/img/interaction-panel-text-input.png
new file mode 100644
index 000000000..77994c924
Binary files /dev/null and b/docs/static/img/interaction-panel-text-input.png differ
diff --git a/docs/static/img/interaction-panel-with-chat-input.png b/docs/static/img/interaction-panel-with-chat-input.png
new file mode 100644
index 000000000..c5f7c7998
Binary files /dev/null and b/docs/static/img/interaction-panel-with-chat-input.png differ
diff --git a/docs/static/img/prompt-with-template.png b/docs/static/img/prompt-with-template.png
new file mode 100644
index 000000000..0312b899f
Binary files /dev/null and b/docs/static/img/prompt-with-template.png differ
diff --git a/docs/static/img/prompt.png b/docs/static/img/prompt.png
new file mode 100644
index 000000000..6d4260bed
Binary files /dev/null and b/docs/static/img/prompt.png differ
diff --git a/docs/static/img/text-input-expanded.png b/docs/static/img/text-input-expanded.png
new file mode 100644
index 000000000..fe73e496c
Binary files /dev/null and b/docs/static/img/text-input-expanded.png differ
diff --git a/docs/static/img/text-input.png b/docs/static/img/text-input.png
new file mode 100644
index 000000000..e8f8da248
Binary files /dev/null and b/docs/static/img/text-input.png differ