Customize chatbot appearance with primary color

[no-ikjun]

챗봇 위젯 색깔(위젯, 전송 버튼, 말풍선)을 #FF4500으로 변경

Summary by CodeRabbit

• 새로운 기능
  • 챗봇 위젯의 색상 사용자 정의 기능이 추가되었습니다. 주색상, 버튼 색상, 사용자 메시지 배경 색상을 설정할 수 있습니다.

[coderabbitai]

📝 Walkthrough

요약

채봇 로더 스크립트 태그에 세 가지 데이터 속성(data-primary-color, data-button-color, data-user-message-bg)을 추가하여 위젯의 색상 커스터마이제이션을 구현하는 변경사항입니다.

변경 사항

Cohort / File(s)	Summary
Chatbot 위젯 색상 설정 src/app/[lng]/layout.tsx	채봇 로더 스크립트에 ff4500(OrangeRed) 색상의 세 가지 데이터 속성 추가: primary-color, button-color, user-message-bg

추정 코드 리뷰 노력

🎯 1 (Trivial) | ⏱️ ~2 minutes

관련된 가능성 있는 PR

• PR #475: 동일한 파일의 chatbot loader 스크립트를 수정하며, data-widget-key 및 data-button-icon 속성을 추가했고, 본 PR은 색상 커스터마이제이션 속성을 추가하여 직접적으로 연관됨.

제안 리뷰어

• rhseung
• 2paperstar

시

🐰✨ 색상의 마법을 가미하여,
주황빛 위젯이 반짝반짝,
세 가지 속성이 춤을 추며,
채봇의 옷을 곱게 입히네,
작지만 소중한 변화로다!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 주요 변경사항의 일부를 설명하지만, 전체 변경 범위를 완전히 반영하지 못합니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 474-chatbot-widget

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR customizes the chatbot widget appearance by adding color configuration attributes to match the application's primary color (#FF4500, also known as OrangeRed). The chatbot is loaded from an external script (chatbot.gistory.me) and configured through data attributes.

Changes:

• Added three color-related data attributes to the chatbot Script component to customize the widget's appearance

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/app/[lng]/layout.tsx (1)

130-132: 동일한 색상 값이 세 곳에 중복 하드코딩됨

브랜드 색상이 변경될 경우 세 속성을 모두 수정해야 합니다. 상수로 추출하거나 NEXT_PUBLIC_CHATBOT_PRIMARY_COLOR 같은 환경 변수로 관리하면 유지보수가 용이해집니다.

♻️ 제안하는 리팩토링 (환경 변수 방식 예시)

.env 파일에 색상 상수 추가:

+NEXT_PUBLIC_CHATBOT_PRIMARY_COLOR=#ff4500

코드에서 참조:

+      {process.env.NEXT_PUBLIC_CHATBOT_WIDGET_KEY && (
         <Script
           src="https://chatbot.gistory.me/loader.js"
           data-widget-key={process.env.NEXT_PUBLIC_CHATBOT_WIDGET_KEY}
           data-button-icon="logo"
-          data-primary-color="ff4500"
-          data-button-color="ff4500"
-          data-user-message-bg="ff4500"
+          data-primary-color={process.env.NEXT_PUBLIC_CHATBOT_PRIMARY_COLOR}
+          data-button-color={process.env.NEXT_PUBLIC_CHATBOT_PRIMARY_COLOR}
+          data-user-message-bg={process.env.NEXT_PUBLIC_CHATBOT_PRIMARY_COLOR}
         />
+      )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`[lng]/layout.tsx around lines 130 - 132, Extract the repeated hex
color used in layout.tsx (currently assigned to data-primary-color,
data-button-color, data-user-message-bg) into a single source of truth: either a
constant (e.g., CHATBOT_PRIMARY_COLOR) or an environment variable (e.g.,
NEXT_PUBLIC_CHATBOT_PRIMARY_COLOR), and replace the three hardcoded values with
references to that symbol so changing the brand color requires only one update;
update any type or runtime access code that reads process.env in layout.tsx to
safely fallback if the env var is missing.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/app/`[lng]/layout.tsx:
- Around line 130-132: The data attributes data-primary-color,
data-button-color, and data-user-message-bg in the layout component are missing
the '#' prefix on their hex values; update the values used in
src/app/[lng]/layout.tsx (where these attributes are set) to use valid CSS hex
notation (e.g., change "ff4500" to "#ff4500" or "#FF4500"), ensuring consistency
of casing if desired.

---

Nitpick comments:
In `@src/app/`[lng]/layout.tsx:
- Around line 130-132: Extract the repeated hex color used in layout.tsx
(currently assigned to data-primary-color, data-button-color,
data-user-message-bg) into a single source of truth: either a constant (e.g.,
CHATBOT_PRIMARY_COLOR) or an environment variable (e.g.,
NEXT_PUBLIC_CHATBOT_PRIMARY_COLOR), and replace the three hardcoded values with
references to that symbol so changing the brand color requires only one update;
update any type or runtime access code that reads process.env in layout.tsx to
safely fallback if the env var is missing.