added OpenAI support and markdown in the chat window

This commit is contained in:
2026-02-11 15:58:34 +01:00
parent 4879439f27
commit 650f73a74b
4 changed files with 98 additions and 25 deletions
+49 -3
View File
@@ -45,9 +45,45 @@
border-radius: 8px;
font-size: 0.9rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.msg.user, .msg.error {
white-space: pre-wrap;
}
.msg.assistant .markdown-body {
white-space: normal;
}
.msg.assistant .markdown-body h1, .msg.assistant .markdown-body h2, .msg.assistant .markdown-body h3 {
margin: 0.75em 0 0.35em;
font-size: 1em;
font-weight: 600;
}
.msg.assistant .markdown-body h1:first-child, .msg.assistant .markdown-body h2:first-child, .msg.assistant .markdown-body h3:first-child { margin-top: 0; }
.msg.assistant .markdown-body p { margin: 0.5em 0; }
.msg.assistant .markdown-body p:first-child { margin-top: 0; }
.msg.assistant .markdown-body p:last-child { margin-bottom: 0; }
.msg.assistant .markdown-body pre {
margin: 0.5em 0;
padding: 0.6rem;
background: #18181b;
border-radius: 6px;
overflow-x: auto;
font-size: 0.85em;
}
.msg.assistant .markdown-body code {
background: #18181b;
padding: 0.15em 0.35em;
border-radius: 4px;
font-size: 0.9em;
}
.msg.assistant .markdown-body pre code {
padding: 0;
background: none;
}
.msg.assistant .markdown-body ul, .msg.assistant .markdown-body ol { margin: 0.5em 0; padding-left: 1.4em; }
.msg.assistant .markdown-body li { margin: 0.25em 0; }
.msg.assistant .markdown-body a { color: #60a5fa; text-decoration: none; }
.msg.assistant .markdown-body a:hover { text-decoration: underline; }
.msg.user {
align-self: flex-end;
background: #3f3f46;
@@ -120,11 +156,13 @@
color: #71717a;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
</head>
<body>
<header>
<h1>Local RAG Chat</h1>
<p>Ask questions about your documents. Answers are generated from the vector store + Ollama.</p>
<p>Ask questions about your documents. Answers are generated from the vector store + Ollama / OpenAI.</p>
</header>
<div id="messages"></div>
@@ -143,10 +181,18 @@
const chatHistory = [];
function appendMessage(role, text, isError = false) {
text = text ?? '';
const div = document.createElement('div');
div.className = 'msg ' + (isError ? 'error' : role);
const label = role === 'user' ? 'You' : 'RAG';
div.innerHTML = '<span class="label">' + label + '</span>' + escapeHtml(text);
let body;
if (role === 'assistant' && !isError) {
const rawHtml = marked.parse(text, { gfm: true, breaks: true });
body = '<div class="markdown-body">' + DOMPurify.sanitize(rawHtml) + '</div>';
} else {
body = escapeHtml(text);
}
div.innerHTML = '<span class="label">' + label + '</span>' + body;
messagesEl.appendChild(div);
messagesEl.scrollTop = messagesEl.scrollHeight;
chatHistory.push({ role: role, content: text });