linkable examples

whiletrue-industries · Feb 21, 2025 · a161edc · a161edc
1 parent fed83d0
commit a161edc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/ui/projects/ask/src/app/home/home.component.html b/ui/projects/ask/src/app/home/home.component.html
@@ -33,8 +33,10 @@ <h2>&hellip;and we'll try to locate the answer in <span [innerHTML]='deployment?
                 <div class='examples'>
                     <h3>Not sure what to search for? Here are a few examples:</h3>
                     <div class='example-list'>
-                        @for (example of deployment?.examples ; track example) {
-                            <div class='example'>- &nbsp;"{{ example }}"</div>
+                        @for (example of deployment?.examples ; track example) {                        
+                            <div class='example'>- &nbsp;"
+                                <a (click)='ask(example)'>{{ example }}</a>
+                            "</div>
                         }
                     </div>
                 </div>

diff --git a/ui/projects/ask/src/app/home/home.component.less b/ui/projects/ask/src/app/home/home.component.less
@@ -219,6 +219,11 @@
                     .font-sans-400;
                     font-size: 16px;
                     font-style: italic;
+                    a {
+                        cursor: pointer;
+                        text-decoration: underline;
+                        color: @color-blue-2;    
+                    }
                 }
             }
         }

diff --git a/ui/projects/ask/src/app/home/home.component.ts b/ui/projects/ask/src/app/home/home.component.ts
@@ -91,10 +91,11 @@ export class HomeComponent {
     });
   }
 
-  ask() {
-    if (this.question) {
+  ask(example?: string) {
+    const question = example || this.question;
+    if (question) {
       this.loading = true;
-      this.api.getAnswer(undefined, this.question, this.deployment_id)
+      this.api.getAnswer(undefined, question, this.deployment_id)
       .pipe(
         catchError((error) => {
           this.setAnswer('Error: ' + error.message);