feat: Add agent parameters section to API method documentation

- Introduced new properties for agent parameters and their visibility toggle.
- Implemented logic to compute agent parameters based on the method.
- Added rendering functionality for the agent parameters section in the documentation.
- Created unit tests to validate the agent parameters behavior and rendering.

Author: alexpmule

src/ApiMethodDocumentation.js

@@ -211,6 +211,14 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
        * When set it hides bottom navigation links
        */
       noNavigation: { type: Boolean },
+      /**
+       * When set it renders the agent parameters section
+       */
+      _agentOpened: { type: Boolean },
+      /**
+       * Computed list of agent parameters.
+       */
+      agentParameters: { type: Object },
       /**
        * When set the base URI won't be rendered for this method.
        */
@@ -366,6 +374,8 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     this.renderCodeSnippets = false;
     this.deprecated = false;
     this.selectedMessage = null;
+    this.agentParameters = undefined;
+    this._agentOpened = false;
 
     this.previous = undefined;
     this.next = undefined;
@@ -463,6 +473,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     this.operationId = this._getValue(method, this.ns.aml.vocabularies.apiContract.operationId);
     this.callbacks = this._computeCallbacks(method);
     this.deprecated = this._computeIsDeprecated(method);
+    this.agentParameters = this._computeAgentParameters(method);
   }
 
   _computeAsyncApiSecurity(){
@@ -683,6 +694,13 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     this.callbacksOpened = !this.callbacksOpened;
   }
 
+  /**
+   * Toggles agent parameters section.
+   */
+  _toggleAgent() {
+    this._agentOpened = !this._agentOpened;
+  }
+
   /**
    * Computes example headers string for code snippets.
    * @param {any|any[]} headers Headers model from AMF
@@ -1095,6 +1113,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
       ${this._getAsyncSecurityMethodTemplate()}
       ${this._getMessagesTemplate()}
       ${this._getCodeSnippetsTemplate()}
+      ${this._getAgentTemplate()}
       ${this._getSecurityTemplate()}
       ${this._getParametersTemplate()}
       ${this._getHeadersTemplate()}
@@ -1103,6 +1122,42 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     </section>`
   }
 
+  _getAgentTemplate() {
+    const { agentParameters } = this;
+    if (!agentParameters || Object.keys(agentParameters).length === 0) {
+      return '';
+    }
+    const { _agentOpened, compatibility } = this;
+    const label = this._computeToggleActionLabel(_agentOpened);
+    const buttonState = this._computeToggleButtonState(_agentOpened);
+    const iconClass = this._computeToggleIconClass(_agentOpened);
+    return html`<section class="agent-parameters">
+      <div
+        class="section-title-area"
+        @click="${this._toggleAgent}"
+        title="Toggle agent parameters"
+        ?opened="${_agentOpened}"
+      >
+        <div class="heading3 table-title" role="heading" aria-level="2">Agent parameters</div>
+        <div class="title-area-actions" aria-label="${buttonState}">
+          <anypoint-button class="toggle-button" ?compatibility="${compatibility}" data-toggle="agent-parameters">
+            ${label}
+            <arc-icon class="icon ${iconClass}" icon="expandMore"></arc-icon>
+          </anypoint-button>
+        </div>
+      </div>
+      <anypoint-collapse .opened="${_agentOpened}">
+        <div class="parameters-container">
+        ${Object.keys(agentParameters).map((key) => html`
+          <div class="property-item">
+            <div class="property-name">${key}: <strong>${String(agentParameters[key])}</strong></div>
+          </div>
+        `)}
+        </div>
+      </anypoint-collapse>
+    </section>`;
+  }
+
   _getAsyncSecurityMethodTemplate() {
     const { renderSecurity, methodSecurity } = this;
     if (!renderSecurity || !methodSecurity || !methodSecurity.length || !this._isAsyncAPI(this.amf)) {
@@ -1332,6 +1387,49 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     return undefined;
   }
 
+  _computeAgentParameters(method) {
+    if (!method) {
+      return undefined;
+    }
+
+    const expect = this._computeExpects(method);
+    if (!expect) {
+      return undefined;
+    }
+    const payloads = this._computePayload(expect);
+    if (!payloads || payloads.length === 0) {
+      return undefined;
+    }
+
+    const ramlSchemaKey = this._getAmfKey(this.ns.aml.vocabularies.shapes.schema);
+    const schema = payloads[0][ramlSchemaKey];
+    if (!schema) {
+      return undefined;
+    }
+
+    const agentObject = this._computeAgents(schema[0]);
+    if (!agentObject) {
+      return undefined;
+    }
+    const actionKey = this._getAmfKey(this.ns.aml.vocabularies.data.action);
+    const action = agentObject[0][actionKey];
+    if (!action) {
+      return undefined;
+    }
+    const isUserInputKey = this._getAmfKey(this.ns.aml.vocabularies.data.isUserInput);
+    const isUserInput = action[0][isUserInputKey];
+    if (!isUserInput) {
+      return undefined;
+    }
+    const isInputEnabled = this._getValue(isUserInput[0], this.ns.aml.vocabularies.data.value);
+
+    const params = {
+      isInputEnabled,
+    };
+
+    return params;
+  }
+
   /**
    * Returns message value depending on operation node method
    * Subscribe -> returns

test/agent-params.test.js

@@ -0,0 +1,44 @@
+import { fixture, assert, html, aTimeout } from '@open-wc/testing';
+import { AmfLoader } from './amf-loader.js';
+import '../api-method-documentation.js';
+
+describe('agent-api', function() {
+  async function modelFixture(amf, endpoint, method) {
+    return (await fixture(html`<api-method-documentation
+      .amf="${amf}"
+      .endpoint="${endpoint}"
+      .method="${method}"></api-method-documentation>`));
+  }
+
+  const apiFile = 'agents-api';
+
+  [
+    ['Compact model V1', true],
+    ['Regular model V1', false]
+  ].forEach(([label, compact]) => {
+    describe(label, () => {
+      let amf;
+      let element;
+      before(async () => {
+        amf = await AmfLoader.load(apiFile, compact);
+      });
+
+      it('isInputEnabled is true', async () => {
+        const endpopint = AmfLoader.lookupEndpoint(amf, '/reservations/reservationlookup');
+        const method = AmfLoader.lookupOperation(amf, '/reservations/reservationlookup', 'get');
+        element = await modelFixture(amf, endpopint, method);
+        await aTimeout();
+        assert.equal(element.agentParameters.isInputEnabled, 'true');
+      });
+
+      it('renders the summary', async () => {
+        const endpopint = AmfLoader.lookupEndpoint(amf, '/reservations/reservationlookup');
+        const method = AmfLoader.lookupOperation(amf, '/reservations/reservationlookup', 'get');
+        element = await modelFixture(amf, endpopint, method);
+        await aTimeout();
+        const node = element.shadowRoot.querySelector('.summary');
+        assert.ok(node);
+      });
+    });
+  });
+});