Update Inline Agent Documentation with latest UI changes

[dan-niles]

Purpose

Resolves wso2/product-ballerina-integrator#2161

This PR updates the Inline Agent Documentation in https://bi.docs.wso2.com/integration-guides/ai/agents/introduction-to-inline-agents/ to include screenshots/gifs with the latest UI changes.

Summary by CodeRabbit

• Documentation
  • Updated AI agent integration guide with refreshed UI terminology and field labels (e.g., "Base path" instead of "Service base path")
  • Clarified GraphQL service configuration and resolver construction workflow steps
  • Added explicit save procedures after agent configuration
  • Updated visual guides and illustrations to reflect current implementation flow

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Documentation updates to reflect UI terminology changes, workflow modifications, and new visual guides. Changes include updated field labels (e.g., "Base path" and "Port"), resolver construction flow shifts from "Statement → Agent" to "AI section → Agent," and replacement of illustrations with updated GIFs.

Changes

Cohort / File(s)	Summary
Documentation Update en/docs/integration-guides/ai/agents/introduction-to-inline-agents.md	Updated prerequisites and step instructions with new UI terminology ("WSO2 Integrator: BI" icon, "Select Path"), GraphQL service creation labels ("Base path" and "Port"), resolver construction flow ("AI section → Agent" with expression-based input), new resolver implementation GIFs, explicit Save step, and response variable instructions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify UI terminology accuracy and alignment with current application interface
• Confirm step sequence reflects the actual workflow in the updated UI
• Validate GIF references are correct and visually represent the described processes

Poem

🐰 The docs hop along with a gleeful stride,
UI tweaks and new paths open wide,
Agents now dance through the AI section's glow,
With GIFs that show how the resolvers flow! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description provides the purpose and links to the resolving issue, but lacks most other required template sections like Goals, Approach, User stories, Release note, Documentation, Training, Certification, Marketing, Testing, Security, Samples, and Test environment.	Complete the PR description by adding missing sections from the template, particularly Goals, Approach (with details on UI changes), User stories, Release note, and Documentation sections.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: updating documentation for inline agents to reflect latest UI changes.
Linked Issues check	✅ Passed	The PR updates documentation with new screenshots and GIFs reflecting latest UI changes in inline agent workflow, directly fulfilling issue #2161's requirement to update the introduction-to-inline-agents page.
Out of Scope Changes check	✅ Passed	All changes are within scope: the PR modifies only the inline agent documentation file to reflect UI updates, matching the linked issue's objective without introducing unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

en/docs/integration-guides/ai/agents/introduction-to-inline-agents.md (2)

42-44: Reduce repetitive sentence starters in Step 4.

Lines 42–44 begin three consecutive sentences with "Click," reducing readability and flow. Consider restructuring to vary the starters.

🔎 Proposed revision

  1. Click the created `task` operation in the side panel to navigate to the resolver editor view.
  2. In the flow, click the **+** button to open the side panel.
  3. Under the **AI** section, select **Agent**, which navigates you to the agent creation panel.

---

40-57: Step 4 numbering is unconventional; clarify the flow structure.

The step structure (numbered 1–7, then a GIF, then 8–10) is atypical. While the intent is clear (showing resolver configuration in two stages), consider adding a transitional phrase or subheading to make it explicit that the GIF at line 50 captures steps 1–7, and steps 8–10 continue the configuration.

For example:

... 
7. Click **Save**.

*The following animation illustrates steps 1–7 above:*

[GIF at line 50]

8. Next, configure the agent's memory...

This improves clarity for readers following the steps linearly.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a2f4ca5 and d6aa9d7.

⛔ Files ignored due to path filters (5)

• en/docs/assets/img/integration-guides/ai/agents/introduction-to-inline-agents/inline-agent-create-a-graphql-resolver.gif is excluded by !**/*.gif
• en/docs/assets/img/integration-guides/ai/agents/introduction-to-inline-agents/inline-agent-create-a-graphql-service.gif is excluded by !**/*.gif
• en/docs/assets/img/integration-guides/ai/agents/introduction-to-inline-agents/inline-agent-create-a-new-integration-project.gif is excluded by !**/*.gif
• en/docs/assets/img/integration-guides/ai/agents/introduction-to-inline-agents/inline-agent-implement-resolver.gif is excluded by !**/*.gif
• en/docs/assets/img/integration-guides/ai/agents/introduction-to-inline-agents/inline-agent-return-response.gif is excluded by !**/*.gif

📒 Files selected for processing (1)

• en/docs/integration-guides/ai/agents/introduction-to-inline-agents.md

🧰 Additional context used

🪛 LanguageTool

en/docs/integration-guides/ai/agents/introduction-to-inline-agents.md

[style] ~44-~44: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... in the flow to open the side panel. 3. Click Agent under the AI section, whi...

(ENGLISH_WORD_REPEAT_BEGINNING_RULE)

🔇 Additional comments (1)

en/docs/integration-guides/ai/agents/introduction-to-inline-agents.md (1)

11-57: Documentation updates align well with PR objectives.

The terminology and workflow changes reflect the latest UI accurately:

• Correct field labels ("Base path" and "Port" instead of older names)
• Accurate workflow shift to "AI section → Agent"
• Proper handling of expression-mode input for the Query field
• Updated GIF assets matching the new flow

The documentation effectively communicates how inline agents integrate with GraphQL resolvers.