fix: inline citations

This commit is contained in:
Timothy Jaeryang Baek 2025-02-19 00:35:01 -08:00
parent c073b8b4ee
commit dab6396ebe
4 changed files with 11 additions and 9 deletions

View File

@ -7,6 +7,7 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let id = '';
export let sources = []; export let sources = [];
let citations = []; let citations = [];
@ -100,7 +101,7 @@
<div class="flex text-xs font-medium flex-wrap"> <div class="flex text-xs font-medium flex-wrap">
{#each citations as citation, idx} {#each citations as citation, idx}
<button <button
id={`source-${idx}`} id={`source-${id}-${idx}`}
class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-white dark:bg-gray-900 rounded-xl max-w-96" class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-white dark:bg-gray-900 rounded-xl max-w-96"
on:click={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
@ -179,7 +180,7 @@
<div class="flex text-xs font-medium flex-wrap"> <div class="flex text-xs font-medium flex-wrap">
{#each citations as citation, idx} {#each citations as citation, idx}
<button <button
id={`source-${idx}`} id={`source-${id}-${idx}`}
class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96" class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
on:click={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;

View File

@ -29,7 +29,7 @@
{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)} {:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
{@html `${token.text}`} {@html `${token.text}`}
{:else if token.text.includes(`<source_id`)} {:else if token.text.includes(`<source_id`)}
<Source {token} onClick={onSourceClick} /> <Source {id} {token} onClick={onSourceClick} />
{:else} {:else}
{token.text} {token.text}
{/if} {/if}

View File

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
export let id;
export let token; export let token;
export let onClick: Function = () => {}; export let onClick: Function = () => {};
@ -39,7 +40,7 @@
<button <button
class="text-xs font-medium w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/60 dark:hover:text-white bg-gray-50 text-black/60 hover:text-black transition rounded-lg" class="text-xs font-medium w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/60 dark:hover:text-white bg-gray-50 text-black/60 hover:text-black transition rounded-lg"
on:click={() => { on:click={() => {
onClick(attributes.data); onClick(id, attributes.data);
}} }}
> >
<span class="line-clamp-1"> <span class="line-clamp-1">

View File

@ -732,9 +732,9 @@
onTaskClick={async (e) => { onTaskClick={async (e) => {
console.log(e); console.log(e);
}} }}
onSourceClick={async (e) => { onSourceClick={async (id, idx) => {
console.log(e); console.log(id, idx);
let sourceButton = document.getElementById(`source-${e}`); let sourceButton = document.getElementById(`source-${message.id}-${idx}`);
const sourcesCollapsible = document.getElementById(`collapsible-sources`); const sourcesCollapsible = document.getElementById(`collapsible-sources`);
if (sourceButton) { if (sourceButton) {
@ -753,7 +753,7 @@
}); });
// Try clicking the source button again // Try clicking the source button again
sourceButton = document.getElementById(`source-${e}`); sourceButton = document.getElementById(`source-${message.id}-${idx}`);
sourceButton && sourceButton.click(); sourceButton && sourceButton.click();
} }
}} }}
@ -790,7 +790,7 @@
{/if} {/if}
{#if (message?.sources || message?.citations) && (model?.info?.meta?.capabilities?.citations ?? true)} {#if (message?.sources || message?.citations) && (model?.info?.meta?.capabilities?.citations ?? true)}
<Citations sources={message?.sources ?? message?.citations} /> <Citations id={message?.id} sources={message?.sources ?? message?.citations} />
{/if} {/if}
{#if message.code_executions} {#if message.code_executions}