Spaces:

protae5544
/

95win

Running

App Files Files Community

protae5544 commited on 19 days ago

Commit

bd1b6f2

verified ·

1 Parent(s): 54d02a3

Update index.html

Browse files

Files changed (1) hide show

index.html +780 -547

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>AI Chat - Win95 Fullscreen + Stream + File Upload</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css">
   <style>
@@ -135,6 +135,7 @@
       border: 2px inset #808080;
       background: #c0c0c0;
     }
     .settings95 .api-status {
       font-size: 0.95em;
       color: #008000;
@@ -193,6 +194,7 @@
     }
     .message95.ai { align-self: flex-start; background: #fffffe; }
     .message95.user { align-self: flex-end; background: #c0e0ff; }
     .message95 pre { background: #fff; border: 2px inset #808080; padding: 9px 5px 15px 5px; position: relative; white-space: pre-wrap; word-break: break-all; margin-bottom: 10px; margin-top: 7px; overflow-x: auto; }
     .code-tools { position: absolute; right: 7px; top: 5px; z-index: 2; display: flex; gap: 3px; }
     .code-tools button { font-size: 0.95em; padding: 1.5px 7px; background: #e0e0e0; border: 2px outset #fff; border-radius: 0; cursor: pointer; color: #222; }
@@ -330,6 +332,31 @@
     }
     #contextSaveArea95 button:active { background: #c0c0c0; border: 2px inset #808080; }
     #contextSaveArea95 button:disabled { background: #e0e0e0; color: #bbb; border: 2px outset #b0b0b0; }
     @media (max-width: 650px) {
       .win95window {
         min-width: 0;
@@ -349,6 +376,12 @@
         gap: 4px;
         padding: 6px 4px;
       }
       .input-area95 {
         flex-direction: column;
         gap: 8px;
@@ -372,7 +405,7 @@
       <span style="display:inline-block;width:18px;height:18px;background:#fff;border:1px solid #808080;margin-right:7px;box-shadow:inset 2px 2px #c0c0c0;">
         <span style="display:inline-block;width:9px;height:9px;background:#008080;margin:4px 0 0 4px;vertical-align:middle;"></span>
       </span>
-      AI Chat - Windows 95 Enhanced
     </div>
     <div class="win95controls">
       <button id="maximizeBtn" title="เต็มจอ">&#9633;</button>
@@ -390,6 +423,7 @@
         <option value="openai">OpenAI</option>
         <option value="ollama">Ollama (Local)</option>
         <option value="huggingface">HuggingFace</option>
       </select>
       <label for="modelSelect95">โมเดล:</label>
       <select id="modelSelect95"></select>
@@ -399,12 +433,29 @@
       <span class="api-status" id="apiKeyStatus95"></span>
     </form>
     <div class="system-preset-area">
       <label for="systemPresetSelect95">ระบบ:</label>
       <select id="systemPresetSelect95">
         <option value="general">แชทธรรมดา</option>
         <option value="code-full">ส่งโค้ดเต็ม</option>
         <option value="code-function">ส่งเฉพาะฟังก์ชัน</option>
         <option value="custom">กำหนดเอง</option>
       </select>
       <input type="text" id="customSystemPrompt95" placeholder="ใส่ System Prompt ของคุณ" style="display:none; flex: 1; min-width: 200px;">
@@ -420,11 +471,11 @@
       <button id="confirmSaveBtn95">ยืนยัน context และเริ่มแชทใหม่</button>
     </div>
     <div class="chat-container95" id="messagesDiv95">
-      <div class="message95 ai">สวัสดี! AI Chat สไตล์ Win95 Enhanced พร้อมใช้ 🎉<br>รองรับหลาย AI Provider และมีระบบ preset ใหม่!</div>
     </div>
     <form id="chatForm95" class="input-area95" autocomplete="off">
       <button type="button" class="file-attach-btn" id="fileAttachBtn" title="แนบไฟล์">
-        📎<input type="file" id="fileInput" multiple>
       </button>
       <span class="file-name" id="fileName"></span>
       <input type="text" id="userInput95" placeholder="พิมพ์คำถามหรือข้อความ..." autocomplete="off">
@@ -455,13 +506,13 @@ const PROVIDERS = {
     apiKeyLabel: "Anthropic API Key",
     models: [
       { value: "claude-3-5-sonnet-20241022", label: "Claude-3.5 Sonnet" },
-      { value: "claude-3-5-haiku-20241022", label: "Claude-3.5 Haiku" },
       { value: "claude-3-opus-20240229", label: "Claude-3 Opus" },
-      { value: "claude-3-sonnet-20240229", label: "Claude-3 Sonnet" },
-      { value: "claude-3-haiku-20240307", label: "Claude-3 Haiku" }
     ],
     isStream: false,
-    streamEndpoint: "https://api.anthropic.com/v1/messages"
   },
   xai: {
     name: "xAI (Grok)",
@@ -475,7 +526,8 @@ const PROVIDERS = {
       { value: "grok-2-1212", label: "Grok-2" },
       { value: "grok-2-mini", label: "Grok-2 Mini" }
     ],
-    isStream: true
   },
   groq: {
     name: "Groq",
@@ -489,7 +541,8 @@ const PROVIDERS = {
       { value: "gemma2-9b-it", label: "Gemma-2 9B IT" },
       { value: "gemma-7b-it", label: "Gemma 7B IT" }
     ],
-    isStream: true
   },
   openai: {
     name: "OpenAI",
@@ -503,665 +556,845 @@ const PROVIDERS = {
       { value: "o1-preview", label: "o1-preview" },
       { value: "o1-mini", label: "o1-mini" }
     ],
-    isStream: true
   },
   ollama: {
     name: "Ollama (Local)",
     endpoint: "http://localhost:11434/api/chat",
     apiKeyLabel: "ไม่ต้องใส่ API Key",
     models: [
       { value: "llama3.2", label: "Llama 3.2" },
       { value: "llama3.1", label: "Llama 3.1" },
       { value: "codellama", label: "Code Llama" },
       { value: "mistral", label: "Mistral" },
       { value: "gemma2", label: "Gemma 2" }
     ],
-    isStream: true
   },
   huggingface: {
     name: "HuggingFace",
-    endpoint: "https://api-inference.huggingface.co/models",
     apiKeyLabel: "HuggingFace API Key",
     models: [
-      { value: "microsoft/DialoGPT-medium", label: "DialoGPT Medium" },
-      { value: "microsoft/DialoGPT-large", label: "DialoGPT Large" },
-      { value: "facebook/blenderbot-400M-distill", label: "BlenderBot 400M" },
-      { value: "google/flan-t5-large", label: "Flan-T5 Large" },
-      { value: "bigscience/bloom-560m", label: "BLOOM 560M" }
     ],
-    isStream: false
   }
 };
-// --- System Presets ---
-const SYSTEM_PRESETS = {
-  general: "คุณคือผู้ช่วย AI ที่ช่วยเหลือตอบคำถามและแชทธรรมดาได้ทุกเรื่อง",
-  "code-full": "คุณคือผู้ช่วยโปรแกรมเมอร์ เมื่อผู้ใช้ถามเกี่ยวกับโค้ด ให้ส่งโค้ดเต็มทั้งไฟล์กลับมาเสมอ ห้ามตัดย่อหรือใช้ ... ต้องแสดงโค้ดครบทุกบรรทัด",
-  "code-function": "คุณคือผู้ช่วยโปรแกรมเมอร์ เมื่อผู้ใช้ถามเกี่ยวกับโค้ด ให้ส่งเฉพาะฟังก์ชันหรือส่วนที่เกี่ยวข้องกับคำถาม ไม่ต้องส่งโค้ดทั้งไฟล์",
-  custom: "" // จะใช้ค่าจาก input
-};
-const PAYLOAD_CHAR_WARNING_THRESHOLD = 44000;
-// --- Elements
-const providerSelect   = document.getElementById('providerSelect95');
-const modelSelect      = document.getElementById('modelSelect95');
-const apiKeyInput      = document.getElementById('apiKey95');
 const confirmApiKeyBtn = document.getElementById('confirmApiKeyBtn95');
-const apiKeyStatus     = document.getElementById('apiKeyStatus95');
 const systemPresetSelect = document.getElementById('systemPresetSelect95');
-const customSystemPrompt = document.getElementById('customSystemPrompt95');
-const chatForm         = document.getElementById('chatForm95');
-const userInput        = document.getElementById('userInput95');
-const messagesDiv      = document.getElementById('messagesDiv95');
-const errorDiv         = document.getElementById('errorMessage95');
-const contextSaveArea  = document.getElementById('contextSaveArea95');
 const savedCodeDisplay = document.getElementById('savedCodeDisplay95');
-const goalInput        = document.getElementById('goalInput95');
-const confirmSaveBtn   = document.getElementById('confirmSaveBtn95');
-const warningMessage   = document.getElementById('warningMessage95');
-const fileAttachBtn    = document.getElementById('fileAttachBtn');
-const fileInput        = document.getElementById('fileInput');
-const fileNameSpan     = document.getElementById('fileName');
-const dropzone         = document.getElementById('dropzone95');
-// --- State
-let chatHistory = [];
-let isAITyping = false;
-let latestCodeContext = null;
-let savedCodeContext = null;
-let savedGoal = null;
-let attachedFiles = [];
-// --- highlight.js + code tools
-function renderWithHighlight(text) {
-  return text.replace(/```(\w+)?\n([\s\S]*?)```/g, function(_, lang, code) {
-    const safeCode = code.replace(/</g,"&lt;").replace(/>/g,"&gt;");
-    const language = lang && hljs.getLanguage(lang) ? lang : 'plaintext';
-    const codeId = 'code_' + Math.random().toString(36).slice(2);
-    return `<pre><div class="code-tools">
-      <button type="button" onclick="copyCode('${codeId}')">📋 Copy</button>
-      <button type="button" onclick="downloadCode('${codeId}','code.${lang||'txt'}')">⬇️ Save</button>
-    </div><code id="${codeId}" class="hljs language-${language}">${safeCode}</code></pre>`;
-  });
-}
-window.copyCode = function(id) {
-  const code = document.getElementById(id);
-  if (code) {
-    navigator.clipboard.writeText(code.textContent).then(()=>{
-      code.parentElement.querySelector('button').textContent='✅';
-      setTimeout(()=>code.parentElement.querySelector('button').textContent='📋 Copy',1000);
-    });
-  }
-};
-window.downloadCode = function(id, filename) {
-  const code = document.getElementById(id);
-  if (code) {
-    const blob = new Blob([code.textContent], {type: "text/plain"});
-    const a = document.createElement('a');
-    a.href = URL.createObjectURL(blob);
-    a.download = filename;
-    a.click();
-    setTimeout(()=>URL.revokeObjectURL(a.href), 2000);
-  }
-};
-function setModelOptions(providerKey) {
-  modelSelect.innerHTML = "";
-  PROVIDERS[providerKey].models.forEach(m =>
-    modelSelect.innerHTML += `<option value="${m.value}">${m.label}</option>`
-  );
-  // บันทึกและโหลดโมเดลที่เลือกไว้
-  const savedModel = localStorage.getItem("ai95model_" + providerKey);
-  if (savedModel && PROVIDERS[providerKey].models.find(m => m.value === savedModel)) {
-    modelSelect.value = savedModel;
-  }
 }
-function setApiKeyLabel(providerKey) {
-  apiKeyInput.placeholder = "กรอก " + PROVIDERS[providerKey].apiKeyLabel;
-  // ซ่อน API Key input สำหรับ Ollama
-  if (providerKey === 'ollama') {
-    apiKeyInput.style.display = 'none';
-    confirmApiKeyBtn.style.display = 'none';
-    document.querySelector('label[for="apiKey95"]').style.display = 'none';
   } else {
-    apiKeyInput.style.display = 'inline-block';
-    confirmApiKeyBtn.style.display = 'inline-block';
-    document.querySelector('label[for="apiKey95"]').style.display = 'inline-block';
   }
 }
-function loadApiKey(providerKey) {
-  if (providerKey === 'ollama') {
-    apiKeyStatus.textContent = '✔️ Local Mode';
-    apiKeyStatus.style.color = '#008000';
-    return;
   }
-  const k = localStorage.getItem("ai95key_" + providerKey) || "";
-  apiKeyInput.value = k;
-  if (k) {
-    apiKeyStatus.textContent = '✔️ โหลด API Key อัตโนมัติ';
-    apiKeyStatus.style.color = '#008000';
   } else {
-    apiKeyStatus.textContent = '';
   }
 }
-function saveApiKey(providerKey, key) {
-  localStorage.setItem("ai95key_" + providerKey, key);
-  apiKeyStatus.textContent = "✔️ API Key ถูกบันทึกแล้ว";
-  apiKeyStatus.style.color = "#008000";
-}
-function saveModel(providerKey, model) {
-  localStorage.setItem("ai95model_" + providerKey, model);
-}
-function saveSystemPreset(preset) {
-  localStorage.setItem("ai95systemPreset", preset);
-}
-function loadSystemPreset() {
-  const saved = localStorage.getItem("ai95systemPreset");
-  if (saved) {
-    systemPresetSelect.value = saved;
-    if (saved === 'custom') {
-      customSystemPrompt.style.display = 'inline-block';
-      customSystemPrompt.value = localStorage.getItem("ai95customPrompt") || "";
-    }
   }
-}
-function getApiKey() {
-  const providerKey = getProviderKey();
-  return providerKey === 'ollama' ? 'local' : apiKeyInput.value.trim();
-}
-function getProviderKey() { return providerSelect.value; }
-function getModelValue() { return modelSelect.value; }
-function getCurrentSystemPrompt() {
-  const preset = systemPresetSelect.value;
-  if (preset === 'custom') {
-    return customSystemPrompt.value.trim() || SYSTEM_PRESETS.general;
   }
-  return SYSTEM_PRESETS[preset] || SYSTEM_PRESETS.general;
-}
-function showError(msg) { errorDiv.textContent = msg || ""; errorDiv.style.display = msg ? "block" : "none"; }
-function addMessage(role, content) {
-  const div = document.createElement('div');
-  div.className = 'message95 ' + role;
-  div.innerHTML = renderWithHighlight(content.replace(/\n/g, '<br>'));
-  messagesDiv.appendChild(div);
-  div.querySelectorAll('pre code').forEach((block) => hljs.highlightElement(block));
   messagesDiv.scrollTop = messagesDiv.scrollHeight;
-  return div;
 }
-function showLoading() { chatForm.querySelector('button[type="submit"]').disabled = true; isAITyping = true; }
-function hideLoading() { chatForm.querySelector('button[type="submit"]').disabled = false; isAITyping = false; }
-function extractCode(text) {
-  const codeBlockRegex = /```(?:\w+)?\s*\n([\s\S]*?)```/g;
-  let lastCode = null, match;
-  while ((match = codeBlockRegex.exec(text)) !== null) lastCode = match[1].trim();
-  return lastCode;
 }
-function calculatePayloadCharCount(messages) {
-  let count = 0;
-  for (const msg of messages) {
-    if (msg.content && typeof msg.content === 'string') count += msg.content.length;
-    if (msg.content && Array.isArray(msg.content)) {
-      for (const part of msg.content) {
-        if (part.text) count += part.text.length;
-      }
-    }
-  }
-  return count;
 }
-function showContextSaveArea(show, code = null, goal = '') {
-  if (show) {
-    savedCodeDisplay.textContent = code !== null ? code : 'ยังไม่พบโค้ดในข้อความ AI ล่าสุด';
-    if (goal !== undefined) goalInput.value = goal;
-    contextSaveArea.style.display = 'block';
-  } else {
-    contextSaveArea.style.display = 'none';
-    warningMessage.textContent = '';
-  }
 }
-function clearChat() {
-  chatHistory = [];
-  messagesDiv.innerHTML = '<div class="message95 ai">สวัสดี! AI Chat สไตล์ Win95 Enhanced พร้อมใช้ 🎉<br>รองรับหลาย AI Provider และมีระบบ preset ใหม่!</div>';
-  latestCodeContext = null;
-  showContextSaveArea(false, null, goalInput.value);
-  showError('');
 }
-// --- Provider Change
-providerSelect.addEventListener('change', function() {
-  setModelOptions(getProviderKey());
-  setApiKeyLabel(getProviderKey());
-  loadApiKey(getProviderKey());
-  showError('');
-});
-// --- Model Change
-modelSelect.addEventListener('change', function() {
-  saveModel(getProviderKey(), getModelValue());
-});
-// --- System Preset Change
-systemPresetSelect.addEventListener('change', function() {
-  const preset = systemPresetSelect.value;
-  saveSystemPreset(preset);
-  if (preset === 'custom') {
-    customSystemPrompt.style.display = 'inline-block';
-    customSystemPrompt.focus();
   } else {
-    customSystemPrompt.style.display = 'none';
   }
 });
-customSystemPrompt.addEventListener('input', function() {
-  localStorage.setItem("ai95customPrompt", this.value);
 });
-// --- Initialize
-setModelOptions(getProviderKey());
-setApiKeyLabel(getProviderKey());
-loadApiKey(getProviderKey());
-loadSystemPreset();
-// --- API Key Save
-confirmApiKeyBtn.addEventListener('click', function() {
-  const key = getApiKey();
-  if (!key) {
-    apiKeyStatus.textContent = '';
-    showError("กรุณาใส่ API Key ก่อนกดบันทึก");
-    return;
-  }
-  saveApiKey(getProviderKey(), key);
-  showError("");
 });
-apiKeyInput.addEventListener('input', ()=>apiKeyStatus.textContent='');
-// --- Anthropic API (Messages format)
-async function callAnthropicAPI(messages) {
-  const response = await fetch(PROVIDERS.anthropic.endpoint, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'x-api-key': getApiKey(),
-      'anthropic-version': '2023-06-01'
-    },
-    body: JSON.stringify({
-      model: getModelValue(),
-      max_tokens: 4096,
-      system: getCurrentSystemPrompt(),
-      messages: messages
-    })
-  });
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`Anthropic API Error: ${response.status} - ${error}`);
-  }
-  const data = await response.json();
-  return data.content[0].text;
 }
