20 lines
1.7 KiB
Markdown
20 lines
1.7 KiB
Markdown
# snap 답변의 ASCII 다이어그램이 말풍선 밖으로 튀어나감
|
|
|
|
## 증상
|
|
- 챗봇 답변에 든 ASCII 다이어그램(`┌───┐` 박스 라인)이 회색 인라인 코드 배경으로 줄줄이 렌더되면서 말풍선 오른쪽 밖으로 넘침
|
|
|
|
## 원인
|
|
- `Message.tsx` 가 `pre` 를 fragment 로 언랩(`pre: ({children}) => <>{children}</>`)하고, 코드펜스는 `code` 컴포넌트의 `language-*` className 매칭으로만 CodeBlock 처리하고 있었음
|
|
- **언어 라벨 없는 코드펜스**(LLM 이 ``` 만 쓰고 다이어그램 넣는 경우)는 className 이 없어서 인라인 `code` 분기로 떨어짐 → `<pre>` 없는 인라인 코드가 됨
|
|
- 인라인은 공백에서만 줄바꿈되는데 `─────` 연속 문자는 줄바꿈 지점이 없어서 그대로 overflow
|
|
- react-markdown v10 은 v8 의 `inline` prop 이 없어짐 — className 만으로 블록/인라인 구분하면 이 케이스가 샘
|
|
|
|
## 수정
|
|
- `Message.tsx`: 블록 코드 판별을 `pre` 컴포넌트로 이동 — 펜스는 언어 유무와 무관하게 전부 `CodeBlock`(overflow-auto 스크롤 컨테이너)으로. `code` 는 순수 인라인만 담당
|
|
- 재현 테스트: `Message.test.tsx` (언어 없는 펜스 → CodeBlock, 언어 있는 펜스 유지, 인라인 유지)
|
|
- `StreamingText.tsx` 는 `pre` 를 살려두고 `overflow-x-auto` 도 있어서 무관 — 안 건드림
|
|
|
|
## 교훈
|
|
- react-markdown 에서 "블록 코드 = pre 의 자식" 이 유일하게 안전한 구분 기준. `language-*` className 은 언어 없는 펜스에서 빠짐
|
|
- `pre` 를 언랩할 거면 언어 없는 펜스가 어디로 떨어지는지 반드시 확인
|