feat(chatbot): add AI Q&A chatbot component by Copilot · Pull Request #27 · letsescape/laravel-docs

Copilot · 2026-03-08T14:38:19Z

Summary

AWS Lambda 기반 Laravel AI 챗봇을 문서 사이트에 연결합니다.

플로팅 채팅 버튼 + 대화 UI (메시지 버블, 로딩 애니메이션, 에러 처리)
Error Boundary + React.lazy로 사이트 완전 격리 — 챗봇 오류가 사이트에 영향 없음
추천 질문 chip 버튼 (Eloquent, 라우팅, 마이그레이션, 인증)
대화 초기화 버튼
키보드 접근성 (ESC 닫기, 포커스 트랩, aria-live)
i18n (translate()), 다크/라이트 모드, 모바일 반응형
페이지 컨텍스트(제목, 경로) API 전송 구조 준비
API URL을 customFields로 관리 (환경변수 오버라이드 가능)

API Integration

// POST { message, locale, context: { pageTitle, pagePath } }
// Response: { answer | message | response: string }

Isolation Strategy

<ChatBotErrorBoundary>
  <Suspense fallback={null}>
    <ChatBot />   {/* lazy loaded — 별도 JS chunk */}
  </Suspense>
</ChatBotErrorBoundary>

Phase 2 (향후 PR)

Markdown 렌더링 + 코드 블록 syntax highlighting
관련 문서 페이지 링크 자동 연결
Lambda에서 페이지 컨텍스트 활용한 맥락 기반 응답
상태 전환 애니메이션 (fade in/out)
채팅 윈도우 최소화 상태

Test Plan

- Create ChatBot component with floating button, chat window, message history - Add conversation state management with React useState - Handle API requests to AWS Lambda with loading/error states - Add responsive styling with CSS Modules and dark mode support - Integrate ChatBot into Root.tsx for site-wide availability - Add CSS variables for chatbot theming - Update .gitignore to exclude TypeScript compiled output Co-authored-by: kimchanhyung98 <60088641+kimchanhyung98@users.noreply.github.com>

- Use translate() for welcome message, error message, and placeholder - Handle empty API response as error case Co-authored-by: kimchanhyung98 <60088641+kimchanhyung98@users.noreply.github.com>

Co-Authored-By: Claude <noreply@anthropic.com>

TODO: Lambda-side context handling for page-aware responses Co-Authored-By: Claude <noreply@anthropic.com>

…sage - Suggested question chips with category icons - Clear conversation button in header - Extract sendMessage() to eliminate fetch duplication - Add Markdown rendering TODO for Phase 2 Co-Authored-By: Claude <noreply@anthropic.com>

- ESC key closes chat window and returns focus to floating button - Focus trap keeps Tab navigation within chat window - aria-live region announces new messages to screen readers - aria-modal attribute on dialog Co-Authored-By: Claude <noreply@anthropic.com>

coldplay126 · 2026-03-15T15:36:04Z

/gemini review

gemini-code-assist

Code Review

이 PR은 문서 사이트에 AI 챗봇 기능을 추가하는 중요한 기능 개선입니다. 전반적으로 코드는 깔끔하게 작성되었으며, 특히 React.lazy와 ErrorBoundary를 사용해 챗봇 컴포넌트를 사이트의 다른 부분과 완전히 분리하여 안정성을 높인 점이 인상적입니다. 또한 키보드 접근성을 고려한 포커스 관리와 ARIA 속성 사용도 훌륭합니다. 몇 가지 보안 및 안정성 향상을 위한 제안 사항을 리뷰에 포함했습니다.

augmentcode · 2026-03-15T15:37:49Z

🤖 Augment PR Summary

Summary: This PR introduces an AI Q&A chatbot to the Docusaurus-based Laravel docs site, intended to connect the UI to an AWS Lambda-backed chatbot API.

Changes:

Exposes CHATBOT_API_URL via Docusaurus customFields (docusaurus.config.ts).
Adds a lazy-loaded ChatBot UI with a floating toggle button and <dialog>-based chat window.
Implements message history, suggested-question chips, loading indicator, and translated user-facing strings.
Includes request cancellation via AbortController, basic error handling, and screen-reader updates via aria-live.
Wraps chatbot rendering with an Error Boundary + React.Suspense in src/theme/Root.tsx to isolate failures from the rest of the site.
Adds chatbot styling via CSS Modules and theme variables in src/css/custom.css.
Updates .gitignore to ignore TypeScript build artifacts and generated JS outputs.

Technical Notes: The chatbot component returns null when the API URL is not configured, and includes keyboard accessibility behaviors (ESC close, focus return, and a simple focus trap) for the dialog UI.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 4 suggestions posted.

Comment augment review to trigger a new review at any time.

- Remove hardcoded fallback API URL, render nothing if env unset (critical) - Remove unsafe `as string` assertion, guard with early return (high) - Add console.error in catch block for debugging (medium) - Use unique message IDs instead of array index for React keys (medium) - Abort in-flight request on handleClear to prevent stale appends (medium) - Restore focus to floating button on close button click (low) - Replace all hard-coded English strings with translate() (low) - Fix suggestion chip hover contrast: use primary color bg (low) Co-Authored-By: Claude <noreply@anthropic.com>