-// --- Ollama API
-async function callOllamaAPI(messages) {
-  const response = await fetch(PROVIDERS.ollama.endpoint, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      model: getModelValue(),
-      messages: [
-        { role: 'system', content: getCurrentSystemPrompt() },
-        ...messages
-      ],
-      stream: true
-    })
-  });
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`Ollama API Error: ${response.status} - ${error}`);
   }
-  return response;
 }
-// --- HuggingFace API
-async function callHuggingFaceAPI(messages) {
-  const modelName = getModelValue();
-  const lastMessage = messages[messages.length - 1];
-  const response = await fetch(`${PROVIDERS.huggingface.endpoint}/${modelName}`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${getApiKey()}`
-    },
-    body: JSON.stringify({
-      inputs: lastMessage.content,
-      parameters: {
-        max_length: 2048,
-        temperature: 0.7
-      }
-    })
   });
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`HuggingFace API Error: ${response.status} - ${error}`);
-  }
-  const data = await response.json();
-  return data[0]?.generated_text || "ไม่สามารถสร้างคำตอบได้";
 }
-// --- Streaming API (xAI/OpenAI/Groq)
-async function callStreamingAPI(messages) {
-  const provider = PROVIDERS[getProviderKey()];
-  const response = await fetch(provider.endpoint, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${getApiKey()}`
-    },
-    body: JSON.stringify({
-      model: getModelValue(),
-      messages: [
-        { role: 'system', content: getCurrentSystemPrompt() },
-        ...messages
-      ],
-      stream: true,
-      max_tokens: 4096
-    })
   });
