shinalok/youlbot-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 25: Separate RAG sources into collapsible box below chatbot

Browse Source 
- Add source_box gr.HTML component below chatbot
- Add _sources_html() helper rendering <details> expand/collapse
- Handle __sources token in respond(): update source_box independently of thinking_box
- Reset both thinking_box and source_box on each new message

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
sal
2026-06-01 16:15:06 +09:00
parent 55ea69d902
commit 38d2edeeec
1 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+36 -12
View File
@@ -96,20 +96,21 @@ async def tts_speak(text: str) -> str | None:
async def respond(message, history, show_thinking, user_id, use_tts, run_ids):
if not message.strip():
yield history, "", None, run_ids, ""
yield history, "", None, run_ids, "", ""
return
history = list(history)
run_ids = list(run_ids)
history.append({"role": "user", "content": message})
history.append({"role": "assistant", "content": ""})
yield history, "", None, run_ids, "" # thinking_box 초기화
yield history, "", None, run_ids, "", "" # thinking_box + source_box 초기화
collected_run_id: str | None = None
tts_text = "" # 순수 답변만 누적 (TTS용)
thinking_acc = "" # 전체 누적 (완료 후 details용)
thinking_text = "" # __thinking 토큰만 (줄 감지용)
thinking_finalized = False
source_box_html = ""
try:
async for token, run_id in api_client.chat(message, user_id, show_thinking):
@@ -120,14 +121,14 @@ async def respond(message, history, show_thinking, user_id, use_tts, run_ids):
# 즉시 상태 — thinking_acc에 누적 안 함
if isinstance(token, dict) and "__status" in token:
if not thinking_acc:
yield history, "", None, run_ids, _status_html(token["__status"])
yield history, "", None, run_ids, _status_html(token["__status"]), gr.update()
continue
# 사고 과정(LLM thinking) — 현재 줄만 live_html로 표시
if isinstance(token, dict) and "__thinking" in token:
thinking_text += token["__thinking"]
thinking_acc += token["__thinking"]
yield history, "", None, run_ids, _live_html(_last_line(thinking_text))
yield history, "", None, run_ids, _live_html(_last_line(thinking_text)), gr.update()
continue
# 진행 로그(LangGraph, 검색 등) — 메시지 전체를 live_html로 표시
@@ -135,30 +136,36 @@ async def respond(message, history, show_thinking, user_id, use_tts, run_ids):
thinking_acc += token["__meta"]
live = token["__meta"].strip()
if live:
yield history, "", None, run_ids, _live_html(live)
yield history, "", None, run_ids, _live_html(live), gr.update()
continue
# RAG 출처 — 별도 source_box로 표시
if isinstance(token, dict) and "__sources" in token:
source_box_html = _sources_html(token["__sources"])
yield history, "", None, run_ids, gr.update(), source_box_html
continue
# 첫 답변 토큰 도착 — 전체를 details로 전환 (접힌 상태)
if thinking_acc and not thinking_finalized:
thinking_finalized = True
yield history, "", None, run_ids, _thinking_html(thinking_acc)
yield history, "", None, run_ids, _thinking_html(thinking_acc), gr.update()
tts_text += token
history[-1]["content"] += token
yield history, "", None, run_ids, gr.update()
yield history, "", None, run_ids, gr.update(), gr.update()
except Exception as e:
history[-1]["content"] += f"\n\n[오류: {e}]"
yield history, "", None, run_ids, gr.update()
yield history, "", None, run_ids, gr.update(), gr.update()
return
run_ids.append(collected_run_id)
if use_tts:
audio_path = await tts_speak(tts_text)
yield history, "", audio_path, run_ids, gr.update()
yield history, "", audio_path, run_ids, gr.update(), gr.update()
else:
yield history, "", None, run_ids, gr.update()
yield history, "", None, run_ids, gr.update(), gr.update()
def handle_feedback(like_data: gr.LikeData, history, run_ids, user_id):
@@ -277,6 +284,22 @@ def _status_html(status: str) -> str:
)
def _sources_html(sources: list) -> str:
"""RAG 출처 목록을 접기/펼치기로 표시."""
items = "".join(
f"<li>{_html.escape(s['filename'])}"
+ (f" — {s['page']}페이지" if "page" in s else "")
+ "</li>"
for s in sources
)
return (
f'<details style="{_BOX_STYLE}">'
f'<summary style="cursor:pointer;font-weight:bold;">📄 출처 ({len(sources)}개)</summary>'
f'<ul style="margin:6px 0;padding-left:18px;font-size:0.85em;color:#555;">{items}</ul>'
f'</details>'
)
with gr.Blocks(title="율봇") as demo:
gr.Markdown("# 율봇\n육아·금융 전문 AI 상담 도우미")
@@ -294,6 +317,7 @@ with gr.Blocks(title="율봇") as demo:
thinking_box = gr.HTML(value="")
chatbot = gr.Chatbot(label="율봇", height=500)
source_box = gr.HTML(value="")
with gr.Row():
msg_box = gr.Textbox(
placeholder="질문을 입력하세요... (Enter로 전송)",
@@ -333,12 +357,12 @@ with gr.Blocks(title="율봇") as demo:
send_btn.click(
respond,
inputs=[msg_box, chatbot, show_thinking, user_state, use_tts, run_ids_state],
outputs=[chatbot, msg_box, tts_output, run_ids_state, thinking_box],
outputs=[chatbot, msg_box, tts_output, run_ids_state, thinking_box, source_box],
)
msg_box.submit(
respond,
inputs=[msg_box, chatbot, show_thinking, user_state, use_tts, run_ids_state],
outputs=[chatbot, msg_box, tts_output, run_ids_state, thinking_box],
outputs=[chatbot, msg_box, tts_output, run_ids_state, thinking_box, source_box],
)
reset_btn.click(reset_chat, inputs=[user_state], outputs=[chatbot, run_ids_state])