# AI 채팅 패널

AI 채팅은 AI와 대화하며 앱을 만드는 핵심 공간입니다.

***

### 구성 요소

| 요소           | 설명                    |
| ------------ | --------------------- |
| **대화 내역**    | 이전 요청과 AI 응답          |
| **프롬프트 입력창** | 새로운 요청 입력             |
| **전송 버튼**    | 프롬프트 전송 (Enter 또는 클릭) |
| **+ 버튼**     | 파일 업로드 메뉴             |
| **🎯 버튼**    | Visual Edit 모드 토글     |
| **페이지 칩**    | 현재 작업 중인 페이지 경로       |

***

### 프롬프트 작성 가이드

#### 좋은 프롬프트의 특징

{% hint style="success" %}
**구체적**이고 **명확**할수록 원하는 결과를 얻습니다.
{% endhint %}

#### 예시 비교

{% tabs %}
{% tab title="❌ 나쁜 예" %}

```
폼 만들어줘
```

**문제점**: 어떤 폼인지, 어떤 필드가 필요한지 불명확
{% endtab %}

{% tab title="✅ 좋은 예" %}

```
직원 등록 폼을 만들어줘.

필드:
- 이름 (필수, 텍스트)
- 이메일 (필수, 이메일 형식 검증)
- 부서 (드롭다운: 개발팀, 마케팅팀, 영업팀)
- 입사일 (날짜 선택)

제출 버튼은 파란색으로,
필수 필드 미입력 시 에러 메시지 표시
```

**장점**: 필드, 타입, 검증, 디자인까지 명확
{% endtab %}
{% endtabs %}

#### 프롬프트 구조 템플릿

```
[무엇을] 만들어줘/수정해줘/추가해줘

필요한 기능:
- 기능 1
- 기능 2
- 기능 3

디자인/스타일:
- 색상, 레이아웃 등

동작:
- 버튼 클릭 시 어떤 일이 일어나는지
- 에러 처리 방법
```

***

### 대화 내역

#### 메시지 유형

| 유형        | 설명          |
| --------- | ----------- |
| User      | 내가 보낸 요청    |
| Assistant | AI 응답       |
| Tool Call | 파일 생성/수정 작업 |
| Error     | 오류 발생       |
| Aborted   | 중단된 요청      |

#### Tool Call 메시지

AI가 파일을 수정할 때 표시됩니다.

* **파일 경로**: 수정된 파일 위치
* **수정 라인**: 변경된 코드 라인 수
* **미리보기**: 변경된 코드 일부

#### 후속 제안 (Follow-up Suggestions)

AI 응답 후 관련 후속 작업을 제안합니다.

```
🔹 "테이블에 페이지네이션 추가"
🔹 "검색 필터 기능 추가"
🔹 "모바일 반응형 적용"
```

클릭하면 해당 프롬프트가 자동 입력됩니다.

***

### 파일 업로드

#### 업로드 방법

1. **+ 버튼** 클릭 → 파일 선택
2. **드래그 앤 드롭**: 파일을 입력창에 드롭
3. **붙여넣기**: 클립보드 이미지 Ctrl+V

#### 지원 파일 형식

| 유형      | 형식                               |
| ------- | -------------------------------- |
| **이미지** | PNG, JPG, GIF, WebP              |
| **문서**  | PDF, Word (.docx), Excel (.xlsx) |
| **텍스트** | TXT, CSV                         |

#### 활용 예시

{% tabs %}
{% tab title="디자인 참고" %}

```
[이미지 업로드]
이 디자인을 참고해서 비슷한 스타일로 만들어줘.
색상과 레이아웃을 최대한 따라해줘.
```

{% endtab %}

{% tab title="데이터 구조 참고" %}

```
[Excel 업로드]
이 엑셀 파일의 컬럼 구조를 기반으로
입력 폼과 테이블을 만들어줘.
```

{% endtab %}

{% tab title="기획서 참고" %}

```
[PDF 업로드]
이 기획서에 있는 화면을 구현해줘.
2페이지의 대시보드 화면부터 시작하자.
```

{% endtab %}
{% endtabs %}

***

### Visual Edit 토글

🎯 버튼을 클릭하면 Visual Edit 모드가 활성화됩니다.

#### 활성화 시 변화

* Preview에서 요소 클릭 가능
* 선택한 요소 정보가 Chat에 표시
* 해당 요소에 대한 수정 요청 가능

#### 선택된 요소 칩

```
🎯 <button> | src/App.js:42
```

* **태그명**: 선택된 HTML 요소
* **파일 위치**: 해당 코드의 파일과 라인 번호

→ Visual Edit Mode 상세

***

### 페이지 칩

현재 Preview에서 보고 있는 페이지 경로를 표시합니다.

```
📄 /employees
```

다중 페이지 앱에서 AI가 어떤 페이지를 수정해야 하는지 알 수 있습니다.

***

### 생성 중단

AI가 응답을 생성하는 중에 **Stop 버튼**을 클릭하면 중단됩니다.

* 생성 중이던 내용은 일부만 적용될 수 있음
* 중단 후 새로운 요청 가능

***

### 팁

{% hint style="info" %}
**프롬프트 히스토리**

대화 내역을 스크롤하면 이전 요청을 확인할 수 있습니다. 비슷한 요청을 다시 할 때 참고하세요.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.waveon.io/editor/ai-chatting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.