-  if (!response.ok) {
-    const error = await response.text();
-    throw new Error(`${provider.name} API Error: ${response.status} - ${error}`);
   }
-  return response;
-}
-// --- File upload handling
-fileInput.addEventListener('change', handleFileSelect);
-function handleFileSelect(event) {
-  const files = Array.from(event.target.files);
-  attachedFiles = [];
-  files.forEach(file => {
-    if (file.size > 5 * 1024 * 1024) { // 5MB limit
-      showError(`ไฟล์ ${file.name} มีขนาดใหญ่เกิน 5MB`);
-      return;
     }
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      attachedFiles.push({
-        name: file.name,
-        type: file.type,
-        content: e.target.result
-      });
-    };
-    if (file.type.startsWith('image/')) {
-      reader.readAsDataURL(file);
     } else {
-      reader.readAsText(file);
     }
-  });
-  if (files.length > 0) {
-    fileNameSpan.textContent = files.length === 1 ? files[0].name : `${files.length} ไฟล์`;
-  } else {
-    fileNameSpan.textContent = '';
   }
-}
-// --- Drag and drop
-document.addEventListener('dragover', (e) => {
-  e.preventDefault();
-  dropzone.style.display = 'block';
-});
-document.addEventListener('dragleave', (e) => {
-  if (!e.relatedTarget || !dropzone.contains(e.relatedTarget)) {
-    dropzone.style.display = 'none';
   }
-});
-dropzone.addEventListener('drop', (e) => {
-  e.preventDefault();
-  dropzone.style.display = 'none';
-  const files = Array.from(e.dataTransfer.files);
-  const mockEvent = { target: { files: files } };
-  handleFileSelect(mockEvent);
-});
-// --- Context save functionality
-confirmSaveBtn.addEventListener('click', function() {
-  const code = savedCodeDisplay.textContent;
-  const goal = goalInput.value.trim();
-  if (code === 'ยังไม่พบโค้ดในข้อความ AI ล่าสุด' || !code) {
-    showError("ไม่พบโค้ดที่จะบันทึก");
-    return;
   }
-  savedCodeContext = code;
-  savedGoal = goal;
-  clearChat();
-  if (savedCodeContext && savedGoal) {
-    addMessage('ai', `Context ถูกบันทึกแล้ว!\n\n**เป้าหมาย:** ${savedGoal}\n\n**โค้ดล่าสุด:**\n\`\`\`\n${savedCodeContext}\n\`\`\`\n\nพร้อมรับคำถามหรือคำสั่งเพิ่มเติม!`);
   }
-});
-// --- Main chat submission
-chatForm.addEventListener('submit', async function(e) {
-  e.preventDefault();
-  const message = userInput.value.trim();
-  if (!message && attachedFiles.length === 0) return;
-  const providerKey = getProviderKey();
-  if (providerKey !== 'ollama' && !getApiKey()) {
-    showError("กรุณาใส่ API Key ก่อนส่งข้อความ");
-    return;
   }
-  if (isAITyping) return;
-  showError('');
-  let userMessage = message;
-  // Add file contents to message
-  if (attachedFiles.length > 0) {
-    userMessage += '\n\n--- ไฟล์ที่แนบ ---\n';
-    attachedFiles.forEach(file => {
-      userMessage += `\n**${file.name}:**\n`;
-      if (file.type.startsWith('image/')) {
-        userMessage += `[รูปภาพ: ${file.type}]\n`;
-      } else {
-        userMessage += `${file.content}\n`;
       }
-    });
-    // Clear attachments
-    attachedFiles = [];
-    fileNameSpan.textContent = '';
-    fileInput.value = '';
   }
-  // Add saved context if available
-  if (savedCodeContext && savedGoal) {
-    userMessage = `**Context ที่บันทึกไว้:**\nเป้าหมาย: ${savedGoal}\nโค้ดล่าสุด:\n\`\`\`\n${savedCodeContext}\n\`\`\`\n\n**คำถาม/คำสั่งใหม่:**\n${userMessage}`;
-    savedCodeContext = null;
-    savedGoal = null;
   }
-  addMessage('user', message);
-  userInput.value = '';
-  showLoading();
-  const currentMessage = { role: 'user', content: userMessage };
-  chatHistory.push(currentMessage);
-  // Check payload size
-  const payloadSize = calculatePayloadCharCount(chatHistory);
-  if (payloadSize > PAYLOAD_CHAR_WARNING_THRESHOLD) {
-    const newCode = extractCode(chatHistory[chatHistory.length - 1]?.content || '');
-    if (newCode) latestCodeContext = newCode;
-    warningMessage.textContent = `⚠️ ข้อความยาวเกิน ${PAYLOAD_CHAR_WARNING_THRESHOLD} ตัวอักษร (ปัจจุบัน: ${payloadSize})`;
-    showContextSaveArea(true, latestCodeContext);
-    hideLoading();
-    return;
-  }
-  try {
-    let aiResponse = '';
-    if (providerKey === 'anthropic') {
-      aiResponse = await callAnthropicAPI(chatHistory);
-      const aiDiv = addMessage('ai', aiResponse);
-      // Extract code from AI response
-      const code = extractCode(aiResponse);
-      if (code) latestCodeContext = code;
-    } else if (providerKey === 'huggingface') {
-      aiResponse = await callHuggingFaceAPI(chatHistory);
-      const aiDiv = addMessage('ai', aiResponse);
-      // Extract code from AI response
-      const code = extractCode(aiResponse);
-      if (code) latestCodeContext = code;
-    } else {
-      // Streaming response for other providers
-      const response = providerKey === 'ollama' ?
-        await callOllamaAPI(chatHistory) :
-        await callStreamingAPI(chatHistory);
-      const aiDiv = addMessage('ai', '');
       const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let buffer = '';
       let fullResponse = '';
       while (true) {
-        const { value, done } = await reader.read();
         if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split('\n');
-        buffer = lines.pop() || '';
-        for (const line of lines) {
-          if (providerKey === 'ollama') {
-            // Ollama format
             try {
-              const parsed = JSON.parse(line);
-              const delta = parsed.message?.content || '';
-              if (delta) {
-                fullResponse += delta;
-                aiDiv.innerHTML = renderWithHighlight(fullResponse.replace(/\n/g, '<br>'));
-                aiDiv.querySelectorAll('pre code').forEach(block => hljs.highlightElement(block));
-                messagesDiv.scrollTop = messagesDiv.scrollHeight;
               }
             } catch (e) {
-              // Skip malformed JSON
             }
-          } else {
-            // OpenAI-compatible format
             if (line.startsWith('data: ')) {
-              const data = line.slice(6).trim();
-              if (data === '[DONE]') continue;
-              try {
-                const parsed = JSON.parse(data);
-                const delta = parsed.choices?.[0]?.delta?.content || '';
-                if (delta) {
-                  fullResponse += delta;
-                  aiDiv.innerHTML = renderWithHighlight(fullResponse.replace(/\n/g, '<br>'));
-                  aiDiv.querySelectorAll('pre code').forEach(block => hljs.highlightElement(block));
-                  messagesDiv.scrollTop = messagesDiv.scrollHeight;
                 }
-              } catch (e) {
-                // Skip malformed JSON
               }
             }
           }
         }
       }
-      aiResponse = fullResponse;
-      // Extract code from AI response
-      const code = extractCode(aiResponse);
-      if (code) latestCodeContext = code;
     }
-    chatHistory.push({ role: 'assistant', content: aiResponse });
   } catch (error) {
-    console.error('API Error:', error);
-    showError(error.message);
-    chatHistory.pop(); // Remove failed user message
   } finally {
-    hideLoading();
-  }
-});
-// --- Initialize
-window.addEventListener('load', function() {
-  userInput.focus();
-  // Auto-resize input
-  userInput.addEventListener('input', function() {
-    this.style.height = 'auto';
-    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
-  });
-});
-// --- Keyboard shortcuts
-document.addEventListener('keydown', function(e) {
-  if (e.key === 'F11') {
-    e.preventDefault();
-    maximizeBtn.click();
-  }
-  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-    chatForm.dispatchEvent(new Event('submit'));
   }
 });
 </script>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>AI Chat - Win95 Enhanced Multi-Modal</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs.min.css">
   <style>
       border: 2px inset #808080;
       background: #c0c0c0;
     }
