ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-14 21:35:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: chat navbar menu

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-10-26 19:23:55 -07:00 committed by Stoyan Zlatev
parent ea1f276386
commit d68ba284db
5 changed files with 165 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
src/lib/components/chat/Artifacts.svelte
View file

@ -4,7 +4,14 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import { artifactCode, chatId, settings, showArtifacts, showControls } from '$lib/stores'; import {
artifactCode,
chatId,
settings,
showArtifacts,
showControls,
artifactContents
} from '$lib/stores';
import { copyToClipboard, createMessagesList } from '$lib/utils'; import { copyToClipboard, createMessagesList } from '$lib/utils';
import XMark from '../icons/XMark.svelte'; import XMark from '../icons/XMark.svelte';
@ -15,8 +22,6 @@
import Download from '../icons/Download.svelte'; import Download from '../icons/Download.svelte';
export let overlay = false; export let overlay = false;
export let history;
let messages = [];
let contents: Array<{ type: string; content: string }> = []; let contents: Array<{ type: string; content: string }> = [];
let selectedContentIdx = 0; let selectedContentIdx = 0;
@ -24,121 +29,11 @@
let copied = false; let copied = false;
let iframeElement: HTMLIFrameElement; let iframeElement: HTMLIFrameElement;
$: if (history) {
messages = createMessagesList(history, history.currentId);
getContents();
} else {
messages = [];
getContents();
}
const getContents = () => {
contents = [];
messages.forEach((message) => {
if (message?.role !== 'user' && message?.content) {
const codeBlockContents = message.content.match(/```[\s\S]*?```/g);
let codeBlocks = [];
let htmlContent = '';
let cssContent = '';
let jsContent = '';
if (codeBlockContents) {
codeBlockContents.forEach((block) => {
const lang = block.split('\n')[0].replace('```', '').trim().toLowerCase();
const code = block.replace(/```[\s\S]*?\n/, '').replace(/```$/, '');
codeBlocks.push({ lang, code });
});
codeBlocks.forEach((block) => {
const { lang, code } = block;
if (lang === 'html') {
htmlContent += code + '\n';
} else if (lang === 'css') {
cssContent += code + '\n';
} else if (lang === 'javascript' || lang === 'js') {
jsContent += code + '\n';
}
});
} else {
const inlineHtml = message.content.match(/<html>[\s\S]*?<\/html>/gi);
const inlineCss = message.content.match(/<style>[\s\S]*?<\/style>/gi);
const inlineJs = message.content.match(/<script>[\s\S]*?<\/script>/gi);
if (inlineHtml) {
inlineHtml.forEach((block) => {
const content = block.replace(/<\/?html>/gi, ''); // Remove <html> tags
htmlContent += content + '\n';
});
}
if (inlineCss) {
inlineCss.forEach((block) => {
const content = block.replace(/<\/?style>/gi, ''); // Remove <style> tags
cssContent += content + '\n';
});
}
if (inlineJs) {
inlineJs.forEach((block) => {
const content = block.replace(/<\/?script>/gi, ''); // Remove <script> tags
jsContent += content + '\n';
});
}
}
if (htmlContent || cssContent || jsContent) {
const renderedContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<${''}style>
body {
background-color: white; /* Ensure the iframe has a white background */
}
${cssContent}
</${''}style>
</head>
<body>
${htmlContent}
<${''}script>
${jsContent}
</${''}script>
</body>
</html>
`;
contents = [...contents, { type: 'iframe', content: renderedContent }];
} else {
// Check for SVG content
for (const block of codeBlocks) {
if (block.lang === 'svg' || (block.lang === 'xml' && block.code.includes('<svg'))) {
contents = [...contents, { type: 'svg', content: block.code }];
}
}
}
}
});
if (contents.length === 0) {
showControls.set(false);
showArtifacts.set(false);
}
selectedContentIdx = contents ? contents.length - 1 : 0;
};
function navigateContent(direction: 'prev' | 'next') { function navigateContent(direction: 'prev' | 'next') {
console.log(selectedContentIdx);
selectedContentIdx = selectedContentIdx =
direction === 'prev' direction === 'prev'
? Math.max(selectedContentIdx - 1, 0) ? Math.max(selectedContentIdx - 1, 0)
: Math.min(selectedContentIdx + 1, contents.length - 1); : Math.min(selectedContentIdx + 1, contents.length - 1);
console.log(selectedContentIdx);
} }
const iframeLoadHandler = () => { const iframeLoadHandler = () => {
@ -201,6 +96,18 @@
selectedContentIdx = codeIdx !== -1 ? codeIdx : 0; selectedContentIdx = codeIdx !== -1 ? codeIdx : 0;
} }
}); });
artifactContents.subscribe((value) => {
contents = value;
console.log('Artifact contents updated:', contents);
if (contents.length === 0) {
showControls.set(false);
showArtifacts.set(false);
}
selectedContentIdx = contents ? contents.length - 1 : 0;
});
}); });
</script> </script>

69
src/lib/components/chat/Chat.svelte
View file

@ -4,6 +4,7 @@
import { PaneGroup, Pane, PaneResizer } from 'paneforge'; import { PaneGroup, Pane, PaneResizer } from 'paneforge';
import { getContext, onDestroy, onMount, tick } from 'svelte'; import { getContext, onDestroy, onMount, tick } from 'svelte';
import { fade } from 'svelte/transition';
const i18n: Writable<i18nType> = getContext('i18n'); const i18n: Writable<i18nType> = getContext('i18n');
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@ -34,6 +35,7 @@
showOverview, showOverview,
chatTitle, chatTitle,
showArtifacts, showArtifacts,
artifactContents,
tools, tools,
toolServers, toolServers,
functions, functions,
@ -48,9 +50,9 @@
createMessagesList, createMessagesList,
getPromptVariables, getPromptVariables,
processDetails, processDetails,
removeAllDetails removeAllDetails,
getCodeBlockContents
} from '$lib/utils'; } from '$lib/utils';
import { import {
createNewChat, createNewChat,
getAllTags, getAllTags,
@ -75,8 +77,8 @@
import { getTools } from '$lib/apis/tools'; import { getTools } from '$lib/apis/tools';
import { uploadFile } from '$lib/apis/files'; import { uploadFile } from '$lib/apis/files';
import { createOpenAITextStream } from '$lib/apis/streaming'; import { createOpenAITextStream } from '$lib/apis/streaming';
import { getFunctions } from '$lib/apis/functions';
import { fade } from 'svelte/transition'; import { updateFolderById } from '$lib/apis/folders';
import Banner from '../common/Banner.svelte'; import Banner from '../common/Banner.svelte';
import MessageInput from '$lib/components/chat/MessageInput.svelte'; import MessageInput from '$lib/components/chat/MessageInput.svelte';
@ -89,9 +91,7 @@
import Spinner from '../common/Spinner.svelte'; import Spinner from '../common/Spinner.svelte';
import Tooltip from '../common/Tooltip.svelte'; import Tooltip from '../common/Tooltip.svelte';
import Sidebar from '../icons/Sidebar.svelte'; import Sidebar from '../icons/Sidebar.svelte';
import { getFunctions } from '$lib/apis/functions';
import Image from '../common/Image.svelte'; import Image from '../common/Image.svelte';
import { updateFolderById } from '$lib/apis/folders';
export let chatIdProp = ''; export let chatIdProp = '';
@ -819,6 +819,63 @@
} }
}; };
$: if (history) {
getContents();
} else {
artifactContents.set([]);
}
const getContents = () => {
const messages = history ? createMessagesList(history, history.currentId) : [];
let contents = [];
messages.forEach((message) => {
if (message?.role !== 'user' && message?.content) {
const {
codeBlocks: codeBlocks,
html: htmlContent,
css: cssContent,
js: jsContent
} = getCodeBlockContents(message.content);
if (htmlContent || cssContent || jsContent) {
const renderedContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<${''}style>
body {
background-color: white; /* Ensure the iframe has a white background */
}
${cssContent}
</${''}style>
</head>
<body>
${htmlContent}
<${''}script>
${jsContent}
</${''}script>
</body>
</html>
`;
contents = [...contents, { type: 'iframe', content: renderedContent }];
} else {
// Check for SVG content
for (const block of codeBlocks) {
if (block.lang === 'svg' || (block.lang === 'xml' && block.code.includes('<svg'))) {
contents = [...contents, { type: 'svg', content: block.code }];
}
}
}
}
});
artifactContents.set(contents);
};
////////////////////////// //////////////////////////
// Web functions // Web functions
////////////////////////// //////////////////////////

