rag/resources/js/Composables/useInferenceResponse.js

import {computed, reactive, ref} from 'vue'

export function useInferenceResponse() {
    const status = ref(null)
    const think = computed(() => buffer('think'))
    const content = computed(() => buffer('content'))

    let chunks = reactive({'think': [], 'content': []})

    function append(chunk, index, type) {
        setStatus(type)
        type = type === 2 ? 'think' : 'content'

        chunks[type].push({index: index, chunk: chunk})
    }

    function setStatus(value) {
        status.value = value
    }

    function reset() {
        status.value = null
        chunks.think = []
        chunks.content = []
    }

    function buffer(type) {
        if (!chunks[type].length) return '';

        const [{index: firstIndex}] = chunks[type].slice().sort((a, b) => a.index - b.index);

        return chunks[type]
            .slice()
            .sort((a, b) => a.index - b.index)
            .filter(({index}, i) => index === firstIndex + i)
            .map(({chunk}) => chunk)
            .join('');
    }

    return {think, content, status, append, reset, setStatus}
}