Agentic UI/SeminarChatPanel

SeminarChatPanel

채팅 기반 세미나 정보 추가 패널입니다. URL, 텍스트, 파일에서 세미나 정보를 추출하고 등록할 수 있습니다.

Installation

bash

npx axis-cli add seminar-chat-panel

Preview

세미나 추가

안녕하세요! 세미나 정보를 추가해드릴게요. URL을 붙여넣거나, 세미나 정보를 입력해주세요.

https://festa.io/events/12345

1개의 세미나를 찾았습니다.

Usage

tsx

import { SeminarChatPanel } from '@ax/ui'
import { useState } from 'react'

export function Example() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        세미나 추가
      </Button>

      <SeminarChatPanel
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSeminarAdded={(seminars) => {
          console.log('Added:', seminars)
        }}
        onChatSubmit={async (message, files) => {
          // API 호출
          const response = await fetch('/api/seminar/extract', {
            method: 'POST',
            body: JSON.stringify({ message, files }),
          })
          return response.body // SSE 스트림
        }}
        onConfirmSeminars={async (seminars, playId) => {
          await fetch('/api/seminar/confirm', {
            method: 'POST',
            body: JSON.stringify({ seminars, playId }),
          })
        }}
        onUploadFiles={async (files, playId) => {
          const formData = new FormData()
          files.forEach(f => formData.append('files', f))
          const response = await fetch('/api/seminar/upload', {
            method: 'POST',
            body: formData,
          })
          return response.json()
        }}
      />
    </>
  )
}

Features

URL 자동 추출

세미나 URL을 입력하면 자동으로 제목, 일시, 주최자 등을 추출합니다.

파일 업로드

이미지, PDF, 문서 파일에서 OCR을 통해 세미나 정보를 추출합니다.

실시간 스트리밍

SSE를 통해 추출 진행 상황을 실시간으로 표시합니다.

선택적 등록

추출된 세미나 중 원하는 것만 선택하여 등록할 수 있습니다.

Props

Prop	Type	Default	Description
`isOpen*`	`boolean`	-	패널 열림 상태
`onClose*`	`() => void`	-	닫기 핸들러
`onSeminarAdded`	`(seminars: SeminarExtractResult[]) => void`	-	세미나 추가 완료 콜백
`onChatSubmit*`	`(message: string, files?: File[]) => Promise<...>`	-	채팅 제출 핸들러
`onConfirmSeminars*`	`(seminars: SeminarExtractResult[], playId?: string) => Promise<void>`	-	세미나 확인 핸들러
`onUploadFiles*`	`(files: File[], playId?: string) => Promise<...>`	-	파일 업로드 핸들러

SeminarExtractResult Interface

Prop	Type	Default	Description
`title*`	`string`	-	세미나 제목
`description`	`string \| null`	null	세미나 설명
`date`	`string \| null`	null	일시
`organizer`	`string \| null`	null	주최자
`url`	`string \| null`	null	URL
`categories`	`string[]`	[]	카테고리 목록
`confidence*`	`number`	-	추출 신뢰도 (0-1)

ChatSSEEvent Type

tsx

interface ChatSSEEvent {
  type: 'start' | 'progress' | 'info' | 'extracted' | 'complete' | 'error'
  message?: string
  seminars?: SeminarExtractResult[]
  count?: number
  timestamp?: string
}