jostlebot Claude Opus 4.5 commited on
Commit
6054030
Β·
1 Parent(s): b188478

Move simulation setup from sidebar to main page

Browse files

Better 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>

Files changed (1) hide show
  1. app.py +30 -47
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
- # Display simulation status
187
- if not st.session_state.setup_complete:
188
- st.info("Complete the simulation setup in the sidebar (desktop) or menu ☰ (mobile).")
189
- else:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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"]