Update index.js

index.js

@@ -1,85 +1,80 @@
-// 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');
+  const chatWindow = document.getElementById("chat-window");
+  const userInput = document.getElementById("userMessage");
+  const sendBtn = document.getElementById("sendBtn");
 
   let client;
   let isConnected = false;
 
-  function pushMessage(role, text){
-    const wrap = document.createElement('div');
+  function pushMessage(role, text) {
+    const wrap = document.createElement("div");
     wrap.className = `message ${role}`;
 
-    const bubble = document.createElement('div');
-    bubble.className = 'bubble';
+    const bubble = document.createElement("div");
+    bubble.className = "bubble";
     bubble.textContent = text;
 
     wrap.appendChild(bubble);
-    chatDisplay.appendChild(wrap);
-    chatDisplay.scrollTop = chatDisplay.scrollHeight;
+    chatWindow.appendChild(wrap);
+    chatWindow.scrollTop = chatWindow.scrollHeight;
   }
 
-  async function connectClient(){
-    pushMessage('assistant','Connecting to model...');
-    try{
+  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);
+      pushMessage("assistant", "已連線，開始對話吧！");
+    } catch (err) {
+      pushMessage("assistant", "連線失敗: " + String(err));
+      console.error(err);
     }
   }
 
-  async function sendChat(){
-    if(!isConnected){
+  async function sendChat() {
+    if (!isConnected) {
       await connectClient();
-      if(!isConnected) return;
+      if (!isConnected) return;
     }
 
     const message = userInput.value.trim();
-    const system_prompt = systemInput.value.trim();
-    if(!message) return;
+    if (!message) return;
 
     sendBtn.disabled = true;
+    pushMessage("user", message);
 
-    pushMessage('user', message);
+    try {
+      // 如果你有固定的 system_prompt 可以直接填這裡
+      const system_prompt = "You are a helpful assistant.";
 
-    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{
+      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.value = "";
       userInput.focus();
     }
   }
 
-  sendBtn.addEventListener('click', sendChat);
-  userInput.addEventListener('keydown', (e) => {
-    if(e.key === 'Enter'){
+  sendBtn.addEventListener("click", sendChat);
+  userInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       sendChat();
     }
   });
 
-  // connect on load
   connectClient();
 })();