你自己的聊天机器人

跟我看：聊天窗口

聊天是三样东西：消息列表、输入框、发送按钮。

<div class="chat">
  <div id="zpravy" class="chat-zpravy"></div>
  <form id="chat-form" class="chat-form">
    <input id="chat-vstup" type="text" placeholder="Type your question…" autocomplete="off" />
    <button type="submit">Send</button>
  </form>
</div>

.chat { border: 1px solid #ddd; border-radius: 12px; max-width: 420px; }
.chat-zpravy { height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.zprava { padding: 8px 12px; border-radius: 12px; max-width: 80%; }
.zprava.ja { background: #4f46e5; color: white; align-self: flex-end; }
.zprava.bot { background: #f0f0f0; align-self: flex-start; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #ddd; }
.chat-form input { flex: 1; }

连接服务器

const zpravy = document.querySelector('#zpravy');
const form = document.querySelector('#chat-form');
const vstup = document.querySelector('#chat-vstup');

function pridejZpravu(text, kdo) {
  const el = document.createElement('div');
  el.className = `zprava ${kdo}`;
  el.textContent = text;
  zpravy.appendChild(el);
  zpravy.scrollTop = zpravy.scrollHeight; // scroll down to the new message
}

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const otazka = vstup.value.trim();
  if (!otazka) return;

  pridejZpravu(otazka, 'ja');
  vstup.value = '';
  pridejZpravu('Thinking…', 'bot');

  const r = await fetch('/zeptat-se', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ otazka }),
  });
  const data = await r.json();

  zpravy.lastChild.textContent = data.text; // replace "Thinking…" with the answer
});

代码里你都会：addEventListener、createElement、POST 的 fetch。新的只是把它们拼成聊天。

💡

“Thinking…” 是小但重要的技巧。AI 要几秒才回答——没这条消息访客可能以为聊天坏了。好程序员总显示”正在发生”。

轮到你了 💪

按例子建聊天，颜色配网站。
服务器系统提示词（第 6 课）用第 5 课为项目写的提示词——通用 AI 变成你的助手。
测试：问 5 个访客可能问的问题。机器人答对吗？调整提示词。
加分：页面加载后显示机器人问候（“Hi! Ask me anything about our school.”）。

⚠️

聊天安全： 在系统提示词加一句 “Only answer questions about [your website]. Politely decline to answer anything else.”——否则机器人什么都写给访客，包括和网站无关的。

✅

检查一下： 网站上有聊天：打字、你的气泡、“Thinking…”、机器人回答。机器人像项目助手那样说话。

这堂课你要记住

聊天 = 消息列表 + 表单 + 对服务器的 fetch。
显示状态（“Thinking…”）——访客要知道有事发生。
服务器上的系统提示词控制机器人性格和边界。

本课属于付费关卡

跟我看：聊天窗口

连接服务器

轮到你了 💪

这堂课你要记住