+    .settings95 button:focus { outline: 1px dotted #fff; }
     .settings95 .api-status {
       font-size: 0.95em;
       color: #008000;
     }
     .message95.ai { align-self: flex-start; background: #fffffe; }
     .message95.user { align-self: flex-end; background: #c0e0ff; }
+    .message95 .image-preview { max-width: 200px; margin: 8px 0; border: 2px inset #808080; }
     .message95 pre { background: #fff; border: 2px inset #808080; padding: 9px 5px 15px 5px; position: relative; white-space: pre-wrap; word-break: break-all; margin-bottom: 10px; margin-top: 7px; overflow-x: auto; }
     .code-tools { position: absolute; right: 7px; top: 5px; z-index: 2; display: flex; gap: 3px; }
     .code-tools button { font-size: 0.95em; padding: 1.5px 7px; background: #e0e0e0; border: 2px outset #fff; border-radius: 0; cursor: pointer; color: #222; }
     }
     #contextSaveArea95 button:active { background: #c0c0c0; border: 2px inset #808080; }
     #contextSaveArea95 button:disabled { background: #e0e0e0; color: #bbb; border: 2px outset #b0b0b0; }
+    .model-pair-selection {
+      background: #f8f8f8;
+      border-bottom: 2px solid #808080;
+      padding: 8px 12px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      font-size: 0.95em;
+      gap: 8px;
+    }
+    .model-pair-selection label {
+      margin-right: 4px;
+      font-weight: bold;
+      color: #444;
+    }
+    .model-pair-selection select {
+      font-family: inherit;
+      font-size: 1em;
+      background: #fff;
+      border: 2px inset #808080;
+      padding: 2px 6px;
+      outline: none;
+      min-width: 120px;
+      max-width: 180px;
+    }
     @media (max-width: 650px) {
       .win95window {
         min-width: 0;
         gap: 4px;
         padding: 6px 4px;
       }
+      .model-pair-selection {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        padding: 6px 4px;
+      }
       .input-area95 {
         flex-direction: column;
         gap: 8px;
       <span style="display:inline-block;width:18px;height:18px;background:#fff;border:1px solid #808080;margin-right:7px;box-shadow:inset 2px 2px #c0c0c0;">
         <span style="display:inline-block;width:9px;height:9px;background:#008080;margin:4px 0 0 4px;vertical-align:middle;"></span>
       </span>
+      AI Chat - Win95 Multi-Modal Enhanced
     </div>
     <div class="win95controls">
       <button id="maximizeBtn" title="เต็มจอ">&#9633;</button>
         <option value="openai">OpenAI</option>
         <option value="ollama">Ollama (Local)</option>
         <option value="huggingface">HuggingFace</option>
+        <option value="google">Google (Gemini)</option>
       </select>
       <label for="modelSelect95">โมเดล:</label>
       <select id="modelSelect95"></select>
       <span class="api-status" id="apiKeyStatus95"></span>
     </form>
+    <div class="model-pair-selection" id="multiModalSelection" style="display:none;">
+      <label for="visionModelSelect95">Vision Model:</label>
+      <select id="visionModelSelect95">
+        <option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen2.5-Coder 32B</option>
+        <option value="Qwen/Qwen2-VL-72B-Instruct">Qwen2-VL 72B</option>
+        <option value="microsoft/Florence-2-large">Florence-2 Large</option>
+        <option value="llava-hf/llava-1.5-7b-hf">LLaVA 1.5 7B (HF)</option>
+      </select>
+      <label for="ocrModelSelect95">OCR Model:</label>
+      <select id="ocrModelSelect95">
+        <option value="scb10x/typhoon-v1.5x-72b-instruct">Typhoon OCR 7B</option>
+        <option value="microsoft/trocr-base-printed">TrOCR Base</option>
+        <option value="PaddlePaddle/PaddleOCR">PaddleOCR</option>
+      </select>
+    </div>
     <div class="system-preset-area">
       <label for="systemPresetSelect95">ระบบ:</label>
       <select id="systemPresetSelect95">
         <option value="general">แชทธรรมดา</option>
         <option value="code-full">ส่งโค้ดเต็ม</option>
         <option value="code-function">ส่งเฉพาะฟังก์ชัน</option>
+        <option value="multimodal">Multi-Modal Analysis</option>
         <option value="custom">กำหนดเอง</option>
       </select>
       <input type="text" id="customSystemPrompt95" placeholder="ใส่ System Prompt ของคุณ" style="display:none; flex: 1; min-width: 200px;">
       <button id="confirmSaveBtn95">ยืนยัน context และเริ่มแชทใหม่</button>
     </div>
     <div class="chat-container95" id="messagesDiv95">
+      <div class="message95 ai">สวัสดี! AI Chat Multi-Modal Enhanced พร้อมใช้ 🎉<br>รองรับการวิเคราะห์รูปภาพและ OCR ด้วย Qwen2.5-Coder + Typhoon OCR!</div>
     </div>
     <form id="chatForm95" class="input-area95" autocomplete="off">
       <button type="button" class="file-attach-btn" id="fileAttachBtn" title="แนบไฟล์">
+        📎<input type="file" id="fileInput" multiple accept="image/*,text/*,.pdf,.docx,.xlsx">
       </button>
       <span class="file-name" id="fileName"></span>
       <input type="text" id="userInput95" placeholder="พิมพ์คำถามหรือข้อความ..." autocomplete="off">
     apiKeyLabel: "Anthropic API Key",
     models: [
       { value: "claude-3-5-sonnet-20241022", label: "Claude-3.5 Sonnet" },
+      { value: "claude-3-haiku-20240307", label: "Claude-3 Haiku" },
       { value: "claude-3-opus-20240229", label: "Claude-3 Opus" },
+      { value: "claude-3-sonnet-20240229", label: "Claude-3 Sonnet" }
     ],
     isStream: false,
+    streamEndpoint: "https://api.anthropic.com/v1/messages",
+    supportsMultiModal: true
   },
   xai: {
     name: "xAI (Grok)",
       { value: "grok-2-1212", label: "Grok-2" },
       { value: "grok-2-mini", label: "Grok-2 Mini" }
     ],
+    isStream: true,
+    supportsMultiModal: true
   },
   groq: {
     name: "Groq",
       { value: "gemma2-9b-it", label: "Gemma-2 9B IT" },
       { value: "gemma-7b-it", label: "Gemma 7B IT" }
     ],
+    isStream: true,
+    supportsMultiModal: false
   },
   openai: {
     name: "OpenAI",
       { value: "o1-preview", label: "o1-preview" },
       { value: "o1-mini", label: "o1-mini" }
     ],
+    isStream: true,
+    supportsMultiModal: true
   },
   ollama: {
     name: "Ollama (Local)",
     endpoint: "http://localhost:11434/api/chat",
     apiKeyLabel: "ไม่ต้องใส่ API Key",
     models: [
+      { value: "llama3.2-vision", label: "Llama 3.2 Vision" },
       { value: "llama3.2", label: "Llama 3.2" },
       { value: "llama3.1", label: "Llama 3.1" },
       { value: "codellama", label: "Code Llama" },
       { value: "mistral", label: "Mistral" },
       { value: "gemma2", label: "Gemma 2" }
     ],
+    isStream: true,
+    supportsMultiModal: true
   },
   huggingface: {
     name: "HuggingFace",
+    endpoint: "https://api-inference.huggingface.co/models/", // Add trailing slash
     apiKeyLabel: "HuggingFace API Key",
     models: [
+      { value: "Qwen/Qwen2.5-Coder-32B-Instruct", label: "Qwen2.5-Coder 32B (Text/Code)" },
+      { value: "Qwen/Qwen2-VL-72B-Instruct", label: "Qwen2-VL 72B (Vision)" },
+      { value: "scb10x/typhoon-v1.5x-72b-instruct", label: "Typhoon 72B (Text/Code)" },
+      { value: "microsoft/Florence-2-large", label: "Florence-2 Large (Vision)" },
+      { value: "llava-hf/llava-1.5-7b-hf", label: "LLaVA 1.5 7B (Vision)" },
+      { value: "microsoft/trocr-base-printed", label: "TrOCR Base (OCR)" },
+      { value: "google/t5-base-qa", label: "T5 Base QA (Text)" } // Example, more models can be added
+    ],
+    isStream: false, // HuggingFace inference API usually doesn't stream by default
+    supportsMultiModal: true,
+    specificModelEndpoints: { // For multi-modal HF models, we might need specific endpoints
+      "Qwen/Qwen2-VL-72B-Instruct": "https://api-inference.huggingface.co/models/Qwen/Qwen2-VL-72B-Instruct",
+      "microsoft/Florence-2-large": "https://api-inference.huggingface.co/models/microsoft/Florence-2-large",
+      "llava-hf/llava-1.5-7b-hf": "https://api-inference.huggingface.co/models/llava-hf/llava-1.5-7b-hf",
+      "microsoft/trocr-base-printed": "https://api-inference.huggingface.co/models/microsoft/trocr-base-printed",
+      "PaddlePaddle/PaddleOCR": "https://api-inference.huggingface.co/models/PaddlePaddle/PaddleOCR", // Placeholder, usually requires dedicated setup or API
+    }
+  },
+  google: {
+    name: "Google (Gemini)",
+    endpoint: "https://generativelanguage.googleapis.com/v1beta/models/",
+    apiKeyLabel: "Google API Key",
+    models: [
+      { value: "gemini-pro", label: "Gemini Pro" },
+      { value: "gemini-pro-vision", label: "Gemini Pro Vision" },
+      { value: "gemini-1.5-pro-latest", label: "Gemini 1.5 Pro" },
+      { value: "gemini-1.5-flash-latest", label: "Gemini 1.5 Flash" }
     ],
+    isStream: true,
+    supportsMultiModal: true
   }
 };
+const providerSelect = document.getElementById('providerSelect95');
+const modelSelect = document.getElementById('modelSelect95');
+const apiKeyInput = document.getElementById('apiKey95');
 const confirmApiKeyBtn = document.getElementById('confirmApiKeyBtn95');
+const apiKeyStatus = document.getElementById('apiKeyStatus95');
+const messagesDiv = document.getElementById('messagesDiv95');
+const userInput = document.getElementById('userInput95');
+const chatForm = document.getElementById('chatForm95');
+const errorMessageDiv = document.getElementById('errorMessage95');
 const systemPresetSelect = document.getElementById('systemPresetSelect95');
+const customSystemPromptInput = document.getElementById('customSystemPrompt95');
+const contextSaveArea = document.getElementById('contextSaveArea95');
 const savedCodeDisplay = document.getElementById('savedCodeDisplay95');
+const goalInput = document.getElementById('goalInput95');
+const confirmSaveBtn = document.getElementById('confirmSaveBtn95');
+const fileInput = document.getElementById('fileInput');
+const fileNameSpan = document.getElementById('fileName');
+const dropzone = document.getElementById('dropzone95');
+const multiModalSelection = document.getElementById('multiModalSelection');
+const visionModelSelect = document.getElementById('visionModelSelect95');
+const ocrModelSelect = document.getElementById('ocrModelSelect95');
+let currentApiKey = '';
+let conversationHistory = [];
+let attachedFiles = []; // Stores file objects
+let lastDetectedCode = '';
+let savedGoal = '';
+// --- Save/Load API Key from Local Storage ---
+function saveApiKey(provider, key) {
+  localStorage.setItem(`apiKey_${provider}`, key);
+  updateApiKeyStatus(true);
+}
+function loadApiKey(provider) {
+  return localStorage.getItem(`apiKey_${provider}`) || '';
 }
+function updateApiKeyStatus(isSuccess) {
+  if (isSuccess) {
+    apiKeyStatus.textContent = "บันทึกแล้ว!";
+    apiKeyStatus.style.color = '#008000';
   } else {
+    apiKeyStatus.textContent = "ไม่ได้บันทึก";
+    apiKeyStatus.style.color = '#b00';
   }
+  setTimeout(() => apiKeyStatus.textContent = '', 3000);
 }
+confirmApiKeyBtn.addEventListener('click', () => {
+  const provider = providerSelect.value;
+  currentApiKey = apiKeyInput.value.trim();
+  saveApiKey(provider, currentApiKey);
+});
+// --- Initialize Models and API Key on Load ---
+function populateModels() {
+  const selectedProvider = providerSelect.value;
+  const providerInfo = PROVIDERS[selectedProvider];
+  modelSelect.innerHTML = ''; // Clear existing options
+  if (providerInfo && providerInfo.models) {
+    providerInfo.models.forEach(model => {
+      const option = document.createElement('option');
+      option.value = model.value;
+      option.textContent = model.label;
+      modelSelect.appendChild(option);
+    });
   }
+  // Update API Key input based on selected provider
+  apiKeyInput.value = loadApiKey(selectedProvider);
+  currentApiKey = apiKeyInput.value.trim();
+  apiKeyInput.placeholder = PROVIDERS[selectedProvider].apiKeyLabel;
+  // Show/hide multi-modal model selection
+  if (providerInfo.supportsMultiModal) {
+    multiModalSelection.style.display = 'flex';
+    // Populate vision and OCR models specific to HuggingFace if selected
+    if (selectedProvider === 'huggingface') {
+      visionModelSelect.innerHTML = '';
+      ocrModelSelect.innerHTML = '';
+      PROVIDERS.huggingface.models.forEach(model => {
+        if (model.label.includes('(Vision)')) {
+          const option = document.createElement('option');
+          option.value = model.value;
+          option.textContent = model.label;
+          visionModelSelect.appendChild(option);
+        } else if (model.label.includes('(OCR)')) {
+          const option = document.createElement('option');
+          option.value = model.value;
+          option.textContent = model.label;
+          ocrModelSelect.appendChild(option);
+        }
+      });
+      // Add a "None" option for OCR if no OCR model is needed for a specific task
+      const noneOcrOption = document.createElement('option');
+      noneOcrOption.value = 'none';
+      noneOcrOption.textContent = 'None (ไม่ใช้ OCR)';
+      ocrModelSelect.appendChild(noneOcrOption);
+    } else {
+        // For other providers, ensure they have default options or are handled
+        // For simplicity, we can default to specific models or clear them if not relevant
+        // This part might need further refinement based on actual multi-modal APIs
+        visionModelSelect.innerHTML = `
+          <option value="default_vision">Default Vision Model</option>
+        `;
+        ocrModelSelect.innerHTML = `
+          <option value="default_ocr">Default OCR Model</option>
+          <option value="none">None (ไม่ใช้ OCR)</option>
+        `;
+    }
   } else {
+    multiModalSelection.style.display = 'none';
   }
 }
+providerSelect.addEventListener('change', populateModels);
+document.addEventListener('DOMContentLoaded', populateModels);
+// --- System Preset and Custom Prompt ---
+systemPresetSelect.addEventListener('change', (event) => {
+  if (event.target.value === 'custom') {
+    customSystemPromptInput.style.display = 'block';
+  } else {
+    customSystemPromptInput.style.display = 'none';
+  }
+});
+// --- Chat Message Display ---
+function addMessage(text, sender, imageUrl = null, codeLanguage = null) {
+  const messageDiv = document.createElement('div');
+  messageDiv.classList.add('message95', sender);
+  if (imageUrl) {
+    const img = document.createElement('img');
+    img.src = imageUrl;
+    img.classList.add('image-preview');
+    messageDiv.appendChild(img);
   }
+  // Check for code blocks and apply highlighting
+  const codeBlockRegex = /```(\w+)?\n([\s\S]+?)\n```/g;
+  let lastIndex = 0;
+  let match;
+  let contentHtml = '';
+  while ((match = codeBlockRegex.exec(text)) !== null) {
+    // Add text before the code block
+    if (match.index > lastIndex) {
+      contentHtml += formatText(text.substring(lastIndex, match.index));
+    }
+    const language = match[1] || 'plaintext';
+    const code = match[2];
+    // Store the last detected code if it's the latest message and from AI
+    if (sender === 'ai') {
+      lastDetectedCode = code;
+      savedCodeDisplay.textContent = code;
+    }
+    contentHtml += `<pre><div class="code-tools">
+      <button onclick="copyCode(this)">คัดลอก</button>
+      <button onclick="pasteCodeToInput(this)" title="วางโค้ดลงในช่องพิมพ์">ส่งต่อ</button>
+    </div><code class="language-${language}">${hljs.highlight(code, {language: language, ignoreIllegals: true}).value}</code></pre>`;
+    lastIndex = codeBlockRegex.lastIndex;
   }
+  // Add any remaining text after the last code block
+  if (lastIndex < text.length) {
+    contentHtml += formatText(text.substring(lastIndex));
+  }
+  messageDiv.innerHTML += contentHtml;
+  messagesDiv.appendChild(messageDiv);
   messagesDiv.scrollTop = messagesDiv.scrollHeight;
 }
+function formatText(text) {
+    // Basic formatting for bold, italic, and links outside code blocks
+    let formattedText = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); // Bold
+    formattedText = formattedText.replace(/\*(.*?)\*/g, '<em>$1</em>');     // Italic
+    formattedText = formattedText.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>'); // Links
+    return formattedText;
 }
+function copyCode(button) {
+  const codeElement = button.closest('pre').querySelector('code');
+  navigator.clipboard.writeText(codeElement.textContent);
+  button.textContent = 'คัดลอกแล้ว!';
+  setTimeout(() => button.textContent = 'คัดลอก', 2000);
 }
+function pasteCodeToInput(button) {
+  const codeElement = button.closest('pre').querySelector('code');
+  userInput.value = codeElement.textContent;
+  userInput.focus();
 }
+// --- Error Handling ---
+function displayError(message) {
+  errorMessageDiv.textContent = `ข้อผิดพลาด: ${message}`;
+  errorMessageDiv.style.display = 'block';
+  setTimeout(() => {
+    errorMessageDiv.style.display = 'none';
+    errorMessageDiv.textContent = '';
+  }, 5000);
 }
+// --- Context Saving Feature ---
+confirmSaveBtn.addEventListener('click', () => {
+  const goal = goalInput.value.trim();
+  if (lastDetectedCode || goal) {
+    savedGoal = goal;
+    conversationHistory = [
+      { role: 'system', content: `ผู้ใช้กำลังทำงานกับโค้ดต่อไปนี้:\n\`\`\`\n${lastDetectedCode}\n\`\`\`\nเป้าหมายคือ: ${savedGoal || 'ไม่มีเป้าหมายเฉพาะเจาะจง'}` }
+    ];
+    addMessage("Context ถูกบันทึกและเริ่มต้นการแชทใหม่แล้ว!", "ai");
+    contextSaveArea.style.display = 'none';
+    savedCodeDisplay.textContent = '';
+    goalInput.value = '';
+    lastDetectedCode = '';
   } else {
+    displayError("ไม่มีโค้ดหรือเป้าหมายให้บันทึก");
   }
 });
+// --- Drag and Drop for Files ---
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+  chatForm.addEventListener(eventName, preventDefaults, false);
 });
