fix: auth bypass, SPA serving, and provider improvements (#97)
* feat(chat): polish syntax highlighting and tool payload rendering (#94) * [verified] feat(chat): polish syntax highlighting and tool payload rendering * [verified] fix(chat): tighten large tool payload rendering * docs: update data volume path in Docker docs Align documentation with docker-compose.yml change: hermes-web-ui-data -> hermes-web-ui, /app/dist/data -> /root/.hermes-web-ui Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: bundle server build and restructure service modules - Add build-server.mjs script for standalone server compilation - Add logger service with structured output - Restructure auth, gateway-manager, hermes-cli, hermes services - Update docker-compose volume mount path - Update tsconfig and entry point for bundled server Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: separate controllers from routes and centralize route registration - Extract business logic from route handlers into controllers/ - Add centralized route registry in routes/index.ts with public/auth/protected layers - Replace global auth whitelist with sequential middleware registration - Extract shared helpers to services/config-helpers.ts - Allow custom provider name to be user-editable in ProviderFormModal - Deduplicate custom providers by poolKey instead of base_url in getAvailable Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: auth bypass via path case, SPA serving, and provider improvements - Fix auth bypass: path case-insensitive check for /api, /v1, /upload - Fix SPA returning 401: skip auth for non-API paths (static files) - Fix profile switch: use local loading state instead of shared store ref - Auto-append /v1 to base_url when fetching models (frontend + backend) - Guard .env writing to built-in providers only - Add builtin field to provider presets, enable base_url input in form - Print auth token to console on startup (pino only writes to file) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Zhicheng Han <43314240+hanzckernel@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ekko
@@ -2,7 +2,7 @@
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import hljs from 'highlight.js'
|
||||
import { handleCodeBlockCopyClick, renderHighlightedCodeBlock } from './highlight'
|
||||
|
||||
const props = defineProps<{ content: string }>()
|
||||
const { t } = useI18n()
|
||||
@@ -12,22 +12,19 @@ const md: MarkdownIt = new MarkdownIt({
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
highlight(str: string, lang: string): string {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return `<pre class="hljs-code-block"><div class="code-header"><span class="code-lang">${lang}</span><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">${t('common.copy')}</button></div><code class="hljs language-${lang}">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`
|
||||
} catch {
|
||||
// fall through
|
||||
}
|
||||
}
|
||||
return `<pre class="hljs-code-block"><div class="code-header"><button class="copy-btn" onclick="navigator.clipboard.writeText(this.closest('.hljs-code-block').querySelector('code').textContent)">${t('common.copy')}</button></div><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>`
|
||||
return renderHighlightedCodeBlock(str, lang, t('common.copy'))
|
||||
},
|
||||
})
|
||||
|
||||
const renderedHtml = computed(() => md.render(props.content))
|
||||
|
||||
function handleMarkdownClick(event: MouseEvent): void {
|
||||
void handleCodeBlockCopyClick(event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="markdown-body" v-html="renderedHtml"></div>
|
||||
<div class="markdown-body" v-html="renderedHtml" @click="handleMarkdownClick"></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -121,88 +118,4 @@ const renderedHtml = computed(() => md.render(props.content))
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs-code-block {
|
||||
margin: 8px 0;
|
||||
border-radius: $radius-sm;
|
||||
overflow: hidden;
|
||||
background: $code-bg;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.code-lang {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
font-size: 11px;
|
||||
color: $text-muted;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
transition: all $transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
font-family: $font-code;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// highlight.js theme override — pure ink B&W
|
||||
.hljs {
|
||||
color: #2a2a2a;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag { color: #1a1a1a; font-weight: 600; }
|
||||
.hljs-string,
|
||||
.hljs-attr { color: #555555; }
|
||||
.hljs-number { color: #333333; }
|
||||
.hljs-comment { color: #999999; font-style: italic; }
|
||||
.hljs-built_in { color: #444444; }
|
||||
.hljs-type { color: #3a3a3a; }
|
||||
.hljs-variable { color: #1a1a1a; }
|
||||
.hljs-title,
|
||||
.hljs-title\.function_ { color: #1a1a1a; }
|
||||
.hljs-params { color: #2a2a2a; }
|
||||
.hljs-meta { color: #999999; }
|
||||
|
||||
// Dark mode highlight.js — inverted pure ink
|
||||
.dark .hljs { color: #d0d0d0; }
|
||||
.dark .hljs-keyword,
|
||||
.dark .hljs-selector-tag { color: #f0f0f0; font-weight: 600; }
|
||||
.dark .hljs-string,
|
||||
.dark .hljs-attr { color: #aaaaaa; }
|
||||
.dark .hljs-number { color: #cccccc; }
|
||||
.dark .hljs-comment { color: #666666; font-style: italic; }
|
||||
.dark .hljs-built_in { color: #bbbbbb; }
|
||||
.dark .hljs-type { color: #c6c6c6; }
|
||||
.dark .hljs-variable { color: #f0f0f0; }
|
||||
.dark .hljs-title,
|
||||
.dark .hljs-title\.function_ { color: #f0f0f0; }
|
||||
.dark .hljs-params { color: #d0d0d0; }
|
||||
.dark .hljs-meta { color: #666666; }
|
||||
</style>
|
||||
|
||||
@@ -3,6 +3,13 @@ import type { Message } from "@/stores/hermes/chat";
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import MarkdownRenderer from "./MarkdownRenderer.vue";
|
||||
import {
|
||||
copyTextToClipboard,
|
||||
handleCodeBlockCopyClick,
|
||||
renderHighlightedCodeBlock,
|
||||
} from "./highlight";
|
||||
|
||||
const TOOL_PAYLOAD_DISPLAY_LIMIT = 2000;
|
||||
|
||||
const props = defineProps<{ message: Message }>();
|
||||
const { t } = useI18n();
|
||||
@@ -25,6 +32,66 @@ function formatSize(bytes: number): string {
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
type ToolPayload = {
|
||||
full: string;
|
||||
display: string;
|
||||
language?: string;
|
||||
};
|
||||
|
||||
function formatToolPayload(raw?: string): ToolPayload {
|
||||
if (!raw) {
|
||||
return { full: "", display: "" };
|
||||
}
|
||||
|
||||
try {
|
||||
const full = JSON.stringify(JSON.parse(raw), null, 2);
|
||||
return {
|
||||
full,
|
||||
display:
|
||||
full.length > TOOL_PAYLOAD_DISPLAY_LIMIT
|
||||
? full.slice(0, TOOL_PAYLOAD_DISPLAY_LIMIT) + "\n" + t("chat.truncated")
|
||||
: full,
|
||||
language: "json",
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
full: raw,
|
||||
display:
|
||||
raw.length > TOOL_PAYLOAD_DISPLAY_LIMIT
|
||||
? raw.slice(0, TOOL_PAYLOAD_DISPLAY_LIMIT) + "\n" + t("chat.truncated")
|
||||
: raw,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function renderToolPayload(content: string, language?: string): string {
|
||||
return renderHighlightedCodeBlock(content, language, t("common.copy"), {
|
||||
maxHighlightLength: TOOL_PAYLOAD_DISPLAY_LIMIT,
|
||||
});
|
||||
}
|
||||
|
||||
async function handleToolDetailClick(event: MouseEvent): Promise<void> {
|
||||
const target = event.target;
|
||||
if (!(target instanceof HTMLElement)) return;
|
||||
|
||||
const button = target.closest<HTMLElement>("[data-copy-code=\"true\"]");
|
||||
if (!button) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const source = button.closest<HTMLElement>("[data-copy-source]")?.dataset.copySource;
|
||||
if (source === "tool-args" && fullToolArgs.value) {
|
||||
await copyTextToClipboard(fullToolArgs.value);
|
||||
return;
|
||||
}
|
||||
if (source === "tool-result" && fullToolResult.value) {
|
||||
await copyTextToClipboard(fullToolResult.value);
|
||||
return;
|
||||
}
|
||||
|
||||
await handleCodeBlockCopyClick(event);
|
||||
}
|
||||
|
||||
const hasAttachments = computed(
|
||||
() => (props.message.attachments?.length ?? 0) > 0,
|
||||
);
|
||||
@@ -33,30 +100,28 @@ const hasToolDetails = computed(
|
||||
() => !!(props.message.toolArgs || props.message.toolResult),
|
||||
);
|
||||
|
||||
const formattedToolArgs = computed(() => {
|
||||
if (!props.message.toolArgs) return "";
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(props.message.toolArgs), null, 2);
|
||||
} catch {
|
||||
return props.message.toolArgs;
|
||||
}
|
||||
const toolArgsPayload = computed(() => formatToolPayload(props.message.toolArgs));
|
||||
const toolResultPayload = computed(() => formatToolPayload(props.message.toolResult));
|
||||
|
||||
const fullToolArgs = computed(() => toolArgsPayload.value.full);
|
||||
const formattedToolArgs = computed(() => toolArgsPayload.value.display);
|
||||
const fullToolResult = computed(() => toolResultPayload.value.full);
|
||||
const formattedToolResult = computed(() => toolResultPayload.value.display);
|
||||
|
||||
const renderedToolArgs = computed(() => {
|
||||
if (!formattedToolArgs.value) return "";
|
||||
return renderToolPayload(
|
||||
formattedToolArgs.value,
|
||||
toolArgsPayload.value.language,
|
||||
);
|
||||
});
|
||||
|
||||
const formattedToolResult = computed(() => {
|
||||
if (!props.message.toolResult) return "";
|
||||
try {
|
||||
const parsed = JSON.parse(props.message.toolResult);
|
||||
const str = JSON.stringify(parsed, null, 2);
|
||||
// Truncate very long output
|
||||
if (str.length > 2000)
|
||||
return str.slice(0, 2000) + "\n" + t("chat.truncated");
|
||||
return str;
|
||||
} catch {
|
||||
const raw = props.message.toolResult;
|
||||
if (raw.length > 2000)
|
||||
return raw.slice(0, 2000) + "\n" + t("chat.truncated");
|
||||
return raw;
|
||||
}
|
||||
const renderedToolResult = computed(() => {
|
||||
if (!formattedToolResult.value) return "";
|
||||
return renderToolPayload(
|
||||
formattedToolResult.value,
|
||||
toolResultPayload.value.language,
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -109,14 +174,14 @@ const formattedToolResult = computed(() => {
|
||||
t("chat.error")
|
||||
}}</span>
|
||||
</div>
|
||||
<div v-if="toolExpanded && hasToolDetails" class="tool-details">
|
||||
<div v-if="formattedToolArgs" class="tool-detail-section">
|
||||
<div v-if="toolExpanded && hasToolDetails" class="tool-details" @click="handleToolDetailClick">
|
||||
<div v-if="formattedToolArgs" class="tool-detail-section" data-copy-source="tool-args">
|
||||
<div class="tool-detail-label">{{ t("chat.arguments") }}</div>
|
||||
<pre class="tool-detail-code">{{ formattedToolArgs }}</pre>
|
||||
<div class="tool-detail-code-block" v-html="renderedToolArgs"></div>
|
||||
</div>
|
||||
<div v-if="formattedToolResult" class="tool-detail-section">
|
||||
<div v-if="formattedToolResult" class="tool-detail-section" data-copy-source="tool-result">
|
||||
<div class="tool-detail-label">{{ t("chat.result") }}</div>
|
||||
<pre class="tool-detail-code">{{ formattedToolResult }}</pre>
|
||||
<div class="tool-detail-code-block" v-html="renderedToolResult"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -400,20 +465,22 @@ const formattedToolResult = computed(() => {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.tool-detail-code {
|
||||
font-family: $font-code;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: $text-secondary;
|
||||
background: $code-bg;
|
||||
border-radius: $radius-sm;
|
||||
padding: 6px 8px;
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
.tool-detail-code-block {
|
||||
:deep(.hljs-code-block) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.code-header) {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
:deep(code.hljs) {
|
||||
font-size: 11px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import hljs from 'highlight.js'
|
||||
|
||||
const LANGUAGE_ALIASES: Record<string, string> = {
|
||||
shellscript: 'bash',
|
||||
sh: 'bash',
|
||||
zsh: 'bash',
|
||||
yml: 'yaml',
|
||||
vue: 'xml',
|
||||
}
|
||||
|
||||
function escapeHtml(value: string): string {
|
||||
return value
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''')
|
||||
}
|
||||
|
||||
function sanitizeLanguageClass(value: string): string {
|
||||
return value.replace(/[^a-z0-9_-]/gi, '-') || 'plain'
|
||||
}
|
||||
|
||||
export function normalizeHighlightLanguage(lang?: string): string {
|
||||
const normalized = lang?.trim().toLowerCase() || ''
|
||||
return LANGUAGE_ALIASES[normalized] || normalized
|
||||
}
|
||||
|
||||
export function inferStructuredLanguage(content: string): string | undefined {
|
||||
try {
|
||||
JSON.parse(content)
|
||||
return 'json'
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
type RenderHighlightedCodeBlockOptions = {
|
||||
maxHighlightLength?: number
|
||||
}
|
||||
|
||||
export function renderHighlightedCodeBlock(
|
||||
content: string,
|
||||
lang: string | undefined,
|
||||
copyLabel: string,
|
||||
options: RenderHighlightedCodeBlockOptions = {},
|
||||
): string {
|
||||
const requestedLanguage = lang?.trim().toLowerCase() || ''
|
||||
const normalizedLanguage = normalizeHighlightLanguage(requestedLanguage)
|
||||
const highlightLimit = options.maxHighlightLength ?? Number.POSITIVE_INFINITY
|
||||
|
||||
let highlighted = ''
|
||||
let codeClassLanguage = normalizedLanguage || requestedLanguage || 'plain'
|
||||
let labelLanguage = requestedLanguage
|
||||
|
||||
try {
|
||||
if (normalizedLanguage && hljs.getLanguage(normalizedLanguage) && content.length <= highlightLimit) {
|
||||
highlighted = hljs.highlight(content, {
|
||||
language: normalizedLanguage,
|
||||
ignoreIllegals: true,
|
||||
}).value
|
||||
codeClassLanguage = normalizedLanguage
|
||||
} else {
|
||||
highlighted = escapeHtml(content)
|
||||
if (!labelLanguage) {
|
||||
labelLanguage = 'text'
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
highlighted = escapeHtml(content)
|
||||
if (!labelLanguage) {
|
||||
labelLanguage = 'text'
|
||||
}
|
||||
}
|
||||
|
||||
const languageLabelHtml = labelLanguage
|
||||
? `<span class="code-lang">${escapeHtml(labelLanguage)}</span>`
|
||||
: ''
|
||||
|
||||
return `<pre class="hljs-code-block"><div class="code-header">${languageLabelHtml}<button type="button" class="copy-btn" data-copy-code="true">${escapeHtml(copyLabel)}</button></div><code class="hljs language-${sanitizeLanguageClass(codeClassLanguage)}">${highlighted}</code></pre>`
|
||||
}
|
||||
|
||||
export async function copyTextToClipboard(text: string): Promise<void> {
|
||||
try {
|
||||
await navigator.clipboard?.writeText?.(text)
|
||||
} catch {
|
||||
// Ignore clipboard failures; the code block still renders safely.
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleCodeBlockCopyClick(event: MouseEvent): Promise<void> {
|
||||
const target = event.target
|
||||
if (!(target instanceof HTMLElement)) return
|
||||
|
||||
const button = target.closest<HTMLElement>('[data-copy-code="true"]')
|
||||
if (!button) return
|
||||
|
||||
event.preventDefault()
|
||||
|
||||
const block = button.closest('.hljs-code-block')
|
||||
const code = block?.querySelector('code')
|
||||
const text = code?.textContent ?? ''
|
||||
if (!text) return
|
||||
|
||||
await copyTextToClipboard(text)
|
||||
}
|
||||
Reference in New Issue
Block a user