Fix mobile visibility and add global token input with submit button

app.py

@@ -151,6 +151,23 @@ custom_css = """
     border-radius: 8px;
     padding: 15px;
     height: 100%;
+    color: #1f2937 !important;
+}
+.example-panel h3 {
+    color: #1f2937 !important;
+}
+.example-panel p, .example-panel li {
+    color: #374151 !important;
+}
+.token-status {
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 10px;
+    font-weight: bold;
+}
+.token-accepted {
+    background-color: #d1fae5;
+    color: #065f46;
 }
 /* Mobile responsiveness */
 @media (max-width: 768px) {
@@ -160,6 +177,9 @@ custom_css = """
     .chatbot-container {
         margin-top: 10px;
     }
+    .example-panel {
+        color: #1f2937 !important;
+    }
 }
 """
 
@@ -170,28 +190,46 @@ with gr.Blocks(title="Sherlock: AI Project Assistant", theme=gr.themes.Soft(), c
     Your intelligent assistant for managing multiple projects through meeting summaries.
     """)
 
+    # Global HuggingFace Token input
+    gr.Markdown("### 🔑 Authentication")
+    with gr.Row():
+        with gr.Column(scale=3):
+            hf_token_global = gr.Textbox(
+                label="HuggingFace Token (Required)",
+                placeholder="Enter your HF token from https://huggingface.co/settings/tokens",
+                type="password"
+            )
+        with gr.Column(scale=2):
+            gr.Markdown("""
+            **Get a free token:**
+            1. Visit [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens)
+            2. Click "New token"
+            3. Select "Read" permission
+            4. Copy and paste it here
+            """)
+
+    with gr.Row():
+        submit_token_btn = gr.Button("Submit Token", variant="primary")
+        token_status = gr.Markdown("", elem_classes="token-status")
+
+    def validate_token(token):
+        if token and token.strip():
+            return '<div class="token-accepted">✅ Token Accepted</div>'
+        else:
+            return '<div style="background-color: #fee2e2; color: #991b1b; padding: 10px; border-radius: 5px;">❌ Please enter a valid token</div>'
+
+    submit_token_btn.click(
+        fn=validate_token,
+        inputs=[hf_token_global],
+        outputs=[token_status]
+    )
+
     # Main tabs
     with gr.Tabs():
         # Chat tab
         with gr.Tab("💬 Chat"):
             gr.Markdown("### Ask questions about your projects")
 
-            # HuggingFace Token input
-            with gr.Row():
-                with gr.Column(scale=3):
-                    hf_token_chat = gr.Textbox(
-                        label="🔑 HuggingFace Token (Required)",
-                        placeholder="Enter your HF token from https://huggingface.co/settings/tokens",
-                        type="password"
-                    )
-                with gr.Column(scale=1):
-                    gr.Markdown("""
-                    **Get a free token:**
-                    1. Go to [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens)
-                    2. Create a new token with "Read" permissions
-                    3. Paste it here
-                    """)
-
             # Project selection dropdown
             project_dropdown = gr.Dropdown(
                 label="Select Project",
@@ -253,13 +291,13 @@ with gr.Blocks(title="Sherlock: AI Project Assistant", theme=gr.themes.Soft(), c
 
             submit_btn.click(
                 fn=respond,
-                inputs=[msg, chatbot, project_dropdown, hf_token_chat],
+                inputs=[msg, chatbot, project_dropdown, hf_token_global],
                 outputs=[chatbot, msg]
             )
 
             msg.submit(
                 fn=respond,
-                inputs=[msg, chatbot, project_dropdown, hf_token_chat],
+                inputs=[msg, chatbot, project_dropdown, hf_token_global],
                 outputs=[chatbot, msg]
             )
 
@@ -269,13 +307,6 @@ with gr.Blocks(title="Sherlock: AI Project Assistant", theme=gr.themes.Soft(), c
         with gr.Tab("📤 Upload Meeting"):
             gr.Markdown("### Upload plain text meeting notes and let AI structure them")
 
-            # HuggingFace Token input
-            hf_token_upload = gr.Textbox(
-                label="🔑 HuggingFace Token (Required)",
-                placeholder="Enter your HF token from https://huggingface.co/settings/tokens",
-                type="password"
-            )
-
             # Project selection with toggle
             with gr.Row():
                 with gr.Column():
@@ -347,7 +378,7 @@ Charlie is blocked waiting for API credentials.""",
 
             structure_btn.click(
                 fn=structure_meeting_wrapper,
-                inputs=[project_mode, existing_project, new_project, upload_title, upload_date, upload_participants, upload_text, hf_token_upload],
+                inputs=[project_mode, existing_project, new_project, upload_title, upload_date, upload_participants, upload_text, hf_token_global],
                 outputs=structure_output
             )