Added copilot view API for closing the side panel (#2856)

* Added new copilot view apis.

* Added copilot APIs in teams test app for E2E testing.

* Added unit tests for close side panel.

* Added new rendering surfaces values.

* Increased 7 bytes the size limit for teams-js.

* Fix pr comments.

Author: juanscr

apps/teams-test-app/src/components/privateApis/CopilotAPIs.tsx

@@ -110,6 +110,27 @@ const CopilotAPIs = (): ReactElement => {
       },
     });
 
+  const CheckCopilotViewCapability = (): ReactElement =>
+    ApiWithoutInput({
+      name: 'checkCopilotViewCapability',
+      title: 'Check if Copilot.View is supported',
+      onClick: async () => `Copilot.View module ${copilot.view.isSupported() ? 'is' : 'is not'} supported`,
+    });
+
+  const CloseSidePanel = (): ReactElement =>
+    ApiWithoutInput({
+      name: 'closeSidePanel',
+      title: 'Close Side Panel',
+      onClick: async () => {
+        try {
+          await copilot.view.closeSidePanel();
+          return 'copilot.view.closeSidePanel() was called';
+        } catch (error) {
+          return `Error: ${error}`;
+        }
+      },
+    });
+
   return (
     <>
       <ModuleWrapper title="Copilot.Eligibility">
@@ -126,6 +147,10 @@ const CopilotAPIs = (): ReactElement => {
         <GetContent />
         <PreCheckUserConsent />
       </ModuleWrapper>
+      <ModuleWrapper title="Copilot.View">
+        <CheckCopilotViewCapability />
+        <CloseSidePanel />
+      </ModuleWrapper>
     </>
   );
 };

change/@microsoft-teams-js-2ec9c5d0-0fdb-45a7-9c57-58e8b99969c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added view copilot API with function to close the side panel.",
+  "packageName": "@microsoft/teams-js",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -162,7 +162,7 @@
       "brotli": false,
       "path": "./packages/teams-js/dist/esm/packages/teams-js/src/index.js",
       "import": "{ app, authentication, pages }",
