Skip to content

[WIP] Add step-by-step consultation flow to chatbot#1

Merged
redsunjin merged 1 commit intomainfrom
copilot/add-chatbot-state-machine
Mar 6, 2026
Merged

[WIP] Add step-by-step consultation flow to chatbot#1
redsunjin merged 1 commit intomainfrom
copilot/add-chatbot-state-machine

Conversation

Copy link
Contributor

Copilot AI commented Mar 6, 2026

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

목표

index.html의 기존 Gemini AI 챗봇에 아래 기능들을 추가한다.

구현할 기능 목록

1. 단계별 상담 대화 흐름 (State Machine)

챗봇이 다음 단계를 순서대로 진행하도록 상태(state)를 관리한다:

  • STEP 1 inquiry: Gemini API를 통해 방문자의 프로젝트/문의 내용을 짧은 대화로 파악하고 요약
  • STEP 2 privacy: 개인정보 수집 동의 안내 및 동의 확인
    • 안내 문구 예시: "상담 내용을 담당자에게 전달하기 위해 연락처를 수집합니다. 수집된 정보는 상담 목적으로만 사용되며, 응대 완료 후 즉시 파기됩니다. 동의하시겠습니까? (예/아니오)"
    • "아니오" 선택 시: "소중한 시간 내주셔서 감사합니다. 언제든지 다시 방문해 주세요." 출력 후 종료
  • STEP 3 contact: 이름과 이메일 또는 연락처(전화번호) 수집
  • STEP 4 send: EmailJS로 redsunjin@gmail.com에 상담 내용 이메일 발송 후 완료 메시지 출력

Gemini API는 STEP 1(inquiry) 단계에서만 사용하고, 나머지 단계는 챗봇 자체 로직으로 처리한다.

Gemini systemInstruction은 기존 것을 유지한다:

당신은 Gov-Tech AI 에이전시 '라이트닝(Lightning)'의 전문 AI 컨설턴트입니다. 사용자(공공기관/대기업 담당자)가 프로젝트 아이디어나 요구사항을 말하면, 이를 '라이트닝'의 핵심 역량(전자정부프레임워크 준수, 72시간 내 프로토타이핑, 보안 규정 준수, 2주 내 런칭)을 바탕으로 분석하여 답변하세요. 답변은 전문적이고 신뢰감 있게 하되, 핵심 기술(AI, 모바일, 웹 익스텐션)을 어떻게 활용할지 구체적으로 제안하세요. 답변은 한국어로 작성하며, 중요한 키워드는 **굵게** 표시하세요. 너무 길지 않게 핵심 위주로 답변하세요.

STEP 1에서 Gemini가 충분한 정보를 수집했다고 판단하면(또는 3~4번의 대화 후) 자동으로 STEP 2로 넘어간다. Gemini systemInstruction에 아래 내용을 추가한다:

사용자의 요구사항이 충분히 파악되었다고 판단되면(또는 3~4번의 대화 이후), 반드시 응답 마지막에 정확히 "[INQUIRY_COMPLETE]" 라는 태그를 포함하세요. 이 태그가 있으면 다음 단계로 넘어갑니다.

2. Gemini API 재시도 로직

무료 Gemini API의 불안정성을 보완하는 재시도 로직:

  • 최대 재시도 횟수: 3회
  • 재시도 간격: 지수 백오프 (1초 → 2초 → 4초)
  • 재시도 대상 에러: 429 (Rate Limit), 503 (Service Unavailable), Network Error
  • 재시도 비대상: 400 Bad Request → 즉시 실패 처리
  • 사용자 피드백: 재시도 중일 때 타이핑 인디케이터 ���지하고, 채팅창에 "잠시 후 재시도 중... (N/3)" 메시지 표시

3. EmailJS 연동

상담 완료 후 EmailJS를 통해 이메일 발송:

  • EmailJS SDK를 <head>에 CDN으로 추가: 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
  • 플레이스홀더 상수로 정의 (머지 후 직접 교체): 
    const GEMINI_API_KEY = "YOUR_GEMINI_API_KEY";
const EMAILJS_PUBLIC_KEY = "YOUR_EMAILJS_PUBLIC_KEY";
const EMAILJS_SERVICE_ID = "YOUR_EMAILJS_SERVICE_ID";
const EMAILJS_TEMPLATE_ID = "YOUR_EMAILJS_TEMPLATE_ID";
  • EmailJS 초기화: emailjs.init(EMAILJS_PUBLIC_KEY);
  • 발송할 템플릿 파라미터: 
    {
  visitor_name: "수집된 이름",
  contact: "수집된 연락처",
  inquiry_summary: "Gemini와의 대화에서 추출한 문의 요약",
  full_conversation: "전체 대화 내용 (텍스트)",
  date: "현재 날짜/시간"
}

4. 봇 방지 및 보안

  • Rate Limiting: sessionStorage를 활용해 10분 내 메시지 20회 초과 시 입력 차단 및 안내 메시지 출력
  • 이메일 발송 횟수 제한: sessionStorage 기준 1회 이상 발송 시 중복 발송 차단
  • 입력값 검증: 이메일 형식 정규식 검증, 빈 입력 차단
  • Honeypot 필드: display:none 처리된 숨겨진 input 필드 추가, 값이 있으면 봇으로 간주하고 차단
  • XSS 방지: innerHTML 사용 시 사용자 입력은 반드시 텍스트로만 처리 (Gemini 응답의 bold 파싱 외에는 사용자 입력을 innerHTML에 직접 삽입 금지)

5. Gemini 멀티턴 대화

  • 대화 히스토리를 배열로 관리하여 Gemini API 호출 시 전체 대화 맥락을 함께 전송
  • contents 배열에 role: "user" / role: "model" 형식으로 누적

기술 스택 및 제약

  • 순수 HTML/CSS/JS (프레임워크 없음, GitHub Pages 정적 호스팅)
  • 기존 style.css 및 UI 구조 유지
  • 기존 챗봇 UI (.ai-fab, .ai-chat-window, .chat-messages 등) 구조 유지
  • Gemini 모델: gemini-2.5-flash-preview-04-17 (기존 모델명이 잘못되었으므로 수정)
  • EmailJS SDK v4 사용

초기 메시지 수정

챗봇 오픈 시 첫 메시지를 아래로 교체:

안녕하세요! ⚡
라이트닝 AI 컨설턴트입니다.
구축하고 싶은 공공 서비스나 프로젝트 아이디어를 말씀해주시면, 2주 완성 플랜을 제안해 드립니다.
궁금한 점을 자유롭게 말씀해주세요. 충분한 내용이 파악되면 담당자 연결을 도와드립니다. 😊

수정 대상 파일

  • index.html (단일 파일 수정)

머지 후 교체 안내 (코드 주석으로 포함)

// ⚠️ 아래 4개 값을 실제 키로 교체하세요
// GEMINI_API_KEY: Google AI Studio (https://aistudio.google.com/app/apikey)
// EMAILJS_PUBLIC_KEY: EmailJS 대시보드 > Account > Public Key
// EMAILJS_SERVICE_ID: EmailJS 대시보드 > Email Services
// EMAILJS_TEMPLATE_ID: EmailJS 대시보드 > Email Templates

This pull request was created from Copilot chat.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@redsunjin redsunjin marked this pull request as ready for review March 6, 2026 14:38
@redsunjin redsunjin merged commit 9df5788 into main Mar 6, 2026
1 check failed
Copilot stopped work on behalf of redsunjin due to an error March 6, 2026 14:38
The session was cancelled by the user.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@redsunjin redsunjin

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@redsunjin