Update index.js

index.js

@@ -1,79 +1,85 @@
-import { Client } from "@gradio/client";
-chatDisplay.appendChild(wrap);
-chatDisplay.scrollTop = chatDisplay.scrollHeight;
-}
-
-
-// connect to gradio back-end
-async function connectClient(){
-pushMessage('assistant','Connecting to model...');
-try{
-client = await Client.connect('amd/gpt-oss-120b-chatbot');
-isConnected = true;
-pushMessage('assistant','Connected. You can send messages.');
-}catch(err){
-pushMessage('assistant','Failed to connect: ' + String(err));
-console.error(err);
-}
-}
-
-
-// send a chat request
-async function sendChat(){
-if(!isConnected){
-await connectClient();
-if(!isConnected) return;
-}
-
-
-const message = userInput.value.trim();
-const system_prompt = systemInput.value;
-if(!message) return;
-
-
-// UI lock
-sendBtn.disabled = true;
-
-
-// show user message immediately
-pushMessage('user', message);
-
-
-try{
-// call gradio predict endpoint
-const result = await client.predict('/chat', {
-message,
-system_prompt,
-temperature: 0,
-});
-
-
-// gradio client returns result.data per example
-// Some backends may return streaming or different structure — adjust if needed
-const assistantText = (result && result.data) ? String(result.data) : 'No response';
-pushMessage('assistant', assistantText);
-}catch(err){
-console.error(err);
-pushMessage('assistant','Error: ' + String(err));
-}finally{
-sendBtn.disabled = false;
-userInput.value = '';
-userInput.focus();
-}
-}
-
-
-// wire events
-sendBtn.addEventListener('click', sendChat);
-userInput.addEventListener('keydown', (e) => {
-// Enter to send
-if(e.key === 'Enter'){
-e.preventDefault();
-sendChat();
-}
-});
-
-
-// initial connect in background
-connectClient();
-})();
+// index.js
+import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+(async () => {
+  const sendBtn = document.getElementById('sendBtn');
+  const userInput = document.getElementById('userMessage');
+  const systemInput = document.getElementById('systemPrompt');
+  const chatDisplay = document.getElementById('chatDisplay');
+
+  let client;
+  let isConnected = false;
+
+  function pushMessage(role, text){
+    const wrap = document.createElement('div');
+    wrap.className = `message ${role}`;
+
+    const bubble = document.createElement('div');
+    bubble.className = 'bubble';
+    bubble.textContent = text;
+
+    wrap.appendChild(bubble);
+    chatDisplay.appendChild(wrap);
+    chatDisplay.scrollTop = chatDisplay.scrollHeight;
+  }
+
+  async function connectClient(){
+    pushMessage('assistant','Connecting to model...');
+    try{
+      client = await Client.connect("amd/gpt-oss-120b-chatbot");
+      isConnected = true;
+      pushMessage('assistant','Connected. You can send messages.');
+      console.log("✅ Connected to Gradio Space");
+    }catch(err){
+      pushMessage('assistant','Failed to connect: ' + String(err));
+      console.error("❌ Connect error",err);
+    }
+  }
+
+  async function sendChat(){
+    if(!isConnected){
+      await connectClient();
+      if(!isConnected) return;
+    }
+
+    const message = userInput.value.trim();
+    const system_prompt = systemInput.value.trim();
+    if(!message) return;
+
+    sendBtn.disabled = true;
+
+    pushMessage('user', message);
+
+    try{
+      console.log("Sending to /chat",{message,system_prompt});
+      const result = await client.predict("/chat", {
+        message,
+        system_prompt,
+        temperature: 0,
+      });
+
+      console.log("Received result",result);
+
+      const assistantText = (result && result.data) ? String(result.data) : 'No response';
+      pushMessage('assistant', assistantText);
+    }catch(err){
+      console.error("❌ Predict error",err);
+      pushMessage('assistant','Error: ' + String(err));
+    }finally{
+      sendBtn.disabled = false;
+      userInput.value = '';
+      userInput.focus();
+    }
+  }
+
+  sendBtn.addEventListener('click', sendChat);
+  userInput.addEventListener('keydown', (e) => {
+    if(e.key === 'Enter'){
+      e.preventDefault();
+      sendChat();
+    }
+  });
+
+  // connect on load
+  connectClient();
+})();