+function preventDefaults(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+['dragenter', 'dragover'].forEach(eventName => {
+  chatForm.addEventListener(eventName, () => dropzone.style.display = 'flex', false);
 });
+['dragleave', 'drop'].forEach(eventName => {
+  chatForm.addEventListener(eventName, () => dropzone.style.display = 'none', false);
+});
+dropzone.addEventListener('drop', handleDrop, false);
+function handleDrop(e) {
+  const dt = e.dataTransfer;
+  const files = dt.files;
+  handleFiles(files);
 }
+fileInput.addEventListener('change', (e) => {
+  handleFiles(e.target.files);
+});
+function handleFiles(files) {
+  attachedFiles = [];
+  fileNameSpan.textContent = '';
+  if (files.length > 0) {
+    for (const file of files) {
+      if (file.type.startsWith('image/')) {
+        attachedFiles.push({ type: 'image', file: file });
+      } else if (file.type.startsWith('text/') || file.name.endsWith('.txt') || file.name.endsWith('.md') || file.name.endsWith('.html') || file.name.endsWith('.css') || file.name.endsWith('.js')) {
+        attachedFiles.push({ type: 'text', file: file });
+      } else if (file.type === 'application/pdf' || file.name.endsWith('.pdf')) {
+        attachedFiles.push({ type: 'pdf', file: file }); // Handle PDF
+      } else if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.name.endsWith('.docx')) {
+        attachedFiles.push({ type: 'docx', file: file }); // Handle DOCX
+      } else if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx')) {
+        attachedFiles.push({ type: 'xlsx', file: file }); // Handle XLSX
+      } else {
+        displayError(`ไม่รองรับไฟล์ประเภท: ${file.type}.`);
+        return;
+      }
+    }
+    fileNameSpan.textContent = attachedFiles.map(f => f.file.name).join(', ');
   }
 }