-      "limit": "57.60 KB"
+      "limit": "57.67 KB"
     },
     {
       "brotli": false,

packages/teams-js/src/internal/telemetry.ts

@@ -113,6 +113,7 @@ export const enum ApiName {
   Copilot_SidePanel_RegisterOnUserConsentChange = 'copilot.sidePanel.registerOnUserConsentChange',
   Copilot_SidePanel_GetContent = 'copilot.sidePanel.getContent',
   Copilot_SidePanel_PreCheckUserConsent = 'copilot.sidePanel.preCheckUserConsent',
+  Copilot_View_CloseSidePanel = 'copilot.view.closeSidePanel',
   Dialog_AdaptiveCard_Bot_Open = 'dialog.adaptiveCard.bot.open',
   Dialog_AdaptiveCard_Open = 'dialog.adaptiveCard.open',
   Dialog_RegisterMessageForChildHandler = 'dialog.registerMessageForChildHandler',

packages/teams-js/src/private/copilot/copilot.ts

@@ -1,5 +1,6 @@
 import * as customTelemetry from './customTelemetry';
 import * as eligibility from './eligibility';
 import * as sidePanel from './sidePanel';
+import * as view from './view';
 
-export { customTelemetry, eligibility, sidePanel };
+export { customTelemetry, eligibility, sidePanel, view };

packages/teams-js/src/private/copilot/view.ts

@@ -0,0 +1,50 @@
+import { callFunctionInHostAndHandleResponse } from '../../internal/communication';
+import { ensureInitialized } from '../../internal/internalAPIs';
+import { ResponseHandler } from '../../internal/responseHandler';
+import { ApiName, ApiVersionNumber, getApiVersionTag } from '../../internal/telemetry';
+import { runtime } from '../../public/runtime';
+
+const copilotTelemetryVersionNumber: ApiVersionNumber = ApiVersionNumber.V_2;
+
+/**
+ * @hidden
+ * @internal
+ * Limited to Microsoft-internal use
+ * @beta
+ * @returns boolean to represent whether copilot.view capability is supported
+ *
+ * @throws Error if {@linkcode app.initialize} has not successfully completed
+ */
+export function isSupported(): boolean {
+  return ensureInitialized(runtime) && !!runtime.supports.copilot?.view;
+}
+
+/**
+ * Closes the side panel that is hosting the copilot app.
+ *
+ * @throws { Error } - Throws a Error if host SDK returns an error as a response to this call
+ *
+ * @hidden
+ * @beta
+ * @internal
+ * Limited to Microsoft-internal use
+ */
+export async function closeSidePanel(): Promise<void> {
+  ensureInitialized(runtime);
+  await callFunctionInHostAndHandleResponse(
+    ApiName.Copilot_View_CloseSidePanel,
+    [],
+    new CloseSidePanelResponseHandler(),
+    getApiVersionTag(copilotTelemetryVersionNumber, ApiName.Copilot_View_CloseSidePanel),
+  );
+}
+
+class CloseSidePanelResponseHandler extends ResponseHandler<Record<string, never>, Record<string, never>> {
+  public validate(_response: Record<string, never>): boolean {
+    return true;
+  }
+
+  public deserialize(response: Record<string, never>): Record<string, never> {
+    return response;
+  }
+}

packages/teams-js/src/public/constants.ts

@@ -112,9 +112,17 @@ export enum FrameContexts {
  */
 export enum RenderingSurfaces {
   /**
-   * The mode the copilot app rendered by the host.
+   * Copilot running as a side panel in the host application.
    */
   copilotSidePanel = 'copilotSidePanel',
+  /**
+   * Copilot running in the main pane of the host application.
+   */
+  copilotMainPane = 'copilotMainPane',
+  /**
+   * Copilot running in full screen mode as an embedded app in the host application.
+   */
+  copilotFullScreen = 'copilotFullScreen',
 }
 
 /**

packages/teams-js/src/public/runtime.ts

@@ -240,6 +240,7 @@ interface IRuntimeV4 extends IBaseRuntime {
       readonly customTelemetry?: {};
       readonly eligibility?: {};
       readonly sidePanel?: {};
+      readonly view?: {};
     };
     readonly dialog?: {
       readonly card?: {

packages/teams-js/test/private/copilot.spec.ts

@@ -652,4 +652,52 @@ describe('copilot', () => {
       });
     });
   });
+
+  describe('copilot.view', () => {
+    describe('isSupported', () => {
+      it('should throw if called before initialization', () => {
+        expect.assertions(1);
+        utils.uninitializeRuntimeConfig();
+        expect(() => copilot.view.isSupported()).toThrowError(new Error(errorLibraryNotInitialized));
+      });
+
+      it('should return false if view is not supported in runtimeConfig', async () => {
+        expect.assertions(1);
+        await utils.initializeWithContext(FrameContexts.content);
+        utils.setRuntimeConfig(_minRuntimeConfigToUninitialize);
+        expect(copilot.view.isSupported()).toBe(false);
+      });
+
+      it('should return true if view is supported in runtimeConfig', async () => {
+        expect.assertions(1);
+        await utils.initializeWithContext(FrameContexts.content);
+        const runtimeWithView = {
+          ..._minRuntimeConfigToUninitialize,
+          supports: {
+            ..._minRuntimeConfigToUninitialize.supports,
+            copilot: { view: {} },
+          },
+        };
+        utils.setRuntimeConfig(runtimeWithView);
+        expect(copilot.view.isSupported()).toBe(true);
+      });
+    });
+
+    describe('closeSidePanel', () => {
+      it('should throw if called before initialization', async () => {
+        expect.assertions(1);
+        utils.uninitializeRuntimeConfig();
+        await expect(copilot.view.closeSidePanel()).rejects.toThrowError(new Error(errorLibraryNotInitialized));
+      });
+
+      it('should call the closeSidePanel API if supported', async () => {
+        expect.assertions(1);
+        await utils.initializeWithContext(FrameContexts.content);
+        utils.setRuntimeConfig(copilotRuntimeConfig);
+        copilot.view.closeSidePanel();
+        const message = utils.findMessageByFunc('copilot.view.closeSidePanel');
+        expect(message).not.toBeNull();
+      });
+    });
+  });
 });