fix: fix layout cosmetics and remove avatar from bubbles

Azure-Samples · Dec 5, 2023 · 38a3601 · 38a3601
1 parent 48d95c4
commit 38a3601
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 21 deletions.
diff --git a/packages/chat-component/src/components/chat-avatar.ts b/packages/chat-component/src/components/chat-avatar.ts
@@ -8,7 +8,6 @@ export interface ChatStage {
   label: string;
   svgIcon: string;
   url: string;
-  isEnabled: boolean;
 }
 
 @customElement('chat-avatar')
@@ -24,13 +23,7 @@ export class ChatAvatarComponent extends LitElement {
   @property({ type: String })
   url = '';
 
-  @property({ type: Boolean })
-  isEnabled = false;
-
   override render() {
-    if (!this.isEnabled) {
-      return html``;
-    }
     return html`
       <a class="chat-avatar__link" title="${this.label}" href="${this.url}" target="_blank" rel="noopener noreferrer">
         ${unsafeSVG(this.svgIcon)}

diff --git a/packages/chat-component/src/components/chat-component.ts b/packages/chat-component/src/components/chat-component.ts
@@ -391,7 +391,8 @@ export class ChatComponent extends LitElement {
       .isDisabled="${this.isDisabled}"
       .isProcessingResponse="${this.chatController.isProcessingResponse}"
       .selectedCitation="${this.selectedCitation}"
-      .isEnabled="${this.isBrandingEnabled}"
+      .isCustomBranding="${this.isCustomBranding}"
+      .svgIcon="${iconLogo}"
       @on-action-button-click="${this.handleChatEntryActionButtonClick}"
       @on-citation-click="${this.handleCitationClick}"
       @on-followup-click="${this.handleQuestionInputClick}"
@@ -407,7 +408,7 @@ export class ChatComponent extends LitElement {
         <section class="chat__container" id="chat-container">
           ${this.isChatStarted
             ? html`
-                <div class="chat__header--butons">
+                <div class="chat__header--thread">
                   ${this.interactionModel === 'chat'
                     ? this.chatHistoryController.renderHistoryButton({ disabled: this.isDisabled })
                     : ''}

diff --git a/packages/chat-component/src/components/chat-thread-component.ts b/packages/chat-component/src/components/chat-thread-component.ts
@@ -109,12 +109,7 @@ export class ChatThreadComponent extends LitElement {
 
   renderResponseActions(entry: ChatThreadEntry) {
     return html`
-      <div class="chat__header--avatar">
-        <chat-avatar
-          url="${globalConfig.BRANDING_URL}"
-          svgIcon="${this.svgIcon}"
-          .isEnabled="${this.isCustomBranding}"
-        ></chat-avatar>
+      <header class="chat__header">
         <div class="chat__header--button">
           ${this.actionButtons.map(
             (actionButton) => html`
@@ -138,7 +133,7 @@ export class ChatThreadComponent extends LitElement {
             @click="${this.copyResponseToClipboard}"
           ></chat-action-button>
         </div>
-      </div>
+      </header>
     `;
   }
 

diff --git a/packages/chat-component/src/styles/chat-component.ts b/packages/chat-component/src/styles/chat-component.ts
@@ -150,6 +150,11 @@ export const chatStyle = css`
     font-size: var(--font-small);
     display: inline-block;
   }
+  .chat__header--thread {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
   .chat__container {
     min-width: 100%;
     transition: width 0.3s ease-in-out;

diff --git a/packages/chat-component/src/styles/chat-thread-component.ts b/packages/chat-component/src/styles/chat-thread-component.ts
@@ -20,11 +20,14 @@ export const styles = css`
     display: flex;
     align-items: center;
   }
-  .chat__header--avatar {
-    justify-content: space-between;
+  .chat__header {
+    display: flex;
+    align-items: top;
+    justify-content: flex-end;
+    padding: var(--d-base);
   }
   .chat__header--button {
-    margin-right: 20px;
+    margin-right: var(--d-base);
   }
   .chat__list {
     color: var(--text-color);
@@ -35,7 +38,7 @@ export const styles = css`
   }
   .chat__footer {
     width: 100%;
-    height: 70px;
+    height: calc(var(--d-large) + var(--d-base));
   }
   .chat__listItem {
     max-width: var(--width-wide);
@@ -49,6 +52,20 @@ export const styles = css`
       min-width: var(--width-narrow);
     }
   }
+  .chat-history__footer {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: space-between;
+    align-self: center;
+    padding: 20px;
+  }
+  .chat-history__container {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 3px solid var(--light-gray);
+    margin-bottom: 30px;
+  }
   .chat__txt {
     animation: chatmessageanimation 0.5s ease-in-out;
     background-color: var(--c-secondary);
@@ -82,7 +99,7 @@ export const styles = css`
     font-size: smaller;
     font-style: italic;
     margin: 0;
-    margin-top: 1px;
+    margin-top: var(--border-thin);
   }
   .user-message .chat__txt--info {
     text-align: right;