Add new components and images

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
 
@@ -18,41 +19,146 @@ This component is designed to get user input from the chat.
 
 <Admonition type="note" title="Note">
   <p>
-        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`_.
   </p>
 </Admonition>
 
+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.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/chat-input.png",
+    dark: "img/chat-input.png",
+  }}
+  style={{ width: "50%" }}
+/>
+
+If you expose all its fields, it will look like the image below.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/chat-input-expanded.png",
+    dark: "img/chat-input-expanded.png",
+  }}
+  style={{ width: "40%" }}
+/>
+
+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.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/interaction-panel-with-chat-input.png",
+    dark: "img/interaction-panel-with-chat-input.png",
+  }}
+  style={{ width: "50%" }}
+/>
+
 ---
 
 ### 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.
 
 <Admonition type="note" title="Note">
   <p>
-        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}`
   </p>
 </Admonition>
 
----
+Here is how it looks when you get it from the sidebar.
 
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/prompt.png",
+    dark: "img/prompt.png",
+  }}
+  style={{ width: "50%" }}
+/>
+
+And here when you add a Template with the value _`Hello {name}, how are you?`_.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/prompt-with-template.png",
+    dark: "img/prompt-with-template.png",
+  }}
+  style={{ width: "50%" }}
+/>
+
+---
 
 ### 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.
 
 <Admonition type="note" title="Note">
   <p>
-        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.
   </p>
 </Admonition>
 
+It should look like this when dropped directly from the sidebar.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/text-input.png",
+    dark: "img/text-input.png",
+  }}
+  style={{ width: "50%" }}
+/>
+
+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.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/text-input-expanded.png",
+    dark: "img/text-input-expanded.png",
+  }}
+  style={{ width: "50%" }}
+/>
+
+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.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/interaction-panel-text-input.png",
+    dark: "img/interaction-panel-text-input.png",
+  }}
+  style={{ width: "50%" }}
+/>