1c:I[88678,["8500","static/chunks/8500-01a63dafd809e317.js","3725","static/chunks/3725-be3b13624e57ea5e.js","7645","static/chunks/7645-1ca8d29f22f0cbd8.js","9695","static/chunks/9695-49a7c029c38ce6ae.js","2555","static/chunks/2555-020d9d4ba9c21dc0.js","1393","static/chunks/1393-48599a8a8db9f264.js","294","static/chunks/app/library/%5Bslug%5D/page-2b5adbfbd5144294.js"],"LibraryDetail"] 1f:I[86869,[],"IconMark"] 1d:T5e0b,"use client"; import { useEffect, useRef, useState, type HTMLAttributes, type KeyboardEvent, type ReactNode } from "react"; import { ArrowUp, Check, Copy, RotateCcw, Sparkles, Square } from "lucide-react"; export type ChatPart = { type: "text"; content: string } | { type: "code"; content: string; lang?: string }; export type ChatMessage = { id: number; role: "user" | "assistant"; parts: ChatPart[]; visible?: number }; type Phase = "idle" | "thinking" | "streaming"; export interface AiChatPanelProps extends HTMLAttributes { /** 튜터 이름 */ name?: string; /** 이름 옆 배지 */ badge?: string; /** 첫 인사말 */ greeting?: string; /** 답변 아래에 띄우는 추천 질문 칩 */ suggestions?: string[]; /** 질문을 받아 답변 조각(글·코드)을 돌려줍니다. 실제 AI API를 연결하는 자리예요. */ getReply?: (question: string) => ChatPart[] | Promise; /** true면 예시 대화를 깔아 두고, 아무도 만지지 않는 동안 스스로 대화를 이어 갑니다. */ demo?: boolean; /** 패널 높이 (예: 560, "70vh") */ height?: number | string; } const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const prefersReduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; const lengthOf = (parts: ChatPart[]) => parts.reduce((sum, part) => sum + part.content.length, 0); const REPLIES: { keys: string[]; parts: ChatPart[] }[] = [ { keys: ["usestate", "상태"], parts: [ { type: "text", content: "화면에 보이는 값이 바뀌어야 할 때 써요. set 함수로 값을 바꾸면 React가 화면을 다시 그려 줘요." }, { type: "code", lang: "tsx", content: "const [count, setCount] = useState(0);\nsetCount(count + 1); // 화면이 갱신돼요" }, ], }, { keys: ["버튼", "tailwind", "꾸미"], parts: [ { type: "text", content: "className에 유틸리티를 이어 붙이면 돼요. 앞에 hover:를 붙이면 마우스를 올렸을 때만 적용돼요." }, { type: "code", lang: "tsx", content: '' }, ], }, { keys: ["컴포넌트"], parts: [{ type: "text", content: "화면을 레고 블록처럼 나눈 조각이에요. 버튼·카드처럼 되풀이되는 부분을 함수 하나로 만들고, props로 내용만 바꿔 끼워요." }] }, { keys: ["배포"], parts: [{ type: "text", content: "GitHub 저장소를 Vercel에 연결하면 push할 때마다 자동으로 배포돼요. 그 전에 npm run build가 통과하는지 꼭 확인하세요!" }] }, { keys: ["에러", "오류"], parts: [{ type: "text", content: "첫 줄에서 '무엇이' 틀렸는지, 파일:줄 번호에서 '어디서' 틀렸는지부터 읽어요. 그 두 줄을 그대로 붙여 넣어 주셔도 좋아요." }] }, { keys: ["api", "키"], parts: [{ type: "text", content: "API 키는 .env.local 파일에 넣고 process.env로 읽어요. 이 파일은 .gitignore에 넣어 저장소에 올라가지 않게 해 주세요." }] }, ]; function demoReply(question: string): ChatPart[] { const q = question.toLowerCase(); const found = REPLIES.find(reply => reply.keys.some(key => q.includes(key))); return found?.parts ?? [{ type: "text", content: `"${question}" 좋은 질문이에요! 만들고 싶은 화면을 한 문장으로 적고, 필요한 상태와 버튼부터 같이 정리해 봐요.` }]; } // 아무도 만지지 않을 때 저절로 재생되는 대화. via: 바로 보내기 · 입력창에 타이핑 · 추천 칩 누르기 const DEMO_QUESTION = "useState는 언제 써요?"; const DEMO_SCRIPT: { text: string; via: "send" | "type" | "chip" }[] = [ { text: "버튼을 예쁘게 꾸미려면?", via: "send" }, { text: "컴포넌트는 뭐예요?", via: "type" }, { text: "배포는 어떻게 해요?", via: "chip" }, ]; function startMessages(greeting: string, demo: boolean): ChatMessage[] { const hello: ChatMessage = { id: 0, role: "assistant", parts: [{ type: "text", content: greeting }] }; if (!demo) return [hello]; return [hello, { id: 1, role: "user", parts: [{ type: "text", content: DEMO_QUESTION }] }, { id: 2, role: "assistant", parts: demoReply(DEMO_QUESTION) }]; } // 아주 작은 하이라이터: split에 캡처 그룹을 쓰면 홀수 번째 조각이 토큰이라 색만 입히면 돼요. // 따옴표가 아직 안 닫힌 문자열("…)도 잡아서, 스트리밍 중에도 색이 깜빡이지 않아요. const TOKEN = /(\/\/.*|"[^"\n]*"?|'[^'\n]*'?|=>|\b(?:const|let|return|function|import|from|export|npm|run)\b|\b\d+\b|<\/?[A-Za-z][\w.]*|\/?>)/g; function highlight(code: string) { return code.split(TOKEN).map((chunk, index) => { if (index % 2 === 0 || !chunk) return chunk; const color = chunk.startsWith("//") ? "text-slate-500" : /^["']/.test(chunk) ? "text-emerald-300" : /^\d/.test(chunk) ? "text-amber-300" : /^<|^\/?>$/.test(chunk) ? "text-sky-300" : "text-fuchsia-300"; return ( {chunk} ); }); } // 1순위 Clipboard API → 2순위 execCommand → 그래도 막히면 코드를 선택해 두고 Ctrl+C를 안내해요. async function copyText(text: string, fallbackTarget: HTMLElement | null) { try { await navigator.clipboard.writeText(text); return true; } catch { const active = document.activeElement as HTMLElement | null; const area = document.createElement("textarea"); area.value = text; area.style.cssText = "position:fixed;opacity:0"; document.body.append(area); area.select(); let ok = false; try { ok = document.execCommand("copy"); } catch {} area.remove(); active?.focus(); if (!ok && fallbackTarget) { const range = document.createRange(); range.selectNodeContents(fallbackTarget); window.getSelection()?.removeAllRanges(); window.getSelection()?.addRange(range); } return ok; } } function Avatar({ large = false }: { large?: boolean }) { return ( {large && } ); } function CodeBlock({ code, full, lang = "code", caret }: { code: string; full: string; lang?: string; caret: ReactNode }) { const [copied, setCopied] = useState(null); const codeRef = useRef(null); const timer = useRef>(undefined); useEffect(() => () => clearTimeout(timer.current), []); async function copy() { setCopied(await copyText(full, codeRef.current)); clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(null), 1800); } return (

{lang}

{/* 오른쪽 끝을 살짝 흐리게 해 좁은 화면에서 '옆으로 더 있다'는 걸 알려 줘요. */}

        
          {highlight(code)}
          {caret}

); } // 스트리밍의 핵심: 지금까지 공개된 글자 수(visible)만큼만 조각들을 앞에서부터 잘라 보여 줘요. function MessageBody({ message, streaming }: { message: ChatMessage; streaming: boolean }) { const nodes: ReactNode[] = []; let budget = message.visible ?? Infinity; for (let index = 0; index < message.parts.length && budget > 0; index++) { const part = message.parts[index]; const shown = part.content.slice(0, budget); budget -= part.content.length; const caret = streaming && budget <= 0 ? : null; nodes.push( part.type === "code" ? ( ) : (

{shown} {caret}

), ); } return <>{nodes}; } export function AiChatPanel({ name = "코디", badge = "AI 튜터", greeting = "안녕하세요! 코딩하다 막히는 부분을 물어보세요. 예제 코드와 함께 설명해 드릴게요.", suggestions = ["배포는 어떻게 해요?", "에러 읽는 법", "API 키 보관"], getReply = demoReply, demo = true, height = 560, className = "", style, ...props }: AiChatPanelProps) { const [messages, setMessages] = useState(() => startMessages(greeting, demo)); const [draft, setDraft] = useState(""); const [phase, setPhase] = useState("idle"); const [pressed, setPressed] = useState(null); const [fading, setFading] = useState(false); const listRef = useRef(null); const inputRef = useRef(null); const nextId = useRef(3); const busy = useRef(false); const stopped = useRef(false); const alive = useRef(true); const stickToBottom = useRef(true); const tookOver = useRef(false); useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []); // 새 글자가 붙을 때마다 맨 아래로. 단, 사용자가 위로 스크롤해 읽는 중이면 건드리지 않아요. useEffect(() => { const list = listRef.current; if (list && stickToBottom.current) list.scrollTop = list.scrollHeight; }, [messages, phase]); // 입력창 자동 높이: 높이를 auto로 풀었다가 내용 높이(scrollHeight)에 맞춰요. 최대 5줄. useEffect(() => { const box = inputRef.current; if (!box) return; box.style.height = "auto"; box.style.height = `${Math.min(box.scrollHeight, 120)}px`; }, [draft]); async function send(text: string, fromScript = false) { const question = text.trim(); if (!question || busy.current) return; busy.current = true; stopped.current = false; stickToBottom.current = true; const reduce = prefersReduced(); const userId = nextId.current++; setDraft(""); setMessages(list => [...list, { id: userId, role: "user", parts: [{ type: "text", content: question }] }]); setPhase("thinking"); let parts: ChatPart[]; try { [parts] = await Promise.all([getReply(question), sleep(reduce ? 300 : 1000)]); } catch { parts = [{ type: "text", content: "답변을 가져오지 못했어요. 잠시 뒤 다시 시도해 주세요." }]; } if (!alive.current) return; const id = nextId.current++; const total = lengthOf(parts); let shown = reduce ? total : 0; setMessages(list => [...list, { id, role: "assistant", parts, visible: shown }]); setPhase("streaming"); // 토큰 스트리밍 흉내: 30~70ms마다 1~3글자씩 공개해요. 실제 API라면 받은 조각 길이만큼 늘리면 돼요. // 자동 재생 중이던 답변은 사용자가 끼어드는 순간 끝까지 한 번에 보여 주고 입력을 넘겨줘요. while (shown < total && !stopped.current && alive.current) { await sleep(30 + Math.random() * 40); shown = fromScript && tookOver.current ? total : Math.min(total, shown + 1 + Math.floor(Math.random() * 3)); const visible = shown; setMessages(list => list.map(message => (message.id === id ? { ...message, visible } : message))); } busy.current = false; if (alive.current) setPhase("idle"); } // 사용자가 패널을 만지는 순간 자동 재생을 멈추고, 대신 치던 글자도 지워요. function takeOver() { if (tookOver.current) return; tookOver.current = true; setPressed(null); setFading(false); if (!busy.current) setDraft(""); } useEffect(() => { if (!demo || prefersReduced()) return; let cancelled = false; const idle = () => !cancelled && !tookOver.current; async function play() { for (let round = 0; idle(); round++) { await sleep(round === 0 ? 150 : 1400); for (const { text: question, via } of DEMO_SCRIPT) { if (!idle()) return; if (via === "chip" && suggestions.includes(question)) { setPressed(question); await sleep(420); setPressed(null); } else if (via !== "send") { for (let i = 1; i <= question.length; i++) { if (!idle()) return; setDraft(question.slice(0, i)); await sleep(55 + Math.random() * 45); } await sleep(450); } if (!idle()) return; await send(question, true); await sleep(2600); } await sleep(600); if (!idle()) return; // 한 바퀴가 끝나면 살짝 흐려졌다가 처음 대화로 돌아가요. setFading(true); await sleep(400); if (!idle()) return; stickToBottom.current = true; setMessages(startMessages(greeting, true)); setFading(false); } } play(); return () => { cancelled = true; }; // 처음 마운트될 때 한 번만 재생을 시작해요. (props가 바뀌어도 다시 시작하지 않음) // eslint-disable-next-line react-hooks/exhaustive-deps }, []); function handleKeyDown(event: KeyboardEvent) { // Shift+Enter는 줄바꿈. 한글 조합 중의 Enter는 글자 확정용이라 보내지 않아요. if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return; event.preventDefault(); send(draft); } function restart() { takeOver(); stickToBottom.current = true; setMessages(startMessages(greeting, false)); inputRef.current?.focus(); } const working = phase !== "idle"; const asked = new Set(messages.filter(message => message.role === "user").map(message => message.parts[0].content)); const chips = suggestions.filter(suggestion => !asked.has(suggestion)); return (

{name} {badge}

{working ? ( <> 답변을 쓰는 중… ) : ( <> 온라인 · 보통 2초 안에 답해요 )}

{ const list = event.currentTarget; stickToBottom.current = list.scrollHeight - list.scrollTop - list.clientHeight < 40; }} className={`flex flex-1 flex-col gap-3.5 overflow-y-auto overscroll-contain px-4 py-3.5 transition-opacity [mask-image:linear-gradient(to_bottom,transparent,#000_20px)] duration-300 ${fading ? "opacity-0" : ""}`} > {messages.map(message => message.role === "user" ? (

{message.parts[0].content}

) : (

), )} {phase === "thinking" && (

{name}가 답변을 준비하고 있어요 {[0, 1, 2].map(dot => ( ))}

)} {!working && !fading && chips.length > 0 && (

{chips.map(suggestion => ( ))}

)}

{name}에게 보낼 메시지 (Enter로 보내고 Shift+Enter로 줄바꿈)

setDraft(event.currentTarget.value)}
              onKeyDown={handleKeyDown}
              placeholder={`${name}에게 무엇이든 물어보세요`}
              className="block max-h-[120px] w-full resize-none bg-transparent py-1.5 text-[14px] leading-5 text-white outline-none placeholder:text-slate-500"
            />
          </label>
          {working ? (
            <button
              type="button"
              onClick={() => (stopped.current = true)}
              aria-label="답변 멈추기"
              className="grid size-9 shrink-0 place-items-center rounded-xl bg-white/10 text-white transition hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-violet-300"
            >
              <Square className="size-3.5 fill-current" />
            </button>
          ) : (
            <button
              type="button"
              onClick={() => send(draft)}
              disabled={!draft.trim()}
              aria-label="보내기"
              className="grid size-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-violet-500 to-indigo-500 text-white shadow-[0_6px_20px_-4px_rgba(139,92,246,.8)] transition hover:brightness-110 focus-visible:outline-2 focus-visible:outline-violet-300 active:scale-95 disabled:bg-none disabled:bg-white/[0.06] disabled:text-slate-500 disabled:shadow-none"
            >
              <ArrowUp className="size-[18px]" />
            </button>
          )}
        </div>
        <p aria-hidden className="mt-2 hidden justify-center gap-1 text-[11px] text-slate-500 [@media(min-height:480px)]:flex">
          <kbd className="font-sans text-slate-400">Enter</kbd> 보내기 · <kbd className="font-sans text-slate-400">Shift + Enter</kbd> 줄바꿈
        </p>
      </div>

export default AiChatPanel;1e:Tf188,<style>*,::before,::after,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}body{font-family:inherit;line-height:inherit}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}ol,ul,menu{list-style:none}img,svg,video,canvas,iframe{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;color:inherit;letter-spacing:inherit;background-color:transparent;border-radius:0;opacity:1}button,[role=button]{cursor:pointer}::placeholder{opacity:1;color:color-mix(in oklab,currentcolor 50%,transparent)}textarea{resize:vertical}[hidden]:where(:not([hidden=until-found])){display:none!important}#root{min-height:100vh}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-outline-style:solid}}}:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-amber-300:oklch(87.9% .169 91.605);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-sky-300:oklch(82.8% .111 230.318);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-violet-100:oklch(94.3% .029 294.588);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-300:oklch(81.1% .111 293.571);--color-violet-400:oklch(70.2% .183 293.541);--color-violet-500:oklch(60.6% .25 292.717);--color-violet-950:oklch(28.3% .141 291.089);--color-fuchsia-300:oklch(83.3% .145 321.434);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-relaxed:1.625;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.-inset-1{inset:calc(var(--spacing) * -1)}.inset-0{inset:0}.inset-\[2px\]{inset:2px}.inset-x-0{inset-inline:0}.top-0{top:0}.-right-0\.5{right:calc(var(--spacing) * -.5)}.-bottom-0\.5{bottom:calc(var(--spacing) * -.5)}.isolate{isolation:isolate}.-z-10{z-index:calc(10 * -1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-\[18px\]{width:18px;height:18px}.h-48{height:calc(var(--spacing) * 48)}.h-\[1\.05em\]{height:1.05em}.max-h-\[120px\]{max-height:120px}.min-h-screen{min-height:100vh}.w-\[7px\]{width:7px}.w-full{width:100%}.max-w-\[82\%\]{max-width:82%}.max-w-\[88\%\]{max-width:88%}.max-w-\[480px\]{max-width:480px}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-y-\[3px\]{--tw-translate-y:3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[2px\]{border-radius:2px}.rounded-\[26px\]{border-radius:26px}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tl-md{border-top-left-radius:var(--radius-md)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[\#0e1022\]{border-color:#0e1022}.border-violet-300\/70{border-color:#c4b4ffb3}@supports (color:color-mix(in lab, red, red)){.border-violet-300\/70{border-color:color-mix(in oklab, var(--color-violet-300) 70%, transparent)}}.border-violet-400\/25{border-color:#a685ff40}@supports (color:color-mix(in lab, red, red)){.border-violet-400\/25{border-color:color-mix(in oklab, var(--color-violet-400) 25%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/\[0\.06\]{border-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.06\]{border-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.border-white\/\[0\.07\]{border-color:#ffffff12}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.07\]{border-color:color-mix(in oklab, var(--color-white) 7.0%, transparent)}}.bg-\[\#0b0c1d\]{background-color:#0b0c1d}.bg-\[\#05060f\]{background-color:#05060f}.bg-\[\#14162c\]{background-color:#14162c}.bg-\[\#070816\]{background-color:#070816}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-transparent{background-color:#0000}.bg-violet-300{background-color:var(--color-violet-300)}.bg-violet-400{background-color:var(--color-violet-400)}.bg-violet-500{background-color:var(--color-violet-500)}.bg-violet-500\/10{background-color:#8d54ff1a}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/10{background-color:color-mix(in oklab, var(--color-violet-500) 10%, transparent)}}.bg-violet-500\/15{background-color:#8d54ff26}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/15{background-color:color-mix(in oklab, var(--color-violet-500) 15%, transparent)}}.bg-violet-500\/30{background-color:#8d54ff4d}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/30{background-color:color-mix(in oklab, var(--color-violet-500) 30%, transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.bg-white\/\[0\.015\]{background-color:#ffffff04}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.015\]{background-color:color-mix(in oklab, var(--color-white) 1.5%, transparent)}}.bg-white\/\[0\.045\]{background-color:#ffffff0b}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.045\]{background-color:color-mix(in oklab, var(--color-white) 4.5%, transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[conic-gradient$\#a78bfa\,\#22d3ee\,\#f472b6\,\#a78bfa$\]{background-image:conic-gradient(#a78bfa,#22d3ee,#f472b6,#a78bfa)}.bg-\[radial-gradient$70\%_100\%_at_20\%_0\%\,rgba\(139\,92\,246\,\.2$\,transparent\)\]{background-image:radial-gradient(70% 100% at 20% 0,#8b5cf633,#0000)}.bg-\[radial-gradient$ellipse_at_12\%_8\%\,\#2a1d6b\,transparent_55\%$\,radial-gradient$ellipse_at_92\%_96\%\,\#0e2c52\,transparent_50\%$\]{background-image:radial-gradient(at 12% 8%,#2a1d6b,#0000 55%),radial-gradient(at 92% 96%,#0e2c52,#0000 50%)}.from-violet-500{--tw-gradient-from:var(--color-violet-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-indigo-500{--tw-gradient-to:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-indigo-600{--tw-gradient-to:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.\[mask-image\:linear-gradient$to_bottom\,transparent\,\#000_20px$\]{-webkit-mask-image:linear-gradient(#0000,#000 20px);mask-image:linear-gradient(#0000,#000 20px)}.\[mask-image\:linear-gradient$to_left\,transparent\,\#000_20px$\]{-webkit-mask-image:linear-gradient(270deg,#0000,#000 20px);mask-image:linear-gradient(270deg,#0000,#000 20px)}.fill-current{fill:currentColor}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-4{padding:calc(var(--spacing) * 4)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-px{padding-block:1px}.pt-2{padding-top:calc(var(--spacing) * 2)}.pr-1{padding-right:var(--spacing)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-3\.5{padding-left:calc(var(--spacing) * 3.5)}.pl-\[38px\]{padding-left:38px}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.break-keep{word-break:keep-all}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-300{color:var(--color-amber-300)}.text-emerald-300{color:var(--color-emerald-300)}.text-fuchsia-300{color:var(--color-fuchsia-300)}.text-sky-300{color:var(--color-sky-300)}.text-slate-200{color:var(--color-slate-200)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-violet-100{color:var(--color-violet-100)}.text-violet-200{color:var(--color-violet-200)}.text-violet-300{color:var(--color-violet-300)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.shadow-\[0_6px_20px_-4px_rgba$139\,92\,246\,\.8$\]{--tw-shadow:0 6px 20px -4px var(--tw-shadow-color,#8b5cf6cc);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_40px_100px_-30px_rgba$91\,33\,182\,\.6$\]{--tw-shadow:0 40px 100px -30px var(--tw-shadow-color,#5b21b699);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-violet-950\/40{--tw-shadow-color:#2f0d6866}@supports (color:color-mix(in lab, red, red)){.shadow-violet-950\/40{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-violet-950) 40%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-violet-400\/25{--tw-ring-color:#a685ff40}@supports (color:color-mix(in lab, red, red)){.ring-violet-400\/25{--tw-ring-color:color-mix(in oklab, var(--color-violet-400) 25%, transparent)}}.ring-white\/\[0\.07\]{--tw-ring-color:#ffffff12}@supports (color:color-mix(in lab, red, red)){.ring-white\/\[0\.07\]{--tw-ring-color:color-mix(in oklab, var(--color-white) 7.0%, transparent)}}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.placeholder\:text-slate-500::placeholder{color:var(--color-slate-500)}.focus-within\:border-violet-400\/60:focus-within{border-color:#a685ff99}@supports (color:color-mix(in lab, red, red)){.focus-within\:border-violet-400\/60:focus-within{border-color:color-mix(in oklab, var(--color-violet-400) 60%, transparent)}}.focus-within\:bg-white\/\[0\.06\]:focus-within{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.focus-within\:bg-white\/\[0\.06\]:focus-within{background-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.focus-within\:ring-4:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-violet-500\/15:focus-within{--tw-ring-color:#8d54ff26}@supports (color:color-mix(in lab, red, red)){.focus-within\:ring-violet-500\/15:focus-within{--tw-ring-color:color-mix(in oklab, var(--color-violet-500) 15%, transparent)}}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-violet-300\/50:hover{border-color:#c4b4ff80}@supports (color:color-mix(in lab, red, red)){.hover\:border-violet-300\/50:hover{border-color:color-mix(in oklab, var(--color-violet-300) 50%, transparent)}}.hover\:bg-violet-400:hover{background-color:var(--color-violet-400)}.hover\:bg-violet-500\/20:hover{background-color:#8d54ff33}@supports (color:color-mix(in lab, red, red)){.hover\:bg-violet-500\/20:hover{background-color:color-mix(in oklab, var(--color-violet-500) 20%, transparent)}}.hover\:bg-white\/15:hover{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/15:hover{background-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.hover\:bg-white\/\[0\.06\]:hover{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/\[0\.06\]:hover{background-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-violet-300:focus-visible{outline-color:var(--color-violet-300)}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\:bg-white\/\[0\.06\]:disabled{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.disabled\:bg-white\/\[0\.06\]:disabled{background-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.disabled\:bg-none:disabled{background-image:none}.disabled\:text-slate-500:disabled{color:var(--color-slate-500)}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-height:480px){.\[\@media$min-height\:480px$\]\:flex{display:flex}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}</style><div id="root"></div><script>(()=>{var Ce,m,Xe,Wa,G,We,Ke,Ze,Pe,pe,ee,Qe,ve,ye,Ae,Va,Le={},Ie=[],Na=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,ae=Array.isArray;function T(e,a){for(var t in a)e[t]=a[t];return e}function be(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function v(e,a,t){var o,u,l,r={};for(l in a)l=="key"?o=a[l]:l=="ref"?u=a[l]:r[l]=a[l];if(arguments.length>2&&(r.children=arguments.length>3?Ce.call(arguments,2):t),typeof e=="function"&&e.defaultProps!=null)for(l in e.defaultProps)r[l]===void 0&&(r[l]=e.defaultProps[l]);return me(e,r,o,u,null)}function me(e,a,t,o,u){var l={type:e,props:a,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:u??++Xe,__i:-1,__u:0};return u==null&&m.vnode!=null&&m.vnode(l),l}function P(e){return e.children}function F(e,a){this.props=e,this.context=a}function X(e,a){if(a==null)return e.__?X(e.__,e.__i+1):null;for(var t;a<e.__k.length;a++)if((t=e.__k[a])!=null&&t.__e!=null)return t.__e;return typeof e.type=="function"?X(e):null}function za(e){if(e.__P&&e.__d){var a=e.__v,t=a.__e,o=[],u=[],l=T({},a);l.__v=a.__v+1,m.vnode&&m.vnode(l),Be(e.__P,l,a,e.__n,e.__P.namespaceURI,32&a.__u?[t]:null,o,t??X(a),!!(32&a.__u),u),l.__v=a.__v,l.__.__k[l.__i]=l,ea(o,l,u),a.__e=a.__=null,l.__e!=t&&Je(l)}}function Je(e){if((e=e.__)!=null&&e.__c!=null)return e.__e=e.__c.base=null,e.__k.some(function(a){if(a!=null&&a.__e!=null)return e.__e=e.__c.base=a.__e}),Je(e)}function Ve(e){(!e.__d&&(e.__d=!0)&&G.push(e)&&!xe.__r++||We!=m.debounceRendering)&&((We=m.debounceRendering)||Ke)(xe)}function xe(){try{for(var e,a=1;G.length;)G.length>a&&G.sort(Ze),e=G.shift(),a=G.length,za(e)}finally{G.length=xe.__r=0}}function $e(e,a,t,o,u,l,r,f,n,s,p){var x,d,c,C,k,_,h=o&&o.__k||Ie,I=a.length;for(n=Xa(t,a,h,n,I),x=0;x<I;x++)(c=t.__k[x])!=null&&(d=c.__i!=-1&&h[c.__i]||Le,c.__i=x,_=Be(e,c,d,u,l,r,f,n,s,p),C=c.__e,c.ref&&d.ref!=c.ref&&(d.ref&&Me(d.ref,null,c),p.push(c.ref,c.__c||C,c)),k==null&&C!=null&&(k=C),4&c.__u?(n=je(c,n,e),d.__e&&(d.__e=null)):typeof c.type=="function"&&_!==void 0?n=_:C&&(n=C.nextSibling),c.__u&=-7);return t.__e=k,n}function Xa(e,a,t,o,u){var l,r,f,n,s,p=t.length,x=p,d=0;for(e.__k=new Array(u),l=0;l<u;l++)(r=a[l])!=null&&typeof r!="boolean"&&typeof r!="function"?(typeof r=="string"||typeof r=="number"||typeof r=="bigint"||r.constructor==String?r=e.__k[l]=me(null,r,null,null,null):ae(r)?r=e.__k[l]=me(P,{children:r},null,null,null):r.constructor===void 0&&r.__b>0?r=e.__k[l]=me(r.type,r.props,r.key,r.ref?r.ref:null,r.__v):e.__k[l]=r,n=l+d,r.__=e,r.__b=e.__b+1,f=null,(s=r.__i=Ka(r,t,n,x))!=-1&&(x--,(f=t[s])&&(f.__u|=2)),f==null||f.__v==null?(s==-1&&(u>p?d--:u<p&&d++),typeof r.type!="function"&&(r.__u|=4)):s!=n&&(s==n-1?d--:s==n+1?d++:(s>n?d--:d++,r.__u|=4))):e.__k[l]=null;if(x)for(l=0;l<p;l++)(f=t[l])!=null&&(2&f.__u)==0&&(f.__e==o&&(o=X(f)),ta(f,f));return o}function je(e,a,t){var o,u;if(typeof e.type=="function"){for(o=e.__k,u=0;o&&u<o.length;u++)o[u]&&(o[u].__=e,a=je(o[u],a,t));return a}e.__e!=a&&(a&&e.type&&!a.parentNode&&(a=X(e)),a=t.insertBefore(e.__e,a||null));do a=a&&a.nextSibling;while(a!=null&&a.nodeType==8);return a}function te(e,a){return a=a||[],e==null||typeof e=="boolean"||(ae(e)?e.some(function(t){te(t,a)}):a.push(e)),a}function Ka(e,a,t,o){var u,l,r,f=e.key,n=e.type,s=a[t],p=s!=null&&(2&s.__u)==0;if(s===null&&f==null||p&&f==s.key&&n==s.type)return t;if(o>(p?1:0)){for(u=t-1,l=t+1;u>=0||l<a.length;)if((s=a[r=u>=0?u--:l++])!=null&&(2&s.__u)==0&&f==s.key&&n==s.type)return r}return-1}function Ne(e,a,t){a[0]=="-"?e.setProperty(a,t??""):e[a]=t==null?"":typeof t!="number"||Na.test(a)?t:t+"px"}function ce(e,a,t,o,u){var l,r;e:if(a=="style")if(typeof t=="string")e.style.cssText=t;else{if(typeof o=="string"&&(e.style.cssText=o=""),o)for(a in o)t&&a in t||Ne(e.style,a,"");if(t)for(a in t)o&&t[a]==o[a]||Ne(e.style,a,t[a])}else if(a[0]=="o"&&a[1]=="n")l=a!=(a=a.replace(Qe,"$1")),r=a.toLowerCase(),a=r in e||a=="onFocusOut"||a=="onFocusIn"?r.slice(2):a.slice(2),e.l||(e.l={}),e.l[a+l]=t,t?o?t[ee]=o[ee]:(t[ee]=ve,e.addEventListener(a,l?Ae:ye,l)):e.removeEventListener(a,l?Ae:ye,l);else{if(u=="http://www.w3.org/2000/svg")a=a.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(a!="width"&&a!="height"&&a!="href"&&a!="list"&&a!="form"&&a!="tabIndex"&&a!="download"&&a!="rowSpan"&&a!="colSpan"&&a!="role"&&a!="popover"&&a in e)try{e[a]=t??"";break e}catch{}typeof t=="function"||(t==null||t===!1&&a[4]!="-"?e.removeAttribute(a):e.setAttribute(a,a=="popover"&&t==1?"":t))}}function ze(e){return function(a){if(this.l){var t=this.l[a.type+e];if(a[pe]==null)a[pe]=ve++;else if(a[pe]<t[ee])return;return t(m.event?m.event(a):a)}}}function Be(e,a,t,o,u,l,r,f,n,s){var p,x,d,c,C,k,_,h,I,y,H,M,O,V,E,R,w=a.type;if(a.constructor!==void 0)return null;128&t.__u&&(n=!!(32&t.__u),l=[f=a.__e=t.__e]),(p=m.__b)&&p(a);e:if(typeof w=="function"){x=r.length;try{if(I=a.props,y=w.prototype&&w.prototype.render,H=(p=w.contextType)&&o[p.__c],M=p?H?H.props.value:p.__:o,t.__c?h=(d=a.__c=t.__c).__=d.__E:(y?a.__c=d=new w(I,M):(a.__c=d=new F(I,M),d.constructor=w,d.render=Qa),H&&H.sub(d),d.state||(d.state={}),d.__n=o,c=d.__d=!0,d.__h=[],d._sb=[]),y&&d.__s==null&&(d.__s=d.state),y&&w.getDerivedStateFromProps!=null&&(d.__s==d.state&&(d.__s=T({},d.__s)),T(d.__s,w.getDerivedStateFromProps(I,d.__s))),C=d.props,k=d.state,d.__v=a,c)y&&w.getDerivedStateFromProps==null&&d.componentWillMount!=null&&d.componentWillMount(),y&&d.componentDidMount!=null&&d.__h.push(d.componentDidMount);else{if(y&&w.getDerivedStateFromProps==null&&I!==C&&d.componentWillReceiveProps!=null&&d.componentWillReceiveProps(I,M),a.__v==t.__v||!d.__e&&d.shouldComponentUpdate!=null&&d.shouldComponentUpdate(I,d.__s,M)===!1){a.__v!=t.__v&&(d.props=I,d.state=d.__s,d.__d=!1),a.__e=t.__e,a.__k=t.__k,a.__k.some(function(D){D&&(D.__=a)}),Ie.push.apply(d.__h,d._sb),d._sb=[],d.__h.length&&r.push(d),f=X(t);break e}d.componentWillUpdate!=null&&d.componentWillUpdate(I,d.__s,M),y&&d.componentDidUpdate!=null&&d.__h.push(function(){d.componentDidUpdate(C,k,_)})}if(d.context=M,d.props=I,d.__P=e,d.__e=!1,O=m.__r,V=0,y)d.state=d.__s,d.__d=!1,O&&O(a),p=d.render(d.props,d.state,d.context),Ie.push.apply(d.__h,d._sb),d._sb=[];else do d.__d=!1,O&&O(a),p=d.render(d.props,d.state,d.context),d.state=d.__s;while(d.__d&&++V<25);d.state=d.__s,d.getChildContext!=null&&(o=T(T({},o),d.getChildContext())),y&&!c&&d.getSnapshotBeforeUpdate!=null&&(_=d.getSnapshotBeforeUpdate(C,k)),E=p!=null&&p.type===P&&p.key==null?aa(p.props.children):p,f=$e(e,ae(E)?E:[E],a,t,o,u,l,r,f,n,s),d.base=a.__e,a.__u&=-161,d.__h.length&&r.push(d),h&&(d.__E=d.__=null)}catch(D){if(r.length=x,a.__v=null,n||l!=null){if(D.then){for(a.__u|=n?160:128;f&&f.nodeType==8&&f.nextSibling;)f=f.nextSibling;l!=null&&(l[l.indexOf(f)]=null),a.__e=f}else if(l!=null)for(R=l.length;R--;)be(l[R])}else a.__e=t.__e;a.__k==null&&(a.__k=t.__k||[]),D.then||Ye(a),m.__e(D,a,t)}}else l==null&&a.__v==t.__v?(a.__k=t.__k,a.__e=t.__e):f=a.__e=Za(t.__e,a,t,o,u,l,r,n,s);return(p=m.diffed)&&p(a),128&a.__u?void 0:f}function Ye(e){e&&(e.__c&&(e.__c.__e=!0),e.__k&&e.__k.some(Ye))}function ea(e,a,t){for(var o=0;o<t.length;o++)Me(t[o],t[++o],t[++o]);m.__c&&m.__c(a,e),e.some(function(u){try{e=u.__h,u.__h=[],e.some(function(l){l.call(u)})}catch(l){m.__e(l,u.__v)}})}function aa(e){return typeof e!="object"||e==null||e.__b>0?e:ae(e)?e.map(aa):e.constructor!==void 0?null:T({},e)}function Za(e,a,t,o,u,l,r,f,n){var s,p,x,d,c,C,k,_=t.props||Le,h=a.props,I=a.type;if(I=="svg"?u="http://www.w3.org/2000/svg":I=="math"?u="http://www.w3.org/1998/Math/MathML":u||(u="http://www.w3.org/1999/xhtml"),l!=null){for(s=0;s<l.length;s++)if((c=l[s])&&"setAttribute"in c==!!I&&(I?c.localName==I:c.nodeType==3)){e=c,l[s]=null;break}}if(e==null){if(I==null)return document.createTextNode(h);e=document.createElementNS(u,I,h.is&&h),f&&(m.__m&&m.__m(a,l),f=!1),l=null}if(I==null)_===h||f&&e.data==h||(e.data=h);else{if(l=I=="textarea"&&h.defaultValue!=null?null:l&&Ce.call(e.childNodes),!f&&l!=null)for(_={},s=0;s<e.attributes.length;s++)_[(c=e.attributes[s]).name]=c.value;for(s in _)c=_[s],s=="dangerouslySetInnerHTML"?x=c:s=="children"||s in h||s=="value"&&"defaultValue"in h||s=="checked"&&"defaultChecked"in h||ce(e,s,null,c,u);for(s in h)c=h[s],s=="children"?d=c:s=="dangerouslySetInnerHTML"?p=c:s=="value"?C=c:s=="checked"?k=c:f&&typeof c!="function"||_[s]===c||ce(e,s,c,_[s],u);if(p)f||x&&(p.__html==x.__html||p.__html==e.innerHTML)||(e.innerHTML=p.__html),a.__k=[];else if(x&&(e.innerHTML=""),$e(a.type=="template"?e.content:e,ae(d)?d:[d],a,t,o,I=="foreignObject"?"http://www.w3.org/1999/xhtml":u,l,r,l?l[0]:t.__k&&X(t,0),f,n),l!=null)for(s=l.length;s--;)be(l[s]);f&&I!="textarea"||(s="value",I=="progress"&&C==null?e.removeAttribute("value"):C!=null&&(C!==e[s]||I=="progress"&&!C||I=="option"&&C!=_[s])&&ce(e,s,C,_[s],u),s="checked",k!=null&&k!=e[s]&&ce(e,s,k,_[s],u))}return e}function Me(e,a,t){try{if(typeof e=="function"){var o=typeof e.__u=="function";o&&e.__u(),o&&a==null||(e.__u=e(a))}else e.current=a}catch(u){m.__e(u,t)}}function ta(e,a,t){var o,u;if(m.unmount&&m.unmount(e),(o=e.ref)&&(o.current&&o.current!=e.__e||Me(o,null,a)),(o=e.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(l){m.__e(l,a)}o.base=o.__P=o.__n=null}if(o=e.__k)for(u=0;u<o.length;u++)o[u]&&ta(o[u],a,t||typeof e.type!="function");t||be(e.__e),e.__c=e.__=e.__e=void 0}function Qa(e,a,t){return this.constructor(e,t)}function De(e,a,t){var o,u,l,r;a==document&&(a=document.documentElement),m.__&&m.__(e,a),u=(o=typeof t=="function")?null:t&&t.__k||a.__k,l=[],r=[],Be(a,e=(!o&&t||a).__k=v(P,null,[e]),u||Le,Le,a.namespaceURI,!o&&t?[t]:u?null:a.firstChild?Ce.call(a.childNodes):null,l,!o&&t?t:u?u.__e:a.firstChild,o,r),ea(l,e,r),e.props.children=null}Ce=Ie.slice,m={__e:function(e,a,t,o){for(var u,l,r;a=a.__;)if((u=a.__c)&&!u.__)try{if((l=u.constructor)&&l.getDerivedStateFromError!=null&&(u.setState(l.getDerivedStateFromError(e)),r=u.__d),u.componentDidCatch!=null&&(u.componentDidCatch(e,o||{}),r=u.__d),r)return u.__E=u}catch(f){e=f}throw e}},Xe=0,Wa=function(e){return e!=null&&e.constructor===void 0},F.prototype.setState=function(e,a){var t;t=this.__s!=null&&this.__s!=this.state?this.__s:this.__s=T({},this.state),typeof e=="function"&&(e=e(T({},t),this.props)),e&&T(t,e),e!=null&&this.__v&&(a&&this._sb.push(a),Ve(this))},F.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),Ve(this))},F.prototype.render=P,G=[],Ke=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,Ze=function(e,a){return e.__v.__b-a.__v.__b},xe.__r=0,Pe=Math.random().toString(8),pe="__d"+Pe,ee="__a"+Pe,Qe=/(PointerCapture)$|Capture$/i,ve=0,ye=ze(!1),Ae=ze(!0),Va=0;var oe,g,Fe,oa,ge=0,na=[],S=m,ua=S.__b,la=S.__r,da=S.diffed,ra=S.__c,sa=S.unmount,fa=S.__;function Te(e,a){S.__h&&S.__h(g,e,ge||a),ge=0;var t=g.__H||(g.__H={__:[],__h:[]});return e>=t.__.length&&t.__.push({}),t.__[e]}function W(e){return ge=1,ca(La,e)}function ca(e,a,t){var o=Te(oe++,2);if(o.t=e,!o.__c&&(o.__=[t?t(a):La(void 0,a),function(f){var n=o.__N?o.__N[0]:o.__[0],s=o.t(n,f);n!==s&&(o.__N=[s,o.__[1]],o.__c.setState({}))}],o.__c=g,!g.__f)){var u=function(f,n,s){if(!o.__c.__H)return!0;var p=!1,x=o.__c.props!==f;if(o.__c.__H.__.some(function(c){if(c.__N){p=!0;var C=c.__[0];c.__=c.__N,c.__N=void 0,C!==c.__[0]&&(x=!0)}}),l){var d=l.call(this,f,n,s);return p?d||x:d}return!p||x};g.__f=!0;var l=g.shouldComponentUpdate,r=g.componentWillUpdate;g.componentWillUpdate=function(f,n,s){if(this.__e){var p=l;l=void 0,u(f,n,s),l=p}r&&r.call(this,f,n,s)},g.shouldComponentUpdate=u}return o.__N||o.__}function K(e,a){var t=Te(oe++,3);!S.__s&&ma(t.__H,a)&&(t.__=e,t.u=a,g.__H.__h.push(t))}function b(e){return ge=5,pa(function(){return{current:e}},[])}function pa(e,a){var t=Te(oe++,7);return ma(t.__H,a)&&(t.__=e(),t.__H=a,t.__h=e),t.__}function Ja(){for(var e;e=na.shift();){var a=e.__H;if(e.__P&&a)try{a.__h.some(he),a.__h.some(Re),a.__h=[]}catch(t){a.__h=[],S.__e(t,e.__v)}}}S.__b=function(e){g=null,ua&&ua(e)},S.__=function(e,a){e&&a.__k&&a.__k.__m&&(e.__m=a.__k.__m),fa&&fa(e,a)},S.__r=function(e){la&&la(e),oe=0;var a=(g=e.__c).__H;a&&(Fe===g?(a.__h=[],g.__h=[],a.__.some(function(t){t.__N&&(t.__=t.__N),t.u=t.__N=void 0})):(a.__h.some(he),a.__h.some(Re),a.__h=[],oe=0)),Fe=g},S.diffed=function(e){da&&da(e);var a=e.__c;a&&a.__H&&(a.__H.__h.length&&(na.push(a)!==1&&oa===S.requestAnimationFrame||((oa=S.requestAnimationFrame)||$a)(Ja)),a.__H.__.some(function(t){t.u&&(t.__H=t.u,t.u=void 0)})),Fe=g=null},S.__c=function(e,a){a.some(function(t){try{t.__h.some(he),t.__h=t.__h.filter(function(o){return!o.__||Re(o)})}catch(o){a.some(function(u){u.__h&&(u.__h=[])}),a=[],S.__e(o,t.__v)}}),ra&&ra(e,a)},S.unmount=function(e){sa&&sa(e);var a,t=e.__c;t&&t.__H&&(t.__H.__.some(function(o){try{he(o)}catch(u){a=u}}),t.__H=void 0,a&&S.__e(a,t.__v))};var ia=typeof requestAnimationFrame=="function";function $a(e){var a,t=function(){clearTimeout(o),ia&&cancelAnimationFrame(a),setTimeout(e)},o=setTimeout(t,35);ia&&(a=requestAnimationFrame(t))}function he(e){var a=g,t=e.__c;typeof t=="function"&&(e.__c=void 0,t()),g=a}function Re(e){var a=g;e.__c=e.__(),g=a}function ma(e,a){return!e||e.length!==a.length||a.some(function(t,o){return t!==e[o]})}function La(e,a){return typeof a=="function"?a(e):a}function Pa(e,a){for(var t in a)e[t]=a[t];return e}function Ia(e,a){for(var t in e)if(t!=="__source"&&!(t in a))return!0;for(var o in a)if(o!=="__source"&&e[o]!==a[o])return!0;return!1}function xa(e,a){this.props=e,this.context=a}(xa.prototype=new F).isPureReactComponent=!0,xa.prototype.shouldComponentUpdate=function(e,a){return Ia(this.props,e)||Ia(this.state,a)};var Ca=m.__b;m.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),Ca&&Ca(e)};var et=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function _e(e){function a(t){var o=Pa({},t);return delete o.ref,e(o,t.ref||null)}return a.$$typeof=et,a.render=e,a.prototype.isReactComponent=a.__f=!0,a.displayName="ForwardRef("+(e.displayName||e.name)+")",a}var at=m.__e;m.__e=function(e,a,t,o){if(e.then){for(var u,l=a;l=l.__;)if((u=l.__c)&&u.__c)return a.__e==null&&(a.__e=t.__e,a.__k=t.__k||[]),u.__c(e,a)}at(e,a,t,o)};var ha=m.unmount;function ya(e,a,t){return e&&(e.__c&&e.__c.__H&&(e.__c.__H.__.forEach(function(o){typeof o.__c=="function"&&o.__c()}),e.__c.__H=null),(e=Pa({},e)).__c!=null&&(e.__c.__P===t&&(e.__c.__P=a),e.__c.__e=!0,e.__c=null),e.__k=e.__k&&e.__k.map(function(o){return ya(o,a,t)})),e}function Aa(e,a,t){return e&&t&&(e.__v=null,e.__k=e.__k&&e.__k.map(function(o){return Aa(o,a,t)}),e.__c&&e.__c.__P===a&&(e.__e&&t.appendChild(e.__e),e.__c.__e=!0,e.__c.__P=t)),e}function qe(){this.__u=0,this.o=null,this.__b=null}function va(e){var a=e.__&&e.__.__c;return a&&a.__a&&a.__a(e)}function Se(){this.i=null,this.l=null}m.unmount=function(e){var a=e.__c;a&&(a.__z=!0),a&&a.__R&&a.__R(),a&&32&e.__u&&(e.type=null),ha&&ha(e)},(qe.prototype=new F).__c=function(e,a){var t=a.__c,o=this;o.o==null&&(o.o=[]),o.o.push(t);var u=va(o.__v),l=!1,r=function(){l||o.__z||(l=!0,t.__R=null,u?u(n):n())};t.__R=r;var f=t.__P;t.__P=null;var n=function(){if(!--o.__u){if(o.state.__a){var s=o.state.__a;o.__v.__k[0]=Aa(s,s.__c.__P,s.__c.__O)}var p;for(o.setState({__a:o.__b=null});p=o.o.pop();)p.__P=f,p.forceUpdate()}};o.__u++||32&a.__u||o.setState({__a:o.__b=o.__v.__k[0]}),e.then(r,r)},qe.prototype.componentWillUnmount=function(){this.o=[]},qe.prototype.render=function(e,a){if(this.__b){if(this.__v.__k){var t=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=ya(this.__b,t,o.__O=o.__P)}this.__b=null}var u=a.__a&&v(P,null,e.fallback);return u&&(u.__u&=-33),[v(P,null,a.__a?null:e.children),u]};var ga=function(e,a,t){if(++t[1]===t[0]&&e.l.delete(a),e.props.revealOrder&&(e.props.revealOrder[0]!=="t"||!e.l.size))for(t=e.i;t;){for(;t.length>3;)t.pop()();if(t[1]<t[0])break;e.i=t=t[2]}};(Se.prototype=new F).__a=function(e){var a=this,t=va(a.__v),o=a.l.get(e);return o[0]++,function(u){var l=function(){a.props.revealOrder?(o.push(u),ga(a,e,o)):u()};t?t(l):l()}},Se.prototype.render=function(e){this.i=null,this.l=new Map;var a=te(e.children);e.revealOrder&&e.revealOrder[0]==="b"&&a.reverse();for(var t=a.length;t--;)this.l.set(a[t],this.i=[1,0,this.i]);return e.children},Se.prototype.componentDidUpdate=Se.prototype.componentDidMount=function(){var e=this;this.l.forEach(function(a,t){ga(e,t,a)})};var tt=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.element")||60103,ot=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,ut=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,lt=/[A-Z0-9]/g,dt=typeof document<"u",rt=function(e){return(typeof Symbol<"u"&&typeof Symbol()=="symbol"?/fil|che|rad/:/fil|che|ra/).test(e)};F.prototype.isReactComponent=!0,["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(F.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(a){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:a})}})});var Sa=m.event;m.event=function(e){return Sa&&(e=Sa(e)),e.persist=function(){},e.isPropagationStopped=function(){return this.cancelBubble},e.isDefaultPrevented=function(){return this.defaultPrevented},e.nativeEvent=e};var ba,st={configurable:!0,get:function(){return this.class}},_a=m.vnode;m.vnode=function(e){typeof e.type=="string"&&(function(a){var t=a.props,o=a.type,u={},l=o.indexOf("-")==-1;for(var r in t){var f=t[r];if(!(r==="value"&&"defaultValue"in t&&f==null||dt&&r==="children"&&o==="noscript"||r==="class"||r==="className")){var n=r.toLowerCase();r==="defaultValue"&&"value"in t&&t.value==null?r="value":r==="download"&&f===!0?f="":n==="translate"&&f==="no"?f=!1:n[0]==="o"&&n[1]==="n"?n==="ondoubleclick"?r="ondblclick":n!=="onchange"||o!=="input"&&o!=="textarea"||rt(t.type)?n==="onfocus"?r="onfocusin":n==="onblur"?r="onfocusout":ut.test(r)&&(r=n):n=r="oninput":l&&ot.test(r)?r=r.replace(lt,"-$&").toLowerCase():f===null&&(f=void 0),n==="oninput"&&u[r=n]&&(r="oninputCapture"),u[r]=f}}o=="select"&&(u.multiple&&Array.isArray(u.value)&&(u.value=te(t.children).forEach(function(s){s.props.selected=u.value.indexOf(s.props.value)!=-1})),u.defaultValue!=null&&(u.value=te(t.children).forEach(function(s){s.props.selected=u.multiple?u.defaultValue.indexOf(s.props.value)!=-1:u.defaultValue==s.props.value}))),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",st)):t.className&&(u.class=u.className=t.className),a.props=u})(e),e.$$typeof=tt,_a&&_a(e)};var ka=m.__r;m.__r=function(e){ka&&ka(e),ba=e.__c};var wa=m.diffed;m.diffed=function(e){wa&&wa(e);var a=e.props,t=e.__e;t!=null&&e.type==="textarea"&&"value"in a&&a.value!==t.value&&(t.value=a.value==null?"":a.value),ba=null};var Ba=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),ft=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(a,t,o)=>o?o.toUpperCase():t.toLowerCase()),Ue=e=>{let a=ft(e);return a.charAt(0).toUpperCase()+a.slice(1)},ke=(...e)=>e.filter((a,t,o)=>!!a&&a.trim()!==""&&o.indexOf(a)===t).join(" ").trim(),Ma=e=>{for(let a in e)if(a.startsWith("aria-")||a==="role"||a==="title")return!0};var Da={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};var Fa=_e(({color:e="currentColor",size:a=24,strokeWidth:t=2,absoluteStrokeWidth:o,className:u="",children:l,iconNode:r,...f},n)=>v("svg",{ref:n,...Da,width:a,height:a,stroke:e,strokeWidth:o?Number(t)*24/Number(a):t,className:ke("lucide",u),...!l&&!Ma(f)&&{"aria-hidden":"true"},...f},[...r.map(([s,p])=>v(s,p)),...Array.isArray(l)?l:[l]]));var B=(e,a)=>{let t=_e(({className:o,...u},l)=>v(Fa,{ref:l,iconNode:a,className:ke(`lucide-${Ba(Ue(e))}`,`lucide-${e}`,o),...u}));return t.displayName=Ue(e),t};var it=[["path",{d:"m5 12 7-7 7 7",key:"hav0vg"}],["path",{d:"M12 19V5",key:"x0mq9r"}]],ue=B("arrow-up",it);var nt=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],le=B("check",nt);var ct=[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]],de=B("copy",ct);var pt=[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}]],re=B("rotate-ccw",pt);var mt=[["path",{d:"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",key:"1s2grr"}],["path",{d:"M20 2v4",key:"1rf3ol"}],["path",{d:"M22 4h-4",key:"gwowj6"}],["circle",{cx:"4",cy:"20",r:"2",key:"6kqj1y"}]],q=B("sparkles",mt);var Lt=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]],se=B("square",Lt);var It=0;function i(e,a,t,o,u,l){a||(a={});var r,f,n=a;if("ref"in n)for(f in n={},a)f=="ref"?r=a[f]:n[f]=a[f];var s={type:e,props:n,key:t,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--It,__i:-1,__u:0,__source:u,__self:l};if(typeof e=="function"&&(r=e.defaultProps))for(f in r)n[f]===void 0&&(n[f]=r[f]);return m.vnode&&m.vnode(s),s}var U=e=>new Promise(a=>setTimeout(a,e)),Ra=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,xt=e=>e.reduce((a,t)=>a+t.content.length,0),Ct=[{keys:["usestate","\uC0C1\uD0DC"],parts:[{type:"text",content:"\uD654\uBA74\uC5D0 \uBCF4\uC774\uB294 \uAC12\uC774 \uBC14\uB00C\uC5B4\uC57C \uD560 \uB54C \uC368\uC694. set \uD568\uC218\uB85C \uAC12\uC744 \uBC14\uAFB8\uBA74 React\uAC00 \uD654\uBA74\uC744 \uB2E4\uC2DC \uADF8\uB824 \uC918\uC694."},{type:"code",lang:"tsx",content:`const [count, setCount] = useState(0);
setCount(count + 1); // \uD654\uBA74\uC774 \uAC31\uC2E0\uB3FC\uC694`}]},{keys:["\uBC84\uD2BC","tailwind","\uAFB8\uBBF8"],parts:[{type:"text",content:"className\uC5D0 \uC720\uD2F8\uB9AC\uD2F0\uB97C \uC774\uC5B4 \uBD99\uC774\uBA74 \uB3FC\uC694. \uC55E\uC5D0 hover:\uB97C \uBD99\uC774\uBA74 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB838\uC744 \uB54C\uB9CC \uC801\uC6A9\uB3FC\uC694."},{type:"code",lang:"tsx",content:`<button className="rounded-xl px-4 py-2
  bg-violet-500 hover:bg-violet-400">
  \uC2DC\uC791\uD558\uAE30</button>`}]},{keys:["\uCEF4\uD3EC\uB10C\uD2B8"],parts:[{type:"text",content:"\uD654\uBA74\uC744 \uB808\uACE0 \uBE14\uB85D\uCC98\uB7FC \uB098\uB208 \uC870\uAC01\uC774\uC5D0\uC694. \uBC84\uD2BC\xB7\uCE74\uB4DC\uCC98\uB7FC \uB418\uD480\uC774\uB418\uB294 \uBD80\uBD84\uC744 \uD568\uC218 \uD558\uB098\uB85C \uB9CC\uB4E4\uACE0, props\uB85C \uB0B4\uC6A9\uB9CC \uBC14\uAFD4 \uB07C\uC6CC\uC694."}]},{keys:["\uBC30\uD3EC"],parts:[{type:"text",content:"GitHub \uC800\uC7A5\uC18C\uB97C Vercel\uC5D0 \uC5F0\uACB0\uD558\uBA74 push\uD560 \uB54C\uB9C8\uB2E4 \uC790\uB3D9\uC73C\uB85C \uBC30\uD3EC\uB3FC\uC694. \uADF8 \uC804\uC5D0 npm run build\uAC00 \uD1B5\uACFC\uD558\uB294\uC9C0 \uAF2D \uD655\uC778\uD558\uC138\uC694!"}]},{keys:["\uC5D0\uB7EC","\uC624\uB958"],parts:[{type:"text",content:"\uCCAB \uC904\uC5D0\uC11C '\uBB34\uC5C7\uC774' \uD2C0\uB838\uB294\uC9C0, \uD30C\uC77C:\uC904 \uBC88\uD638\uC5D0\uC11C '\uC5B4\uB514\uC11C' \uD2C0\uB838\uB294\uC9C0\uBD80\uD130 \uC77D\uC5B4\uC694. \uADF8 \uB450 \uC904\uC744 \uADF8\uB300\uB85C \uBD99\uC5EC \uB123\uC5B4 \uC8FC\uC154\uB3C4 \uC88B\uC544\uC694."}]},{keys:["api","\uD0A4"],parts:[{type:"text",content:"API \uD0A4\uB294 .env.local \uD30C\uC77C\uC5D0 \uB123\uACE0 process.env\uB85C \uC77D\uC5B4\uC694. \uC774 \uD30C\uC77C\uC740 .gitignore\uC5D0 \uB123\uC5B4 \uC800\uC7A5\uC18C\uC5D0 \uC62C\uB77C\uAC00\uC9C0 \uC54A\uAC8C \uD574 \uC8FC\uC138\uC694."}]}];function qa(e){let a=e.toLowerCase();return Ct.find(o=>o.keys.some(u=>a.includes(u)))?.parts??[{type:"text",content:`"${e}" \uC88B\uC740 \uC9C8\uBB38\uC774\uC5D0\uC694! \uB9CC\uB4E4\uACE0 \uC2F6\uC740 \uD654\uBA74\uC744 \uD55C \uBB38\uC7A5\uC73C\uB85C \uC801\uACE0, \uD544\uC694\uD55C \uC0C1\uD0DC\uC640 \uBC84\uD2BC\uBD80\uD130 \uAC19\uC774 \uC815\uB9AC\uD574 \uBD10\uC694.`}]}var Ta="useState\uB294 \uC5B8\uC81C \uC368\uC694?",ht=[{text:"\uBC84\uD2BC\uC744 \uC608\uC058\uAC8C \uAFB8\uBBF8\uB824\uBA74?",via:"send"},{text:"\uCEF4\uD3EC\uB10C\uD2B8\uB294 \uBB50\uC608\uC694?",via:"type"},{text:"\uBC30\uD3EC\uB294 \uC5B4\uB5BB\uAC8C \uD574\uC694?",via:"chip"}];function He(e,a){let t={id:0,role:"assistant",parts:[{type:"text",content:e}]};return a?[t,{id:1,role:"user",parts:[{type:"text",content:Ta}]},{id:2,role:"assistant",parts:qa(Ta)}]:[t]}var gt=/(\/\/.*|"[^"\n]*"?|'[^'\n]*'?|=>|\b(?:const|let|return|function|import|from|export|npm|run)\b|\b\d+\b|<\/?[A-Za-z][\w.]*|\/?>)/g;function St(e){return e.split(gt).map((a,t)=>{if(t%2===0||!a)return a;let o=a.startsWith("//")?"text-slate-500":/^["']/.test(a)?"text-emerald-300":/^\d/.test(a)?"text-amber-300":/^<|^\/?>$/.test(a)?"text-sky-300":"text-fuchsia-300";return i("span",{className:o,children:a},t)})}async function _t(e,a){try{return await navigator.clipboard.writeText(e),!0}catch{let t=document.activeElement,o=document.createElement("textarea");o.value=e,o.style.cssText="position:fixed;opacity:0",document.body.append(o),o.select();let u=!1;try{u=document.execCommand("copy")}catch{}if(o.remove(),t?.focus(),!u&&a){let l=document.createRange();l.selectNodeContents(a),window.getSelection()?.removeAllRanges(),window.getSelection()?.addRange(l)}return u}}function Oe({large:e=!1}){return i("span",{"aria-hidden":!0,className:`relative grid shrink-0 place-items-center ${e?"size-10":"size-7"}`,children:[i("span",{className:"absolute inset-0 overflow-hidden rounded-full",children:i("span",{className:"ai-chat-panel-spin absolute -inset-1 bg-[conic-gradient(#a78bfa,#22d3ee,#f472b6,#a78bfa)]"})}),i("span",{className:"absolute inset-[2px] rounded-full bg-[#14162c]"}),i(q,{className:`relative text-violet-200 ${e?"size-[18px]":"size-3.5"}`}),e&&i("span",{className:"absolute -right-0.5 -bottom-0.5 size-3 rounded-full border-2 border-[#0e1022] bg-emerald-400"})]})}function kt({code:e,full:a,lang:t="code",caret:o}){let[u,l]=W(null),r=b(null),f=b(void 0);K(()=>()=>clearTimeout(f.current),[]);async function n(){l(await _t(a,r.current)),clearTimeout(f.current),f.current=setTimeout(()=>l(null),1800)}return i("div",{className:"overflow-hidden rounded-xl border border-white/10 bg-[#070816]",children:[i("div",{className:"flex items-center justify-between border-b border-white/[0.06] py-1 pr-1 pl-3 text-[11px] text-slate-400",children:[i("span",{className:"flex items-center gap-1.5 font-mono",children:[i("span",{className:"size-1.5 rounded-full bg-violet-400"}),t]}),i("button",{type:"button",onClick:n,className:"inline-flex items-center gap-1 rounded-md px-2 py-1 font-medium transition hover:bg-white/[0.06] hover:text-white focus-visible:outline-2 focus-visible:outline-violet-300",children:[u?i(le,{className:"size-3.5 text-emerald-300"}):i(de,{className:"size-3.5"}),i("span",{"aria-live":"polite",children:u?"\uBCF5\uC0AC\uB428":u===!1?"Ctrl+C\uB85C \uBCF5\uC0AC":"\uBCF5\uC0AC"})]})]}),i("pre",{className:"overflow-x-auto py-2.5 pr-6 pl-3 font-mono text-[12.5px] leading-relaxed text-slate-200 [mask-image:linear-gradient(to_left,transparent,#000_20px)]",children:i("code",{ref:r,children:[St(e),o]})})]})}function wt({message:e,streaming:a}){let t=[],o=e.visible??1/0;for(let u=0;u<e.parts.length&&o>0;u++){let l=e.parts[u],r=l.content.slice(0,o);o-=l.content.length;let f=a&&o<=0?i("span",{"aria-hidden":!0,className:"ai-chat-panel-caret ml-0.5 inline-block h-[1.05em] w-[7px] translate-y-[3px] rounded-[2px] bg-violet-300"}):null;t.push(l.type==="code"?i(kt,{code:r,full:l.content,lang:l.lang,caret:f},u):i("p",{className:"whitespace-pre-wrap",children:[r,f]},u))}return i(P,{children:t})}function Ua({name:e="\uCF54\uB514",badge:a="AI \uD29C\uD130",greeting:t="\uC548\uB155\uD558\uC138\uC694! \uCF54\uB529\uD558\uB2E4 \uB9C9\uD788\uB294 \uBD80\uBD84\uC744 \uBB3C\uC5B4\uBCF4\uC138\uC694. \uC608\uC81C \uCF54\uB4DC\uC640 \uD568\uAED8 \uC124\uBA85\uD574 \uB4DC\uB9B4\uAC8C\uC694.",suggestions:o=["\uBC30\uD3EC\uB294 \uC5B4\uB5BB\uAC8C \uD574\uC694?","\uC5D0\uB7EC \uC77D\uB294 \uBC95","API \uD0A4 \uBCF4\uAD00"],getReply:u=qa,demo:l=!0,height:r=560,className:f="",style:n,...s}){let[p,x]=W(()=>He(t,l)),[d,c]=W(""),[C,k]=W("idle"),[_,h]=W(null),[I,y]=W(!1),H=b(null),M=b(null),O=b(3),V=b(!1),E=b(!1),R=b(!0),w=b(!0),D=b(!1);K(()=>(R.current=!0,()=>{R.current=!1}),[]),K(()=>{let L=H.current;L&&w.current&&(L.scrollTop=L.scrollHeight)},[p,C]),K(()=>{let L=M.current;L&&(L.style.height="auto",L.style.height=`${Math.min(L.scrollHeight,120)}px`)},[d]);async function fe(L,A=!1){let J=L.trim();if(!J||V.current)return;V.current=!0,E.current=!1,w.current=!0;let $=Ra(),N=O.current++;c(""),x(Y=>[...Y,{id:N,role:"user",parts:[{type:"text",content:J}]}]),k("thinking");let z;try{[z]=await Promise.all([u(J),U($?300:1e3)])}catch{z=[{type:"text",content:"\uB2F5\uBCC0\uC744 \uAC00\uC838\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC7A0\uC2DC \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694."}]}if(!R.current)return;let Z=O.current++,ne=xt(z),j=$?ne:0;for(x(Y=>[...Y,{id:Z,role:"assistant",parts:z,visible:j}]),k("streaming");j<ne&&!E.current&&R.current;){await U(30+Math.random()*40),j=A&&D.current?ne:Math.min(ne,j+1+Math.floor(Math.random()*3));let Y=j;x(Ga=>Ga.map(we=>we.id===Z?{...we,visible:Y}:we))}V.current=!1,R.current&&k("idle")}function ie(){D.current||(D.current=!0,h(null),y(!1),V.current||c(""))}K(()=>{if(!l||Ra())return;let L=!1,A=()=>!L&&!D.current;async function J(){for(let $=0;A();$++){await U($===0?150:1400);for(let{text:N,via:z}of ht){if(!A())return;if(z==="chip"&&o.includes(N))h(N),await U(420),h(null);else if(z!=="send"){for(let Z=1;Z<=N.length;Z++){if(!A())return;c(N.slice(0,Z)),await U(55+Math.random()*45)}await U(450)}if(!A())return;await fe(N,!0),await U(2600)}if(await U(600),!A()||(y(!0),await U(400),!A()))return;w.current=!0,x(He(t,!0)),y(!1)}}return J(),()=>{L=!0}},[]);function Ha(L){L.key!=="Enter"||L.shiftKey||L.nativeEvent.isComposing||(L.preventDefault(),fe(d))}function Oa(){ie(),w.current=!0,x(He(t,!1)),M.current?.focus()}let Q=C!=="idle",Ea=new Set(p.filter(L=>L.role==="user").map(L=>L.parts[0].content)),Ge=o.filter(L=>!Ea.has(L));return i("section",{"aria-label":`${e} \uCC44\uD305`,...s,onPointerDownCapture:ie,onKeyDownCapture:ie,onFocusCapture:ie,style:{height:r,...n},className:`relative isolate flex w-full max-w-[480px] flex-col overflow-hidden rounded-[26px] border border-white/10 bg-[#0b0c1d] break-keep shadow-[0_40px_100px_-30px_rgba(91,33,182,.6)] ${f}`,children:[i("div",{"aria-hidden":!0,className:"pointer-events-none absolute inset-x-0 top-0 -z-10 h-48 bg-[radial-gradient(70%_100%_at_20%_0%,rgba(139,92,246,.2),transparent)]"}),i("header",{className:"flex items-center gap-3 border-b border-white/[0.07] bg-white/[0.015] px-4 py-2.5",children:[i(Oe,{large:!0}),i("div",{className:"min-w-0 flex-1",children:[i("p",{className:"flex items-center gap-1.5 text-[15px] font-semibold text-white",children:[e,i("span",{className:"rounded-md bg-violet-500/15 px-1.5 py-px text-[11px] font-bold text-violet-200 ring-1 ring-violet-400/25",children:a})]}),i("p",{className:"flex items-center gap-1.5 text-xs text-slate-400",children:Q?i(P,{children:[i("span",{className:"ai-chat-panel-pulse size-1.5 rounded-full bg-violet-400"}),"\uB2F5\uBCC0\uC744 \uC4F0\uB294 \uC911\u2026"]}):i(P,{children:[i("span",{className:"size-1.5 rounded-full bg-emerald-400"}),"\uC628\uB77C\uC778 \xB7 \uBCF4\uD1B5 2\uCD08 \uC548\uC5D0 \uB2F5\uD574\uC694"]})})]}),i("button",{type:"button",onClick:Oa,disabled:Q,"aria-label":"\uC0C8 \uB300\uD654 \uC2DC\uC791",title:"\uC0C8 \uB300\uD654",className:"grid size-9 place-items-center rounded-xl text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus-visible:outline-2 focus-visible:outline-violet-300 disabled:opacity-40",children:i(re,{className:"size-4"})})]}),i("div",{ref:H,role:"log","aria-live":"polite","aria-label":"\uB300\uD654 \uB0B4\uC6A9","aria-busy":Q,onScroll:L=>{let A=L.currentTarget;w.current=A.scrollHeight-A.scrollTop-A.clientHeight<40},className:`flex flex-1 flex-col gap-3.5 overflow-y-auto overscroll-contain px-4 py-3.5 transition-opacity [mask-image:linear-gradient(to_bottom,transparent,#000_20px)] duration-300 ${I?"opacity-0":""}`,children:[p.map(L=>L.role==="user"?i("div",{className:"ai-chat-panel-in flex justify-end",children:i("p",{className:"max-w-[82%] rounded-2xl rounded-br-md bg-gradient-to-br from-violet-500 to-indigo-600 px-3.5 py-2 text-[14px] leading-relaxed whitespace-pre-wrap text-white shadow-lg shadow-violet-950/40",children:L.parts[0].content})},L.id):i("div",{className:"ai-chat-panel-in flex gap-2.5",children:[i(Oe,{}),i("div",{className:"flex max-w-[88%] min-w-0 flex-col gap-2.5 rounded-2xl rounded-tl-md bg-white/[0.045] px-3.5 py-2.5 text-[14px] leading-relaxed break-words text-slate-200 ring-1 ring-white/[0.07]",children:i(wt,{message:L,streaming:C==="streaming"&&L.id===p[p.length-1].id})})]},L.id)),C==="thinking"&&i("div",{className:"ai-chat-panel-in flex gap-2.5",children:[i(Oe,{}),i("div",{className:"flex items-center gap-1.5 rounded-2xl rounded-tl-md bg-white/[0.045] px-4 py-3.5 ring-1 ring-white/[0.07]",children:[i("span",{className:"sr-only",children:[e,"\uAC00 \uB2F5\uBCC0\uC744 \uC900\uBE44\uD558\uACE0 \uC788\uC5B4\uC694"]}),[0,1,2].map(L=>i("span",{"aria-hidden":!0,style:{animationDelay:`${L*160}ms`},className:"ai-chat-panel-dot size-1.5 rounded-full bg-violet-300"},L))]})]}),!Q&&!I&&Ge.length>0&&i("div",{className:"ai-chat-panel-in flex flex-wrap gap-2 pl-[38px]",children:Ge.map(L=>i("button",{type:"button",onClick:()=>fe(L),className:`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[12.5px] text-violet-100 transition hover:-translate-y-0.5 hover:border-violet-300/50 hover:bg-violet-500/20 focus-visible:outline-2 focus-visible:outline-violet-300 ${_===L?"scale-95 border-violet-300/70 bg-violet-500/30":"border-violet-400/25 bg-violet-500/10"}`,children:[i(q,{"aria-hidden":!0,className:"size-3 text-violet-300"}),L]},L))})]}),i("div",{className:"border-t border-white/[0.07] px-3 pt-2 pb-2.5",children:[i("div",{className:"flex items-end gap-2 rounded-2xl border border-white/10 bg-white/[0.04] p-1.5 pl-3.5 transition focus-within:border-violet-400/60 focus-within:bg-white/[0.06] focus-within:ring-4 focus-within:ring-violet-500/15",children:[i("label",{className:"min-w-0 flex-1",children:[i("span",{className:"sr-only",children:[e,"\uC5D0\uAC8C \uBCF4\uB0BC \uBA54\uC2DC\uC9C0 (Enter\uB85C \uBCF4\uB0B4\uACE0 Shift+Enter\uB85C \uC904\uBC14\uAFC8)"]}),i("textarea",{ref:M,rows:1,value:d,onChange:L=>c(L.currentTarget.value),onKeyDown:Ha,placeholder:`${e}\uC5D0\uAC8C \uBB34\uC5C7\uC774\uB4E0 \uBB3C\uC5B4\uBCF4\uC138\uC694`,className:"block max-h-[120px] w-full resize-none bg-transparent py-1.5 text-[14px] leading-5 text-white outline-none placeholder:text-slate-500"})]}),Q?i("button",{type:"button",onClick:()=>E.current=!0,"aria-label":"\uB2F5\uBCC0 \uBA48\uCD94\uAE30",className:"grid size-9 shrink-0 place-items-center rounded-xl bg-white/10 text-white transition hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-violet-300",children:i(se,{className:"size-3.5 fill-current"})}):i("button",{type:"button",onClick:()=>fe(d),disabled:!d.trim(),"aria-label":"\uBCF4\uB0B4\uAE30",className:"grid size-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-violet-500 to-indigo-500 text-white shadow-[0_6px_20px_-4px_rgba(139,92,246,.8)] transition hover:brightness-110 focus-visible:outline-2 focus-visible:outline-violet-300 active:scale-95 disabled:bg-none disabled:bg-white/[0.06] disabled:text-slate-500 disabled:shadow-none",children:i(ue,{className:"size-[18px]"})})]}),i("p",{"aria-hidden":!0,className:"mt-2 hidden justify-center gap-1 text-[11px] text-slate-500 [@media(min-height:480px)]:flex",children:[i("kbd",{className:"font-sans text-slate-400",children:"Enter"})," \uBCF4\uB0B4\uAE30 \xB7 ",i("kbd",{className:"font-sans text-slate-400",children:"Shift + Enter"})," \uC904\uBC14\uAFC8"]})]}),i("style",{children:`
        @keyframes ai-chat-panel-spin { to { transform: rotate(360deg); } }
        @keyframes ai-chat-panel-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
        @keyframes ai-chat-panel-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
        @keyframes ai-chat-panel-blink { 50% { opacity: 0; } }
        @keyframes ai-chat-panel-pulse { 50% { opacity: .3; } }
        .ai-chat-panel-spin { animation: ai-chat-panel-spin 4s linear infinite; }
        .ai-chat-panel-in { animation: ai-chat-panel-in .35s cubic-bezier(.2,.8,.2,1) both; }
        .ai-chat-panel-dot { animation: ai-chat-panel-dot 1.1s ease-in-out infinite; }
        .ai-chat-panel-caret { animation: ai-chat-panel-blink .9s steps(1) infinite; }
        .ai-chat-panel-pulse { animation: ai-chat-panel-pulse 1s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .ai-chat-panel-spin, .ai-chat-panel-in, .ai-chat-panel-dot, .ai-chat-panel-caret, .ai-chat-panel-pulse { animation: none; }
        }
      `})]})}function Ee(){return i("div",{className:"grid min-h-screen place-items-center bg-[#05060f] bg-[radial-gradient(ellipse_at_12%_8%,#2a1d6b,transparent_55%),radial-gradient(ellipse_at_92%_96%,#0e2c52,transparent_50%)] p-4",children:i(Ua,{height:"min(600px, calc(100vh - 32px))"})})}De(v(Ee,null),document.getElementById("root"));})();
/*! Bundled license information:

lucide-react/dist/esm/shared/src/utils.js:
lucide-react/dist/esm/defaultAttributes.js:
lucide-react/dist/esm/Icon.js:
lucide-react/dist/esm/createLucideIcon.js:
lucide-react/dist/esm/icons/arrow-up.js:
lucide-react/dist/esm/icons/check.js:
lucide-react/dist/esm/icons/copy.js:
lucide-react/dist/esm/icons/rotate-ccw.js:
lucide-react/dist/esm/icons/sparkles.js:
lucide-react/dist/esm/icons/square.js:
lucide-react/dist/esm/lucide-react.js:
  (**
   * @license lucide-react v0.544.0 - ISC
   *
   * This source code is licensed under the ISC license.
   * See the LICENSE file in the root directory of this source tree.
   *)
*/
</script>13:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library_page__IxXwj","children":[["$","div",null,{"className":"library_headerSpace__cyKqF","children":"$L1b"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"AI 튜터 채팅 패널\",\"description\":\"타이핑 표시 뒤 한 글자씩 흘러나오는 답변, 코드 복사, 추천 질문 칩을 갖춘 AI 채팅창\",\"url\":\"https://aicoder.kr/library/ai-chat-panel\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"응용\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"AI 튜터 채팅 패널\",\"item\":\"https://aicoder.kr/library/ai-chat-panel\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"ai-chat-panel","tags":["React","Tailwind","스트리밍 UI","async/await","aria-live","Clipboard API"],"files":[{"name":"ai-chat-panel.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { AiChatPanel } from \"@/components/ui/ai-chat-panel\";\n\nexport default function Demo() {\n  return (\n    <div className=\"grid min-h-screen place-items-center bg-[#05060f] bg-[radial-gradient(ellipse_at_12%_8%,#2a1d6b,transparent_55%),radial-gradient(ellipse_at_92%_96%,#0e2c52,transparent_50%)] p-4\">\n      <AiChatPanel height=\"min(600px, calc(100vh - 32px))\" />\n    </div>\n  );\n}","language":"tsx"}],"level":"응용","title":"AI 튜터 채팅 패널","author":"AI Coder 예제","license":"MIT","category":"ai-chat","exercise":"REPLIES에 '타입스크립트' 키워드 답변을 하나 추가해 보세요. 스트리밍 간격(30~70ms)을 바꿔 느낌을 비교하고, getReply에 fetch로 실제 API를 부르는 함수를 넘겨 보세요.","sourceUrl":"","objectives":["공개한 글자 수(visible) 하나로 글·코드 조각을 앞에서부터 잘라 보여 주며 토큰 스트리밍을 흉내 내기","async/await와 sleep으로 '생각 중 → 스트리밍 → 대기' 흐름을 순서대로 쓰고, 멈춤·언마운트 플래그로 안전하게 끊기","role=\"log\"·aria-live·aria-busy로 새 메시지를 스크린 리더에 알리고, Enter·Shift+Enter와 한글 조합 중 입력(isComposing)을 구분하기","Clipboard API가 막힌 환경에서 execCommand, 텍스트 선택 순서로 물러서는 복사 버튼 만들기"],"description":"타이핑 표시 뒤 한 글자씩 흘러나오는 답변, 코드 복사, 추천 질문 칩을 갖춘 AI 채팅창","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"ai-chat-panel.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" KeyboardEvent, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ReactNode } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { ArrowUp, Check, Copy, RotateCcw, Sparkles, Square } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"type","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":"; ","color":"#E6EDF3"},{"content":"content","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":" } ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"type","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":"; ","color":"#E6EDF3"},{"content":"content","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"lang","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatMessage","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"id","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"role","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"user\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"assistant\"","color":"#A5D6FF"},{"content":"; ","color":"#E6EDF3"},{"content":"parts","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":"[]; ","color":"#E6EDF3"},{"content":"visible","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" };","color":"#E6EDF3"}],[{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Phase","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"thinking\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"streaming\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"AiChatPanelProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"/** 튜터 이름 */","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"name","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"/** 이름 옆 배지 */","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"badge","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"/** 첫 인사말 */","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"greeting","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"/** 답변 아래에 띄우는 추천 질문 칩 */","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"suggestions","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[];","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"/** 질문을 받아 답변 조각(글·코드)을 돌려줍니다. 실제 AI API를 연결하는 자리예요. */","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"getReply","color":"#D2A8FF"},{"content":"?:","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"question","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":"[]>;","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"/** true면 예시 대화를 깔아 두고, 아무도 만지지 않는 동안 스스로 대화를 이어 갑니다. */","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"demo","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"/** 패널 높이 (예: 560, \"70vh\") */","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"height","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"ms","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"void","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"resolve","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setTimeout","color":"#D2A8FF"},{"content":"(resolve, ms));","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"prefersReduced","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" window.","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(prefers-reduced-motion: reduce)\"","color":"#A5D6FF"},{"content":").matches;","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"lengthOf","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"parts","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":"[]) ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" parts.","color":"#E6EDF3"},{"content":"reduce","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"sum","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"part","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" sum ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" part.content.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"REPLIES","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"keys","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"[]; ","color":"#E6EDF3"},{"content":"parts","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":"[] }[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":"  {","color":"#E6EDF3"}],[{"content":"    keys: [","color":"#E6EDF3"},{"content":"\"usestate\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"상태\"","color":"#A5D6FF"},{"content":"],","color":"#E6EDF3"}],[{"content":"    parts: [","color":"#E6EDF3"}],[{"content":"      { type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"화면에 보이는 값이 바뀌어야 할 때 써요. set 함수로 값을 바꾸면 React가 화면을 다시 그려 줘요.\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"      { type: ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":", lang: ","color":"#E6EDF3"},{"content":"\"tsx\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"const [count, setCount] = useState(0);","color":"#A5D6FF"},{"content":"\\n","color":"#FF7B72"},{"content":"setCount(count + 1); // 화면이 갱신돼요\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"    ],","color":"#E6EDF3"}],[{"content":"  },","color":"#E6EDF3"}],[{"content":"  {","color":"#E6EDF3"}],[{"content":"    keys: [","color":"#E6EDF3"},{"content":"\"버튼\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"tailwind\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"꾸미\"","color":"#A5D6FF"},{"content":"],","color":"#E6EDF3"}],[{"content":"    parts: [","color":"#E6EDF3"}],[{"content":"      { type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"className에 유틸리티를 이어 붙이면 돼요. 앞에 hover:를 붙이면 마우스를 올렸을 때만 적용돼요.\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"      { type: ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":", lang: ","color":"#E6EDF3"},{"content":"\"tsx\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"'<button className=\"rounded-xl px-4 py-2","color":"#A5D6FF"},{"content":"\\n","color":"#FF7B72"},{"content":"  bg-violet-500 hover:bg-violet-400\">","color":"#A5D6FF"},{"content":"\\n","color":"#FF7B72"},{"content":"  시작하기</button>'","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"    ],","color":"#E6EDF3"}],[{"content":"  },","color":"#E6EDF3"}],[{"content":"  { keys: [","color":"#E6EDF3"},{"content":"\"컴포넌트\"","color":"#A5D6FF"},{"content":"], parts: [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"화면을 레고 블록처럼 나눈 조각이에요. 버튼·카드처럼 되풀이되는 부분을 함수 하나로 만들고, props로 내용만 바꿔 끼워요.\"","color":"#A5D6FF"},{"content":" }] },","color":"#E6EDF3"}],[{"content":"  { keys: [","color":"#E6EDF3"},{"content":"\"배포\"","color":"#A5D6FF"},{"content":"], parts: [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"GitHub 저장소를 Vercel에 연결하면 push할 때마다 자동으로 배포돼요. 그 전에 npm run build가 통과하는지 꼭 확인하세요!\"","color":"#A5D6FF"},{"content":" }] },","color":"#E6EDF3"}],[{"content":"  { keys: [","color":"#E6EDF3"},{"content":"\"에러\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"오류\"","color":"#A5D6FF"},{"content":"], parts: [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"첫 줄에서 '무엇이' 틀렸는지, 파일:줄 번호에서 '어디서' 틀렸는지부터 읽어요. 그 두 줄을 그대로 붙여 넣어 주셔도 좋아요.\"","color":"#A5D6FF"},{"content":" }] },","color":"#E6EDF3"}],[{"content":"  { keys: [","color":"#E6EDF3"},{"content":"\"api\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"키\"","color":"#A5D6FF"},{"content":"], parts: [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"API 키는 .env.local 파일에 넣고 process.env로 읽어요. 이 파일은 .gitignore에 넣어 저장소에 올라가지 않게 해 주세요.\"","color":"#A5D6FF"},{"content":" }] },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"demoReply","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"question","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":"[] {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"q","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" question.","color":"#E6EDF3"},{"content":"toLowerCase","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"found","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"REPLIES","color":"#79C0FF"},{"content":".","color":"#E6EDF3"},{"content":"find","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"reply","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" reply.keys.","color":"#E6EDF3"},{"content":"some","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"key","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" q.","color":"#E6EDF3"},{"content":"includes","color":"#D2A8FF"},{"content":"(key)));","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" found?.parts ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"`\"${","color":"#A5D6FF"},{"content":"question","color":"#E6EDF3"},{"content":"}\" 좋은 질문이에요! 만들고 싶은 화면을 한 문장으로 적고, 필요한 상태와 버튼부터 같이 정리해 봐요.`","color":"#A5D6FF"},{"content":" }];","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 아무도 만지지 않을 때 저절로 재생되는 대화. via: 바로 보내기 · 입력창에 타이핑 · 추천 칩 누르기","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DEMO_QUESTION","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"useState는 언제 써요?\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DEMO_SCRIPT","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"via","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"send\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"type\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"chip\"","color":"#A5D6FF"},{"content":" }[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":"  { text: ","color":"#E6EDF3"},{"content":"\"버튼을 예쁘게 꾸미려면?\"","color":"#A5D6FF"},{"content":", via: ","color":"#E6EDF3"},{"content":"\"send\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"  { text: ","color":"#E6EDF3"},{"content":"\"컴포넌트는 뭐예요?\"","color":"#A5D6FF"},{"content":", via: ","color":"#E6EDF3"},{"content":"\"type\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"  { text: ","color":"#E6EDF3"},{"content":"\"배포는 어떻게 해요?\"","color":"#A5D6FF"},{"content":", via: ","color":"#E6EDF3"},{"content":"\"chip\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"startMessages","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"greeting","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"demo","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatMessage","color":"#FFA657"},{"content":"[] {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"hello","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatMessage","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { id: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"assistant\"","color":"#A5D6FF"},{"content":", parts: [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: greeting }] };","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"demo) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" [hello];","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" [hello, { id: ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"user\"","color":"#A5D6FF"},{"content":", parts: [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"DEMO_QUESTION","color":"#79C0FF"},{"content":" }] }, { id: ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":", role: ","color":"#E6EDF3"},{"content":"\"assistant\"","color":"#A5D6FF"},{"content":", parts: ","color":"#E6EDF3"},{"content":"demoReply","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"DEMO_QUESTION","color":"#79C0FF"},{"content":") }];","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 아주 작은 하이라이터: split에 캡처 그룹을 쓰면 홀수 번째 조각이 토큰이라 색만 입히면 돼요.","color":"#8B949E"}],[{"content":"// 따옴표가 아직 안 닫힌 문자열(\"…)도 잡아서, 스트리밍 중에도 색이 깜빡이지 않아요.","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"TOKEN","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"/(","color":"#A5D6FF"},{"content":"\\/\\/","color":"#7EE787"},{"content":".","color":"#79C0FF"},{"content":"*|","color":"#FF7B72"},{"content":"\"","color":"#A5D6FF"},{"content":"[","color":"#79C0FF"},{"content":"^","color":"#FF7B72"},{"content":"\"\\n]","color":"#79C0FF"},{"content":"*","color":"#FF7B72"},{"content":"\"","color":"#A5D6FF"},{"content":"?|","color":"#FF7B72"},{"content":"'","color":"#A5D6FF"},{"content":"[","color":"#79C0FF"},{"content":"^","color":"#FF7B72"},{"content":"'\\n]","color":"#79C0FF"},{"content":"*","color":"#FF7B72"},{"content":"'","color":"#A5D6FF"},{"content":"?|","color":"#FF7B72"},{"content":"=>","color":"#A5D6FF"},{"content":"|\\b","color":"#FF7B72"},{"content":"(?:const","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"let","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"return","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"function","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"import","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"from","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"export","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"npm","color":"#A5D6FF"},{"content":"|","color":"#FF7B72"},{"content":"run)","color":"#A5D6FF"},{"content":"\\b|\\b","color":"#FF7B72"},{"content":"\\d","color":"#79C0FF"},{"content":"+\\b|","color":"#FF7B72"},{"content":"<","color":"#A5D6FF"},{"content":"\\/","color":"#7EE787"},{"content":"?","color":"#FF7B72"},{"content":"[A-Za-z][\\w.]","color":"#79C0FF"},{"content":"*|","color":"#FF7B72"},{"content":"\\/","color":"#7EE787"},{"content":"?","color":"#FF7B72"},{"content":">)/","color":"#A5D6FF"},{"content":"g","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"highlight","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"code","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" code.","color":"#E6EDF3"},{"content":"split","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"TOKEN","color":"#79C0FF"},{"content":").","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"chunk","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (index ","color":"#E6EDF3"},{"content":"%","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"chunk) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" chunk;","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"color","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" chunk.","color":"#E6EDF3"},{"content":"startsWith","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"//\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"text-slate-500\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"^","color":"#FF7B72"},{"content":"[\"']","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(chunk) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"text-emerald-300\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"^","color":"#FF7B72"},{"content":"\\d","color":"#79C0FF"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(chunk) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"text-amber-300\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" /","color":"#A5D6FF"},{"content":"^","color":"#FF7B72"},{"content":"<","color":"#A5D6FF"},{"content":"|^","color":"#FF7B72"},{"content":"\\/","color":"#7EE787"},{"content":"?","color":"#FF7B72"},{"content":">","color":"#A5D6FF"},{"content":"$$","color":"#FF7B72"},{"content":"/","color":"#A5D6FF"},{"content":".","color":"#E6EDF3"},{"content":"test","color":"#D2A8FF"},{"content":"(chunk) ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"text-sky-300\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"text-fuchsia-300\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"color","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"chunk","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"      </","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"    );","color":"#E6EDF3"}],[{"content":"  });","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 1순위 Clipboard API → 2순위 execCommand → 그래도 막히면 코드를 선택해 두고 Ctrl+C를 안내해요.","color":"#8B949E"}],[{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"copyText","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"fallbackTarget","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"try","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" navigator.clipboard.","color":"#E6EDF3"},{"content":"writeText","color":"#D2A8FF"},{"content":"(text);","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  } ","color":"#E6EDF3"},{"content":"catch","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"active","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" document.activeElement ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"area","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" document.","color":"#E6EDF3"},{"content":"createElement","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"textarea\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"    area.value ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" text;","color":"#E6EDF3"}],[{"content":"    area.style.cssText ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"position:fixed;opacity:0\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    document.body.","color":"#E6EDF3"},{"content":"append","color":"#D2A8FF"},{"content":"(area);","color":"#E6EDF3"}],[{"content":"    area.","color":"#E6EDF3"},{"content":"select","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" ok ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"try","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"      ok ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" document.","color":"#E6EDF3"},{"content":"execCommand","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"copy\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"    } ","color":"#E6EDF3"},{"content":"catch","color":"#FF7B72"},{"content":" {}","color":"#E6EDF3"}],[{"content":"    area.","color":"#E6EDF3"},{"content":"remove","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    active?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"ok ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" fallbackTarget) {","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"range","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" document.","color":"#E6EDF3"},{"content":"createRange","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"      range.","color":"#E6EDF3"},{"content":"selectNodeContents","color":"#D2A8FF"},{"content":"(fallbackTarget);","color":"#E6EDF3"}],[{"content":"      window.","color":"#E6EDF3"},{"content":"getSelection","color":"#D2A8FF"},{"content":"()?.","color":"#E6EDF3"},{"content":"removeAllRanges","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"      window.","color":"#E6EDF3"},{"content":"getSelection","color":"#D2A8FF"},{"content":"()?.","color":"#E6EDF3"},{"content":"addRange","color":"#D2A8FF"},{"content":"(range);","color":"#E6EDF3"}],[{"content":"    }","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" ok;","color":"#E6EDF3"}],[{"content":"  }","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Avatar","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"large","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"large","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" }) {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"    <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative grid shrink-0 place-items-center ${","color":"#A5D6FF"},{"content":"large","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"size-10\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"size-7\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-0 overflow-hidden rounded-full\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-spin absolute -inset-1 bg-[conic-gradient(#a78bfa,#22d3ee,#f472b6,#a78bfa)]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"      </","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-[2px] rounded-full bg-[#14162c]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"Sparkles","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative text-violet-200 ${","color":"#A5D6FF"},{"content":"large","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"size-[18px]\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"size-3.5\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"large ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute -right-0.5 -bottom-0.5 size-3 rounded-full border-2 border-[#0e1022] bg-emerald-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"    </","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"  );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CodeBlock","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"code","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"full","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"lang","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"caret","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"code","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"full","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"lang","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"caret","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReactNode","color":"#FFA657"},{"content":" }) {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"copied","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setCopied","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"codeRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"timer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"ReturnType","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"typeof","color":"#FF7B72"},{"content":" setTimeout>>(","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"clearTimeout","color":"#D2A8FF"},{"content":"(timer.current), []);","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"copy","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setCopied","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"copyText","color":"#D2A8FF"},{"content":"(full, codeRef.current));","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"clearTimeout","color":"#D2A8FF"},{"content":"(timer.current);","color":"#E6EDF3"}],[{"content":"    timer.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setTimeout","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setCopied","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":"), ","color":"#E6EDF3"},{"content":"1800","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  }","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"    <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"overflow-hidden rounded-xl border border-white/10 bg-[#070816]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center justify-between border-b border-white/[0.06] py-1 pr-1 pl-3 text-[11px] text-slate-400\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-1.5 font-mono\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-1.5 rounded-full bg-violet-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"lang","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"        </","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":"          ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":"          ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"copy","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex items-center gap-1 rounded-md px-2 py-1 font-medium transition hover:bg-white/[0.06] hover:text-white focus-visible:outline-2 focus-visible:outline-violet-300\"","color":"#A5D6FF"}],[{"content":"        >","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"copied ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Check","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5 text-emerald-300\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"Copy","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-live","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"polite\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"copied ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"복사됨\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" copied ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Ctrl+C로 복사\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"복사\"","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"</","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"        </","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"      </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 오른쪽 끝을 살짝 흐리게 해 좁은 화면에서 '옆으로 더 있다'는 걸 알려 줘요. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":"      <","color":"#E6EDF3"},{"content":"pre","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"overflow-x-auto py-2.5 pr-6 pl-3 font-mono text-[12.5px] leading-relaxed text-slate-200 [mask-image:linear-gradient(to_left,transparent,#000_20px)]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"code","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"codeRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"highlight","color":"#D2A8FF"},{"content":"(code)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"caret","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"        </","color":"#E6EDF3"},{"content":"code","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"      </","color":"#E6EDF3"},{"content":"pre","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"    </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"  );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 스트리밍의 핵심: 지금까지 공개된 글자 수(visible)만큼만 조각들을 앞에서부터 잘라 보여 줘요.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"MessageBody","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"message","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"streaming","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"message","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatMessage","color":"#FFA657"},{"content":"; ","color":"#E6EDF3"},{"content":"streaming","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":" }) {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"nodes","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReactNode","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [];","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" budget ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" message.visible ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Infinity","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"for","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" index ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"; index ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" message.parts.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" budget ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"; index","color":"#E6EDF3"},{"content":"++","color":"#FF7B72"},{"content":") {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"part","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" message.parts[index];","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"shown","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" part.content.","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", budget);","color":"#E6EDF3"}],[{"content":"    budget ","color":"#E6EDF3"},{"content":"-=","color":"#FF7B72"},{"content":" part.content.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"caret","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" streaming ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" budget ","color":"#E6EDF3"},{"content":"<=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-caret ml-0.5 inline-block h-[1.05em] w-[7px] translate-y-[3px] rounded-[2px] bg-violet-300\"","color":"#A5D6FF"},{"content":" /> ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    nodes.","color":"#E6EDF3"},{"content":"push","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"}],[{"content":"      part.type ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"CodeBlock","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"code","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"shown","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"full","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"part.content","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"lang","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"part.lang","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"caret","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"caret","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":"      ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"whitespace-pre-wrap\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"shown","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"caret","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"        </","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"      ),","color":"#E6EDF3"}],[{"content":"    );","color":"#E6EDF3"}],[{"content":"  }","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <>","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"nodes","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"</>;","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"AiChatPanel","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"name","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"코디\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"badge","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"AI 튜터\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"greeting","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"안녕하세요! 코딩하다 막히는 부분을 물어보세요. 예제 코드와 함께 설명해 드릴게요.\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"suggestions","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"\"배포는 어떻게 해요?\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"에러 읽는 법\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"API 키 보관\"","color":"#A5D6FF"},{"content":"],","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"getReply","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" demoReply,","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"demo","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"height","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"560","color":"#79C0FF"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"style","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"AiChatPanelProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"messages","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setMessages","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"ChatMessage","color":"#FFA657"},{"content":"[]>(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"startMessages","color":"#D2A8FF"},{"content":"(greeting, demo));","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"draft","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setDraft","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"phase","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setPhase","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"Phase","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"pressed","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setPressed","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"fading","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setFading","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"listRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"inputRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLTextAreaElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"nextId","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"busy","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"stopped","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"alive","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"stickToBottom","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tookOver","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    alive.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"      alive.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    };","color":"#E6EDF3"}],[{"content":"  }, []);","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"// 새 글자가 붙을 때마다 맨 아래로. 단, 사용자가 위로 스크롤해 읽는 중이면 건드리지 않아요.","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"list","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" listRef.current;","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (list ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" stickToBottom.current) list.scrollTop ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" list.scrollHeight;","color":"#E6EDF3"}],[{"content":"  }, [messages, phase]);","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"// 입력창 자동 높이: 높이를 auto로 풀었다가 내용 높이(scrollHeight)에 맞춰요. 최대 5줄.","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"box","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" inputRef.current;","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"box) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    box.style.height ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"auto\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    box.style.height ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"Math","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"min","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"box","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"scrollHeight","color":"#E6EDF3"},{"content":", ","color":"#A5D6FF"},{"content":"120","color":"#79C0FF"},{"content":")","color":"#A5D6FF"},{"content":"}px`","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  }, [draft]);","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"send","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"fromScript","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"question","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" text.","color":"#E6EDF3"},{"content":"trim","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"question ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" busy.current) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    busy.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    stopped.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    stickToBottom.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"reduce","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"prefersReduced","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"userId","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" nextId.current","color":"#E6EDF3"},{"content":"++","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setDraft","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setMessages","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"list","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"list, { id: userId, role: ","color":"#E6EDF3"},{"content":"\"user\"","color":"#A5D6FF"},{"content":", parts: [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: question }] }]);","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setPhase","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"thinking\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":"    ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" parts","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatPart","color":"#FFA657"},{"content":"[];","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"try","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"      [parts] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Promise","color":"#79C0FF"},{"content":".","color":"#E6EDF3"},{"content":"all","color":"#D2A8FF"},{"content":"([","color":"#E6EDF3"},{"content":"getReply","color":"#D2A8FF"},{"content":"(question), ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(reduce ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"300","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1000","color":"#79C0FF"},{"content":")]);","color":"#E6EDF3"}],[{"content":"    } ","color":"#E6EDF3"},{"content":"catch","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"      parts ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [{ type: ","color":"#E6EDF3"},{"content":"\"text\"","color":"#A5D6FF"},{"content":", content: ","color":"#E6EDF3"},{"content":"\"답변을 가져오지 못했어요. 잠시 뒤 다시 시도해 주세요.\"","color":"#A5D6FF"},{"content":" }];","color":"#E6EDF3"}],[{"content":"    }","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"alive.current) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" nextId.current","color":"#E6EDF3"},{"content":"++","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"total","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"lengthOf","color":"#D2A8FF"},{"content":"(parts);","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" shown ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" reduce ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" total ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setMessages","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"list","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"list, { id, role: ","color":"#E6EDF3"},{"content":"\"assistant\"","color":"#A5D6FF"},{"content":", parts, visible: shown }]);","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setPhase","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"streaming\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":"    ","color":"#E6EDF3"},{"content":"// 토큰 스트리밍 흉내: 30~70ms마다 1~3글자씩 공개해요. 실제 API라면 받은 조각 길이만큼 늘리면 돼요.","color":"#8B949E"}],[{"content":"    ","color":"#E6EDF3"},{"content":"// 자동 재생 중이던 답변은 사용자가 끼어드는 순간 끝까지 한 번에 보여 주고 입력을 넘겨줘요.","color":"#8B949E"}],[{"content":"    ","color":"#E6EDF3"},{"content":"while","color":"#FF7B72"},{"content":" (shown ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" total ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"stopped.current ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" alive.current) {","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"30","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"40","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"      shown ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" fromScript ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" tookOver.current ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" total ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"min","color":"#D2A8FF"},{"content":"(total, shown ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"floor","color":"#D2A8FF"},{"content":"(Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"visible","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" shown;","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"setMessages","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"list","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" list.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"message","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (message.id ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" id ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"message, visible } ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" message)));","color":"#E6EDF3"}],[{"content":"    }","color":"#E6EDF3"}],[{"content":"    busy.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (alive.current) ","color":"#E6EDF3"},{"content":"setPhase","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  }","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"// 사용자가 패널을 만지는 순간 자동 재생을 멈추고, 대신 치던 글자도 지워요.","color":"#8B949E"}],[{"content":"  ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"takeOver","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (tookOver.current) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    tookOver.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setPressed","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setFading","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"busy.current) ","color":"#E6EDF3"},{"content":"setDraft","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  }","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"demo ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"prefersReduced","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" cancelled ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"idle","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"cancelled ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"tookOver.current;","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"async","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"play","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"for","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" round ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"idle","color":"#D2A8FF"},{"content":"(); round","color":"#E6EDF3"},{"content":"++","color":"#FF7B72"},{"content":") {","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(round ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"150","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1400","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"for","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"text","color":"#FFA657"},{"content":": ","color":"#E6EDF3"},{"content":"question","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"via","color":"#79C0FF"},{"content":" } ","color":"#E6EDF3"},{"content":"of","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DEMO_SCRIPT","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"idle","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (via ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"chip\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" suggestions.","color":"#E6EDF3"},{"content":"includes","color":"#D2A8FF"},{"content":"(question)) {","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"setPressed","color":"#D2A8FF"},{"content":"(question);","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"420","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"setPressed","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"          } ","color":"#E6EDF3"},{"content":"else","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (via ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"send\"","color":"#A5D6FF"},{"content":") {","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"for","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" i ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"; i ","color":"#E6EDF3"},{"content":"<=","color":"#FF7B72"},{"content":" question.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":"; i","color":"#E6EDF3"},{"content":"++","color":"#FF7B72"},{"content":") {","color":"#E6EDF3"}],[{"content":"              ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"idle","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"              ","color":"#E6EDF3"},{"content":"setDraft","color":"#D2A8FF"},{"content":"(question.","color":"#E6EDF3"},{"content":"slice","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", i));","color":"#E6EDF3"}],[{"content":"              ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"55","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" Math.","color":"#E6EDF3"},{"content":"random","color":"#D2A8FF"},{"content":"() ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"45","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"            }","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"450","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"          }","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"idle","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"send","color":"#D2A8FF"},{"content":"(question, ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"2600","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"        }","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"600","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"idle","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"// 한 바퀴가 끝나면 살짝 흐려졌다가 처음 대화로 돌아가요.","color":"#8B949E"}],[{"content":"        ","color":"#E6EDF3"},{"content":"setFading","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"await","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"sleep","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"400","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"idle","color":"#D2A8FF"},{"content":"()) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"        stickToBottom.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"setMessages","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"startMessages","color":"#D2A8FF"},{"content":"(greeting, ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"setFading","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"      }","color":"#E6EDF3"}],[{"content":"    }","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"play","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"      cancelled ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    };","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"// 처음 마운트될 때 한 번만 재생을 시작해요. (props가 바뀌어도 다시 시작하지 않음)","color":"#8B949E"}],[{"content":"    ","color":"#E6EDF3"},{"content":"// eslint-disable-next-line react-hooks/exhaustive-deps","color":"#8B949E"}],[{"content":"  }, []);","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handleKeyDown","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"KeyboardEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLTextAreaElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"// Shift+Enter는 줄바꿈. 한글 조합 중의 Enter는 글자 확정용이라 보내지 않아요.","color":"#8B949E"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (event.key ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"Enter\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" event.shiftKey ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" event.nativeEvent.isComposing) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    event.","color":"#E6EDF3"},{"content":"preventDefault","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"send","color":"#D2A8FF"},{"content":"(draft);","color":"#E6EDF3"}],[{"content":"  }","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"restart","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"takeOver","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    stickToBottom.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"setMessages","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"startMessages","color":"#D2A8FF"},{"content":"(greeting, ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":"));","color":"#E6EDF3"}],[{"content":"    inputRef.current?.","color":"#E6EDF3"},{"content":"focus","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"  }","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"working","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" phase ","color":"#E6EDF3"},{"content":"!==","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"idle\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"asked","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Set","color":"#D2A8FF"},{"content":"(messages.","color":"#E6EDF3"},{"content":"filter","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"message","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" message.role ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"user\"","color":"#A5D6FF"},{"content":").","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"message","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" message.parts[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"].content));","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"chips","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" suggestions.","color":"#E6EDF3"},{"content":"filter","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"suggestion","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"asked.","color":"#E6EDF3"},{"content":"has","color":"#D2A8FF"},{"content":"(suggestion));","color":"#E6EDF3"}],[],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"    <","color":"#E6EDF3"},{"content":"section","color":"#7EE787"}],[{"content":"      ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"name","color":"#E6EDF3"},{"content":"} 채팅`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":"      ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"      ","color":"#E6EDF3"},{"content":"onPointerDownCapture","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"takeOver","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"      ","color":"#E6EDF3"},{"content":"onKeyDownCapture","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"takeOver","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"      ","color":"#E6EDF3"},{"content":"onFocusCapture","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"takeOver","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"      ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ height, ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"style }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"      ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`relative isolate flex w-full max-w-[480px] flex-col overflow-hidden rounded-[26px] border border-white/10 bg-[#0b0c1d] break-keep shadow-[0_40px_100px_-30px_rgba(91,33,182,.6)] ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":"    >","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"pointer-events-none absolute inset-x-0 top-0 -z-10 h-48 bg-[radial-gradient(70%_100%_at_20%_0%,rgba(139,92,246,.2),transparent)]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[],[{"content":"      <","color":"#E6EDF3"},{"content":"header","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-3 border-b border-white/[0.07] bg-white/[0.015] px-4 py-2.5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"Avatar","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"large","color":"#79C0FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-w-0 flex-1\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-1.5 text-[15px] font-semibold text-white\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"name","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"            <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rounded-md bg-violet-500/15 px-1.5 py-px text-[11px] font-bold text-violet-200 ring-1 ring-violet-400/25\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"badge","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"</","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          </","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-1.5 text-xs text-slate-400\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"working ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"              <>","color":"#E6EDF3"}],[{"content":"                <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-pulse size-1.5 rounded-full bg-violet-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"                답변을 쓰는 중…","color":"#E6EDF3"}],[{"content":"              </>","color":"#E6EDF3"}],[{"content":"            ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"              <>","color":"#E6EDF3"}],[{"content":"                <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-1.5 rounded-full bg-emerald-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"                온라인 · 보통 2초 안에 답해요","color":"#E6EDF3"}],[{"content":"              </>","color":"#E6EDF3"}],[{"content":"            )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          </","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"        </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":"          ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":"          ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"restart","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          ","color":"#E6EDF3"},{"content":"disabled","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"working","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"새 대화 시작\"","color":"#A5D6FF"}],[{"content":"          ","color":"#E6EDF3"},{"content":"title","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"새 대화\"","color":"#A5D6FF"}],[{"content":"          ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-9 place-items-center rounded-xl text-slate-400 transition hover:bg-white/[0.06] hover:text-white focus-visible:outline-2 focus-visible:outline-violet-300 disabled:opacity-40\"","color":"#A5D6FF"}],[{"content":"        >","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"RotateCcw","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-4\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"        </","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"      </","color":"#E6EDF3"},{"content":"header","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[],[{"content":"      <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"}],[{"content":"        ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"listRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"        ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"log\"","color":"#A5D6FF"}],[{"content":"        ","color":"#E6EDF3"},{"content":"aria-live","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"polite\"","color":"#A5D6FF"}],[{"content":"        ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"대화 내용\"","color":"#A5D6FF"}],[{"content":"        ","color":"#E6EDF3"},{"content":"aria-busy","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"working","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"        ","color":"#E6EDF3"},{"content":"onScroll","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"list","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" event.currentTarget;","color":"#E6EDF3"}],[{"content":"          stickToBottom.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" list.scrollHeight ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" list.scrollTop ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" list.clientHeight ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"40","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"        }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"        ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`flex flex-1 flex-col gap-3.5 overflow-y-auto overscroll-contain px-4 py-3.5 transition-opacity [mask-image:linear-gradient(to_bottom,transparent,#000_20px)] duration-300 ${","color":"#A5D6FF"},{"content":"fading","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"opacity-0\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":"      >","color":"#E6EDF3"}],[{"content":"        ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"messages.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"message","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"}],[{"content":"          message.role ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"user\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"message.id","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-in flex justify-end\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"              <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-[82%] rounded-2xl rounded-br-md bg-gradient-to-br from-violet-500 to-indigo-600 px-3.5 py-2 text-[14px] leading-relaxed whitespace-pre-wrap text-white shadow-lg shadow-violet-950/40\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"                ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"message.parts[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"].content","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              </","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"            </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"message.id","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-in flex gap-2.5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"              <","color":"#E6EDF3"},{"content":"Avatar","color":"#7EE787"},{"content":" />","color":"#E6EDF3"}],[{"content":"              <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex max-w-[88%] min-w-0 flex-col gap-2.5 rounded-2xl rounded-tl-md bg-white/[0.045] px-3.5 py-2.5 text-[14px] leading-relaxed break-words text-slate-200 ring-1 ring-white/[0.07]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"                <","color":"#E6EDF3"},{"content":"MessageBody","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"message","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"message","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"streaming","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"phase ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"streaming\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" message.id ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" messages[messages.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":"].id","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":"              </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"            </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          ),","color":"#E6EDF3"}],[{"content":"        )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[],[{"content":"        ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"phase ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"thinking\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-in flex gap-2.5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"Avatar","color":"#7EE787"},{"content":" />","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-1.5 rounded-2xl rounded-tl-md bg-white/[0.045] px-4 py-3.5 ring-1 ring-white/[0.07]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"              <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"sr-only\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"name","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"가 답변을 준비하고 있어요</","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"              ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"[","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":"].","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"dot","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"                <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"dot","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"dot","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"160","color":"#79C0FF"},{"content":"}ms`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-dot size-1.5 rounded-full bg-violet-300\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"              ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"            </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"        )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[],[{"content":"        ","color":"#E6EDF3"},{"content":"{!","color":"#FF7B72"},{"content":"working ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"fading ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" chips.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":">","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ai-chat-panel-in flex flex-wrap gap-2 pl-[38px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"            ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"chips.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"suggestion","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"              <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":"                ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"suggestion","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"                ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":"                ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"send","color":"#D2A8FF"},{"content":"(suggestion)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"                ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[12.5px] text-violet-100 transition hover:-translate-y-0.5 hover:border-violet-300/50 hover:bg-violet-500/20 focus-visible:outline-2 focus-visible:outline-violet-300 ${","color":"#A5D6FF"},{"content":"pressed","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"suggestion","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"scale-95 border-violet-300/70 bg-violet-500/30\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"border-violet-400/25 bg-violet-500/10\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":"              >","color":"#E6EDF3"}],[{"content":"                <","color":"#E6EDF3"},{"content":"Sparkles","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3 text-violet-300\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"                ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"suggestion","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              </","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"            ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"          </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"        )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"      </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[],[{"content":"      <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"border-t border-white/[0.07] px-3 pt-2 pb-2.5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-end gap-2 rounded-2xl border border-white/10 bg-white/[0.04] p-1.5 pl-3.5 transition focus-within:border-violet-400/60 focus-within:bg-white/[0.06] focus-within:ring-4 focus-within:ring-violet-500/15\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-w-0 flex-1\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"sr-only\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"name","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"에게 보낼 메시지 (Enter로 보내고 Shift+Enter로 줄바꿈)</","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"textarea","color":"#7EE787"}],[{"content":"              ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"inputRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"rows","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"1","color":"#79C0FF"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"draft","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"onChange","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setDraft","color":"#D2A8FF"},{"content":"(event.currentTarget.value)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"onKeyDown","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handleKeyDown","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"placeholder","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`${","color":"#A5D6FF"},{"content":"name","color":"#E6EDF3"},{"content":"}에게 무엇이든 물어보세요`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"block max-h-[120px] w-full resize-none bg-transparent py-1.5 text-[14px] leading-5 text-white outline-none placeholder:text-slate-500\"","color":"#A5D6FF"}],[{"content":"            />","color":"#E6EDF3"}],[{"content":"          </","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"working ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":"              ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":"              ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (stopped.current ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"답변 멈추기\"","color":"#A5D6FF"}],[{"content":"              ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-9 shrink-0 place-items-center rounded-xl bg-white/10 text-white transition hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-violet-300\"","color":"#A5D6FF"}],[{"content":"            >","color":"#E6EDF3"}],[{"content":"              <","color":"#E6EDF3"},{"content":"Square","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5 fill-current\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"            </","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          ) ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"            <","color":"#E6EDF3"},{"content":"button","color":"#7EE787"}],[{"content":"              ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"button\"","color":"#A5D6FF"}],[{"content":"              ","color":"#E6EDF3"},{"content":"onClick","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"send","color":"#D2A8FF"},{"content":"(draft)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"disabled","color":"#79C0FF"},{"content":"={!","color":"#FF7B72"},{"content":"draft.","color":"#E6EDF3"},{"content":"trim","color":"#D2A8FF"},{"content":"()","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"              ","color":"#E6EDF3"},{"content":"aria-label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"보내기\"","color":"#A5D6FF"}],[{"content":"              ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-violet-500 to-indigo-500 text-white shadow-[0_6px_20px_-4px_rgba(139,92,246,.8)] transition hover:brightness-110 focus-visible:outline-2 focus-visible:outline-violet-300 active:scale-95 disabled:bg-none disabled:bg-white/[0.06] disabled:text-slate-500 disabled:shadow-none\"","color":"#A5D6FF"}],[{"content":"            >","color":"#E6EDF3"}],[{"content":"              <","color":"#E6EDF3"},{"content":"ArrowUp","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-[18px]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"            </","color":"#E6EDF3"},{"content":"button","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"          )","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"        </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"        <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-2 hidden justify-center gap-1 text-[11px] text-slate-500 [@media(min-height:480px)]:flex\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"          <","color":"#E6EDF3"},{"content":"kbd","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"font-sans text-slate-400\"","color":"#A5D6FF"},{"content":">Enter</","color":"#E6EDF3"},{"content":"kbd","color":"#7EE787"},{"content":"> 보내기 · <","color":"#E6EDF3"},{"content":"kbd","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"font-sans text-slate-400\"","color":"#A5D6FF"},{"content":">Shift + Enter</","color":"#E6EDF3"},{"content":"kbd","color":"#7EE787"},{"content":"> 줄바꿈","color":"#E6EDF3"}],[{"content":"        </","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"      </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[],[{"content":"      <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":"        @keyframes ai-chat-panel-spin { to { transform: rotate(360deg); } }","color":"#A5D6FF"}],[{"content":"        @keyframes ai-chat-panel-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }","color":"#A5D6FF"}],[{"content":"        @keyframes ai-chat-panel-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }","color":"#A5D6FF"}],[{"content":"        @keyframes ai-chat-panel-blink { 50% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":"        @keyframes ai-chat-panel-pulse { 50% { opacity: .3; } }","color":"#A5D6FF"}],[{"content":"        .ai-chat-panel-spin { animation: ai-chat-panel-spin 4s linear infinite; }","color":"#A5D6FF"}],[{"content":"        .ai-chat-panel-in { animation: ai-chat-panel-in .35s cubic-bezier(.2,.8,.2,1) both; }","color":"#A5D6FF"}],[{"content":"        .ai-chat-panel-dot { animation: ai-chat-panel-dot 1.1s ease-in-out infinite; }","color":"#A5D6FF"}],[{"content":"        .ai-chat-panel-caret { animation: ai-chat-panel-blink .9s steps(1) infinite; }","color":"#A5D6FF"}],[{"content":"        .ai-chat-panel-pulse { animation: ai-chat-panel-pulse 1s ease-in-out infinite; }","color":"#A5D6FF"}],[{"content":"        @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":"          .ai-chat-panel-spin, .ai-chat-panel-in, .ai-chat-panel-dot, .ai-chat-panel-caret, .ai-chat-panel-pulse { animation: none; }","color":"#A5D6FF"}],[{"content":"        }","color":"#A5D6FF"}],[{"content":"      `","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"</","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"    </","color":"#E6EDF3"},{"content":"section","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"  );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"AiChatPanel;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { AiChatPanel } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/ai-chat-panel\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"Demo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":"    <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid min-h-screen place-items-center bg-[#05060f] bg-[radial-gradient(ellipse_at_12%_8%,#2a1d6b,transparent_55%),radial-gradient(ellipse_at_92%_96%,#0e2c52,transparent_50%)] p-4\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"AiChatPanel","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"height","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min(600px, calc(100vh - 32px))\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":"    </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"  );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}]
16:null
1a:[["$","title","0",{"children":"AI 튜터 채팅 패널 · AI Coder"}],["$","meta","1",{"name":"description","content":"타이핑 표시 뒤 한 글자씩 흘러나오는 답변, 코드 복사, 추천 질문 칩을 갖춘 AI 채팅창"}],["$","meta","2",{"name":"application-name","content":"AI Coder"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"referrer","content":"strict-origin-when-cross-origin"}],["$","meta","5",{"name":"robots","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"name":"category","content":"education"}],["$","link","7",{"rel":"canonical","href":"https://aicoder.kr/library/ai-chat-panel"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"AI 튜터 채팅 패널 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"타이핑 표시 뒤 한 글자씩 흘러나오는 답변, 코드 복사, 추천 질문 칩을 갖춘 AI 채팅창"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/ai-chat-panel"}],["$","meta","12",{"property":"og:site_name","content":"AI Coder"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://aicoder.kr/social-card.png"}],["$","meta","15",{"property":"og:image:width","content":"1200"}],["$","meta","16",{"property":"og:image:height","content":"630"}],["$","meta","17",{"property":"og:image:alt","content":"AI Coder · AI 코딩 교육과 실전 프로젝트"}],["$","meta","18",{"property":"og:type","content":"website"}],["$","meta","19",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","20",{"name":"twitter:title","content":"AI 튜터 채팅 패널 · AI Coder"}],["$","meta","21",{"name":"twitter:description","content":"타이핑 표시 뒤 한 글자씩 흘러나오는 답변, 코드 복사, 추천 질문 칩을 갖춘 AI 채팅창"}],["$","meta","22",{"name":"twitter:image","content":"https://aicoder.kr/social-card.png"}],["$","link","23",{"rel":"icon","href":"/favicon.ico?766d9da6178db116","type":"image/x-icon","sizes":"16x16"}],["$","link","24",{"rel":"icon","href":"/icon.png?96c6ddf66156e856","type":"image/png","sizes":"64x64"}],["$","link","25",{"rel":"apple-touch-icon","href":"/apple-icon.png?87c64c22e9bd6762","type":"image/png","sizes":"180x180"}],["$","$L1f","26",{}]]
</article></body></html>

예제에 포함된 파일