Shuffle examples

[bnodir]

Purpose

This PR aims to enhance the ExampleList.tsx component by allowing it to display three randomly selected questions every 7 seconds from a list of questions. This improves the user experience by periodically refreshing the examples displayed.

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?
If you're not sure, try it out on an old environment.

[ ] Yes
[X] No

Does this require changes to learn.microsoft.com docs?

This repository is referenced by this tutorial
which includes deployment, settings and usage instructions. If text or screenshot need to change in the tutorial,
check the box below and notify the tutorial author. A Microsoft employee can do this for you if you're an external contributor.

[ ] Yes
[X] No

Type of change

[ ] Bugfix
[X] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

Code quality checklist

See CONTRIBUTING.md for more details.

• The current tests all pass (python -m pytest).
• I added tests that prove my fix is effective or that my feature works
• I ran python -m pytest --cov to verify 100% coverage of added lines
• I ran python -m mypy to check for type errors
• I either used the pre-commit hooks or ran ruff and black manually on my code.

ShuffleExamples.mp4

[bnodir]

Possible Approaches for Improved Question Listing

@pamelafox - I am considering different approaches to enhance the question listing feature. The table below outlines a few of these approaches, including the currently implemented method and some proposed alternatives. I'd love to hear any other ideas you might have.

#	Approach	Description	Considerations
1	Current Approach	Predefined List of Questions: Displaying a list of predefined questions that shuffle every 7 seconds. The questions are stored in a file (examples.ts) and selected based on whether GPT-4V is used or not.	Simple to implement and ensures a controlled set of questions, but may become stale over time, requiring periodic updates. Hence, maintenance can become challenging if the front end needs to support multiple languages in the future.
2	User Feedback-Based Curation	User Feedback-Based Curation: Users submit questions through chat, and highly rated questions are added to the list. This list can then be shuffled and displayed as in the current approach.	Engages users and keeps content relevant, but requires a rating mechanism and potentially moderating user submissions.
3	AI-Generated Questions	AI Search-Based Generation: Utilize Azure AI Search to generate questions based on the data provided. These dynamically generated questions can be shuffled and displayed to keep content fresh and relevant.	Provides highly relevant and updated questions, but requires integration with AI services and potential cost-performance considerations (with the recent GPT-4 mini it could be challenged?).

[mrmueller]

I like the idea of a shuffle and multi-language support would help as well! Great stuff.

Our Application owners favor adding custom questions over User/AI generated ones

[pamelafox]

Interesting feature! Thanks @mrmueller for chiming in. Love to hear other developer's thoughts about what they/customeres want. I'm concerned this might make the local developer experience difficult as I'm fairly accustomed to always clicking the same question to check something. On the other hand, it'd be good if I tested with more than those same 3 questions.

What do you all think about the impact on local developer experience?

[pamelafox]

Is it necessary to use worker-timers versus standard setInterval/clearInterval? I would think even that shuffling upon display would be fairly effective.
I'm trying to avoid adding more to package.json when possible.