chore(demo): support api_key query param in vite example

[oliverlaz]

🎯 Goal

The vite example could only take the Stream API key from the VITE_STREAM_API_KEY env var, while the user token was already overridable via a query param. This makes it awkward to point the running example at a different Stream app without editing .env and restarting. This lets you pass ?api_key=… (and combine it with ?token=…) directly in the URL, matching how token already works.

🛠 Implementation details

• apiKey now reads from the api_key query param first, falling back to VITE_STREAM_API_KEY — mirroring the existing token resolution.
• userId now derives from the provided token (via parseUserIdFromToken) when present, slotted just below the explicit user_id query param and above the env/localStorage/random fallbacks. This makes ?api_key=…&token=… self-sufficient: previously the pronto token generator was only skipped when the resolved userId matched the token's embedded user_id, so omitting user_id silently fell back to pronto with the wrong environment/app.
• parseUserIdFromToken now returns undefined instead of throwing on a malformed/empty token, since it now runs during render; this also hardens the existing tokenProvider call site.

User-id precedence: ?user_id= → token-derived → VITE_USER_ID → localStorage → random. The explicit user_id param still wins, preserving the "connect as someone else, regenerate via pronto" path.

🎨 UI Changes

No visual changes — this only affects how the example app sources its credentials. Verified by driving the running example with Playwright:

• ?api_key=test_key_AAA&token=<jwt for "bob"> → Stream WS connects with api_key=test_key_AAA and user_id=bob; pronto skipped.
• ?api_key=test_key_BBB (no token) → pronto create-token called (fallback intact).
• ?api_key=xzwhhgtazy6h (public key) → real connection succeeds, chat UI renders, zero console errors.

Summary by CodeRabbit

• New Features
  • API key can now be optionally specified via query parameter, with fallback to environment configuration
  • Enhanced token parsing with improved error handling that gracefully manages malformed tokens

[github-actions]

Size Change: +3 B (0%)

Total Size: 656 kB

📦 View Changed

Filename	Size	Change
dist/es/index.mjs	251 kB	+1 B (0%)
dist/es/useNotificationApi.mjs	48.6 kB	+2 B (0%)

ℹ️ View Unchanged

Filename	Size
dist/cjs/audioProcessing.js	1.74 kB
dist/cjs/emojis.js	2.54 kB
dist/cjs/index.js	255 kB
dist/cjs/mp3-encoder.js	814 B
dist/cjs/ReactPlayerWrapper.js	545 B
dist/cjs/useNotificationApi.js	49.8 kB
dist/css/emoji-picker.css	178 B
dist/css/emoji-replacement.css	456 B
dist/css/index.css	39.7 kB
dist/es/audioProcessing.mjs	1.65 kB
dist/es/emojis.mjs	2.47 kB
dist/es/mp3-encoder.mjs	768 B
dist/es/ReactPlayerWrapper.mjs	485 B

_{compressed-size-action}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.84%. Comparing base (7ad98fa) to head (2bbdc15).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3210   +/-   ##
=======================================
  Coverage   83.84%   83.84%           
=======================================
  Files         439      439           
  Lines       13212    13212           
  Branches     4286     4286           
=======================================
  Hits        11077    11077           
  Misses       2135     2135           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e8a49d2e-e603-43b3-9e31-d3cdbe254993

📥 Commits

Reviewing files that changed from the base of the PR and between 7ad98fa and 2bbdc15.

📒 Files selected for processing (1)

• examples/vite/src/App.tsx

---

📝 Walkthrough

Walkthrough

The Vite example app now safely handles token parsing and supports dynamic API key configuration. A new parseUserIdFromToken helper returns undefined on malformed tokens instead of throwing. The API key is derived from an optional api_key query parameter, falling back to the environment variable. The useUser hook conditionally parses userId only when a token is present.

Changes

Token Parsing and API Key Configuration

Layer / File(s)	Summary
Safe token parsing and dynamic API key configuration examples/vite/src/App.tsx	Adds parseUserIdFromToken helper that returns undefined on malformed/invalid tokens instead of throwing. Implements query-parameter/ENV-based apiKey selection. Updates useUser hook to conditionally parse userId from token using the safer helper.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• arnautov-anton

Poem

🐰 A rabbit hops through query strings today,
Finding API keys along the way,
Token parsing now won't throw and break,
Fallbacks flow like a garden's wake,
Safer examples for devs all to share! 🌿

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding support for an api_key query parameter in the vite example application.
Description check	✅ Passed	The description includes all required template sections (Goal, Implementation details, UI Changes) with comprehensive, detailed explanations of the changes and their rationale.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/vite-example-api-key-query-param

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[stream-ci-bot]

🎉 This PR is included in version 14.4.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