Move simulation setup from sidebar to main page
Browse filesBetter mobile UX - users no longer need to find the sidebar menu.
Setup form now appears directly after attachment style explanation.
Sidebar now only contains about/contact info.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
app.py
CHANGED
|
@@ -65,15 +65,6 @@ if "messages" not in st.session_state:
|
|
| 65 |
st.markdown("<h1 style='text-align: center; color: #333;'>Practice Difficult Conversations</h1>", unsafe_allow_html=True)
|
| 66 |
st.markdown("<p style='text-align: center; font-size: 18px; color: #555; margin-bottom: 1em;'>With Your Attachment Style Front and Center!</p>", unsafe_allow_html=True)
|
| 67 |
|
| 68 |
-
# Mobile-friendly setup prompt
|
| 69 |
-
if not st.session_state.setup_complete:
|
| 70 |
-
st.markdown("""
|
| 71 |
-
<div style='background-color: #e8f4f8; padding: 15px; border-radius: 10px; margin-bottom: 20px; text-align: center;'>
|
| 72 |
-
<strong>π± On mobile?</strong> Tap the <strong>β° menu icon</strong> in the <strong>top-left corner</strong> to open the setup form.<br>
|
| 73 |
-
<strong>π» On desktop?</strong> Use the sidebar on the left.
|
| 74 |
-
</div>
|
| 75 |
-
""", unsafe_allow_html=True)
|
| 76 |
-
|
| 77 |
# Welcome text and instructions
|
| 78 |
if not st.session_state.setup_complete:
|
| 79 |
st.markdown("""
|
|
@@ -99,37 +90,9 @@ if not st.session_state.setup_complete:
|
|
| 99 |
- **Avoidant** β "I'd rather handle things alone than depend on others."
|
| 100 |
- **Disorganized** β "I want closeness, but I also feel overwhelmed or mistrusting."
|
| 101 |
- **Secure** β "I can handle conflict and connection without losing myself."
|
| 102 |
-
|
| 103 |
-
Complete the simulation setup in the sidebar (desktop) or menu β° (mobile) to begin your practice session.
|
| 104 |
-
""")
|
| 105 |
-
|
| 106 |
-
# Sidebar with setup form
|
| 107 |
-
with st.sidebar:
|
| 108 |
-
st.markdown("""
|
| 109 |
-
### Welcome! π
|
| 110 |
-
|
| 111 |
-
Hi, I'm Jocelyn Skillman, LMHC β a clinical therapist and relational design ethicist developing Assistive Relational Intelligence (ARI) tools that strengthen human capacity rather than simulate human intimacy.
|
| 112 |
-
|
| 113 |
-
This collection represents an emerging practice: clinician-led UX design for LLM interventions β bounded, modular tools that scaffold specific relational and somatic capacities between sessions.
|
| 114 |
-
|
| 115 |
-
Each tool is designed to:
|
| 116 |
-
|
| 117 |
-
- Support skill-building in service of the human field (not replace it)
|
| 118 |
-
- Provide trauma-informed, attachment-aware practice environments
|
| 119 |
-
- Function as therapist-configured interventions within ongoing care
|
| 120 |
-
- Bridge users back to embodied relationship and clinical support
|
| 121 |
-
|
| 122 |
-
These aren't therapy bots β they're structured practice fields. I envision them as resources for clinicians exploring how LLM-powered tools might be woven into treatment planning: curated, consensual, and always pointing back to human connection.
|
| 123 |
-
|
| 124 |
-
*Built with Claude Code β iteratively developed through clinical intuition and ethical design principles.*
|
| 125 |
-
|
| 126 |
-
#### Connect With Me
|
| 127 |
-
π [jocelynskillman.com](http://www.jocelynskillman.com)
|
| 128 |
-
π¬ [Substack: Relational Code](https://jocelynskillmanlmhc.substack.com/)
|
| 129 |
-
|
| 130 |
-
---
|
| 131 |
""")
|
| 132 |
|
|
|
|
| 133 |
st.markdown("### π― Simulation Setup")
|
| 134 |
|
| 135 |
with st.form("simulation_setup"):
|
|
@@ -157,7 +120,7 @@ with st.sidebar:
|
|
| 157 |
help="What would you like to work on in this conversation?"
|
| 158 |
)
|
| 159 |
|
| 160 |
-
submit_setup = st.form_submit_button("Start Simulation")
|
| 161 |
|
| 162 |
if submit_setup and scenario and tone and practice_goal:
|
| 163 |
# Create system message with simulation parameters
|
|
@@ -171,22 +134,42 @@ User's Goal: {practice_goal}
|
|
| 171 |
Begin the simulation based on the scenario."""
|
| 172 |
|
| 173 |
# Store the system message and initial assistant message
|
| 174 |
-
# OpenAI expects the system message as the first message in the list
|
| 175 |
st.session_state.messages = [
|
| 176 |
{"role": "system", "content": system_message_content},
|
| 177 |
{"role": "assistant", "content": "Simulation ready. You can begin the conversation whenever you're ready."}
|
| 178 |
]
|
| 179 |
st.session_state.setup_complete = True
|
| 180 |
-
# No need to store system_message separately in session state anymore
|
| 181 |
-
# if "system_message" in st.session_state:
|
| 182 |
-
# del st.session_state["system_message"]
|
| 183 |
st.rerun()
|
| 184 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 190 |
# Display chat history
|
| 191 |
# Filter out system message for display purposes
|
| 192 |
display_messages = [m for m in st.session_state.messages if m.get("role") != "system"]
|
|
|
|
| 65 |
st.markdown("<h1 style='text-align: center; color: #333;'>Practice Difficult Conversations</h1>", unsafe_allow_html=True)
|
| 66 |
st.markdown("<p style='text-align: center; font-size: 18px; color: #555; margin-bottom: 1em;'>With Your Attachment Style Front and Center!</p>", unsafe_allow_html=True)
|
| 67 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 68 |
# Welcome text and instructions
|
| 69 |
if not st.session_state.setup_complete:
|
| 70 |
st.markdown("""
|
|
|
|
| 90 |
- **Avoidant** β "I'd rather handle things alone than depend on others."
|
| 91 |
- **Disorganized** β "I want closeness, but I also feel overwhelmed or mistrusting."
|
| 92 |
- **Secure** β "I can handle conflict and connection without losing myself."
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 93 |
""")
|
| 94 |
|
| 95 |
+
# Simulation Setup Form (on main page)
|
| 96 |
st.markdown("### π― Simulation Setup")
|
| 97 |
|
| 98 |
with st.form("simulation_setup"):
|
|
|
|
| 120 |
help="What would you like to work on in this conversation?"
|
| 121 |
)
|
| 122 |
|
| 123 |
+
submit_setup = st.form_submit_button("Start Simulation", use_container_width=True)
|
| 124 |
|
| 125 |
if submit_setup and scenario and tone and practice_goal:
|
| 126 |
# Create system message with simulation parameters
|
|
|
|
| 134 |
Begin the simulation based on the scenario."""
|
| 135 |
|
| 136 |
# Store the system message and initial assistant message
|
|
|
|
| 137 |
st.session_state.messages = [
|
| 138 |
{"role": "system", "content": system_message_content},
|
| 139 |
{"role": "assistant", "content": "Simulation ready. You can begin the conversation whenever you're ready."}
|
| 140 |
]
|
| 141 |
st.session_state.setup_complete = True
|
|
|
|
|
|
|
|
|
|
| 142 |
st.rerun()
|
| 143 |
|
| 144 |
+
# Sidebar with setup form
|
| 145 |
+
with st.sidebar:
|
| 146 |
+
st.markdown("""
|
| 147 |
+
### Welcome! π
|
| 148 |
|
| 149 |
+
Hi, I'm Jocelyn Skillman, LMHC β a clinical therapist and relational design ethicist developing Assistive Relational Intelligence (ARI) tools that strengthen human capacity rather than simulate human intimacy.
|
| 150 |
+
|
| 151 |
+
This collection represents an emerging practice: clinician-led UX design for LLM interventions β bounded, modular tools that scaffold specific relational and somatic capacities between sessions.
|
| 152 |
+
|
| 153 |
+
Each tool is designed to:
|
| 154 |
+
|
| 155 |
+
- Support skill-building in service of the human field (not replace it)
|
| 156 |
+
- Provide trauma-informed, attachment-aware practice environments
|
| 157 |
+
- Function as therapist-configured interventions within ongoing care
|
| 158 |
+
- Bridge users back to embodied relationship and clinical support
|
| 159 |
+
|
| 160 |
+
These aren't therapy bots β they're structured practice fields. I envision them as resources for clinicians exploring how LLM-powered tools might be woven into treatment planning: curated, consensual, and always pointing back to human connection.
|
| 161 |
+
|
| 162 |
+
*Built with Claude Code β iteratively developed through clinical intuition and ethical design principles.*
|
| 163 |
+
|
| 164 |
+
#### Connect With Me
|
| 165 |
+
π [jocelynskillman.com](http://www.jocelynskillman.com)
|
| 166 |
+
π¬ [Substack: Relational Code](https://jocelynskillmanlmhc.substack.com/)
|
| 167 |
+
|
| 168 |
+
---
|
| 169 |
+
""")
|
| 170 |
+
|
| 171 |
+
# Display chat interface when setup is complete
|
| 172 |
+
if st.session_state.setup_complete:
|
| 173 |
# Display chat history
|
| 174 |
# Filter out system message for display purposes
|
| 175 |
display_messages = [m for m in st.session_state.messages if m.get("role") != "system"]
|