+async function readFileAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result.split(',')[1]); // Get base64 string
+    reader.onerror = error => reject(error);
+    reader.readAsDataURL(file);
   });
 }
+async function readFileAsText(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+    reader.readAsText(file);
   });
+}
+// --- Main Chat Logic ---
+chatForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const userMessage = userInput.value.trim();
+  if (!userMessage && attachedFiles.length === 0) {
+    displayError("กรุณาพิมพ์ข้อความหรือแนบไฟล์");
+    return;
   }
+  const selectedProvider = providerSelect.value;
+  const selectedModel = modelSelect.value;
+  const providerInfo = PROVIDERS[selectedProvider];
+  const apiKey = currentApiKey;
+  const systemPreset = systemPresetSelect.value;
+  let systemPrompt = '';
+  if (systemPreset === 'custom') {
+    systemPrompt = customSystemPromptInput.value.trim();
+  } else if (systemPreset === 'code-full') {
+    if (lastDetectedCode) {
+      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ โค้ดทั้งหมดจะต้องถูกเขียนใน code block เดียว เพื่อเป็นไฟล์โค้ดที่สมบูรณ์และพร้อมใช้งาน โดยไม่มีการแยกโค้ด HTML และ JavaScript ในการตอบกลับของคุณ ให้เอาต์พุตเฉพาะโค้ด HTML โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต ผู้ใช้ได้ให้โค้ด HTML/CSS/JS ล่าสุดแก่คุณแล้ว และต้องการให้คุณช่วยเหลือในการพัฒนาต่อ. โค้ดปัจจุบันคือ: \n\`\`\`html\n${lastDetectedCode}\n\`\`\`\nเป้าหมายของโค้ดนี้คือ: ${savedGoal || 'ไม่ระบุ'}.`;
+    } else {
+      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ โค้ดทั้งหมดจะต้องถูกเขียนใน code block เดียว เพื่อเป็นไฟล์โค้ดที่สมบูรณ์และพร้อมใช้งาน โดยไม่มีการแยกโค้ด HTML และ JavaScript ในการตอบกลับของคุณ ให้เอาต์พุตเฉพาะโค้ด HTML โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต`;
     }
+  } else if (systemPreset === 'code-function') {
+    if (lastDetectedCode) {
+      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ���ด้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ สำหรับการตอบกลับที่เกี่ยวข้องกับโค้ด ให้คุณตอบกลับเฉพาะโค้ดที่เกี่ยวข้องกับฟังก์ชันหรือส่วนที่แก้ไขเท่านั้น หากคุณให้ไฟล์โค้ดที่สมบูรณ์ คุณจะต้องตอบกลับเฉพาะโค้ด HTML เท่านั้น โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต ผู้ใช้ได้ให้โค้ด HTML/CSS/JS ล่าสุดแก่คุณแล้ว และต้องการให้คุณช่วยเหลือในการพัฒนาต่อ. โค้ดปัจจุบันคือ: \n\`\`\`html\n${lastDetectedCode}\n\`\`\`\nเป้าหมายของโค้ดนี้คือ: ${savedGoal || 'ไม่ระบุ'}.`;
     } else {
+      systemPrompt = `คุณคือผู้ช่วยพัฒนาเว็บที่มีความสามารถสูงในการเขียนโค้ดและสร้าง artifact ได้อย่างสมบูรณ์แบบตามคำสั่งของผู้ใช้ คุณจะทำงานร่วมกับผู้ใช้เพื่อแก้ไขและปรับปรุง artifact ที่มีอยู่ สำหรับการตอบกลับที่เกี่ยวข้องกับโค้ด ให้คุณตอบกลับเฉพาะโค้ดที่เกี่ยวข้องกับฟังก์ชันหรือส่วนที่แก้ไขเท่านั้น หากคุณให้ไฟล์โค้ดที่สมบูรณ์ คุณจะต้องตอบกลับเฉพาะโค้ด HTML เท่านั้น โดยไม่มีข้อความอธิบายใดๆ เพิ่มเติม เมื่อใดก็ตามที่ได้รับคำสั่ง คุณจะตรวจสอบการรันโค้ดอีกครั้งเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดในการเอาต์พุต`;
     }
+  } else if (systemPreset === 'multimodal') {
+    systemPrompt = `คุณคือผู้ช่วย Multi-Modal AI ที่เชี่ยวชาญในการวิเคราะห์รูปภาพ, ข้อความ, และเอกสาร. คุณสามารถตอบคำถามเกี่ยวกับเนื้อหาในไฟล์ที่แนบมา, สรุปข้อมูล, หรือดึงข้อความจากรูปภาพโดยใช้ OCR. เมื่อมีการร้องขอวิเคราะห์รูปภาพหรือ OCR ให้ใช้ความสามารถเหล่านั้นเพื่อตอบคำถาม. หากมีข้อมูลจากไฟล์แนบหลายประเภท ให้พยายามผสานรวมข้อมูลเหล่านั้นเพื่อการตอบสนองที่ครอบคลุม.`;
+  } else { // general
+    systemPrompt = `คุณคือ AI ผู้ช่วยที่สุภาพและให้ข้อมูลที่เป็นประโยชน์`;
   }
