fix: improve cosmetics

Azure-Samples · Nov 4, 2023 · 910f136 · 910f136
1 parent 004987d
commit 910f136
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts
@@ -110,14 +110,17 @@ export class ChatComponent extends LitElement {
 
     // add event listener to know when to scroll chat list footer into view
     this.addEventListener('must-scroll', () => {
-      const footer = this.shadowRoot?.querySelector('#chat-list-footer') as HTMLElement;
-      if (footer) {
-        scrollToFooter(footer);
-      }
+      this.handleOnMustScroll();
     });
   }
-  // Send the question to the Open AI API and render the answer in the chat
 
+  handleOnMustScroll(): void {
+    const footer = this.shadowRoot?.querySelector('#chat-list-footer') as HTMLElement;
+    if (footer) {
+      scrollToFooter(footer);
+    }
+  }
+  // Send the question to the Open AI API and render the answer in the chat
   // Add a message to the chat, when the user or the API sends a message
   async processApiResponse({ message, isUserMessage }: { message: string; isUserMessage: boolean }) {
     const citations: Citation[] = [];
@@ -249,7 +252,6 @@ export class ChatComponent extends LitElement {
           this.chatThoughts = response.choices[0].message.context?.thoughts ?? '';
           this.chatDataPoints = response.choices[0].message.context?.data_points ?? [];
           this.canShowThoughtProcess = true;
-          this.dispatchEvent(mustScrollEvent);
         }
         await this.processApiResponse({
           message: this.useStream ? '' : response.choices[0].message.content,
@@ -498,7 +500,7 @@ export class ChatComponent extends LitElement {
                       `
                     : ''}
                 </ul>
-                <div id="chat-list-footer"></div>
+                <div class="chat__footer" id="chat-list-footer"></div>
               `
             : ''}
           ${this.isAwaitingResponse && !this.hasAPIError

diff --git a/packages/chat-component/src/style.ts b/packages/chat-component/src/style.ts
@@ -320,9 +320,10 @@ export const mainStyle = css`
     color: var(--text-color);
     display: flex;
     flex-direction: column;
-    padding: 0;
-    margin-bottom: 50px;
-    padding-bottom: 120px;
+  }
+  .chat__footer {
+    width: 100%;
+    height: 70px;
   }
   .chat__listItem {
     max-width: 80%;

diff --git a/packages/chat-component/src/utils/index.ts b/packages/chat-component/src/utils/index.ts
@@ -86,5 +86,5 @@ export const mustScrollEvent = new CustomEvent('must-scroll', {
 
 // Scroll to last message
 export function scrollToFooter(element: HTMLElement): void {
-  element.scrollIntoView({ behavior: 'smooth', block: 'end' });
+  element.scrollIntoView({ behavior: 'smooth', block: 'center' });
 }