chore: cleanup tabs and teaser list

Azure-Samples · Nov 18, 2023 · 5f34b92 · 5f34b92
1 parent b1f47a4
commit 5f34b92
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 72 deletions.
diff --git a/packages/chat-component/src/components/chat-component.ts b/packages/chat-component/src/components/chat-component.ts
@@ -463,12 +463,13 @@ export class ChatComponent extends LitElement {
             ${this.isDefaultPromptsEnabled
               ? html`
                   <teaser-list-component
-                    .title="${this.interactionModel === 'chat'
+                    .heading="${this.interactionModel === 'chat'
                       ? teaserListTexts.HEADING_CHAT
                       : teaserListTexts.HEADING_ASK}"
+                    .clickable="${true}"
+                    .actionLabel="${teaserListTexts.TEASER_CTA_LABEL}"
                     @teaser-click="${this.handleQuestionInputClick}"
                     .teasers="${teaserListTexts.DEFAULT_PROMPTS}"
-                    .label="${teaserListTexts.TEASER_CTA_LABEL}"
                   ></teaser-list-component>
                 `
               : ''}
@@ -547,21 +548,18 @@ export class ChatComponent extends LitElement {
                   ] as TabContent[]}"
                   .selectedTabId="${this.selectedAsideTab}"
                 >
-                  <div slot="tab-thought-process">
-                    <h3 class="subheadline--small">${globalConfig.THOUGHT_PROCESS_LABEL}</h3>
-                    <div class="tab-component__innerContainer">
-                      ${this.chatThoughts
-                        ? html` <p class="tab-component__paragraph">${unsafeHTML(this.chatThoughts)}</p> `
-                        : ''}
-                    </div>
+                  <div slot="tab-thought-process" class="tab-component__content">
+                    ${this.chatThoughts
+                      ? html` <p class="tab-component__paragraph">${unsafeHTML(this.chatThoughts)}</p> `
+                      : ''}
                   </div>
-                  <div slot="tab-support-context">
-                    <h3 class="subheadline--small">${globalConfig.SUPPORT_CONTEXT_LABEL}</h3>
-                    <ul class="defaults__list always-row">
-                      ${this.chatDataPoints?.map(
-                        (dataPoint) => html` <li class="defaults__listItem">${dataPoint}</li> `,
-                      )}
-                    </ul>
+                  <div slot="tab-support-context" class="tab-component__content">
+                    <teaser-list-component
+                      .alwaysRow="${true}"
+                      .teasers="${this.chatDataPoints?.map((d) => {
+                        return { description: d };
+                      })}"
+                    ></teaser-list-component>
                   </div>
                   <div slot="tab-citations" class="tab-component__content">
                     <citation-list

diff --git a/packages/chat-component/src/components/teaser-list-component.ts b/packages/chat-component/src/components/teaser-list-component.ts
@@ -14,10 +14,16 @@ export class TeaserListComponent extends LitElement {
   teasers: Teaser[] = [];
 
   @property({ type: String })
-  title: string = '';
+  heading: string | undefined = undefined;
 
   @property({ type: String })
-  label: string = '';
+  actionLabel: string | undefined = undefined;
+
+  @property({ type: Boolean })
+  alwaysRow = false;
+
+  @property({ type: Boolean })
+  clickable = false;
 
   // Handle the click on a default prompt
   handleTeaserClick(teaser: Teaser, event?: Event): void {
@@ -32,23 +38,28 @@ export class TeaserListComponent extends LitElement {
     this.dispatchEvent(teaserClickEvent);
   }
 
+  renderClickableTeaser(teaser: Teaser) {
+    return html`
+      <a
+        role="button"
+        href="#"
+        data-testid="default-question"
+        @click="${(event: Event) => this.handleTeaserClick(teaser, event)}"
+      >
+        ${teaser.description}
+        <span class="teaser-click-label">${this.actionLabel}</span>
+      </a>
+    `;
+  }
   override render() {
     return html`
       <div class="teaser-list-container">
-        <h1 class="headline">${this.title}</h1>
-        <ul class="teaser-list">
+        ${this.heading ? html`<h1 class="headline">${this.heading}</h1>` : ''}
+        <ul class="teaser-list ${this.alwaysRow ? 'always-row' : ''}">
           ${this.teasers.map(
             (teaser) => html`
               <li class="teaser-list-item">
-                <a
-                  role="button"
-                  href="#"
-                  data-testid="default-question"
-                  @click="${(event: Event) => this.handleTeaserClick(teaser, event)}"
-                >
-                  ${teaser.description}
-                  <span>${this.label}</span>
-                </a>
+                ${this.clickable ? this.renderClickableTeaser(teaser) : teaser.description}
               </li>
             `,
           )}

diff --git a/packages/chat-component/src/styles/chat-component.ts b/packages/chat-component/src/styles/chat-component.ts
@@ -103,10 +103,6 @@ export const chatStyle = css`
     padding: 0;
     margin: 0;
   }
-  .subheadline--small {
-    font-size: 12px;
-    display: inline-block;
-  }
   .chat__container {
     min-width: 100%;
     transition: width 0.3s ease-in-out;
@@ -254,48 +250,14 @@ export const chatStyle = css`
     display: flex;
     justify-content: end;
   }
+  .tab-component__content {
+    padding: 20px 20px 20px 0px;
+  }
   .tab-component__paragraph {
     font-family: monospace;
     font-size: large;
     border: 1px solid var(--light-gray);
-    padding: 20px;
     border-radius: 25px;
-  }
-  .defaults__list {
-    list-style-type: none;
-    padding: 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .defaults__list.always-row {
-    text-align: left;
-  }
-  .defaults__list:not(.always-row) {
-    @media (min-width: 1024px) {
-      flex-direction: row;
-    }
-  }
-  .defaults__listItem {
-    padding: 10px;
-    border-radius: 10px;
-    background: var(--white);
-    margin: 4px;
-    color: var(--text-color);
-    justify-content: space-evenly;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    border: 3px solid transparent;
-
-    @media (min-width: 768px) {
-      min-height: 100px;
-    }
-  }
-  .defaults__listItem:hover,
-  .defaults__listItem:focus {
-    color: var(--accent-dark);
-    background: var(--secondary-color);
-    transition: all 0.3s ease-in-out;
-    border-color: var(--accent-high);
+    padding: 20px;
   }
 `;
diff --git a/packages/chat-component/src/styles/teaser-list-component.ts b/packages/chat-component/src/styles/teaser-list-component.ts
@@ -25,6 +25,11 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     justify-content: center;
+  }
+  .teaser-list.always-row {
+    text-align: left;
+  }
+  .teaser-list:not(.always-row) {
     @media (min-width: 1024px) {
       flex-direction: row;
     }
@@ -50,7 +55,7 @@ export const styles = css`
     transition: all 0.3s ease-in-out;
     border-color: var(--accent-high);
   }
-  .teaser-list-item span {
+  .teaser-list-item .teaser-click-label {
     color: var(--accent-high);
     font-weight: bold;
     display: block;