-
Notifications
You must be signed in to change notification settings - Fork 532
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(@fluid-example/ai-collab): Integrate User Avatar into Sample App #22850
base: main
Are you sure you want to change the base?
Conversation
df778fe
to
8a65277
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
⯅ @fluid-example/bundle-size-tests: +245 Bytes
Baseline commit: 34f6b6b |
0664756
to
c809a4f
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am having trouble understanding what the presence code is doing. I tried running the sample locally with tinylicious and I don't see any presence information. Am I doing something wrong?
The presence code is responsible for syncing the client's user's avatar. If you are using the Tinylicious server, it won't have Microsoft account information, so it will display a default user photo at the top. However, if you are using the SPE client and have signed in with a Microsoft account, it will retrieve the account profile photo, update the presence, and re-render the page to show the new user's avatar at the top. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@chentong7 I just noticed that even with two tabs connected on the same container, I'm not seeing two presence entries like we should:
Where did we end up with that? I thought we said we wanted that behavior (presence should show audience members, so each tab should count as a separate one)?
const tenantId = process.env.NEXT_PUBLIC_SPE_ENTRA_TENANT_ID; | ||
if (tenantId === undefined || clientId === undefined) { | ||
// add a default photo for tinylicious client | ||
userPresenceGroup.onlineUsers.local.set(`id-${uuid()}`, { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For tinylicious client, the default photo should be added into container presence group here for each opening new tab. And it should trigger the previous effect function to re-render the page like the spe client does.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it happening for you, though? As you can see in my screenshot, I only see one circle with default photo, but I have 2 tabs open.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More than re-rendering the page, I think the presence group should update real-time as things (the connected clients) change. The presence framework probably has events to tell us when things change?
I'm still curious though, I just started the app from the latest commit in the PR (dd433b1) and I'm still only seeing one circle, even when I start the second client from a different browser 🤔 .
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you click refresh on page manually, the second circle should show-up. It was running slow to appear on my side too. I put the userPresenceGroup
in state but it seems not detect the object changed and failed to re-render the page auto. I guess it does need a handler to monitor the addUser
event and refresh page.
Description
This PoC demonstrates the integration of Microsoft's Presence API into an existing AI-powered application. The key objectives include ramping up the current AI app, incorporating the Presence API library, and integrating this functionality to display user presence information. Specifically, this demo will show the avatar of a signed-in Microsoft account on top of the sample AI app's user interface, indicating the user’s online status or availability in real time.
By completing this PoC, we aim to enhance the AI app's user experience with seamless integration of Microsoft's identity and presence services, allowing for personalized interactions based on user status.
Sample