Final UI polish: social icons and button functionality

- Renamed 'Dental Education Assistant' to 'Response'
- Added inline social icons for model author (GitHub, LinkedIn)
- Added inline social icons for space creator (GitHub, X, Website)
- Fixed question button functionality with proper JavaScript event handling
- Improved icon styling with hover effects
- Removed redundant social links section

app.py

@@ -183,25 +183,19 @@ custom_css = """
     text-decoration: underline;
 }
 
-.social-links {
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-    margin-top: 12px;
-}
-
-.social-link {
-    color: #e0e7ff;
+.social-icon {
+    display: inline-block;
+    margin-left: 8px;
     text-decoration: none;
-    font-size: 14px;
-    padding: 4px 8px;
-    border-radius: 6px;
-    transition: all 0.2s;
+    font-size: 18px;
+    opacity: 0.85;
+    transition: all 0.2s ease;
+    vertical-align: middle;
 }
 
-.social-link:hover {
-    background: rgba(255,255,255,0.1);
-    color: white;
+.social-icon:hover {
+    opacity: 1;
+    transform: translateY(-2px);
 }
 
 /* Mini model card - skeuomorphic design */
@@ -634,8 +628,8 @@ custom_css = """
         grid-template-columns: repeat(2, 1fr);
     }
     
-    .social-links {
-        flex-wrap: wrap;
+    .social-icon {
+        font-size: 16px;
     }
     
     .citation-boxes {
@@ -672,13 +666,14 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, js=question_js) as demo:
             <h1 class="header-title">🦷 DentaInstruct-1.2B Demo</h1>
             <p class="header-subtitle">Advanced AI assistant for dental education and oral health information</p>
             <div class="header-credits">
-                Model by <a href="https://huggingface.co/yasserrmd" target="_blank">yasserrmd</a> / 
+                Model by <a href="https://huggingface.co/yasserrmd" target="_blank">yasserrmd</a>
+                <a href="https://github.com/YASSERRMD" target="_blank" class="social-icon" title="GitHub">🔗</a>
+                <a href="https://www.linkedin.com/in/moyasser" target="_blank" class="social-icon" title="LinkedIn">💼</a>
+                <span style="margin: 0 10px;">/</span>
                 Space by <a href="https://huggingface.co/chrisvoncsefalvay" target="_blank">Chris von Csefalvay</a>
-            </div>
-            <div class="social-links">
-                <a href="https://github.com/chrisvoncsefalvay" target="_blank" class="social-link">GitHub</a>
-                <a href="https://twitter.com/epichrisis" target="_blank" class="social-link">X/Twitter</a>
-                <a href="https://chrisvoncsefalvay.com" target="_blank" class="social-link">Website</a>
+                <a href="https://github.com/chrisvoncsefalvay" target="_blank" class="social-icon" title="GitHub">🔗</a>
+                <a href="https://twitter.com/epichrisis" target="_blank" class="social-icon" title="X">𝕏</a>
+                <a href="https://chrisvoncsefalvay.com" target="_blank" class="social-icon" title="Website">🌐</a>
             </div>
         </div>
         """
@@ -739,7 +734,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, js=question_js) as demo:
         with gr.Column(scale=2, elem_classes="chat-container"):
             chatbot = gr.Chatbot(
                 height=500,
-                label="Dental Education Assistant",
+                label="Response",
                 show_label=True,
                 avatar_images=None,
                 bubble_full_width=False,
@@ -771,9 +766,20 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, js=question_js) as demo:
                 <div class="carousel-card">
                     <div class="carousel-card-title">{category}</div>
                 """
-                for question in questions:
+                for i, question in enumerate(questions):
+                    # Escape quotes in the question for JavaScript
+                    escaped_question = question.replace("'", "\\'")
                     carousel_html += f"""
-                    <button class="question-button" type="button">{question}</button>
+                    <button class="question-button" type="button" 
+                            onclick="
+                                const textarea = document.querySelector('textarea');
+                                if (textarea) {{
+                                    textarea.value = '{escaped_question}';
+                                    textarea.dispatchEvent(new Event('input', {{bubbles: true}}));
+                                }}
+                            ">
+                        {question}
+                    </button>
                     """
                 carousel_html += "</div>"