fix(frontend): harden the streaming ui and extract copy and constants

frontend/src/components/AssistantMessage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { formatMessage, messages } from '../lib/messages'
 import type { AssistantTurn } from '../lib/models'
 import EmptyResults from './EmptyResults.vue'
 import PlaylistError from './PlaylistError.vue'
@@ -15,13 +16,16 @@ const props = defineProps<{ turn: AssistantTurn; canSave: boolean }>()
 defineEmits<{ save: []; retry: [query: string] }>()
 
 const thinkingLabel = computed(() => {
-  if (props.turn.requestId === null) return 'Reading the request'
+  if (props.turn.requestId === null) return messages.assistantMessageReadingRequest
   if (props.turn.tracks.length === 0) {
-    return props.turn.candidateCount === null
-      ? 'Checking candidates'
-      : `Checking ${props.turn.candidateCount} candidates`
+    if (props.turn.candidateCount === null) {
+      return messages.assistantMessageCheckingCandidates
+    }
+    return formatMessage('assistantMessageCheckingCandidateCount', {
+      count: props.turn.candidateCount,
+    })
   }
-  return 'Streaming verified tracks'
+  return messages.assistantMessageStreamingTracks
 })
 
 const isEmptyResult = computed(
@@ -34,7 +38,7 @@ const isEmptyResult = computed(
 
 <template>
   <div class="assistant">
-    <div class="avatar" aria-hidden="true">d</div>
+    <div class="avatar" aria-hidden="true">{{ messages.assistantMessageAvatar }}</div>
     <div class="column">
       <p v-if="turn.intentSummary" class="intent">{{ turn.intentSummary }}</p>
 
@@ -76,7 +80,7 @@ const isEmptyResult = computed(
         :message="turn.playlist.message"
       />
       <PlaylistSaved
-        v-if="turn.playlist.status === 'saved' && turn.playlist.name && turn.playlist.url"
+        v-if="turn.playlist.status === 'saved' && turn.playlist.name"
         :name="turn.playlist.name"
         :url="turn.playlist.url"
         :track-count="turn.tracks.length"