OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-04 03:37:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: citations

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-02-12 23:55:14 -08:00
parent a1dc2664c2
commit 7ff719938a
3 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/chat/Messages/Citations.svelte
View File

@ -100,7 +100,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-${citation.source.name}`} id={`source-${idx}`}
class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-white dark:bg-gray-900 rounded-xl max-w-96" class="no-toggle outline-none 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 +179,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-${citation.source.name}`} id={`source-${idx}`}
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" 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={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;

25
src/lib/components/chat/Messages/Markdown/Source.svelte
View File

@ -2,24 +2,31 @@
export let token; export let token;
export let onClick: Function = () => {}; export let onClick: Function = () => {};
let id = ''; let attributes: Record<string, string> = {};
function extractDataAttribute(input) {
// Use a regular expression to extract the value of the `data` attribute function extractAttributes(input: string): Record<string, string> {
const match = input.match(/data="([^"]*)"/); const regex = /(\w+)="([^"]*)"/g;
// Check if a match was found and return the first captured group let match;
return match ? match[1] : null; let attrs: Record<string, string> = {};
// Loop through all matches and populate the attributes object
while ((match = regex.exec(input)) !== null) {
attrs[match[1]] = match[2];
}
return attrs;
} }
$: id = extractDataAttribute(token.text); $: attributes = extractAttributes(token.text);
</script> </script>
<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(id); onClick(attributes.data);
}} }}
> >
<span class="line-clamp-1"> <span class="line-clamp-1">
{id} {attributes.title}
</span> </span>
</button> </button>

9
src/lib/utils/index.ts
View File

@ -55,15 +55,12 @@ export const replaceTokens = (content, sourceIds, char, user) => {
// Remove sourceIds from the content and replace them with <source_id>...</source_id> // Remove sourceIds from the content and replace them with <source_id>...</source_id>
if (Array.isArray(sourceIds)) { if (Array.isArray(sourceIds)) {
sourceIds.forEach((sourceId) => { sourceIds.forEach((sourceId, idx) => {
// Escape special characters in the sourceId
const escapedSourceId = escapeRegExp(sourceId);
// Create a token based on the exact `[sourceId]` string // Create a token based on the exact `[sourceId]` string
const sourceToken = `\\[${escapedSourceId}\\]`; // Escape special characters for RegExp const sourceToken = `\\[${idx}\\]`; // Escape special characters for RegExp
const sourceRegex = new RegExp(sourceToken, 'g'); // Match all occurrences of [sourceId] const sourceRegex = new RegExp(sourceToken, 'g'); // Match all occurrences of [sourceId]
content = content.replace(sourceRegex, `<source_id data="${sourceId}" />`); content = content.replace(sourceRegex, `<source_id data="${idx}" title="${sourceId}" />`);
}); });
} }