부록 #3. 응답 대기 중 표시¶
변경 파일을 한 번에 덮어쓰기 하실려면, pyhub-git-commit-apply 유틸리티 설치하신 후에, 프로젝트 루트에서 아래 명령 실행하시면 지정 커밋의 모든 파일을 다운받아 현재 경로에 덮어쓰기합니다.
python -m pyhub_git_commit_apply https://github.com/pyhub-kr/django-webchat-rag-langcon2025/commit/355aa3f0221992bd76501daffdf7ce7502c128a4
uv를 사용하실 경우
uv run pyhub-git-commit-apply https://github.com/pyhub-kr/django-webchat-rag-langcon2025/commit/355aa3f0221992bd76501daffdf7ce7502c128a4
chat/templates/chat/room_detail.html 파일 덮어쓰기
1{% extends "chat/base.html" %}
2
3{% block content %}
4<div class="flex flex-col h-[calc(100vh-16rem)]"
5 x-data="{ loading: false }">
6 <div class="bg-white rounded-lg shadow-md p-4 mb-4">
7 <h1 class="text-2xl font-bold text-gray-800">{{ room.name }}</h1>
8 <p class="text-sm text-gray-600">생성일: {{ room.created_at|date:"Y-m-d H:i" }}</p>
9 </div>
10
11 <div class="flex-1 overflow-hidden">
12 <div class="chat-messages h-full overflow-y-auto pb-2 overscroll-contain"
13 x-data="{
14 scrollToBottom() {
15 setTimeout(() => {
16 $el.scrollTo({ top: $el.scrollHeight, behavior: 'smooth'})
17 });
18 }
19 }"
20 x-init="scrollToBottom()"
21 @htmx:after-settle="scrollToBottom()">
22 {% include "chat/_message_list.html" with message_list=message_list only %}
23
24 <div x-show="loading" class="text-center py-2 text-gray-600">
25 응답 대기 중 ...
26 </div>
27 </div>
28
29 </div>
30
31 <form hx-post="{% url 'chat:message_new' room_pk=room.pk %}"
32 hx-target="previous .chat-messages"
33 hx-swap="beforeend"
34 @htmx:before-request="loading = true; $el.reset()"
35 @htmx:after-request="loading = false" novalidate class="mt-4">
36 {% csrf_token %}
37 <div class="flex gap-2">
38 <input type="text" name="content" required autocomplete="off" placeholder="메시지를 입력하세요..." autofocus
39 class="flex-1 bg-gray-100 rounded-lg px-4 py-2">
40 <button type="submit"
41 class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-300">
42 전송
43 </button>
44 </div>
45 </form>
46</div>
47{% endblock %}