Add a stop announcing button for TTS

[Amnish04]

I've been thinking for a long time to have a dedicated control that can stop text to speech announcements for a particular message, instead of having to disable and enable TTS setting that is persisted in local storage.

In this PR:

1. I have added a DisableAudioPlayerButton component that normally stays off screen but appears when ChatCraft is streaming any audio in top left part of view port. I chose fixed positioning as I couldn't find enough real estate in the page where it could fit while being easily visible.
2. It works by clearing any audio clips in the audio queue and temporarily disabling it so no new audio clips are added as the response gets generated. The queue is automatically enabled once the message has finished streaming.
3. It also has a tooltip suggesting that "ChatCraft is Speaking" and clicking it would stop the current announcement.
4. It works with both real time streaming and Speak option.

I could probably position this better. Might need some help in figuring out.

This fixes #521

[humphd]

Nice idea. A few quick thoughts:

• StopSpeechAudioButton or Interrupt... might be better than DisableAudioPlayerButton, which implies that you're disabling it vs. stoping the in-progress action.
• I would move this either beside the button you use to get speech to start, or put it with the Pause/Cancel buttons.

[cloudflare-pages[bot]]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	34b03f7
Status:	✅  Deploy successful!
Preview URL:	https://fd6e8546.console-overthinker-dev.pages.dev
Branch Preview URL:	https://amnish04-stop-announcing-but.console-overthinker-dev.pages.dev

View logs

[Amnish04]

* `StopSpeechAudioButton` or `Interrupt...` might be better than `DisableAudioPlayerButton`, which implies that you're disabling it vs. stoping the in-progress action.

@humphd Agreed, I have renamed the button component.

Another thing I have added is that the button is solid variant only when an audio clip is playing.

* I would move this either beside the button you use to get speech to start, or put it with the `Pause`/`Cancel` buttons.

For the positioning, we probably cannot place it with Pause/Cancel button, since this is also for scenarios when a message is not streaming (Speak option and Audio Previews).

Also, by "beside the button you use to get speech to start", do you mean with these buttons?

If yes, I think that area is already too congested, which is why I tried to make it appear and float in a place with the least amount of content.

It still covers some content, particularly on mobile or when the sidebar is open. We could probably fix that by reducing the button's opacity after it has been there for a while, and only make it give it full opacity when hovered.

[humphd]

We should look at how other apps solve the positioning problem. This must be something that has visual design patterns we can leverage, but I don't tend to use a ton of TTS stuff myself.

[Amnish04]

@humphd I reviewed how ChatGPT handles the stop audio scenario and re-designed to something following similar pattern.

Whenever any audio clip is playing, the toggle TTS button is replaced with the interrupt audio button, with a custom bouncing balls animation indicating audio playback.

[tarasglek]

May I suggest animation similar to this?

[Amnish04]

May I suggest animation similar to this?

Sure, I can try to create that

[Amnish04]

@tarasglek Just added another variant to the component, imitating the type of animation you mentioned.

Also, it only animates when an audio clip is actually playing, otherwise the bars/balls are still.

[tarasglek]

perfect

[Amnish04]

@humphd Just rebased.