](./images/sidepane-welcome.png) | [
](./images/sidepane-conversation.png) | [
](./images/sidepane-agent-activity.png) |
-2. **Azure Portal Access**
- - Required for creating and configuring app registrations
- - Permissions to create new app registrations in your Azure AD tenant
+## Features
-3. **SharePoint Administrator Access**
- - Required to deploy the SPFx extension to the app catalog
+- **Agent compatibility:** works with both GHCP and standard harness agents. Configure the environment ID and agent schema name; no harness-selection setting is needed.
+- **Microsoft sign-in:** try silent authentication with the current SharePoint user's account, then offer a **Sign in** button when interaction is required or the silent iframe times out.
+- **Clean Fluent panel:** responsive sizing, site theme integration, accessible controls, Escape/light-dismiss, and focus restoration.
+- **Choose the opening experience:** default to native Fluent starter cards without starting a conversation, or opt into the agent's conversation-start flow instead.
+- **Local attachments:** WebChat's native picker, drag-and-drop, clipboard files/images, multiple attachments, previews, and removal.
+- **Optional agent activity:** independently enable client-visible reasoning and tool activity. Both are hidden by default.
+- **Existing WebChat features:** Markdown, cards, suggested replies, typing, and streamed responses remain available.
+- **Launcher:** an icon-only Copilot Studio button opens the agent from SharePoint's supported Top placeholder, below the Microsoft 365 suite header. The sample does not inject elements into the suite header or override SharePoint's built-in Copilot button.
+- **Conversation lifecycle:** the single collapse chevron hides the panel while preserving the conversation; **New conversation** (the circular refresh arrow) clears its messages, pending files, and activity details, then follows the configured opening experience.
-4. **Development Environment**
- - Node.js v22 (as per SPFx 1.21.1 requirements)
- - npm or yarn package manager
- - Git for cloning the repository
+There is no SharePoint/OneDrive picker, voice integration, or cross-page conversation persistence in this sample.
-## Technical Architecture
+## Prerequisites
-This solution uses:
-- **[Microsoft 365 Agents SDK for NodeJS/TypeScript](https://github.com/microsoft/Agents-for-js)**: Provides secure connection and authentication handling for Copilot Studio agents
-- **[BotFramework-WebChat with Fluent UI Theme](https://github.com/microsoft/BotFramework-WebChat#experimental-fluent-ui-theme-pack)**: Renders the chat interface with Microsoft 365 styling
-- **SharePoint Framework**: Enables deployment as a site-wide extension
-- **[Tenant Graph Grounding](https://learn.microsoft.com/en-us/microsoft-copilot-studio/knowledge-copilot-studio#tenant-graph-grounding)**: Allows the agent to search and access Microsoft 365 content
+- A published Copilot Studio agent accessible to the signed-in user, configured to [authenticate with Microsoft](https://learn.microsoft.com/en-us/microsoft-copilot-studio/configuration-end-user-authentication#authenticate-with-microsoft).
+- Access to create or use an Entra single-page application registration, and consent for delegated `CopilotStudio.Copilots.Invoke`.
+- A modern SharePoint site for local sideloading. An app catalog and deployment permissions are only needed for packaged installation.
+- Node.js **22.14 or later within v22**, npm, and the SPFx 1.21.1 toolchain.
+- For file analysis, an agent/runtime that accepts uploaded files. For standard-harness agents, enable **Settings > Generative AI > File processing capabilities > File uploads**.
+- For activity details, an agent that provides reasoning or tool activity to its users. Enabling a UI flag does not make an agent provide additional activity.
-## Setup Instructions
+## How it works
-### Step 1: Configure App Registration
+The Application Customizer adds a Copilot Studio launcher to SharePoint's supported Top placeholder. Opening it displays a Fluent chat panel that follows the site's theme and signs users in with Microsoft.
-This step requires permissions to create application identities in your Azure tenant. For this sample, create a Native Client Application Identity (no secrets required):
+By default, the panel shows a welcome screen and starter cards; the agent conversation begins when the user sends a message. Set `startConversation: true` to use the agent's own welcome flow instead.
-1. **Open Azure Portal**
- - Navigate to [portal.azure.com](https://portal.azure.com)
- - Go to **Azure Active Directory** (Entra ID)
+Both GHCP and standard harness agents use the same panel and configuration. File attachments and optional reasoning/tool activity are available when supported by the configured agent. Collapsing the panel preserves the current conversation; **New conversation** clears it.
-2. **Create a new App Registration**
- - Click **App registrations** → **New registration**
- - Provide a **Name** (e.g., "SharePoint Copilot Studio Agent")
- - Choose **"Accounts in this organization directory only"**
- - Under **Redirect URI**:
- - Select **"Single-page application"** from the platform dropdown
- - Enter your first SharePoint site URL without the trailing slash (e.g., `https://contoso.sharepoint.com/sites/mysite`)
- - Click **Register**
+The unmodified Copilot Studio SVG is from [Microsoft's official icon collection](https://learn.microsoft.com/en-us/power-platform/guidance/icons) and is included for this sample/training experience. Microsoft's separate icon usage terms apply; review them before reusing the logo in a production application.
-3. **Configure Authentication - Add SharePoint URLs**
- - Go to **Authentication** in the Manage section
- - Under **Single-page application**, add redirect URIs:
- - `https://localhost:4321` (only if you plan to test locally - this is the default SPFx port)
- - For each SharePoint site where you'll deploy the extension, add:
- - The site URL **without** trailing slash (e.g., `https://contoso.sharepoint.com/sites/mysite`)
- - Under **Implicit grant and hybrid flows**, ensure both checkboxes are **unchecked** (SPAs use PKCE flow)
- - Click **Save**
+## Setup
- **Example for multiple sites:**
- ```
- https://localhost:4321 (for local testing - default SPFx port)
- https://contoso.sharepoint.com/sites/hr
- https://contoso.sharepoint.com/sites/finance
- https://contoso.sharepoint.com/sites/it
- ```
+### 1. Configure Microsoft authentication
-4. **Configure API Permissions**
- - In your new application, go to **API Permissions** in the Manage section
- - Click **Add Permission**
- - In the side panel, click the **APIs my organization uses** tab
- - Search for **"Power Platform API"** or use the GUID `8578e004-a5c6-46e7-913e-12f58912df43`
- - Under **Delegated permissions**, expand **CopilotStudio** and check:
- - `CopilotStudio.Copilots.Invoke`
- - Click **Add Permissions**
- - (Optional) Click **Grant admin consent** for your organization
-
-5. **Note Required Values**
- - On the **Overview** page, copy and save:
- - **Application (client) ID** (e.g., `12345678-1234-1234-1234-123456789012`)
- - **Directory (tenant) ID** (e.g., `87654321-4321-4321-4321-210987654321`)
+1. In [Entra app registrations](https://portal.azure.com/), create or select an application for this sample. For a new registration, choose accounts in your organization. See [Register an application](https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-register-app) for the portal steps.
+2. Add a **Single-page application** redirect URI matching the SharePoint **site URL without a trailing slash**, for example `https://contoso.sharepoint.com/sites/my-site`.
+3. Add a redirect URI for each site where the extension will run. Do not enable implicit grant; MSAL uses authorization code with PKCE.
+4. Under **API permissions > Add a permission > APIs my organization uses**, find **Power Platform API** (`8578e004-a5c6-46e7-913e-12f58912df43`).
+5. Add delegated **CopilotStudio.Copilots.Invoke** and obtain consent as required by your tenant.
+6. Record the application/client ID and directory/tenant ID. **No client secret belongs in this application.**
{: .note }
-> If you don't see "Power Platform API" in the list, you need to add it to your tenant first. See [Power Platform API Authentication](https://learn.microsoft.com/en-us/power-platform/admin/programmability-authentication) and follow Step 2 to add the API.
+> The redirect URI is the SharePoint site even during local sideloading. Serving scripts from `https://localhost:4321` does not make localhost the sign-in redirect. MSAL caches authentication in session storage. If silent sign-in cannot complete, select **Sign in** to open a popup and complete any required MFA. The popup is opened from your click, without repeating the failed silent iframe request.
-### Step 2: Get Copilot Studio Configuration
+If Power Platform API is missing from your tenant, see [Power Platform API authentication](https://learn.microsoft.com/en-us/power-platform/admin/programmability-authentication).
-1. Open your Copilot Studio environment
-2. Navigate to your published agent
-3. Ensure the agent is configured with ['Authenticate with Microsoft'](https://learn.microsoft.com/en-us/microsoft-copilot-studio/configuration-end-user-authentication#authenticate-with-microsoft)
-4. Optionally enable [tenant graph grounding](https://learn.microsoft.com/en-us/microsoft-copilot-studio/knowledge-copilot-studio#tenant-graph-grounding) for Microsoft 365 content access
-5. Collect the required configuration values using one of these methods:
+### 2. Collect the agent settings
- **Option A: Get Direct Connect URL (Recommended)**
- - Go to **Channels** → **Web app**
- - Under **Microsoft 365 Agents SDK**, copy the **Connection string**
- - This will look like: `https://xxxxxxx.07.environment.api.powerplatform.com/...`
+In Copilot Studio, open the published agent's metadata and record its **environment ID** and **schema name**. Use the schema name, not the display name or agent GUID.
- **Option B: Get Environment ID and Agent Identifier**
- - Go to **Settings** → **Advanced** → **Metadata**
- - Copy the following values:
- - **Environment ID**
- - **Schema name** (this is your Agent Identifier, e.g., `cr770_myAgent`)
+Use the environment ID and schema name for the normal configuration. Leave `directConnectUrl` unset unless you need the advanced connection override retained for existing deployments.
-### Step 3: Clone the Repository
+### 3. Install dependencies
```bash
git clone https://github.com/microsoft/CopilotStudioSamples.git
cd CopilotStudioSamples/ui/embed/sharepoint-customizer
+npm install
```
-### Step 4: Configure the Extension
-
-1. Open `sharepoint/assets/elements.xml` in your editor
-2. Update the `ClientSideComponentProperties` with your values:
-
-```xml
-ClientSideComponentProperties="{
- "appClientId": "YOUR_APP_CLIENT_ID",
- "tenantId": "YOUR_TENANT_ID",
- "environmentId": "YOUR_ENVIRONMENT_ID",
- "agentIdentifier": "YOUR_AGENT_IDENTIFIER",
- "directConnectUrl": "YOUR_DIRECT_CONNECT_URL",
- "showTyping": true,
- "headerBackgroundColor": "white",
- "agentTitle": "Copilot Studio Agent"
-}"
+### 4. Create a local configuration
+
+Create `properties.local.json` in the sample directory. Files named `*.local.json` are gitignored.
+
+```json
+{
+ "appClientId": "YOUR_APP_CLIENT_ID",
+ "tenantId": "YOUR_TENANT_ID",
+ "environmentId": "YOUR_ENVIRONMENT_ID",
+ "schemaName": "YOUR_AGENT_SCHEMA_NAME",
+ "agentTitle": "Team assistant",
+ "startConversation": false,
+ "showTyping": true,
+ "enableFileUpload": true,
+ "showReasoning": false,
+ "showToolCalls": false,
+ "starterPrompts": [
+ { "title": "Get started", "text": "What can you help me with?" }
+ ]
+}
```
-**Configuration Options:**
+| Property | Required | Description / default |
+|----------|----------|-----------------------|
+| `appClientId` | Yes | Entra SPA application ID |
+| `tenantId` | Yes | Directory/tenant ID |
+| `environmentId` | For the default connection | Power Platform environment ID |
+| `schemaName` | For the default connection | Agent schema name |
+| `agentIdentifier` | No | Legacy alias for `schemaName`; canonical `schemaName` takes precedence |
+| `directConnectUrl` | No | Advanced HTTPS connection override; leave unset for the normal configuration |
+| `agentTitle` | No | `Copilot Studio Agent` |
+| `headerBackgroundColor` | No | Optional launcher-bar CSS color override; otherwise follows the site theme |
+| `startConversation` | No | `false`: show the local welcome/starter cards and wait for the first submitted message. `true`: start the agent's conversation immediately and hide the local welcome/starter cards |
+| `showTyping` | No | `true`; ordinary typing is independent of reasoning/tool visibility |
+| `enableFileUpload` | No | `true` |
+| `showReasoning` | No | `false` |
+| `showToolCalls` | No | `false` |
+| `starterPrompts` | No | Array of `{ "title": "...", "text": "..." }`, used only when `startConversation` is `false`; defaults to the **Get started** card above. Use `[]` for a welcome screen without starter cards |
-| Property | Required | Description | Default |
-|----------|----------|-------------|---------|
-| `appClientId` | Yes | Your Azure AD app registration client ID | - |
-| `tenantId` | Yes | Your Azure AD tenant ID | - |
-| `environmentId` | Conditional | Copilot Studio environment ID (required if not using directConnectUrl) | - |
-| `agentIdentifier` | Conditional | Your agent's identifier (required if not using directConnectUrl) | - |
-| `directConnectUrl` | Conditional | Direct connection URL (use this OR environmentId + agentIdentifier) | - |
-| `showTyping` | No | Show typing indicators | `true` |
-| `headerBackgroundColor` | No | Header bar color (accepts any CSS color value) | `white` |
-| `agentTitle` | No | Display title for the agent | `"Copilot Studio Agent"` |
+Use JSON booleans, not strings such as `"false"`. Keep tokens, passwords, client secrets, and browser state out of the configuration.
-{: .note }
-> You must provide either `directConnectUrl` OR both `environmentId` and `agentIdentifier`.
+Starter prompts are public extension configuration, not system instructions. They are not automatically retrieved from the agent's authoring settings. Native cards put the configured text into the composer and focus it; they do not send a message until the user submits. The two opening modes are mutually exclusive: with `startConversation: true`, the agent's own welcome flow runs instead, and its messages and suggested replies render normally.
-### Step 5: Test Locally (Optional)
+## Sideload on a real SharePoint page
-Before building and deploying, you can test the extension locally:
+Application Customizers must be tested on a **live modern SharePoint page**, not the local workbench. Debug sideloading does not require an app-catalog installation and does not create a persistent site customization.
-```bash
-# Install dependencies
-npm install
+1. Trust the SPFx development certificate if it is not already trusted:
-# Check if gulp is installed, if not, install it
-which gulp || npm install -g gulp-cli
-# On Windows, use: where gulp || npm install -g gulp-cli
+ ```bash
+ npx gulp trust-dev-cert
+ ```
-# Serve the solution locally
-gulp serve --nobrowser
-```
+2. Start the local HTTPS server and leave it running:
-After running `gulp serve`, navigate to the following URL (replace the values with your configuration):
+ ```bash
+ npm run serve
+ ```
+
+3. Confirm `https://localhost:4321/temp/build/manifests.js` loads in the review browser. Resolve certificate/local-network permission prompts normally; do not disable browser security.
+4. Generate a debug URL using an actual modern page URL from your site:
-{% raw %}
+ ```bash
+ npm run sideload -- \
+ "https://contoso.sharepoint.com/sites/my-site/" \
+ properties.local.json
+ ```
+
+5. Open the generated URL in your signed-in browser and select **Load debug scripts**. Open the agent from the launcher.
+
+The helper preserves existing query parameters and encodes `customActions` safely. It uses this extension's manifest ID and omits any settings you did not supply. To use a different local port, configure the server and pass its manifest URL as the third argument.
+
+To end the review, leave the debug URL or close that tab and stop the development server. No app uninstall or persistent custom-action removal is necessary.
+
+### Review with Playwright
+
+Use a named, headed browser session and the generated debug URL:
+
+```bash
+playwright-cli -s=sharepoint-review open "
- Configuration Error: Missing required properties. Please configure appClientId, tenantId, and either directConnectUrl OR both agentIdentifier and environmentId.
-
- );
+ try {
+ normalizeConfiguration(properties);
+ } catch (error) {
+ return
- this.setState({ isPanelOpen: false })}
+ onNewConversation={() => this.setState(previous => ({ chatKey: previous.chatKey + 1 }))}
+ chatKey={chatKey}
+ />
+ )}
+
);
}
}
-function CopilotIcon(): JSX.Element {
- return (
-
- );
-}
-
-export default class SidebarAgentApplicationCustomizer
- extends BaseApplicationCustomizer {
-
+export default class SidebarAgentApplicationCustomizer extends BaseApplicationCustomizer {
private _topPlaceholder?: PlaceholderContent;
private _reactContainer?: HTMLDivElement;
+ private _themeProvider?: ThemeProvider;
+ private _theme?: IReadonlyTheme;
public onInit(): Promise {
+ initializeIcons();
+ this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
+ this._theme = this._themeProvider.tryGetTheme();
+ this._themeProvider.themeChangedEvent.add(this, this._onThemeChanged);
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
-
- if (!this.properties.appClientId || !this.properties.tenantId) {
- Log.error(LOG_SOURCE, new Error('appClientId and tenantId are required properties.'));
- return Promise.reject('Missing required properties: appClientId and tenantId');
- }
-
- if (!this.properties.directConnectUrl && (!this.properties.agentIdentifier || !this.properties.environmentId)) {
- Log.error(LOG_SOURCE, new Error('Either directConnectUrl OR both agentIdentifier and environmentId must be provided.'));
- return Promise.reject('Missing required properties: Either provide directConnectUrl OR both agentIdentifier and environmentId');
- }
-
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceholders);
this._renderPlaceholders();
return Promise.resolve();
}
- private _renderPlaceholders(): void {
+ private _renderPlaceholders = (): void => {
+ if (this._topPlaceholder) return;
+ this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, { onDispose: this._unmount });
if (!this._topPlaceholder) {
- this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, { onDispose: this._onDispose });
-
- if (!this._topPlaceholder) {
- Log.warn(LOG_SOURCE, 'Top placeholder not available.');
- return;
- }
-
- if (this._topPlaceholder.domElement) {
- this._topPlaceholder.domElement.innerHTML = '';
- this._reactContainer = document.createElement('div');
- this._topPlaceholder.domElement.appendChild(this._reactContainer);
-
- const componentElement: React.ReactElement = React.createElement(
- SidebarAgentComponent,
- { properties: this.properties, context: this.context }
- );
+ Log.warn(LOG_SOURCE, 'Top placeholder is not available on this page.');
+ return;
+ }
+ this._reactContainer = document.createElement('div');
+ this._topPlaceholder.domElement.appendChild(this._reactContainer);
+ this._renderComponent();
+ };
- ReactDOM.render(componentElement, this._reactContainer);
- }
+ private _renderComponent = (): void => {
+ if (this._reactContainer) {
+ ReactDOM.render(
+
+ ,
+ this._reactContainer
+ );
}
- }
+ };
- private _onDispose = (): void => {
+ private _onThemeChanged = (event: ThemeChangedEventArgs): void => {
+ this._theme = event.theme;
+ this._renderComponent();
+ };
+
+ private _unmount = (): void => {
if (this._reactContainer) {
- try {
- ReactDOM.unmountComponentAtNode(this._reactContainer);
- } catch { /* noop */ }
+ ReactDOM.unmountComponentAtNode(this._reactContainer);
+ this._reactContainer.remove();
this._reactContainer = undefined;
}
- Log.info(LOG_SOURCE, 'Disposed Top placeholder content.');
+ this._topPlaceholder = undefined;
};
+
+ public onDispose(): void {
+ this.context.placeholderProvider.changedEvent.remove(this, this._renderPlaceholders);
+ this._themeProvider?.themeChangedEvent.remove(this, this._onThemeChanged);
+ this._topPlaceholder?.dispose();
+ this._unmount();
+ }
}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/assets/copilot-studio.svg b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/assets/copilot-studio.svg
new file mode 100644
index 00000000..01d6824b
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/assets/copilot-studio.svg
@@ -0,0 +1,75 @@
+
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/AttachmentValidation.tsx b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/AttachmentValidation.tsx
new file mode 100644
index 00000000..feb134b0
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/AttachmentValidation.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { hooks } from 'botframework-webchat';
+import { validateFile } from './attachments';
+
+export function AttachmentValidation({
+ enabled, onError
+}: { enabled: boolean; onError: (message: string) => void }): React.ReactElement {
+ const [attachments, setAttachments] = hooks.useSendBoxAttachments();
+ React.useEffect(() => {
+ const errors: string[] = [];
+ const accepted = attachments.filter(({ blob }: { blob: Blob }) => {
+ try {
+ if (!enabled) throw new Error('File uploads are disabled for this agent.');
+ validateFile(blob instanceof File ? blob.name : '', blob.size);
+ return true;
+ } catch (error) {
+ errors.push(error instanceof Error ? error.message : 'Could not read the selected file.');
+ return false;
+ }
+ });
+ if (errors.length) {
+ setAttachments(accepted);
+ onError(errors.join(' '));
+ }
+ }, [attachments, enabled, onError, setAttachments]);
+ return <>;
+}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/Chat.module.scss b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/Chat.module.scss
new file mode 100644
index 00000000..fb4da1c4
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/Chat.module.scss
@@ -0,0 +1,43 @@
+.chat {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+}
+
+.webChat {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+
+ > * { flex: 1; min-width: 0; }
+}
+
+.loading {
+ display: grid;
+ place-items: center;
+ flex: 1;
+ padding: 24px;
+
+ p { max-width: 320px; text-align: center; }
+}
+
+.errorMessage {
+ white-space: pre-wrap;
+ overflow-wrap: anywhere;
+ max-height: 160px;
+ overflow-y: auto;
+}
+
+.authDetails {
+ margin-top: 12px;
+ overflow-wrap: anywhere;
+}
+
+.reconnect {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-top: 12px;
+}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/Chat.tsx b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/Chat.tsx
index e8f829d8..364c3ba0 100644
--- a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/Chat.tsx
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/Chat.tsx
@@ -1,130 +1,202 @@
import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { Components } from 'botframework-webchat';
+import { Components, createStore } from 'botframework-webchat';
import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
-import { ConnectionSettings, CopilotStudioClient, CopilotStudioWebChat, CopilotStudioWebChatConnection } from '@microsoft/agents-copilotstudio-client';
-import { acquireToken } from './acquireToken';
+import { ConnectionSettings, CopilotStudioClient, CopilotStudioWebChatConnection, ScopeHelper } from '@microsoft/agents-copilotstudio-client';
+import { DefaultButton, MessageBar, MessageBarType, Spinner, SpinnerSize, useTheme } from '@fluentui/react';
+import { ChatConfiguration } from '../../configuration';
+import { acquireToken, SignInRequiredError } from './acquireToken';
+import { createConnection } from './createConnection';
+import { AttachmentValidation } from './AttachmentValidation';
+import { UPLOAD_ACCEPT } from './attachments';
+import styles from './Chat.module.scss';
const { BasicWebChat, Composer } = Components;
export interface IChatProps {
- appClientId: string;
- tenantId: string;
- environmentId?: string;
- agentIdentifier?: string;
- directConnectUrl?: string;
- showTyping?: boolean;
+ configuration: ChatConfiguration;
currentUserLogin?: string;
- baseUrl?: string; // Add this line
+ baseUrl: string;
}
-const Chat: React.FC = ({
- appClientId,
- tenantId,
- environmentId,
- agentIdentifier,
- directConnectUrl,
- showTyping = true,
- currentUserLogin,
- baseUrl // Add this parameter
-}) => {
- const [connection, setConnection] = useState(null);
- const [error, setError] = useState();
-
- const isConfigured = appClientId && tenantId && (directConnectUrl || (environmentId && agentIdentifier));
-
- useEffect(() => {
- if (!isConfigured) return;
-
+const Chat: React.FC = ({ configuration, currentUserLogin, baseUrl }) => {
+ const theme = useTheme();
+ // Recreating these options when busy changes resets Web Chat's transcript scroll position.
+ const styleOptions = React.useMemo['styleOptions']>(() => ({
+ rootHeight: '100%',
+ rootWidth: '100%',
+ backgroundColor: theme.semanticColors.bodyBackground,
+ bubbleBackground: theme.semanticColors.bodyBackground,
+ bubbleTextColor: theme.semanticColors.bodyText,
+ bubbleFromUserBackground: theme.palette.neutralLighter,
+ bubbleFromUserTextColor: theme.semanticColors.bodyText,
+ bubbleBorderRadius: 8,
+ bubbleFromUserBorderRadius: 8,
+ primaryFont: theme.fonts.medium.fontFamily,
+ accent: theme.palette.themePrimary,
+ disableFileUpload: !configuration.enableFileUpload,
+ uploadAccept: UPLOAD_ACCEPT,
+ uploadMultiple: true,
+ hideTelephoneKeypadButton: true,
+ partGroupDefaultOpen: false
+ }), [theme, configuration.enableFileUpload]);
+ const themeVariables: React.CSSProperties & Record<`--${string}`, string> = {
+ '--colorNeutralForeground1': theme.semanticColors.bodyText,
+ '--colorNeutralForeground2': theme.semanticColors.bodyText,
+ '--colorNeutralForeground3': theme.semanticColors.bodySubtext,
+ '--colorNeutralForegroundDisabled': theme.semanticColors.disabledText,
+ '--colorNeutralBackground1': theme.semanticColors.bodyBackground,
+ '--colorNeutralBackground1Hover': theme.palette.neutralLighter,
+ '--colorNeutralBackground1Pressed': theme.palette.neutralLight,
+ '--colorNeutralBackground3': theme.palette.neutralLighter,
+ '--colorNeutralBackground4': theme.palette.neutralLighterAlt,
+ '--colorNeutralBackground5': theme.palette.neutralLight,
+ '--colorNeutralBackgroundDisabled': theme.semanticColors.disabledBackground,
+ '--colorNeutralStroke1': theme.palette.neutralTertiaryAlt,
+ '--colorNeutralStroke2': theme.palette.neutralLight,
+ '--colorStrokeFocus2': theme.palette.themePrimary,
+ '--colorBrandForeground1': theme.palette.themePrimary,
+ '--colorBrandForegroundLink': theme.palette.themePrimary,
+ '--colorBrandForegroundLinkHover': theme.palette.themeDark,
+ '--colorBrandBackground': theme.palette.themePrimary,
+ '--colorBrandBackgroundHover': theme.palette.themeDarkAlt,
+ '--colorBrandBackgroundPressed': theme.palette.themeDark,
+ '--colorBrandBackground2': theme.palette.themeLighterAlt,
+ '--colorStatusDangerForeground1': theme.semanticColors.errorText,
+ '--fontFamilyBase': theme.fonts.medium.fontFamily || '"Segoe UI", sans-serif'
+ };
+ const [connection, setConnection] = React.useState();
+ const [error, setError] = React.useState();
+ const [authenticationFailed, setAuthenticationFailed] = React.useState(false);
+ const [signInRequired, setSignInRequired] = React.useState(false);
+ const signIn = React.useRef<() => void>();
+ const [uploadError, setUploadError] = React.useState();
+ const [attempt, setAttempt] = React.useState(0);
+ const [busy, setBusy] = React.useState(false);
+ const store = React.useMemo(() => createStore(), [attempt]);
+
+ React.useEffect(() => {
let cancelled = false;
-
- const initializeConnection = async (): Promise => {
+ let activeConnection: CopilotStudioWebChatConnection | undefined;
+ setError(undefined);
+ setAuthenticationFailed(false);
+ setSignInRequired(false);
+ setUploadError(undefined);
+ setConnection(undefined);
+ setBusy(false);
+
+ const initialize = async (interactive = false): Promise => {
+ setError(undefined);
+ let acquiringToken = false;
try {
- const token = await acquireToken({
- appClientId,
- tenantId,
- currentUserLogin,
- redirectUri: baseUrl // Pass baseUrl as redirectUri
- });
-
- if (!token) {
- setError('Unable to acquire token.');
- return;
- }
-
const settings = new ConnectionSettings({
- appClientId,
- tenantId,
- environmentId: environmentId || '',
- agentIdentifier: agentIdentifier || '',
- directConnectUrl: directConnectUrl || ''
+ environmentId: configuration.environmentId,
+ schemaName: configuration.schemaName,
+ directConnectUrl: configuration.directConnectUrl
});
-
- const client = new CopilotStudioClient(settings, token);
- const webchatSettings = { showTyping };
-
- if (!cancelled) {
- setConnection(CopilotStudioWebChat.createConnection(client, webchatSettings));
- }
- } catch (e) {
+ acquiringToken = true;
+ const token = await acquireToken({
+ appClientId: configuration.appClientId, tenantId: configuration.tenantId,
+ currentUserLogin, redirectUri: baseUrl,
+ scopes: [ScopeHelper.getScopeFromSettings(settings)]
+ }, interactive);
+ acquiringToken = false;
+ if (cancelled) return;
+ setAuthenticationFailed(false);
+ setSignInRequired(false);
+ activeConnection = createConnection(new CopilotStudioClient(settings, token), configuration, {
+ onTurn: () => {
+ setError(undefined);
+ setBusy(true);
+ },
+ onTurnEnd: () => { if (!cancelled) setBusy(false); },
+ onError: failure => {
+ if (!cancelled) {
+ console.error('Copilot connection failed:', failure.name);
+ setError(failure.message);
+ }
+ }
+ });
+ setConnection(activeConnection);
+ } catch (failure) {
if (!cancelled) {
- console.error('Chat initialization error:', e);
- setError(e instanceof Error ? e.message : 'Unknown error initializing chat');
+ setAuthenticationFailed(acquiringToken);
+ if (failure instanceof SignInRequiredError) setSignInRequired(true);
+ console.error('Copilot initialization failed:', failure instanceof Error ? failure.name : 'Unknown error');
+ setError(failure instanceof Error ? failure.message : 'Could not connect to the agent.');
}
}
};
-
- initializeConnection();
-
- return () => {
- cancelled = true;
+ const connect = (interactive = false): void => {
+ initialize(interactive).catch(failure => {
+ if (!cancelled) setError(failure instanceof Error ? failure.message : 'Could not connect to the agent.');
+ });
};
- }, [isConfigured, appClientId, tenantId, environmentId, agentIdentifier, directConnectUrl, showTyping, currentUserLogin, baseUrl]); // Add baseUrl to dependencies
-
- if (!isConfigured) {
- return (
-
- Configure appClientId, tenantId, and either directConnectUrl or (environmentId and agentIdentifier) in the manifest properties.
-
- );
- }
-
- if (error) {
- return Error: {error} ;
- }
-
- if (!connection) {
- return Connecting to Copilot Studio... ;
- }
+ signIn.current = () => connect(true);
+ connect();
+ return () => {
+ cancelled = true;
+ signIn.current = undefined;
+ activeConnection?.end();
+ };
+ }, [configuration, currentUserLogin, baseUrl, attempt]);
return (
-
-
-
-
+ = ({ children, type = 'info' }) => {
- const styles = {
- info: { padding: 16 },
- warning: { padding: 16, color: '#8a6d3b', backgroundColor: '#fcf8e3' },
- error: { padding: 16, color: '#a94442', backgroundColor: '#f2dede' }
- };
-
- return {
- if (!settings?.appClientId || !settings?.tenantId) {
- return undefined;
+export class SignInRequiredError extends Error {
+ constructor(public readonly cause?: InteractionRequiredAuthError | BrowserAuthError) {
+ super(cause?.message || 'Sign in to connect to your agent.');
+ this.name = 'SignInRequiredError';
}
+}
- console.log('using this as a redirect URI: ', settings.redirectUri || window.location.origin);
-
- const msalInstance = new PublicClientApplication({
- auth: {
- clientId: settings.appClientId,
- authority: `https://login.microsoftonline.com/${settings.tenantId}`,
- redirectUri: settings.redirectUri || window.location.origin
- },
- cache: {
- cacheLocation: "localStorage"
- }
- });
-
- await msalInstance.initialize();
- const scopes = ['https://api.powerplatform.com/.default'];
+const applications = new Map>();
+
+function getApplication(settings: IAuthSettings): Promise {
+ const key = `${settings.appClientId}|${settings.tenantId}|${settings.redirectUri}`;
+ let application = applications.get(key);
+ if (!application) {
+ const instance = new PublicClientApplication({
+ auth: {
+ clientId: settings.appClientId,
+ authority: `https://login.microsoftonline.com/${settings.tenantId}`,
+ redirectUri: settings.redirectUri
+ },
+ cache: { cacheLocation: 'sessionStorage' }
+ });
+ application = instance.initialize().then(() => instance).catch(error => {
+ applications.delete(key);
+ throw error;
+ });
+ applications.set(key, application);
+ }
+ return application;
+}
+export async function acquireToken(settings: IAuthSettings, interactive = false): Promise {
+ const instance = await getApplication(settings);
+ const accounts = instance.getAllAccounts();
+ const account = settings.currentUserLogin
+ ? accounts.find(candidate => candidate.username.toLowerCase() === settings.currentUserLogin?.toLowerCase())
+ : accounts.length === 1 ? accounts[0] : undefined;
+ const request = { scopes: settings.scopes, loginHint: settings.currentUserLogin };
+ if (interactive) return (await instance.acquireTokenPopup(request)).accessToken;
+ if (!account && !settings.currentUserLogin) throw new SignInRequiredError();
try {
- const accounts = await msalInstance.getAllAccounts();
- let userAccount = null;
-
- if (!accounts || accounts.length === 0) {
- console.log("No users are signed in");
- } else if (accounts.length > 1 && settings.currentUserLogin) {
- userAccount = accounts.find(account =>
- account.username.toLowerCase() === settings.currentUserLogin?.toLowerCase()
- ) || null;
- } else {
- userAccount = accounts[0];
- }
-
- if (userAccount) {
- const accessTokenRequest = {
- scopes: scopes,
- account: userAccount
- };
-
- try {
- const response = await msalInstance.acquireTokenSilent(accessTokenRequest);
- console.log('Token acquired via acquireTokenSilent');
- return response.accessToken;
- } catch (errorInternal) {
- console.log('acquireTokenSilent failed:', errorInternal);
- // Fall through to try SSO
- }
+ if (account) {
+ return (await instance.acquireTokenSilent({ ...request, account })).accessToken;
}
-
- // Only reach here if no account or acquireTokenSilent failed
- const ssoRequest = {
- scopes: scopes,
- loginHint: settings.currentUserLogin
- };
-
- try {
- const response = await msalInstance.ssoSilent(ssoRequest);
- console.log('Token acquired via ssoSilent');
- return response.accessToken;
- } catch (silentError) {
- console.log('ssoSilent failed:', silentError);
- if (silentError instanceof InteractionRequiredAuthError) {
- try {
- const response = await msalInstance.loginPopup(ssoRequest);
- console.log('Token acquired via loginPopup');
- return response.accessToken;
- } catch (popupError) {
- console.log('loginPopup failed:', popupError);
- return undefined;
- }
- }
- return undefined;
+ return (await instance.ssoSilent(request)).accessToken;
+ } catch (error) {
+ if (error instanceof InteractionRequiredAuthError ||
+ (error instanceof BrowserAuthError && error.errorCode === BrowserAuthErrorCodes.monitorWindowTimeout)) {
+ console.warn('Copilot silent sign-in requires interaction:', error.errorCode);
+ throw new SignInRequiredError(error);
}
- } catch (e) {
- console.error('Token acquisition error', e);
- return undefined;
+ throw error;
}
}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/activityDetails.ts b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/activityDetails.ts
new file mode 100644
index 00000000..52538942
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/activityDetails.ts
@@ -0,0 +1,153 @@
+export interface ActivityVisibility {
+ showReasoning: boolean;
+ showToolCalls: boolean;
+}
+
+export interface ActivityDetail {
+ id: string;
+ kind: 'reasoning' | 'tool';
+ text: string;
+ status?: 'running' | 'finished' | 'failed';
+ sequence?: number;
+}
+
+export interface ActivityDetailsState {
+ entries: ActivityDetail[];
+ toolNames: Record;
+}
+
+export function emptyActivityDetails(): ActivityDetailsState {
+ return { entries: [], toolNames: {} };
+}
+
+export function record(value: unknown): Record {
+ return value && typeof value === 'object' && !Array.isArray(value) ? value as Record : {};
+}
+
+function text(value: unknown): string {
+ return typeof value === 'string' ? value : '';
+}
+
+function identifier(value: unknown): string {
+ return typeof value === 'number' && Number.isFinite(value) ? String(value) : text(value);
+}
+
+export function isInformative(activity: unknown): boolean {
+ const item = record(activity);
+ return item.type === 'typing' && streamMetadata(item).streamType === 'informative';
+}
+
+function entities(activity: Record): Record[] {
+ return Array.isArray(activity.entities) ? activity.entities.map(record) : [];
+}
+
+function streamMetadata(activity: Record): Record {
+ return { ...entities(activity).find(entity => entity.type === 'streaminfo'), ...record(activity.channelData) };
+}
+
+export function hasDetailEntities(activity: unknown): boolean {
+ return entities(record(activity)).some(entity => entity.type === 'thought' || entity.type === 'toolCall');
+}
+
+function planEventType(activity: Record): string {
+ return activity.type === 'event' ? text(activity.valueType) || text(activity.name) : '';
+}
+
+export function isPlanEvent(activity: unknown): boolean {
+ return [
+ 'DynamicPlanReceived', 'DynamicPlanStepTriggered', 'DynamicPlanStepBindUpdate', 'DynamicPlanStepFinished'
+ ].indexOf(planEventType(record(activity))) !== -1;
+}
+
+export function updateActivityDetails(
+ state: ActivityDetailsState, activity: unknown, visibility: ActivityVisibility
+): ActivityDetailsState {
+ const item = record(activity);
+ if (hasDetailEntities(item)) return updateAgenticDetails(state, item, visibility);
+ if (isPlanEvent(item)) return updateStandardDetails(state, item, visibility);
+ return state;
+}
+
+function updateAgenticDetails(
+ state: ActivityDetailsState, item: Record, visibility: ActivityVisibility
+): ActivityDetailsState {
+ const stream = streamMetadata(item);
+ const sequence = typeof stream.streamSequence === 'number' ? stream.streamSequence : undefined;
+ let next = state;
+ for (const entity of entities(item)) {
+ if (entity.type === 'thought' && visibility.showReasoning) {
+ const content = text(entity.text);
+ if (!content) continue;
+ const chain = identifier(entity.chainOfThoughtId) || text(stream.streamId) || text(item.id) || 'current';
+ const id = `reasoning:${chain}:${identifier(entity.sequenceNumber) || '0'}`;
+ const previous = next.entries.find(entry => entry.id === id);
+ if (previous?.sequence !== undefined && sequence !== undefined && sequence <= previous.sequence) continue;
+ // The SDK accumulates activity.text, not thought.text; thought deltas still need assembly.
+ const nextText = stream.chunkType === 'delta' ? (previous?.text || '') + content : content;
+ const entry: ActivityDetail = { id, kind: 'reasoning', text: nextText, sequence };
+ next = { ...next, entries: upsert(next.entries, entry) };
+ } else if (entity.type === 'toolCall' && visibility.showToolCalls) {
+ const callId = identifier(entity.toolCallId);
+ const status = entity.status === 'completed' ? 'finished'
+ : entity.status === 'started' ? 'running' : entity.status === 'failed' ? 'failed' : undefined;
+ if (!callId || !status) continue;
+ const id = `tool:${callId}`;
+ const previous = next.entries.find(entry => entry.id === id);
+ if (previous?.sequence !== undefined && sequence !== undefined && sequence <= previous.sequence) continue;
+ if (previous?.status && previous.status !== 'running' && status === 'running') continue;
+ const entry: ActivityDetail = {
+ id, kind: 'tool', status, sequence,
+ text: text(entity.toolDisplayName) || text(entity.toolName) || text(entity.operationId) || previous?.text || 'Agent action'
+ };
+ next = { ...next, entries: upsert(next.entries, entry) };
+ }
+ }
+ return next;
+}
+
+function updateStandardDetails(
+ state: ActivityDetailsState, item: Record, visibility: ActivityVisibility
+): ActivityDetailsState {
+ const event = planEventType(item);
+ const value = record(item.value);
+ if (event === 'DynamicPlanReceived') {
+ if (!visibility.showToolCalls || !Array.isArray(value.toolDefinitions)) return state;
+ const toolNames = { ...state.toolNames };
+ value.toolDefinitions.forEach(definition => {
+ const tool = record(definition);
+ const schema = text(tool.schemaName);
+ if (schema && text(tool.displayName)) toolNames[schema] = text(tool.displayName);
+ });
+ return { ...state, toolNames };
+ }
+ const schema = text(value.taskDialogId);
+ const step = identifier(value.stepId) || identifier(value.id) || schema;
+ if (!step) return state;
+ const scope = JSON.stringify([identifier(value.planIdentifier), step]);
+ let next = state;
+ const thought = text(value.thought);
+ if (visibility.showReasoning && event === 'DynamicPlanStepTriggered' && thought.trim()) {
+ const entry: ActivityDetail = { id: `reasoning:standard:${scope}`, kind: 'reasoning', text: thought };
+ if (next.entries.find(candidate => candidate.id === entry.id)?.text !== thought) {
+ next = { ...next, entries: upsert(next.entries, entry) };
+ }
+ }
+ if (!visibility.showToolCalls) return next;
+ const id = `tool:standard:${scope}`;
+ const previous = next.entries.find(entry => entry.id === id);
+ const status = event === 'DynamicPlanStepFinished' ? 'finished' : 'running';
+ if (previous?.status === 'finished' && status === 'running') return next;
+ const entry: ActivityDetail = {
+ id, kind: 'tool',
+ text: text(next.toolNames[schema]) || previous?.text || schema || 'Agent action',
+ status
+ };
+ if (previous?.text === entry.text && previous.status === status) return next;
+ return { ...next, entries: upsert(next.entries, entry) };
+}
+
+function upsert(entries: ActivityDetail[], entry: ActivityDetail): ActivityDetail[] {
+ return entries.some(existing => existing.id === entry.id)
+ ? entries.map(existing => existing.id === entry.id ? entry : existing)
+ : [...entries, entry];
+}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/attachments.ts b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/attachments.ts
new file mode 100644
index 00000000..55e9e027
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/attachments.ts
@@ -0,0 +1,49 @@
+export const MAX_FILE_BYTES = 15 * 1024 * 1024;
+const contentTypes: Record = {
+ docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ csv: 'text/csv',
+ pdf: 'application/pdf',
+ txt: 'text/plain',
+ jpg: 'image/jpeg',
+ jpeg: 'image/jpeg',
+ png: 'image/png',
+ webp: 'image/webp',
+ gif: 'image/gif'
+};
+export const UPLOAD_ACCEPT = Object.keys(contentTypes).map(extension => `.${extension}`).join(',');
+
+export function validateFile(name: string, size: number): string {
+ const extension = name.split('.').pop()?.toLowerCase() || '';
+ const contentType = Object.prototype.hasOwnProperty.call(contentTypes, extension) ? contentTypes[extension] : undefined;
+ if (!contentType) throw new Error(`${name || 'This file'} is not supported. Use DOCX, CSV, PDF, TXT, JPG, PNG, WebP, or a nonanimated GIF.`);
+ if (!Number.isFinite(size) || size <= 0) throw new Error(`${name} is empty or could not be read.`);
+ if (size > MAX_FILE_BYTES) throw new Error(`${name} exceeds the 15 MiB file limit. Choose a smaller file.`);
+ return contentType;
+}
+
+export interface LocalAttachment {
+ name?: string;
+ contentType: string;
+ contentUrl?: string;
+}
+
+export async function prepareAttachments(
+ attachments: T[], enabled: boolean, read: typeof fetch = fetch
+): Promise {
+ if (attachments.length && !enabled) throw new Error('File uploads are disabled for this agent.');
+ return Promise.all(attachments.map(async attachment => {
+ if (!attachment.contentUrl?.startsWith('blob:')) {
+ throw new Error('Choose a local file to attach. Remote attachment URLs are not supported.');
+ }
+ const response = await read(attachment.contentUrl);
+ if (!response.ok) throw new Error(`Could not read ${attachment.name || 'the attachment'}. Remove it and attach it again.`);
+ const blob = await response.blob();
+ const contentType = validateFile(attachment.name || '', blob.size);
+ const bytes = new Uint8Array(await blob.arrayBuffer());
+ let binary = '';
+ for (let offset = 0; offset < bytes.length; offset += 8192) {
+ binary += String.fromCharCode(...bytes.subarray(offset, offset + 8192));
+ }
+ return { ...attachment, contentType, contentUrl: `data:${contentType};base64,${btoa(binary)}` };
+ }));
+}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/createConnection.ts b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/createConnection.ts
new file mode 100644
index 00000000..f64e9f25
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/createConnection.ts
@@ -0,0 +1,145 @@
+import { CopilotStudioClient, CopilotStudioWebChat, CopilotStudioWebChatConnection } from '@microsoft/agents-copilotstudio-client';
+import { Observable, ReplaySubject, share, Subscription } from 'rxjs';
+import { Activity } from '@microsoft/agents-activity';
+import { ChatConfiguration } from '../../configuration';
+import { createPreChatActivity, NativeActivityAdapter } from './nativeActivities';
+import { prepareAttachments } from './attachments';
+
+export interface ConnectionCallbacks {
+ onTurn: () => void;
+ onTurnEnd: () => void;
+ onError: (error: Error) => void;
+}
+
+export function createConnection(
+ client: CopilotStudioClient, configuration: ChatConfiguration, callbacks: ConnectionCallbacks
+): CopilotStudioWebChatConnection {
+ const connection = CopilotStudioWebChat.createConnection(client, {
+ showTyping: configuration.showTyping, startConversation: configuration.startConversation
+ });
+ let initialization: Promise | undefined;
+ const initializeConversation = (): Promise => {
+ if (!initialization) {
+ initialization = (async () => {
+ const activities = client.startConversationStreaming(false);
+ while (!(await activities.next()).done) {
+ // Drain startup without a greeting; the SDK retains the ID from response headers.
+ }
+ })().catch(error => {
+ initialization = undefined;
+ throw error;
+ });
+ }
+ return initialization;
+ };
+ return wrapConnection(
+ connection, configuration, callbacks, configuration.startConversation ? undefined : initializeConversation
+ );
+}
+
+export function wrapConnection(
+ connection: CopilotStudioWebChatConnection, configuration: ChatConfiguration, callbacks: ConnectionCallbacks,
+ initializeConversation?: () => Promise
+): CopilotStudioWebChatConnection {
+ let ended = false;
+ let sequence = 0;
+ const native = new NativeActivityAdapter(configuration);
+ let emitUpdates: ((activities: Partial[]) => void) | undefined;
+ const requests = new Set();
+ const report = (error: unknown): Error => {
+ const failure = error instanceof Error ? error : new Error('The agent connection failed. Try reconnecting.');
+ if (!ended) {
+ emitUpdates?.(native.finishTurn(true));
+ callbacks.onError(failure);
+ }
+ return failure;
+ };
+ // WebChat first subscribes to connect, then subscribes again to render the transcript.
+ // Share the SDK's single subscriber and replay activities that arrived during startup.
+ const activity$ = new Observable>(subscriber => {
+ const emit = (activities: Partial[]): void => {
+ activities.forEach(activity => {
+ const incoming = { ...activity, id: activity.id || `sidepane-activity-${++sequence}` };
+ if (incoming.type === 'typing' && !incoming.text && !configuration.showTyping) return;
+ subscriber.next(incoming);
+ });
+ };
+ emitUpdates = emit;
+ if (!configuration.startConversation) emit([createPreChatActivity(configuration)]);
+ const subscription = connection.activity$.subscribe({
+ next: activity => {
+ if (ended) return;
+ emit(native.transform(activity));
+ },
+ error: error => {
+ report(error);
+ connection.connectionStatus$.next(4);
+ subscriber.complete();
+ },
+ complete: () => subscriber.complete()
+ });
+ return () => {
+ if (emitUpdates === emit) emitUpdates = undefined;
+ subscription.unsubscribe();
+ };
+ }).pipe(share({
+ connector: () => new ReplaySubject>(),
+ resetOnComplete: true,
+ resetOnError: true,
+ resetOnRefCountZero: true
+ }));
+ return {
+ connectionStatus$: connection.connectionStatus$,
+ get conversationId() { return connection.conversationId; },
+ activity$,
+ postActivity: activity => new Observable(subscriber => {
+ let cancelled = false;
+ let acknowledged = false;
+ const subscription = new Subscription();
+ const finish = (interrupted = false): void => {
+ if (!requests.delete(subscription)) return;
+ if (!ended && activity.type === 'message') {
+ emitUpdates?.(native.finishTurn(interrupted));
+ callbacks.onTurnEnd();
+ }
+ };
+ const send = async (): Promise => {
+ try {
+ if (ended || cancelled) return;
+ requests.add(subscription);
+ if (activity.type === 'message') {
+ native.startTurn();
+ callbacks.onTurn();
+ }
+ const attachments = await prepareAttachments(activity.attachments || [], configuration.enableFileUpload);
+ if (ended || cancelled) return;
+ if (activity.type === 'message') await initializeConversation?.();
+ if (ended || cancelled) return;
+ subscription.add(connection.postActivity(Activity.fromObject({ ...activity, attachments })).subscribe({
+ next: id => { acknowledged = true; subscriber.next(id); },
+ error: error => { finish(true); subscriber.error(report(error)); },
+ complete: () => { finish(); subscriber.complete(); }
+ }));
+ } catch (error) {
+ finish(true);
+ if (!ended && !cancelled) subscriber.error(report(error));
+ }
+ };
+ send().catch(error => subscriber.error(report(error)));
+ return () => {
+ cancelled = true;
+ // WebChat unsubscribes after the send acknowledgement, before the response stream finishes.
+ if (!acknowledged) {
+ subscription.unsubscribe();
+ finish(true);
+ }
+ };
+ }),
+ end: () => {
+ ended = true;
+ requests.forEach(subscription => subscription.unsubscribe());
+ requests.clear();
+ connection.end();
+ }
+ };
+}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/nativeActivities.ts b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/nativeActivities.ts
new file mode 100644
index 00000000..73e05ff2
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/nativeActivities.ts
@@ -0,0 +1,117 @@
+import { Activity } from '@microsoft/agents-activity';
+import { ChatConfiguration } from '../../configuration';
+import { ActivityDetail, emptyActivityDetails, hasDetailEntities, isInformative, isPlanEvent, record, updateActivityDetails } from './activityDetails';
+
+export function createPreChatActivity(configuration: ChatConfiguration): Partial {
+ return {
+ type: 'message',
+ id: 'sidepane:welcome',
+ from: { id: 'agent', role: 'bot' },
+ timestamp: new Date().toISOString(),
+ channelData: { 'webchat:sequence-id': -1 },
+ text: '',
+ entities: [{
+ type: 'https://schema.org/Message', '@context': 'https://schema.org', '@id': '', '@type': 'Message',
+ keywords: ['PreChatMessage'],
+ author: {
+ '@type': 'Person',
+ name: 'How can I help?',
+ // Fluent 4.19 renders an avatar even when no author image is provided.
+ image: `data:image/svg+xml,${encodeURIComponent(
+ ''
+ )}`,
+ description: configuration.enableFileUpload
+ ? 'Ask a question or attach a document to get started.'
+ : 'Ask a question to get started.'
+ }
+ }],
+ suggestedActions: {
+ to: [],
+ actions: configuration.starterPrompts.map(prompt => ({
+ type: 'messageBack', title: prompt.title, text: prompt.text
+ }))
+ }
+ };
+}
+
+function isNativeAnalysis(activity: Partial): boolean {
+ return !!activity.entities?.some(entity => {
+ const message = record(entity);
+ return message.type === 'https://schema.org/Message' &&
+ Array.isArray(message.keywords) && message.keywords.indexOf('AnalysisMessage') !== -1;
+ });
+}
+
+export class NativeActivityAdapter {
+ private state = emptyActivityDetails();
+ private turn = 0;
+ private outcome: 'finished' | 'interrupted' | undefined;
+ private sequenceIds = new Map();
+ private timestamp = new Date().toISOString();
+ private author = { id: 'agent', role: 'bot' };
+
+ constructor(private readonly configuration: ChatConfiguration) {}
+
+ startTurn(): void {
+ // Standard plans can resume after a clarification or connector sign-in on a later turn.
+ this.state = { ...emptyActivityDetails(), toolNames: this.state.toolNames };
+ this.sequenceIds.clear();
+ this.timestamp = new Date().toISOString();
+ this.outcome = undefined;
+ this.turn++;
+ }
+
+ transform(activity: Partial): Partial[] {
+ if (activity.type === 'event' && activity.name === 'turn.complete') return this.finishTurn();
+ if (hasDetailEntities(activity) || isInformative(activity) || isPlanEvent(activity)) {
+ const previous = this.state;
+ this.state = updateActivityDetails(previous, activity, this.configuration);
+ if (typeof activity.from?.id === 'string') this.author = { id: activity.from.id, role: 'bot' };
+ return this.state.entries
+ .filter(entry => previous.entries.find(candidate => candidate.id === entry.id) !== entry)
+ .map(entry => {
+ const sequenceId = record(activity.channelData)['webchat:sequence-id'];
+ if (!this.sequenceIds.has(entry.id) && typeof sequenceId === 'number') {
+ this.sequenceIds.set(entry.id, sequenceId);
+ }
+ return this.render(entry);
+ });
+ }
+ if (isNativeAnalysis(activity) && !this.configuration.showReasoning) return [];
+ return [activity];
+ }
+
+ finishTurn(interrupted = false): Partial[] {
+ if (this.outcome) return [];
+ this.outcome = interrupted ? 'interrupted' : 'finished';
+ return this.state.entries.map(entry => this.render(entry));
+ }
+
+ private render(entry: ActivityDetail): Partial {
+ const finished = entry.kind === 'tool' ? entry.status === 'finished' : this.outcome === 'finished';
+ const failed = entry.status === 'failed';
+ return {
+ type: 'message',
+ id: `sidepane:turn:${this.turn}:${entry.id}`,
+ from: this.author,
+ timestamp: this.timestamp,
+ // Keep the SDK's sequence scale and the step's original position on updates.
+ channelData: { 'webchat:sequence-id': this.sequenceIds.get(entry.id) },
+ textFormat: 'plain',
+ text: entry.kind === 'reasoning' ? entry.text : failed ? 'Failed' : finished ? 'Finished' : this.outcome ? 'No finish event received.' : 'Started',
+ entities: [{
+ type: 'https://schema.org/Message', '@context': 'https://schema.org', '@id': '', '@type': 'Message',
+ abstract: entry.kind === 'reasoning' ? 'Reasoning' : entry.text,
+ keywords: ['AnalysisMessage', 'Collapsible'],
+ position: this.state.entries.indexOf(entry) + 1,
+ creativeWorkStatus: failed ? 'Failed' : finished ? 'Published' : this.outcome ? undefined : 'Incomplete',
+ isPartOf: {
+ '@id': `sidepane:turn:${this.turn}`,
+ '@type': 'HowTo',
+ abstract: this.outcome === 'interrupted' ? 'Agent activity interrupted' : 'Agent activity',
+ creativeWorkStatus: this.outcome === 'interrupted' ? 'Failed' : this.outcome === 'finished' ? 'Published' : 'Incomplete'
+ }
+ }]
+ };
+ }
+}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.module.scss b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.module.scss
index 103c70de..5e17e360 100644
--- a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.module.scss
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.module.scss
@@ -1,95 +1,36 @@
-
-
.sidePanel {
- position: fixed;
- top: 0;
- right: -30vw;
- width: 30vw;
- height: 100vh;
- background-color: white;
- box-shadow: none;
- transition: right 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
- z-index: 1000;
- display: flex;
- flex-direction: column;
+ font-family: "Segoe UI", Aptos, Calibri, sans-serif;
- &.open {
- right: 0;
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+ @media (prefers-reduced-motion: reduce) {
+ &, * { animation-duration: 0s !important; transition-duration: 0s !important; }
}
}
-.chatContainer {
- flex: 1;
- min-height: 0;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- // Use SharePoint theme colors for gradient
- background: linear-gradient(135deg,
- "[theme:themeLighterAlt, default: #f3f2f1]" 0%,
- "[theme:themeLighter, default: #d2d0ce]" 100%);
- padding: 20px;
- gap: 16px;
-}
-
-.titleBar {
- background: white;
- border-radius: 12px;
- padding: 16px 24px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+.header {
display: flex;
align-items: center;
- justify-content: space-between;
+ gap: 12px;
+ flex: 0 0 auto;
+ min-width: 0;
+ padding: 16px;
}
.title {
- margin: 0;
- font-size: 16px;
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin: 0 0 0 8px;
+ font-size: 20px;
font-weight: 600;
- color: "[theme:bodyText, default: #323130]";
+ line-height: 1.4;
}
-.buttonGroup {
+.launcher {
display: flex;
- gap: 8px;
- align-items: center;
+ justify-content: flex-end;
+ padding: 4px 16px;
+ border-bottom: 1px solid "[theme:neutralLight, default: #edebe9]";
+ background: "[theme:bodyBackground, default: #ffffff]";
}
-
-.iconButton {
- background: none;
- border: none;
- cursor: pointer;
- padding: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: "[theme:neutralSecondary, default: #605e5c]";
- border-radius: 4px;
- transition: all 0.2s ease;
-
- &:hover {
- background-color: "[theme:neutralLighter, default: #f3f2f1]";
- color: "[theme:neutralPrimary, default: #323130]";
- }
-}
-
-.chatWrapper {
- background: white;
- border-radius: 12px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
- flex: 1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-
-.overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.4);
- z-index: 999;
-}
\ No newline at end of file
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.tsx b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.tsx
index 91ae6c20..d3213f37 100644
--- a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.tsx
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/SidePanel/SidePanel.tsx
@@ -1,69 +1,61 @@
import * as React from 'react';
+import { IconButton, Panel, PanelType, useTheme } from '@fluentui/react';
import styles from './SidePanel.module.scss';
import Chat from '../Chat/Chat';
import { ISidePanelProps } from '../../models/ISidebarAgentProperties';
+import { normalizeConfiguration } from '../../configuration';
-export default class SidePanel extends React.Component {
- public render(): React.ReactElement {
- const { isOpen, properties, currentUserLogin, baseUrl, onDismiss, onNewConversation, chatKey } = this.props;
- const agentTitle = properties.agentTitle || 'Copilot Studio Agent';
-
- return (
- <>
-
-
+ <>
+
+ {hasOpened && (
+
+ 
}
+ ariaLabel={`Open ${agentTitle}`}
+ aria-expanded={isPanelOpen}
+ aria-haspopup="dialog"
+ title={`Open ${agentTitle} (Microsoft Copilot Studio)`}
+ onClick={() => this.setState({ isPanelOpen: true, hasOpened: true })}
+ />
-
-
+ {uploadError && setUploadError(undefined)}>
+ {uploadError}
+ }
+ {error && (
+
+
+ )}
+ {!connection && !error && (
+
+
+
+
+ )}
+
);
};
-interface ChatMessageProps {
- children: React.ReactNode;
- type?: 'info' | 'warning' | 'error';
-}
-
-const ChatMessage: React.FC{error}
+ {authenticationFailed && (
+
+ {signInRequired &&
+ )}
+ + Select Sign in to open Microsoft sign-in. If Microsoft shows an error without redirecting back, + its detailed message stays in that window and cannot be read by this page. +
} +Application ID:
+ {configuration.appClientId}Redirect URI (Single-page application):
+ {baseUrl}
+ {signInRequired ? (
+ signIn.current?.()}>Sign in
+ ) : (
+ <>
+ setAttempt(previous => previous + 1)}>Reconnect
+ Reconnecting starts a new conversation. A failed request may already have reached the agent.
+
+ )}
+
+
+
+ )}
+ {connection && (
+
+
+ + Complete sign-in in the pop-up. If Microsoft displays an error, that window contains the detailed sign-in message. +
} +
+
+ {children}
;
-};
-
export default Chat;
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/acquireToken.ts b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/acquireToken.ts
index 2fd488b2..9305c147 100644
--- a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/acquireToken.ts
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/components/Chat/acquireToken.ts
@@ -1,89 +1,63 @@
-import { PublicClientApplication, InteractionRequiredAuthError } from '@azure/msal-browser';
+import { PublicClientApplication, InteractionRequiredAuthError, BrowserAuthError, BrowserAuthErrorCodes } from '@azure/msal-browser';
export interface IAuthSettings {
appClientId: string;
tenantId: string;
currentUserLogin?: string;
- redirectUri?: string;
+ redirectUri: string;
+ scopes: string[];
}
-export async function acquireToken(settings: IAuthSettings): Promise
- = ({
+ isOpen, properties, currentUserLogin, baseUrl, onDismiss, onNewConversation, chatKey
+}) => {
+ const theme = useTheme();
+ const configuration = React.useMemo(() => normalizeConfiguration(properties), [properties]);
+ return (
+ (
+
+ );
+};
-const ChevronRightIcon: React.FC = () => (
-
-);
\ No newline at end of file
+export default SidePanel;
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/configuration.ts b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/configuration.ts
new file mode 100644
index 00000000..d852127c
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/configuration.ts
@@ -0,0 +1,72 @@
+import { ISidebarAgentApplicationCustomizerProperties, IStarterPrompt } from './models/ISidebarAgentProperties';
+
+export const DEFAULT_STARTER_PROMPTS: IStarterPrompt[] = [
+ { title: 'Get started', text: 'What can you help me with?' }
+];
+
+export interface ChatConfiguration {
+ appClientId: string;
+ tenantId: string;
+ environmentId?: string;
+ schemaName?: string;
+ directConnectUrl?: string;
+ startConversation: boolean;
+ showTyping: boolean;
+ enableFileUpload: boolean;
+ showReasoning: boolean;
+ showToolCalls: boolean;
+ starterPrompts: IStarterPrompt[];
+}
+
+function optionalText(value: unknown): string | undefined {
+ if (value === undefined) return undefined;
+ if (typeof value !== 'string') throw new Error('Connection settings must be strings.');
+ return value.trim() || undefined;
+}
+
+function flag(value: unknown, fallback: boolean, name: string): boolean {
+ if (value === undefined) return fallback;
+ if (typeof value !== 'boolean') throw new Error(`${name} must be true or false (not a string).`);
+ return value;
+}
+
+function starterPrompts(value: unknown): IStarterPrompt[] {
+ if (value === undefined) return DEFAULT_STARTER_PROMPTS.map(prompt => ({ ...prompt }));
+ if (!Array.isArray(value)) throw new Error('starterPrompts must be an array of { title, text } objects.');
+ return value.map(prompt => {
+ if (!prompt || typeof prompt !== 'object' || Array.isArray(prompt) ||
+ Object.keys(prompt).some(key => key !== 'title' && key !== 'text') ||
+ typeof prompt.title !== 'string' || !prompt.title.trim() ||
+ typeof prompt.text !== 'string' || !prompt.text.trim()) {
+ throw new Error('Each starter prompt must contain only a non-empty title and text.');
+ }
+ return { title: prompt.title.trim(), text: prompt.text.trim() };
+ });
+}
+
+export function normalizeConfiguration(properties: ISidebarAgentApplicationCustomizerProperties): ChatConfiguration {
+ const appClientId = optionalText(properties.appClientId);
+ const tenantId = optionalText(properties.tenantId);
+ const environmentId = optionalText(properties.environmentId);
+ const schemaName = optionalText(properties.schemaName) || optionalText(properties.agentIdentifier);
+ const directConnectUrl = optionalText(properties.directConnectUrl);
+ if (!appClientId || !tenantId) throw new Error('Configure appClientId and tenantId for Microsoft sign-in.');
+ if (!directConnectUrl && (!environmentId || !schemaName)) {
+ throw new Error('Configure environmentId and schemaName for endpoint discovery, or an explicit directConnectUrl.');
+ }
+ if (directConnectUrl) {
+ const url = new URL(directConnectUrl);
+ if (url.protocol !== 'https:' || url.username || url.password || url.hash) {
+ throw new Error('directConnectUrl must be an HTTPS URL without credentials or a fragment.');
+ }
+ }
+ return {
+ appClientId, tenantId, environmentId, schemaName, directConnectUrl,
+ startConversation: flag(properties.startConversation, false, 'startConversation'),
+ showTyping: flag(properties.showTyping, true, 'showTyping'),
+ enableFileUpload: flag(properties.enableFileUpload, true, 'enableFileUpload'),
+ showReasoning: flag(properties.showReasoning, false, 'showReasoning'),
+ showToolCalls: flag(properties.showToolCalls, false, 'showToolCalls'),
+ starterPrompts: starterPrompts(properties.starterPrompts)
+ };
+}
diff --git a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/models/ISidebarAgentProperties.ts b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/models/ISidebarAgentProperties.ts
index fa932070..6ddcd952 100644
--- a/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/models/ISidebarAgentProperties.ts
+++ b/ui/embed/sharepoint-customizer/src/extensions/sidebarAgent/models/ISidebarAgentProperties.ts
@@ -1,10 +1,22 @@
+export interface IStarterPrompt {
+ title: string;
+ text: string;
+}
+
export interface ISidebarAgentApplicationCustomizerProperties {
appClientId: string;
tenantId: string;
environmentId?: string;
+ schemaName?: string;
+ /** Compatibility alias for schemaName. */
agentIdentifier?: string;
directConnectUrl?: string;
+ startConversation?: boolean;
showTyping?: boolean;
+ enableFileUpload?: boolean;
+ showReasoning?: boolean;
+ showToolCalls?: boolean;
+ starterPrompts?: IStarterPrompt[];
headerBackgroundColor?: string;
agentTitle?: string;
}
@@ -13,6 +25,7 @@ export interface ISidebarAgentState {
isPanelOpen: boolean;
currentUserLogin?: string;
chatKey: number;
+ hasOpened: boolean;
}
export interface ISidePanelProps {
diff --git a/ui/embed/sharepoint-customizer/src/svg.d.ts b/ui/embed/sharepoint-customizer/src/svg.d.ts
new file mode 100644
index 00000000..788ae0d8
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/src/svg.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const url: string;
+ export default url;
+}
diff --git a/ui/embed/sharepoint-customizer/tests/activityDetails.test.cjs b/ui/embed/sharepoint-customizer/tests/activityDetails.test.cjs
new file mode 100644
index 00000000..93183b07
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/activityDetails.test.cjs
@@ -0,0 +1,191 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const { emptyActivityDetails, updateActivityDetails } = require('../temp/tests/components/Chat/activityDetails');
+const { thought, toolCall, standardPlan, standardStep } = require('./fixtures/sdkActivities.cjs');
+const tool = (valueType, value = {}) => ({ type: 'event', valueType, value: { taskDialogId: 'lookup', stepId: 'call1', ...value } });
+const visible = { showReasoning: true, showToolCalls: true };
+
+for (const showReasoning of [false, true]) {
+ for (const showToolCalls of [false, true]) {
+ test(`independent visibility: reasoning=${showReasoning}, tools=${showToolCalls}`, () => {
+ const flags = { showReasoning, showToolCalls };
+ let state = updateActivityDetails(emptyActivityDetails(), thought('Checking sources', 1), flags);
+ state = updateActivityDetails(state, tool('DynamicPlanStepTriggered'), flags);
+ assert.equal(state.entries.filter(e => e.kind === 'reasoning').length, Number(showReasoning));
+ assert.equal(state.entries.filter(e => e.kind === 'tool').length, Number(showToolCalls));
+ });
+ }
+}
+test('cumulative text replaces, explicit deltas append, duplicate/old sequences are ignored', () => {
+ let state = emptyActivityDetails();
+ for (const activity of [
+ thought('Checking', 1), thought('Checking sources', 2, 'replace'),
+ thought(' now', 3, 'delta'), thought(' duplicate', 3, 'delta'), thought('old', 1)
+ ]) state = updateActivityDetails(state, activity, visible);
+ assert.equal(state.entries.length, 1);
+ assert.equal(state.entries[0].text, 'Checking sources now');
+});
+test('thought deltas use entity text and the initial activity ID, then a replacement snapshot replaces the accumulated text', () => {
+ let state = emptyActivityDetails();
+ for (const activity of [thought('Check ', 1), thought('the list', 2), thought('Check the list', 3, 'replace')]) {
+ state = updateActivityDetails(state, activity, visible);
+ }
+ assert.equal(state.entries.length, 1);
+ assert.equal(state.entries[0].id, 'reasoning:answer-stream:0');
+ assert.equal(state.entries[0].text, 'Check the list');
+});
+test('separate thought chains and sequence numbers do not share accumulated text', () => {
+ let state = emptyActivityDetails();
+ for (const properties of [
+ { chainOfThoughtId: 'chain-a', sequenceNumber: 0 },
+ { chainOfThoughtId: 'chain-a', sequenceNumber: 1 },
+ { chainOfThoughtId: 'chain-b', sequenceNumber: 0 }
+ ]) state = updateActivityDetails(state, thought('Check', 1, 'delta', properties), visible);
+ assert.equal(state.entries.length, 3);
+ assert.ok(state.entries.every(entry => entry.text === 'Check'));
+});
+test('toolCall entities correlate by call ID even when multiple calls share a stream and tool name', () => {
+ let state = emptyActivityDetails();
+ for (const activity of [
+ toolCall('started', { toolCallId: 'first', streamSequence: 1 }),
+ toolCall('started', { toolCallId: 'second', streamSequence: 2 }),
+ toolCall('completed', { toolCallId: 'first', streamSequence: 3 }),
+ toolCall('started', { toolCallId: 'first', streamSequence: 4 }),
+ toolCall('started', { toolCallId: 'second', streamSequence: 1 })
+ ]) state = updateActivityDetails(state, activity, visible);
+ assert.deepEqual(state.entries.map(({ id, kind, text, status }) => ({ id, kind, text, status })), [
+ { id: 'tool:first', kind: 'tool', text: 'Get items', status: 'finished' },
+ { id: 'tool:second', kind: 'tool', text: 'Get items', status: 'running' }
+ ]);
+ assert.ok(!JSON.stringify(state).includes('PRIVATE_'));
+});
+test('untyped informative messages, malformed tool entities and unknown tool status do not become reasoning or tool calls', () => {
+ const state = emptyActivityDetails();
+ for (const activity of [
+ { type: 'typing', text: 'Get items completed', channelData: { streamType: 'informative' } },
+ { type: 'typing', text: 'Working', entities: [{ type: 'streaminfo', streamType: 'informative' }] },
+ { type: 'typing', entities: [{ type: 'thought', text: { private: true } }] },
+ toolCall('started', { toolCallId: '' }), toolCall('unknown')
+ ]) assert.strictEqual(updateActivityDetails(state, activity, visible), state);
+});
+test('entity-only stream metadata retains ordering and correlates the thought stream', () => {
+ const first = thought('Check', 1, 'replace');
+ const second = thought('Check the list', 2, 'replace');
+ delete first.channelData;
+ delete second.channelData;
+ let state = updateActivityDetails(emptyActivityDetails(), first, visible);
+ state = updateActivityDetails(state, second, visible);
+ assert.equal(state.entries.length, 1);
+ assert.equal(state.entries[0].text, 'Check the list');
+ assert.equal(state.entries[0].sequence, 2);
+});
+test('tool names and lifecycle exclude arguments and outputs while step reasoning has its own entry', () => {
+ let state = updateActivityDetails(emptyActivityDetails(), tool('DynamicPlanReceived', {
+ toolDefinitions: [{ schemaName: 'lookup', displayName: 'Look up a record' }]
+ }), visible);
+ state = updateActivityDetails(state, tool('DynamicPlanStepTriggered', { thought: 'Look up the requested record.', arguments: { secret: 'hidden' } }), visible);
+ state = updateActivityDetails(state, tool('DynamicPlanStepFinished', { output: 'hidden' }), visible);
+ state = updateActivityDetails(state, tool('DynamicPlanStepTriggered'), visible);
+ assert.equal(state.entries.find(entry => entry.kind === 'tool').text, 'Look up a record');
+ assert.equal(state.entries.find(entry => entry.kind === 'tool').status, 'finished');
+ assert.equal(state.entries.find(entry => entry.kind === 'reasoning').text, 'Look up the requested record.');
+ assert.ok(!JSON.stringify(state).includes('hidden'));
+ assert.ok(!JSON.stringify(state).includes('private'));
+});
+test('ordinary answer streaming, malformed, and unknown events do not become reasoning or tools', () => {
+ const state = emptyActivityDetails();
+ for (const activity of [null, {}, 'bad', { type: 'typing', text: 'answer', channelData: { streamType: 'streaming' } },
+ tool('unknown'), { type: 'message', text: 'Final answer' }]) {
+ assert.strictEqual(updateActivityDetails(state, activity, visible), state);
+ }
+ assert.deepEqual(emptyActivityDetails().entries, []);
+});
+
+test('numeric step IDs preserve separate invocations of the same tool', () => {
+ let state = emptyActivityDetails();
+ for (const stepId of [0, 1]) {
+ state = updateActivityDetails(state, tool('DynamicPlanStepTriggered', { stepId }), visible);
+ }
+ state = updateActivityDetails(state, tool('DynamicPlanStepFinished', { stepId: 0 }), visible);
+ assert.deepEqual(state.entries.map(({ id, status }) => ({ id, status })), [
+ { id: 'tool:standard:["","0"]', status: 'finished' }, { id: 'tool:standard:["","1"]', status: 'running' }
+ ]);
+});
+
+test('unknown tool names cannot resolve to inherited object properties', () => {
+ const state = updateActivityDetails(emptyActivityDetails(), tool('DynamicPlanStepTriggered', {
+ taskDialogId: 'toString'
+ }), visible);
+ assert.equal(state.entries[0].text, 'toString');
+});
+
+for (const showReasoning of [false, true]) {
+ for (const showToolCalls of [false, true]) {
+ test(`standard mapping is independent: reasoning=${showReasoning}, tools=${showToolCalls}`, () => {
+ const flags = { showReasoning, showToolCalls };
+ let state = emptyActivityDetails();
+ for (const activity of [
+ standardPlan(),
+ standardStep('DynamicPlanStepTriggered', { thought: 'Check the weather for the requested city.', state: 'inProgress' }),
+ standardStep('DynamicPlanStepBindUpdate', { arguments: { Location: 'PRIVATE_CITY' }, thought: 'PRIVATE_BIND_THOUGHT' }),
+ standardStep('DynamicPlanStepFinished', { result: 'PRIVATE_RESULT', thought: 'PRIVATE_FINISH_THOUGHT' })
+ ]) state = updateActivityDetails(state, activity, flags);
+ assert.equal(state.entries.filter(entry => entry.kind === 'reasoning').length, Number(showReasoning));
+ assert.equal(state.entries.filter(entry => entry.kind === 'tool').length, Number(showToolCalls));
+ if (showReasoning) assert.equal(state.entries.find(entry => entry.kind === 'reasoning').text, 'Check the weather for the requested city.');
+ if (showToolCalls) {
+ assert.equal(state.entries.find(entry => entry.kind === 'tool').text, 'Get current weather');
+ assert.equal(state.entries.find(entry => entry.kind === 'tool').status, 'finished');
+ }
+ assert.ok(!JSON.stringify(state).includes('PRIVATE_'));
+ });
+ }
+}
+
+test('standard step snapshots replace, deduplicate, and stay separate across steps and plans', () => {
+ let state = updateActivityDetails(emptyActivityDetails(), standardStep('DynamicPlanStepTriggered', { thought: 'Check Seattle.' }), visible);
+ const same = updateActivityDetails(state, standardStep('DynamicPlanStepTriggered', { thought: 'Check Seattle.' }), visible);
+ assert.strictEqual(same, state);
+ state = updateActivityDetails(state, standardStep('DynamicPlanStepTriggered', { thought: 'Check Seattle in metric units.' }), visible);
+ state = updateActivityDetails(state, standardStep('DynamicPlanStepTriggered', { stepId: 'second', thought: 'Check London.' }), visible);
+ state = updateActivityDetails(state, standardStep('DynamicPlanStepTriggered', { planIdentifier: 'another-plan', thought: 'Check Paris.' }), visible);
+ assert.deepEqual(state.entries.filter(entry => entry.kind === 'reasoning').map(entry => entry.text),
+ ['Check Seattle in metric units.', 'Check London.', 'Check Paris.']);
+ assert.equal(new Set(state.entries.map(entry => entry.id)).size, 6);
+});
+
+test('standard event names are accepted when valueType is absent, but arbitrary thought fields are not', () => {
+ const event = standardStep('DynamicPlanStepTriggered', { thought: 'Check the weather.' });
+ delete event.valueType;
+ const state = updateActivityDetails(emptyActivityDetails(), event, visible);
+ assert.equal(state.entries.length, 2);
+ for (const activity of [
+ { type: 'message', name: event.name, value: event.value },
+ { type: 'event', name: 'UnknownEvent', value: event.value },
+ standardStep('DynamicPlanStepTriggered', { thought: { text: 'PRIVATE_NESTED' } }),
+ standardStep('DynamicPlanStepTriggered', { thought: ' ' }),
+ standardStep('DynamicPlanStepTriggered', { thought: 'Uncorrelated', stepId: '', taskDialogId: '' })
+ ]) {
+ const next = updateActivityDetails(emptyActivityDetails(), activity, { showReasoning: true, showToolCalls: false });
+ assert.deepEqual(next.entries, []);
+ }
+});
+
+test('standard binding updates identify an ongoing tool step without exposing inputs or inventing completion', () => {
+ let state = updateActivityDetails(emptyActivityDetails(), standardPlan(), visible);
+ state = updateActivityDetails(state, standardStep('DynamicPlanStepBindUpdate', { arguments: { Location: 'PRIVATE_CITY' } }), visible);
+ assert.deepEqual(state.entries.map(({ kind, text, status }) => ({ kind, text, status })),
+ [{ kind: 'tool', text: 'Get current weather', status: 'running' }]);
+ state = updateActivityDetails(state, standardStep('DynamicPlanStepFinished'), visible);
+ const late = updateActivityDetails(state, standardStep('DynamicPlanStepBindUpdate'), visible);
+ assert.strictEqual(late, state);
+ assert.equal(state.entries[0].status, 'finished');
+});
+
+test('standard correlation keeps opaque plan and step identifiers distinct', () => {
+ let state = emptyActivityDetails();
+ for (const [planIdentifier, stepId] of [['a:b', 'c'], ['a', 'b:c'], ['plan', '\uD800']]) {
+ state = updateActivityDetails(state, standardStep('DynamicPlanStepTriggered', { planIdentifier, stepId }), visible);
+ }
+ assert.equal(new Set(state.entries.map(entry => entry.id)).size, 3);
+});
diff --git a/ui/embed/sharepoint-customizer/tests/attachments.test.cjs b/ui/embed/sharepoint-customizer/tests/attachments.test.cjs
new file mode 100644
index 00000000..5d5280a2
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/attachments.test.cjs
@@ -0,0 +1,36 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const { MAX_FILE_BYTES, validateFile, prepareAttachments } = require('../temp/tests/components/Chat/attachments');
+
+test('supported files include the exact byte limit but not one byte over', () => {
+ assert.equal(validateFile('REPORT.PDF', MAX_FILE_BYTES), 'application/pdf');
+ assert.throws(() => validateFile('report.pdf', MAX_FILE_BYTES + 1), /15 MiB/);
+ for (const size of [0, -1, NaN, Infinity]) assert.throws(() => validateFile('empty.txt', size), /empty|read/);
+ assert.throws(() => validateFile('script.exe', 1), /not supported/);
+});
+test('local bytes retain name and get a meaningful MIME type instead of the blob transport type', async () => {
+ const result = await prepareAttachments(
+ [{ name: 'notes.txt', contentType: 'application/octet-stream', contentUrl: 'blob:local' }],
+ true,
+ async () => new Response('a small fixture')
+ );
+ assert.deepEqual(result, [{
+ name: 'notes.txt', contentType: 'text/plain',
+ contentUrl: `data:text/plain;base64,${Buffer.from('a small fixture').toString('base64')}`
+ }]);
+});
+test('multiple local attachments and attachment-only messages need no text', async () => {
+ const input = ['one.txt', 'two.csv'].map(name => ({ name, contentType: '', contentUrl: `blob:${name}` }));
+ const result = await prepareAttachments(input, true, async () => new Response('fixture'));
+ assert.equal(result.length, 2);
+ assert.equal(result[1].contentType, 'text/csv');
+ assert.equal(input[0].contentUrl, 'blob:one.txt');
+});
+test('disabled uploads, remote URLs and unreadable files fail before sending', async () => {
+ const attachment = { name: 'file.txt', contentType: 'text/plain', contentUrl: 'blob:file' };
+ await assert.rejects(prepareAttachments([attachment], false), /disabled/);
+ await assert.rejects(prepareAttachments([{ ...attachment, contentUrl: 'https://example.com/file' }], true), /local file/);
+ await assert.rejects(prepareAttachments([attachment], true, async () => new Response('', { status: 404 })), /Could not read/);
+ await assert.rejects(prepareAttachments([attachment], true, async () => { throw new Error('read failed'); }), /read failed/);
+ assert.deepEqual(await prepareAttachments([], false), []);
+});
diff --git a/ui/embed/sharepoint-customizer/tests/auth.test.cjs b/ui/embed/sharepoint-customizer/tests/auth.test.cjs
new file mode 100644
index 00000000..034a5ce4
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/auth.test.cjs
@@ -0,0 +1,143 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const msal = require('@azure/msal-browser');
+const {
+ InteractionRequiredAuthError, BrowserAuthError, BrowserAuthErrorCodes, ServerError
+} = msal;
+const { acquireToken, SignInRequiredError } = require('../temp/tests/components/Chat/acquireToken');
+
+let application = 0;
+
+function fixture(t, handlers = {}, accounts = []) {
+ const calls = [];
+ const settings = {
+ appClientId: `00000000-0000-4000-8000-${String(++application).padStart(12, '0')}`,
+ tenantId: '00000000-0000-4000-8000-000000000000',
+ currentUserLogin: 'user@example.com',
+ redirectUri: 'https://example.com/sites/review',
+ scopes: ['https://api.powerplatform.com/CopilotStudio.Copilots.Invoke']
+ };
+ t.mock.method(console, 'warn', () => {});
+ const instance = { getAllAccounts: () => accounts };
+ for (const method of ['initialize', 'acquireTokenSilent', 'ssoSilent', 'acquireTokenPopup']) {
+ instance[method] = async request => {
+ calls.push({ method, request });
+ if (handlers[method]) return handlers[method](request);
+ if (method === 'initialize') return;
+ throw new Error(`Unexpected ${method}`);
+ };
+ }
+ t.mock.method(msal, 'PublicClientApplication', function () { return instance; });
+ return { settings, calls, methods: () => calls.map(call => call.method) };
+}
+
+const timeout = () => new BrowserAuthError(BrowserAuthErrorCodes.monitorWindowTimeout);
+const interaction = () => new InteractionRequiredAuthError('interaction_required');
+
+test('cached token uses the matching SharePoint user and requested SDK scope', async t => {
+ const account = { username: 'USER@example.com' };
+ const f = fixture(t, { acquireTokenSilent: () => ({ accessToken: 'cached-token' }) }, [
+ { username: 'someone-else@example.com' }, account
+ ]);
+ assert.equal(await acquireToken(f.settings), 'cached-token');
+ assert.deepEqual(f.methods(), ['initialize', 'acquireTokenSilent']);
+ assert.equal(f.calls[1].request.account, account);
+ assert.deepEqual(f.calls[1].request.scopes, f.settings.scopes);
+});
+
+test('uncached user can still sign in silently with the SharePoint login hint', async t => {
+ const f = fixture(t, { ssoSilent: () => ({ accessToken: 'sso-token' }) });
+ assert.equal(await acquireToken(f.settings), 'sso-token');
+ assert.deepEqual(f.methods(), ['initialize', 'ssoSilent']);
+ assert.equal(f.calls[1].request.loginHint, f.settings.currentUserLogin);
+});
+
+for (const failure of [timeout, interaction]) {
+ for (const cached of [false, true]) {
+ test(`${failure().errorCode} offers sign-in without another iframe or automatic popup (cached=${cached})`, async t => {
+ const method = cached ? 'acquireTokenSilent' : 'ssoSilent';
+ const f = fixture(t, { [method]: () => { throw failure(); } },
+ cached ? [{ username: 'user@example.com' }] : []);
+ await assert.rejects(acquireToken(f.settings), SignInRequiredError);
+ assert.deepEqual(f.methods(), ['initialize', method]);
+ });
+ }
+}
+
+test('explicit sign-in goes directly to the popup after an iframe timeout', async t => {
+ const f = fixture(t, {
+ ssoSilent: () => { throw timeout(); },
+ acquireTokenPopup: () => ({ accessToken: 'interactive-token' })
+ });
+ await assert.rejects(acquireToken(f.settings), SignInRequiredError);
+ assert.equal(await acquireToken(f.settings, true), 'interactive-token');
+ assert.deepEqual(f.methods(), ['initialize', 'ssoSilent', 'acquireTokenPopup']);
+ assert.deepEqual(f.calls[2].request, {
+ scopes: f.settings.scopes, loginHint: f.settings.currentUserLogin
+ });
+});
+
+test('popup cancellation is surfaced and an explicit retry does not repeat silent sign-in', async t => {
+ const failure = new BrowserAuthError(BrowserAuthErrorCodes.userCancelled);
+ let cancelled = true;
+ const f = fixture(t, {
+ acquireTokenPopup: () => {
+ if (cancelled) throw failure;
+ return { accessToken: 'retry-token' };
+ }
+ });
+ await assert.rejects(acquireToken(f.settings, true), error => error === failure);
+ cancelled = false;
+ assert.equal(await acquireToken(f.settings, true), 'retry-token');
+ assert.deepEqual(f.methods(), ['initialize', 'acquireTokenPopup', 'acquireTokenPopup']);
+});
+
+test('unexpected silent errors are preserved instead of disguised as sign-in requests', async t => {
+ const failure = new Error('Authority configuration is invalid');
+ const f = fixture(t, { ssoSilent: () => { throw failure; } });
+ await assert.rejects(acquireToken(f.settings), error => error === failure);
+ assert.deepEqual(f.methods(), ['initialize', 'ssoSilent']);
+});
+
+test('Entra server errors retain their full AADSTS message', async t => {
+ const failure = new ServerError('invalid_request',
+ 'AADSTS50011: The redirect URI https://example.com/sites/review does not match the configured redirect URIs.');
+ const f = fixture(t, { ssoSilent: () => { throw failure; } });
+ await assert.rejects(acquireToken(f.settings), error => error === failure && error.message.includes('AADSTS50011'));
+});
+
+test('interaction-required failures retain the original Entra details when offering sign-in', async t => {
+ const failure = new InteractionRequiredAuthError('consent_required',
+ 'AADSTS65001: The user or administrator has not consented to use the application.');
+ const f = fixture(t, { ssoSilent: () => { throw failure; } });
+ await assert.rejects(acquireToken(f.settings), error =>
+ error instanceof SignInRequiredError && error.cause === failure && error.message === failure.message);
+});
+
+test('an unrelated cached account is not used for the current SharePoint user', async t => {
+ const f = fixture(t, { ssoSilent: () => ({ accessToken: 'current-user-token' }) }, [
+ { username: 'someone-else@example.com' }
+ ]);
+ assert.equal(await acquireToken(f.settings), 'current-user-token');
+ assert.deepEqual(f.methods(), ['initialize', 'ssoSilent']);
+});
+
+test('no account or login hint offers sign-in without an invalid silent SSO request', async t => {
+ const f = fixture(t);
+ delete f.settings.currentUserLogin;
+ await assert.rejects(acquireToken(f.settings), SignInRequiredError);
+ assert.deepEqual(f.methods(), ['initialize']);
+});
+
+test('failed MSAL initialization can be retried', async t => {
+ const failure = new Error('Initialization unavailable');
+ let failed = true;
+ const f = fixture(t, {
+ initialize: () => { if (failed) throw failure; },
+ ssoSilent: () => ({ accessToken: 'retry-token' })
+ });
+ await assert.rejects(acquireToken(f.settings), error => error === failure);
+ failed = false;
+ assert.equal(await acquireToken(f.settings), 'retry-token');
+ assert.deepEqual(f.methods(), ['initialize', 'initialize', 'ssoSilent']);
+});
diff --git a/ui/embed/sharepoint-customizer/tests/configuration.test.cjs b/ui/embed/sharepoint-customizer/tests/configuration.test.cjs
new file mode 100644
index 00000000..6b6b32ad
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/configuration.test.cjs
@@ -0,0 +1,63 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const { normalizeConfiguration } = require('../temp/tests/configuration');
+const { createSideloadUrl, COMPONENT_ID } = require('../scripts/sideload.cjs');
+const properties = { appClientId: 'client', tenantId: 'tenant', environmentId: 'environment', schemaName: 'agent' };
+
+test('discovery settings default uploads and typing on, details off', () => {
+ assert.deepEqual(normalizeConfiguration(properties), {
+ ...properties, directConnectUrl: undefined, startConversation: false, showTyping: true, enableFileUpload: true,
+ showReasoning: false, showToolCalls: false,
+ starterPrompts: [{ title: 'Get started', text: 'What can you help me with?' }]
+ });
+});
+test('legacy identifier remains supported, canonical schema takes precedence', () => {
+ assert.equal(normalizeConfiguration({ ...properties, schemaName: undefined, agentIdentifier: 'legacy' }).schemaName, 'legacy');
+ assert.equal(normalizeConfiguration({ ...properties, agentIdentifier: 'legacy' }).schemaName, 'agent');
+});
+test('explicit direct URLs remain supported without environment or schema', () => {
+ assert.equal(normalizeConfiguration({ appClientId: 'c', tenantId: 't', directConnectUrl: 'https://example.com/bot' }).directConnectUrl, 'https://example.com/bot');
+ assert.throws(() => normalizeConfiguration({ ...properties, directConnectUrl: 'http://example.com' }), /HTTPS/);
+});
+test('missing properties and malformed flags fail visibly', () => {
+ assert.throws(() => normalizeConfiguration({ ...properties, tenantId: ' ' }), /tenantId/);
+ assert.throws(() => normalizeConfiguration({ ...properties, schemaName: '' }), /schemaName/);
+ assert.throws(() => normalizeConfiguration({ ...properties, showReasoning: 'false' }), /boolean|true or false/);
+});
+test('debug URL preserves page parameters and round-trips JSON exactly', () => {
+ const config = { ...properties, agentTitle: 'Help & files #1', startConversation: true, showReasoning: true, showToolCalls: false,
+ starterPrompts: [{ title: 'A & B', text: 'Explain A & B.' }] };
+ const url = new URL(createSideloadUrl('https://example.sharepoint.com/sites/dev/?view=1', config));
+ assert.equal(url.searchParams.get('view'), '1');
+ assert.equal(url.searchParams.get('loadSPFX'), 'true');
+ assert.equal(url.searchParams.get('debugManifestsFile'), 'https://localhost:4321/temp/build/manifests.js');
+ assert.deepEqual(JSON.parse(url.searchParams.get('customActions'))[COMPONENT_ID], {
+ location: 'ClientSideExtension.ApplicationCustomizer', properties: config
+ });
+ assert.equal(JSON.parse(url.searchParams.get('customActions'))[COMPONENT_ID].properties.directConnectUrl, undefined);
+});
+test('automatic conversation start is opt-in and requires a boolean', () => {
+ assert.equal(normalizeConfiguration(properties).startConversation, false);
+ assert.equal(normalizeConfiguration({ ...properties, startConversation: true }).startConversation, true);
+ assert.equal(normalizeConfiguration({ ...properties, startConversation: false }).startConversation, false);
+ for (const startConversation of [null, 'false', 0, {}]) {
+ assert.throws(() => normalizeConfiguration({ ...properties, startConversation }), /startConversation/);
+ assert.throws(() => createSideloadUrl('https://example.com', { ...properties, startConversation }), /startConversation/);
+ }
+});
+test('starter prompts accept custom text or an empty list, and reject malformed or extra fields', () => {
+ assert.deepEqual(normalizeConfiguration({ ...properties, starterPrompts: [] }).starterPrompts, []);
+ assert.deepEqual(normalizeConfiguration({ ...properties, starterPrompts: [{ title: ' Start ', text: ' Help me ' }] }).starterPrompts,
+ [{ title: 'Start', text: 'Help me' }]);
+ for (const starterPrompts of [null, 'text', [{}], [{ title: 'Start', text: '' }],
+ [{ title: 'Start', text: 'Hello', clientSecret: 'not-allowed' }]]) {
+ assert.throws(() => normalizeConfiguration({ ...properties, starterPrompts }), /starter prompt|starterPrompts/);
+ assert.throws(() => createSideloadUrl('https://example.com', { ...properties, starterPrompts }), /starterPrompts/);
+ }
+});
+test('debug URL rejects credentials, unknown properties, missing settings, and non-HTTPS manifests', () => {
+ assert.throws(() => createSideloadUrl('https://example.com', { ...properties, accessToken: 'secret' }), /Unknown property/);
+ assert.throws(() => createSideloadUrl('https://example.com', {}), /Provide/);
+ assert.throws(() => createSideloadUrl('https://user:password@example.com', properties), /credentials/);
+ assert.throws(() => createSideloadUrl('https://example.com', properties, 'http://localhost:4321/manifest.js'), /HTTPS/);
+});
diff --git a/ui/embed/sharepoint-customizer/tests/connection.test.cjs b/ui/embed/sharepoint-customizer/tests/connection.test.cjs
new file mode 100644
index 00000000..f3a53917
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/connection.test.cjs
@@ -0,0 +1,271 @@
+const { test, mock } = require('node:test');
+const assert = require('node:assert/strict');
+const { Observable, BehaviorSubject, Subject, take } = require('rxjs');
+const { Activity } = require('@microsoft/agents-activity');
+const { CopilotStudioWebChat } = require('@microsoft/agents-copilotstudio-client');
+const { createConnection, wrapConnection } = require('../temp/tests/components/Chat/createConnection');
+const { normalizeConfiguration } = require('../temp/tests/configuration');
+
+function fixture(postActivity, visibility = {}, initializeConversation) {
+ const received = new Subject();
+ const failures = [];
+ let starts = 0;
+ let ends = 0;
+ let subscriptions = 0;
+ const base = {
+ connectionStatus$: new BehaviorSubject(2),
+ activity$: new Observable(subscriber => {
+ subscriptions++;
+ return received.subscribe(subscriber);
+ }),
+ postActivity,
+ end() { received.complete(); },
+ conversationId: undefined
+ };
+ const connection = wrapConnection(base, {
+ startConversation: false, enableFileUpload: true, showTyping: false,
+ showReasoning: false, showToolCalls: false, starterPrompts: [], ...visibility
+ }, {
+ onError(error) { failures.push(error.message); },
+ onTurn() { starts++; },
+ onTurnEnd() { ends++; }
+ }, initializeConversation);
+ return { connection, received, failures, counts: () => ({ starts, ends, subscriptions }) };
+}
+
+test('both opening modes pass their startConversation setting to the SDK', () => {
+ const base = {
+ activity$: new Subject(), connectionStatus$: new BehaviorSubject(2),
+ postActivity: () => new Observable(), end() {}
+ };
+ const create = mock.method(CopilotStudioWebChat, 'createConnection', () => base);
+ try {
+ for (const startConversation of [undefined, true, false]) {
+ const configuration = normalizeConfiguration({
+ appClientId: 'client', tenantId: 'tenant', environmentId: 'environment', schemaName: 'agent', startConversation
+ });
+ const connection = createConnection({}, configuration, { onTurn() {}, onTurnEnd() {}, onError() {} });
+ assert.deepEqual(create.mock.calls.at(-1).arguments[1], { showTyping: true, startConversation: startConversation === true });
+ connection.end();
+ }
+ } finally {
+ create.mock.restore();
+ }
+});
+
+test('automatic start hides local starter cards without dropping the agent greeting', () => {
+ const f = fixture(() => new Observable(), { startConversation: true });
+ const visible = [];
+ const subscription = f.connection.activity$.subscribe(activity => visible.push(activity));
+ assert.deepEqual(visible, []);
+ f.received.next({ type: 'message', id: 'greeting', text: 'Welcome from the agent' });
+ assert.deepEqual(visible.map(activity => activity.text), ['Welcome from the agent']);
+ subscription.unsubscribe();
+ f.connection.end();
+});
+
+test('response errors are still observed after WebChat takes the first send acknowledgement', async () => {
+ let response;
+ const f = fixture(() => new Observable(subscriber => {
+ response = subscriber;
+ subscriber.next('sent-id');
+ }));
+ const acknowledgements = [];
+ f.connection.postActivity(new Activity('message')).pipe(take(1)).subscribe(id => acknowledgements.push(id));
+ await new Promise(resolve => setImmediate(resolve));
+ assert.deepEqual(acknowledgements, ['sent-id']);
+ assert.equal(response.closed, false);
+ response.error(new Error('Service response failed'));
+ assert.deepEqual(f.failures, ['Service response failed']);
+ assert.equal(f.counts().ends, 1);
+ f.connection.end();
+});
+
+test('single incoming subscription filters private detail events but preserves answer streaming', () => {
+ const f = fixture(() => new Observable());
+ const visible = [];
+ const subscription = f.connection.activity$.subscribe(activity => visible.push(activity));
+ f.received.next({ type: 'typing', text: 'private progress', channelData: { streamType: 'informative' } });
+ f.received.next({ type: 'event', valueType: 'DynamicPlanStepTriggered', value: { arguments: 'private' } });
+ f.received.next({ type: 'typing' });
+ f.received.next({ type: 'typing', text: 'Partial answer', channelData: { streamType: 'streaming' } });
+ f.received.next({ type: 'message', id: 'final', text: 'Final answer' });
+ assert.equal(f.counts().subscriptions, 1);
+ assert.deepEqual(visible.map(activity => activity.text), ['', 'Partial answer', 'Final answer']);
+ subscription.unsubscribe();
+ f.connection.end();
+});
+
+test('ending the connection prevents late activity and releases outstanding response subscriptions', async () => {
+ let response;
+ const f = fixture(() => new Observable(subscriber => {
+ response = subscriber;
+ subscriber.next('sent');
+ }));
+ f.connection.postActivity(new Activity('message')).pipe(take(1)).subscribe();
+ await new Promise(resolve => setImmediate(resolve));
+ f.connection.end();
+ assert.equal(response.closed, true);
+ response.error(new Error('Late failure'));
+ assert.deepEqual(f.failures, []);
+});
+
+test('startup messages are replayed to the transcript with one SDK subscription and no private replay', () => {
+ const f = fixture(() => new Observable());
+ const startup = f.connection.activity$.subscribe();
+ f.received.next({ type: 'message', text: 'Welcome' });
+ f.received.next({ type: 'typing', text: 'Progress', channelData: { streamType: 'informative' } });
+ f.received.next({ type: 'event', name: 'turn.complete' });
+ const transcript = [];
+ const subscription = f.connection.activity$.subscribe(activity => transcript.push(activity));
+ assert.equal(f.counts().subscriptions, 1);
+ assert.deepEqual(transcript.map(activity => activity.text), ['', 'Welcome']);
+ assert.ok(transcript[0].id);
+ assert.ok(transcript[1].id);
+ startup.unsubscribe();
+ f.received.next({ type: 'message', text: 'Still connected' });
+ assert.equal(transcript.length, 3);
+ subscription.unsubscribe();
+ f.connection.end();
+});
+
+test('native activity groups finish when the SDK response completes without a turn.complete event', async () => {
+ let response;
+ const f = fixture(() => new Observable(subscriber => {
+ response = subscriber;
+ subscriber.next('sent-id');
+ }), { showReasoning: true });
+ const visible = [];
+ const subscription = f.connection.activity$.subscribe(activity => visible.push(activity));
+ f.connection.postActivity(new Activity('message')).pipe(take(1)).subscribe();
+ await new Promise(resolve => setImmediate(resolve));
+ f.received.next({
+ type: 'typing', entities: [{ type: 'thought', text: 'Checking the request', sequenceNumber: 0 }],
+ channelData: { streamType: 'streaming', streamId: 'thought-stream', streamSequence: 1, chunkType: 'delta' }
+ });
+ response.complete();
+ const details = visible.filter(activity => activity.id.includes(':reasoning:'));
+ assert.equal(details.length, 2);
+ assert.equal(details[0].entities[0].isPartOf.creativeWorkStatus, 'Incomplete');
+ assert.equal(details[1].entities[0].isPartOf.creativeWorkStatus, 'Published');
+ assert.equal(details[0].id, details[1].id);
+ subscription.unsubscribe();
+ f.connection.end();
+});
+
+test('response failure stops native progress without claiming success', async () => {
+ let response;
+ const f = fixture(() => new Observable(subscriber => {
+ response = subscriber;
+ subscriber.next('sent-id');
+ }), { showToolCalls: true });
+ const visible = [];
+ const subscription = f.connection.activity$.subscribe(activity => visible.push(activity));
+ f.connection.postActivity(new Activity('message')).pipe(take(1)).subscribe();
+ await new Promise(resolve => setImmediate(resolve));
+ f.received.next({ type: 'event', valueType: 'DynamicPlanStepTriggered', value: { taskDialogId: 'lookup', stepId: 1 } });
+ response.error(new Error('Response interrupted'));
+ const last = visible[visible.length - 1];
+ assert.equal(last.entities[0].isPartOf.creativeWorkStatus, 'Failed');
+ assert.equal(last.entities[0].creativeWorkStatus, undefined);
+ assert.equal(last.text, 'No finish event received.');
+ assert.deepEqual(f.failures, ['Response interrupted']);
+ subscription.unsubscribe();
+ f.connection.end();
+});
+
+test('cancellation before acknowledgment releases the busy state and response subscription', async () => {
+ let response;
+ const f = fixture(() => new Observable(subscriber => { response = subscriber; }));
+ const subscription = f.connection.postActivity(new Activity('message')).subscribe();
+ await new Promise(resolve => setImmediate(resolve));
+ subscription.unsubscribe();
+ assert.equal(response.closed, true);
+ assert.deepEqual(f.counts(), { starts: 1, ends: 1, subscriptions: 0 });
+ f.connection.end();
+});
+
+test('synchronous send failures are surfaced and release the busy state', async () => {
+ const f = fixture(() => { throw new Error('Cannot send'); });
+ const failures = [];
+ f.connection.postActivity(new Activity('message')).subscribe({ error: error => failures.push(error.message) });
+ await new Promise(resolve => setImmediate(resolve));
+ assert.deepEqual(failures, ['Cannot send']);
+ assert.deepEqual(f.failures, ['Cannot send']);
+ assert.equal(f.counts().ends, 1);
+ f.connection.end();
+});
+
+test('startup failures use DirectLine failed status instead of an unhandled observable error', () => {
+ const f = fixture(() => new Observable());
+ let completed = false;
+ f.connection.activity$.subscribe({ complete: () => { completed = true; } });
+ f.received.error(new Error('Discovery unavailable'));
+ assert.deepEqual(f.failures, ['Discovery unavailable']);
+ assert.equal(f.connection.connectionStatus$.value, 4);
+ assert.equal(completed, true);
+ f.connection.end();
+});
+
+test('attachment preparation holds busy state and cancellation prevents a late send', async t => {
+ let resolveRead;
+ t.mock.method(globalThis, 'fetch', () => new Promise(resolve => { resolveRead = resolve; }));
+ let sends = 0;
+ const f = fixture(() => { sends++; return new Observable(); });
+ const subscription = f.connection.postActivity({
+ type: 'message', attachments: [{ name: 'notes.txt', contentType: 'text/plain', contentUrl: 'blob:pending' }]
+ }).subscribe();
+ assert.equal(f.counts().starts, 1);
+ subscription.unsubscribe();
+ assert.equal(f.counts().ends, 1);
+ resolveRead(new Response('fixture'));
+ await new Promise(resolve => setImmediate(resolve));
+ assert.equal(sends, 0);
+ assert.deepEqual(f.failures, []);
+ f.connection.end();
+});
+
+test('attachment validation failure is reported and releases busy state without sending', async () => {
+ let initialized = false;
+ const f = fixture(() => { throw new Error('Must not send'); }, {}, async () => { initialized = true; });
+ f.connection.postActivity({
+ type: 'message', attachments: [{ name: 'notes.txt', contentType: 'text/plain', contentUrl: 'https://example.com/file' }]
+ }).subscribe({ error() {} });
+ await new Promise(resolve => setImmediate(resolve));
+ assert.equal(f.counts().ends, 1);
+ assert.equal(initialized, false);
+ assert.match(f.failures[0], /local file/);
+ f.connection.end();
+});
+
+test('lazy initialization failure is reported and releases busy state without sending the message', async () => {
+ let sends = 0;
+ const f = fixture(() => { sends++; return new Observable(); }, {}, async () => { throw new Error('Cannot create conversation'); });
+ const failures = [];
+ f.connection.postActivity(new Activity('message')).subscribe({ error: error => failures.push(error.message) });
+ await new Promise(resolve => setImmediate(resolve));
+ assert.deepEqual(failures, ['Cannot create conversation']);
+ assert.deepEqual(f.failures, failures);
+ assert.equal(f.counts().ends, 1);
+ assert.equal(sends, 0);
+ f.connection.end();
+});
+
+for (const closeConnection of [false, true]) {
+ test(`cancellation during lazy initialization prevents a late send (closeConnection=${closeConnection})`, async () => {
+ let initialize;
+ let sends = 0;
+ const f = fixture(() => { sends++; return new Observable(); }, {}, () => new Promise(resolve => { initialize = resolve; }));
+ const subscription = f.connection.postActivity(new Activity('message')).subscribe();
+ await new Promise(resolve => setImmediate(resolve));
+ assert.equal(f.counts().starts, 1);
+ if (closeConnection) f.connection.end();
+ else subscription.unsubscribe();
+ initialize();
+ await new Promise(resolve => setImmediate(resolve));
+ assert.equal(sends, 0);
+ assert.deepEqual(f.failures, []);
+ subscription.unsubscribe();
+ f.connection.end();
+ });
+}
diff --git a/ui/embed/sharepoint-customizer/tests/deploy.test.cjs b/ui/embed/sharepoint-customizer/tests/deploy.test.cjs
new file mode 100644
index 00000000..47c008c3
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/deploy.test.cjs
@@ -0,0 +1,438 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs/promises');
+const os = require('node:os');
+const path = require('node:path');
+const { randomUUID } = require('node:crypto');
+const { zipSync, strToU8 } = require('fflate');
+const {
+ loadOptions, elementsXml, inspectPackage, packageFingerprint, runNode,
+ buildPackage, cli, deploy, matchingActions, compareVersions, poll
+} = require('../scripts/deploy.cjs');
+const { validateProperties } = require('../scripts/properties.cjs');
+
+const ROOT = path.resolve(__dirname, '..');
+const CURRENT_VERSION = require('../config/package-solution.json').solution.version;
+const CLIENT = '11111111-1111-4111-8111-111111111111';
+const CATALOG_ID = '44444444-4444-4444-8444-444444444444';
+const ACTION_ID = '55555555-5555-4555-8555-555555555555';
+const SITE = 'https://contoso.sharepoint.com/sites/team';
+const CATALOG = 'https://contoso.sharepoint.com/sites/apps';
+const args = [
+ '--site-url', SITE, '--app-catalog-url', CATALOG, '--app-client-id', CLIENT,
+ '--properties', 'tests/fixtures/deployment.json'
+];
+const options = extra => loadOptions([...args, ...extra], ROOT);
+const quiet = () => {};
+
+async function temporary(t) {
+ const directory = await fs.mkdtemp(path.join(os.tmpdir(), "sidepane tests ' & é-"));
+ t.after(() => fs.rm(directory, { recursive: true, force: true }));
+ return directory;
+}
+
+function packageEntries(config) {
+ const manifest = JSON.stringify({
+ id: config.componentId,
+ loaderConfig: {
+ internalModuleBaseUrls: ['HTTPS://SPCLIENTSIDEASSETLIBRARY/'],
+ scriptResources: { main: { type: 'path', path: 'main.js' } }
+ }
+ }).replace(/"/g, '"');
+ return {
+ 'AppManifest.xml': `${randomUUID()} 'Équipe'",
+ "startConversation": false,
+ "showTyping": true,
+ "enableFileUpload": true,
+ "showReasoning": true,
+ "showToolCalls": false,
+ "starterPrompts": [
+ { "title": "Get started", "text": "How can you help R&D?" }
+ ]
+}
diff --git a/ui/embed/sharepoint-customizer/tests/fixtures/sdkActivities.cjs b/ui/embed/sharepoint-customizer/tests/fixtures/sdkActivities.cjs
new file mode 100644
index 00000000..cd19941e
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/fixtures/sdkActivities.cjs
@@ -0,0 +1,59 @@
+// Synthetic content using the entity/chunk shapes observed from the published SDK stream.
+function thought(text, streamSequence = 1, chunkType = 'delta', properties = {}) {
+ const stream = {
+ streamType: 'streaming', streamSequence,
+ ...(streamSequence === 1 ? {} : { streamId: 'answer-stream' })
+ };
+ return {
+ type: 'typing', id: streamSequence === 1 ? 'answer-stream' : `answer-stream-${streamSequence - 1}`,
+ from: { id: 'bot', role: 'bot' }, text: '',
+ entities: [{
+ type: 'thought', title: '', sequenceNumber: 0, status: 'complete', text,
+ reasonedForSeconds: 0, chainOfThoughtId: '', ...properties
+ }, { type: 'streaminfo', ...stream }],
+ channelData: { ...stream, chunkType, 'webchat:sequence-id': streamSequence }
+ };
+}
+
+function toolCall(status, { toolCallId = 'call', streamSequence = status === 'started' ? 12 : 13, ...properties } = {}) {
+ const stream = { streamType: 'informative', streamId: 'answer-stream', streamSequence };
+ return {
+ type: 'typing', id: `answer-stream-${streamSequence - 1}`,
+ from: { id: 'bot', role: 'bot' }, text: status === 'started' ? 'Calling Get items...' : 'Get items completed',
+ entities: [{
+ type: 'toolCall', toolCallId, toolName: 'get_items', toolDisplayName: 'Get items',
+ operationId: 'GetItems', connectorId: '/providers/Microsoft.PowerApps/apis/shared_sharepointonline',
+ componentSchemaName: 'sample.tool.GetItems', toolCategory: 'Connector', toolKind: 'tool', status,
+ description: 'PRIVATE_DESCRIPTION',
+ filledParameters: { value: 'PRIVATE_INPUT' }, hiddenFilledParameters: { value: 'PRIVATE_HIDDEN_INPUT' },
+ result: { value: 'PRIVATE_RESULT' }, thought: 'PRIVATE_PLANNER_THOUGHT',
+ ...properties
+ }, { type: 'streaminfo', ...stream }],
+ channelData: { ...stream, 'webchat:sequence-id': streamSequence }
+ };
+}
+
+// Standard-harness event envelopes observed on the published SDK route; values are synthetic.
+function standardPlan(value = {}) {
+ return {
+ type: 'event', name: 'DynamicPlanReceived', valueType: 'DynamicPlanReceived',
+ from: { id: 'bot', role: 'bot' },
+ value: {
+ planIdentifier: 'weather-plan', steps: ['sample.CurrentWeather'], isFinalPlan: false,
+ toolDefinitions: [{
+ schemaName: 'sample.CurrentWeather', displayName: 'Get current weather',
+ description: 'PRIVATE_DESCRIPTION', inputs: [{ name: 'PRIVATE_INPUT' }], outputs: [{ name: 'PRIVATE_OUTPUT' }]
+ }],
+ ...value
+ }
+ };
+}
+
+function standardStep(valueType, value = {}) {
+ return {
+ type: 'event', name: valueType, valueType, from: { id: 'bot', role: 'bot' },
+ value: { planIdentifier: 'weather-plan', stepId: 'weather-step', taskDialogId: 'sample.CurrentWeather', ...value }
+ };
+}
+
+module.exports = { thought, toolCall, standardPlan, standardStep };
diff --git a/ui/embed/sharepoint-customizer/tests/lazyStart.test.cjs b/ui/embed/sharepoint-customizer/tests/lazyStart.test.cjs
new file mode 100644
index 00000000..325675f2
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/lazyStart.test.cjs
@@ -0,0 +1,61 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const { filter, firstValueFrom, lastValueFrom, timeout } = require('rxjs');
+const { Activity } = require('@microsoft/agents-activity');
+const { ConnectionSettings, CopilotStudioClient } = require('@microsoft/agents-copilotstudio-client');
+const { normalizeConfiguration } = require('../temp/tests/configuration');
+const { createConnection } = require('../temp/tests/components/Chat/createConnection');
+
+test('lazy start creates a conversation silently before executing the first message, then reuses its header-only ID', async t => {
+ const requests = [];
+ const host = 'https://000000000000000000000000000000.01.environment.api.powerplatform.com';
+ t.mock.method(globalThis, 'fetch', async (url, options) => {
+ const path = new URL(url).pathname;
+ if (path.endsWith('/conversation-endpoints')) {
+ requests.push({ operation: 'discovery' });
+ return Response.json({
+ createConversation: `${host}/conversations`,
+ executeTurn: `${host}/conversations/{conversationId}`,
+ continueTurn: `${host}/conversations/{conversationId}/continue`
+ });
+ }
+ const body = JSON.parse(options.body);
+ const create = path === '/conversations';
+ assert.ok(create || path === '/conversations/header-only-id', `Unexpected URL: ${url}`);
+ requests.push({ operation: create ? 'create' : 'execute', body });
+ // A create endpoint establishes a session; it does not execute an activity in the request.
+ const activity = create
+ ? { type: 'typing', from: { id: 'agent', role: 'bot' } }
+ : { type: 'message', id: `answer-${requests.length}`, from: { id: 'agent', role: 'bot' }, text: `Reply: ${body.activity.text}` };
+ return new Response(`event: activity\ndata: ${JSON.stringify(activity)}\n\nevent: end\ndata: done\n\n`, {
+ headers: { 'content-type': 'text/event-stream', 'x-ms-conversationid': 'header-only-id' }
+ });
+ });
+ const configuration = normalizeConfiguration({
+ appClientId: 'client', tenantId: 'tenant',
+ environmentId: '00000000-0000-0000-0000-000000000001', schemaName: 'fixture'
+ });
+ const client = new CopilotStudioClient(new ConnectionSettings(configuration), 'fixture-token');
+ const failures = [];
+ const connection = createConnection(client, configuration, {
+ onTurn() {}, onTurnEnd() {}, onError(error) { failures.push(error.message); }
+ });
+ t.after(() => connection.end());
+ const received = [];
+ const subscription = connection.activity$.subscribe(activity => received.push(activity));
+ t.after(() => subscription.unsubscribe());
+ await firstValueFrom(connection.connectionStatus$.pipe(filter(status => status === 2), timeout(2000)));
+ assert.deepEqual(requests, [], 'Opening the panel must not start a remote conversation');
+ const send = text => lastValueFrom(connection.postActivity(Activity.fromObject({
+ type: 'message', text, from: { id: 'user', role: 'user' }
+ })).pipe(timeout(2000)));
+ await send('First question');
+ assert.deepEqual(requests.map(request => request.operation), ['discovery', 'create', 'execute']);
+ assert.deepEqual(requests[1].body, { emitStartConversationEvent: false });
+ assert.equal(requests[2].body.activity.text, 'First question');
+ assert.ok(received.some(activity => activity.text === 'Reply: First question'));
+ await send('Follow-up');
+ assert.deepEqual(requests.map(request => request.operation), ['discovery', 'create', 'execute', 'execute']);
+ assert.ok(received.some(activity => activity.text === 'Reply: Follow-up'));
+ assert.deepEqual(failures, []);
+});
diff --git a/ui/embed/sharepoint-customizer/tests/nativeActivities.test.cjs b/ui/embed/sharepoint-customizer/tests/nativeActivities.test.cjs
new file mode 100644
index 00000000..99198c69
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/nativeActivities.test.cjs
@@ -0,0 +1,175 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const { normalizeConfiguration } = require('../temp/tests/configuration');
+const { createPreChatActivity, NativeActivityAdapter } = require('../temp/tests/components/Chat/nativeActivities');
+const { thought, toolCall, standardPlan, standardStep } = require('./fixtures/sdkActivities.cjs');
+
+const configuration = overrides => normalizeConfiguration({
+ appClientId: 'client', tenantId: 'tenant', environmentId: 'environment', schemaName: 'agent', ...overrides
+});
+const tool = (valueType, value = {}) => ({
+ type: 'event', valueType, value: { taskDialogId: 'lookup', stepId: 'call', ...value }
+});
+
+test('welcome uses the native Fluent PreChatMessage and editable messageBack starter contract', () => {
+ const activity = createPreChatActivity(configuration());
+ assert.equal(activity.type, 'message');
+ assert.equal(activity.entities[0].type, 'https://schema.org/Message');
+ assert.deepEqual(activity.entities[0].keywords, ['PreChatMessage']);
+ assert.equal(activity.entities[0].author.name, 'How can I help?');
+ assert.ok(activity.entities[0].author.image.startsWith('data:image/svg+xml,'));
+ assert.equal(activity.channelData['webchat:sequence-id'], -1);
+ assert.deepEqual(activity.suggestedActions.to, []);
+ assert.deepEqual(activity.suggestedActions.actions, [
+ { type: 'messageBack', title: 'Get started', text: 'What can you help me with?' }
+ ]);
+ const withoutFiles = createPreChatActivity(configuration({ enableFileUpload: false, starterPrompts: [] }));
+ assert.equal(withoutFiles.entities[0].author.description, 'Ask a question to get started.');
+ assert.deepEqual(withoutFiles.suggestedActions.actions, []);
+});
+
+for (const showReasoning of [false, true]) {
+ for (const showToolCalls of [false, true]) {
+ test(`native groups respect reasoning=${showReasoning}, tools=${showToolCalls} without exposing raw events`, () => {
+ const adapter = new NativeActivityAdapter(configuration({ showReasoning, showToolCalls }));
+ adapter.startTurn();
+ const activities = [
+ ...adapter.transform(thought('Checking sources')),
+ ...adapter.transform(tool('DynamicPlanReceived', {
+ toolDefinitions: [{ schemaName: 'lookup', displayName: 'Search reference material' }]
+ })),
+ ...adapter.transform(tool('DynamicPlanStepTriggered', { arguments: 'PRIVATE_ARGUMENT' })),
+ ...adapter.transform(tool('DynamicPlanStepBindUpdate', { arguments: 'PRIVATE_BINDING' })),
+ ...adapter.transform(tool('DynamicPlanStepFinished', { result: 'PRIVATE_RESULT' }))
+ ];
+ assert.equal(activities.length, Number(showReasoning) + Number(showToolCalls) * 2);
+ assert.ok(!JSON.stringify(activities).includes('PRIVATE_'));
+ for (const activity of activities) {
+ assert.equal(activity.type, 'message');
+ assert.equal(activity.entities[0]['@id'], '');
+ assert.equal(activity.entities[0].isPartOf['@type'], 'HowTo');
+ assert.ok(activity.entities[0].keywords.includes('Collapsible'));
+ assert.ok(!('value' in activity));
+ }
+ if (showToolCalls) {
+ const last = activities[activities.length - 1];
+ assert.equal(last.entities[0].abstract, 'Search reference material');
+ assert.equal(last.text, 'Finished');
+ }
+ });
+ }
+}
+
+test('native progress updates keep their IDs and order, finish once, and do not overwrite another turn', () => {
+ const adapter = new NativeActivityAdapter(configuration({ showReasoning: true }));
+ adapter.startTurn();
+ const [first] = adapter.transform(thought('Checking'));
+ const [second] = adapter.transform(thought('Checking sources', 2, 'replace'));
+ assert.equal(first.id, second.id);
+ assert.equal(typeof first.timestamp, 'string');
+ assert.equal(first.timestamp, second.timestamp);
+ assert.equal(first.channelData['webchat:sequence-id'], 1);
+ assert.equal(first.channelData['webchat:sequence-id'], second.channelData['webchat:sequence-id']);
+ assert.equal(second.text, 'Checking sources');
+ assert.deepEqual(adapter.transform(thought('old', 1)), []);
+ const [finished] = adapter.transform({ type: 'event', name: 'turn.complete' });
+ assert.equal(finished.id, first.id);
+ assert.equal(finished.entities[0].creativeWorkStatus, 'Published');
+ assert.equal(finished.entities[0].isPartOf.creativeWorkStatus, 'Published');
+ assert.deepEqual(adapter.finishTurn(), []);
+ adapter.startTurn();
+ const [nextTurn] = adapter.transform(thought('Checking again'));
+ assert.notEqual(nextTurn.id, first.id);
+ assert.notEqual(nextTurn.entities[0].isPartOf['@id'], first.entities[0].isPartOf['@id']);
+});
+
+test('ordinary replies remain untouched and native analysis respects the reasoning flag', () => {
+ const adapter = new NativeActivityAdapter(configuration());
+ const reply = { type: 'message', text: 'The answer', from: { id: 'bot', role: 'bot' } };
+ assert.strictEqual(adapter.transform(reply)[0], reply);
+ const analysis = { ...reply, entities: [{ type: 'https://schema.org/Message', keywords: ['AnalysisMessage'] }] };
+ assert.deepEqual(adapter.transform(analysis), []);
+ assert.strictEqual(new NativeActivityAdapter(configuration({ showReasoning: true })).transform(analysis)[0], analysis);
+});
+
+test('turn completion does not invent a tool-finished event', () => {
+ const adapter = new NativeActivityAdapter(configuration({ showToolCalls: true }));
+ adapter.transform(tool('DynamicPlanStepTriggered'));
+ const [finished] = adapter.finishTurn();
+ assert.equal(finished.text, 'No finish event received.');
+ assert.equal(finished.entities[0].creativeWorkStatus, undefined);
+});
+
+test('toolCall metadata produces a named native tool step, not a Reasoning step', () => {
+ const adapter = new NativeActivityAdapter(configuration({ showToolCalls: true }));
+ const [started] = adapter.transform(toolCall('started'));
+ const [finished] = adapter.transform(toolCall('completed'));
+ assert.equal(started.id, finished.id);
+ assert.equal(started.channelData['webchat:sequence-id'], finished.channelData['webchat:sequence-id']);
+ assert.equal(finished.entities[0].abstract, 'Get items');
+ assert.equal(finished.text, 'Finished');
+ assert.equal(finished.entities[0].creativeWorkStatus, 'Published');
+ assert.ok(!JSON.stringify([started, finished]).includes('PRIVATE_'));
+});
+
+test('failed toolCall entities remain failed when the turn finishes', () => {
+ const adapter = new NativeActivityAdapter(configuration({ showToolCalls: true }));
+ adapter.transform(toolCall('started'));
+ const [failed] = adapter.transform(toolCall('failed'));
+ const [finished] = adapter.finishTurn();
+ assert.equal(failed.text, 'Failed');
+ assert.equal(failed.entities[0].creativeWorkStatus, 'Failed');
+ assert.equal(finished.text, 'Failed');
+ assert.equal(finished.entities[0].creativeWorkStatus, 'Failed');
+});
+
+test('unclassified informative updates are not mislabeled or replayed into the transcript', () => {
+ const adapter = new NativeActivityAdapter(configuration({ showReasoning: true, showToolCalls: true }));
+ assert.deepEqual(adapter.transform({ type: 'typing', text: 'Working', channelData: { streamType: 'informative' } }), []);
+ assert.deepEqual(adapter.transform({
+ type: 'typing', text: 'Working', entities: [{ type: 'streaminfo', streamType: 'informative' }]
+ }), []);
+});
+
+test('standard reasoning and tools share the native group but have separate stable identities', () => {
+ const adapter = new NativeActivityAdapter(configuration({ showReasoning: true, showToolCalls: true }));
+ adapter.startTurn();
+ adapter.transform(standardPlan());
+ const activity = standardStep('DynamicPlanStepTriggered', { thought: 'Check the requested city.' });
+ activity.channelData = { 'webchat:sequence-id': 4 };
+ const [reasoning, tool] = adapter.transform(activity);
+ assert.equal(reasoning.entities[0].abstract, 'Reasoning');
+ assert.equal(reasoning.text, 'Check the requested city.');
+ assert.equal(tool.entities[0].abstract, 'Get current weather');
+ assert.notEqual(reasoning.id, tool.id);
+ assert.equal(reasoning.entities[0].isPartOf['@id'], tool.entities[0].isPartOf['@id']);
+ assert.equal(reasoning.channelData['webchat:sequence-id'], 4);
+ assert.equal(tool.channelData['webchat:sequence-id'], 4);
+ assert.deepEqual([reasoning.entities[0].position, tool.entities[0].position], [1, 2]);
+ const finished = adapter.transform(standardStep('DynamicPlanStepFinished'));
+ assert.equal(finished[0].id, tool.id);
+ assert.equal(finished[0].text, 'Finished');
+ assert.equal(finished[0].channelData['webchat:sequence-id'], 4);
+ const settled = adapter.finishTurn();
+ assert.equal(settled[0].id, reasoning.id);
+ assert.equal(settled[0].entities[0].creativeWorkStatus, 'Published');
+});
+
+test('standard tool labels survive a clarification turn without carrying reasoning or leaking into a new conversation', () => {
+ const adapter = new NativeActivityAdapter(configuration({ showReasoning: true, showToolCalls: true }));
+ adapter.startTurn();
+ adapter.transform(standardPlan());
+ const started = adapter.transform(standardStep('DynamicPlanStepTriggered', { thought: 'Check the requested city.' }));
+ adapter.finishTurn();
+ adapter.startTurn();
+ const [resumed] = adapter.transform(standardStep('DynamicPlanStepBindUpdate', { arguments: 'PRIVATE_INPUT' }));
+ const [finished] = adapter.transform(standardStep('DynamicPlanStepFinished', { result: 'PRIVATE_RESULT' }));
+ assert.notEqual(resumed.id, started[1].id);
+ assert.equal(resumed.id, finished.id);
+ assert.equal(finished.entities[0].abstract, 'Get current weather');
+ assert.equal(finished.text, 'Finished');
+ assert.equal(adapter.finishTurn().length, 1);
+ assert.ok(!JSON.stringify([resumed, finished]).includes('PRIVATE_'));
+ const fresh = new NativeActivityAdapter(configuration({ showToolCalls: true }));
+ assert.equal(fresh.transform(standardStep('DynamicPlanStepFinished'))[0].entities[0].abstract, 'sample.CurrentWeather');
+});
diff --git a/ui/embed/sharepoint-customizer/tests/sdkActivityMapping.test.cjs b/ui/embed/sharepoint-customizer/tests/sdkActivityMapping.test.cjs
new file mode 100644
index 00000000..11ab2cb9
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tests/sdkActivityMapping.test.cjs
@@ -0,0 +1,167 @@
+const { test } = require('node:test');
+const assert = require('node:assert/strict');
+const { firstValueFrom, lastValueFrom, filter, timeout } = require('rxjs');
+const { Activity } = require('@microsoft/agents-activity');
+const { ConnectionSettings, CopilotStudioClient } = require('@microsoft/agents-copilotstudio-client');
+const { normalizeConfiguration } = require('../temp/tests/configuration');
+const { createConnection } = require('../temp/tests/components/Chat/createConnection');
+const { thought, toolCall, standardPlan, standardStep } = require('./fixtures/sdkActivities.cjs');
+
+for (const showReasoning of [false, true]) {
+ for (const showToolCalls of [false, true]) {
+ test(`real SDK entity mapping: reasoning=${showReasoning}, tools=${showToolCalls}`, async t => {
+ const host = 'https://000000000000000000000000000000.01.environment.api.powerplatform.com';
+ const stream = { streamType: 'streaming', streamId: 'answer-stream', chunkType: 'delta' };
+ t.mock.method(globalThis, 'fetch', async url => {
+ const path = new URL(url).pathname;
+ if (path.endsWith('/conversation-endpoints')) {
+ return Response.json({
+ createConversation: `${host}/conversations`,
+ executeTurn: `${host}/conversations/{conversationId}`,
+ continueTurn: `${host}/conversations/{conversationId}/continue`
+ });
+ }
+
+ assert.ok(path === '/conversations' || path === '/conversations/header-only-id');
+ const activities = path === '/conversations' ? [{ type: 'typing' }] : [
+ thought('Check ', 1), thought('the list', 2), thought('Check the list', 3, 'replace'),
+ toolCall('started', { streamSequence: 4 }), toolCall('completed', { streamSequence: 5 }),
+ { type: 'typing', id: 'answer-part-1', text: 'Here are ', channelData: { ...stream, streamSequence: 6 } },
+ { type: 'typing', id: 'answer-part-2', text: 'the items.', channelData: { ...stream, streamSequence: 7 } },
+ { type: 'message', id: 'answer', text: 'Here are the items.', channelData: { streamType: 'final', streamId: 'answer-stream' } },
+ { type: 'event', name: 'turn.complete' }
+ ];
+ return new Response(activities.map(activity => `event: activity\ndata: ${JSON.stringify(activity)}\n\n`).join('') +
+ 'event: end\ndata: done\n\n', {
+ headers: { 'content-type': 'text/event-stream', 'x-ms-conversationid': 'header-only-id' }
+ });
+ });
+ const configuration = normalizeConfiguration({
+ appClientId: 'client', tenantId: 'tenant',
+ environmentId: '00000000-0000-0000-0000-000000000001', schemaName: 'fixture',
+ showReasoning, showToolCalls
+ });
+ const failures = [];
+ const connection = createConnection(new CopilotStudioClient(new ConnectionSettings(configuration), 'fixture-token'), configuration, {
+ onTurn() {}, onTurnEnd() {}, onError(error) { failures.push(error.message); }
+ });
+ const received = [];
+ const subscription = connection.activity$.subscribe(activity => received.push(activity));
+ t.after(() => { subscription.unsubscribe(); connection.end(); });
+ await firstValueFrom(connection.connectionStatus$.pipe(filter(status => status === 2), timeout(2000)));
+ await lastValueFrom(connection.postActivity(Activity.fromObject({
+ type: 'message', text: 'List items', from: { id: 'user', role: 'user' }
+ })).pipe(timeout(2000)));
+
+ const reasoning = received.filter(activity => activity.id?.includes(':reasoning:'));
+ const tools = received.filter(activity => activity.id?.includes(':tool:'));
+ assert.equal(new Set(reasoning.map(activity => activity.id)).size, Number(showReasoning));
+ assert.equal(new Set(tools.map(activity => activity.id)).size, Number(showToolCalls));
+ if (showReasoning) {
+ assert.equal(reasoning.at(-1).text, 'Check the list');
+ assert.equal(reasoning.at(-1).entities[0].abstract, 'Reasoning');
+ }
+ if (showToolCalls) {
+ assert.equal(tools.at(-1).entities[0].abstract, 'Get items');
+ assert.equal(tools.at(-1).text, 'Finished');
+ }
+ assert.ok(received.some(activity => activity.type === 'typing' && activity.text === 'Here are the items.'));
+ assert.ok(received.some(activity => activity.id === 'answer' && activity.text === 'Here are the items.'));
+ assert.ok(!received.some(activity => activity.text === 'Get items completed'));
+ assert.ok(!JSON.stringify(received).includes('PRIVATE_'));
+ assert.ok(!received.some(activity => activity.entities?.some(entity => ['thought', 'toolCall'].includes(entity.type))));
+ assert.deepEqual(failures, []);
+ });
+ }
+}
+
+for (const showReasoning of [false, true]) {
+ for (const showToolCalls of [false, true]) {
+ test(`real SDK standard mapping: reasoning=${showReasoning}, tools=${showToolCalls}`, async t => {
+ const host = 'https://000000000000000000000000000000.01.environment.api.powerplatform.com';
+ const base = `${host}/copilotstudio/dataverse-backed/authenticated/bots/fixture/conversations`;
+ const requests = [];
+ let turn = 0;
+ t.mock.method(globalThis, 'fetch', async (url, options) => {
+ const path = new URL(url).pathname;
+ requests.push({ path, method: options?.method || 'GET' });
+ if (path.endsWith('/conversation-endpoints')) return Response.json({
+ createConversation: `${base}?api-version=2022-03-01-preview`,
+ executeTurn: `${base}/{conversationId}?api-version=2022-03-01-preview`,
+ continueTurn: `${base}/{conversationId}/continue?api-version=2022-03-01-preview`,
+ subscribe: `${base}/{conversationId}/subscribe?api-version=2022-03-01-preview`
+ });
+ const start = path.endsWith('/conversations');
+ if (!start) {
+ assert.ok(path.endsWith('/conversations/standard-conversation'));
+ turn++;
+ }
+ const final = {
+ type: 'message', id: `standard-answer-${turn}`, from: { id: 'bot', role: 'bot' },
+ text: turn === 1 ? 'Which units should I use?' : 'The weather is clear.',
+ entities: [{ type: 'streaminfo', streamType: 'final', streamId: `stream-${turn}` }],
+ channelData: { streamType: 'final', streamId: `stream-${turn}` }
+ };
+ const activities = start ? [{ type: 'typing' }] : turn === 1 ? [
+ { type: 'typing', text: 'Generating plan...', entities: [{ type: 'streaminfo', streamType: 'informative' }] },
+ standardPlan(),
+ standardStep('DynamicPlanStepTriggered', {
+ thought: 'Check current conditions for the requested city.', state: 'inProgress', type: 'Action'
+ }),
+ standardStep('DynamicPlanStepBindUpdate', { arguments: { Location: 'PRIVATE_CITY' } }),
+ final
+ ] : [
+ standardStep('DynamicPlanStepBindUpdate', { arguments: { units: 'PRIVATE_UNITS' } }),
+ // Completion is a regression fixture; the live weather test stopped at connector sign-in.
+ standardStep('DynamicPlanStepFinished', { result: 'PRIVATE_WEATHER_RESULT' }),
+ final
+ ];
+ return new Response(activities.map(activity => `event: activity\ndata: ${JSON.stringify(activity)}\n\n`).join('') +
+ 'event: end\ndata: done\n\n', {
+ headers: { 'content-type': 'text/event-stream', 'x-ms-conversationid': 'standard-conversation' }
+ });
+ });
+ const configuration = normalizeConfiguration({
+ appClientId: 'client', tenantId: 'tenant',
+ environmentId: '00000000-0000-0000-0000-000000000001', schemaName: 'fixture',
+ showReasoning, showToolCalls
+ });
+ const failures = [];
+ let ended = 0;
+ const connection = createConnection(new CopilotStudioClient(new ConnectionSettings(configuration), 'fixture-token'), configuration, {
+ onTurn() {}, onTurnEnd() { ended++; }, onError(error) { failures.push(error.message); }
+ });
+ const received = [];
+ const subscription = connection.activity$.subscribe(activity => received.push(activity));
+ t.after(() => { subscription.unsubscribe(); connection.end(); });
+ await firstValueFrom(connection.connectionStatus$.pipe(filter(status => status === 2), timeout(2000)));
+ for (const text of ['Check Seattle weather', 'Metric']) {
+ await lastValueFrom(connection.postActivity(Activity.fromObject({
+ type: 'message', text, from: { id: 'user', role: 'user' }
+ })).pipe(timeout(2000)));
+ }
+ const reasoning = received.filter(activity => activity.id?.includes(':reasoning:'));
+ const tools = received.filter(activity => activity.id?.includes(':tool:'));
+ assert.equal(new Set(reasoning.map(activity => activity.id)).size, Number(showReasoning));
+ assert.equal(new Set(tools.map(activity => activity.id)).size, Number(showToolCalls) * 2);
+ if (showReasoning) {
+ assert.equal(reasoning.at(-1).text, 'Check current conditions for the requested city.');
+ assert.equal(reasoning.at(-1).entities[0].abstract, 'Reasoning');
+ assert.equal(reasoning.at(-1).entities[0].creativeWorkStatus, 'Published');
+ }
+ if (showToolCalls) {
+ assert.ok(tools.every(activity => activity.entities[0].abstract === 'Get current weather'));
+ assert.ok(tools.some(activity => activity.text === 'No finish event received.'));
+ assert.equal(tools.at(-1).text, 'Finished');
+ }
+ assert.equal(ended, 2);
+ assert.equal(received.filter(activity => activity.id?.startsWith('standard-answer-')).length, 2);
+ assert.ok(!received.some(activity => activity.text === 'Generating plan...'));
+ assert.ok(!received.some(activity => activity.type === 'event'));
+ assert.ok(!JSON.stringify(received).includes('PRIVATE_'));
+ assert.deepEqual(failures, []);
+ assert.equal(requests.length, 4);
+ assert.ok(requests.every(request => !request.path.endsWith('/subscribe')));
+ });
+ }
+}
diff --git a/ui/embed/sharepoint-customizer/tsconfig.json b/ui/embed/sharepoint-customizer/tsconfig.json
index 419cd861..d697c99c 100644
--- a/ui/embed/sharepoint-customizer/tsconfig.json
+++ b/ui/embed/sharepoint-customizer/tsconfig.json
@@ -1,7 +1,7 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-5.3/includes/tsconfig-web.json",
"compilerOptions": {
- "target": "es5",
+ "target": "es2019",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
@@ -22,7 +22,7 @@
"webpack-env"
],
"lib": [
- "es5",
+ "es2019",
"dom",
"es2015.collection",
"es2015.promise"
diff --git a/ui/embed/sharepoint-customizer/tsconfig.test.json b/ui/embed/sharepoint-customizer/tsconfig.test.json
new file mode 100644
index 00000000..ba86cf08
--- /dev/null
+++ b/ui/embed/sharepoint-customizer/tsconfig.test.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "commonjs",
+ "lib": ["ES2020", "DOM"],
+ "strict": true,
+ "skipLibCheck": true,
+ "outDir": "temp/tests",
+ "rootDir": "src/extensions/sidebarAgent",
+ "types": []
+ },
+ "include": [
+ "src/extensions/sidebarAgent/configuration.ts",
+ "src/extensions/sidebarAgent/components/Chat/acquireToken.ts",
+ "src/extensions/sidebarAgent/components/Chat/attachments.ts",
+ "src/extensions/sidebarAgent/components/Chat/activityDetails.ts",
+ "src/extensions/sidebarAgent/components/Chat/nativeActivities.ts",
+ "src/extensions/sidebarAgent/components/Chat/createConnection.ts"
+ ]
+}
-
+const SidePanel: React.FC
-
-
- {agentTitle}
-
-
-
-
-
-
-
+
-
- {isOpen && }
-
- );
- }
-}
-
-const NewChatIcon: React.FC = () => (
-
-);
+ )}
+ >
+