added OpenAI support and markdown in the chat window
This commit is contained in:
+49
-3
@@ -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 });
|
||||
|
||||
Reference in New Issue
Block a user