feat(@fluid-example/ai-collab): Integrate User Avatar into Sample App

[chentong7]

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

Recording.2024-11-25.135720.mp4

[msfluid-bot]

Code Coverage Summary

No packages impacted by the change.

---

Baseline commit: 651a64c
Baseline build: 309862
Happy Coding!!

Code coverage comparison check passed!!

[msfluid-bot]

⯅ @fluid-example/bundle-size-tests: +245 Bytes

Metric Name	Baseline Size	Compare Size	Size Diff
aqueduct.js	467.08 KB	467.11 KB	⯅ +35 Bytes
azureClient.js	563.85 KB	563.9 KB	⯅ +49 Bytes
connectionState.js	724 Bytes	724 Bytes	■ No change
containerRuntime.js	263.27 KB	263.29 KB	⯅ +14 Bytes
fluidFramework.js	428.71 KB	428.73 KB	⯅ +14 Bytes
loader.js	134.18 KB	134.19 KB	⯅ +14 Bytes
map.js	42.71 KB	42.71 KB	⯅ +7 Bytes
matrix.js	150.15 KB	150.16 KB	⯅ +7 Bytes
odspClient.js	530.45 KB	530.5 KB	⯅ +49 Bytes
odspDriver.js	98.65 KB	98.67 KB	⯅ +21 Bytes
odspPrefetchSnapshot.js	43.04 KB	43.05 KB	⯅ +14 Bytes
sharedString.js	166.23 KB	166.24 KB	⯅ +7 Bytes
sharedTree.js	419.17 KB	419.18 KB	⯅ +7 Bytes
Total Size	3.38 MB	3.38 MB	⯅ +245 Bytes

---

Baseline commit: 651a64c

Generated by 🚫 dangerJS against 805660e

[tylerbutler]

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?

[alexvy86]

Something's still weird... in the recording the first tab is staying at 1 bubble after the other two have been added. I see something similar, sometimes in the second tab as well:

[chentong7]

Latest version works fine. Thank you all!!!

Recording.2024-12-17.173044.mp4

[alexvy86]

A few last small things but lgtm otherwise.

[github-actions]

🔗 No broken links found! ✅

Your attention to detail is admirable.

linkcheck output

> fluid-framework-docs-site@0.0.0 ci:check-links /home/runner/work/FluidFramework/FluidFramework/docs
> start-server-and-test "npm run serve -- --no-open" 3000 check-links

1: starting server using command "npm run serve -- --no-open"
and when url "[ 'http://127.0.0.1:3000' ]" is responding with HTTP status code 200
running tests using command "npm run check-links"


> fluid-framework-docs-site@0.0.0 serve
> docusaurus serve --no-open

[SUCCESS] Serving "build" directory at: http://localhost:3000/

> fluid-framework-docs-site@0.0.0 check-links
> linkcheck http://localhost:3000 --skip-file skipped-urls.txt

Crawling...

Stats:
  170492 links
    1603 destination URLs
    1838 URLs ignored
       0 warnings
       0 errors

[github-actions]

🔗 No broken links found! ✅

Your attention to detail is admirable.

linkcheck output

> fluid-framework-docs-site@0.0.0 ci:check-links /home/runner/work/FluidFramework/FluidFramework/docs
> start-server-and-test "npm run serve -- --no-open" 3000 check-links

1: starting server using command "npm run serve -- --no-open"
and when url "[ 'http://127.0.0.1:3000' ]" is responding with HTTP status code 200
running tests using command "npm run check-links"


> fluid-framework-docs-site@0.0.0 serve
> docusaurus serve --no-open

[SUCCESS] Serving "build" directory at: http://localhost:3000/

> fluid-framework-docs-site@0.0.0 check-links
> linkcheck http://localhost:3000 --skip-file skipped-urls.txt

Crawling...

Stats:
  170492 links
    1603 destination URLs
    1838 URLs ignored
       0 warnings
       0 errors