docs: add process message before send hook to documentation

website/docs/contributor-guide/how-ag2-works/generate-reply.mdx

@@ -10,7 +10,7 @@ If you are creating a new agent and want to control what they generate (their *r
 
 Let's look at how the standard ConversableAgent's [generate_reply](/docs/api-reference/autogen/ConversableAgent#generate-reply) method works.
 
-![generate_reply](./assets/generate-reply.png)
+![generate_reply](./assets/generate-reply-updated.png)
 
 ### Breakdown of [generate_reply](/docs/api-reference/autogen/ConversableAgent#generate-reply):
 
@@ -51,6 +51,16 @@ Let's look at how the standard ConversableAgent's [generate_reply](/docs/api-ref
 
         - If none of the reply functions generate a final result, the agent's [`ConversableAgent.default_auto_reply`](/docs/api-reference/autogen/ConversableAgent#conversableagent) value will be returned. The default for this property is an empty string and this denotes no reply.
 
+4. **Process Message Before Send Hook**
+
+    - After a reply has been generated by one of the reply functions, the `process_message_before_send` hook is evaluated. This hook allows for final processing and potential modification of the generated reply before it is sent to other agents.
+    - This hook is useful for adding metadata, formatting, or making any last-minute adjustments to the message content.
+    - The hook receives the generated reply and can return a modified version that will be used as the final message.
+
+5. **Return Reply**
+
+    - The final reply (which can be a string or a dictionary) is returned. If no reply was generated throughout the process, `None` is returned.
+
 ### Registering your own reply functions
 
 If you are creating a new type of agent, it's useful to create a reply function that triggers your agent's internal workflow and returns the result back into the conversation.

website/docs/user-guide/advanced-concepts/nested-chat.mdx

@@ -8,7 +8,7 @@ A powerful method to encapsulate a single workflow into an agent is through AG2'
 
 Nested chats is powered by the nested chats handler, which is a pluggable component of [`ConversableAgent`](/docs/api-reference/autogen/ConversableAgent). The figure below illustrates how the nested chats handler triggers a sequence of nested chats when a message is received.
 
-![nested_chat](../assets/nested-chats.png)
+![nested_chat](./assets/nested-chats.png)
 
 When a message comes in and passes the human-in-the-loop component, the nested chats handler checks if the message should trigger a nested chat based on conditions specified by the user.
 
@@ -24,6 +24,8 @@ Here is an example of a nested chat where a single agent, `lead_teacher_agent` e
 
 The end result is that when this agent is called to reply in a chat it will, internally, run through a workflow using the nested chats and a fully considered lesson plan will be returned as its reply.
 
+![nested_chat_process](./assets/nested_chats_process.png)
+
 import Example from "/snippets/python-examples/nestedchat.mdx";
 
 <Example/>

website/docs/user-guide/advanced-concepts/orchestration/group-chat/handoffs.mdx

@@ -372,17 +372,8 @@ tech_agent.handoffs.add_llm_conditions([
 
 With these LLM-based handoffs, the tech agent analyzes the user's message to identify if they're discussing a computer or smartphone issue, then routes accordingly. The LLM evaluates the prompt against the conversation content to make this decision.
 
-```mermaid
-flowchart TD
-    Tech[Tech Agent] -->|"LLM analyzes: Computer issue?"| Computer[Computer Agent]
-    Tech -->|"LLM analyzes: Smartphone issue?"| Smartphone[Smartphone Agent]
-    Tech -->|"Neither condition met"| User([User])
-
-    style Tech fill:#e8f5e9,stroke:#4caf50
-    style Computer fill:#d1c4e9,stroke:#673ab7
-    style Smartphone fill:#bbdefb,stroke:#2196f3
-    style User fill:#f9f9f9,stroke:#333
-```
+![llm_based_handoff](../assets/llm_based_handoff.png)
+
 
 ### Configuring Context-Based Handoffs
 
@@ -412,18 +403,8 @@ smartphone_agent.handoffs.add_context_conditions([
 
 These context-based handoffs check if `repeat_issue` is set to `True` in the context variables. When a user says their issue wasn't solved, the `check_repeat_issue` tool sets this flag, and the handoff condition triggers a transfer to advanced troubleshooting.
 
-```mermaid
-flowchart TD
-    Computer[Computer Agent] -->|"Context check: repeat_issue == True"| Advanced[Advanced Troubleshooting]
-    Computer ---->|"First-time issue"| User([User])
-    Smartphone[Smartphone Agent] ---->|"Context check: repeat_issue == True"| Advanced
-    Smartphone ---->|"First-time issue"| User
-
-    style Computer fill:#d1c4e9,stroke:#673ab7
-    style Smartphone fill:#bbdefb,stroke:#2196f3
-    style Advanced fill:#ffccbc,stroke:#e64a19
-    style User fill:#f9f9f9,stroke:#333
-```
+![context_based_handoff](../assets/context_based_handoff.png)
+
 
 ### Setting Default After-Work Behavior
 

website/docs/user-guide/advanced-concepts/orchestration/group-chat/introduction.mdx

@@ -116,26 +116,8 @@ The following diagram illustrates how the triage example unfolds. The user submi
 
 We are using the `AutoPattern` in this example, where the next speaker is automatically selected for based on the context of the conversation.
 
-```mermaid
-flowchart TD
-    User([User]) --> GroupManager[Group Manager]
+![groupchat_manager](../assets/groupchat_manager.png)
 
-    GroupManager -->  Triage[Triage Agent]
-    Triage -->  GroupManager
-
-    GroupManager -->  Tech[Tech Agent]
-    Tech -->  GroupManager
-
-    GroupManager -->  General[General Agent]
-    General -->  GroupManager
-
-    GroupManager -->  User
-
-    style GroupManager fill:#ffebee,stroke:#f44336
-    style Triage fill:#e1f5fe,stroke:#0288d1
-    style Tech fill:#f1f8e9,stroke:#689f38
-    style General fill:#fce4ec,stroke:#d81b60
-```
 
 ### Complete Code Example
 

website/docs/user-guide/advanced-concepts/orchestration/group-chat/patterns.mdx

@@ -34,6 +34,8 @@ The `DefaultPattern` gives you complete control over the conversation flow throu
 
 With DefaultPattern, we need to explicitly define the handoffs between agents:
 
+![DefaultPattern chat](../assets/default_pattern_process.png)
+
 ```python hl_lines="10-22"
 # Configure the pattern
 pattern = DefaultPattern(
@@ -155,6 +157,8 @@ The AutoPattern uses an LLM to intelligently select the next speaker based on th
 
 Setting up the AutoPattern is simpler since it doesn't require explicit handoffs:
 
+![AutoPattern chat](../assets/autopattern_process.png)
+
 ```python
 pattern = AutoPattern(
     initial_agent=triage_agent,
@@ -242,6 +246,8 @@ The RoundRobinPattern creates a predictable rotation where agents speak in the e
 
 Setting up the RoundRobinPattern focuses on the order of agents:
 
+![RoundRobinPattern chat](../assets/round_robin_process.png)
+
 ```python
 pattern = RoundRobinPattern(
     initial_agent=triage_agent,
@@ -343,6 +349,8 @@ The RandomPattern adds an element of unpredictability by randomly selecting the
 
 Setting up the RandomPattern:
 
+![RandomPattern chat](../assets/randompattern_process.png)
+
 ```python
 pattern = RandomPattern(
     initial_agent=triage_agent,
@@ -419,6 +427,8 @@ The ManualPattern puts you in control by always reverting to the user agent afte
 
 Setting up the ManualPattern:
 
+![manualpattern chat](../assets/manualpattern_process.png)
+
 ```python
 pattern = ManualPattern(
     initial_agent=triage_agent,

website/docs/user-guide/advanced-concepts/orchestration/nested-chat.mdx

@@ -24,10 +24,13 @@ Here is an example of a nested chat where a single agent, `lead_teacher_agent` e
 
 The end result is that when this agent is called to reply in a chat it will, internally, run through a workflow using the nested chats and a fully considered lesson plan will be returned as its reply.
 
+![Nested chat](../assets/nested_chats_process.png)
+
 import Example from "/snippets/python-examples/nestedchat.mdx";
 
 <Example/>
 
+
 ### Benefits and Further Resources
 
 Nested chat is a useful conversation pattern that allows you to package complex workflows into a single agent.

website/docs/user-guide/advanced-concepts/orchestration/orchestrations.mdx

@@ -6,12 +6,16 @@ sidebarTitle: Overview
 Many hands make for light work and orchestrating workflows containing many agents is a strength of the AG2 framework.
 
 1. **Two-agent chat**: The simplest form of conversation pattern where two agents chat back-and-forth with each other.
+![Two-agent chat](../assets/two-agent-chat.png)
 
 2. **Sequential chat**: A sequence of chats, each between two agents, chained together by a carryover mechanism (which brings the summary of the previous chat to the context of the next chat). Useful for simple sequential workflows.
+![Sequential chat](../assets/sequential-two-agent-chat.png)
 
 3. **Group chat**: A chat with more than two agents with options on how agents are selected.
+![GroupChat](../assets/group-chat.png)
 
-3. **Nested chat**: A mechanism to package a workflow into a single agent/chat for reuse in a workflow.
+4. **Nested chat**: A mechanism to package a workflow into a single agent/chat for reuse in a workflow.
+![Nested chat](../assets/nested-chats.png)
 
 
 <Warning>

website/docs/user-guide/advanced-concepts/orchestration/sequential-chat.mdx

@@ -26,10 +26,14 @@ A teacher agent will engage three agents sequentially:
 2. A lesson planner will design the lesson with two iterations given feedback from the teacher
 3. A formatter will format the lesson
 
+![Sequential chat](../assets/sequential_process.png)
+
 import Example from "/snippets/python-examples/sequentialchat.mdx";
 
 <Example/>
 
+
+
 ### Customizing Chat Behavior
 
 The sequential chat is triggered by the teacher agent's [`initiate_chats`](/docs/api-reference/autogen/ConversableAgent#initiate-chats) method, which takes a list of dictionaries where each dictionary represents a chat between the teacher and the `recipient` agent.

website/docs/user-guide/advanced-concepts/orchestration/two-agent-chat.mdx

@@ -21,6 +21,8 @@ Once the chat terminates, the history of the chat is processed by a chat summari
 
 The example below is a two-agent chat between a student agent and a teacher agent. Its summarizer uses an LLM-based summary.
 
+![Two-agent chat Process](../assets/two_agent_chat.png)
+
 ```python
 import os
 

website/docs/user-guide/advanced-concepts/orchestrations.mdx

@@ -6,12 +6,16 @@ sidebarTitle: Overview
 Many hands make for light work and orchestrating workflows containing many agents is a strength of the AG2 framework.
 
 1. **Two-agent chat**: The simplest form of conversation pattern where two agents chat back-and-forth with each other.
+![Two-agent chat](./assets/two-agent-chat.png)
 
 2. **Sequential chat**: A sequence of chats, each between two agents, chained together by a carryover mechanism (which brings the summary of the previous chat to the context of the next chat). Useful for simple sequential workflows.
+![sequential chats](./assets/sequential-two-agent-chat.png)
 
 3. **Group chat**: A chat with more than two agents with options on how agents are selected.
+![Group chat](./assets/group-chat.png)
 
 3. **Nested chat**: A mechanism to package a workflow into a single agent/chat for reuse in a workflow.
+![Nested chat](./assets/nested-chats.png)
 
 
 <Warning>

website/docs/user-guide/advanced-concepts/pattern-cookbook/context_aware_routing.mdx

@@ -99,6 +99,8 @@ sequenceDiagram
     Note over User, ToolExecutor: Context-aware routing sends each query to the most appropriate specialist based on content analysis
 ```
 
+![context aware example](./assets/context_aware_example.png)
+
 ## Code
 
 <Tip>

website/docs/user-guide/advanced-concepts/pattern-cookbook/escalation.mdx

@@ -96,6 +96,8 @@ sequenceDiagram
     Note over User: The escalation pattern efficiently routed<br>complex questions to advanced agents<br>while handling simple questions<br>with the most efficient agent
 ```
 
+![escalation example](./assets/escalation_example.png)
+
 ## Code
 
 <Tip>

website/docs/user-guide/advanced-concepts/pattern-cookbook/feedback_loop.mdx

@@ -89,6 +89,9 @@ sequenceDiagram
     Note over User,ToolExecutor: The feedback loop pattern enabled multiple refinement iterations
 ```
 
+![feedback loop example](./assets/feedback_loop_example.png)
+
+
 ## Code
 
 <Tip>