33
src/lib/components/layout/Navbar/Menu.svelte
View file

@ -19,7 +19,8 @@
user, user,
settings, settings,
folders, folders,
showEmbeds showEmbeds,
artifactContents
} from '$lib/stores'; } from '$lib/stores';
import { flyAndScale } from '$lib/utils/transitions'; import { flyAndScale } from '$lib/utils/transitions';
import { getChatById } from '$lib/apis/chats'; import { getChatById } from '$lib/apis/chats';
@ -312,7 +313,7 @@
<div class="flex items-center">{$i18n.t('Settings')}</div> <div class="flex items-center">{$i18n.t('Settings')}</div>
</DropdownMenu.Item> --> </DropdownMenu.Item> -->
{#if $mobile} {#if $mobile && ($user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true))}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-controls-button" id="chat-controls-button"
@ -342,19 +343,21 @@
<div class="flex items-center">{$i18n.t('Overview')}</div> <div class="flex items-center">{$i18n.t('Overview')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item {#if ($artifactContents ?? []).length > 0}
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" <DropdownMenu.Item
id="chat-overview-button" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={async () => { id="chat-overview-button"
await showControls.set(true); on:click={async () => {
await showArtifacts.set(true); await showControls.set(true);
await showOverview.set(false); await showArtifacts.set(true);
await showEmbeds.set(false); await showOverview.set(false);
}} await showEmbeds.set(false);
> }}
<Cube className=" size-4" strokeWidth="1.5" /> >
<div class="flex items-center">{$i18n.t('Artifacts')}</div> <Cube className=" size-4" strokeWidth="1.5" />
</DropdownMenu.Item> <div class="flex items-center">{$i18n.t('Artifacts')}</div>
</DropdownMenu.Item>
{/if}
<hr class="border-gray-50 dark:border-gray-800 my-1" /> <hr class="border-gray-50 dark:border-gray-800 my-1" />

4
src/lib/stores/index.ts
View file

@ -80,8 +80,10 @@ export const showOverview = writable(false);
export const showArtifacts = writable(false); export const showArtifacts = writable(false);
export const showCallOverlay = writable(false); export const showCallOverlay = writable(false);
export const embed = writable(null);
export const artifactCode = writable(null); export const artifactCode = writable(null);
export const artifactContents = writable(null);
export const embed = writable(null);
export const temporaryChatEnabled = writable(false); export const temporaryChatEnabled = writable(false);
export const scrollPaginationEnabled = writable(false); export const scrollPaginationEnabled = writable(false);

62
src/lib/utils/index.ts
View file

@ -348,7 +348,7 @@ export const compressImage = async (imageUrl, maxWidth, maxHeight) => {
context.drawImage(img, 0, 0, width, height); context.drawImage(img, 0, 0, width, height);
// Get compressed image URL // Get compressed image URL
const mimeType = imageUrl.match(/^data:([^;]+);/)?.[1]; const mimeType = imageUrl.match(/^data:([^;]+);/)?.[1];
const compressedUrl = canvas.toDataURL(mimeType); const compressedUrl = canvas.toDataURL(mimeType);
resolve(compressedUrl); resolve(compressedUrl);
}; };
@ -1625,3 +1625,63 @@ export const renderVegaVisualization = async (spec: string, i18n?: any) => {
const svg = await view.toSVG(); const svg = await view.toSVG();
return svg; return svg;
}; };
export const getCodeBlockContents = (content: string): object => {
const codeBlockContents = content.match(/```[\s\S]*?```/g);
let codeBlocks = [];
let htmlContent = '';
let cssContent = '';
let jsContent = '';
if (codeBlockContents) {
codeBlockContents.forEach((block) => {
const lang = block.split('\n')[0].replace('```', '').trim().toLowerCase();
const code = block.replace(/```[\s\S]*?\n/, '').replace(/```$/, '');
codeBlocks.push({ lang, code });
});
codeBlocks.forEach((block) => {
const { lang, code } = block;
if (lang === 'html') {
htmlContent += code + '\n';
} else if (lang === 'css') {
cssContent += code + '\n';
} else if (lang === 'javascript' || lang === 'js') {
jsContent += code + '\n';
}
});
} else {
const inlineHtml = content.match(/<html>[\s\S]*?<\/html>/gi);
const inlineCss = content.match(/<style>[\s\S]*?<\/style>/gi);
const inlineJs = content.match(/<script>[\s\S]*?<\/script>/gi);
if (inlineHtml) {
inlineHtml.forEach((block) => {
const content = block.replace(/<\/?html>/gi, ''); // Remove <html> tags
htmlContent += content + '\n';
});
}
if (inlineCss) {
inlineCss.forEach((block) => {
const content = block.replace(/<\/?style>/gi, ''); // Remove <style> tags
cssContent += content + '\n';
});
}
if (inlineJs) {
inlineJs.forEach((block) => {
const content = block.replace(/<\/?script>/gi, ''); // Remove <script> tags
jsContent += content + '\n';
});
}
}
return {
codeBlocks: codeBlocks,
html: htmlContent.trim(),
css: cssContent.trim(),
js: jsContent.trim()
};
};