+  // Clear previous error
+  errorMessageDiv.style.display = 'none';
+  if (!apiKey && selectedProvider !== 'ollama') {
+    displayError("กรุณาใส่ API Key ของคุณ");
+    return;
   }
+  let userContent = [];
+  if (userMessage) {
+    userContent.push({ type: 'text', text: userMessage });
+  }
+  for (const fileObj of attachedFiles) {
+    const file = fileObj.file;
+    if (fileObj.type === 'image') {
+      try {
+        const base64 = await readFileAsBase64(file);
+        userContent.push({ type: 'image_url', image_url: { url: `data:${file.type};base64,${base64}` } });
+        addMessage(`แนบรูปภาพ: ${file.name}`, 'user', `data:${file.type};base64,${base64}`);
+      } catch (error) {
+        displayError(`ไม่สามารถอ่านไฟล์รูปภาพได้: ${error.message}`);
+        return;
+      }
+    } else if (fileObj.type === 'text') {
+      try {
+        const textContent = await readFileAsText(file);
+        userContent.push({ type: 'text', text: `เนื้อหาจากไฟล์ ${file.name}:\n\`\`\`\n${textContent}\n\`\`\`` });
+        addMessage(`แนบไฟล์ข้อความ: ${file.name}`, 'user');
+      } catch (error) {
+        displayError(`ไม่สามารถอ่านไฟล์ข้อความได้: ${error.message}`);
+        return;
+      }
+    } else if (fileObj.type === 'pdf' || fileObj.type === 'docx' || fileObj.type === 'xlsx') {
+      // For PDF, DOCX, XLSX, we need to inform the model that we have these files
+      // Actual content extraction would require a backend or a dedicated library
+      userContent.push({ type: 'text', text: `(มีไฟล์ ${fileObj.type.toUpperCase()} แนบมา: ${file.name}. โปรดพิจารณาข้อมูลจากไฟล์นี้ในการตอบกลับ หากต้องการวิเคราะห์เนื้อหา ให้แจ้งฉันเพื่อประมวลผล)` });
+      addMessage(`แนบไฟล์ ${fileObj.type.toUpperCase()}: ${file.name}`, 'user');
+    }
   }
+  if (userContent.length === 0) {
+      displayError("กรุณาพิมพ์ข้อความหรือแนบไฟล์");
+      return;
   }
+  addMessage(userMessage, 'user');
+  userInput.value = '';
+  fileNameSpan.textContent = '';
+  attachedFiles = []; // Clear attached files after sending
+  // Prepare message for API
+  let messages = [];
+  if (systemPrompt) {
+    messages.push({ role: 'system', content: systemPrompt });
   }
+  // Add previous conversation history
+  messages = messages.concat(conversationHistory);
+  // Add current user message
+  if (selectedProvider === 'anthropic' || selectedProvider === 'openai' || selectedProvider === 'xai' || selectedProvider === 'google') {
+    messages.push({ role: 'user', content: userContent });
+  } else if (selectedProvider === 'ollama') {
+    // Ollama's chat endpoint expects content as string for text models
+    // For vision models, it can handle image_data
+    let contentForOllama = [];
+    for (const part of userContent) {
+      if (part.type === 'text') {
+        contentForOllama.push(part.text);
+      } else if (part.type === 'image_url') {
+        const base64 = part.image_url.url.split(',')[1];
+        contentForOllama.push({ type: 'image', image_data: base64 });
       }
+    }
+    messages.push({ role: 'user', content: contentForOllama.join('\n') }); // Concatenate text parts
+  } else if (selectedProvider === 'huggingface') {
+      // HuggingFace has various model types and endpoints.
+      // This is a simplified approach. For actual multi-modal, we'd need separate calls.
+      // For general text models, it expects a single string input.
+      // For vision models, it expects image bytes.
+      // We will handle multi-modal specifically below.
+      messages.push({ role: 'user', content: userContent.filter(p => p.type === 'text').map(p => p.text).join('\n') });
   }
+  let requestBody = {};
+  let url = providerInfo.endpoint;
+  let headers = {
+    'Content-Type': 'application/json',
+  };
+  if (selectedProvider !== 'ollama') { // Ollama doesn't need API key in header
+    headers['Authorization'] = `Bearer ${apiKey}`;
   }
