Power Platform Community Forum Thread Details

Hello,

I'm experiencing an issue with my agent in SPFx . It used to work fine, but suddenly the agent stopped working in SPFx but same time working fine in Copilot Studio test.

I have used copilot agent in SPFx using Directline link and working fine.But suddenly stops working sometimes without changes any code or without changes in Copilot agent.

May be Issue with the Fallback of the Agent.because Response of the question is "I'm sorry, I'm not sure how to help with that. Can you try rephrasing?" when issue in agent, but when agent is working fine same question provide answer from the knowledge attached.

Provide Solution of the Issue.

Using Agent Directline URL for the SPFx. Below is Code in SPFx:

        try {
        
            const MSALWrapperInstance = new MSALWrapper(this.props.clientID, this.props.authority);
            let responseToken = await MSALWrapperInstance.handleLoggedInUser([this.props.customScope], this.state.userEmail);
            if (!responseToken) {
                responseToken = await MSALWrapperInstance.acquireAccessToken([this.props.customScope], this.state.userEmail);
            }
            let token = responseToken?.accessToken || null;   
            let regionalChannelURL;
            const regionalResponse = await fetch(this.state.regionalChannelSettingsURL);
            if (regionalResponse.ok) {
                const data = await regionalResponse.json();
                regionalChannelURL = data.channelUrlsById.directline;
            }
            else {
                console.error(`HTTP error! Status: ${regionalResponse.status}`);
            }
            const response = await fetch(this.state.botURL);
            if (response.ok) {
                const conversationInfo = await response.json();
                const directline = ReactWebChat.createDirectLine({
                    token: conversationInfo.token,
                    domain: regionalChannelURL + 'v3/directline',
                });
                this.setState({ directline: directline });
            } else {
                console.error(`HTTP error! Status: ${response.status}`);
            }
            let flag = false;
            const store = ReactWebChat.createStore(
                {},
                ({ dispatch }: { dispatch: Dispatch }) => (next: any) => (action: any) => {



                    if (token !== null && action.type === "DIRECT_LINE/INCOMING_ACTIVITY") {
                        const activity = action.payload.activity;
                        if (activity.from && activity.from.role === 'bot' &&
                            (this.getOAuthCardResourceUri(activity))) {
                            this.enableNewChatButton();
                            this.setState({ isLoading: true });
                            this.state.directline.postActivity({
                                type: 'invoke',
                                name: 'signin/tokenExchange',
                                value: {
                                    id: activity.attachments[0].content.tokenExchangeResource.id,
                                    connectionName: activity.attachments[0].content.connectionName,
                                    token
                                },
                                "from": {
                                    id: this.state.userEmail,
                                    name: this.props.userFriendlyName,
                                    role: "user"
                                }
                            }).subscribe(
                                async (id: any) => {
                                    setTimeout(() => {
                                        this.setState({ isLoading: false });
                                    }, 4000);
                                    if (id === "retry") {
                                        console.log("bot was not able to handle the invoke, so display the oauthCard")
                                        this.enableNewChatButton();
                                        return next(action);
                                    }
                                },
                                (error: any) => {
                                    console.log("An error occurred so display the oauthCard");
                                    return next(action);
                                }
                            )
                            return;
                        }
                    } else {
                        return next(action);
                    }
                    return next(action);
                }
            );
            const userIcon = this.props.userFriendlyName.match(/(\b\S)?/g).join("").match(/(^\S|\S$)?/g).join("").toUpperCase();
            const canvasStyleOptions = {            
                botAvatarInitials: 'SBA',              
                userAvatarInitials: userIcon,
           
            }
            // Render webchat
            if (this.state.directline) {
                if (this.webChatRef.current && this.loadingSpinnerRef.current) {
                    this.loadingSpinnerRef.current.style.display = 'none';
                    ReactWebChat.renderWebChat(
                        {
                            directLine: this.state.directline,
                            store: store,
                            styleOptions: canvasStyleOptions,
                            userID: this.state.userEmail
                        },
                        this.webChatRef.current
                    );
                    const inputElement = document.querySelector('.webchat__send-box-text-box__input') as HTMLInputElement;
                    if (inputElement) {
                        inputElement.placeholder = "Ask a question";
                    }
                    this.state.directline.postActivity({
                        type: 'message',
                        from: { id: this.state.userEmail, name: this.props.userFriendlyName },
                        text: Constants.INITIAL_TEXT,
                        timestamp: new Date().toISOString()
                    }).subscribe(
                        (id: any) => {
                            console.log(`Defult message ID: ${id}`);
                            setTimeout(() => {
                                this.setState({ isLoading: false });
                            }, 4000);
                        },
                        (error: any) => {
                            console.error(`Error sending the first message: ${error}`);
                            setTimeout(() => {
                                this.setState({ isLoading: false });
                            }, 4000);
                        }
                    );
                } else {
                    this.setState({ isLoading: false });
                    console.error("Webchat or loading spinner not found");
                }
            }
       