feat(@fluid-example/ai-collab): Integrate User Avatar into Sample App #22850
Conversation
github-actions
bot
added
area: examples
chentong7
force-pushed
the
ai-tong
branch
2 times, most recently
from
df778fe
to
8a65277
Compare
chentong7
changed the title
⯅ @fluid-example/bundle-size-tests: +245 Bytes
Baseline commit: 34f6b6b |
chentong7
force-pushed
the
ai-tong
branch
2 times, most recently
from
0664756
to
c809a4f
Compare
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.
@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.
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.
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.
Seems like it didn't re-render the page for you. I can see tinylicious clients on my local. Let me see how to make it refresh page itself...
There was a problem hiding this comment.
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.
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