 |
요약 | AI Bot - 새 질문 모달 |
 |
저장소 | GitHub - VaperinaDEV/aibot-new-question-modal · GitHub |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
Discourse 테마 초보자? | Discourse 테마 사용 입문 가이드 |
이 테마 컴포넌트 설치
안녕하세요 
Discourse AI - AI Bot 사용이 필요합니다.
이 테마 컴포넌트는 ask.discourse.com 홈페이지 기능을 모달 형태로 구현한 것입니다. 따라서 수신자 AI Bot과 새로운 대화를 시작할 수 있습니다.
이 모달은 전체 화면을 차지하므로 다른 페이지에 있는 듯한 인상을 줍니다. 혹은 그런 것이 목표였습니다.
주요 부분:
아바타: aibot 아바타에는 스피너가 있으며, 모달 아바타에서는 항상 회전하지만 AI가 작성 중일 때를 나타내기도 합니다.
AI 메시지: 여기에서는 HTML도 사용할 수 있습니다.
빠른 링크: 원하는 만큼의 질문을 추가할 수 있습니다.
빠른 링크 표시는 설정으로 제한되며, 모달을 다시 열 때마다 순서가 섞입니다.
max quick links desktop 기본값: 5
max quick links mobile 기본값: 3
최근 대화: 이 버튼은 in:messages, @aibot-username 파라미터와 함께 /search 페이지로 리디렉션합니다.
모달에 대한 설명은 여기까지입니다. 테마 설정에서 모든 것을 변경하고 커스터마이징할 수 있습니다. 
AI Bot 모달 열기 버튼은 사이드바의 3개 지점에 배치할 수 있습니다.
-
sidebar-footer-actions
-
before-sidebar-sections
-
after-sidebar-sections
테마 설정에서 버튼 스타일을 변경할 수 있습니다.
테마 설정을 살펴봅시다
테마 설정
- quick_links: 여기서 빠른 버튼 질문을 설정할 수 있습니다.
- max quick links desktop: 데스크톱에서 표시되는 최대 빠른 링크 수
- max quick links mobile: 모바일에서 표시되는 최대 빠른 링크 수
- show_for_groups: 필수 설정. 사이드바 버튼을 표시할 그룹 이름을 추가하세요.
- aibot_id: 필수 설정. 여기에 사용할 AI Bot ID를 추가하세요.
- aibot_username: 필수 설정. 여기에 사용할 AI Bot 사용자 이름을 추가하세요.
- aibot_avatar: 필수 설정. 모달에 표시될 AI Bot 이미지를 업로드하세요.
- sibebar aibot button postition: 사이드바 버튼의 위치를 선택하세요.
- sidebar-footer-actions (기본값)
- before-sidebar-sections (사이드바 상단)
- after-sidebar-sections (사이드바 하단)
- sibebar aibot button style: 사이드바 버튼의 스타일을 선택하세요.
- btn-primary (기본값)
- btn-default
- sidebar aibot button border-radius: 사이드바 버튼의 둥근 모서리를 변경하세요.
- sidebar aibot button before icon: 사이드바 버튼 아이콘을 변경하세요.
- aibot recent messages icon: 최근 대화 버튼 아이콘을 변경하세요.
- modal background: 모달 배경을 변경하세요.
- modal content wrapper background: 모달 콘텐츠 래퍼 배경을 변경하세요.
- modal content wrapper border radius: 모달 콘텐츠 래퍼의 둥근 모서리를 변경하세요.
- quick buttons style: 빠른 버튼의 스타일을 선택하세요.
- btn-primary (기본값)
- btn-default
- quick buttons border radius: 빠른 버튼의 둥근 모서리를 변경하세요.
- mobile quick buttons wrapper border radius: 모바일 빠른 버튼 래퍼의 둥근 모서리를 변경하세요.
- aibot avatar spinner primary color: 아바타 스피너의 기본 색상을 변경합니다. 기본값은
var(--tertiary)입니다. - aibot avatar spinner secondary color: 아바타 스피너의 보조 색상을 변경합니다. 기본값은
#ffffff입니다. - aibot message border color: 이 경계선은 메시지 오른쪽에 있습니다. 기본값은
var(--tertiary)입니다. - textarea border-radius: 텍스트 영역의 둥근 모서리를 변경하세요.
- send button border radius: 전송 버튼의 둥근 모서리를 변경하세요.
- recent messages button border radius: 최근 메시지 버튼의 둥근 모서리를 변경하세요.
- recent messages button color: 최근 메시지 버튼의 색상을 변경하세요. 아이콘 색상도 함께 변경됩니다.
- recent messages button hover color: 최근 메시지 버튼의 호버 색상을 변경하세요.
- recent messages button hover background: 최근 메시지 버튼의 호버 배경을 변경하세요.
- recent messages button border: 최근 메시지 버튼의 경계선을 변경하세요.
- spinner loader border: 모달 스피너 로더의 경계선을 변경하세요. 메시지를 보낼 때 나타납니다.
- spinner loader border right color: 스피너 로더 오른쪽 색상을 변경하세요.
테마 번역도 몇 가지 있습니다…
테마 번역
- aibot_modal_title: 모달의 제목입니다.
- aibot_message: 모달 내 AI Bot 메시지입니다.
- input_placeholder: 텍스트 영역의 플레이스홀더입니다.
- input_submit: 전송 버튼의 제목입니다.
- input_length: 텍스트가 너무 짧을 때 표시되는 메시지입니다.
- disclaimer: 모달 내 텍스트 영역 아래에 표시되는 텍스트입니다.
- new_question: 사이드바 버튼 텍스트입니다.
- recent_messages: 모달 내 최근 메시지 버튼 텍스트입니다.
이 테마 컴포넌트는 AI Bot 개인 메시지에서 공유 버튼을 숨깁니다.
discourse_ai.ai_bot.default_pm_prefix텍스트는 기본 AI 개인 메시지 제목이며, 대화 주제에 따라 자동으로 변경됩니다./admin/customize/site_texts에서 변경할 수 있습니다.
크레딧: Discourse Ask Theme
그래서 스크롤 가능한 빠른 버튼 기능을 제거하기로 했어. 대신 데스크톱/모바일 뷰에서 표시할 최대 빠른 링크 수를 조절할 수 있는 새로운 설정 2가지를 추가했고, 작은 화면에 더 잘 맞도록 모달 AI 아바타와 메시지 섹션도 일부 조정했어.