From 3a1b4a4fe9bfb03ef7087b4e35dc215308e44929 Mon Sep 17 00:00:00 2001 From: Natalia Venditto Date: Tue, 7 Nov 2023 15:19:14 +0100 Subject: [PATCH 1/7] fix: add new icons --- packages/chat-component/public/svg/bubblequestion-icon.svg | 3 +++ packages/chat-component/public/svg/spinner-icon.svg | 3 +++ 2 files changed, 6 insertions(+) create mode 100644 packages/chat-component/public/svg/bubblequestion-icon.svg create mode 100644 packages/chat-component/public/svg/spinner-icon.svg diff --git a/packages/chat-component/public/svg/bubblequestion-icon.svg b/packages/chat-component/public/svg/bubblequestion-icon.svg new file mode 100644 index 00000000..c964c796 --- /dev/null +++ b/packages/chat-component/public/svg/bubblequestion-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/chat-component/public/svg/spinner-icon.svg b/packages/chat-component/public/svg/spinner-icon.svg new file mode 100644 index 00000000..f3529891 --- /dev/null +++ b/packages/chat-component/public/svg/spinner-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From a9e7c374f6a9c5b1a2573bb5f8f1db6fef804c18 Mon Sep 17 00:00:00 2001 From: Natalia Venditto Date: Tue, 7 Nov 2023 15:19:38 +0100 Subject: [PATCH 2/7] fix: add or update labels --- packages/chat-component/src/config/global-config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/chat-component/src/config/global-config.js b/packages/chat-component/src/config/global-config.js index ead83291..2d33c842 100644 --- a/packages/chat-component/src/config/global-config.js +++ b/packages/chat-component/src/config/global-config.js @@ -11,7 +11,7 @@ const globalConfig = { 'How to contact a representative?', ], DEFAULT_PROMPTS_HEADING_CHAT: 'Chat with our support team', - DEFAULT_PROMPTS_HEADING_ASK: 'Ask a question', + DEFAULT_PROMPTS_HEADING_ASK: 'Ask now', // This are the chat bubbles that will be displayed in the chat CHAT_MESSAGES: [], // This are the labels for the chat button and input @@ -28,13 +28,13 @@ const globalConfig = { FOLLOW_UP_QUESTIONS_LABEL_TEXT: 'You can also ask...', SHOW_THOUGH_PROCESS_BUTTON_LABEL_TEXT: 'Show thought process', HIDE_THOUGH_PROCESS_BUTTON_LABEL_TEXT: 'Hide thought process', - LOADING_INDICATOR_TEXT: 'Please wait. We are searching for an answer...', + LOADING_INDICATOR_TEXT: 'Please wait. We are searching and generating an answer...', // API ERROR HANDLING IN UI API_ERROR_MESSAGE: 'Sorry, we are having some problems. Please try again later.', // Config pertaining the response format THOUGHT_PROCESS_LABEL: 'Thought Process', SUPPORT_CONTEXT_LABEL: 'Support Context', - CITATIONS_LABEL: 'Citations', + CITATIONS_LABEL: 'Learn More:', }; const NEXT_QUESTION_INDICATOR = 'Next Questions:'; From 5762dc47b34f79becd61df7040cd3968d462dfac Mon Sep 17 00:00:00 2001 From: Natalia Venditto Date: Tue, 7 Nov 2023 15:19:59 +0100 Subject: [PATCH 3/7] fix: update styles --- packages/chat-component/src/main.ts | 20 +++- packages/chat-component/src/style.ts | 156 ++++++++++++++++++++++----- 2 files changed, 142 insertions(+), 34 deletions(-) diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts index 57310d27..01b49c07 100644 --- a/packages/chat-component/src/main.ts +++ b/packages/chat-component/src/main.ts @@ -18,7 +18,8 @@ import iconSuccess from '../public/svg/success-icon.svg?raw'; import iconCopyToClipboard from '../public/svg/copy-icon.svg?raw'; import iconSend from '../public/svg/send-icon.svg?raw'; import iconClose from '../public/svg/close-icon.svg?raw'; -import iconQuestion from '../public/svg/question-icon.svg?raw'; +import iconQuestion from '../public/svg/bubblequestion-icon.svg?raw'; +import iconSpinner from '../public/svg/spinner-icon.svg?raw'; import { marked } from 'marked'; /** @@ -412,11 +413,11 @@ export class ChatComponent extends LitElement { // render steps if (textEntry.followingSteps && textEntry.followingSteps.length > 0) { entries.push( - html`
    + html`
      ${textEntry.followingSteps.map( (followingStep) => html`
    • ${unsafeHTML(followingStep)}
      • `, )} -
`, + `, ); } // scroll to the bottom of the chat @@ -429,6 +430,7 @@ export class ChatComponent extends LitElement { if (citations && citations.length > 0) { return html`
    +

    ${globalConfig.CITATIONS_LABEL}

    ${citations.map( (citation) => html`
  1. @@ -550,7 +552,9 @@ export class ChatComponent extends LitElement { ` : ''} -
    +
    + +
    ` : ''} ${this.isAwaitingResponse && !this.hasAPIError @@ -564,6 +568,12 @@ export class ChatComponent extends LitElement {
    +

    + ${unsafeSVG(iconSpinner)} + ${globalConfig.LOADING_INDICATOR_TEXT} +

    + +

    ` : ''} @@ -589,7 +599,7 @@ export class ChatComponent extends LitElement { @click="${(event: Event) => this.handleDefaultPromptClick(prompt, event)}" > ${prompt} - Ask now + ${globalConfig.DEFAULT_PROMPTS_HEADING_ASK}
    2. `, diff --git a/packages/chat-component/src/style.ts b/packages/chat-component/src/style.ts index 8259af39..ffd4fe47 100644 --- a/packages/chat-component/src/style.ts +++ b/packages/chat-component/src/style.ts @@ -12,13 +12,13 @@ export const mainStyle = css` --black: #111111; --light-gray: #e3e3e3; --dark-gray: #4e5288; - --accent-high: #b200ff; + --accent-high: #692b61; --accent-dark: #002b23; --accent-light: #e6fbf7; - --accent-lighter: rgba(242, 140, 241, 0.4); + --accent-lighter: #f6d0d0; --error-color: #8a0000; } - :host(.dark) { + :host([data-theme='dark']]) { display: block; padding: 16px; --secondary-color: #1f2e32; @@ -30,7 +30,7 @@ export const mainStyle = css` --accent-high: #005164; --accent-dark: #b4e2ee; --accent-light: #e6fbf7; - --accent-lighter: rgba(140, 222, 242, 0.4); + --accent-lighter: #f6d0d0; --error-color: #8a0000; } html { @@ -68,6 +68,14 @@ export const mainStyle = css` opacity: 0.5; } } + @keyframes spinneranimation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } .overlay { position: fixed; top: 0; @@ -104,9 +112,14 @@ export const mainStyle = css` } .headline { color: var(--text-color); - font-size: 1.5rem; + font-size: 5vw; padding: 0; - margin: 10px 0; + margin: 10px 0 30px; + + @media (min-width: 1024px) { + font-size: 3vw; + text-align: center; + } } .subheadline { color: var(--text-color); @@ -116,14 +129,19 @@ export const mainStyle = css` } .subheadline--small { font-size: 12px; - text-transform: uppercase; - text-decoration: underline; + display: inline-block; } .chat__container { min-width: 100%; transition: width 0.3s ease-in-out; max-height: 100vh; } + .chat__containerWrapper.aside-open { + .chat__listItem { + max-width: 90%; + min-width: 80%; + } + } .chat__containerWrapper { display: grid; grid-template-columns: 1fr; @@ -188,20 +206,25 @@ export const mainStyle = css` justify-content: end; } .aside__list { + list-style-type: none; + padding: 20px 0px; + margin: 0px auto; + width: 80%; display: flex; justify-content: space-around; - list-style-type: none; - padding: 20px 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .aside__link.active { - border-bottom: 4px solid var(--accent-high); + background: var(--accent-high); + color: var(--white); } .aside__link:not(.active):hover { - border-bottom: 4px solid var(--accent-lighter); + background: var(--light-gray); cursor: pointer; } .aside__link { border-bottom: 4px solid transparent; + border-radius: 5px; text-decoration: none; color: var(--text-color); font-weight: bold; @@ -230,13 +253,14 @@ export const mainStyle = css` .aside__paragraph { font-family: monospace; font-size: large; - border: 1px solid var(--accent-light); + border: 1px solid var(--light-gray); padding: 20px; border-radius: 25px; } .chat__header { display: flex; justify-content: flex-end; + padding: 20px; } .chat__header--button { border: 1px solid var(--accent-dark); @@ -249,6 +273,8 @@ export const mainStyle = css` opacity: 1; padding: 5px; transition: all 0.3s ease-in-out; + height: 40px; + position: relative; } .chat__header--button:disabled, .chatbox__button:disabled, @@ -261,13 +287,46 @@ export const mainStyle = css` width: 25px; } .chat__header--span { - margin-right: 5px; - text-align: left; font-size: smaller; + transition: all 0.3s ease-out 0s; + position: absolute; + text-align: right; + top: -80%; + background: var(--accent-dark); + color: white; + opacity: 0; + right: 0px; + padding: 5px 10px; + border-radius: 5px; + font-weight: bold; + text-wrap: nowrap; + } + .chat__header--span::after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 8px solid var(--accent-dark); + bottom: -8px; + right: 5px; } .chat__header--button svg { fill: currentColor; - width: 12px; + width: 25px; + padding: 3px; + } + .chat__header--button:hover > span, + .chat__header--button:focus > span { + display: inline-block; + opacity: 1; + } + .chat__header--button:hover > svg, + .chat__header--button:focus > svg { + background-color: var(--light-gray); + border-radius: 5px; + transition: background 0.3s ease-in-out; } .chatbox__container { position: relative; @@ -320,17 +379,24 @@ export const mainStyle = css` color: var(--text-color); display: flex; flex-direction: column; + list-style-position: inside; + padding-inline-start: 0; } .chat__footer { width: 100%; height: 70px; } .chat__listItem { - max-width: 80%; - min-width: 70%; + max-width: 90%; + min-width: 80%; display: flex; flex-direction: column; height: auto; + + @media (min-width: 768px) { + max-width: 55%; + min-width: 50%; + } } .chat__txt { animation: chatmessageanimation 0.5s ease-in-out; @@ -338,7 +404,6 @@ export const mainStyle = css` color: var(--text-color); border-radius: 10px; margin-top: 8px; - padding: 20px; word-wrap: break-word; margin-block-end: 0; position: relative; @@ -347,15 +412,18 @@ export const mainStyle = css` .chat__txt.error { border: 3px solid var(--error-color); color: var(--error-color); + padding: 20px; } .chat__txt.user-message { background-color: var(--accent-high); color: var(--white); - font-weight: bold; } .chat__listItem.user-message { align-self: flex-end; } + .chat__txt--entry { + padding: 0 20px; + } .chat__txt--info { font-size: smaller; font-style: italic; @@ -366,13 +434,15 @@ export const mainStyle = css` text-align: right; } .items__listWrapper { - border-top: 1px dotted var(--light-gray); - display: flex; + border-top: 1px solid var(--light-gray); + display: grid; + padding: 0 20px; + grid-template-columns: 1fr 18fr; } .items__listWrapper svg { fill: var(--accent-high); - width: 40px; - margin-left: 25px; + width: 30px; + margin: 32px auto; } svg { height: auto; @@ -384,20 +454,34 @@ export const mainStyle = css` list-style-type: none; flex-wrap: wrap; } + .items__list.steps { + padding: 0 20px 0 40px; + list-style-type: disc; + } + .items__list.citations { + border-top: 1px solid var(--light-gray); + padding: 10px 20px 0; + } .items__list { margin: 10px 0; display: block; + padding: 0 20px; } svg { fill: var(--text-color); } .items__listItem--followup { cursor: pointer; - padding: 0 15px; - border-radius: 15px; - border: 2px solid var(--accent-high); + padding: 0 5px; + border-radius: 10px; + border: 1px solid var(--accent-high); margin: 5px; } + .item__listItem--followup:hover, + .item__listItem--followup:focus { + background: var(--accent-lighter); + cursor: pointer; + } .items__listItem--citation { display: inline-block; background-color: var(--accent-lighter); @@ -422,7 +506,8 @@ export const mainStyle = css` } .steps .items__listItem--step { padding: 5px 0; - border-bottom: 1px solid var(--light-gray); + font-size: 14px; + line-heigth: 1; } .followup .items__link { color: var(--accent-high); @@ -449,7 +534,7 @@ export const mainStyle = css` text-align: left; } .defaults__list:not(.always-row) { - @media (min-width: 1200px) { + @media (min-width: 1024px) { flex-direction: row; } } @@ -461,6 +546,7 @@ export const mainStyle = css` 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; @@ -471,6 +557,7 @@ export const mainStyle = css` color: var(--accent-dark); background: var(--secondary-color); transition: all 0.3s ease-in-out; + border-color: var(--accent-high); } .defaults__span { color: var(--accent-high); @@ -485,10 +572,21 @@ export const mainStyle = css` padding: 3px; margin-left: 3px; } + .loading-text { + display: flex; + align-items: center; + } .loading-skeleton { display: flex; margin-bottom: 50px; } + .loading-icon svg { + width: 30px; + height: 30px; + fill: var(--accent-lighter); + animation: spinneranimation 1s linear infinite; + margin-right: 10px; + } .dot { width: 10px; height: 10px; From bfe5c86035e78a9d7273736cf214b5b9d112f2ad Mon Sep 17 00:00:00 2001 From: Natalia Venditto Date: Tue, 7 Nov 2023 16:58:17 +0100 Subject: [PATCH 4/7] fix: fix tabs cosmetics --- .../src/config/global-config.js | 1 + packages/chat-component/src/main.ts | 15 +----- packages/chat-component/src/style.ts | 54 +++++++------------ 3 files changed, 23 insertions(+), 47 deletions(-) diff --git a/packages/chat-component/src/config/global-config.js b/packages/chat-component/src/config/global-config.js index 2d33c842..2dd295b7 100644 --- a/packages/chat-component/src/config/global-config.js +++ b/packages/chat-component/src/config/global-config.js @@ -35,6 +35,7 @@ const globalConfig = { THOUGHT_PROCESS_LABEL: 'Thought Process', SUPPORT_CONTEXT_LABEL: 'Support Context', CITATIONS_LABEL: 'Learn More:', + CITATIONS_TAB_LABEL: 'Citations', }; const NEXT_QUESTION_INDICATOR = 'Next Questions:'; diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts index 01b49c07..9074450a 100644 --- a/packages/chat-component/src/main.ts +++ b/packages/chat-component/src/main.ts @@ -559,21 +559,10 @@ export class ChatComponent extends LitElement { : ''} ${this.isAwaitingResponse && !this.hasAPIError ? html` -
    -
    -
    -
    -

    ${unsafeSVG(iconSpinner)} ${globalConfig.LOADING_INDICATOR_TEXT}

    - -

    ` : ''} @@ -715,9 +704,9 @@ export class ChatComponent extends LitElement { aria-hidden="${this.selectedAsideTab !== 'tab-citations'}" aria-controls="tabpanel-3" @click="${(event: Event) => this.activateTab(event)}" - title="${globalConfig.CITATIONS_LABEL}" + title="${globalConfig.CITATIONS_TAB_LABEL}" > - ${globalConfig.CITATIONS_LABEL} + ${globalConfig.CITATIONS_TAB_LABEL} diff --git a/packages/chat-component/src/style.ts b/packages/chat-component/src/style.ts index ffd4fe47..da257138 100644 --- a/packages/chat-component/src/style.ts +++ b/packages/chat-component/src/style.ts @@ -57,17 +57,6 @@ export const mainStyle = css` top: 0px; } } - @keyframes chatloadinganimation { - 0% { - opacity: 0.5; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0.5; - } - } @keyframes spinneranimation { 0% { transform: rotate(0deg); @@ -207,12 +196,17 @@ export const mainStyle = css` } .aside__list { list-style-type: none; - padding: 20px 0px; - margin: 0px auto; - width: 80%; display: flex; - justify-content: space-around; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; + border-radius: 10px; + padding: 3px; + width: 450px; + margin: 0 auto; + justify-content: space-evenly; + } + .aside__listItem { + width: 33%; + text-align: center; } .aside__link.active { background: var(--accent-high); @@ -236,6 +230,9 @@ export const mainStyle = css` .aside__content { position: relative; } + .aside__content .items__list.citations { + border-top: 0; + } .aside__tab { position: absolute; top: 0; @@ -408,6 +405,7 @@ export const mainStyle = css` margin-block-end: 0; position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border: 1px solid var(--light-gray); } .chat__txt.error { border: 3px solid var(--error-color); @@ -415,8 +413,9 @@ export const mainStyle = css` padding: 20px; } .chat__txt.user-message { - background-color: var(--accent-high); + background: linear-gradient(to left, #7d3c71, #692b61); color: var(--white); + border: 1px solid var(--accent-lighter); } .chat__listItem.user-message { align-self: flex-end; @@ -476,10 +475,11 @@ export const mainStyle = css` border-radius: 10px; border: 1px solid var(--accent-high); margin: 5px; + transition: background-color 0.3s ease-in-out; } - .item__listItem--followup:hover, - .item__listItem--followup:focus { - background: var(--accent-lighter); + .items__listItem--followup:hover, + .items__listItem--followup:focus { + background-color: var(--accent-lighter); cursor: pointer; } .items__listItem--citation { @@ -587,18 +587,4 @@ export const mainStyle = css` animation: spinneranimation 1s linear infinite; margin-right: 10px; } - .dot { - width: 10px; - height: 10px; - margin: 0 5px; - background-color: var(--accent-lighter); - border-radius: 50%; - animation: chatloadinganimation 1.5s infinite; - } - .dot:nth-child(2) { - animation-delay: 0.5s; - } - .dot:nth-child(3) { - animation-delay: 1s; - } `; From 5b080af9cc472bd468fd3a4fe4cea88b64948d20 Mon Sep 17 00:00:00 2001 From: Natalia Venditto Date: Tue, 7 Nov 2023 18:47:22 +0100 Subject: [PATCH 5/7] fix: disable buttons for previous debuggin (pending bugfix) --- packages/chat-component/src/main.ts | 25 ++++++++++++++++++++++--- packages/chat-component/src/style.ts | 6 ++++-- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts index 9074450a..9b908609 100644 --- a/packages/chat-component/src/main.ts +++ b/packages/chat-component/src/main.ts @@ -1,7 +1,7 @@ /* eslint-disable unicorn/template-indent */ import { LitElement, html } from 'lit'; import DOMPurify from 'dompurify'; -import { customElement, property, query } from 'lit/decorators.js'; +import { customElement, property, query, queryAll } from 'lit/decorators.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { chatHttpOptions, globalConfig, requestOptions } from './config/global-config.js'; import { getAPIResponse } from './core/http/index.js'; @@ -65,6 +65,12 @@ export class ChatComponent extends LitElement { @query('#chat-list-footer') chatFooter!: HTMLElement; + @queryAll('.debugButton') + debugButtonList!: NodeListOf; + + @queryAll('.copyButton') + copyButtonList!: NodeListOf; + // Default prompts to display in the chat @property({ type: Boolean }) isDisabled = false; @@ -156,6 +162,18 @@ export class ChatComponent extends LitElement { this.chatThoughts = result.thoughts; this.chatDataPoints = result.data_points; this.canShowThoughtProcess = true; + // this is a temporary fix until we have chat history and can use the corresponding + // datapoints from the history + // TODO: remove this once we have chat history + const buttons = [this.debugButtonList, this.copyButtonList]; + for (const buttonList of buttons) { + if (buttonList && buttonList.length >= 2) { + for (const button of buttonList) { + button.disabled = true; + buttonList[buttonList.length - 1].disabled = false; + } + } + } return true; } @@ -200,6 +218,7 @@ export class ChatComponent extends LitElement { handleDefaultPromptClick(question: string, event?: Event): void { event?.preventDefault(); this.questionInput.value = DOMPurify.sanitize(question); + this.hideThoughtProcess(event!); this.currentQuestion = this.questionInput.value; } @@ -508,7 +527,7 @@ export class ChatComponent extends LitElement { : html`