AI Prompt Input

AI에게 질문하거나 코멘트를 남기는 입력 폼. 글 입력, 파일 첨부, 에이전트 선택, 보내기·중지를 한 덩어리로 묶었습니다.

shadcn/ui · Textarea shadcn/ui · Dropdown Menu shadcn/ui · Button

UI만 제공합니다. AI 호출과 응답 생성은 들어 있지 않습니다. 입력한 내용은 onSubmit으로 넘겨 줄 뿐이니, 실제 AI 연결(요청 보내기, 응답 받기·스트리밍)은 서비스에서 구현해 주세요. 미리보기의 응답 대기는 화면을 보여 주기 위한 데모입니다. 서버의 /api/llm/chat까지 이어 둔 예는 API Key Input 문서의 LlmPlayground를 참고하세요.

AI에게 질문하거나 코멘트를 남기는 입력 폼입니다. 여러 줄 입력, 파일 첨부, 에이전트(모델) 선택, 보내기와 응답 중지를 한 덩어리로 묶었고, 입력창에 포커스가 있거나 응답을 기다리는 동안 아래쪽에 부드러운 컬러 글로우가 켜집니다. 서버 호출은 하지 않고 입력한 내용만 onSubmit으로 넘깁니다.

Preview

질문을 입력하고 Enter를 눌러 보세요. 3초 동안 "생각 중" 표시와 글로우가 나오고, 그 사이 중지 버튼을 누를 수 있습니다.

안녕하세요! 무엇을 도와드릴까요? 아래 입력창에 질문을 남겨 보세요.

tsx

<AiPromptInput
  onSubmit={(message, files) => ask(message, files)}
  pending={isPending}
  onStop={stop}
  agents={agents}
  agent={agent}
  onAgentChange={setAgent}
/>

What users can do

동작	방법
질문 입력	입력창에 글을 쓰면 줄이 늘어납니다(최대 약 8줄까지, 그 이상은 안에서 스크롤).
보내기	Enter 또는 ↑ 버튼. 줄바꿈은 Shift + Enter.
파일 첨부	클립 버튼으로 고르거나 입력창에 파일을 끌어다 놓습니다. 첨부한 파일은 입력창 위에 칩으로 나타나고 ✕로 뺄 수 있습니다.
에이전트 선택	알약 모양 버튼을 눌러 목록에서 고릅니다. 각 항목에 설명이 함께 나옵니다.
응답 중지	응답을 기다리는 동안 ↑ 버튼이 ■ 중지 버튼으로 바뀝니다.
글자 수 확인	최대 글자 수의 80%를 넘으면 오른쪽에 "1650/2000"이 나타납니다.

Keyboard

Enter: 보내기. 한글을 입력하는 중(글자 조합 중)에는 글자 확정이므로 보내지 않습니다.
Shift + Enter: 줄바꿈.
Tab: 첨부 버튼 → 에이전트 선택 → 보내기 순서로 이동합니다.

Attachments

첨부는 선택 기능입니다. 형식, 크기, 개수를 정해 둘 수 있고, 조건에 맞지 않는 파일은 담기지 않고 이유가 빨간 글씨로 나옵니다.

tsx

<AiPromptInput
  onSubmit={ask}
  accept="image/*,.pdf"
  maxSizeMB={5}
  maxFiles={3}
/>

첨부를 쓰지 않으면 attachments={false}로 버튼을 숨깁니다.
입력창 자체에 파일을 끌어다 놓을 수 있습니다. 끌어다 놓는 큰 첨부 영역이 따로 필요하다면 File Dropzone을 쓰세요.
브라우저의 검사는 편의일 뿐입니다. 서버가 형식·크기·내용을 다시 검사해야 합니다.

Agent select

에이전트(또는 모델)가 여러 개일 때 agents를 주면 선택 버튼이 나타납니다. 선택은 부모가 들고 있습니다(agent, onAgentChange).

tsx

const agents = [
  { id: "auto", label: "Agent (auto)", description: "질문에 맞는 방식을 자동으로 고릅니다" },
  { id: "fast", label: "빠른 답변" },
];

<AiPromptInput agents={agents} agent={agent} onAgentChange={setAgent} onSubmit={ask} />

