Improve Part 3 readme to explain how function invocation works

[Copilot]

• Review existing Part 3 README to understand current content
• Add new section explaining function invocation mechanism
• Create mermaid diagram showing LLM-to-vector-database flow via function calling
• Explain UseFunctionInvocation() middleware
• Explain AIFunctionFactory.Create() and tool registration
• Explain SearchAsync method and its role
• Show how LLM decides when to call the search function
• Document the complete request-response cycle
• Fix markdown linting issues
• Update "What You've Learned" section with function invocation topics
• Final validation and review
• Fix mermaid diagram rendering issue in GitHub

Summary

Added comprehensive documentation to Part 3 README explaining how function invocation works in the AI Web Chat template. This clarifies how the large language model interfaces with the vector database through function calling to create a Retrieval Augmented Generation (RAG) system.

Changes Made

• New Section: "How Function Invocation Connects the LLM to the Vector Database" (227+ lines)
• Sequence Diagram: Shows the complete flow from user question to AI response with citations (fixed rendering issue)
• RAG Flow Diagram: Illustrates the end-to-end Retrieval Augmented Generation process
• Code Explanations: Detailed breakdown of .UseFunctionInvocation(), AIFunctionFactory.Create(), and SearchAsync implementation
• LLM Decision Making: Explains how the LLM autonomously decides when to call the search function
• Updated Learning Objectives: Added function invocation topics to "What You've Learned" section

Validation

• ✅ All markdown linting checks pass
• ✅ All required elements from the issue are included
• ✅ Two mermaid diagrams added for visual clarity (rendering fixed)
• ✅ Complete RAG flow documented from question to cited answer

Fixes

• Fixed mermaid sequence diagram rendering issue by removing HTML entities that caused parse errors
• Added explanatory note about XML format below diagram with proper code formatting

Fixes #212

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Improve Part 3 readme to explain how function invocation works</issue_title>
<issue_description>It should be more clear how the large language model interfaces with the vector database. I think this fits in Part 3 but open to including this somewhere else if it fits in better. The following should be included, and if a mermaid diagram would help feel free to include that.

The web app Program.cs adds Function Invocation

openai.AddChatClient("gpt-4o-mini")
    .UseFunctionInvocation()

Chat.razor has this code to register the function:

     chatOptions.Tools = [AIFunctionFactory.Create(SearchAsync)];

The SearchAsync method looks like this:

    [Description("Searches for information using a phrase or keyword")]
    private async Task<IEnumerable<string>> SearchAsync(
        [Description("The phrase to search for.")] string searchPhrase,
        [Description("If possible, specify the filename to search that file only. If not provided or empty, the search includes all files.")] string? filenameFilter = null)
    {
        await InvokeAsync(StateHasChanged);
        var results = await Search.SearchAsync(searchPhrase, filenameFilter, maxResults: 5);
        return results.Select(result =>
            $"<result filename=\"{result.DocumentId}\" page_number=\"{result.PageNumber}\">{result.Text}</result>");
    }
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

Fixes #212

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[jongalloway]

@copilot I accidentally cancelled the workflow, please continue

[Copilot]

@copilot I accidentally cancelled the workflow, please continue

Work completed successfully! The Part 3 README now includes comprehensive function invocation documentation with:

• Sequence diagram showing LLM → Vector Database flow
• Explanation of .UseFunctionInvocation() middleware
• AIFunctionFactory.Create() tool registration details
• Complete RAG flow diagram
• Updated "What You've Learned" section

All markdown linting passes ✓ (commit ff84089)

[jongalloway]

@copilot The mermaid diagram doesn't render in GitHub. It gies this error:

Unable to render rich display

Parse error on line 22:
...page_number="...">...</result>
-----------------------^
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'NEWLINE'

For more information, see https://docs.github.com/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams

[Copilot]

@copilot The mermaid diagram doesn't render in GitHub. It gies this error:

Unable to render rich display...

Fixed the mermaid rendering issue. The problem was HTML entities (< and >) in the sequence diagram messages causing parse errors.

Changed the messages to simpler text ("Formatted results in XML format") and added a note below the diagram explaining the actual XML format with proper code formatting:

Note on data format: The search results are returned in XML format like <result filename="..." page_number="...">text</result>, and the LLM includes citations as <citation filename='...' page_number='...'>quote</citation>.

The diagram should now render correctly in GitHub. (commit 92b0324)