Add two-column layout with editable notes

- Left column: Chatbot interface
- Right column: Markdown notes loaded from notes.md
- Notes can be edited locally and pushed to update HF Spaces
- Refresh button to reload notes without restarting app
- Simpler than embedded editor - use your favorite text editor!

app.py

@@ -125,18 +125,95 @@ def respond(message: str, history: list[list[str]]):
 
 
 # --- Gradio UI Definition ---
-# Using ChatInterface directly - simpler and more reliable for HF Spaces
-demo = gr.ChatInterface(
-    fn=respond,
-    title="🤖 A11y Expert",
-    description="Twój inteligentny asystent do spraw dostępności cyfrowej. Zadaj pytanie o WCAG, ARIA, lub poproś o analizę kodu.",
-    examples=[
-        "Jakie są wymagania WCAG 2.2 dla etykiet formularzy?",
-        "Wyjaśnij rolę 'alert' w ARIA i podaj przykład.",
-        "Czy ten przycisk jest dostępny? <div onclick='...'>Click me</div>",
-        "Jaka jest różnica między aria-label a aria-labelledby?",
-    ],
-)
+# Two-column layout: Chat on left, Markdown content on right
+with gr.Blocks(title="A11y Expert") as demo:
+    gr.Markdown("# 🤖 A11y Expert")
+    gr.Markdown("Twój inteligentny asystent do spraw dostępności cyfrowej.")
+    
+    with gr.Row():
+        # Left column: Chatbot
+        with gr.Column(scale=1):
+            gr.Markdown("### 💬 Chat")
+            chatbot = gr.Chatbot(height=500, show_label=False)
+            msg = gr.Textbox(
+                placeholder="Zadaj pytanie o WCAG, ARIA, lub poproś o analizę kodu...",
+                show_label=False,
+                container=False
+            )
+            
+            with gr.Row():
+                submit = gr.Button("Wyślij", variant="primary")
+                clear = gr.Button("Wyczyść")
+            
+            # Example questions
+            gr.Examples(
+                examples=[
+                    "Jakie są wymagania WCAG 2.2 dla etykiet formularzy?",
+                    "Wyjaśnij rolę 'alert' w ARIA i podaj przykład.",
+                    "Czy ten przycisk jest dostępny? <div onclick='...'>Click me</div>",
+                    "Jaka jest różnica między aria-label a aria-labelledby?",
+                ],
+                inputs=msg,
+                label="Przykładowe pytania"
+            )
+        
+        # Right column: Markdown content from file
+        with gr.Column(scale=1):
+            gr.Markdown("### 📝 Notatki")
+            
+            def load_notes():
+                """Load notes from notes.md file."""
+                try:
+                    with open("notes.md", "r", encoding="utf-8") as f:
+                        return f.read()
+                except FileNotFoundError:
+                    return """
+## Witaj w A11y Expert! 👋
+
+Stwórz plik `notes.md` w katalogu projektu aby zobaczyć tutaj swoje notatki.
+
+### Przydatne linki:
+- [WCAG 2.2 Guidelines](https://www.w3.org/WAI/WCAG22/quickref/)
+- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
+- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+                    """
+                except Exception as e:
+                    return f"⚠️ Błąd wczytywania notes.md: {e}"
+            
+            markdown_content = gr.Markdown(
+                value=load_notes(),
+                show_label=False,
+                elem_id="notes_display"
+            )
+            
+            refresh_btn = gr.Button("🔄 Odśwież notatki", variant="secondary")
+            refresh_btn.click(
+                fn=load_notes,
+                outputs=markdown_content
+            )
+    
+    # Chat logic
+    def user_message(user_input, history):
+        """Add user message to chat history."""
+        return "", history + [[user_input, None]]
+    
+    def bot_response(history):
+        """Generate bot response."""
+        user_input = history[-1][0]
+        history[-1][1] = ""
+        
+        for response in respond(user_input, history[:-1]):
+            history[-1][1] = response
+            yield history
+    
+    # Wire up the chat
+    submit.click(user_message, [msg, chatbot], [msg, chatbot], queue=False).then(
+        bot_response, chatbot, chatbot
+    )
+    msg.submit(user_message, [msg, chatbot], [msg, chatbot], queue=False).then(
+        bot_response, chatbot, chatbot
+    )
+    clear.click(lambda: None, None, chatbot, queue=False)
 
 
 # --- App Launch ---

notes.md

@@ -0,0 +1,37 @@
+# 📝 Moje Notatki o Dostępności
+
+## Przydatne Linki
+
+- [WCAG 2.2 Guidelines](https://www.w3.org/WAI/WCAG22/quickref/)
+- [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)
+- [MDN Web Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [WebAIM Resources](https://webaim.org/resources/)
+
+## Kluczowe Zasady WCAG
+
+### Poziom A (Minimum)
+- **1.1.1** - Alternatywa tekstowa dla treści nietekstowych
+- **2.1.1** - Dostęp z klawiatury
+- **3.1.1** - Język strony
+
+### Poziom AA (Standardowy)
+- **1.4.3** - Kontrast (minimum 4.5:1)
+- **2.4.7** - Widoczny fokus
+- **3.2.4** - Spójna identyfikacja
+
+## Często Używane Role ARIA
+
+```html
+<!-- Navigation -->
+<nav role="navigation" aria-label="Main menu">...</nav>
+
+<!-- Alert -->
+<div role="alert">Important message</div>
+
+<!-- Button -->
+<div role="button" tabindex="0" aria-pressed="false">Toggle</div>
+```
+
+## Moje Notatki
+
+*Edytuj ten plik w swoim ulubionym edytorze i kliknij "🔄 Odśwież notatki" w aplikacji!*