From 89af71101e0093393374010cfc9986931db1e5bd Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Sat, 26 Jul 2025 22:56:32 +0200
Subject: [PATCH] finalize suggestion mechanic

---
 src/components/AIQueryInterface.astro |  34 +++++++-
 src/styles/global.css                 | 120 ++++++++++++++++++++++++++
 2 files changed, 153 insertions(+), 1 deletion(-)

diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro
index a23714e..d9834e9 100644
--- a/src/components/AIQueryInterface.astro
+++ b/src/components/AIQueryInterface.astro
@@ -57,6 +57,27 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
       </div>
       
       <div class="ai-suggestions-section">
+        <div id="smart-prompting-hint" class="smart-prompting-hint">
+          <div class="hint-card">
+            <div class="hint-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                <line x1="12" y1="17" x2="12.01" y2="17"/>
+              </svg>
+            </div>
+            <div class="hint-content">
+              <h4 class="hint-title">Intelligente Hilfe</h4>
+              <p class="hint-description">
+                Während Sie tippen, analysiert die KI Ihre Eingabe und schlägt gezielten Fragen vor, um Ihr Szenario zu präzisieren.
+              </p>
+              <div class="hint-trigger">
+                <span class="hint-label">Aktiviert ab:</span>
+                <span class="hint-value">40+ Zeichen</span>
+              </div>
+            </div>
+          </div>
+        </div>
         <div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
           <div class="prompting-card">
             <div id="prompting-status" class="prompting-status">
@@ -158,7 +179,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
       <p id="ai-error-message" style="margin: 0;">Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es erneut.</p>
     </div>
   </div>
-
+<br>
   <div id="ai-results" class="ai-results" style="display: none;">
   </div>
 </section>
@@ -277,6 +298,7 @@ document.addEventListener('DOMContentLoaded', () => {
     switch (state) {
       case 'analyzing':
         smartPromptingContainer.style.display = 'block';
+        toggleHintVisibility(false);
         statusText.textContent = 'Analysiere Eingabe...';
         promptingSpinner.style.display = 'inline-block';
         suggestedQuestions.style.display = 'none';
@@ -293,9 +315,11 @@ document.addEventListener('DOMContentLoaded', () => {
         break;
       case 'error':
         smartPromptingContainer.style.display = 'none';
+        toggleHintVisibility(true);
         break;
       case 'hidden':
         smartPromptingContainer.style.display = 'none';
+        toggleHintVisibility(true);
         break;
     }
   }
@@ -378,6 +402,14 @@ document.addEventListener('DOMContentLoaded', () => {
       enhancementAbortController.abort();
     }
     showPromptingStatus('hidden');
+    toggleHintVisibility(true);
+  }
+
+  function toggleHintVisibility(show) {
+    const hint = document.getElementById('smart-prompting-hint');
+    if (hint) {
+      hint.style.display = show ? 'flex' : 'none';
+    }
   }
 
   toggleSwitch.addEventListener('click', () => {
diff --git a/src/styles/global.css b/src/styles/global.css
index 6383ef9..baa7bf8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1806,6 +1806,18 @@ footer {
   .form-grid.two-columns {
     grid-template-columns: 1fr;
   }
+  .hint-card {
+    padding: 1rem;
+  }
+  
+  .hint-description {
+    font-size: 0.6875rem;
+  }
+  
+  .hint-trigger {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 }
 
 @media (width <= 640px) {
@@ -1961,6 +1973,17 @@ footer {
   .queue-status-card {
     padding: 1rem;
   }
+  .hint-card {
+    padding: 0.75rem;
+  }
+  
+  .hint-title {
+    font-size: 0.8125rem;
+  }
+  
+  .hint-description {
+    font-size: 0.625rem;
+  }
 }
 
 /* Smart Prompting Styles - Simplified */
@@ -2013,6 +2036,103 @@ footer {
   animation: spin 1s linear infinite;
 }
 
+/* Smart Prompting Hint */
+.smart-prompting-hint {
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  animation: hintFadeIn 0.3s ease-in-out;
+}
+
+.hint-card {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border: 1px dashed var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+  width: 100%;
+  text-align: center;
+  opacity: 0.7;
+  transition: var(--transition-medium);
+}
+
+.hint-card:hover {
+  opacity: 0.9;
+  border-color: var(--color-accent);
+  transform: translateY(-1px);
+}
+
+.hint-icon {
+  margin-bottom: 0.75rem;
+  opacity: 0.8;
+}
+
+.hint-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.hint-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+  letter-spacing: 0.025em;
+}
+
+.hint-description {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+}
+
+.hint-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.hint-label {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+}
+
+.hint-value {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-accent);
+  background-color: var(--color-bg);
+  padding: 0.125rem 0.5rem;
+  border-radius: 1rem;
+  border: 1px solid var(--color-accent);
+}
+
+/* Hide hint when smart prompting is active */
+.smart-prompting-container[style*="block"] ~ .smart-prompting-hint,
+.smart-prompting-container:not([style*="none"]) ~ .smart-prompting-hint {
+  display: none;
+}
+
+@keyframes hintFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 0.7;
+    transform: translateY(0);
+  }
+}
+
 .suggested-questions {
   flex: 1;
   display: flex;