mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 20:35:19 +00:00
refac: chat navbar menu
This commit is contained in:
Timothy Jaeryang Baek
parent
82c08a3b5d
commit
ed6449d35f
5 changed files with 165 additions and 136 deletions
|
|
@ -4,7 +4,14 @@
|
|||
const i18n = getContext('i18n');
|
||||
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 XMark from '../icons/XMark.svelte';
|
||||
|
|
@ -15,8 +22,6 @@
|
|||
import Download from '../icons/Download.svelte';
|
||||
|
||||
export let overlay = false;
|
||||
export let history;
|
||||
let messages = [];
|
||||
|
||||
let contents: Array<{ type: string; content: string }> = [];
|
||||
let selectedContentIdx = 0;
|
||||
|
|
@ -24,121 +29,11 @@
|
|||
let copied = false;
|
||||
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') {
|
||||
console.log(selectedContentIdx);
|
||||
|
||||
selectedContentIdx =
|
||||
direction === 'prev'
|
||||
? Math.max(selectedContentIdx - 1, 0)
|
||||
: Math.min(selectedContentIdx + 1, contents.length - 1);
|
||||
|
||||
console.log(selectedContentIdx);
|
||||
}
|
||||
|
||||
const iframeLoadHandler = () => {
|
||||
|
|
@ -201,6 +96,18 @@
|
|||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { PaneGroup, Pane, PaneResizer } from 'paneforge';
|
||||
|
||||
import { getContext, onDestroy, onMount, tick } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
const i18n: Writable<i18nType> = getContext('i18n');
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
showOverview,
|
||||
chatTitle,
|
||||
showArtifacts,
|
||||
artifactContents,
|
||||
tools,
|
||||
toolServers,
|
||||
functions,
|
||||
|
|
@ -48,9 +50,9 @@
|
|||
createMessagesList,
|
||||
getPromptVariables,
|
||||
processDetails,
|
||||
removeAllDetails
|
||||
removeAllDetails,
|
||||
getCodeBlockContents
|
||||
} from '$lib/utils';
|
||||
|
||||
import {
|
||||
createNewChat,
|
||||
getAllTags,
|
||||
|
|
@ -75,8 +77,8 @@
|
|||
import { getTools } from '$lib/apis/tools';
|
||||
import { uploadFile } from '$lib/apis/files';
|
||||
import { createOpenAITextStream } from '$lib/apis/streaming';
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
import { getFunctions } from '$lib/apis/functions';
|
||||
import { updateFolderById } from '$lib/apis/folders';
|
||||
|
||||
import Banner from '../common/Banner.svelte';
|
||||
import MessageInput from '$lib/components/chat/MessageInput.svelte';
|
||||
|
|
@ -89,9 +91,7 @@
|
|||
import Spinner from '../common/Spinner.svelte';
|
||||
import Tooltip from '../common/Tooltip.svelte';
|
||||
import Sidebar from '../icons/Sidebar.svelte';
|
||||
import { getFunctions } from '$lib/apis/functions';
|
||||
import Image from '../common/Image.svelte';
|
||||
import { updateFolderById } from '$lib/apis/folders';
|
||||
|
||||
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
|
||||
//////////////////////////
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
user,
|
||||
settings,
|
||||
folders,
|
||||
showEmbeds
|
||||
showEmbeds,
|
||||
artifactContents
|
||||
} from '$lib/stores';
|
||||
import { flyAndScale } from '$lib/utils/transitions';
|
||||
import { getChatById } from '$lib/apis/chats';
|
||||
|
|
@ -312,7 +313,7 @@
|
|||
<div class="flex items-center">{$i18n.t('Settings')}</div>
|
||||
</DropdownMenu.Item> -->
|
||||
|
||||
{#if $mobile}
|
||||
{#if $mobile && ($user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true))}
|
||||
<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"
|
||||
id="chat-controls-button"
|
||||
|
|
@ -342,19 +343,21 @@
|
|||
<div class="flex items-center">{$i18n.t('Overview')}</div>
|
||||
</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"
|
||||
id="chat-overview-button"
|
||||
on:click={async () => {
|
||||
await showControls.set(true);
|
||||
await showArtifacts.set(true);
|
||||
await showOverview.set(false);
|
||||
await showEmbeds.set(false);
|
||||
}}
|
||||
>
|
||||
<Cube className=" size-4" strokeWidth="1.5" />
|
||||
<div class="flex items-center">{$i18n.t('Artifacts')}</div>
|
||||
</DropdownMenu.Item>
|
||||
{#if ($artifactContents ?? []).length > 0}
|
||||
<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"
|
||||
id="chat-overview-button"
|
||||
on:click={async () => {
|
||||
await showControls.set(true);
|
||||
await showArtifacts.set(true);
|
||||
await showOverview.set(false);
|
||||
await showEmbeds.set(false);
|
||||
}}
|
||||
>
|
||||
<Cube className=" size-4" strokeWidth="1.5" />
|
||||
<div class="flex items-center">{$i18n.t('Artifacts')}</div>
|
||||
</DropdownMenu.Item>
|
||||
{/if}
|
||||
|
||||
<hr class="border-gray-50 dark:border-gray-800 my-1" />
|
||||
|
||||
|
|
|
|||
|
|
@ -80,8 +80,10 @@ export const showOverview = writable(false);
|
|||
export const showArtifacts = writable(false);
|
||||
export const showCallOverlay = writable(false);
|
||||
|
||||
export const embed = writable(null);
|
||||
export const artifactCode = writable(null);
|
||||
export const artifactContents = writable(null);
|
||||
|
||||
export const embed = writable(null);
|
||||
|
||||
export const temporaryChatEnabled = writable(false);
|
||||
export const scrollPaginationEnabled = writable(false);
|
||||
|
|
|
|||
|
|
@ -348,7 +348,7 @@ export const compressImage = async (imageUrl, maxWidth, maxHeight) => {
|
|||
context.drawImage(img, 0, 0, width, height);
|
||||
|
||||
// Get compressed image URL
|
||||
const mimeType = imageUrl.match(/^data:([^;]+);/)?.[1];
|
||||
const mimeType = imageUrl.match(/^data:([^;]+);/)?.[1];
|
||||
const compressedUrl = canvas.toDataURL(mimeType);
|
||||
resolve(compressedUrl);
|
||||
};
|
||||
|
|
@ -1625,3 +1625,63 @@ export const renderVegaVisualization = async (spec: string, i18n?: any) => {
|
|||
const svg = await view.toSVG();
|
||||
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()
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue