Embedding in an Iframe is not possible

[veserai]

The standard dify-web docker container allows to embed the Chatbot in an Iframe on a website.
As I needed to customize the frontend, I followed the instructions and deployed the webapp-conversations frontend on vercel.
It runs perfectly when I open the Vercel URL directly. As soon as I embed it into an Iframe, I always get the error, that the chatbot is still responding, when I try to send a second message.

Already tested:

• Using a Reverseproxy in front of Vercel
• Using Browser Dev Tools to find possible CORS Errors ect.
• Using other Browsers: Chrome, Safari -> Not working, Firefox-> Working

[veserai]

I was able to fix it on my own. The problem was: /app/compontents/index.tsx: The "oncompleted" function fails while fetching the conversations.id . Therefore the bot never reaches the state, where the "setResponsingFalse()" is set.
I rewrote the async onCompleted like this:

async onCompleted(hasError?: boolean) {
        // Immediately set the chatbot as not responding, regardless of potential errors in fetching conversations
        setResponsingFalse();
        
        if (hasError) {
          return; // Early return if there was an error in the chat message operation
        }

        try {
          // Attempt to fetch all conversations and generate a new name for the conversation
          const { data: allConversations }: any = await fetchConversations();
          if (allConversations && allConversations.length > 0) {
            const newItem: any = await generationConversationName(allConversations[0].id);
            
            // Proceed with setting new conversation information and resetting state as needed
            const newAllConversations = produce(allConversations, (draft: any) => {
              draft[0].name = newItem.name;
            });
            setConversationList(newAllConversations as any);
            
            // Additional logic to reset inputs and conversation IDs as needed
            if (getConversationIdChangeBecauseOfNew()) {
              setConversationIdChangeBecauseOfNew(false);
              resetNewConversationInputs();
              setChatNotStarted();
              setCurrConversationId(allConversations[0].id, APP_ID, true);
            }
          } else {
            // Handle the case where no conversations are returned
            console.error("No conversations were fetched.");
          }
        } catch (error) {
          console.error("An error occurred while fetching conversations or generating a new conversation name:", error);
          // Here, handle the error as needed, possibly setting additional error states or displaying a message to the user
        }
      },

[taowang1993]

After you embed the chatbot in another website, can other people still access your web app UI?

[veserai]

After you embed the chatbot in another website, can other people still access your web app UI?

Before I fixed it -> No

After my fix -> Yes

Please make sure to have SSL activated (For example by using a reverse Proxy), otherwise many brothers will block the iFrame

[AllForNothing]

I found the root cause of this issue: Set-Cookie is blocked by the browser

then conversations API always returns empty data without session_id cookie.
So, we can add "SameSite=None; Secure" to the session_id cookie to fix this issue (webapp-conversation\app\api\utils\common.ts)