Skip to content
This repository was archived by the owner on Mar 18, 2026. It is now read-only.

[기능] 배포 모드 및 배포 정보 모달 UI 추가#28

Merged
haesookimDev merged 3 commits into
mainfrom
feature/deploy
Jul 22, 2025
Merged

[기능] 배포 모드 및 배포 정보 모달 UI 추가#28
haesookimDev merged 3 commits into
mainfrom
feature/deploy

Conversation

@haesookimDev
Copy link
Copy Markdown
Contributor

설명

  • 사용자가 워크플로우를 독립된 웹페이지에서 채팅으로 사용할 수 있고, API를 통해 워크플로우를 호출하는 방법을 쉽게 확인할 수 있도록 배포 기능을 도입했습니다.
  • 기존에는 배포와 관련된 UI나 가이드가 없어서 외부 사용처에 워크플로우를 적용하는 데 어려움이 있었던 문제를 해결합니다.

주요 변경 사항

  • 새로운 모드 deploy 추가로 배포 전용 화면을 구분하여 제공
  • ChatHeader에 배포 버튼 추가 및 배포 모달 오픈 이벤트 연결
  • 배포 정보 모달(DeploymentModal) 컴포넌트 구현
    • 웹페이지 탭: 독립된 웹페이지 URL 제공 및 복사 기능
    • API 연동 탭: Python 및 JavaScript 예제 코드 제공
    • 접근성 고려, 포커스 관리 및 ESC 키로 모달 닫기 기능 구현
  • 스타일(DeploymentModal.module.scss 및 기존 ChatInterface.module.scss 확장) 추가
  • 독립 실행형 배포 페이지(/chatbot/[chatId]/page.tsx) 구현
    • URL 파라미터로 워크플로우 ID와 이름을 받아 채팅 인터페이스를 배포 모드로 렌더링
    • 로딩, 오류 처리 UI 추가

- Introduce DeploymentModal component to display deployment details
- Add deploy button in ChatHeader to open the deployment modal
- Include API usage code snippets (Python and JavaScript) and
  independent web page URL with copy functionality
- Style deployment modal and related UI elements in ChatInterface.module.scss
- Integrate modal state and handlers in ChatInterface component
- Add baseUrl state to generate API and web page URLs dynamically based on
  current window location instead of hardcoded domain.
- Encode workflow name in URL query parameter for chatbot link.
- Implement focus management to set initial focus on close button when modal
  opens, improving accessibility.
- Remove redundant comments and clean up unused code in ChatContent component.
- Introduce 'deploy' mode in chat components and types for deployment flow
- Update ChatHeader to hide deploy button in deploy mode
- Implement DeploymentModal with tabbed interface for Website and API integration
- Add styles for close button, tabs, and tab panels in ChatInterface.module.scss
- Fix API endpoint and example code in DeploymentModal for workflow execution
- Update standalone chat page to use deploy mode and pass required props
@haesookimDev haesookimDev self-assigned this Jul 22, 2025
@haesookimDev haesookimDev merged commit 1bb00c1 into main Jul 22, 2025
4 checks passed
@haesookimDev haesookimDev deleted the feature/deploy branch July 22, 2025 01:07
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant