feat: New dating-app style chat UI with gradient header, avatar, Online status

modules/text_story/services/renderer.py

@@ -1,12 +1,13 @@
 """
 Chat UI Renderer for Text Story module.
-Creates iMessage-style chat bubbles and UI.
+Creates dating-app style chat bubbles and UI.
 """
 
 import os
 import logging
 from PIL import Image, ImageDraw, ImageFont
 from typing import List, Tuple, Optional
+import random
 
 logger = logging.getLogger(__name__)
 
@@ -14,35 +15,48 @@ logger = logging.getLogger(__name__)
 CANVAS_WIDTH = 1080
 CANVAS_HEIGHT = 1920
 
-# Colors (iMessage style)
+# Colors (Dating app style)
 COLORS = {
-    "header_bg": (28, 28, 30),       # #1C1C1E - Dark header
-    "bubble_user": (0, 122, 255),    # #007AFF - Blue (Person A/right)
-    "bubble_other": (58, 58, 60),    # #3A3A3C - Gray (Person B/left)
-    "text_white": (255, 255, 255),   # White text
-    "text_gray": (142, 142, 147),    # #8E8E93 - Secondary text
+    # Header gradient (purple/blue)
+    "header_start": (138, 43, 226),  # Blue-violet
+    "header_end": (75, 0, 130),      # Indigo
+    
+    # Bubbles
+    "bubble_other": (245, 240, 235),  # Cream/beige for left (other person)
+    "bubble_user": (255, 255, 255),   # White for right (user)
+    
+    # Text
+    "text_dark": (30, 30, 30),         # Dark text on light bubbles
+    "text_white": (255, 255, 255),     # White text on header
+    "text_gray": (120, 120, 120),      # Gray for timestamps
+    "text_online": (50, 205, 50),      # Green for "Online"
+    
+    # Background
+    "chat_bg": (240, 240, 245),        # Light gray chat area
 }
 
 # UI Measurements
 UI = {
-    "header_height": 100,
-    "margin_side": 30,
-    "bubble_max_width_ratio": 0.75,  # 75% of screen
-    "bubble_padding_h": 16,
-    "bubble_padding_v": 12,
-    "bubble_radius": 20,
-    "bubble_gap": 10,
-    "font_size": 34,
-    "header_font_size": 22,
-    "avatar_size": 50,
+    "header_height": 180,        # Taller header for avatar
+    "margin_side": 40,
+    "bubble_max_width_ratio": 0.72,
+    "bubble_padding_h": 20,
+    "bubble_padding_v": 14,
+    "bubble_radius": 24,
+    "bubble_gap": 20,
+    "font_size": 36,
+    "header_name_size": 48,
+    "timestamp_size": 22,
+    "avatar_size": 90,
     "max_visible_messages": 7,
+    "chat_area_top": 220,        # Where chat area starts (below header)
 }
 
 
 class ChatRenderer:
     """
-    Renders iMessage-style chat UI frames.
-    Handles dynamic box sizing and message bubbles.
+    Renders dating-app style chat UI frames.
+    Fixed header with gradient, scrolling messages.
     """
     
     def __init__(self, 
@@ -55,11 +69,13 @@ class ChatRenderer:
         
         # Load fonts
         self.font = self._load_font(UI["font_size"])
-        self.font_small = self._load_font(UI["header_font_size"])
-        self.font_avatar = self._load_font(28)
+        self.font_name = self._load_font(UI["header_name_size"])
+        self.font_timestamp = self._load_font(UI["timestamp_size"])
+        self.font_small = self._load_font(24)
         
-        # Track visible messages for scroll behavior
-        self.visible_messages: List[dict] = []
+        # Current timestamp (random for realism)
+        self.base_hour = random.randint(10, 22)
+        self.base_minute = random.randint(10, 45)
     
     def _load_font(self, size: int) -> ImageFont.FreeTypeFont:
         """Load font with fallback."""
@@ -77,7 +93,6 @@ class ChatRenderer:
                 except:
                     continue
         
-        # Fallback to default
         return ImageFont.load_default()
     
     def _wrap_text(self, text: str, max_width: int) -> List[str]:
@@ -103,13 +118,18 @@ class ChatRenderer:
         
         return lines if lines else [text]
     
+    def _get_timestamp(self, msg_index: int) -> str:
+        """Generate realistic timestamp."""
+        minute = (self.base_minute + msg_index * 2) % 60
+        hour = self.base_hour + ((self.base_minute + msg_index * 2) // 60)
+        return f"{hour % 24:02d}:{minute:02d}"
+    
     def _calculate_bubble_size(self, text: str) -> Tuple[int, int, List[str]]:
         """Calculate bubble size based on text."""
         max_text_width = int(CANVAS_WIDTH * UI["bubble_max_width_ratio"]) - UI["bubble_padding_h"] * 2
         lines = self._wrap_text(text, max_text_width)
         
-        # Calculate text dimensions
-        line_height = self.font.getbbox("Ay")[3] + 4
+        line_height = self.font.getbbox("Ay")[3] + 6
         text_height = line_height * len(lines)
         
         max_line_width = 0
@@ -117,89 +137,129 @@ class ChatRenderer:
             bbox = self.font.getbbox(line)
             max_line_width = max(max_line_width, bbox[2] - bbox[0])
         
-        # Add padding
-        bubble_width = max_line_width + UI["bubble_padding_h"] * 2
+        # Add padding + space for timestamp
+        bubble_width = max_line_width + UI["bubble_padding_h"] * 2 + 80  # Extra for timestamp
         bubble_height = text_height + UI["bubble_padding_v"] * 2
         
         return bubble_width, bubble_height, lines
     
-    def _draw_header(self, draw: ImageDraw.Draw, img: Image.Image):
-        """Draw iMessage-style header."""
-        # Header background
-        draw.rectangle(
-            [0, 0, CANVAS_WIDTH, UI["header_height"]],
-            fill=COLORS["header_bg"]
-        )
-        
-        # Avatar circle
-        avatar_x = CANVAS_WIDTH // 2
-        avatar_y = 35
+    def _draw_gradient_header(self, img: Image.Image, draw: ImageDraw.Draw):
+        """Draw gradient header with avatar and name."""
+        # Create gradient
+        for y in range(UI["header_height"]):
+            ratio = y / UI["header_height"]
+            r = int(COLORS["header_start"][0] * (1 - ratio) + COLORS["header_end"][0] * ratio)
+            g = int(COLORS["header_start"][1] * (1 - ratio) + COLORS["header_end"][1] * ratio)
+            b = int(COLORS["header_start"][2] * (1 - ratio) + COLORS["header_end"][2] * ratio)
+            draw.line([(0, y), (CANVAS_WIDTH, y)], fill=(r, g, b))
+        
+        # Avatar circle (left side)
+        avatar_x = 80
+        avatar_y = UI["header_height"] // 2
         avatar_r = UI["avatar_size"] // 2
         
+        # White circle border
+        draw.ellipse(
+            [avatar_x - avatar_r - 4, avatar_y - avatar_r - 4,
+             avatar_x + avatar_r + 4, avatar_y + avatar_r + 4],
+            fill=(255, 255, 255)
+        )
+        
+        # Avatar inner circle (random color)
+        avatar_color = (random.randint(100, 200), random.randint(80, 150), random.randint(80, 150))
         draw.ellipse(
             [avatar_x - avatar_r, avatar_y - avatar_r,
              avatar_x + avatar_r, avatar_y + avatar_r],
-            fill=(100, 100, 105)  # Gray circle
+            fill=avatar_color
         )
         
         # Avatar letter
-        bbox = self.font_avatar.getbbox(self.person_b_avatar)
+        letter = self.person_b_avatar[:1].upper()
+        bbox = self.font_name.getbbox(letter)
         text_w = bbox[2] - bbox[0]
         text_h = bbox[3] - bbox[1]
         draw.text(
-            (avatar_x - text_w // 2, avatar_y - text_h // 2 - 2),
-            self.person_b_avatar,
+            (avatar_x - text_w // 2, avatar_y - text_h // 2 - 5),
+            letter,
             fill=COLORS["text_white"],
-            font=self.font_avatar
+            font=self.font_name
         )
         
-        # Name below avatar
-        name_bbox = self.font_small.getbbox(self.person_b_name)
-        name_w = name_bbox[2] - name_bbox[0]
+        # Name (to the right of avatar)
+        name_x = avatar_x + avatar_r + 30
+        name_y = avatar_y - 25
         draw.text(
-            (avatar_x - name_w // 2, avatar_y + avatar_r + 8),
+            (name_x, name_y),
             self.person_b_name,
             fill=COLORS["text_white"],
-            font=self.font_small
+            font=self.font_name
         )
         
-        # Left chevron (back button)
-        draw.text((20, 30), "‹", fill=(0, 122, 255), font=self.font)
+        # "Online" status (below name)
+        online_y = name_y + 50
+        draw.text(
+            (name_x, online_y),
+            "Online",
+            fill=COLORS["text_online"],
+            font=self.font_small
+        )
         
-        # Right video icon
-        draw.text((CANVAS_WIDTH - 50, 30), "📹", fill=(0, 122, 255), font=self.font_small)
+        # Three dots menu (right side)
+        dots_x = CANVAS_WIDTH - 60
+        dots_y = avatar_y
+        for i in range(3):
+            y = dots_y - 25 + i * 25
+            draw.ellipse(
+                [dots_x - 5, y - 5, dots_x + 5, y + 5],
+                fill=COLORS["text_white"]
+            )
     
     def _draw_bubble(self, draw: ImageDraw.Draw, 
                      x: int, y: int, 
                      width: int, height: int,
                      lines: List[str],
+                     timestamp: str,
                      is_user: bool) -> int:
         """
-        Draw a chat bubble.
+        Draw a chat bubble with timestamp.
         
         Returns:
             Bottom Y position of bubble
         """
         # Bubble color
         color = COLORS["bubble_user"] if is_user else COLORS["bubble_other"]
+        text_color = COLORS["text_dark"]  # Dark text on light bubbles
+        
+        # Draw rounded rectangle with shadow
+        shadow_offset = 3
+        draw.rounded_rectangle(
+            [x + shadow_offset, y + shadow_offset, x + width + shadow_offset, y + height + shadow_offset],
+            radius=UI["bubble_radius"],
+            fill=(200, 200, 200, 100)  # Light shadow
+        )
         
-        # Draw rounded rectangle
-        radius = UI["bubble_radius"]
         draw.rounded_rectangle(
             [x, y, x + width, y + height],
-            radius=radius,
+            radius=UI["bubble_radius"],
             fill=color
         )
         
         # Draw text
         text_x = x + UI["bubble_padding_h"]
         text_y = y + UI["bubble_padding_v"]
-        line_height = self.font.getbbox("Ay")[3] + 4
+        line_height = self.font.getbbox("Ay")[3] + 6
         
         for line in lines:
-            draw.text((text_x, text_y), line, fill=COLORS["text_white"], font=self.font)
+            draw.text((text_x, text_y), line, fill=text_color, font=self.font)
             text_y += line_height
         
+        # Draw timestamp (bottom right of bubble)
+        ts_bbox = self.font_timestamp.getbbox(timestamp)
+        ts_w = ts_bbox[2] - ts_bbox[0]
+        ts_x = x + width - ts_w - 15
+        ts_y = y + height - 30
+        draw.text((ts_x, ts_y), timestamp, fill=COLORS["text_gray"], font=self.font_timestamp)
+        
         return y + height
     
     def render_frame(self, messages: List[dict], show_typing: bool = False) -> Image.Image:
@@ -226,25 +286,31 @@ class ChatRenderer:
         total_msg_height = sum(message_heights)
         
         # Calculate UI box height (dynamic)
-        ui_height = UI["header_height"] + total_msg_height + 20  # 20px bottom padding
+        ui_height = UI["chat_area_top"] + total_msg_height + 30
         
-        # Draw semi-transparent black background for chat area
+        # Limit maximum height
+        max_ui_height = 1400
+        ui_height = min(ui_height, max_ui_height)
+        
+        # Draw light gray chat background
         draw.rectangle(
-            [0, 0, CANVAS_WIDTH, ui_height],
-            fill=(0, 0, 0, 220)  # Semi-transparent black
+            [0, UI["header_height"], CANVAS_WIDTH, ui_height],
+            fill=COLORS["chat_bg"]
         )
         
-        # Draw header
-        self._draw_header(draw, img)
+        # Draw gradient header (fixed on top)
+        self._draw_gradient_header(img, draw)
         
-        # Draw messages
-        current_y = UI["header_height"] + 15
+        # Draw messages starting below header
+        current_y = UI["chat_area_top"]
         
         # Only show last N messages if too many
         visible_messages = messages[-UI["max_visible_messages"]:]
+        start_index = len(messages) - len(visible_messages)
         
-        for msg in visible_messages:
+        for i, msg in enumerate(visible_messages):
             width, height, lines = self._calculate_bubble_size(msg["text"])
+            timestamp = self._get_timestamp(start_index + i)
             
             # Position: A (user) = right, B (other) = left
             if msg["sender"] == "A":
@@ -252,7 +318,7 @@ class ChatRenderer:
             else:
                 x = UI["margin_side"]
             
-            current_y = self._draw_bubble(draw, x, current_y, width, height, lines, msg["sender"] == "A")
+            current_y = self._draw_bubble(draw, x, current_y, width, height, lines, timestamp, msg["sender"] == "A")
             current_y += UI["bubble_gap"]
         
         # Draw typing indicator if needed
@@ -266,20 +332,20 @@ class ChatRenderer:
         """Draw typing indicator (●●●)."""
         x = UI["margin_side"]
         
-        # Background bubble
-        bubble_width = 70
-        bubble_height = 40
+        # Background bubble (cream color like other messages)
+        bubble_width = 80
+        bubble_height = 45
         draw.rounded_rectangle(
             [x, y, x + bubble_width, y + bubble_height],
-            radius=15,
+            radius=18,
             fill=COLORS["bubble_other"]
         )
         
         # Three dots
         dot_y = y + bubble_height // 2
-        for i, dx in enumerate([20, 35, 50]):
+        for i, dx in enumerate([22, 40, 58]):
             draw.ellipse(
-                [x + dx - 4, dot_y - 4, x + dx + 4, dot_y + 4],
+                [x + dx - 5, dot_y - 5, x + dx + 5, dot_y + 5],
                 fill=COLORS["text_gray"]
             )
     
@@ -292,4 +358,4 @@ class ChatRenderer:
             _, height, _ = self._calculate_bubble_size(msg["text"])
             message_heights.append(height + UI["bubble_gap"])
         
-        return UI["header_height"] + sum(message_heights) + 20
+        return min(UI["chat_area_top"] + sum(message_heights) + 30, 1400)