JantonioFC/skillsbank

채팅 UI 컴포넌트

ui.inference.sh의 채팅 빌딩 블록입니다.

빠른 시작

# 채팅 컴포넌트 설치
npx shadcn@latest add https://ui.inference.sh/r/chat.json

컴포넌트

채팅 컨테이너

import { ChatContainer } from "@/registry/blocks/chat/chat-container"

<ChatContainer>
  {/* 메시지가 여기에 위치 */}
</ChatContainer>

메시지

import { ChatMessage } from "@/registry/blocks/chat/chat-message"

<ChatMessage
  role="user"
  content="안녕하세요, 어떻게 도와드릴까요?"
/>

<ChatMessage
  role="assistant"
  content="다양한 일을 도와드릴 수 있습니다!"
/>

채팅 입력

import { ChatInput } from "@/registry/blocks/chat/chat-input"

<ChatInput
  onSubmit={(message) => handleSend(message)}
  placeholder="메시지를 입력하세요..."
  disabled={isLoading}
/>

타이핑 표시기

import { TypingIndicator } from "@/registry/blocks/chat/typing-indicator"

{isTyping && <TypingIndicator />}

전체 예제

import {
  ChatContainer,
  ChatMessage,
  ChatInput,
  TypingIndicator,
} from "@/registry/blocks/chat"

export function Chat() {
  const [messages, setMessages] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  const handleSend = async (content: string) => {
    setMessages(prev => [...prev, { role: 'user', content }])
    setIsLoading(true)
    // API로 전송...
    setIsLoading(false)
  }

  return (
    <ChatContainer>
      {messages.map((msg, i) => (
        <ChatMessage key={i} role={msg.role} content={msg.content} />
      ))}
      {isLoading && <TypingIndicator />}
      <ChatInput onSubmit={handleSend} disabled={isLoading} />
    </ChatContainer>
  )
}

메시지 변형

역할	설명
user	사용자 메시지 (오른쪽 정렬)
assistant	AI 응답 (왼쪽 정렬)
system	시스템 메시지 (가운데 정렬)

스타일링

컴포넌트는 Tailwind CSS와 shadcn/ui 디자인 토큰을 사용합니다:

<ChatMessage
  role="assistant"
  content="안녕하세요!"
  className="bg-muted"
/>

관련 스킬

# 전체 에이전트 컴포넌트 (권장)
npx skills add inference-sh/skills@agent-ui

# 선언적 위젯
npx skills add inference-sh/skills@widgets-ui

# 마크다운 렌더링
npx skills add inference-sh/skills@markdown-ui

문서

• 에이전트와 채팅하기 - 채팅 인터페이스 구축
• 에이전트 UX 패턴 - 채팅 UX 모범 사례
• 실시간 스트리밍 - 스트리밍 응답

컴포넌트 문서: ui.inference.sh/blocks/chat