fix: correct chat bubble count and ordering across all backends

Root cause (WebView, takes effect immediately, no rebuild needed):
sendMessage() created the pending model/spinner bubble synchronously
via addModelBubble('', true) right after calling Bridge.sendMessage()/
sendMessageWithImages(). Those Android bridge calls dispatch to the UI
thread asynchronously, so the spinner bubble was always inserted into
the DOM before the native onUserMessage/onAiMessage callbacks could
fire - making the spinner appear in its own bubble above the user's
message instead of below it. The pending model bubble is now created
exclusively by the native onAiMessage('', true) callback once
generation actually starts.

Native ordering bugs (require a rebuild to take effect):
- reasonWithCerebras / reasonWithMistral set _uiState = Loading before
  appending the user message to chatMessagesFlow, so onAiMessage fired
  before onUserMessage - same spinner-above-user-bubble bug at the
  native level for these two backends.
- HUMAN_EXPERT branch in reason(): same ordering issue, and the
  'already connected' path (postTaskToHumanExpert) never updated
  chatMessagesFlow at all, so a follow-up message while already
  connected never appeared as a bubble.
- MainActivity's chatMessagesFlow collector compared the last user
  message by text content to decide whether to call onUserMessage.
  Sending the exact same text twice in a row was therefore silently
  swallowed (no second bubble at all). Now compares by the message's
  unique id instead, so every distinct message always gets its bubble.

Author: Claude Fix

app/src/main/kotlin/com/google/ai/sample/MainActivity.kt

@@ -1717,16 +1717,16 @@ class MainActivity : ComponentActivity() {
         // Observe chat messages so the WebView user bubble is updated with the full message text
         // (including screen elements and Termux output) once native code has assembled it.
         // The WebView's sendMessage() adds the bubble with only the typed text; this corrects it.
-        var lastObservedUserText = ""
+        var lastObservedUserMessageId: String? = null
         lifecycleScope.launch {
             vm.chatMessagesFlow.collect { messages ->
                 val lastUser = messages.lastOrNull {
                     it.participant == com.google.ai.sample.feature.multimodal.PhotoParticipant.USER && !it.isPending
                 }
-                val fullText = lastUser?.text ?: return@collect
-                if (fullText != lastObservedUserText) {
-                    lastObservedUserText = fullText
-                    val escaped = escapeForJs(fullText)
+                if (lastUser == null) return@collect
+                if (lastUser.id != lastObservedUserMessageId) {
+                    lastObservedUserMessageId = lastUser.id
+                    val escaped = escapeForJs(lastUser.text)
                     wv.post {
                         wv.evaluateJavascript("window.onUserMessage && window.onUserMessage('$escaped')", null)
                     }

app/src/main/kotlin/com/google/ai/sample/feature/multimodal/PhotoReasoningViewModel.kt

@@ -834,7 +834,8 @@ class PhotoReasoningViewModel(
                  isPending = false
              )
              _chatState.addMessage(userMessage)
-             
+             _chatMessagesFlow.value = _chatState.getAllMessages()
+
              _uiState.value = PhotoReasoningUiState.Loading
 
              // We need to ensure we have MediaProjection permission.
@@ -1185,7 +1186,6 @@ class PhotoReasoningViewModel(
         @Suppress("UNUSED_PARAMETER") selectedImages: List<Bitmap>,
         screenInfoForPrompt: String? = null
     ) {
-        _uiState.value = PhotoReasoningUiState.Loading
         val context = appContext
         val apiKeyManager = ApiKeyManager.getInstance(context)
 
@@ -1205,6 +1205,8 @@ class PhotoReasoningViewModel(
             )
         )
 
+        _uiState.value = PhotoReasoningUiState.Loading
+
         resetStreamingCommandState()
 
         viewModelScope.launch(Dispatchers.IO) {
@@ -1311,7 +1313,6 @@ class PhotoReasoningViewModel(
             TAG,
             "reasonWithMistral: start, images=${selectedImages.size}, screenInfo=${!screenInfoForPrompt.isNullOrBlank()}, chatSize=${_chatState.getAllMessages().size}"
         )
-        _uiState.value = PhotoReasoningUiState.Loading
         _showStopNotificationFlow.value = true
         val context = appContext
         val apiKeyManager = ApiKeyManager.getInstance(context)
@@ -1334,6 +1335,8 @@ class PhotoReasoningViewModel(
         )
     )
 
+    _uiState.value = PhotoReasoningUiState.Loading
+
     resetStreamingCommandState()
 
     currentReasoningJob?.cancel()

index.html

@@ -4199,7 +4199,13 @@
   selectedImages.forEach(img => { if (img.objectUrl) URL.revokeObjectURL(img.objectUrl); });
   selectedImages = [];
   renderImagePreviews();
-  addModelBubble('', true);
+  // NOTE: do NOT create the pending model bubble here. Bridge.sendMessage /
+  // Bridge.sendMessageWithImages return immediately (the Android side dispatches to
+  // the UI thread asynchronously), so any bubble created synchronously at this point
+  // would always land in the DOM before the native onUserMessage/onAiMessage callbacks
+  // fire — showing the spinner above the user's own message. The pending model bubble
+  // is created by window.onAiMessage('', true) once Android actually starts generating,
+  // which is guaranteed to happen after onUserMessage has added the user bubble.
   window.onGenerationStateChanged(true, false);
 }