# ----------------------------------------------- # Mitra-AI • Wireframe 02 • Live Chat Interaction # ----------------------------------------------- meta: screen_id: "02_chat" version: "1.0.0" updated: "2025-06-20" viewport_desktop: 1440 viewport_mobile: 375 palette: primary: "#FF8135" # saffron accent (Mitra bubble & CTA) secondary: "#353535" # dark text background:"#FFFFFF" mitra_bubble:"#F2F2F2" user_bubble: "#FF8135" timestamp: "#5F5F5F" border: "#E0E0E0" header: inherit_from: "01_login" # logo, tagline, hotline, language selector extras: - type: streak_badge icon: "fire" text: "3-day streak" tooltip: "You’ve chatted 3 days in a row!" layout_desktop: columns: 12 content_left_cols: 1-8 # placeholder KPI area chat_pane_cols: 9-12 body: left_placeholder: type: kpi_panel cards: - "Today’s Revenue — ₹–––" - "Gross Margin — –– %" - "Cash on Hand — ₹–––" note: "Data placeholders only; focus of this wireframe is chat." chat_pane: header: title: "Chat with Mitra" thread_area: height: "calc(100vh - 240px)" # elastic preload_bubbles: - t: "00:00" side: "left" sender: "Mitra" text: "Hi Priya! 👋 Total privacy… pick an emoji 😊 😐 😣" - t: "00:08" side: "right" sender: "Priya" text: "😣" - t: "00:10" side: "left" sender: "Mitra" text: "Stress meter’s high… choose a topic 💼 ❤️ 💰 😴 😕" - t: "00:18" side: "right" sender: "Priya" text: "💼" - t: "00:20" side: "left" sender: "Mitra" text: "On 0–10 scale, kitna heavy lag raha hai?" - t: "00:27" side: "right" sender: "Priya" text: "7" typing_indicator: "••• Mitra is typing" quick_reply_chips: visible_until: "first_user_text" chips: ["😊 Chill","😐 So-so","😣 Stressed"] composer: multiline: true placeholder: "Type your thought…" icons: - emoji_picker - attach_file send_button: state_default: "disabled" enabled_condition: "has_text" helper_text: "Press Enter to send" safety_overlay: hidden: true banner_text: "Feeling unsafe? Call 91529 87821" action_btn: "Call Now" appear_trigger: "suicidality_score >= 2" layout_mobile: type: fullscreen_chat bottom_nav: icons: ["home","insights","profile"] drawer_nav: "hamburger_opens_nav" prototype_interactions: - id: chip_to_composer trigger: click_chip action: "insert_chip_text_to_composer" - id: send_message trigger: click_send_button action_sequence: ["move_composer_text_to_bubble(user)","show_typing_indicator","after_2s(add_mitra_reply)"] - id: open_safety_overlay trigger: set_suicidality_score_2 action: "reveal_safety_overlay" accessibility: wcag_level: "AA" features: ["high_contrast_bubbles","aria_labels_for_icons","focus_trap_in_composer"] footer: hidden: true # chat screen uses space for conversation deliverable: tool: "Figma" pages: ["02_Chat_desktop","02_Chat_mobile"] layer_groups: ["Header","LeftPanel","ChatPane","Overlays"] annotations: "Mark dynamic states (typing, chips vanish, safety overlay). Provide alt-text and dev notes for socket events."