Improve documentation: Component Overview section (#9056)

* Improve Component Overview: add image and expand grouping instructions

* Update docs/docs/Concepts/concepts-components.mdx

Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>

* alternate-control

---------

Co-authored-by: Mendon Kissling <59585235+mendonk@users.noreply.github.com>

docs/docs/Concepts/concepts-components.mdx

@@ -95,6 +95,8 @@ For example, the **Language Model** component includes **Model Response** or **L
 The **Model Response** output sends a [Message](/concepts-objects#message-object) output on to another Message port.
 The **Language Model** output can be connected to components like [Structured output](/components-processing#structured-output) to use the LLM to power the component's reasoning.
 
+![Output type selection in the Language Model component](/img/select-output.png)
+
 ### Port colors
 
 Component port colors indicate the data type ingested or emitted by the port.
@@ -223,6 +225,9 @@ Components are updated to the latest available version, based on the version of
 Multiple components can be grouped into a single component for reuse. This is useful for organizing large flows by combining related components together, such as a RAG **Agent** component and an associated vector database component.
 
 1. Hold <kbd>Shift</kbd>, and then click and drag to highlight all components you want to merge. Components must be completely within the selection area to be merged.
+
+    Alternatively, to select components for merging one by one, hold <kbd>Ctrl</kbd> on Windows or <kbd>Cmd</kbd> on Mac, and then click each component to add them to the group.
+
 2. Release the mouse and keyboard, and then click **Group** to merge the components into a single, group component.
 
 Grouped components are configured and managed as a single component, including the component name, code, and settings.