Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enh: inline citations

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2024-11-21 17:58:29 -08:00
parent 5be7cbfdf5
commit 386c976e9a
11 changed files with 102 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages/Citations.svelte
+1
View File
@@ -94,6 +94,7 @@
<div class="flex text-xs font-medium">
{#each _citations as citation, idx}
<button
id={`source-${citation.source.name}`}
class="no-toggle outline-none 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={() => {
showCitationModal = true;
src/lib/components/chat/Messages/ContentRenderer.svelte
+4
View File
@@ -11,9 +11,11 @@
export let id;
export let content;
export let model = null;
export let citations = null;
export let save = false;
export let floatingButtons = true;
export let onSourceClick = () => {};
let contentContainerElement;
let buttonsContainerElement;
@@ -129,6 +131,8 @@
{content}
{model}
{save}
sourceIds={(citations ?? []).map((c) => c?.source?.name)}
{onSourceClick}
on:update={(e) => {
dispatch('update', e.detail);
}}
src/lib/components/chat/Messages/Markdown.svelte
+5 -1
View File
@@ -16,6 +16,9 @@
export let model = null;
export let save = false;
export let sourceIds = [];
export let onSourceClick = () => {};
let tokens = [];
const options = {
@@ -28,7 +31,7 @@
$: (async () => {
if (content) {
tokens = marked.lexer(
replaceTokens(processResponseContent(content), model?.name, $user?.name)
replaceTokens(processResponseContent(content), sourceIds, model?.name, $user?.name)
);
}
})();
@@ -39,6 +42,7 @@
{tokens}
{id}
{save}
{onSourceClick}
on:update={(e) => {
dispatch('update', e.detail);
}}
src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte
+4
View File
@@ -12,9 +12,11 @@
import Image from '$lib/components/common/Image.svelte';
import KatexRenderer from './KatexRenderer.svelte';
import Source from './Source.svelte';
export let id: string;
export let tokens: Token[];
export let onSourceClick: Function = () => {};
</script>
{#each tokens as token}
@@ -26,6 +28,8 @@
{@html html}
{:else if token.text.includes(`<iframe src="${WEBUI_BASE_URL}/api/v1/files/`)}
{@html `${token.text}`}
{:else if token.text.includes(`<source_id`)}
<Source {token} onClick={onSourceClick} />
{:else}
{token.text}
{/if}
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+15 -4
View File
@@ -25,6 +25,7 @@
export let top = true;
export let save = false;
export let onSourceClick: Function = () => {};
const headerComponent = (depth: number) => {
return 'h' + depth;
@@ -62,7 +63,7 @@
<hr />
{:else if token.type === 'heading'}
<svelte:element this={headerComponent(token.depth)}>
<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} />
<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} {onSourceClick} />
</svelte:element>
{:else if token.type === 'code'}
{#if token.raw.includes('```')}
@@ -108,6 +109,7 @@
<MarkdownInlineTokens
id={`${id}-${tokenIdx}-header-${headerIdx}`}
tokens={header.tokens}
{onSourceClick}
/>
</div>
</th>
@@ -126,6 +128,7 @@
<MarkdownInlineTokens
id={`${id}-${tokenIdx}-row-${rowIdx}-${cellIdx}`}
tokens={cell.tokens}
{onSourceClick}
/>
</div>
</td>
@@ -205,19 +208,27 @@
></iframe>
{:else if token.type === 'paragraph'}
<p>
<MarkdownInlineTokens id={`${id}-${tokenIdx}-p`} tokens={token.tokens ?? []} />
<MarkdownInlineTokens
id={`${id}-${tokenIdx}-p`}
tokens={token.tokens ?? []}
{onSourceClick}
/>
</p>
{:else if token.type === 'text'}
{#if top}
<p>
{#if token.tokens}
<MarkdownInlineTokens id={`${id}-${tokenIdx}-t`} tokens={token.tokens} />
<MarkdownInlineTokens id={`${id}-${tokenIdx}-t`} tokens={token.tokens} {onSourceClick} />
{:else}
{unescapeHtml(token.text)}
{/if}
</p>
{:else if token.tokens}
<MarkdownInlineTokens id={`${id}-${tokenIdx}-p`} tokens={token.tokens ?? []} />
<MarkdownInlineTokens
id={`${id}-${tokenIdx}-p`}
tokens={token.tokens ?? []}
{onSourceClick}
/>
{:else}
{unescapeHtml(token.text)}
{/if}
src/lib/components/chat/Messages/Markdown/Source.svelte
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts">
export let token;
export let onClick: Function = () => {};
let id = '';
function extractDataAttribute(input) {
// Use a regular expression to extract the value of the `data` attribute
const match = input.match(/data="([^"]*)"/);
// Check if a match was found and return the first captured group
return match ? match[1] : null;
}
$: id = extractDataAttribute(token.text);
</script>
<button
class="text-xs font-medium px-1.5 py-0.5 dark:bg-white/5 dark:hover:bg-white/10 bg-black/5 hover:bg-black/10 transition rounded-lg"
on:click={() => {
onClick(id);
}}
>
{id}
</button>
src/lib/components/chat/Messages/ResponseMessage.svelte
+9
View File
@@ -621,9 +621,18 @@
<ContentRenderer
id={message.id}
content={message.content}
citations={message.citations}
floatingButtons={message?.done}
save={!readOnly}
{model}
onSourceClick={(e) => {
console.log(e);
const sourceButton = document.getElementById(`source-${e}`);
if (sourceButton) {
sourceButton.click();
}
}}
on:update={(e) => {
const { raw, oldContent, newContent } = e.detail;
src/lib/components/chat/Messages/UserMessage.svelte
+1 -5
View File
@@ -5,11 +5,7 @@
import { models, settings } from '$lib/stores';
import { user as _user } from '$lib/stores';
import {
copyToClipboard as _copyToClipboard,
processResponseContent,
replaceTokens
} from '$lib/utils';
import { copyToClipboard as _copyToClipboard } from '$lib/utils';
import Name from './Name.svelte';
import ProfileImage from './ProfileImage.svelte';
src/lib/utils/index.ts
+14 -1
View File
@@ -8,12 +8,13 @@ import { TTS_RESPONSE_SPLIT } from '$lib/types';
// Helper functions
//////////////////////////
export const replaceTokens = (content, char, user) => {
export const replaceTokens = (content, sourceIds, char, user) => {
const charToken = /{{char}}/gi;
const userToken = /{{user}}/gi;
const videoIdToken = /{{VIDEO_FILE_ID_([a-f0-9-]+)}}/gi; // Regex to capture the video ID
const htmlIdToken = /{{HTML_FILE_ID_([a-f0-9-]+)}}/gi; // Regex to capture the HTML ID
// Replace {{char}} if char is provided
if (char !== undefined && char !== null) {
content = content.replace(charToken, char);
@@ -36,6 +37,18 @@ export const replaceTokens = (content, char, user) => {
return `<iframe src="${htmlUrl}" width="100%" frameborder="0" onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"></iframe>`;
});
// Remove sourceIds from the content and replace them with <source_id>...</source_id>
if (Array.isArray(sourceIds)) {
sourceIds.forEach((sourceId) => {
// Create a token based on the exact `[sourceId]` string
const sourceToken = `\\[${sourceId}\\]`; // Escape special characters for RegExp
const sourceRegex = new RegExp(sourceToken, 'g'); // Match all occurrences of [sourceId]
content = content.replace(sourceRegex, `<source_id data="${sourceId}" />`);
});
}
return content;
};