chore: make tab content children of tab content

Azure-Samples · Nov 15, 2023 · 18c38a5 · 18c38a5
1 parent 4e8ad6c
commit 18c38a5
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 97 deletions.
diff --git a/packages/chat-component/src/components/chat-component.ts b/packages/chat-component/src/components/chat-component.ts
@@ -443,6 +443,7 @@ export class ChatComponent extends LitElement {
     if (citations && citations.length > 0) {
       return html`
         <ol class="items__list citations">
+          <h3 class="subheadline--small">${globalConfig.CITATIONS_LABEL}</h3>
           ${citations.map(
             (citation) => html`
               <li class="items__listItem--citation">
@@ -673,38 +674,43 @@ export class ChatComponent extends LitElement {
                     {
                       id: 'tab-thought-process',
                       label: globalConfig.THOUGHT_PROCESS_LABEL,
-                      render: () =>
-                        html`<div class="tab-component__innerContainer">
-                          ${this.chatThoughts
-                            ? html` <p class="tab-component__paragraph">${unsafeHTML(this.chatThoughts)}</p> `
-                            : ''}
-                        </div>`,
                     },
                     {
                       id: 'tab-support-context',
                       label: globalConfig.SUPPORT_CONTEXT_LABEL,
-                      render: () =>
-                        html`<ul class="defaults__list always-row">
-                          ${this.chatDataPoints?.map(
-                            (dataPoint) => html` <li class="defaults__listItem">${dataPoint}</li> `,
-                          )}
-                        </ul>`,
                     },
                     {
                       id: 'tab-citations',
-                      label: globalConfig.CITATIONS_LABEL,
-                      render: () => {
-                        return html`${this.renderCitation(this.chatThread.at(-1)?.citations)}
-                        ${this.selectedCitation
-                          ? html`<document-previewer
-                              url="${this.apiUrl}/content/${this.selectedCitation.text}"
-                            ></document-previewer>`
-                          : ''} `;
-                      },
+                      label: globalConfig.CITATIONS_TAB_LABEL,
                     },
                   ] as TabContent[]}"
                   .selectedTabId="${this.selectedAsideTab}"
-                ></tab-component>
+                >
+                  <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>
+                  <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>
+                  <div slot="tab-citations" class="tab-component__content">
+                    ${this.renderCitation(this.chatThread.at(-1)?.citations)}
+                    ${this.selectedCitation
+                      ? html`<document-previewer
+                          url="${this.apiUrl}/content/${this.selectedCitation.text}"
+                        ></document-previewer>`
+                      : ''}
+                  </div>
+                </tab-component>
               </aside>
             `
           : ''}

diff --git a/packages/chat-component/src/components/tab-component.ts b/packages/chat-component/src/components/tab-component.ts
@@ -1,11 +1,10 @@
-import { LitElement, type TemplateResult, html } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { tabStyle } from '../styles/tab-component.js';
 
 export interface TabContent {
   id: string;
   label: string;
-  render: () => TemplateResult<1>;
 }
 
 @customElement('tab-component')
@@ -22,7 +21,6 @@ export class TabComponent extends LitElement {
     event.preventDefault();
     const tabId = (event.target as HTMLAnchorElement).id;
     this.selectedTabId = tabId;
-    this.requestUpdate();
   }
 
   renderTabListItem(tabContent: TabContent, isSelected: boolean) {
@@ -54,8 +52,7 @@ export class TabComponent extends LitElement {
         tabindex="${isSelected ? '0' : '-1'}"
         aria-labelledby="${tabContent.id}"
       >
-        <h3 class="subheadline--small">${tabContent.label}</h3>
-        ${tabContent.render()}
+        <slot name="${tabContent.id}"></slot>
       </div>
     `;
   }

diff --git a/packages/chat-component/src/config/global-config.js b/packages/chat-component/src/config/global-config.js
@@ -32,7 +32,8 @@ const globalConfig = {
   // Config pertaining the response format
   THOUGHT_PROCESS_LABEL: 'Thought Process',
   SUPPORT_CONTEXT_LABEL: 'Support Context',
-  CITATIONS_LABEL: 'Citations',
+  CITATIONS_LABEL: 'Learn More:',
+  CITATIONS_TAB_LABEL: 'Citations',
 };
 
 const teaserListTexts = {

diff --git a/packages/chat-component/src/styles/chat-component.ts b/packages/chat-component/src/styles/chat-component.ts
@@ -480,4 +480,51 @@ export const chatStyle = css`
     display: flex;
     justify-content: end;
   }
+  .tab-component__paragraph {
+    font-family: monospace;
+    font-size: large;
+    border: 1px solid var(--light-gray);
+    padding: 20px;
+    border-radius: 25px;
+  }
+  .tab-component__content .items__list.citations {
+    border-top: 0;
+  }
+  .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);
+  }
 `;
diff --git a/packages/chat-component/src/styles/tab-component.ts b/packages/chat-component/src/styles/tab-component.ts
@@ -41,9 +41,6 @@ export const tabStyle = css`
   .tab-component__content {
     position: relative;
   }
-  .tab-component__content .items__list.citations {
-    border-top: 0;
-  }
   .tab-component__tab {
     position: absolute;
     top: 0;
@@ -58,70 +55,4 @@ export const tabStyle = css`
   .tab-component__tab.active {
     display: block;
   }
-  .tab-component__paragraph {
-    font-family: monospace;
-    font-size: large;
-    border: 1px solid var(--light-gray);
-    padding: 20px;
-    border-radius: 25px;
-  }
-  .citation {
-    background-color: var(--accent-lighter);
-    border-radius: 3px;
-    padding: 3px;
-    margin-left: 3px;
-  }
-  .items__listItem--citation {
-    display: inline-block;
-    background-color: var(--accent-lighter);
-    border-radius: 5px;
-    text-decoration: none;
-    padding: 5px;
-    margin-top: 5px;
-    font-size: small;
-  }
-  .items__listItem--citation:not(first-child) {
-    margin-left: 5px;
-  }
-  .items__link {
-    text-decoration: none;
-    color: var(--text-color);
-  }
-  .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);
-  }
 `;