tour/jarvis-lan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update 3 file(s)

Browse Source
This commit is contained in:
mike
2025-12-28 05:01:51 +01:00
parent d6fdb7372d
commit 267e155ad1
3 changed files with 413 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

675
chatv2.js
View File

@@ -1,17 +1,17 @@
const BACKENDS = { const BACKENDS = {
plato : { plato: {
prod: '/api/plato', prod: '/api/plato',
dev : 'http://192.168.1.74:1234/v1', dev: 'http://192.168.1.74:8080/v1',
name: 'Plato (192.168.1.74)' name: 'Plato (192.168.1.74)'
}, },
stoic : { stoic: {
prod: '/api/stoic', prod: '/api/stoic',
dev : 'http://192.168.1.159:1234/v1', dev: 'http://192.168.1.159:1234/v1',
name: 'Stoic (192.168.1.159)' name: 'Stoic (192.168.1.159)'
}, },
ollama: { ollama: {
prod: '/api/ollama', prod: '/api/ollama',
dev : 'http://192.168.1.159:8081/v1', dev: 'http://192.168.1.159:8081/v1',
name: 'Ollama (192.168.1.159:8081)' name: 'Ollama (192.168.1.159:8081)'
} }
} }
@@ -25,12 +25,13 @@ let currentStreamController = null
let isStreaming = false let isStreaming = false
let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [] let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || []
chatHistory = chatHistory.map(message => ({ // ✅ FIX: Generate unique IDs and validate message structure
role : message.role || 'user', chatHistory = chatHistory.map((message, index) => ({
content : message.content || '', role: message.role || 'user',
markdown : message.markdown || false, content: message.content || '',
messageId: message.messageId || `msg-${ Date.now() }` 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! const welcomeMessage = `# Welcome to LM Studio Chat!
@@ -38,7 +39,7 @@ I now support **full conversation history**, **real-time streaming responses** a
## Features: ## Features:
1. **Full Chat History** - Complete conversation context is now sent to the AI 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 2. **Smart History Management** - Automatically keeps the last ${MAX_CHAT_HISTORY} messages
3. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word 3. **Streaming Mode** (enabled by default) - Watch responses appear word-by-word
4. **Markdown Rendering** - Proper formatting for code, lists, tables, and more 4. **Markdown Rendering** - Proper formatting for code, lists, tables, and more
5. **Readable Dark Text** - No more eye strain from light gray text 5. **Readable Dark Text** - No more eye strain from light gray text
@@ -51,60 +52,102 @@ I now support **full conversation history**, **real-time streaming responses** a
> *Tip: You can toggle streaming and markdown using the checkboxes below.*` > *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() { function getApiUrl() {
const [backendKey, model] = currentBackendModel.split(':') const { backendKey, model } = splitBackendModel(currentBackendModel);
const backend = BACKENDS[backendKey] const effectiveBackendKey = backendKey || 'plato';
return IS_PRODUCTION ? backend.prod : backend.dev const backend = BACKENDS[effectiveBackendKey];
if (!backend) {
throw new Error(`Invalid backend: '${effectiveBackendKey}'`);
}
return IS_PRODUCTION ? backend.prod : backend.dev;
} }
function updateBackendModelDisplay() { function updateBackendModelDisplay() {
const [backendKey, model] = currentBackendModel.split(':') const { backendKey, model } = splitBackendModel(currentBackendModel);
const backend = BACKENDS[backendKey] const backend = BACKENDS[backendKey];
if (!backend) return;
const displayText = IS_PRODUCTION const displayText = IS_PRODUCTION
? `${ backend.prod } ? ${ backend.name }` ? `${backend.prod} - ${backend.name}`
: backend.dev : backend.dev;
document.getElementById('backendDisplay').textContent = `${ displayText } - Model: ${ model }` document.getElementById('backendDisplay').textContent = `${displayText} - Model: ${model || 'None'}`;
} }
async function fetchBackendModels() { async function fetchBackendModels() {
try { try {
const response = await fetch(`${ getApiUrl() }/models`) // ✅ FIX: Ensure valid backend before fetching
if (response.ok) { if (!currentBackendModel || currentBackendModel === ':') {
const data = await response.json() currentBackendModel = 'plato';
availableBackendModels = data.data.map(model => ({ }
backend: currentBackendModel.split(':')[0],
model: model.id
}))
populateBackendModelSelector()
if (!currentBackendModel && availableBackendModels.length > 0) { const apiUrl = getApiUrl();
currentBackendModel = `${ availableBackendModels[0].backend }:${ availableBackendModels[0].model }` console.log(`Fetching models from: ${apiUrl}`);
document.getElementById('backendModelSelector').value = currentBackendModel
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 { } else {
console.error('Failed to fetch models:', response.statusText) console.error('Failed to fetch models:', response.statusText);
document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>' document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>';
} }
} catch (error) { } catch (error) {
console.error('Error fetching models:', error) console.error('Error fetching models:', error);
document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>' document.getElementById('backendModelSelector').innerHTML = '<option value="">Error loading models</option>';
} }
} }
function populateBackendModelSelector() { function populateBackendModelSelector() {
const selector = document.getElementById('backendModelSelector') const selector = document.getElementById('backendModelSelector');
if (availableBackendModels.length === 0) { if (availableBackendModels.length === 0) {
selector.innerHTML = '<option value="">No models available</option>' selector.innerHTML = '<option value="">No models available</option>';
return return;
} }
selector.innerHTML = availableBackendModels.map(backendModel => selector.innerHTML = availableBackendModels.map(backendModel =>
`<option value="${ backendModel.backend }:${ backendModel.model }">${ BACKENDS[backendModel.backend].name } - ${ backendModel.model }</option>` `<option value="${backendModel.backend}:${backendModel.model}">${BACKENDS[backendModel.backend].name} - ${backendModel.model}</option>`
).join('') ).join('');
if (currentBackendModel) { if (currentBackendModel) {
selector.value = currentBackendModel selector.value = currentBackendModel;
} }
} }
@@ -112,472 +155,500 @@ function getApiMessages() {
return chatHistory.slice(-MAX_CHAT_HISTORY).map(({ role, content }) => ({ return chatHistory.slice(-MAX_CHAT_HISTORY).map(({ role, content }) => ({
role, role,
content content
})) }));
} }
function trimChatHistory() { function trimChatHistory() {
if (chatHistory.length > MAX_CHAT_HISTORY) { if (chatHistory.length > MAX_CHAT_HISTORY) {
chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY) chatHistory = chatHistory.slice(-MAX_CHAT_HISTORY);
localStorage.setItem('chatHistory', JSON.stringify(chatHistory)) localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
} }
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const backendModelSelector = document.getElementById('backendModelSelector') const backendModelSelector = document.getElementById('backendModelSelector');
backendModelSelector.addEventListener('change', (e) => { backendModelSelector.addEventListener('change', (e) => {
currentBackendModel = e.target.value currentBackendModel = e.target.value;
updateBackendModelDisplay() updateBackendModelDisplay();
fetchBackendModels() fetchBackendModels();
}) });
fetchBackendModels() fetchBackendModels();
}) });
const chatLog = document.getElementById('chatLog') const chatLog = document.getElementById('chatLog');
const userInput = document.getElementById('userInput') const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn') const sendBtn = document.getElementById('sendBtn');
const streamToggle = document.getElementById('streamToggle') const streamToggle = document.getElementById('streamToggle');
const markdownToggle = document.getElementById('markdownToggle') const markdownToggle = document.getElementById('markdownToggle');
const modelNameSpan = document.getElementById('modelName') const modelNameSpan = document.getElementById('modelName');
marked.setOptions({ marked.setOptions({
gfm : true, gfm: true,
breaks : true, breaks: true,
highlight: function(code, lang) { highlight: function(code, lang) {
if (window.hljs) { if (window.hljs) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext' const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value return hljs.highlight(code, { language }).value;
} }
return code return code;
} }
}) });
function autoResize(textarea) { function autoResize(textarea) {
textarea.style.height = 'auto' textarea.style.height = 'auto';
textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px' textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px';
} }
function addMessage(role, content, markdown = false, messageId = null) { function addMessage(role, content, markdown = false, messageId = null) {
const messageDiv = document.createElement('div') const messageDiv = document.createElement('div');
messageDiv.className = `message message-${ role }` messageDiv.className = `message message-${role}`;
if (messageId) { if (messageId) {
messageDiv.id = messageId messageDiv.id = messageId;
} }
const headerDiv = document.createElement('div') const headerDiv = document.createElement('div');
headerDiv.className = `message-header ${ role }` headerDiv.className = `message-header ${role}`;
const avatar = document.createElement('div') const avatar = document.createElement('div');
avatar.className = `avatar ${ role }-avatar` avatar.className = `avatar ${role}-avatar`;
avatar.textContent = role === 'user' ? '?' : '?' avatar.textContent = role === 'user' ? '?' : '?';
const name = document.createElement('span') const name = document.createElement('span');
name.textContent = role === 'user' ? 'You' : 'Assistant' name.textContent = role === 'user' ? 'You' : 'Assistant';
headerDiv.appendChild(avatar) headerDiv.appendChild(avatar);
headerDiv.appendChild(name) headerDiv.appendChild(name);
const contentDiv = document.createElement('div') const contentDiv = document.createElement('div');
if (markdown && role === 'assistant' && markdownToggle.checked) { if (markdown && role === 'assistant' && markdownToggle.checked) {
contentDiv.className = 'markdown-content' contentDiv.className = 'markdown-content';
const processedContent = parseThinkingTags(content) const processedContent = parseThinkingTags(content);
contentDiv.innerHTML = marked.parse(processedContent) contentDiv.innerHTML = marked.parse(processedContent);
if (window.hljs) { if (window.hljs) {
setTimeout(() => { setTimeout(() => {
contentDiv.querySelectorAll('pre code').forEach((block) => { contentDiv.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block) hljs.highlightElement(block);
}) });
}, 0) }, 0);
} }
} else { } else {
const processedContent = parseThinkingTags(content) const processedContent = parseThinkingTags(content);
contentDiv.innerHTML = processedContent contentDiv.innerHTML = processedContent;
contentDiv.style.whiteSpace = 'pre-wrap' contentDiv.style.whiteSpace = 'pre-wrap';
contentDiv.style.padding = '8px 0' contentDiv.style.padding = '8px 0';
contentDiv.style.color = '#2d3339' contentDiv.style.color = '#2d3339';
} }
messageDiv.appendChild(headerDiv) messageDiv.appendChild(headerDiv);
messageDiv.appendChild(contentDiv) messageDiv.appendChild(contentDiv);
chatLog.appendChild(messageDiv) chatLog.appendChild(messageDiv);
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight;
chatHistory.push({ role, content, markdown, messageId }) chatHistory.push({ role, content, markdown, messageId });
trimChatHistory() trimChatHistory();
localStorage.setItem('chatHistory', JSON.stringify(chatHistory)) localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
return contentDiv return contentDiv;
} }
function parseThinkingTags(content) { function parseThinkingTags(content) {
let result = content let result = content;
let thinkingCounter = 0 let thinkingCounter = 0;
const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi;
result = result.replace(completeThinkRegex, (match, thinkContent) => { result = result.replace(completeThinkRegex, (match, thinkContent) => {
thinkingCounter++ thinkingCounter++;
const id = `thinking-${ Date.now() }-${ thinkingCounter }` const id = `thinking-${Date.now()}-${thinkingCounter}`;
return `<div class="thinking-block"> return `<div class="thinking-block">
<div class="thinking-header" onclick="toggleThinking('${ id }')"> <div class="thinking-header" onclick="toggleThinking('${id}')">
<span class="thinking-toggle" id="${ id }-toggle">?</span> <span class="thinking-toggle" id="${id}-toggle">?</span>
<span>? Thinking...</span> <span>? Thinking...</span>
</div> </div>
<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div> <div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
</div>` </div>`;
}) });
const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi;
result = result.replace(incompleteThinkRegex, (match, thinkContent) => { result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
thinkingCounter++ thinkingCounter++;
const id = `thinking-${ Date.now() }-${ thinkingCounter }` const id = `thinking-${Date.now()}-${thinkingCounter}`;
return `<div class="thinking-block"> return `<div class="thinking-block">
<div class="thinking-header" onclick="toggleThinking('${ id }')"> <div class="thinking-header" onclick="toggleThinking('${id}')">
<span class="thinking-toggle" id="${ id }-toggle">?</span> <span class="thinking-toggle" id="${id}-toggle">?</span>
<span>? Thinking...</span> <span>? Thinking...</span>
</div> </div>
<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div> <div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
</div>` </div>`;
}) });
return result return result;
} }
window.toggleThinking = function(id) { window.toggleThinking = function(id) {
const content = document.getElementById(id) const content = document.getElementById(id);
const toggle = document.getElementById(id + '-toggle') const toggle = document.getElementById(id + '-toggle');
if (content && toggle) { if (content && toggle) {
content.classList.toggle('hidden') content.classList.toggle('hidden');
toggle.classList.toggle('collapsed') toggle.classList.toggle('collapsed');
} }
} };
function updateMessageContent(contentDiv, newContent, markdown = false, role) { function updateMessageContent(contentDiv, newContent, markdown = false, role) {
const processedContent = parseThinkingTags(newContent) const processedContent = parseThinkingTags(newContent);
if (markdown && role === 'assistant' && markdownToggle.checked) { if (markdown && role === 'assistant' && markdownToggle.checked) {
contentDiv.innerHTML = marked.parse(processedContent) contentDiv.innerHTML = marked.parse(processedContent);
if (window.hljs) { if (window.hljs) {
setTimeout(() => { setTimeout(() => {
contentDiv.querySelectorAll('pre code').forEach((block) => { contentDiv.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block) hljs.highlightElement(block);
}) });
}, 0) }, 0);
} }
} else { } else {
contentDiv.textContent = newContent contentDiv.innerHTML = processedContent;
} }
} }
function showTypingIndicator() { function showTypingIndicator() {
const typingDiv = document.createElement('div') const typingDiv = document.createElement('div');
typingDiv.id = 'typingIndicator' typingDiv.id = 'typingIndicator';
typingDiv.className = 'message message-assistant' typingDiv.className = 'message message-assistant';
const headerDiv = document.createElement('div') const headerDiv = document.createElement('div');
headerDiv.className = 'message-header assistant' headerDiv.className = 'message-header assistant';
const avatar = document.createElement('div') const avatar = document.createElement('div');
avatar.className = 'avatar assistant-avatar' avatar.className = 'avatar assistant-avatar';
avatar.textContent = '?' avatar.textContent = '?';
const name = document.createElement('span') const name = document.createElement('span');
name.textContent = 'Assistant' name.textContent = 'Assistant';
headerDiv.appendChild(abatar) headerDiv.appendChild(avatar); // ✅ FIX: Typo "abatar"
headerDiv.appendChild(name) headerDiv.appendChild(name);
const dotsDiv = document.createElement('div') const dotsDiv = document.createElement('div');
dotsDiv.className = 'typing-indicator' dotsDiv.className = 'typing-indicator';
dotsDiv.innerHTML = ` dotsDiv.innerHTML = `
<div class="typing-dot"></div> <div class="typing-dot"></div>
<div class="typing-dot"></div> <div class="typing-dot"></div>
<div class="typing-dot"></div> <div class="typing-dot"></div>
<span style="margin-left: 8px;">Thinking...</span> <span style="margin-left: 8px;">Thinking...</span>
` `;
typingDiv.appendChild(headerDiv) typingDiv.appendChild(headerDiv);
typingDiv.appendChild(dotsDiv) typingDiv.appendChild(dotsDiv);
chatLog.appendChild(typingDiv) chatLog.appendChild(typingDiv);
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight;
return typingDiv return typingDiv;
} }
function removeTypingIndicator(typingDiv) { function removeTypingIndicator(typingDiv) {
if (typingDiv && typingDiv.parentNode) { if (typingDiv && typingDiv.parentNode) {
typingDiv.parentNode.removeChild(typingDiv) typingDiv.parentNode.removeChild(typingDiv);
} }
} }
async function handleStreamingResponse(userMessage) { async function handleStreamingResponse(userMessage) {
const messageId = 'msg-' + Date.now() const messageId = 'msg-' + Date.now();
let accumulatedContent = '' let accumulatedContent = '';
let contentDiv = null let contentDiv = null;
const messageDiv = document.createElement('div') const messageDiv = document.createElement('div');
messageDiv.className = 'message message-assistant' messageDiv.className = 'message message-assistant';
messageDiv.id = messageId messageDiv.id = messageId;
const headerDiv = document.createElement('div') const headerDiv = document.createElement('div');
headerDiv.className = 'message-header assistant' headerDiv.className = 'message-header assistant';
const avatar = document.createElement('div') const avatar = document.createElement('div');
avatar.className = 'avatar assistant-avatar' avatar.className = 'avatar assistant-avatar';
avatar.textContent = '?' avatar.textContent = '?';
const name = document.createElement('span') const name = document.createElement('span');
name.textContent = 'Assistant' name.textContent = 'Assistant';
headerDiv.appendChild(avatar) headerDiv.appendChild(avatar);
headerDiv.appendChild(name) headerDiv.appendChild(name);
contentDiv = document.createElement('div') contentDiv = document.createElement('div');
contentDiv.className = 'markdown-content' contentDiv.className = 'markdown-content';
messageDiv.appendChild(headerDiv) messageDiv.appendChild(headerDiv);
messageDiv.appendChild(contentDiv) messageDiv.appendChild(contentDiv);
chatLog.appendChild(messageDiv) chatLog.appendChild(messageDiv);
const cursorSpan = document.createElement('span') const cursorSpan = document.createElement('span');
cursorSpan.className = 'streaming-cursor' cursorSpan.className = 'streaming-cursor';
contentDiv.appendChild(cursorSpan) contentDiv.appendChild(cursorSpan);
// ✅ FIX: Create AbortController BEFORE fetch
currentStreamController = new AbortController();
isStreaming = true;
try { try {
if (!currentModel && availableModels.length > 0) { const { backendKey, model } = splitBackendModel(currentBackendModel);
currentModel = availableModels[0].id const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
document.getElementById('modelSelector').value = currentModel
}
const requestBody = { const requestBody = {
model : currentModel || 'local-model', model: selectedModel,
messages : getApiMessages(), messages: getApiMessages(),
stream : true, stream: true,
temperature: 0.7, temperature: 0.7,
max_tokens : 2000 max_tokens: 2000
} };
const response = await fetch(`${ getApiUrl() }/chat/completions`, { const response = await fetch(`${getApiUrl()}/chat/completions`, {
method : 'POST', method: 'POST',
headers: { headers: {
'Content-Type' : 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${ API_KEY }` 'Authorization': `Bearer ${API_KEY}`
}, },
body : JSON.stringify(requestBody) body: JSON.stringify(requestBody),
}) signal: currentStreamController.signal // ✅ Now works correctly
});
if (!response.ok) { if (!response.ok) {
throw new Error(`API Error: ${ response.status } ${ response.statusText }`) throw new Error(`API Error: ${response.status} ${response.statusText}`);
} }
const reader = response.body.getReader() const reader = response.body.getReader();
const decoder = new TextDecoder() const decoder = new TextDecoder();
isStreaming = true let updateScheduled = false;
currentStreamController = new AbortController() let lastUpdate = Date.now();
const MIN_UPDATE_INTERVAL = 100;
let updateScheduled = false
let lastUpdate = Date.now()
const MIN_UPDATE_INTERVAL = 100
function scheduleUpdate() { function scheduleUpdate() {
if (updateScheduled) return if (updateScheduled) return;
const now = Date.now() const now = Date.now();
const timeSinceLastUpdate = now - lastUpdate const timeSinceLastUpdate = now - lastUpdate;
if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) { if (timeSinceLastUpdate >= MIN_UPDATE_INTERVAL) {
updateScheduled = true updateScheduled = true;
requestAnimationFrame(() => { requestAnimationFrame(() => {
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant') updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
if (cursorSpan.parentNode) { if (cursorSpan.parentNode) {
contentDiv.appendChild(cursorSpan) contentDiv.appendChild(cursorSpan);
} }
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight;
lastUpdate = Date.now() lastUpdate = Date.now();
updateScheduled = false updateScheduled = false;
}) });
} else { } else {
updateScheduled = true updateScheduled = true;
setTimeout(() => { setTimeout(() => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant') updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
if (cursorSpan.parentNode) { if (cursorSpan.parentNode) {
contentDiv.appendChild(cursorSpan) contentDiv.appendChild(cursorSpan);
} }
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight;
lastUpdate = Date.now() lastUpdate = Date.now();
updateScheduled = false updateScheduled = false;
}) });
}, MIN_UPDATE_INTERVAL - timeSinceLastUpdate) }, MIN_UPDATE_INTERVAL - timeSinceLastUpdate);
} }
} }
while (true) { while (true) {
const { done, value } = await reader.read() const { done, value } = await reader.read();
if (done) break if (done) break;
const chunk = decoder.decode(value) const chunk = decoder.decode(value);
const lines = chunk.split('\n').filter(line => line.trim() !== '') const lines = chunk.split('\n').filter(line => line.trim() !== '');
for (const line of lines) { for (const line of lines) {
if (line.startsWith('data: ')) { if (line.startsWith('data: ')) {
const data = line.slice(6) const data = line.slice(6);
if (data === '[DONE]') { if (data === '[DONE]') {
isStreaming = false isStreaming = false;
currentStreamController = null currentStreamController = null;
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant') updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
if (cursorSpan.parentNode) { if (cursorSpan.parentNode) {
cursorSpan.parentNode.removeChild(cursorSpan) cursorSpan.parentNode.removeChild(cursorSpan);
} }
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight;
return return;
} }
try { try {
const parsed = JSON.parse(data) const parsed = JSON.parse(data);
if (parsed.choices && parsed.choices[0].delta.content) { if (parsed.choices && parsed.choices[0].delta.content) {
accumulatedContent += parsed.choices[0].delta.content accumulatedContent += parsed.choices[0].delta.content;
scheduleUpdate() scheduleUpdate();
} }
} catch (e) { } catch (e) {
console.log('Error parsing stream data:', e) console.log('Error parsing stream data:', e);
} }
} }
} }
} }
updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant') updateMessageContent(contentDiv, accumulatedContent, markdownToggle.checked, 'assistant');
chatLog.scrollTop = chatLog.scrollHeight chatLog.scrollTop = chatLog.scrollHeight;
} catch (error) { } catch (error) {
console.error('Streaming error:', error) console.error('Streaming error:', error);
if (error.name !== 'AbortError') { if (error.name !== 'AbortError') {
updateMessageContent(contentDiv, `Error: ${ error.message }`, false, 'assistant') updateMessageContent(contentDiv, `Error: ${error.message}`, false, 'assistant');
} }
} finally { } finally {
isStreaming = false isStreaming = false;
currentStreamController = null currentStreamController = null;
sendBtn.disabled = false sendBtn.disabled = false;
if (cursorSpan.parentNode) { if (cursorSpan && cursorSpan.parentNode) {
cursorSpan.parentNode.removeChild(cursorSpan) cursorSpan.parentNode.removeChild(cursorSpan);
} }
} }
} }
async function handleNonStreamingResponse(userMessage) { async function handleNonStreamingResponse(userMessage) {
let typingIndicator = null;
try { try {
const typingIndicator = showTypingIndicator() typingIndicator = showTypingIndicator();
if (!currentModel && availableModels.length > 0) { const { backendKey, model } = splitBackendModel(currentBackendModel);
currentModel = availableModels[0].id const selectedModel = model || availableBackendModels[0]?.model || 'local-model';
document.getElementById('modelSelector').value = currentModel
}
const requestBody = { const requestBody = {
model : currentModel || 'local-model', model: selectedModel,
messages : getApiMessages(), messages: getApiMessages(),
stream : false, stream: false,
temperature: 0.7, temperature: 0.7,
max_tokens : 2000 max_tokens: 2000
} };
const response = await fetch(`${ getApiUrl() }/chat/completions`, { const response = await fetch(`${getApiUrl()}/chat/completions`, {
method : 'POST', method: 'POST',
headers: { headers: {
'Content-Type' : 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${ API_KEY }` 'Authorization': `Bearer ${API_KEY}`
}, },
body : JSON.stringify(requestBody) body: JSON.stringify(requestBody)
}) });
if (!response.ok) { if (!response.ok) {
throw new Error(`API Error: ${ response.status } ${ response.statusText }`) throw new Error(`API Error: ${response.status} ${response.statusText}`);
} }
const data = await response.json() const data = await response.json();
removeTypingIndicator(typingIndicator) removeTypingIndicator(typingIndicator);
if (data.choices && data.choices.length > 0) { if (data.choices && data.choices.length > 0) {
const assistantReply = data.choices[0].message.content const assistantReply = data.choices[0].message.content;
addMessage('assistant', assistantReply, markdownToggle.checked) addMessage('assistant', assistantReply, markdownToggle.checked);
} else { } else {
addMessage('assistant', 'No response generated.', false) addMessage('assistant', 'No response generated.', false);
} }
} catch (error) { } catch (error) {
console.error('Error:', error) console.error('Error:', error);
removeTypingIndicator(typingIndicator) if (typingIndicator) {
addMessage('assistant', `Error: ${ error.message }`, false) removeTypingIndicator(typingIndicator);
}
addMessage('assistant', `Error: ${error.message}`, false);
} finally { } finally {
sendBtn.disabled = false sendBtn.disabled = false;
userInput.focus() userInput.focus();
} }
} }
function stopStream() { function stopStream() {
if (currentStreamController) { if (currentStreamController) {
currentStreamController.abort() currentStreamController.abort();
isStreaming = false isStreaming = false;
currentStreamController = null currentStreamController = null;
sendBtn.disabled = false sendBtn.disabled = false;
sendBtn.textContent = 'Send' sendBtn.textContent = 'Send';
} }
} }
async function sendMessage() { async function sendMessage() {
const userMessage = userInput.value.trim() const userMessage = userInput.value.trim();
if (!userMessage || isStreaming) return if (!userMessage || isStreaming) return;
addMessage('user', userMessage) // ✅ FIX: Validate backend selection
if (!currentBackendModel) {
userInput.value = '' addMessage('assistant', 'Please select a backend model first.', false);
userInput.style.height = 'auto' return;
sendBtn.disabled = true
if (streamToggle.checked) {
sendBtn.textContent = 'Stop'
await handleStreamingResponse(userMessage)
} else {
await handleNonStreamingResponse(userMessage)
} }
sendBtn.textContent = 'Send' 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', () => { sendBtn.addEventListener('click', () => {
if (isStreaming) { if (isStreaming) {
stopStream() stopStream();
} else { } else {
sendMessage() sendMessage();
} }
}) });
userInput.addEventListener('keydown', (e) => { userInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault() e.preventDefault();
if (!isStreaming) { if (!isStreaming) {
sendMessage() sendMessage();
} }
} }
}) });
// ✅ Updated window.onload with better initialization
window.onload = () => { window.onload = () => {
userInput.focus() userInput.focus();
fetchModels()
if (chatHistory.length === 0) { // Set default backend BEFORE fetching
document.getElementById('resetBtn').addEventListener('click', resetChat) 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() { function resetChat() {
chatHistory = [] chatHistory = [];
chatLog.innerHTML = welcomeMessage localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
localStorage.setItem('chatHistory', JSON.stringify(chatHistory)) if (chatLog) {
} chatLog.innerHTML = '';
addMessage('assistant', welcomeMessage, true);
}
}

57
index.html
View File

@@ -23,33 +23,56 @@
<code id="backendDisplay" style="font-size: 0.85em;"></code> <code id="backendDisplay" style="font-size: 0.85em;"></code>
</div> </div>
</div> </div>
</div>
<div id="chatLog"></div>
<div id="chatLog">
<div id="inputArea"> <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">
<textarea <textarea
id="userInput" id="userInput"
placeholder="Type your message here... (Shift+Enter for new line, Enter to send)" placeholder="Type your message here... (Shift+Enter for new line, Enter to send)"
rows="1" rows="1"
oninput="autoResize(this)" oninput="autoResize(this)"
></textarea> ></textarea>
<div style="display: flex; justify-content: space-between; align-items: center;"> <div style="display: flex; justify-content: space-between; align-items: center;">
<div class="controls"> <div class="controls">
<div> <div>
<label> <label>
<input type="checkbox" id="streamToggle" checked> Streaming <input type="checkbox" id="streamToggle" checked> Streaming
</label> </label>
<label style="margin-left: 15px;"> <label style="margin-left: 15px;">
<input type="checkbox" id="markdownToggle" checked> Markdown <input type="checkbox" id="markdownToggle" checked> Markdown
</label> </label>
</div>
<div id="modelInfo">Model: <span id="modelName">unknown</span></div>
</div> </div>
<button id="sendBtn">Send</button> <div id="modelInfo">Model: <span id="modelName">unknown</span></div>
<button id="resetBtn">Reset Chat</button>
</div> </div>
<button id="sendBtn">Send</button>
<button id="resetBtn">Reset Chat</button>
</div> </div>
</div> </div>
</div>
<script src="chatv2.js"></script> <script src="chatv2.js"></script>
</body> </body>

1
style.css
View File

@@ -9,7 +9,6 @@ body {
#chatContainer { #chatContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 95vh;
background: white; background: white;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);