Hooks must be called unconditionally before any early return. Moves the chatbotApiUrl guard after all hook declarations. Co-Authored-By: Claude <noreply@anthropic.com>

- Use <dialog> element instead of role="dialog" (S6819) - Extract nested ternary into IIFE for aria-live (S3358) - Use globalThis instead of window (S7764) - Reset dialog default padding/margin in CSS Co-Authored-By: Claude <noreply@anthropic.com>

coldplay126 · 2026-03-16T15:13:46Z

/augment review

coldplay126 · 2026-03-16T15:13:57Z

/gemini review

gemini-code-assist

Code Review

이번 PR은 잘 분리되고 기능이 풍부한 AI 챗봇 컴포넌트를 추가하는 훌륭한 작업입니다. 접근성(포커스 트래핑, ARIA 속성)과 사용자 경험(로딩 상태, 오류 처리, 요청 취소)을 세심하게 고려한 구현이 돋보입니다. React.lazy와 ErrorBoundary를 사용하여 챗봇이 메인 사이트의 성능이나 안정성에 영향을 주지 않도록 한 점도 좋습니다. 코드의 견고성과 가독성을 더욱 향상시키기 위한 몇 가지 제안 사항을 남깁니다.

augmentcode

Review completed. 1 suggestion posted.

Comment augment review to trigger a new review at any time.

- Replace module-scope `let nextMessageId` with `useRef` (gemini/high) - Use Docusaurus `useLocation` hook instead of globalThis.location (gemini/medium) - Extract IIFE to pre-computed variable for aria-live text (gemini/medium) - Guard `.finally()` and `.then()` with abort signal check to prevent race condition on rapid sends (augment/medium) Co-Authored-By: Claude <noreply@anthropic.com>

coldplay126 · 2026-03-16T15:25:44Z

/augment review

coldplay126 · 2026-03-16T15:26:02Z

/gemini review

gemini-code-assist

Code Review

이 PR은 AI 챗봇 컴포넌트를 추가하는 중요한 기능 추가입니다. 전반적으로 코드가 매우 잘 작성되었습니다. 특히 다음과 같은 점들이 인상적입니다:

React.lazy와 ErrorBoundary를 사용하여 챗봇 컴포넌트를 사이트의 나머지 부분과 완전히 격리시킨 점은 매우 훌륭한 설계입니다. 이를 통해 챗봇의 오류가 전체 사이트의 안정성에 영향을 미치지 않도록 보장합니다.
키보드 접근성(포커스 트랩, ESC로 닫기, aria-live를 통한 스크린 리더 알림)을 세심하게 고려하여 모든 사용자가 챗봇을 원활하게 사용할 수 있도록 한 점이 좋습니다.
AbortController를 사용하여 이전 API 요청을 취소하는 로직은 네트워크 효율성을 높이고 불필요한 상태 업데이트를 방지하는 좋은 구현입니다.
CSS 변수를 활용하여 다크/라이트 모드를 완벽하게 지원하고, 반응형 디자인을 통해 모바일 환경에서도 좋은 사용자 경험을 제공합니다.

코드의 안정성을 더욱 높이기 위해 한 가지 작은 제안을 리뷰 코멘트로 남겼습니다. 훌륭한 기여에 감사드립니다!

augmentcode

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

- Replace `as string | undefined` with typeof guard (gemini/medium) - Add isSendingRef to synchronously gate duplicate submissions (augment/medium) - Remove aria-modal since dialog is non-modal (augment/low) - Add unmount cleanup to abort in-flight requests (augment/low) Co-Authored-By: Claude <noreply@anthropic.com>

sonarqubecloud · 2026-03-17T13:32:30Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

coldplay126 · 2026-03-17T13:34:20Z

/augment review

coldplay126 · 2026-03-17T13:34:30Z

/gemini review

gemini-code-assist

Code Review

이 PR은 AI 챗봇 컴포넌트를 훌륭하게 구현했습니다. 코드는 성능(지연 로딩), 안정성(에러 바운더리, 요청 취소), 접근성(포커스 관리, ARIA 속성)을 깊이 고려한 점이 돋보입니다. Docusaurus와의 통합도 깔끔합니다. 메인 챗봇 컴포넌트의 유지보수성을 개선하기 위해 로직을 커스텀 훅으로 리팩토링하는 한 가지 제안 사항이 있습니다. 전반적으로 훌륭한 기여입니다.

augmentcode

Review completed. 1 suggestion posted.

Comment augment review to trigger a new review at any time.

augmentcode

Review completed. No suggestions at this time.

Comment augment review to trigger a new review at any time.

kimchanhyung98 · 2026-03-26T15:23:36Z

추가 기능은 보류

Initial plan

ea4a6b4

