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

chore: format

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-03-18 06:39:37 -07:00
parent f5c5a4119f
commit 3186aeac08
55 changed files with 487 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages/Markdown/AlertRenderer.svelte
+72 -80
View File
@@ -1,82 +1,82 @@
<script lang="ts" context="module">
import { marked, type Token } from 'marked';
type AlertType = "NOTE" | "TIP" | "IMPORTANT" | "WARNING" | "CAUTION";
type AlertType = 'NOTE' | 'TIP' | 'IMPORTANT' | 'WARNING' | 'CAUTION';
interface AlertTheme {
border: string;
text: string;
icon: ComponentType;
}
interface AlertTheme {
border: string;
text: string;
icon: ComponentType;
}
export interface AlertData {
type: AlertType;
text: string;
tokens: Token[];
}
export interface AlertData {
type: AlertType;
text: string;
tokens: Token[];
}
const alertStyles: Record<AlertType, AlertTheme> = {
"NOTE": {
border: "border-sky-500",
text: "text-sky-500",
icon: Info
},
"TIP": {
border: "border-emerald-500",
text: "text-emerald-500",
icon: LightBlub
},
"IMPORTANT": {
border: "border-purple-500",
text: "text-purple-500",
icon: Star
},
"WARNING": {
border: "border-yellow-500",
text: "text-yellow-500",
icon: ArrowRightCircle
},
"CAUTION": {
border: "border-rose-500",
text: "text-rose-500",
icon: Bolt
}
};
const alertStyles: Record<AlertType, AlertTheme> = {
NOTE: {
border: 'border-sky-500',
text: 'text-sky-500',
icon: Info
},
TIP: {
border: 'border-emerald-500',
text: 'text-emerald-500',
icon: LightBlub
},
IMPORTANT: {
border: 'border-purple-500',
text: 'text-purple-500',
icon: Star
},
WARNING: {
border: 'border-yellow-500',
text: 'text-yellow-500',
icon: ArrowRightCircle
},
CAUTION: {
border: 'border-rose-500',
text: 'text-rose-500',
icon: Bolt
}
};
export function alertComponent(token: Token): AlertData | false {
const regExpStr = `^(?:\\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\\])\\s*?\n*`;
const regExp = new RegExp(regExpStr);
const matches = token.text?.match(regExp);
export function alertComponent(token: Token): AlertData | false {
const regExpStr = `^(?:\\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\\])\\s*?\n*`;
const regExp = new RegExp(regExpStr);
const matches = token.text?.match(regExp);
if (matches && matches.length) {
const alertType = matches[1] as AlertType;
const newText = token.text.replace(regExp, '');
const newTokens = marked.lexer(newText);
return {
type: alertType,
text: newText,
tokens: newTokens
};
}
return false;
}
if (matches && matches.length) {
const alertType = matches[1] as AlertType;
const newText = token.text.replace(regExp, '');
const newTokens = marked.lexer(newText);
return {
type: alertType,
text: newText,
tokens: newTokens
};
}
return false;
}
</script>
<script lang="ts">
import Info from '$lib/components/icons/Info.svelte';
import Star from '$lib/components/icons/Star.svelte';
import LightBlub from '$lib/components/icons/LightBlub.svelte';
import Bolt from '$lib/components/icons/Bolt.svelte';
import ArrowRightCircle from '$lib/components/icons/ArrowRightCircle.svelte';
import MarkdownTokens from './MarkdownTokens.svelte';
import type { ComponentType } from 'svelte';
import Info from '$lib/components/icons/Info.svelte';
import Star from '$lib/components/icons/Star.svelte';
import LightBlub from '$lib/components/icons/LightBlub.svelte';
import Bolt from '$lib/components/icons/Bolt.svelte';
import ArrowRightCircle from '$lib/components/icons/ArrowRightCircle.svelte';
import MarkdownTokens from './MarkdownTokens.svelte';
import type { ComponentType } from 'svelte';
export let token: Token;
export let alert: AlertData;
export let id = '';
export let tokenIdx = 0;
export let onTaskClick: ((event: MouseEvent) => void) | undefined = undefined;
export let onSourceClick: ((event: MouseEvent) => void) | undefined = undefined;
export let token: Token;
export let alert: AlertData;
export let id = '';
export let tokenIdx = 0;
export let onTaskClick: ((event: MouseEvent) => void) | undefined = undefined;
export let onSourceClick: ((event: MouseEvent) => void) | undefined = undefined;
</script>
<!--
@@ -100,17 +100,9 @@ Renders the following Markdown as alerts:
-->
<div class={`border-l-2 pl-2 ${alertStyles[alert.type].border}`}>
<p class={alertStyles[alert.type].text}>
<svelte:component
this={alertStyles[alert.type].icon}
className="inline-block size-4"
/>
<b>{alert.type}</b>
</p>
<MarkdownTokens
id={`${id}-${tokenIdx}`}
tokens={alert.tokens}
{onTaskClick}
{onSourceClick}
/>
<p class={alertStyles[alert.type].text}>
<svelte:component this={alertStyles[alert.type].icon} className="inline-block size-4" />
<b>{alert.type}</b>
</p>
<MarkdownTokens id={`${id}-${tokenIdx}`} tokens={alert.tokens} {onTaskClick} {onSourceClick} />
</div>
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+1 -1
View File
@@ -176,7 +176,7 @@
{:else if token.type === 'blockquote'}
{@const alert = alertComponent(token)}
{#if alert}
<AlertRenderer token={token} alert={alert} />
<AlertRenderer {token} {alert} />
{:else}
<blockquote dir="auto">
<svelte:self id={`${id}-${tokenIdx}`} tokens={token.tokens} {onTaskClick} {onSourceClick} />