나만의 챗봇

웹사이트에 채팅 창을 만들고 지난 수업에서 배운 서버에 연결해.

보여줄게: 채팅창

채팅은 메시지 목록, 입력 필드, 보내기 버튼의 세 가지로 구성돼.

<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,fetchPOST로. 유일한 새로운 부분은 모든 것을 채팅에 통합한다는 아이디어야.

💡

**"생각..."**은 작지만 중요한 트릭야. AI가 응답하는 데 몇 초가 걸립니다. 해당 메시지가 없으면 방문자는 채팅이 중단되었다고 생각할 수 있어. 좋은 프로그래머는 항상 무슨 일이 일어나고 있는지 보여줍니다.

네 차례 💪

예시에 따라 채팅을 구축하고 웹사이트 색상과 일치시키세요.
서버의 시스템 프롬프트(레슨 6)에서 레슨 5에서 프로젝트에 대해 작성한 프롬프트를 사용해. 그러면 일반 AI가 자신의 도우미로 변해.
테스트해 보세요. 방문자가 가질 수 있는 5가지 질문을 물어보세요. 봇이 올바르게 대답하나요? 프롬프트를 구체화해.
보너스: 페이지가 로드된 직후 나타나는 봇의 인사말 메시지를 추가해(“안녕해! 우리 학교에 대해 무엇이든 물어보세요.”).

⚠️

**채팅 보안:** 시스템 프롬프트에 "[네 웹사이트]에 관한 질문에만 답변하해. 그 외의 질문에는 정중하게 답변을 거부하해."와 같은 문장을 추가하해. – 그렇지 않으면 봇은 네 웹사이트와 관련이 없는 것까지 방문자에게 무엇이든 기꺼이 쓸 것야.

✅

**확인:** 웹사이트에서 채팅이 실행돼. 질문을 입력하면 풍선이 나타나고 "생각 중..."이 표시되고 봇이 답변해. 봇은 프로젝트의 도우미처럼 말해.

이번 수업에서 배울 점

채팅 = 메시지 목록 + 양식 + 서버로 가져오기.
상태 표시(“생각 중…”) – 방문자는 어떤 일이 일어나고 있는지 알아야 해.
서버의 시스템 프롬프트를 통해 봇의 성격과 경계를 제어해.