Adding references, like Bing Chat

Suggest Edits

One of the great features pioneered by tools like Bing Chat is the ability to reference the documents from which the LLM sourced its answers. This helps users find more information about the response and fact-check that GPT isn't making things up.

As previously mentioned, our chain returns an array of references that contain PDF URLs indicating where the chunked sentences originated from.

We can show this in a nested v-for loop of links:

<span
	class="p-3 font-semibold text-sm rounded-lg flex flex-col"
	:class="
	    chatItem.role === 'user'
	        ? 'self-end ml-10 bg-gray-200 text-gray-800'
	        : 'self-start mr-10 bg-indigo-600 text-white'
	"
	v-for="(chatItem, idx) in uiChatHistory"
	:key="idx"
	>
	{{ chatItem.message }}
	
	<ol
	    v-if="chatItem.references?.length"
	    class="mt-2 flex items-center gap-2 flex-wrap"
	>
	    <li
	        v-for="(reference, idx) in chatItem.references"
	        :key="idx"
	    >
	        <a :href="reference" class="text-indigo-200"
	            >[{{
	                convertReferenceUrlIntoFileName(reference)
	            }}]</a
	        >
	    </li>
	</ol>
</span>

We use a little utility in the component to display the file name instead of the URL in the UI:

function convertReferenceUrlIntoFileName(url: string) {
    const splitUrl = url.split('/');
    return splitUrl[splitUrl.length - 1];
}

Now we have references, to help out our users!

Updated 5 months ago