Compare commits
13 Commits
267e155ad1
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
9a649a9475 | ||
|
|
11f0f8fbee | ||
|
|
a93f8def81 | ||
|
|
2afa812eea | ||
|
|
a94af25367 | ||
|
|
c551925e86 | ||
|
|
843bf78727 | ||
|
|
5805f1e81c | ||
|
|
19acb7ef15 | ||
|
|
ca941dcc6f | ||
|
|
7e7439d5c2 | ||
|
|
2b6a0c866f | ||
|
|
7b9947da7e |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,3 +1,5 @@
|
||||
.idea/
|
||||
.env
|
||||
.aider*
|
||||
node_modules/
|
||||
dist/
|
||||
18
Dockerfile
18
Dockerfile
@@ -1,7 +1,15 @@
|
||||
FROM node:20-alpine AS builder
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
COPY www/ www/
|
||||
COPY webpack.config.js ./
|
||||
COPY robots.txt ./
|
||||
COPY site.webmanifest ./
|
||||
RUN mkdir -p /usr/share/nginx/html
|
||||
RUN npm run build
|
||||
FROM nginx:alpine
|
||||
COPY index.html /usr/share/nginx/html/
|
||||
COPY style.css /usr/share/nginx/html/
|
||||
COPY chatv2.js /usr/share/nginx/html/
|
||||
COPY 404.html /usr/share/nginx/html/
|
||||
COPY favicon.ico /usr/share/nginx/html/
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
||||
654
chatv2.js
654
chatv2.js
@@ -1,654 +0,0 @@
|
||||
const BACKENDS = {
|
||||
plato: {
|
||||
prod: '/api/plato',
|
||||
dev: 'http://192.168.1.74:8080/v1',
|
||||
name: 'Plato (192.168.1.74)'
|
||||
},
|
||||
stoic: {
|
||||
prod: '/api/stoic',
|
||||
dev: 'http://192.168.1.159:1234/v1',
|
||||
name: 'Stoic (192.168.1.159)'
|
||||
},
|
||||
ollama: {
|
||||
prod: '/api/ollama',
|
||||
dev: 'http://192.168.1.159:8081/v1',
|
||||
name: 'Ollama (192.168.1.159:8081)'
|
||||
}
|
||||
}
|
||||
const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl'
|
||||
const API_KEY = 'not-needed'
|
||||
const MAX_CHAT_HISTORY = 50
|
||||
|
||||
let currentBackendModel = null
|
||||
let availableBackendModels = []
|
||||
let currentStreamController = null
|
||||
let isStreaming = false
|
||||
let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
|
||||
|
||||
// ✅ FIX: Generate unique IDs and validate message structure
|
||||
chatHistory = chatHistory.map((message, index) => ({
|
||||
role: message.role || 'user',
|
||||
content: message.content || '',
|
||||
markdown: message.markdown || false,
|
||||
messageId: message.messageId || `msg-${Date.now()}-${index}`
|
||||
})).filter(msg => msg.content && typeof msg.content === 'string')
|
||||
|
||||
const welcomeMessage = `# Welcome to LM Studio Chat!
|
||||
|
||||
I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**.
|
||||
|
||||
## Features:
|
||||
1. **Full Chat History** - Complete conversation context is now sent to the AI
|
||||
2. **Smart History Management** - Automatically keeps the last ${MAX_CHAT_HISTORY} messages
|
||||
3. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word
|
||||
4. **Markdown Rendering** - Proper formatting for code, lists, tables, and more
|
||||
5. **Readable Dark Text** - No more eye strain from light gray text
|
||||
|
||||
## Try it out:
|
||||
- Ask follow-up questions that reference earlier messages
|
||||
- Have a multi-turn conversation with full context
|
||||
- Ask "what did I just ask?" to test history retention
|
||||
- Watch the streaming response in real-time!
|
||||
|
||||
> *Tip: You can toggle streaming and markdown using the checkboxes below.*`
|
||||
|
||||
// ✅ NEW: Robust parser for backend:model format
|
||||
function splitBackendModel(value) {
|
||||
if (!value || value === ':') {
|
||||
return { backendKey: '', model: '' };
|
||||
}
|
||||
|
||||
const colonIndex = value.indexOf(':');
|
||||
if (colonIndex === -1) {
|
||||
return { backendKey: value, model: '' };
|
||||
}
|
||||
|
||||
return {
|
||||
backendKey: value.substring(0, colonIndex),
|
||||
model: value.substring(colonIndex + 1)
|
||||
};
|
||||
}
|
||||
|
||||
function getApiUrl() {
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel);
|
||||
const effectiveBackendKey = backendKey || 'plato';
|
||||
const backend = BACKENDS[effectiveBackendKey];
|
||||
|
||||
if (!backend) {
|
||||
throw new Error(`Invalid backend: '${effectiveBackendKey}'`);
|
||||
}
|
||||
|
||||
return IS_PRODUCTION ? backend.prod : backend.dev;
|
||||
}
|
||||
|
||||
function updateBackendModelDisplay() {
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel);
|
||||
const backend = BACKENDS[backendKey];
|
||||
if (!backend) return;
|
||||
|
||||
const displayText = IS_PRODUCTION
|
||||
? `${backend.prod} - ${backend.name}`
|
||||
: backend.dev;
|
||||
document.getElementById('backendDisplay').textContent = `${displayText} - Model: ${model || 'None'}`;
|
||||
}
|
||||
|
||||
async function fetchBackendModels() {
|
||||
try {
|
||||
// ✅ FIX: Ensure valid backend before fetching
|
||||
if (!currentBackendModel || currentBackendModel === ':') {
|
||||
currentBackendModel = 'plato';
|
||||
}
|
||||
|
||||
const apiUrl = getApiUrl();
|
||||
console.log(`Fetching models from: ${apiUrl}`);
|
||||
|
||||
const response = await fetch(`${apiUrl}/models`);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
const { backendKey } = splitBackendModel(currentBackendModel);
|
||||
const effectiveBackendKey = backendKey || 'plato';
|
||||
|
||||
availableBackendModels = data.data.map(model => ({
|
||||
backend: effectiveBackendKey,
|
||||
model: model.id
|
||||
}));
|
||||
|
||||
populateBackendModelSelector();
|
||||
|
||||
// ✅ FIX: Only auto-select if no model is set
|
||||
const hasModel = currentBackendModel && currentBackendModel.includes(':') && currentBackendModel.split(':')[1];
|
||||
if (!hasModel && availableBackendModels.length > 0) {
|
||||
currentBackendModel = `${availableBackendModels[0].backend}:${availableBackendModels[0].model}`;
|
||||
document.getElementById('backendModelSelector').value = currentBackendModel;
|
||||
}
|
||||
|
||||
updateBackendModelDisplay();
|
||||
} else {
|
||||
console.error('Failed to fetch models:', response.statusText);
|
||||
document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching models:', error);
|
||||
document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>';
|
||||
}
|
||||
}
|
||||
|
||||
function populateBackendModelSelector() {
|
||||
const selector = document.getElementById('backendModelSelector');
|
||||
if (availableBackendModels.length === 0) {
|
||||
selector.innerHTML = '<option value="">No models available</option>';
|
||||
return;
|
||||
}
|
||||
|
||||
selector.innerHTML = availableBackendModels.map(backendModel =>
|
||||
`<option value="${backendModel.backend}:${backendModel.model}">${BACKENDS[backendModel.backend].name} - ${backendModel.model}</option>`
|
||||
).join('');
|
||||
|
||||
if (currentBackendModel) {
|
||||
selector.value = currentBackendModel;
|
||||
}
|
||||
}
|
||||
|
||||
function getApiMessages() {
|
||||
return chatHistory.slice(-MAX_CHAT_HISTORY).map(({ role, content }) => ({
|
||||
role,
|
||||
content
|
||||
}));
|
||||
}
|
||||
|
||||
function trimChatHistory() {
|
||||
if (chatHistory.length > MAX_CHAT_HISTORY) {
|
||||
chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY);
|
||||
localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const backendModelSelector = document.getElementById('backendModelSelector');
|
||||
|
||||
backendModelSelector.addEventListener('change', (e) => {
|
||||
currentBackendModel = e.target.value;
|
||||
updateBackendModelDisplay();
|
||||
fetchBackendModels();
|
||||
});
|
||||
|
||||
fetchBackendModels();
|
||||
});
|
||||
|
||||
const chatLog = document.getElementById('chatLog');
|
||||
const userInput = document.getElementById('userInput');
|
||||
const sendBtn = document.getElementById('sendBtn');
|
||||
const streamToggle = document.getElementById('streamToggle');
|
||||
const markdownToggle = document.getElementById('markdownToggle');
|
||||
const modelNameSpan = document.getElementById('modelName');
|
||||
|
||||
marked.setOptions({
|
||||
gfm: true,
|
||||
breaks: true,
|
||||
highlight: function(code, lang) {
|
||||
if (window.hljs) {
|
||||
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
|
||||
return hljs.highlight(code, { language }).value;
|
||||
}
|
||||
return code;
|
||||
}
|
||||
});
|
||||
|
||||
function autoResize(textarea) {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px';
|
||||
}
|
||||
|
||||
function addMessage(role, content, markdown = false, messageId = null) {
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `message message-${role}`;
|
||||
if (messageId) {
|
||||
messageDiv.id = messageId;
|
||||
}
|
||||
|
||||
const headerDiv = document.createElement('div');
|
||||
headerDiv.className = `message-header ${role}`;
|
||||
|
||||
const avatar = document.createElement('div');
|
||||
avatar.className = `avatar ${role}-avatar`;
|
||||
avatar.textContent = role === 'user' ? '?' : '?';
|
||||
|
||||
const name = document.createElement('span');
|
||||
name.textContent = role === 'user' ? 'You' : 'Assistant';
|
||||
|
||||
headerDiv.appendChild(avatar);
|
||||
headerDiv.appendChild(name);
|
||||
|
||||
const contentDiv = document.createElement('div');
|
||||
|
||||
if (markdown && role === 'assistant' && markdownToggle.checked) {
|
||||
contentDiv.className = 'markdown-content';
|
||||
const processedContent = parseThinkingTags(content);
|
||||
contentDiv.innerHTML = marked.parse(processedContent);
|
||||
if (window.hljs) {
|
||||
setTimeout(() => {
|
||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
} else {
|
||||
const processedContent = parseThinkingTags(content);
|
||||
contentDiv.innerHTML = processedContent;
|
||||
contentDiv.style.whiteSpace = 'pre-wrap';
|
||||
contentDiv.style.padding = '8px 0';
|
||||
contentDiv.style.color = '#2d3339';
|
||||
}
|
||||
|
||||
messageDiv.appendChild(headerDiv);
|
||||
messageDiv.appendChild(contentDiv);
|
||||
chatLog.appendChild(messageDiv);
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
|
||||
chatHistory.push({ role, content, markdown, messageId });
|
||||
trimChatHistory();
|
||||
localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
|
||||
|
||||
return contentDiv;
|
||||
}
|
||||
|
||||
function parseThinkingTags(content) {
|
||||
let result = content;
|
||||
let thinkingCounter = 0;
|
||||
|
||||
const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi;
|
||||
result = result.replace(completeThinkRegex, (match, thinkContent) => {
|
||||
thinkingCounter++;
|
||||
const id = `thinking-${Date.now()}-${thinkingCounter}`;
|
||||
return `<div class="thinking-block">
|
||||
<div class="thinking-header" onclick="toggleThinking('${id}')">
|
||||
<span class="thinking-toggle" id="${id}-toggle">?</span>
|
||||
<span>? Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi;
|
||||
result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
|
||||
thinkingCounter++;
|
||||
const id = `thinking-${Date.now()}-${thinkingCounter}`;
|
||||
return `<div class="thinking-block">
|
||||
<div class="thinking-header" onclick="toggleThinking('${id}')">
|
||||
<span class="thinking-toggle" id="${id}-toggle">?</span>
|
||||
<span>? Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
window.toggleThinking = function(id) {
|
||||
const content = document.getElementById(id);
|
||||
const toggle = document.getElementById(id + '-toggle');
|
||||
|
||||
if (content && toggle) {
|
||||
content.classList.toggle('hidden');
|
||||
toggle.classList.toggle('collapsed');
|
||||
}
|
||||
};
|
||||
|
||||
function updateMessageContent(contentDiv, newContent, markdown = false, role) {
|
||||
const processedContent = parseThinkingTags(newContent);
|
||||
|
||||
if (markdown && role === 'assistant' && markdownToggle.checked) {
|
||||
contentDiv.innerHTML = marked.parse(processedContent);
|
||||
if (window.hljs) {
|
||||
setTimeout(() => {
|
||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
} else {
|
||||
contentDiv.innerHTML = processedContent;
|
||||
}
|
||||
}
|
||||
|
||||
function showTypingIndicator() {
|
||||
const typingDiv = document.createElement('div');
|
||||
typingDiv.id = 'typingIndicator';
|
||||
typingDiv.className = 'message message-assistant';
|
||||
|
||||
const headerDiv = document.createElement('div');
|
||||
headerDiv.className = 'message-header assistant';
|
||||
|
||||
const avatar = document.createElement('div');
|
||||
avatar.className = 'avatar assistant-avatar';
|
||||
avatar.textContent = '?';
|
||||
|
||||
const name = document.createElement('span');
|
||||
name.textContent = 'Assistant';
|
||||
|
||||
headerDiv.appendChild(avatar); // ✅ FIX: Typo "abatar"
|
||||
headerDiv.appendChild(name);
|
||||
|
||||
const dotsDiv = document.createElement('div');
|
||||
dotsDiv.className = 'typing-indicator';
|
||||
dotsDiv.innerHTML = `
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
<span style="margin-left: 8px;">Thinking...</span>
|
||||
`;
|
||||
|
||||
typingDiv.appendChild(headerDiv);
|
||||
typingDiv.appendChild(dotsDiv);
|
||||
chatLog.appendChild(typingDiv);
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
|
||||
return typingDiv;
|
||||
}
|
||||
|
||||
function removeTypingIndicator(typingDiv) {
|
||||
if (typingDiv && typingDiv.parentNode) {
|
||||
typingDiv.parentNode.removeChild(typingDiv);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStreamingResponse(userMessage) {
|
||||
const messageId = 'msg-' + Date.now();
|
||||
let accumulatedContent = '';
|
||||
let contentDiv = null;
|
||||
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = 'message message-assistant';
|
||||
messageDiv.id = messageId;
|
||||
|
||||
const headerDiv = document.createElement('div');
|
||||
headerDiv.className = 'message-header assistant';
|
||||
|
||||
const avatar = document.createElement('div');
|
||||
avatar.className = 'avatar assistant-avatar';
|
||||
avatar.textContent = '?';
|
||||
|
||||
const name = document.createElement('span');
|
||||
name.textContent = 'Assistant';
|
||||
|
||||
headerDiv.appendChild(avatar);
|
||||
headerDiv.appendChild(name);
|
||||
|
||||
contentDiv = document.createElement('div');
|
||||
contentDiv.className = 'markdown-content';
|
||||
|
||||
messageDiv.appendChild(headerDiv);
|
||||
messageDiv.appendChild(contentDiv);
|
||||
chatLog.appendChild(messageDiv);
|
||||
|
||||
const cursorSpan = document.createElement('span');
|
||||
cursorSpan.className = 'streaming-cursor';
|
||||
contentDiv.appendChild(cursorSpan);
|
||||
|
||||
// ✅ FIX: Create AbortController BEFORE fetch
|
||||
currentStreamController = new AbortController();
|
||||
isStreaming = true;
|
||||
|
||||
try {
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel);
|
||||
const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
|
||||
|
||||
const requestBody = {
|
||||
model: selectedModel,
|
||||
messages: getApiMessages(),
|
||||
stream: true,
|
||||
temperature: 0.7,
|
||||
max_tokens: 2000
|
||||
};
|
||||
|
||||
const response = await fetch(`${getApiUrl()}/chat/completions`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${API_KEY}`
|
||||
},
|
||||
body: JSON.stringify(requestBody),
|
||||
signal: currentStreamController.signal // ✅ Now works correctly
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
let updateScheduled = false;
|
||||
let lastUpdate = Date.now();
|
||||
const MIN_UPDATE_INTERVAL = 100;
|
||||
|
||||
function scheduleUpdate() {
|
||||
if (updateScheduled) return;
|
||||
|
||||
const now = Date.now();
|
||||
const timeSinceLastUpdate = now - lastUpdate;
|
||||
|
||||
if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
|
||||
updateScheduled = true;
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan);
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
lastUpdate = Date.now();
|
||||
updateScheduled = false;
|
||||
});
|
||||
} else {
|
||||
updateScheduled = true;
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan);
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
lastUpdate = Date.now();
|
||||
updateScheduled = false;
|
||||
});
|
||||
}, MIN_UPDATE_INTERVAL - timeSinceLastUpdate);
|
||||
}
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
const chunk = decoder.decode(value);
|
||||
const lines = chunk.split('\n').filter(line => line.trim() !== '');
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
const data = line.slice(6);
|
||||
|
||||
if (data === '[DONE]') {
|
||||
isStreaming = false;
|
||||
currentStreamController = null;
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
|
||||
if (cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan);
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(data);
|
||||
if (parsed.choices && parsed.choices[0].delta.content) {
|
||||
accumulatedContent += parsed.choices[0].delta.content;
|
||||
scheduleUpdate();
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Error parsing stream data:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Streaming error:', error);
|
||||
if (error.name !== 'AbortError') {
|
||||
updateMessageContent(contentDiv, `Error: ${error.message}`, false, 'assistant');
|
||||
}
|
||||
} finally {
|
||||
isStreaming = false;
|
||||
currentStreamController = null;
|
||||
sendBtn.disabled = false;
|
||||
|
||||
if (cursorSpan && cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNonStreamingResponse(userMessage) {
|
||||
let typingIndicator = null;
|
||||
try {
|
||||
typingIndicator = showTypingIndicator();
|
||||
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel);
|
||||
const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
|
||||
|
||||
const requestBody = {
|
||||
model: selectedModel,
|
||||
messages: getApiMessages(),
|
||||
stream: false,
|
||||
temperature: 0.7,
|
||||
max_tokens: 2000
|
||||
};
|
||||
|
||||
const response = await fetch(`${getApiUrl()}/chat/completions`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${API_KEY}`
|
||||
},
|
||||
body: JSON.stringify(requestBody)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
removeTypingIndicator(typingIndicator);
|
||||
|
||||
if (data.choices && data.choices.length > 0) {
|
||||
const assistantReply = data.choices[0].message.content;
|
||||
addMessage('assistant', assistantReply, markdownToggle.checked);
|
||||
} else {
|
||||
addMessage('assistant', 'No response generated.', false);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
if (typingIndicator) {
|
||||
removeTypingIndicator(typingIndicator);
|
||||
}
|
||||
addMessage('assistant', `Error: ${error.message}`, false);
|
||||
} finally {
|
||||
sendBtn.disabled = false;
|
||||
userInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function stopStream() {
|
||||
if (currentStreamController) {
|
||||
currentStreamController.abort();
|
||||
isStreaming = false;
|
||||
currentStreamController = null;
|
||||
sendBtn.disabled = false;
|
||||
sendBtn.textContent = 'Send';
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const userMessage = userInput.value.trim();
|
||||
if (!userMessage || isStreaming) return;
|
||||
|
||||
// ✅ FIX: Validate backend selection
|
||||
if (!currentBackendModel) {
|
||||
addMessage('assistant', 'Please select a backend model first.', false);
|
||||
return;
|
||||
}
|
||||
|
||||
addMessage('user', userMessage, false);
|
||||
|
||||
userInput.value = '';
|
||||
userInput.style.height = 'auto';
|
||||
sendBtn.disabled = true;
|
||||
|
||||
if (streamToggle.checked) {
|
||||
sendBtn.textContent = 'Stop';
|
||||
await handleStreamingResponse(userMessage);
|
||||
} else {
|
||||
await handleNonStreamingResponse(userMessage);
|
||||
}
|
||||
|
||||
sendBtn.textContent = 'Send';
|
||||
}
|
||||
|
||||
sendBtn.addEventListener('click', () => {
|
||||
if (isStreaming) {
|
||||
stopStream();
|
||||
} else {
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
userInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
if (!isStreaming) {
|
||||
sendMessage();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ Updated window.onload with better initialization
|
||||
window.onload = () => {
|
||||
userInput.focus();
|
||||
|
||||
// Set default backend BEFORE fetching
|
||||
if (!currentBackendModel) {
|
||||
currentBackendModel = 'plato';
|
||||
}
|
||||
|
||||
fetchBackendModels().then(() => {
|
||||
// Load chat history after models are fetched
|
||||
if (chatLog) {
|
||||
if (chatHistory.length === 0) {
|
||||
//addMessage('assistant', welcomeMessage, true);
|
||||
} else {
|
||||
chatHistory.forEach(msg => {
|
||||
if (typeof msg.content === 'string' && msg.content.trim()) {
|
||||
addMessage(msg.role, msg.content, msg.markdown, msg.messageId);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('resetBtn')?.addEventListener('click', resetChat);
|
||||
};
|
||||
|
||||
function resetChat() {
|
||||
chatHistory = [];
|
||||
localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
|
||||
|
||||
if (chatLog) {
|
||||
chatLog.innerHTML = '';
|
||||
addMessage('assistant', welcomeMessage, true);
|
||||
}
|
||||
}
|
||||
34
nginx.conf
34
nginx.conf
@@ -1,9 +1,14 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Disable caching for all responses during debugging
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate" always;
|
||||
add_header Pragma "no-cache" always;
|
||||
add_header Expires "0" always;
|
||||
|
||||
# Favicon
|
||||
location = /favicon.ico {
|
||||
try_files /favicon.ico =204;
|
||||
@@ -11,14 +16,14 @@ server {
|
||||
log_not_found off;
|
||||
}
|
||||
|
||||
location = style.css {
|
||||
try_files /style.css =204;
|
||||
# Serve shared JS and CSS directories at root
|
||||
location /js/ {
|
||||
try_files $uri =404;
|
||||
}
|
||||
|
||||
location = chatv2.js {
|
||||
try_files /chatv2.js =204;
|
||||
location /css/ {
|
||||
try_files $uri =404;
|
||||
}
|
||||
|
||||
# Custom 404 page
|
||||
error_page 404 /404.html;
|
||||
location = /404.html {
|
||||
@@ -39,7 +44,7 @@ server {
|
||||
|
||||
# Proxy API requests to plato.lan (192.168.1.74)
|
||||
location /api/plato/ {
|
||||
proxy_pass http://192.168.1.74:1234/v1/;
|
||||
proxy_pass http://192.168.1.74:8080/v1/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
@@ -48,7 +53,7 @@ server {
|
||||
|
||||
# Proxy API requests to stoic.lan (192.168.1.159)
|
||||
location /api/stoic/ {
|
||||
proxy_pass http://192.168.1.159:1234/v1/;
|
||||
proxy_pass http://192.168.1.159:8081/v1/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
@@ -66,15 +71,26 @@ server {
|
||||
|
||||
# Default /api/ points to plato for backwards compatibility
|
||||
location /api/ {
|
||||
proxy_pass http://192.168.1.74:1234/v1/;
|
||||
proxy_pass http://192.168.1.74:8080/v1/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
# Cache static assets with content hash - minimal caching
|
||||
location ~* \.(js|css)$ {
|
||||
expires 1s; # 1 second for rapid iteration
|
||||
add_header Cache-Control "public, max-age=1, must-revalidate" always;
|
||||
}
|
||||
# Cache images and icons - short caching
|
||||
location ~* \.(ico|png|svg|jpg|jpeg|gif|webp)$ {
|
||||
expires 5s; # 5 seconds, adjust as needed
|
||||
add_header Cache-Control "public, max-age=5, must-revalidate" always;
|
||||
}
|
||||
|
||||
# Gzip compression for better performance
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
||||
}
|
||||
|
||||
5141
package-lock.json
generated
Normal file
5141
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "jarvis-lan",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"keywords": [
|
||||
""
|
||||
],
|
||||
"license": "",
|
||||
"author": "",
|
||||
"scripts": {
|
||||
"build": "webpack --mode production",
|
||||
"build:dev": "webpack --mode development",
|
||||
"watch": "webpack --mode development --watch",
|
||||
"dev": "webpack serve --mode development",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"copy-webpack-plugin": "^13.0.1",
|
||||
"css-loader": "^7.1.2",
|
||||
"html-webpack-plugin": "^5.6.5",
|
||||
"mini-css-extract-plugin": "^2.9.4",
|
||||
"webpack": "^5.104.0",
|
||||
"webpack-cli": "^6.0.1",
|
||||
"webpack-dev-server": "^5.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"jsdom": "^27.3.0"
|
||||
}
|
||||
}
|
||||
5
robots.txt
Normal file
5
robots.txt
Normal file
@@ -0,0 +1,5 @@
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
12
site.webmanifest
Normal file
12
site.webmanifest
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"short_name": "",
|
||||
"name": "",
|
||||
"icons": [{
|
||||
"src": "icon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
}],
|
||||
"start_url": "/?utm_source=homescreen",
|
||||
"background_color": "#fafafa",
|
||||
"theme_color": "#fafafa"
|
||||
}
|
||||
91
webpack.config.js
Normal file
91
webpack.config.js
Normal file
@@ -0,0 +1,91 @@
|
||||
import path from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin'
|
||||
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
|
||||
import CopyWebpackPlugin from 'copy-webpack-plugin'
|
||||
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = path.dirname(__filename)
|
||||
|
||||
export default (env, argv) => {
|
||||
const isProduction = argv.mode === 'production'
|
||||
|
||||
return {
|
||||
mode: isProduction ? 'production' : 'development',
|
||||
|
||||
entry: {
|
||||
www: ['./www/chatv3.js', './www/style2.css']
|
||||
},
|
||||
|
||||
output: {
|
||||
path : path.resolve(__dirname, 'dist'),
|
||||
filename : isProduction ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
|
||||
publicPath: isProduction ? '../' : '/'
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use : [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
|
||||
new MiniCssExtractPlugin({
|
||||
filename: isProduction ? 'css/[name].[contenthash:8].css' : 'css/[name].css'
|
||||
}),
|
||||
|
||||
new HtmlWebpackPlugin({
|
||||
template: './www/index.html',
|
||||
filename: 'index.html',
|
||||
chunks : ['www'],
|
||||
inject : 'body',
|
||||
minify : isProduction
|
||||
}),
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{ from: 'www/404.html', to: '404.html' },
|
||||
{ from: 'www/favicon.ico', to: 'favicon.ico' },
|
||||
{ from: 'www/icon.svg', to: 'icon.svg' },
|
||||
{ from: 'robots.txt', to: 'robots.txt', noErrorOnMissing: true },
|
||||
{ from: 'site.webmanifest', to: 'site.webmanifest', noErrorOnMissing: true }
|
||||
]
|
||||
})
|
||||
],
|
||||
|
||||
optimization: {
|
||||
moduleIds : 'deterministic',
|
||||
runtimeChunk: 'single',
|
||||
splitChunks : {
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test : /[\\/]node_modules[\\/]/,
|
||||
name : 'vendors',
|
||||
chunks: 'all'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
devtool: isProduction ? 'source-map' : 'eval-source-map',
|
||||
|
||||
devServer: {
|
||||
host : '0.0.0.0',
|
||||
port : 8082,
|
||||
allowedHosts : 'all',
|
||||
hot : true,
|
||||
devMiddleware: { publicPath: '/' },
|
||||
static : [
|
||||
{ directory: path.resolve(__dirname, 'dist') }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
692
www/chatv3.js
Normal file
692
www/chatv3.js
Normal file
@@ -0,0 +1,692 @@
|
||||
import './style2.css'
|
||||
|
||||
const BACKENDS = {
|
||||
plato : {
|
||||
prod: '/api/plato',
|
||||
dev : 'http://192.168.1.74:8080/v1',
|
||||
name: 'Plato (192.168.1.74)'
|
||||
},
|
||||
stoic : {
|
||||
prod: '/api/stoic',
|
||||
dev : 'http://192.168.1.159:1234/v1',
|
||||
name: 'Stoic (192.168.1.159)'
|
||||
},
|
||||
ollama: {
|
||||
prod: '/api/ollama',
|
||||
dev : 'http://192.168.1.159:8081/v1',
|
||||
name: 'Ollama (192.168.1.159:8081)'
|
||||
}
|
||||
}
|
||||
const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl'
|
||||
const API_KEY = 'not-needed'
|
||||
const MAX_CHAT_HISTORY = 50
|
||||
|
||||
let currentBackendModel = null
|
||||
let availableBackendModels = []
|
||||
let currentStreamController = null
|
||||
let isStreaming = false
|
||||
let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
|
||||
|
||||
// ✅ FIX: Generate unique IDs and validate message structure
|
||||
chatHistory = chatHistory.map((message, index) => ({
|
||||
role : message.role || 'user',
|
||||
content : message.content || '',
|
||||
markdown : message.markdown || false,
|
||||
messageId: message.messageId || `msg-${ Date.now() }-${ index }`
|
||||
})).filter(msg => msg.content && typeof msg.content === 'string')
|
||||
|
||||
const welcomeMessage = `# Welcome to LM Studio Chat!
|
||||
|
||||
I now support **full conversation history**, **real-time streaming responses** and **dark, readable text formatting**.
|
||||
|
||||
## Features:
|
||||
1. **Full Chat History** - Complete conversation context is now sent to the AI
|
||||
2. **Smart History Management** - Automatically keeps the last ${ MAX_CHAT_HISTORY } messages
|
||||
3. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word
|
||||
4. **Markdown Rendering** - Proper formatting for code, lists, tables, and more
|
||||
5. **Readable Dark Text** - No more eye strain from light gray text
|
||||
|
||||
## Try it out:
|
||||
- Ask follow-up questions that reference earlier messages
|
||||
- Have a multi-turn conversation with full context
|
||||
- Ask "what did I just ask?" to test history retention
|
||||
- Watch the streaming response in real-time!
|
||||
|
||||
> *Tip: You can toggle streaming and markdown using the checkboxes below.*`
|
||||
|
||||
// ✅ NEW: Robust parser for backend:model format
|
||||
function splitBackendModel(value) {
|
||||
if (!value || value === ':') {
|
||||
return { backendKey: '', model: '' }
|
||||
}
|
||||
|
||||
const colonIndex = value.indexOf(':')
|
||||
if (colonIndex === -1) {
|
||||
return { backendKey: value, model: '' }
|
||||
}
|
||||
|
||||
return {
|
||||
backendKey: value.substring(0, colonIndex),
|
||||
model : value.substring(colonIndex + 1)
|
||||
}
|
||||
}
|
||||
|
||||
function getApiUrl() {
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel)
|
||||
const effectiveBackendKey = backendKey || 'plato'
|
||||
const backend = BACKENDS[effectiveBackendKey]
|
||||
|
||||
if (!backend) {
|
||||
throw new Error(`Invalid backend: '${ effectiveBackendKey }'`)
|
||||
}
|
||||
|
||||
return IS_PRODUCTION ? backend.prod : backend.dev
|
||||
}
|
||||
|
||||
function updateBackendModelDisplay() {
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel)
|
||||
const backend = BACKENDS[backendKey]
|
||||
if (!backend) return
|
||||
|
||||
const displayText = IS_PRODUCTION
|
||||
? `${ backend.prod } - ${ backend.name }`
|
||||
: backend.dev
|
||||
const displayElement = document.getElementById('backendDisplay')
|
||||
if (displayElement) {
|
||||
displayElement.textContent = `${ displayText } - Model: ${ model || 'None' }`
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchBackendModels() {
|
||||
const selector = document.getElementById('backendModelSelector')
|
||||
let allModels = []
|
||||
|
||||
for (const [backendKey, backendConfig] of Object.entries(BACKENDS)) {
|
||||
try {
|
||||
const apiUrl = IS_PRODUCTION ? backendConfig.prod : backendConfig.dev
|
||||
console.log(`Fetching models from ${ backendKey }: ${ apiUrl }`)
|
||||
|
||||
const response = await fetch(`${ apiUrl }/models`, {
|
||||
signal: AbortSignal.timeout(5000) // 5 second timeout
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
if (data.data && Array.isArray(data.data)) {
|
||||
const models = data.data.map(model => ({
|
||||
backend: backendKey,
|
||||
model : model.id
|
||||
}))
|
||||
allModels = [...allModels, ...models]
|
||||
}
|
||||
} else {
|
||||
console.error(`Failed to fetch models from ${ backendKey }: ${ response.status } ${ response.statusText }`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error fetching models from ${ backendKey }:`, error)
|
||||
}
|
||||
}
|
||||
|
||||
availableBackendModels = allModels
|
||||
|
||||
if (selector) {
|
||||
if (availableBackendModels.length === 0) {
|
||||
selector.innerHTML = '<option value="">No models available (check backends)</option>'
|
||||
} else {
|
||||
populateBackendModelSelector()
|
||||
|
||||
// Auto-select if no valid model is set
|
||||
const hasModel = currentBackendModel && currentBackendModel.includes(':') && currentBackendModel.split(':')[1]
|
||||
if (!hasModel && availableBackendModels.length > 0) {
|
||||
currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }`
|
||||
selector.value = currentBackendModel
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateBackendModelDisplay()
|
||||
}
|
||||
|
||||
function populateBackendModelSelector() {
|
||||
const selector = document.getElementById('backendModelSelector')
|
||||
if (!selector) return
|
||||
|
||||
if (availableBackendModels.length === 0) {
|
||||
selector.innerHTML = '<option value="">No models available</option>'
|
||||
return
|
||||
}
|
||||
|
||||
selector.innerHTML = availableBackendModels.map(backendModel =>
|
||||
`<option value="${ backendModel.backend }:${ backendModel.model }">${ BACKENDS[backendModel.backend].name } - ${ backendModel.model }</option>`
|
||||
).join('')
|
||||
|
||||
if (currentBackendModel && selector.querySelector(`option[value="${ currentBackendModel }"]`)) {
|
||||
selector.value = currentBackendModel
|
||||
} else if (availableBackendModels.length > 0) {
|
||||
// If current selection is invalid, reset to first available
|
||||
currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }`
|
||||
selector.value = currentBackendModel
|
||||
}
|
||||
}
|
||||
|
||||
function getApiMessages() {
|
||||
return chatHistory.slice(-MAX_CHAT_HISTORY).map(({ role, content }) => ({
|
||||
role,
|
||||
content
|
||||
}))
|
||||
}
|
||||
|
||||
function trimChatHistory() {
|
||||
if (chatHistory.length > MAX_CHAT_HISTORY) {
|
||||
chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY)
|
||||
localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const backendModelSelector = document.getElementById('backendModelSelector')
|
||||
|
||||
if (backendModelSelector) {
|
||||
backendModelSelector.addEventListener('change', (e) => {
|
||||
currentBackendModel = e.target.value
|
||||
updateBackendModelDisplay()
|
||||
fetchBackendModels()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const chatLog = document.getElementById('chatLog')
|
||||
const userInput = document.getElementById('userInput')
|
||||
const sendBtn = document.getElementById('sendBtn')
|
||||
const streamToggle = document.getElementById('streamToggle')
|
||||
const markdownToggle = document.getElementById('markdownToggle')
|
||||
const modelNameSpan = document.getElementById('modelName')
|
||||
|
||||
marked.setOptions({
|
||||
gfm : true,
|
||||
breaks : true,
|
||||
highlight: function(code, lang) {
|
||||
if (window.hljs) {
|
||||
const language = hljs.getLanguage(lang) ? lang : 'plaintext'
|
||||
return hljs.highlight(code, { language }).value
|
||||
}
|
||||
return code
|
||||
}
|
||||
})
|
||||
|
||||
window.autoResize = function autoResize(textarea) {
|
||||
textarea.style.height = 'auto'
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px'
|
||||
}
|
||||
|
||||
function addMessage(role, content, markdown = false, messageId = null, saveToHistory = true) {
|
||||
const messageDiv = document.createElement('div')
|
||||
messageDiv.className = `message message-${ role }`
|
||||
if (messageId) {
|
||||
messageDiv.id = messageId
|
||||
}
|
||||
|
||||
const headerDiv = document.createElement('div')
|
||||
headerDiv.className = `message-header ${ role }`
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = `avatar ${ role }-avatar`
|
||||
avatar.textContent = role === 'user' ? '👤' : '🤖'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = role === 'user' ? 'You' : 'Assistant'
|
||||
|
||||
headerDiv.appendChild(avatar)
|
||||
headerDiv.appendChild(name)
|
||||
|
||||
const contentDiv = document.createElement('div')
|
||||
|
||||
if (markdown && role === 'assistant' && markdownToggle.checked) {
|
||||
contentDiv.className = 'markdown-content'
|
||||
const processedContent = parseThinkingTags(content)
|
||||
contentDiv.innerHTML = marked.parse(processedContent)
|
||||
if (window.hljs) {
|
||||
setTimeout(() => {
|
||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
} else {
|
||||
const processedContent = parseThinkingTags(content)
|
||||
contentDiv.innerHTML = processedContent
|
||||
contentDiv.style.whiteSpace = 'pre-wrap'
|
||||
contentDiv.style.padding = '8px 0'
|
||||
contentDiv.style.color = '#e0e0e0'
|
||||
}
|
||||
|
||||
messageDiv.appendChild(headerDiv)
|
||||
messageDiv.appendChild(contentDiv)
|
||||
if (chatLog) {
|
||||
chatLog.appendChild(messageDiv)
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
}
|
||||
|
||||
if (saveToHistory) {
|
||||
chatHistory.push({ role, content, markdown, messageId })
|
||||
trimChatHistory()
|
||||
localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
|
||||
}
|
||||
|
||||
return contentDiv
|
||||
}
|
||||
|
||||
function parseThinkingTags(content) {
|
||||
let result = content
|
||||
let thinkingCounter = 0
|
||||
|
||||
const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi
|
||||
result = result.replace(completeThinkRegex, (match, thinkContent) => {
|
||||
thinkingCounter++
|
||||
const id = `thinking-${ Date.now() }-${ thinkingCounter }`
|
||||
return `<div class="thinking-block">
|
||||
<div class="thinking-header" onclick="toggleThinking('${ id }')">
|
||||
<span class="thinking-toggle" id="${ id }-toggle">?</span>
|
||||
<span>? Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div>
|
||||
</div>`
|
||||
})
|
||||
|
||||
const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi
|
||||
result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
|
||||
thinkingCounter++
|
||||
const id = `thinking-${ Date.now() }-${ thinkingCounter }`
|
||||
return `<div class="thinking-block">
|
||||
<div class="thinking-header" onclick="toggleThinking('${ id }')">
|
||||
<span class="thinking-toggle" id="${ id }-toggle">?</span>
|
||||
<span>? Thinking...</span>
|
||||
</div>
|
||||
<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div>
|
||||
</div>`
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
window.toggleThinking = function(id) {
|
||||
const content = document.getElementById(id)
|
||||
const toggle = document.getElementById(id + '-toggle')
|
||||
|
||||
if (content && toggle) {
|
||||
content.classList.toggle('hidden')
|
||||
toggle.classList.toggle('collapsed')
|
||||
}
|
||||
}
|
||||
|
||||
function updateMessageContent(contentDiv, newContent, markdown = false, role) {
|
||||
const processedContent = parseThinkingTags(newContent)
|
||||
|
||||
if (markdown && role === 'assistant' && markdownToggle && markdownToggle.checked) {
|
||||
contentDiv.innerHTML = marked.parse(processedContent)
|
||||
if (window.hljs) {
|
||||
setTimeout(() => {
|
||||
contentDiv.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block)
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
} else {
|
||||
contentDiv.innerHTML = processedContent
|
||||
contentDiv.style.whiteSpace = 'pre-wrap'
|
||||
contentDiv.style.padding = '8px 0'
|
||||
contentDiv.style.color = '#e0e0e0'
|
||||
}
|
||||
if (chatLog) {
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
function showTypingIndicator() {
|
||||
const typingDiv = document.createElement('div')
|
||||
typingDiv.id = 'typingIndicator'
|
||||
typingDiv.className = 'message message-assistant'
|
||||
|
||||
const headerDiv = document.createElement('div')
|
||||
headerDiv.className = 'message-header assistant'
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = 'avatar assistant-avatar'
|
||||
avatar.textContent = '🤖'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = 'Assistant'
|
||||
|
||||
headerDiv.appendChild(avatar)
|
||||
headerDiv.appendChild(name)
|
||||
|
||||
const dotsDiv = document.createElement('div')
|
||||
dotsDiv.className = 'typing-indicator'
|
||||
dotsDiv.innerHTML = `
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
<div class="typing-dot"></div>
|
||||
<span style="margin-left: 8px;">Thinking...</span>
|
||||
`
|
||||
|
||||
typingDiv.appendChild(headerDiv)
|
||||
typingDiv.appendChild(dotsDiv)
|
||||
if (chatLog) {
|
||||
chatLog.appendChild(typingDiv)
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
}
|
||||
|
||||
return typingDiv
|
||||
}
|
||||
|
||||
function removeTypingIndicator(typingDiv) {
|
||||
if (typingDiv && typingDiv.parentNode) {
|
||||
typingDiv.parentNode.removeChild(typingDiv)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStreamingResponse(userMessage) {
|
||||
const messageId = 'msg-' + Date.now()
|
||||
let accumulatedContent = ''
|
||||
let contentDiv = null
|
||||
|
||||
const messageDiv = document.createElement('div')
|
||||
messageDiv.className = 'message message-assistant'
|
||||
messageDiv.id = messageId
|
||||
|
||||
const headerDiv = document.createElement('div')
|
||||
headerDiv.className = 'message-header assistant'
|
||||
|
||||
const avatar = document.createElement('div')
|
||||
avatar.className = 'avatar assistant-avatar'
|
||||
avatar.textContent = '🤖'
|
||||
|
||||
const name = document.createElement('span')
|
||||
name.textContent = 'Assistant'
|
||||
|
||||
headerDiv.appendChild(avatar)
|
||||
headerDiv.appendChild(name)
|
||||
|
||||
contentDiv = document.createElement('div')
|
||||
contentDiv.className = 'markdown-content'
|
||||
|
||||
messageDiv.appendChild(headerDiv)
|
||||
messageDiv.appendChild(contentDiv)
|
||||
if (chatLog) {
|
||||
chatLog.appendChild(messageDiv)
|
||||
}
|
||||
|
||||
const cursorSpan = document.createElement('span')
|
||||
cursorSpan.className = 'streaming-cursor'
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
|
||||
// ✅ FIX: Create AbortController BEFORE fetch
|
||||
currentStreamController = new AbortController()
|
||||
isStreaming = true
|
||||
|
||||
try {
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel)
|
||||
const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
|
||||
|
||||
const requestBody = {
|
||||
model : selectedModel,
|
||||
messages : getApiMessages(),
|
||||
stream : true,
|
||||
temperature : 0.7,
|
||||
repeat_penalty: 1.1,
|
||||
max_tokens : 2000
|
||||
}
|
||||
|
||||
const response = await fetch(`${ getApiUrl() }/chat/completions`, {
|
||||
method : 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
'Authorization': `Bearer ${ API_KEY }`
|
||||
},
|
||||
body : JSON.stringify(requestBody),
|
||||
signal : currentStreamController.signal // ✅ Now works correctly
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
|
||||
}
|
||||
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
|
||||
let updateScheduled = false
|
||||
let lastUpdate = Date.now()
|
||||
const MIN_UPDATE_INTERVAL = 100
|
||||
|
||||
function scheduleUpdate() {
|
||||
if (updateScheduled) return
|
||||
|
||||
const now = Date.now()
|
||||
const timeSinceLastUpdate = now - lastUpdate
|
||||
|
||||
if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
|
||||
updateScheduled = true
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
}
|
||||
if (chatLog) {
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
}
|
||||
lastUpdate = Date.now()
|
||||
updateScheduled = false
|
||||
})
|
||||
} else {
|
||||
updateScheduled = true
|
||||
setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle && markdownToggle.checked, 'assistant')
|
||||
if (cursorSpan.parentNode) {
|
||||
contentDiv.appendChild(cursorSpan)
|
||||
}
|
||||
if (chatLog) {
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
}
|
||||
lastUpdate = Date.now()
|
||||
updateScheduled = false
|
||||
})
|
||||
}, MIN_UPDATE_INTERVAL - timeSinceLastUpdate)
|
||||
}
|
||||
}
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
const chunk = decoder.decode(value)
|
||||
const lines = chunk.split('\n').filter(line => line.trim() !== '')
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
const data = line.slice(6)
|
||||
|
||||
if (data === '[DONE]') {
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
|
||||
if (cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan)
|
||||
}
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(data)
|
||||
if (parsed.choices && parsed.choices[0].delta.content) {
|
||||
accumulatedContent += parsed.choices[0].delta.content
|
||||
scheduleUpdate()
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Error parsing stream data:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant')
|
||||
chatLog.scrollTop = chatLog.scrollHeight
|
||||
|
||||
} catch (error) {
|
||||
console.error('Streaming error:', error)
|
||||
if (error.name !== 'AbortError') {
|
||||
updateMessageContent(contentDiv, `Error: ${ error.message }`, false, 'assistant')
|
||||
}
|
||||
} finally {
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
sendBtn.disabled = false
|
||||
|
||||
if (cursorSpan && cursorSpan.parentNode) {
|
||||
cursorSpan.parentNode.removeChild(cursorSpan)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNonStreamingResponse(userMessage) {
|
||||
let typingIndicator = null
|
||||
try {
|
||||
typingIndicator = showTypingIndicator()
|
||||
|
||||
const { backendKey, model } = splitBackendModel(currentBackendModel)
|
||||
const selectedModel = model || availableBackendModels[0]?.model || 'local-model'
|
||||
|
||||
const requestBody = {
|
||||
model : selectedModel,
|
||||
messages : getApiMessages(),
|
||||
stream : false,
|
||||
temperature : 0.7,
|
||||
repeat_penalty: 1.1,
|
||||
max_tokens : 2000
|
||||
}
|
||||
|
||||
const response = await fetch(`${ getApiUrl() }/chat/completions`, {
|
||||
method : 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json',
|
||||
'Authorization': `Bearer ${ API_KEY }`
|
||||
},
|
||||
body : JSON.stringify(requestBody)
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${ response.status } ${ response.statusText }`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
removeTypingIndicator(typingIndicator)
|
||||
|
||||
if (data.choices && data.choices.length > 0) {
|
||||
const assistantReply = data.choices[0].message.content
|
||||
addMessage('assistant', assistantReply, markdownToggle.checked)
|
||||
} else {
|
||||
addMessage('assistant', 'No response generated.', false)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
if (typingIndicator) {
|
||||
removeTypingIndicator(typingIndicator)
|
||||
}
|
||||
addMessage('assistant', `Error: ${ error.message }`, false)
|
||||
} finally {
|
||||
sendBtn.disabled = false
|
||||
userInput.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function stopStream() {
|
||||
if (currentStreamController) {
|
||||
currentStreamController.abort()
|
||||
isStreaming = false
|
||||
currentStreamController = null
|
||||
sendBtn.disabled = false
|
||||
sendBtn.textContent = 'Send'
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const userMessage = userInput.value.trim()
|
||||
if (!userMessage || isStreaming) return
|
||||
|
||||
// ✅ FIX: Validate backend selection
|
||||
if (!currentBackendModel) {
|
||||
addMessage('assistant', 'Please select a backend model first.', false)
|
||||
return
|
||||
}
|
||||
|
||||
addMessage('user', userMessage, false)
|
||||
|
||||
userInput.value = ''
|
||||
userInput.style.height = 'auto'
|
||||
sendBtn.disabled = true
|
||||
|
||||
if (streamToggle.checked) {
|
||||
sendBtn.textContent = 'Stop'
|
||||
await handleStreamingResponse(userMessage)
|
||||
} else {
|
||||
await handleNonStreamingResponse(userMessage)
|
||||
}
|
||||
|
||||
sendBtn.textContent = 'Send'
|
||||
}
|
||||
|
||||
sendBtn.addEventListener('click', () => {
|
||||
if (isStreaming) {
|
||||
stopStream()
|
||||
} else {
|
||||
sendMessage()
|
||||
}
|
||||
})
|
||||
|
||||
userInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
if (!isStreaming) {
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// ✅ Updated window.onload with better initialization
|
||||
window.onload = () => {
|
||||
if (userInput) userInput.focus()
|
||||
|
||||
// Set default backend BEFORE fetching
|
||||
if (!currentBackendModel) {
|
||||
currentBackendModel = 'plato'
|
||||
}
|
||||
|
||||
fetchBackendModels().then(() => {
|
||||
// Load chat history after models are fetched
|
||||
if (chatLog) {
|
||||
if (chatHistory.length === 0) {
|
||||
//addMessage('assistant', welcomeMessage, true, null, false);
|
||||
} else {
|
||||
chatHistory.forEach(msg => {
|
||||
if (typeof msg.content === 'string' && msg.content.trim()) {
|
||||
addMessage(msg.role, msg.content, msg.markdown, msg.messageId, false)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById('resetBtn')?.addEventListener('click', resetChat)
|
||||
}
|
||||
|
||||
function resetChat() {
|
||||
chatHistory = []
|
||||
localStorage.setItem('chatHistory', JSON.stringify(chatHistory))
|
||||
|
||||
if (chatLog) {
|
||||
chatLog.innerHTML = ''
|
||||
addMessage('assistant', welcomeMessage, true, null, false)
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -4,7 +4,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chat</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
|
||||
@@ -26,27 +25,32 @@
|
||||
</div>
|
||||
|
||||
<div id="chatLog">
|
||||
<div class="message message-assistant"><div class="message-header assistant"><div class="avatar assistant-avatar">?</div><span>Assistant</span></div><div class="markdown-content"><h1>Welcome to LM Studio Chat!</h1>
|
||||
<p>I now support <strong>full conversation history</strong>, <strong>real-time streaming responses</strong> and <strong>dark, readable text formatting</strong>.</p>
|
||||
<h2>Features:</h2>
|
||||
<ol>
|
||||
<li><strong>Full Chat History</strong> - Complete conversation context is now sent to the AI</li>
|
||||
<li><strong>Smart History Management</strong> - Automatically keeps the last 50 messages</li>
|
||||
<li><strong>Streaming Mode</strong> (enabled by default) - Watch responses appear word-by-word</li>
|
||||
<li><strong>Markdown Rendering</strong> - Proper formatting for code, lists, tables, and more</li>
|
||||
<li><strong>Readable Dark Text</strong> - No more eye strain from light gray text</li>
|
||||
</ol>
|
||||
<h2>Try it out:</h2>
|
||||
<ul>
|
||||
<li>Ask follow-up questions that reference earlier messages</li>
|
||||
<li>Have a multi-turn conversation with full context</li>
|
||||
<li>Ask "what did I just ask?" to test history retention</li>
|
||||
<li>Watch the streaming response in real-time!</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p><em>Tip: You can toggle streaming and markdown using the checkboxes below.</em></p>
|
||||
</blockquote>
|
||||
</div></div>
|
||||
<div class="message message-assistant">
|
||||
<div class="message-header assistant">
|
||||
<div class="avatar assistant-avatar">?</div>
|
||||
<span>Assistant</span></div>
|
||||
<div class="markdown-content"><h1>Welcome to LM Studio Chat!</h1>
|
||||
<p>I now support <strong>full conversation history</strong>, <strong>real-time streaming responses</strong> and <strong>dark, readable text formatting</strong>.</p>
|
||||
<h2>Features:</h2>
|
||||
<ol>
|
||||
<li><strong>Full Chat History</strong> - Complete conversation context is now sent to the AI</li>
|
||||
<li><strong>Smart History Management</strong> - Automatically keeps the last 50 messages</li>
|
||||
<li><strong>Streaming Mode</strong> (enabled by default) - Watch responses appear word-by-word</li>
|
||||
<li><strong>Markdown Rendering</strong> - Proper formatting for code, lists, tables, and more</li>
|
||||
<li><strong>Readable Dark Text</strong> - No more eye strain from light gray text</li>
|
||||
</ol>
|
||||
<h2>Try it out:</h2>
|
||||
<ul>
|
||||
<li>Ask follow-up questions that reference earlier messages</li>
|
||||
<li>Have a multi-turn conversation with full context</li>
|
||||
<li>Ask "what did I just ask?" to test history retention</li>
|
||||
<li>Watch the streaming response in real-time!</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p><em>Tip: You can toggle streaming and markdown using the checkboxes below.</em></p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inputArea">
|
||||
@@ -73,7 +77,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="chatv2.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user