Update css.py

css.py

@@ -4,40 +4,58 @@ import re
 import uuid
 import pandas as pd
 import time
+from datetime import datetime  # 타임스탬프용
 
 # ────────────────── 말풍선 생성 함수
 # 색상 정의
 PRIMARY_USER = "#e2f6e8"
 PRIMARY_BOT  = "#f6f6f6"
 
+# ③ 말풍선 테마 팔레트 & 헬퍼
+THEMES = {
+    "민트":   {"user": "#DCFCE7", "bot": "#E0F2FE"},
+    "라벤더": {"user": "#EDE9FE", "bot": "#E9D5FF"},
+    "모노":   {"user": "#EFEFEF", "bot": "#F5F5F5"},
+}
+def _get_colors():
+    theme = st.session_state.get("bubble_theme", "민트")
+    return THEMES.get(theme, THEMES["민트"])
+    
 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,       # ← 추가: 단어 단위 출력
+    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
+    import re, time
+    # ③ 테마/콤팩트 값 읽기
+    palette   = _get_colors()
+    dense     = st.session_state.get("dense_mode", False)
+    show_time = st.session_state.get("show_time", False) and sender == "bot"  # ④ 봇만 시간 표시
+
+    color = palette["user"] if sender == "user" else palette["bot"]
     align = "right" if sender == "user" else "left"
+    pad   = "6px 10px" if dense else "10px 14px"   # ③ 콤팩트 모드 패딩
+    fsz   = "12px"     if dense else "13px"        # ③ 콤팩트 모드 폰트
+
     message = str(message).rstrip()
+    # ④ 타임스탬프 HTML
+    ts_html = (
+        f'<div style="font-size:11px;color:#888;margin-top:4px;">{datetime.now().strftime("%H:%M")}</div>'
+        if show_time else ""
+    )
 
     # 공통 풍선 래퍼
     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>'''
+            f'''<span style="background:{color}; padding:{pad}; border-radius:12px;'''
+            f'''display:inline-block; max-width:80%; font-size:{fsz}; line-height:1.45;'''
+            f'''word-break:break-word;">{html_inner}{ts_html}</span></div>'''
         )
 
     if not animated:
@@ -45,24 +63,21 @@ def render_message(
     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:
+                if by_word or st.session_state.get("type_by_word", False):
                     for w in seg.split(" "):
                         buf = (buf + " " + w).strip()
                         ph.markdown(_wrap(buf), unsafe_allow_html=True)
-                        time.sleep(delay * 5)  # 단어 단위는 조금 더 여유
+                        time.sleep(delay * 5)
                 else:
                     for ch in seg:
                         buf += ch