+  // Logic for Multi-Modal HuggingFace calls
+  if (selectedProvider === 'huggingface' && (attachedFiles.some(f => f.type === 'image') || systemPreset === 'multimodal')) {
+    const visionModel = visionModelSelect.value;
+    const ocrModel = ocrModelSelect.value;
+    let imageFile = attachedFiles.find(f => f.type === 'image')?.file;
+    if (!imageFile && systemPreset === 'multimodal') {
+        displayError("โปรดแนบรูปภาพสำหรับการวิเคราะห์ Multi-Modal.");
+        return;
+    }
+    let imageBase64 = null;
+    if (imageFile) {
+        try {
+            imageBase64 = await readFileAsBase64(imageFile);
+        } catch (error) {
+            displayError(`ไม่สามารถอ่านไฟล์รูปภาพได้: ${error.message}`);
+            return;
+        }
+    }
+    let visionAnalysis = '';
+    let ocrText = '';
+    // Step 1: Call Vision Model (if applicable)
+    if (visionModel && visionModel !== 'none' && imageBase64) {
+      const visionEndpoint = PROVIDERS.huggingface.specificModelEndpoints[visionModel] || `${providerInfo.endpoint}${visionModel}`;
+      try {
+        const visionResponse = await fetch(visionEndpoint, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${apiKey}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            inputs: `data:image/jpeg;base64,${imageBase64}`,
+            parameters: { return_full_text: false } // Adjust parameters as needed by model
+          })
+        });
+        if (!visionResponse.ok) {
+          const errorData = await visionResponse.json();
+          throw new Error(`Vision API error: ${visionResponse.statusText} - ${JSON.stringify(errorData)}`);
+        }
+        const visionData = await visionResponse.json();
+        // Parse visionData based on model output format (this is generic)
+        visionAnalysis = `\n[ข้อมูลจาก Vision Model (${visionModel})]:\n${JSON.stringify(visionData, null, 2)}\n`;
+      } catch (error) {
+        displayError(`ข้อผิดพลาดในการวิเคราะห์รูปภาพด้วย ${visionModel}: ${error.message}`);
+        return;
+      }
+    }
+    // Step 2: Call OCR Model (if applicable)
+    if (ocrModel && ocrModel !== 'none' && imageBase64) {
+      const ocrEndpoint = PROVIDERS.huggingface.specificModelEndpoints[ocrModel] || `${providerInfo.endpoint}${ocrModel}`;
+      try {
+        const ocrResponse = await fetch(ocrEndpoint, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${apiKey}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            inputs: `data:image/jpeg;base64,${imageBase64}`
+          })
+        });
+        if (!ocrResponse.ok) {
+          const errorData = await ocrResponse.json();
+          throw new Error(`OCR API error: ${ocrResponse.statusText} - ${JSON.stringify(errorData)}`);
+        }
+        const ocrData = await ocrResponse.json();
+        // Parse OCR data based on model output format (this is generic)
+        ocrText = `\n[ข้อมูลจาก OCR Model (${ocrModel})]:\n${ocrData.extracted_text || JSON.stringify(ocrData, null, 2)}\n`;
+      } catch (error) {
+        displayError(`ข้อผิดพลาดในการทำ OCR ด้วย ${ocrModel}: ${error.message}`);
+        return;
+      }
+    }
+    // Combine vision/OCR results with user's text message
+    let combinedPrompt = userMessage;
+    if (visionAnalysis) combinedPrompt += visionAnalysis;
+    if (ocrText) combinedPrompt += ocrText;
+    // Now send the combined prompt to a text-based model if needed, or just display results
+    // For HuggingFace, if a primary text model is chosen, we'd send to it.
+    // Assuming the main model select should be a text model for combined analysis
+    url = `${providerInfo.endpoint}${selectedModel}`; // Use the primary selected model for text processing
+    requestBody = {
+      inputs: combinedPrompt,
+      parameters: {
+        max_new_tokens: 1000,
+        temperature: 0.7,
+        top_p: 0.9,
+      },
+      options: {
+        use_cache: false // Prevent caching for dynamic inputs
+      }
+    };
+    headers['Content-Type'] = 'application/json'; // Ensure correct content type for JSON body
+  } else if (selectedProvider === 'huggingface') {
+    // Normal text-only HuggingFace request
+    url = `${providerInfo.endpoint}${selectedModel}`;
+    requestBody = {
+      inputs: messages[messages.length - 1].content.filter(p => p.type === 'text').map(p => p.text).join('\n'),
+      parameters: {
+        max_new_tokens: 1000,
+        temperature: 0.7,
+        top_p: 0.9,
+      },
+      options: {
+        use_cache: false
+      }
+    };
+    headers['Content-Type'] = 'application/json';
+  } else if (selectedProvider === 'google') {
+      url += `${selectedModel}:generateContent?key=${apiKey}`;
+      let contents = [];
+      let currentContent = {
+          role: "user",
+          parts: []
+      };
+      for (const part of userContent) {
+          if (part.type === 'text') {
+              currentContent.parts.push({ text: part.text });
+          } else if (part.type === 'image_url') {
+              currentContent.parts.push({
+                  inline_data: {
+                      mime_type: part.image_url.url.split(';')[0].split(':')[1],
+                      data: part.image_url.url.split(',')[1]
+                  }
+              });
+          }
+      }
+      contents.push(currentContent);
+      // Convert history to Gemini format
+      for (let i = 0; i < conversationHistory.length; i++) {
+        const item = conversationHistory[i];
+        if (item.role === 'system') {
+          // Gemini doesn't have a direct 'system' role in chat, often absorbed into initial user prompt or ignored.
+          // For simplicity, we can prepend to the first user message or ignore.
+          // For now, we'll try to add it as a user message that guides the AI.
+          if (i === 0 && item.content) { // Only apply if it's the very first system prompt
+              contents.unshift({
+                  role: "user",
+                  parts: [{ text: item.content }]
+              });
+              contents.unshift({
+                  role: "model",
+                  parts: [{ text: "เข้าใจแล้ว." }]
+              });
+          }
+        } else if (item.role === 'user') {
+          contents.push({ role: "user", parts: [{ text: item.content.text || item.content }] });
+        } else if (item.role === 'assistant') {
+          contents.push({ role: "model", parts: [{ text: item.content }] });
+        }
+      }
+      requestBody = {
+          contents: contents,
+          generationConfig: {
+              maxOutputTokens: 2000,
+              temperature: 0.7,
+              topP: 0.9
+          }
+      };
+      headers['Content-Type'] = 'application/json';
+  } else if (selectedProvider === 'ollama') {
+    requestBody = {
+      model: selectedModel,
+      messages: messages,
+      stream: providerInfo.isStream
+    };
+  } else if (selectedProvider === 'anthropic') {
+    requestBody = {
+      model: selectedModel,
+      messages: messages.map(msg => ({ // Anthropic expects 'user' and 'assistant' roles, 'system' handled by system_prompt
+        role: msg.role === 'system' ? 'user' : msg.role, // Temporarily map system to user for Anthropic's initial context
+        content: msg.content
+      })),
+      max_tokens: 4096,
+      stream: providerInfo.isStream
+    };
+    if (systemPrompt) {
+      requestBody.system = systemPrompt; // Anthropic's dedicated system_prompt field
+    }
+  } else { // OpenAI, Groq, xAI
+    requestBody = {
+      model: selectedModel,
+      messages: messages.map(msg => {
+          if (Array.isArray(msg.content) && selectedProvider === 'openai') {
+              // OpenAI can take array of content parts
+              return { role: msg.role, content: msg.content };
+          } else if (msg.role === 'system') {
+              return { role: 'system', content: msg.content };
+          } else {
+              // For other providers or if content is string, just use text
+              return { role: msg.role, content: typeof msg.content === 'string' ? msg.content : (msg.content.text || msg.content.map(p => p.text).join('\n')) };
+          }
+      }),
+      stream: providerInfo.isStream
+    };
+  }
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify(requestBody)
+    });
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(`API Error: ${response.status} - ${JSON.stringify(errorData)}`);
+    }
+    if (providerInfo.isStream && selectedProvider !== 'google') { // Handle streaming for OpenAI, Groq, xAI, Ollama
       const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
       let fullResponse = '';
+      let assistantMessageDiv = null;
       while (true) {
+        const { done, value } = await reader.read();
         if (done) break;
+        const chunk = decoder.decode(value);
+        if (selectedProvider === 'ollama') {
+          // Ollama can send multiple JSON objects in one chunk
+          chunk.split('\n').filter(Boolean).forEach(line => {
             try {
+              const data = JSON.parse(line);
+              if (data.done === false && data.message && data.message.content) {
+                fullResponse += data.message.content;
+                if (!assistantMessageDiv) {
+                  assistantMessageDiv = document.createElement('div');
+                  assistantMessageDiv.classList.add('message95', 'ai');
+                  messagesDiv.appendChild(assistantMessageDiv);
+                  messagesDiv.scrollTop = messagesDiv.scrollHeight;
+                }
+                assistantMessageDiv.innerHTML = formatText(fullResponse); // Update HTML content
+              } else if (data.done === true) {
+                // Done, finalize the message
               }
             } catch (e) {
+              console.error("Error parsing Ollama stream chunk:", e, line);
             }
+          });
+        } else if (selectedProvider === 'huggingface') {
+          // HuggingFace typically does not stream, so this block might not be hit for HF models
+          // If a streaming HF endpoint is used, this logic would need to be adapted
+          fullResponse += chunk;
+          if (!assistantMessageDiv) {
+            assistantMessageDiv = document.createElement('div');
+            assistantMessageDiv.classList.add('message95', 'ai');
+            messagesDiv.appendChild(assistantMessageDiv);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+          }
+          assistantMessageDiv.innerHTML = formatText(fullResponse); // Update HTML content
+        } else { // OpenAI, Groq, xAI
+          chunk.split('\n').filter(Boolean).forEach(line => {
             if (line.startsWith('data: ')) {
+              const data = JSON.parse(line.substring(6));
+              if (data.choices && data.choices.length > 0) {
+                const delta = data.choices[0].delta;
+                if (delta && delta.content) {
+                  fullResponse += delta.content;
+                  if (!assistantMessageDiv) {
+                    assistantMessageDiv = document.createElement('div');
+                    assistantMessageDiv.classList.add('message95', 'ai');
+                    messagesDiv.appendChild(assistantMessageDiv);
+                    messagesDiv.scrollTop = messagesDiv.scrollHeight;
+                  }
+                  assistantMessageDiv.innerHTML = formatText(fullResponse); // Update HTML content
                 }
               }
             }
+          });
+        }
+      }
+      if (assistantMessageDiv) {
+          hljs.highlightAll(); // Re-highlight all code blocks after stream finishes
+          conversationHistory.push({ role: 'assistant', content: fullResponse });
+          const codeMatch = fullResponse.match(/```(\w+)?\n([\s\S]+?)\n```/);
+          if (codeMatch) {
+              lastDetectedCode = codeMatch[2];
+              savedCodeDisplay.textContent = lastDetectedCode;
+              contextSaveArea.style.display = 'block';
+              messagesDiv.scrollTop = messagesDiv.scrollHeight;
           }
+      }
+    } else if (selectedProvider === 'google') {
+        const result = await response.json();
+        let fullResponse = '';
+        if (result.candidates && result.candidates[0] && result.candidates[0].content && result.candidates[0].content.parts) {
+            fullResponse = result.candidates[0].content.parts.map(part => part.text).join('');
+        }
+        addMessage(fullResponse, 'ai');
+        conversationHistory.push({ role: 'assistant', content: fullResponse });
+        const codeMatch = fullResponse.match(/```(\w+)?\n([\s\S]+?)\n```/);
+        if (codeMatch) {
+            lastDetectedCode = codeMatch[2];
+            savedCodeDisplay.textContent = lastDetectedCode;
+            contextSaveArea.style.display = 'block';
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }
+        hljs.highlightAll();
+    } else { // Handle non-streaming responses (e.g., HuggingFace Inference API, Anthropic)
+      const data = await response.json();
+      let assistantResponseText = '';
+      if (selectedProvider === 'anthropic') {
+        assistantResponseText = data.content[0].text;
+      } else if (selectedProvider === 'huggingface') {
+          // HuggingFace response varies greatly by model
+          // This is a generic handling for text generation models
+          if (Array.isArray(data) && data[0] && data[0].generated_text) {
+              assistantResponseText = data[0].generated_text;
+          } else {
+              assistantResponseText = JSON.stringify(data, null, 2); // Fallback for unexpected formats
+          }
+      } else { // Fallback for other non-streaming or new providers
+          assistantResponseText = data.choices[0].message.content;
       }
+      addMessage(assistantResponseText, 'ai');
+      conversationHistory.push({ role: 'assistant', content: assistantResponseText });
+      const codeMatch = assistantResponseText.match(/```(\w+)?\n([\s\S]+?)\n```/);
+      if (codeMatch) {
+          lastDetectedCode = codeMatch[2];
+          savedCodeDisplay.textContent = lastDetectedCode;
+          contextSaveArea.style.display = 'block';
+          messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      }
+      hljs.highlightAll();
     }
   } catch (error) {
+    displayError(error.message);
+    console.error("Fetch error:", error);
   } finally {
+    chatForm.querySelector('button[type="submit"]').disabled = false;
+    userInput.focus();
   }
 });
 </script>