diff --git a/packages/chat-component/src/components/chat-avatar.ts b/packages/chat-component/src/components/chat-avatar.ts index 2d3e563f..d5e66f56 100644 --- 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` ${unsafeSVG(this.svgIcon)} diff --git a/packages/chat-component/src/components/chat-component.ts b/packages/chat-component/src/components/chat-component.ts index 74cb534e..beaf24df 100644 --- 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 {
${this.isChatStarted ? html` -
+
${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 index d44e9d89..f51d1f86 100644 --- 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` -
- +
${this.actionButtons.map( (actionButton) => html` @@ -138,7 +133,7 @@ export class ChatThreadComponent extends LitElement { @click="${this.copyResponseToClipboard}" >
-
+ `; } diff --git a/packages/chat-component/src/styles/chat-component.ts b/packages/chat-component/src/styles/chat-component.ts index 6b00e39c..a23e1bcb 100644 --- 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 index 56c7b3a1..42744512 100644 --- 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;