Pending & stop

pending이 true이면 보내기가 잠기고, 아래 글로우가 켜집니다.
onStop을 주면 보내기 버튼이 중지 버튼으로 바뀝니다. 누르면 요청을 취소하는 코드를 호출하세요(예: AbortController.abort()).
응답을 기다리는 동안 대화 영역에는 Thinking Indicator를 함께 보여 주는 것을 권장합니다.

Glow

입력창 아래의 색 번짐은 포커스가 있을 때와 응답을 기다릴 때만 은은하게 켜지고, 7초 주기로 천천히 흘러갑니다. 색은 포인트 블루, 라일락, 피치, 민트를 섞었습니다. 끄려면 glow={false}입니다. meerkit.config.ts의 motion: false이거나 OS에서 "동작 줄이기"를 켰다면 움직임은 멈춥니다.

Connect to your server

입력 폼은 서버를 모릅니다. 보낸 글을 받아 서버에 요청하고, 응답을 화면에 이어 붙이는 일은 서비스가 합니다. 스트리밍 응답을 받는 예시입니다.

tsx

const controller = useRef<AbortController | null>(null);

async function ask(message: string, files: File[]) {
  const form = new FormData();
  form.append("message", message);
  files.forEach((f) => form.append("files", f));

  controller.current = new AbortController();
  setPending(true);
  const res = await fetch("/api/chat", {
    method: "POST",
    body: form,
    headers: { Authorization: `Bearer ${useAuthStore.getState().accessToken}` },
    signal: controller.current.signal,
  });
  const reader = res.body!.getReader(); // 답이 오는 대로 읽어 화면에 이어 붙인다
  // ...
  setPending(false);
}

<AiPromptInput onSubmit={ask} pending={pending} onStop={() => controller.current?.abort()} />

AI 호출 키와 모델 설정은 서버에만 두세요. 브라우저에서 직접 AI 서비스를 호출하면 키가 노출됩니다. 사용자가 보낸 파일·글은 서버에서 검사하고 한도를 두어야 합니다.

Props

Prop	Type	설명
`onSubmit`필수	`(message: string, files: File[]) => void`	보내기를 누르면 글(앞뒤 공백 제거)과 첨부파일을 전달합니다. 호출 뒤 입력창이 비워집니다.
`pending`	`boolean`	응답을 기다리는 중. 보내기를 잠그고 글로우를 켭니다.
`onStop`	`() => void`	주면 pending 중에 중지 버튼이 나타납니다.
`placeholder`	`string`	안내 문구. 기본 "무엇이든 물어보세요".
`agents`	`{ id, label, description? }[]`	고를 수 있는 에이전트. 없으면 선택 버튼이 없습니다.
`agent / onAgentChange`	`string / (id) => void`	선택된 에이전트 id와 바뀔 때의 콜백.
`maxLength`	`number`	최대 글자 수. 기본 2000.
`attachments`	`boolean`	첨부 버튼 표시. 기본 true.
`accept / maxFiles / maxSizeMB`	`string / number / number`	첨부 형식, 최대 개수(기본 4), 파일당 최대 크기(기본 10MB).
`minFiles`	`number`	보내려면 첨부해야 하는 최소 파일 수. 못 채우면 보내기가 잠깁니다. 기본 0.
`requireText`	`boolean`	false면 글 없이 파일만으로도 보낼 수 있습니다. 기본 true.
`submitLabel`	`string`	보내기 버튼에 화살표 대신 보여 줄 글자. 예: "분류 시작".
`glow`	`boolean`	컬러 글로우. 기본 true.
`disabled / autoFocus / className`	`boolean / boolean / string`	잠금, 자동 포커스, 추가 클래스.

Accessibility

입력창에 aria-label="AI에게 보낼 메시지", 아이콘 버튼에는 파일 첨부, 보내기, 응답 중지, 에이전트 선택 이름이 있습니다.
글로우는 장식이라 스크린리더에서 숨겨지고, 첨부 오류는 role="alert"로 읽힙니다.
에이전트 목록은 Radix Dropdown Menu라 방향키, Esc가 동작합니다.