How can I replace file citation markers with sequential footnotes in a NuxtJS app using Vercel's AI SDK?

Below is an approach that keeps the core streaming and message state intact while applying a transformation at display time. In many cases it’s best to leave the raw message data from the assistant untouched and then use a computed property (or similar reactive logic) to process the text before rendering. This way, you can build your reference list in a separate reactive state and update it every time a new message is added. Here's some guidance:

---

Option 1: Use a Computed Property on the Client

1. Leave the Raw Message Untouched:
   Let the assistant’s response be appended via the useAssistant hook without modification.

2. Create a Computed Transformation:
   Build a computed property that maps over the raw messages. For each message, use a regex to find your citation markers (for example, matching something like /【\d+:\d+†/g) and replace them with sequential references. You can maintain a separate reactive array or object for your reference list. This computed property would then return an object with the transformed message text and the updated citations.

3. Render the Transformed Content:
   In your template, use the computed property output so that users see the transformed text along with a rendered reference list at the bottom.

Example (Vue):

HTMLCopied
<template>
  <div>
    <div v-for="(message, index) in transformedMessages" :key="message.id">
      <p v-html="message.content"></p>
    </div>
    <div v-if="references.length">
      <h3>References:</h3>
      <ul>
        <li v-for="(ref, idx) in references" :key="idx">
          [{{ idx + 1 }}] {{ ref }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import { useAssistant } from 'ai/vue'

export default {
  setup() {
    const { messages } = useAssistant({ api: '/api/assistant' })
    // A reactive store for your footnotes
    const references = ref([])

    // Function to perform transformation
    const transformCitations = (text) => {
      // Use a regex to capture the citation marker parts
      // Sample regex: match something like 【4:2†
      let citationRegex = /【(\d+:\d+)†/g
      let citationIndex = 1
      // Replace citations while also building a reference list.
      let updatedText = text.replace(citationRegex, (match, citationId) => {
        // For example, here you can perform file lookup by citationId if needed
        // and then add an entry to the references list. For now, we'll simulate.
        let refText = `Reference for ${citationId}`
        // Only add if not already present
        if (!references.value.some(r => r.citationId === citationId)) {
          references.value.push({ citationId, display: refText })
        }
        return `[${citationIndex++}]`
      })
      return updatedText
    }

    // Create a computed property to transform messages later on
    const transformedMessages = computed(() =>
      messages.map(message => {
        if (message.content) {
          return {
            ...message,
            content: transformCitations(message.content)
          }
        }
        // Pass-through for non-text messages (if any)
        return message
      })
    )

    // Also derive a simple references text array for display
    const formattedReferences = computed(() =>
      references.value.map(ref => ref.display)
    )

    return { transformedMessages, references: formattedReferences }
  }
}
</script>

---

Option 2: Modify the Message Content as It Streams (Server-Side or When Appending)

Another possibility is to intercept the message as it’s appended by the useAssistant hook. For instance, in your AssistantResponse stream, you could process the whole text in the messageDone event. However, be careful with this approach because:

• State Preservation: The message stream may be used by other logic (such as middleware in the SDK) and mutating it directly might complicate state management.
• Separation of Concerns: Keeping UI formatting logic separate (in your client-side computed property) allows you to retain the untouched transcript. You can always derive different presentations of the same base data.

If you choose this approach, you could call a function to modify the text right before calling the append function (if that’s how you update your local message state). This is similar to Option 1 but changes the stored message content directly. The downside is that you might lose the original assistant response state, which can be useful in debugging or further processing.

---

Recommendation

It’s generally a better idea to leave the raw messages intact and perform the transformation on the client side via a computed property (or a method invoked during render). This approach ensures that:

• The transformation logic is decoupled from the message retrieval mechanism.
• You can easily maintain and update the sequential reference list.
• The original SDK flow and assistant response streaming remain unchanged.

Using a computed property is also reactive and will update correctly as new messages come in, allowing you to build an aggregated references list as your messages accumulate over time.

---

Summary

• Where to implement?
  Implement the transformation in your client UI logic—most likely using computed properties—so you can display transformed content and references without interfering with the assistant’s native message stream.

• How to implement?
  Use regex within a computed property (or during data processing when appending messages) to replace the citation markers while updating a separate reactive state for your footnote references.

This approach keeps the raw data from OpenAI’s response intact for debugging and further processing, while ensuring that the UI only displays your desired transformed format.