Improve mobile UI: Add clear scroll instructions and full-width button

src/streamlit_app.py

@@ -9,16 +9,73 @@ st.set_page_config(page_title="Practice Difficult Conversations", page_icon="
 
 # Initialize Anthropic client
 try:
-    api_key = st.secrets["anthropic_key"]
+    # Try getting from environment variable first
+    api_key = os.getenv("ANTHROPIC_API_KEY")
+    if api_key:
+        st.write("Debug: Found key in environment variables")
+        st.write(f"Debug: Key length: {len(api_key)}")
+        st.write(f"Debug: Key starts with: {api_key[:15]}")
+    else:
+        # Fall back to Streamlit secrets
+        if "anthropic_key" in st.secrets:
+            api_key = st.secrets["anthropic_key"]
+            st.write("Debug: Found key in Streamlit secrets")
+            st.write(f"Debug: Key length: {len(api_key)}")
+            st.write(f"Debug: Key starts with: {api_key[:15]}")
+        else:
+            st.write("Debug: No key found in either location")
+    
+    if not api_key:
+        st.error("""
+        ⚠️ API key not found. Please ensure:
+        1. You have set the ANTHROPIC_API_KEY environment variable
+        2. The API key is in the correct format (starts with sk-ant-api03-)
+        3. You can get a new API key from https://console.anthropic.com/
+        """)
+        st.stop()
+    
+    # Clean the API key
+    api_key = api_key.strip()
+    
+    # Validate API key format
+    if not api_key.startswith("sk-ant-api03-"):
+        st.error(f"""
+        ⚠️ Invalid API key format. Your key should:
+        1. Start with 'sk-ant-api03-'
+        2. Be from the Anthropic Console (https://console.anthropic.com/)
+        3. Be set as ANTHROPIC_API_KEY environment variable
+        
+        Current key starts with: {api_key[:15]}
+        """)
+        st.stop()
+    
+    # Create client with explicit API key
+    st.write("Debug: Attempting to create Anthropic client...")
     anthropic = Anthropic(api_key=api_key)
+    st.write("Debug: Successfully created Anthropic client")
+    
+    # Test the client
+    st.write("Debug: Testing API connection...")
+    test_response = anthropic.messages.create(
+        model="claude-3-opus-20240229",
+        max_tokens=10,
+        messages=[{"role": "user", "content": "test"}]
+    )
+    st.write("Debug: API test successful")
+    
 except Exception as e:
-    st.error("""
-    ⚠️ API key error. This could be because:
-    1. The API key is in the old format (starts with sk-ant-api03-)
-    2. You need to get a new API key from https://console.anthropic.com/
-    3. Add it to your Hugging Face space secrets as 'anthropic_key'
+    st.error(f"""
+    ⚠️ Error initializing Anthropic client: {str(e)}
+    
+    Please check:
+    1. Your API key is valid and in the correct format (starts with sk-ant-api03-)
+    2. You have set the ANTHROPIC_API_KEY environment variable
+    3. You can get a new API key from https://console.anthropic.com/
     
-    Error details: """ + str(e))
+    Debug info:
+    - Error type: {type(e).__name__}
+    - Error message: {str(e)}
+    """)
     st.stop()
 
 # Initialize session state variables
@@ -44,6 +101,8 @@ if not st.session_state.messages and not st.session_state.in_debrief:
     - Build awareness of your patterns and responses
     - Develop new communication strategies
     - Process and integrate your experience with a reflective debrief
+
+    👇 Scroll down to choose your practice scenario
     """)
 
 # Conversation styles
@@ -69,7 +128,7 @@ if not st.session_state.messages and not st.session_state.in_debrief:
         st.markdown(f"**{style}**: {details['description']}")
     
     style = st.selectbox("Select a conversation style to practice with:", list(STYLES.keys()))
-    if st.button("Start Practice Session"):
+    if st.button("Start Practice Session", use_container_width=True):
         system_message = STYLES[style]["system_prompt"]
         st.session_state.messages = [{"role": "system", "content": system_message}]
         st.rerun()
@@ -162,13 +221,27 @@ elif st.session_state.messages and not st.session_state.practice_complete:
         # Get AI response
         with st.chat_message("assistant"):
             with st.spinner("Thinking..."):
-                response = anthropic.messages.create(
-                    model="claude-3-opus-20240229",
-                    max_tokens=1000,
-                    messages=st.session_state.messages
-                )
-                response_content = response.content[0].text
-                st.markdown(response_content)
+                try:
+                    # Debug API key
+                    st.write(f"Debug: Using API key starting with: {api_key[:10]}...")
+                    
+                    response = anthropic.messages.create(
+                        model="claude-3-opus-20240229",
+                        max_tokens=1000,
+                        messages=st.session_state.messages
+                    )
+                    response_content = response.content[0].text
+                    st.markdown(response_content)
+                except Exception as e:
+                    st.error(f"""
+                    Error getting AI response: {str(e)}
+                    
+                    Please check:
+                    1. Your API key is valid and in the correct format (starts with sk-ant-api03-)
+                    2. You have added it to Hugging Face space secrets as 'anthropic_key'
+                    3. You can get a new API key from https://console.anthropic.com/
+                    """)
+                    st.stop()
                 
         # Add assistant response to chat history
         st.session_state.messages.append({"role": "assistant", "content": response_content})