Upload css(타이핑).py

css(타이핑).py

@@ -0,0 +1,186 @@
+import streamlit as st
+import streamlit.components.v1 as components
+import re
+import uuid
+import pandas as pd
+import time
+
+# ────────────────── 말풍선 생성 함수
+# 색상 정의
+PRIMARY_USER = "#e2f6e8"
+PRIMARY_BOT  = "#f6f6f6"
+
+def render_message(
+    message: str,
+    sender: str = "bot",
+    chips: list[str] | None = None,
+    key: str | None = None,
+    *,
+    animated: bool = False,      # ← 추가: 타자 효과 ON/OFF
+    speed_cps: int = 40,         # ← 추가: 초당 글자 수
+    by_word: bool = False,       # ← 추가: 단어 단위 출력
+) -> str | None:
+    """
+    - `message` : 표시할 텍스트 (HTML 허용)
+    - `sender`  : "user" | "bot"
+    - `chips`   : 버튼 형태로 보여 줄 문자열 리스트
+    - return    : 사용자가 클릭한 칩(문자열) 또는 None
+    """
+    color = PRIMARY_USER if sender == "user" else PRIMARY_BOT
+    align = "right" if sender == "user" else "left"
+    message = str(message).rstrip()
+
+    # 공통 풍선 래퍼
+    def _wrap(html_inner: str) -> str:
+        return (
+            f'''<div style="text-align:{align}; margin:6px 0;">'''
+            f'''<p style="font-size:13px;"></p>'''
+            f'''<span style="background:{color}; padding:10px 14px; border-radius:12px;'''
+            f'''display:inline-block; max-width:80%; font-size:13px; line-height:1.45;'''
+            f'''word-break:break-word;">{html_inner}</span></div>'''
+        )
+
+    if not animated:
+        st.markdown(_wrap(message), unsafe_allow_html=True)
+    else:
+        ph = st.empty()
+        buf = ""
+
+        # 태그는 즉시 추가, 텍스트만 점진 출력(태그 반쯤 잘려 보이는 현상 최소화)
+        segments = re.split(r'(<[^>]+>)', message)
+        delay = max(0.005, 1.0 / max(1, speed_cps))
+
+        for seg in segments:
+            if not seg:
+                continue
+            if seg.startswith("<") and seg.endswith(">"):
+                # 태그는 구조 유지 위해 한 번에 추가
+                buf += seg
+                ph.markdown(_wrap(buf), unsafe_allow_html=True)
+            else:
+                if by_word:
+                    for w in seg.split(" "):
+                        buf = (buf + " " + w).strip()
+                        ph.markdown(_wrap(buf), unsafe_allow_html=True)
+                        time.sleep(delay * 5)  # 단어 단위는 조금 더 여유
+                else:
+                    for ch in seg:
+                        buf += ch
+                        ph.markdown(_wrap(buf), unsafe_allow_html=True)
+                        time.sleep(delay)
+
+    # 칩 버튼
+    if chips:
+        prefix = f"{key or 'chips'}_{abs(hash(message))}"
+        clicked = render_chip_buttons(chips, key_prefix=prefix)
+        return clicked
+    return None
+
+# ────────────────── 칩버튼 생성 함수
+def render_chip_buttons(options, key_prefix="chip", selected_value=None):
+    def slugify(text):
+        return re.sub(r"[^a-zA-Z0-9]+", "-", str(text)).strip("-").lower() or "empty"
+    session_key = f"{key_prefix}_selected"
+    selected_value = st.session_state.get(session_key)
+    
+    # 스타일 적용
+    st.markdown(f"""
+    <style>
+    div[data-testid="stHorizontalBlock"]{{
+        display:block !important;        
+    }}
+    button[data-testid="stBaseButton-secondary"] {{
+        background-color: white;
+        border: 1px solid #e3e8e7;
+        border-radius: 20px;
+        padding: 6px 14px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: 0.2s ease-in-out;
+        margin-bottom: -2px;
+        width: 230px;
+        text-align:center;
+    }}  
+    
+    button[data-testid="stBaseButton-secondary"]:hover {{
+        background-color: #e8f0ef;
+        border-color: #009c75;
+        color: #009c75;
+    }}
+    button[data-testid="baseButton-secondary"][disabled]{{
+        background-color: white; 
+        border-color: #009c75; !important;   
+        color: #009c75; !important;                  
+    }}         
+    </style>
+    """, unsafe_allow_html=True)
+
+    
+    clicked_val = None
+
+    #cols = st.columns(len(options))
+    for idx, opt in enumerate(options):
+        if opt is None or (isinstance(opt, float) and pd.isna(opt)) or str(opt).strip()=="":
+            continue
+
+        is_selected = (opt == selected_value)
+        is_refresh_btn = "다른 여행지 보기" in str(opt)
+        disabled = (opt == selected_value) and not is_refresh_btn
+
+        label = f"{opt}" if is_selected else opt
+
+        # stable key
+        safe_opt   = slugify(opt)
+        stable_key = f"{key_prefix}_{idx}_{safe_opt}"
+
+        if st.button(label, key=stable_key, disabled=disabled):
+            clicked_val = opt
+
+    return clicked_val
+
+
+# ────────────────── 메시지 리플레이 함수
+def replay_log(chat_container=None):
+    with chat_container:
+        for sender, msg in st.session_state.chat_log:
+            render_message(msg, sender=sender)
+
+
+# ────────────────── 메시지 로깅&생성 함수
+def log_and_render(
+    msg,
+    sender,
+    chat_container=None,
+    key=None,
+    chips=None,
+    *,
+    animated: bool | None = None,
+    speed_cps: int = 45,
+    by_word: bool = False,
+):
+    # 중복 방지
+    sent_once = st.session_state.setdefault("sent_once", {})
+    if key and sent_once.get(key):
+        return
+    if key:
+        sent_once[key] = True
+    if st.session_state.chat_log and st.session_state.chat_log[-1] == (sender, msg):
+        return
+
+    # 로그 저장(리플레이는 정적표시)
+    st.session_state.chat_log.append((sender, msg))
+
+    # 기본 정책: 봇 메시지는 타자 효과, 유저 메시지는 즉시 표시
+    if animated is None:
+        animated = (sender == "bot") and st.session_state.get("typewriter_on", True)
+
+    with chat_container:
+        return render_message(
+            msg,
+            sender=sender,
+            chips=chips,
+            key=key,
+            animated=animated,
+            speed_cps=speed_cps,
+            by_word=by_word,
+        )