Copilot AI assigned Copilot and kimchanhyung98 Mar 8, 2026

Copilot started work on behalf of kimchanhyung98 March 8, 2026 14:38 View session

Copilot AI and others added 2 commits March 8, 2026 14:56

fix(chatbot): add i18n support and empty response handling

73c5e97

- Use translate() for welcome message, error message, and placeholder - Handle empty API response as error case Co-authored-by: kimchanhyung98 <60088641+kimchanhyung98@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add AI Q&A feature using AWS Lambda~~ feat(chatbot): add AI Q&A chatbot component Mar 8, 2026

Copilot finished work on behalf of kimchanhyung98 March 8, 2026 15:01

coldplay126 self-assigned this Mar 15, 2026

Merge branch 'develop' into copilot/connect-ai-qa-function

eec353a

kimchanhyung98 removed their assignment Mar 15, 2026

coldplay126 and others added 6 commits March 15, 2026 23:51

feat(chatbot): add ErrorBoundary for crash isolation

1a988f8

Co-Authored-By: Claude <noreply@anthropic.com>

feat(chatbot): apply lazy loading and ErrorBoundary for site isolation

6722a62

Co-Authored-By: Claude <noreply@anthropic.com>

refactor(chatbot): move API URL to customFields with env override

911fa50

Co-Authored-By: Claude <noreply@anthropic.com>

feat(chatbot): add page context payload and data-nosnippet attribute

a044a00

TODO: Lambda-side context handling for page-aware responses Co-Authored-By: Claude <noreply@anthropic.com>

coldplay126 marked this pull request as ready for review March 15, 2026 15:35

gemini-code-assist Bot reviewed Mar 15, 2026

View reviewed changes

Comment thread docusaurus.config.ts Outdated

Comment thread src/components/ChatBot/index.tsx Outdated

Comment thread src/components/ChatBot/index.tsx Outdated

Comment thread src/components/ChatBot/index.tsx Outdated

augmentcode Bot reviewed Mar 15, 2026

View reviewed changes

Comment thread src/components/ChatBot/index.tsx

Comment thread src/components/ChatBot/index.tsx Outdated

Comment thread src/components/ChatBot/index.tsx Outdated

Comment thread src/components/ChatBot/styles.module.css

kimchanhyung98 marked this pull request as draft March 16, 2026 12:53

coldplay126 and others added 3 commits March 16, 2026 23:55

fix(chatbot): move conditional return after all hooks to fix SonarCloud

20d315a

Hooks must be called unconditionally before any early return. Moves the chatbotApiUrl guard after all hook declarations. Co-Authored-By: Claude <noreply@anthropic.com>

gemini-code-assist Bot reviewed Mar 16, 2026

View reviewed changes

Comment thread src/components/ChatBot/index.tsx Outdated

Comment thread src/components/ChatBot/index.tsx Outdated

Comment thread src/components/ChatBot/index.tsx

augmentcode Bot reviewed Mar 16, 2026

View reviewed changes

Comment thread src/components/ChatBot/index.tsx Outdated

gemini-code-assist Bot reviewed Mar 16, 2026

View reviewed changes

Comment thread src/components/ChatBot/index.tsx Outdated

augmentcode Bot reviewed Mar 16, 2026

View reviewed changes

Comment thread src/components/ChatBot/index.tsx

Comment thread src/components/ChatBot/index.tsx Outdated

Comment thread src/components/ChatBot/index.tsx

gemini-code-assist Bot reviewed Mar 17, 2026

View reviewed changes

Comment thread src/components/ChatBot/index.tsx

augmentcode Bot reviewed Mar 17, 2026

View reviewed changes

Comment thread src/components/ChatBot/index.tsx

coldplay126 marked this pull request as ready for review March 17, 2026 14:43

coldplay126 requested a review from kimchanhyung98 March 17, 2026 14:44

augmentcode Bot reviewed Mar 17, 2026

View reviewed changes

kimchanhyung98 marked this pull request as draft March 26, 2026 15:23

Conversation

Copilot AI commented Mar 8, 2026 • edited by coldplay126 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Integration

Isolation Strategy

Phase 2 (향후 PR)

Test Plan

Uh oh!

coldplay126 commented Mar 15, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

augmentcode Bot commented Mar 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

augmentcode Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coldplay126 commented Mar 16, 2026

Uh oh!

coldplay126 commented Mar 16, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

augmentcode Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coldplay126 commented Mar 16, 2026

Uh oh!

coldplay126 commented Mar 16, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

augmentcode Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sonarqubecloud Bot commented Mar 17, 2026

Quality Gate passed

Uh oh!

coldplay126 commented Mar 17, 2026

Uh oh!

coldplay126 commented Mar 17, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

augmentcode Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

augmentcode Bot left a comment

Choose a reason for hiding this comment

Uh oh!

kimchanhyung98 commented Mar 26, 2026

Uh oh!

Copilot AI commented Mar 8, 2026 •

edited by coldplay126

Loading

augmentcode Bot commented Mar 15, 2026 •

edited

Loading