Customer profile is not loaded on page load

[furiousteabag]

Hey guys!

I am using an example of agent-app-sdk with the latest version of SDK (1.6.4) for retrieving the currently opened chat. It works when I change the current chat, but it does not load the current chat when I've just opened an app. So in order to set a customer profile agent have to click on some chat even when he has a chat opened.

To be precise, I have the following component:

import React, { Component, useEffect } from "react"
import { createDetailsWidget } from "@livechat/agent-app-sdk"

const MainForm = () => {
    useEffect(() => {
        createDetailsWidget().then((widget) => {
            widget.on("customer_profile", (profile) => {
                console.log("Customer profile: ", profile)
            })
        })
    }, [])
    return (
        <div>
            <h1>hello</h1>
        </div>
    )
}

I expect it to print customer profiles in 2 situations:

1. When the agent changes the selected chat: it works perfectly
2. When component loads and chat is already selected: this does not work

Here is the screencast of this in action:

agent-app-sdk-bug-showcase.mov

If you need some other info let me know!
Thanks.

[furiousteabag]

@jakubsikora sorry for pinging you, because the repo does not seem very active!

[wojciechdudek-livechat]

Hi,

thanks for letting us know. We'll definitely look at it, but in the meantime - Developer Console supports new application blocks which can make the process of bootstrapping app much faster and easier. Can you have a look at video below and try to reproduce your problem with that approach? You can look at the results and tell us if it matches your expectation.

On the video I've created new sample app based on our fullstack-app template (NextJS), with authorization block and Agent App chat widget. Instead of hosting sample app locally I've used deployment block - it's currently in beta version hidden under "experimental features", but you can turn them on in your Console's profile settings easily.

On the video it seems to work as you expected.
https://github.com/livechat/products-sdk/assets/117641044/4b008992-e356-48db-a473-f36bd29c4145

---

Link to template:
https://github.com/livechat/developer-app-template-nextjs

Implementation of hook dedicated for chat widget:
https://github.com/livechat/developer-app-template-nextjs/blob/main/hooks/products/livechat/useDetailsWidget.ts

Usage of page:
https://github.com/livechat/developer-app-template-nextjs/blob/main/pages/livechat/chat-details.tsx

[furiousteabag]

Thank you for your answer!

I've tried to deploy with the new feature, but I could not link the repository (no repositories show up) although I've authenticated via Github.

But I don't think it is a deployment issue because it will execute the same code.

I've changed my React code so it looks the same as in your working example:

const MainForm = () => {
    const [widget, setWidget] = useState(null)
    const [customerProfile, setCustomerProfile] = useState(null)

    const widgetButtonHandler = useCallback(() => {
        // Handler for widget buttons
    }, [])

    useEffect(() => {
        createDetailsWidget().then(setWidget)
    }, [])

    useEffect(() => {
        if (widget) {
            setCustomerProfile(widget.getCustomerProfile())

            widget.on("customer_profile", (customerProfile) => {
                setCustomerProfile(customerProfile)
                console.log("Customer profile: ", customerProfile)
            })
            widget.on("customer_details_section_button_click", widgetButtonHandler)

            return () => {
                widget.off("customer_profile", setCustomerProfile)
                widget.off("customer_details_section_button_click", widgetButtonHandler)
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [widget, widgetButtonHandler])

    return (
        <div>
            <h1>{customerProfile?.name}</h1>
        </div>
    )
}

But it still works only on selection chat but not on load.
I am wondering if it is a problem with React overall because I have a lot of code already and it would be great not to rewrite everything via NextJS.

Thank you once again!

[furiousteabag]

Hey guys!
Any updates on the issue?
Thank you!

[furiousteabag]

Hi @wojciechdudek-livechat!
Do you have any updates on that by any chance?

[danishs360]

Any Updates on this ?? @wojciechdudek-livechat

[wojciechdudek-livechat]

Hi guys, still working on the solution.

@SmirnovAlexander , @danishs360 - do you guys both use authorization block with redirection strategy in your app?

[furiousteabag]

@wojciechdudek-livechat Yes

[wojciechdudek-livechat]

@SmirnovAlexander, as livechat/accounts-sdk#13 is already resolved - can you confirm that upgrading accounts-sdk to v2.0.8 resolves your problem?

[furiousteabag]

@wojciechdudek-livechat thanks! It works now.