From 022dc040237e0faafccb4a709378a627337892e4 Mon Sep 17 00:00:00 2001 From: Lukas Podmelle Date: Wed, 10 Jan 2024 10:33:14 +0100 Subject: [PATCH 1/9] Redesign --- package-lock.json | 2 +- samples/feedyou/newdesign.html | 30 + src/App/App.tsx | 4 +- .../templates/ExpandableTemplate/Header.tsx | 113 +- .../Signature/Signature.tsx | 103 +- .../Signature/SignatureLink.tsx | 40 +- .../Signature/SignatureTemplate.tsx | 17 +- src/Shell.tsx | 488 +++---- src/scss/botchat-redesign.scss | 1122 +++++++++++++++++ src/themes/ExpandableBarTheme.tsx | 6 +- src/themes/ExpandableKnobTheme.tsx | 15 +- src/themes/ExpandableKnobThemeNew.tsx | 21 + src/themes/SidebarTheme.tsx | 14 +- src/themes/index.ts | 65 +- typing-indicator.gif | Bin 0 -> 14372 bytes 15 files changed, 1664 insertions(+), 376 deletions(-) create mode 100644 samples/feedyou/newdesign.html create mode 100644 src/scss/botchat-redesign.scss create mode 100644 src/themes/ExpandableKnobThemeNew.tsx create mode 100644 typing-indicator.gif diff --git a/package-lock.json b/package-lock.json index 9b278a2f98..f2b49f66be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@feedyou-ai/feedbot-webchat-v0", - "version": "0.14.1-10", + "version": "0.14.1-12", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/samples/feedyou/newdesign.html b/samples/feedyou/newdesign.html new file mode 100644 index 0000000000..41bcd8798d --- /dev/null +++ b/samples/feedyou/newdesign.html @@ -0,0 +1,30 @@ + + + + + + Chatbot + + + + + + + + diff --git a/src/App/App.tsx b/src/App/App.tsx index 9ee0b42cd7..d3035ca4d5 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -10,7 +10,7 @@ import { generateUserId } from '../utils/generateUserId' export type AppProps = ChatProps & { theme?: Theme; // option to override theme settings from remote config defaultTheme?: Theme; // option to set default template when no remote config found (on default microsite for example) - header?: { textWhenCollapsed?: string; text: string, extraHtml?: string }; + header?: { textWhenCollapsed?: string; text: string, extraHtml?: string, image?: string }; channel?: { index?: number, id?: string }; autoExpandTimeout?: number; enableScreenshotUpload?: boolean; @@ -213,7 +213,7 @@ export const App = async (props: AppProps, container?: HTMLElement) => { // FEEDYOU configurable theming if (props.theme || !container) { - const theme = { mainColor: "#D83838", ...props.theme }; + const theme = { mainColor: "#0063f8", ...props.theme }; props.theme && (props.theme.enableScreenshotUpload = !!props.enableScreenshotUpload) const themeStyle = document.createElement("style"); themeStyle.type = "text/css"; diff --git a/src/App/templates/ExpandableTemplate/Header.tsx b/src/App/templates/ExpandableTemplate/Header.tsx index 0780a63180..2d25725345 100644 --- a/src/App/templates/ExpandableTemplate/Header.tsx +++ b/src/App/templates/ExpandableTemplate/Header.tsx @@ -1,11 +1,12 @@ -import * as React from 'react' -import { AppProps } from '../../App' +import * as React from 'react'; +import { AppProps } from '../../App'; +import { Theme } from '../../../themes'; export type Props = { - appProps: AppProps - onClick(): void - isCollapsed: boolean -} + appProps: AppProps; + onClick(): void; + isCollapsed: boolean; +}; export const Header: React.StatelessComponent = ({ appProps, @@ -13,39 +14,79 @@ export const Header: React.StatelessComponent = ({ isCollapsed, }) => { const { - theme: { mainColor }, + theme: { mainColor, template }, header: { extraHtml }, - } = appProps - - const backgroundColor = mainColor || '#e51836' - const title = getTitle(appProps, isCollapsed) - - + } = appProps; + + let backgroundColor; + {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} + if (template.type !== 'expandable-knob') { + backgroundColor = mainColor || '#e51836'; + } + + const title = getTitle(appProps, isCollapsed); + const avatar = + template.avatar || + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18Z' fill='%23F7F9FB'/%3E%3Cpath d='M14.024 18.026h-.003v-.005h.004l.001.002v.001l-.002.002Zm3.978 0v-.001l.001-.002v-.002h-.006v.004l.002.001h.003Zm3.976 0h-.003l-.001-.002v-.002l.001-.001h.004v.003l-.001.002Z' fill='%23385B75'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.718 9.023a8.912 8.912 0 0 1 5.669 2.59 8.91 8.91 0 0 1-10.583 14.12l-3.073 1.182a1.274 1.274 0 0 1-1.646-1.646l1.182-3.073a8.91 8.91 0 0 1 8.45-13.173ZM14.023 17a1.024 1.024 0 1 0 0 2.047 1.024 1.024 0 0 0 0-2.047Zm3.409.172a1.023 1.023 0 1 1 1.136 1.702 1.023 1.023 0 0 1-1.136-1.702ZM21.977 17a1.023 1.023 0 1 0 0 2.047 1.023 1.023 0 0 0 0-2.047Z' fill='%23385B75'/%3E%3C/svg%3E"; + return ( -
- - {title} - - - {extraHtml && } - +
+
+ {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} + {template.type === 'expandable-knob' ? ( +
+
+ ) : null} +
+ {title} + {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} + {template.type === 'expandable-knob' ? ( + + {/* LP: for dev; pak text odstranit */} + S čím vám dnes mohu pomoci? + {template.supportiveTitle} + + ): null} +
+
+ + {extraHtml && ( + + )} + e.preventDefault()} - className="feedbot-minimize" - href="#" - >_ + onClick={(e) => e.preventDefault()} + className='feedbot-minimize' + href='#'> + {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} + {template.type === 'expandable-knob' ? ( + + + + + + ) : ( + '_' + )} +
- ) -} + ); +}; const getTitle = (props: AppProps, isCollapsed: boolean) => { - const { text, textWhenCollapsed } = props.header - - const titleWhenExpanded = text || 'Chatbot' - const titleWhenCollapsed = textWhenCollapsed || titleWhenExpanded - const titleToShow = isCollapsed ? titleWhenCollapsed : titleWhenExpanded - - return titleToShow -} - -export type HeaderProps = Props + const { text, textWhenCollapsed } = props.header; + + const titleWhenExpanded = text || 'Chatbot'; + const titleWhenCollapsed = textWhenCollapsed || titleWhenExpanded; + const titleToShow = isCollapsed ? titleWhenCollapsed : titleWhenExpanded; + + return titleToShow; +}; + +export type HeaderProps = Props; diff --git a/src/App/templates/ExpandableTemplate/Signature/Signature.tsx b/src/App/templates/ExpandableTemplate/Signature/Signature.tsx index c90ac10954..b43f797cc5 100644 --- a/src/App/templates/ExpandableTemplate/Signature/Signature.tsx +++ b/src/App/templates/ExpandableTemplate/Signature/Signature.tsx @@ -1,64 +1,67 @@ -import * as React from 'react' -import { SignatureLink } from './SignatureLink' -import { Theme } from '../../../../themes' -import { SignatureTemplate } from './SignatureTemplate' +import * as React from 'react'; +import { SignatureLink } from './SignatureLink'; +import { Theme } from '../../../../themes'; +import { SignatureTemplate } from './SignatureTemplate'; -type SignatureSchema = Theme['signature'] -const FEEDYOU_LOGO_IMG_SRC = 'https://cdn.feedyou.ai/webchat/feedyou_logo_red.png' +type SignatureSchema = Theme['signature']; +const FEEDYOU_LOGO_IMG_SRC = + 'https://cdn.feedyou.ai/webchat/feedyou_logo_red.png'; export type Props = { - signature: SignatureSchema - botId: string -} + signature: SignatureSchema; + botId: string; +}; -const getLinkQueryString = (botId: string) => `?utm_source=webchat&utm_medium=chatbot&utm_campaign=${botId}` +const getLinkQueryString = (botId: string) => + `?utm_source=webchat&utm_medium=chatbot&utm_campaign=${botId}`; -export const Signature: React.StatelessComponent = ({ signature, botId }) => { - const { partnerLogoUrl, partnerLinkUrl, partnerLogoStyle, mode } = signature - const attachQueryStringToUrl = (url: string) => `${url}${getLinkQueryString(botId)}` - - const enhancedFeedyouUrl = attachQueryStringToUrl('https://feedyou.ai') - const enhancedPartnerUrl = partnerLinkUrl ? attachQueryStringToUrl(partnerLinkUrl) : enhancedFeedyouUrl - - const feedyouLink = - - const partnerLink = - - if(mode === 'none') { - return null +export const Signature: React.StatelessComponent = ({ + signature, + botId, +}) => { + const { partnerLogoUrl, partnerLinkUrl, partnerLogoStyle, mode } = + signature; + const attachQueryStringToUrl = (url: string) => + `${url}${getLinkQueryString(botId)}`; + + const enhancedFeedyouUrl = attachQueryStringToUrl('https://feedyou.ai'); + const enhancedPartnerUrl = partnerLinkUrl + ? attachQueryStringToUrl(partnerLinkUrl) + : enhancedFeedyouUrl; + + const feedyouLink = ( + + ); + + const partnerLink = ( + + ); + + if (mode === 'none') { + return null; } - - if (partnerLogoUrl && mode === 'both') { + + if (mode === 'both') { return ( {partnerLink} -
&
+
&
{feedyouLink} - ) + ); } - - if (partnerLogoUrl && mode === 'partner') { - return ( - - {partnerLink} - - ) + + if (mode === 'partner') { + return {partnerLink}; } - - return ( - - {feedyouLink} - - ) -} -export type SignatureProps = Props + return {feedyouLink}; +}; + +export type SignatureProps = Props; diff --git a/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx b/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx index c6b587f913..1edc3d8af1 100644 --- a/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx +++ b/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx @@ -1,28 +1,36 @@ -import * as React from 'react' -import cx from 'classnames' -import { CustomStylesForCssClass } from '../../../CustomStylesForCssClass' +import * as React from 'react'; +import cx from 'classnames'; +import { CustomStylesForCssClass } from '../../../CustomStylesForCssClass'; export type Props = { - href: string, - imgSrc: string - className?: string - customStyles?: string -} + href: string; + imgSrc?: string; + className?: string; + customStyles?: string; + text?: string; +}; export const SignatureLink: React.StatelessComponent = ({ href, imgSrc, className, customStyles, + text, }) => { return ( - - Logo - {className && customStyles && - } + + {imgSrc ? : text} + {className && customStyles && ( + + )} - ) -} + ); +}; - -export type SignatureLinkProps = Props +export type SignatureLinkProps = Props; diff --git a/src/App/templates/ExpandableTemplate/Signature/SignatureTemplate.tsx b/src/App/templates/ExpandableTemplate/Signature/SignatureTemplate.tsx index 12a439fe13..eb508dd803 100644 --- a/src/App/templates/ExpandableTemplate/Signature/SignatureTemplate.tsx +++ b/src/App/templates/ExpandableTemplate/Signature/SignatureTemplate.tsx @@ -1,17 +1,16 @@ -import * as React from 'react' +import * as React from 'react'; export type Props = { - botId: string -} + botId: string; +}; export const SignatureTemplate: React.StatelessComponent = ({ children }) => { return ( -
-
-
with ❤️ by
+
+
+
powered by
{children}
- ) -} - + ); +}; diff --git a/src/Shell.tsx b/src/Shell.tsx index 66e4a3ebab..c1b8305d1b 100644 --- a/src/Shell.tsx +++ b/src/Shell.tsx @@ -4,255 +4,307 @@ import { User } from 'botframework-directlinejs'; import { classList } from './Chat'; import { Dispatch, connect } from 'react-redux'; import { Strings } from './Strings'; -import { Speech } from './SpeechModule' -import { ChatActions, ListeningState, sendMessage, sendFiles, sendScreenshot } from './Store'; +import { Speech } from './SpeechModule'; +import { + ChatActions, + ListeningState, + sendMessage, + sendFiles, + sendScreenshot, +} from './Store'; -import * as html2canvas from 'html2canvas' +import * as html2canvas from 'html2canvas'; interface Props { - inputText: string, - strings: Strings, - listeningState: ListeningState, - showUploadButton: boolean, - uploadCapture: 'image/*' | 'video/*' | 'audio/*' | string, - disableInput: boolean + inputText: string; + strings: Strings; + listeningState: ListeningState; + showUploadButton: boolean; + uploadCapture: 'image/*' | 'video/*' | 'audio/*' | string; + disableInput: boolean; - onChangeText: (inputText: string) => void + onChangeText: (inputText: string) => void; - sendMessage: (inputText: string) => void, - sendFiles: (files: FileList) => void, - sendScreenshot: (screen: string) => void, - stopListening: () => void, - startListening: () => void + sendMessage: (inputText: string) => void; + sendFiles: (files: FileList) => void; + sendScreenshot: (screen: string) => void; + stopListening: () => void; + startListening: () => void; } export interface ShellFunctions { - focus: (appendKey?: string) => void + focus: (appendKey?: string) => void; } class ShellContainer extends React.Component implements ShellFunctions { - private textInput: HTMLTextAreaElement; - private fileInput: HTMLInputElement; + private textInput: HTMLTextAreaElement; + private fileInput: HTMLInputElement; - componentDidUpdate(prevProps: Props) { - if (prevProps.disableInput === true && this.props.disableInput === false) { - this.textInput.focus(); - } - } + componentDidUpdate(prevProps: Props) { + if ( + prevProps.disableInput === true && + this.props.disableInput === false + ) { + this.textInput.focus(); + } + } - private sendMessage() { - if (this.props.inputText.trim().length > 0) { - this.props.sendMessage(this.props.inputText); - } - } + private sendMessage() { + if (this.props.inputText.trim().length > 0) { + this.props.sendMessage(this.props.inputText); + } + } - private handleSendButtonKeyPress(evt: React.KeyboardEvent) { - if (evt.key === 'Enter' || evt.key === ' ') { - evt.preventDefault(); - this.sendMessage(); - this.textInput.focus(); - } - } + private handleSendButtonKeyPress( + evt: React.KeyboardEvent + ) { + if (evt.key === 'Enter' || evt.key === ' ') { + evt.preventDefault(); + this.sendMessage(); + this.textInput.focus(); + } + } - private handleUploadButtonKeyPress(evt: React.KeyboardEvent) { - if (evt.key === 'Enter' || evt.key === ' ') { - evt.preventDefault(); - this.fileInput.click(); - } - } + private handleUploadButtonKeyPress( + evt: React.KeyboardEvent + ) { + if (evt.key === 'Enter' || evt.key === ' ') { + evt.preventDefault(); + this.fileInput.click(); + } + } - private onKeyPress(e: React.KeyboardEvent) { - if (e.key === 'Enter' && !e.shiftKey) { - this.sendMessage(); - e.stopPropagation() - e.preventDefault() - } - } + private onKeyPress(e: React.KeyboardEvent) { + if (e.key === 'Enter' && !e.shiftKey) { + this.sendMessage(); + e.stopPropagation(); + e.preventDefault(); + } + } - private onClickSend() { - this.sendMessage(); - } + private onClickSend() { + this.sendMessage(); + } - private onChangeFile() { - this.props.sendFiles(this.fileInput.files); - this.fileInput.value = null; - this.textInput.focus(); - } + private onChangeFile() { + this.props.sendFiles(this.fileInput.files); + this.fileInput.value = null; + this.textInput.focus(); + } - private onTextInputFocus() { - if (this.props.listeningState === ListeningState.STARTED) { - this.props.stopListening(); - } - } + private onTextInputFocus() { + if (this.props.listeningState === ListeningState.STARTED) { + this.props.stopListening(); + } + } - private onClickMic() { - if (this.props.listeningState === ListeningState.STARTED) { - this.props.stopListening(); - } else if (this.props.listeningState === ListeningState.STOPPED) { - this.props.startListening(); - } - } + private onClickMic() { + if (this.props.listeningState === ListeningState.STARTED) { + this.props.stopListening(); + } else if (this.props.listeningState === ListeningState.STOPPED) { + this.props.startListening(); + } + } - public focus(appendKey?: string) { - this.textInput.focus(); + public focus(appendKey?: string) { + this.textInput.focus(); - if (appendKey) { - this.props.onChangeText(this.props.inputText + appendKey); - } - } + if (appendKey) { + this.props.onChangeText(this.props.inputText + appendKey); + } + } - private async takeScreenshot() { - const screen = await html2canvas(document.body, { allowTaint: true, useCORS: true }).then((canvas) => { - const dataURI = canvas.toDataURL("image/png"); + private async takeScreenshot() { + const screen = await html2canvas(document.body, { + allowTaint: true, + useCORS: true, + }).then((canvas) => { + const dataURI = canvas.toDataURL('image/png'); - return dataURI - }) - this.props.sendScreenshot(screen); - } + return dataURI; + }); + this.props.sendScreenshot(screen); + } - render() { - const className = classList( - 'wc-console', - this.props.inputText.length > 0 && 'has-text', - this.props.showUploadButton && 'has-upload-button', - this.props.disableInput && 'disable-input' - ); + render() { + const className = classList( + 'wc-console', + this.props.inputText.length > 0 && 'has-text', + this.props.showUploadButton && 'has-upload-button', + this.props.disableInput && 'disable-input' + ); - const showMicButton = this.props.listeningState !== ListeningState.STOPPED || (Speech.SpeechRecognizer.speechIsAvailable() && !this.props.inputText.length); + const showMicButton = + this.props.listeningState !== ListeningState.STOPPED || + (Speech.SpeechRecognizer.speechIsAvailable() && + !this.props.inputText.length); - const sendButtonClassName = classList( - 'wc-send', - showMicButton && 'hidden' - ); + const sendButtonClassName = classList( + 'wc-send', + showMicButton && 'hidden' + ); - const micButtonClassName = classList( - 'wc-mic', - !showMicButton && 'hidden', - this.props.listeningState === ListeningState.STARTED && 'active', - this.props.listeningState !== ListeningState.STARTED && 'inactive' - ); + const micButtonClassName = classList( + 'wc-mic', + !showMicButton && 'hidden', + this.props.listeningState === ListeningState.STARTED && 'active', + this.props.listeningState !== ListeningState.STARTED && 'inactive' + ); - const placeholder = this.props.listeningState === ListeningState.STARTED ? this.props.strings.listeningIndicator : this.props.strings.consolePlaceholder; + const placeholder = + this.props.listeningState === ListeningState.STARTED + ? this.props.strings.listeningIndicator + : this.props.strings.consolePlaceholder; - return ( -
- { - this.props.showUploadButton && - - } - { - this.props.showUploadButton && - this.fileInput = input} - // multiple - onChange={() => this.onChangeFile()} - aria-label={this.props.strings.uploadFile} - role="button" - capture={!!this.props.uploadCapture} - accept={this.props.uploadCapture} - /> - } - { - this.props.showUploadButton && - - } -
- -
- - -
- ); - } + return ( +
+ {this.props.showUploadButton && ( + + )} + {this.props.showUploadButton && ( + (this.fileInput = input)} + // multiple + onChange={() => this.onChangeFile()} + aria-label={this.props.strings.uploadFile} + role='button' + capture={!!this.props.uploadCapture} + accept={this.props.uploadCapture} + /> + )} + {this.props.showUploadButton && ( + + )} +
+ +
+ + +
+ ); + } } export const Shell = connect( - (state: ChatState) => ({ - // passed down to ShellContainer - inputText: state.shell.input, - showUploadButton: state.format.showUploadButton, - uploadCapture: state.format.uploadCapture, - disableInput: state.format.disableInput, - strings: state.format.strings, - // only used to create helper functions below - locale: state.format.locale, - user: state.connection.user, - listeningState: state.shell.listeningState - }), { - // passed down to ShellContainer - onChangeText: (input: string) => ({ type: 'Update_Input', input, source: "text" } as ChatActions), - stopListening: () => ({ type: 'Listening_Stopping' }), - startListening: () => ({ type: 'Listening_Starting' }), - // only used to create helper functions below - sendMessage, - sendFiles, - sendScreenshot -}, (stateProps: any, dispatchProps: any, ownProps: any): Props => ({ - // from stateProps - inputText: stateProps.inputText, - showUploadButton: stateProps.showUploadButton, - uploadCapture: stateProps.uploadCapture, - disableInput: stateProps.disableInput, - strings: stateProps.strings, - listeningState: stateProps.listeningState, - // from dispatchProps - onChangeText: dispatchProps.onChangeText, - // helper functions - sendMessage: (text: string) => dispatchProps.sendMessage(text, stateProps.user, stateProps.locale), - sendFiles: (files: FileList) => dispatchProps.sendFiles(files, stateProps.user, stateProps.locale), - sendScreenshot: (screen: string) => dispatchProps.sendScreenshot(screen, stateProps.user, stateProps.locale), - startListening: () => dispatchProps.startListening(), - stopListening: () => dispatchProps.stopListening() -}), { - withRef: true -} + (state: ChatState) => ({ + // passed down to ShellContainer + inputText: state.shell.input, + showUploadButton: state.format.showUploadButton, + uploadCapture: state.format.uploadCapture, + disableInput: state.format.disableInput, + strings: state.format.strings, + // only used to create helper functions below + locale: state.format.locale, + user: state.connection.user, + listeningState: state.shell.listeningState, + }), + { + // passed down to ShellContainer + onChangeText: (input: string) => + ({ type: 'Update_Input', input, source: 'text' } as ChatActions), + stopListening: () => ({ type: 'Listening_Stopping' }), + startListening: () => ({ type: 'Listening_Starting' }), + // only used to create helper functions below + sendMessage, + sendFiles, + sendScreenshot, + }, + (stateProps: any, dispatchProps: any, ownProps: any): Props => ({ + // from stateProps + inputText: stateProps.inputText, + showUploadButton: stateProps.showUploadButton, + uploadCapture: stateProps.uploadCapture, + disableInput: stateProps.disableInput, + strings: stateProps.strings, + listeningState: stateProps.listeningState, + // from dispatchProps + onChangeText: dispatchProps.onChangeText, + // helper functions + sendMessage: (text: string) => + dispatchProps.sendMessage(text, stateProps.user, stateProps.locale), + sendFiles: (files: FileList) => + dispatchProps.sendFiles(files, stateProps.user, stateProps.locale), + sendScreenshot: (screen: string) => + dispatchProps.sendScreenshot( + screen, + stateProps.user, + stateProps.locale + ), + startListening: () => dispatchProps.startListening(), + stopListening: () => dispatchProps.stopListening(), + }), + { + withRef: true, + } )(ShellContainer); diff --git a/src/scss/botchat-redesign.scss b/src/scss/botchat-redesign.scss new file mode 100644 index 0000000000..04fff57e7b --- /dev/null +++ b/src/scss/botchat-redesign.scss @@ -0,0 +1,1122 @@ +@import 'includes/card-size'; +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); + +// Colors +$black: #16364d; +$white: #ffffff; +$silver: #c7d0d7; +$silverLight: #f7f9fb; +$silverMedium: #dae0e5; +$grey: #628198; +$greyDark: #385b75; +$blue: #0063f8; +$blueLight: #ebf6ff; +$blueDark: #0a4fbd; +$shadow: rgba(0, 0, 0, 0.05); +$c_messageFromMe: $blue; +$c_messageFromThem: $white; + +// Settings +$chatWindowWidth: 420px; +$chatWindowHeight: 620px; + +$actionsHeight: 40px; +$consoleHeight: 70px; + +$fontFamily: 'Inter', sans-serif; +$fontSize: 15px; + +$headerTotalHeight: 38px; + +$actionTransition: 0.2s cubic-bezier(0, 0, 0.5, 1); + +$card_narrow: 216px; +$card_normal: 320px; +$card_wide: 416px; + +$card_borderWidth: 1px; +$card_padding: 8px; + +.feedbot-wrapper { + width: $chatWindowWidth; + height: $chatWindowHeight; + bottom: 24px; + right: 24px; + border-radius: 10px; + background-color: $white; + min-width: 275px; + max-width: 87%; + max-height: 90%; + position: fixed; + z-index: 100000; +} +.feedbot-wrapper:not(.collapsed) { + border: 1px solid $silverMedium; +} +.feedbot-header { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + color: $greyDark; + z-index: 10; + padding: 18px; + cursor: pointer; + font-size: 1em; + display: flex; + align-items: center; + font-family: $fontFamily; +} +.feedbot-header .feedbot-title { + font-weight: 500; + flex-grow: 1; +} +.feedbot-header .feedbot-minimize { + font-weight: bolder; + font-family: Verdana; + color: $greyDark; + font-size: 1.2em; + line-height: 0.9em; +} +.feedbot-wrapper .wc-chatview-panel { + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; +} +.wc-app .wc-chatview-panel { + top: 75px; +} +.wc-app .wc-header { + display: none; +} +.wc-message-wrapper:not([data-activity-id='retry']) .wc-message-from { + display: none; +} +.wc-carousel + .wc-hscroll + > ul + > li + > .wc-card + > div + > .ac-container + > .ac-container + .ac-image { + border-radius: 10px 10px 0 0; +} +.wc-carousel .wc-hscroll ul { + display: flex; + align-items: stretch; +} +.wc-carousel .wc-hscroll > ul > li > .wc-card, +.wc-carousel .wc-hscroll > ul > li > .wc-card > div { + height: 100%; +} +.feedbot-wrapper .wc-adaptive-card, +.feedbot-wrapper .wc-card { + max-width: 100%; +} +.wc-carousel .wc-hscroll > ul > li > .wc-card > div > .ac-container { + padding: 0 0 10px 0 !important; + height: 100%; + justify-content: space-between !important; +} +.wc-carousel + .wc-hscroll + > ul + > li + > .wc-card + > div + > .ac-container + > .ac-container + .ac-textBlock { + padding: 0px 13px; + white-space: unset !important; + text-overflow: unset !important; + overflow: unset !important; + font-family: $fontFamily !important; +} +.wc-carousel .wc-hscroll > ul > li > .wc-card > div .ac-actionSet { + margin: 4px 13px 13px !important; +} +.feedbot-wrapper .wc-app .wc-card button, +.feedbot-wrapper .wc-app .wc-card button > div { + text-overflow: initial !important; + white-space: initial !important; +} +.feedbot-wrapper .wc-suggested-actions .wc-hscroll > ul > li button:focus, +.feedbot-wrapper .wc-console .wc-mic, +.wc-console .wc-send, +.feedbot-wrapper .wc-app .wc-card button { + outline: 0; +} +.wc-carousel .wc-hscroll > ul > li { + padding: 4px !important; +} +.feedbot-wrapper.collapsed { + border-radius: 40px; + width: 75px; + min-width: auto; + height: 75px; +} +.feedbot-wrapper.collapsed .feedbot-header { + border-radius: 40px; + height: 100%; + width: 100%; + padding: 0px; + text-indent: 999%; + white-space: nowrap; + overflow: hidden; + font-size: 0px; + /* background image (chat icon) is set in redesign template */ + background-size: 45px; + background-position: center; + background-repeat: no-repeat; + transition: transform 0.3s ease; +} +.feedbot-wrapper.collapsed .feedbot-header:hover { + transform: scale(1.05); + transition: transform 0.3s ease; +} +.feedbot-wrapper.collapsed .wc-chatview-panel { + display: none; +} +.feedbot-wrapper.collapsed .feedbot-signature, +.feedbot-wrapper.collapsed .feedbot-header .feedbot-extra-html, +.feedbot-disabled div.feedbot { + display: none; +} +.wc-list.tiles .ac-actionSet { + flex-direction: row !important; + flex-wrap: wrap; + justify-content: center; +} + +.wc-list.tiles .ac-container { + padding-top: 0px; + margin-top: -5px; +} + +.wc-list.tiles .ac-pushButton { + flex-basis: 44% !important; + min-height: 120px !important; + margin: 3% !important; + flex-direction: column !important; + position: relative; + padding: 16px; + top: 0; +} + +.feedbot-wrapper .wc-app .wc-list.tiles .wc-card .ac-pushButton:active { + background-color: unset; +} + +.wc-list.tiles .ac-pushButton img { + width: 36px !important; + height: 36px !important; + margin-right: 0px !important; + margin-bottom: 10px !important; +} + +.wc-list.tiles .ac-pushButton div { + overflow: unset !important; + text-overflow: unset !important; + white-space: unset !important; +} + +@media (max-width: 450px) { + .feedbot-wrapper .wc-list.tiles .wc-card { + border: none; + width: 100%; + } + .wc-list.tiles .ac-pushButton { + min-height: 95px !important; + } + .wc-list.tiles .ac-container { + padding: 0 !important; + margin-top: 0 !important; + } +} +.wc-upload-screenshot { + display: none !important; +} +.feedbot-wrapper.collapsed .feedbot-signature { + display: none; +} + +.feedbot-wrapper .feedbot-signature { + position: absolute; + bottom: -23px; + font-size: 13px; + right: -5px; + opacity: 0.3; + font-family: $fontFamily; + + height: 22px; + display: block; + align-items: center; + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -ms-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; +} + +.feedbot-wrapper .feedbot-signature:hover { + opacity: 0.8; +} + +.feedbot-signature a { + transition: 0.3s; + color: black; + text-decoration: none; + margin: 0 4px; + display: flex; + align-items: center; +} + +.feedbot-signature a:hover { + cursor: pointer; +} + +.feedbot-signature a img { + height: 22px; +} + +.feedbot-signature-row { + display: flex; + height: 100%; +} +/* +* +* +/* reset */ +body .wc-app, +.wc-app button, +.wc-app input, +.wc-app textarea, +.popup-message { + font-family: $fontFamily; + font-size: $fontSize; +} + +.wc-app button { + background-color: $white; + border: 1px solid $silverMedium; + border-radius: 1px; + color: $blueDark; + cursor: pointer; + transition: color 0.2s ease, background-color 0.2s ease; +} + +.wc-app h1, +.wc-app h2, +.wc-app h3, +.wc-app h4, +.wc-app p, +.wc-app ul, +.wc-app ol { + margin: 0; + padding: 0; +} + +.wc-app audio, +.wc-app video { + display: block; +} + +/* docking */ + +.wc-hidden { + visibility: hidden; +} + +.wc-time { + color: $silver; + margin-bottom: 10px; +} + +.wc-message-groups { + background: $silverLight; + bottom: $consoleHeight; + left: 0; + transform: translateY(0); + outline: 0; + overflow-x: hidden; + overflow-y: scroll; + padding: 10px 5px 0px 10px; + position: absolute; + right: 0; + top: 0; + transition: transform $actionTransition; + border-top: 1px solid $silverMedium; + + &.no-header { + top: 0; + } +} + +.wc-message-group-content { + overflow: hidden; +} + +.wc-suggested-actions { + background-color: $silverLight; + bottom: $consoleHeight; + height: 0; + left: 0; + overflow: hidden; + position: absolute; + right: 0; + transition: height $actionTransition; + + .wc-hscroll > ul { + height: $actionsHeight; + padding: 0px 18px; + + > li { + display: inline-block; + margin-right: 6px; + max-width: 40%; + + button { + background-color: $white; + color: $blueDark; + min-height: 40px; + overflow: hidden; + padding: 0 16px; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + border-radius: 5px; + border-width: 1px; + font-weight: bold; + } + + button:focus, + button:hover { + background-color: $blueLight; + border-color: $blueDark; + border-width: 1px; + color: $blueDark; + } + + button:active { + background-color: $blueLight; + border-color: $blueDark; + border-width: 1px; + color: $blueDark; + } + } + } + + button.scroll { + background-color: $silver; + height: $actionsHeight; + overflow: hidden; + padding: 0; + position: absolute; + top: 0; + width: 28px; + } + + button.scroll:disabled { + display: none; + } + + button.scroll:focus, + button.scroll:hover { + background-color: $grey; + } + + button.scroll svg { + fill: $white; + + //TODO: use proper svg coords in the path data + path { + transform: translateY(6px); + } + } + + button.scroll.previous { + left: 0; + } + + button.scroll.next { + right: 0; + } +} + +.wc-message-pane.show-actions { + .wc-message-groups { + top: $headerTotalHeight + $actionsHeight; + transform: translateY(-$actionsHeight); + } + .wc-suggested-actions { + height: $actionsHeight; + } +} + +/* views */ + +.wc-chatview-panel { + overflow: hidden; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + background: $silverLight; +} + +/* messages */ + +.wc-message-wrapper { + animation: animationFrames 2s; + animation-iteration-count: 1; + clear: both; + margin-bottom: 10px; + overflow: hidden; + position: relative; + /*transition: max-height 2s ease-in-out;*/ +} + +@keyframes animationFrames { + 0% { + /*max-height: 0;*/ + opacity: 0; + } + 20% { + opacity: 1; + } + 100% { + /*max-height: 2000px;*/ + } +} + +.wc-message { + position: relative; +} + +.wc-message-wrapper.carousel .wc-message { + max-width: none; + padding-right: 8px; +} + +.wc-message svg.wc-message-callout { + display: none; +} + +.wc-message-content { + box-shadow: 0px 1px 2px 0px $shadow; + padding: 13px; + word-break: break-word; + border: 1px solid $silverMedium; +} + +.wc-message-content.clickable { + cursor: pointer; +} + +.wc-message-content.selected { + box-shadow: 0px 1px 1px 0px $blueDark; +} + +.wc-message-content img { + max-height: 320px; + max-width: 100%; + border-radius: 4px; +} + +.wc-message-content .video iframe { + border: 0; +} + +.wc-message-content audio, +.wc-message-content video { + max-width: 100%; +} + +.wc-message-content audio + h1, +.wc-message-content video + h1 { + margin-top: 11px; +} + +.wc-message-from { + clear: both; + color: $silver; + font-size: 11px; + margin-top: 5px; +} + +/* cards */ + +.wc-card { + background-color: $white; + border-radius: 10px; + border: 1px solid $silverMedium; + + .non-adaptive-content { + margin: $card_padding $card_padding 0 $card_padding; + } + + button { + border: 1px solid $silverMedium; + color: $blueDark; + background: $white; + font-weight: bold; + min-height: 40px; + border-radius: 5px; + flex: auto; + } + + button:hover { + background-color: $blueLight; + border: 2px solid $blueDark; + color: $blueDark; + } + + button:active { + background-color: $blueLight; + border: 2px solid $blueDark; + color: $blueDark; + } + + &.receipt table { + border-collapse: collapse; + width: 100%; + } + + &.receipt th, + &.receipt td { + text-align: right; + vertical-align: top; + } + + &.receipt th:first-child, + &.receipt td:first-child { + text-align: left; + } + + &.receipt th { + color: $grey; + font-size: inherit; + font-weight: normal; + line-height: 1.75; + } + + &.receipt thead tr:last-child th { + padding-bottom: 16px; + } + + &.receipt th[colspan='2'] { + color: inherit; + font-size: 15px; + font-weight: 700; + } + + &.receipt td { + padding: 4px 8px 0 8px; + } + + &.receipt td img { + float: left; + margin: 5px 8px 8px 0; + max-height: 50px; + max-width: 50px; + } + + &.receipt div.title { + font-weight: bolder; + } + + &.receipt div.subtitle { + font-weight: lighter; + } + + &.receipt tbody tr, + &.receipt tfoot tr { + border-top: 1px solid $silver; + } + + &.receipt tbody tr:first-child, + &.receipt tfoot tr:first-child { + border-top-width: 2px; + } + + &.receipt tfoot td { + line-height: 2.25; + } + + &.receipt tfoot .total { + font-weight: bold; + } + + &.thumbnail img { + float: right; + margin-bottom: 10px; + margin-left: 10px; + width: 100px; + } + + &.signin h1 { + margin: 10px 24px 16px 14px; + } + + &.error { + text-align: center; + + .error-icon { + fill: $silver; + height: 56px; + margin-bottom: 2px; + margin-top: 20px; + padding-left: 12px; + } + + .error-text { + color: $silver; + font-weight: 600; + letter-spacing: 0.5px; + margin-bottom: 20px; + text-align: inherit; + } + } +} + +/* alternate chat sizes */ + +.wc-message { + max-width: 91%; +} + +@include card-size($card_normal); + +.wc-wide { + @include card-size($card_wide); +} + +.wc-narrow { + @include card-size($card_narrow); +} + +/* adaptive card adjustments from wc-card */ +.wc-adaptive-card { + p { + margin-left: 0; + margin-right: 0; + } +} + +/* list */ +.wc-list { + .ac-container { + padding: 0 !important; + } +} +.wc-list > img { + margin-top: 10px; +} + +.wc-list > .wc-card { + margin-top: 8px; + border: 0 !important; +} + +.wc-list > .wc-card:first-child { + margin-top: 0; +} + +/* horizontal scroll */ + +.wc-hscroll-outer { + /* allow horizontal scrolling but hide the scrollbar */ + overflow: hidden; +} + +.wc-hscroll { + /* allow horizontal scrolling but hide the scrollbar */ + overflow-x: scroll; + overflow-y: hidden; +} + +.wc-hscroll > ul { + white-space: nowrap; +} + +.wc-hscroll > ul > li { + display: inline-block; + vertical-align: top; + white-space: normal; +} + +/* carousel */ + +.wc-carousel { + position: relative; + margin-top: 8px; + + button.scroll { + background-color: $blue; + height: 31px; + overflow: hidden; + padding: 0px; + position: absolute; + top: 50%; + width: 43px; + border-radius: 100px; + border: 2px solid $blueDark; + } + + button.scroll:disabled { + display: none; + } + + button.scroll:focus, + button.scroll:hover { + background-color: $blueDark; + border: 2px solid $blueDark; + } + + button.scroll svg { + fill: $white; + } + + button.scroll.previous { + left: -16px; + } + + button.scroll.next { + right: -16px; + } + + .wc-hscroll > ul { + margin-left: -4px; + } + + .wc-hscroll > ul > li { + padding: 0 4px; + } + + .wc-hscroll > ul > li:last-child { + padding-right: 0; + } + + li { + p { + min-height: 4em; + white-space: normal; + } + + .wc-adaptive-card p { + min-height: initial; + } + + .wc-adaptive-card-content > div > div > .ac-textBlock:first-child { + margin-top: 8px; + } + } +} + +/* from me */ + +.wc-message-from-me { + float: right; + margin-right: 6px; +} + +.wc-message-from-me.wc-message-from { + text-align: right; +} + +.wc-message-from-me .wc-message-content { + background-color: $c_messageFromMe; + border: 1px solid $blueDark; + color: $white; + border-radius: 10px 10px 4px 10px; +} + +/* from bot */ + +.wc-message-from-bot { + float: left; + margin-left: 8px; +} + +.wc-message-from-bot .wc-message-content { + background-color: $c_messageFromThem; + color: $black; + border-radius: 10px 10px 10px 4px; +} + +/* console */ + +.wc-console { + background: #ffffff; + border: 1px solid #c7d0d7; + border-radius: 5px; + margin: 18px; + bottom: 0; + box-sizing: border-box; + height: 45px; + left: 0; + position: absolute; + right: 0; + box-shadow: 0px 1px 2px 0px $shadow; + + > .wc-upload, + > .wc-textbox, + > .wc-send, + > .wc-mic { + position: absolute; + top: 0; + vertical-align: middle; + } + + label, + button { + cursor: pointer; + display: inline-block; + height: 43px; + } + + svg { + fill: $silver; + margin: 9px; + } + + input[type='text'], + textarea { + border: none; + height: calc(100% - 12px); + outline: none; + padding: 0; + resize: none; + width: 100%; + padding-top: 12px; + background-color: transparent; + color: $black; + min-height: initial; + box-shadow: none; + line-height: initial; + box-sizing: initial; + } + + textarea::placeholder { + color: $silver; + } + + &.has-text .wc-send svg { + fill: $blue; + } + &.has-text { + border: 1px solid $grey; + } + + .wc-upload { + cursor: pointer; + position: relative; + + svg { + height: 25px; + width: 25px; + } + } + + #wc-upload-input { + font-size: 0; + height: 0; + left: 0; + opacity: 0; + outline: 0; + position: absolute; + top: 0; + width: 0; + } + + .wc-send { + right: 0; + } + + .wc-send.hidden { + visibility: hidden; + } + + &.has-upload-button .wc-textbox { + left: 48px; + } + + .wc-textbox { + bottom: 0; + left: 11px; + right: 49px; + + input { + background-color: transparent; + word-break: break-word; + } + } + + .wc-mic, + .wc-send { + background-color: transparent; + border: 0; + padding: 0; + right: 0; + + &.hidden { + visibility: hidden; + } + } + + .wc-send { + svg { + height: 25px; + width: 25px; + } + } + + .wc-mic { + &.active path#micFilling { + fill: rgb(78, 55, 135); + } + + &.inactive path#micFilling { + visibility: hidden; + } + } +} + +.wc-console.disable-input { + display: none; +} + +.wc-console.has-text .wc-send svg { + fill: $blue; +} + +/* animation */ + +.wc-typing { + background-image: url('data:image/gif;base64,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'); + background-repeat: no-repeat; + height: 22px; + width: 50px; + background-size: contain; + background-position: center; +} + +.wc-animate-scroll { + left: 0; + position: absolute; + transition: left 0.8s ease; +} + +.wc-animate-scroll-rapid { + left: 0; + position: absolute; + transition: left 0.4s ease; +} + +.wc-animate-scroll-near { + left: 0; + position: absolute; + transition: left 0.3s ease-in-out; +} + +/* text formats */ + +.format-markdown > p { + margin-bottom: 0px; +} + +.format-markdown code { + white-space: pre-wrap; +} + +.format-markdown ol { + padding-left: 30px !important; /* numbers are right-aligned to the period */ +} + +.format-markdown ul { + padding-left: 33px !important; +} + +/* browser scrollbar customization */ + +.wc-app ::-webkit-scrollbar { + width: 8px; +} + +.wc-app ::-webkit-scrollbar * { + background-color: transparent; +} + +.wc-app ::-webkit-scrollbar-thumb { + background-color: $silver; +} + +/* download button for Unknown media */ + +.wc-icon-download { + display: inline-block; + height: 20px; + margin-left: 12px; + vertical-align: middle; + width: 15px; + + background-image: url('data:image/svg+xml,'); + background-repeat: no-repeat; + background-size: contain; +} + +.wc-text-download { + display: inline-block; + font-weight: 500; + text-decoration: none; + color: $white; +} + +.ac-textBlock img.emoji { + width: auto !important; +} + +/* redesigned header */ +.feedbot-header { + .feedbot-header-name { + display: flex; + align-items: center; + gap: 10px; + } + + .feedbot-avatar, + .feedbot-avatar img { + width: 40px; + height: 40px; + border-radius: 100px; + background-position: center; + background-size: cover; + } +} +.feedbot-wrapper.collapsed .feedbot-avatar { + display: none; +} +.feedbot-wrapper.collapsed .feedbot-header:before { + position: absolute; + content: ''; + top: 0px; + left: 0; + right: 0; + bottom: 0; + border-radius: 100px; + z-index: 0; + filter: brightness(0.7); + /* border-color is set in redesign template */ + border-style: solid; + border-width: 2px; +} +.feedbot-name { + display: flex; + flex-direction: column; + gap: 3px; +} +.feedbot-supportive-title { + font-size: 13px; + color: $grey; +} diff --git a/src/themes/ExpandableBarTheme.tsx b/src/themes/ExpandableBarTheme.tsx index 8fdf46acd7..422b08601a 100644 --- a/src/themes/ExpandableBarTheme.tsx +++ b/src/themes/ExpandableBarTheme.tsx @@ -1,5 +1,5 @@ -import { BaseTheme } from './BaseTheme' -import { Theme } from './index' +import { BaseTheme } from './BaseTheme'; +import { Theme } from './index'; export const ExpandableBarTheme = (theme: Theme) => ` .feedbot-reset { @@ -92,4 +92,4 @@ export const ExpandableBarTheme = (theme: Theme) => ` .wc-carousel .wc-hscroll > ul > li > .wc-card > div > .ac-container > .ac-container .ac-image{ border-radius: 5px 5px 0 0; } -` +`; diff --git a/src/themes/ExpandableKnobTheme.tsx b/src/themes/ExpandableKnobTheme.tsx index b237e623d5..cff918bc36 100644 --- a/src/themes/ExpandableKnobTheme.tsx +++ b/src/themes/ExpandableKnobTheme.tsx @@ -1,5 +1,5 @@ -import { ExpandableBarTheme } from './ExpandableBarTheme' -import { Theme } from './index' +import { ExpandableBarTheme } from './ExpandableBarTheme'; +import { Theme } from './index'; export const ExpandableKnobTheme = (theme: Theme) => ` .feedbot-reset { @@ -56,10 +56,11 @@ export const ExpandableKnobTheme = (theme: Theme) => ` height: 100%; padding: 0px; - background-image: url(${(theme.template && theme.template.iconUrl) - ? theme.template.iconUrl - : 'https://cdn.feedyou.ai/webchat/message-icon.png' -}); + background-image: url(${ + theme.template && theme.template.iconUrl + ? theme.template.iconUrl + : 'https://cdn.feedyou.ai/webchat/message-icon.png' + }); background-size: 50px 50px; background-position: 12px 12px; background-repeat: no-repeat; @@ -124,4 +125,4 @@ export const ExpandableKnobTheme = (theme: Theme) => ` } ${ExpandableBarTheme(theme)} -` +`; diff --git a/src/themes/ExpandableKnobThemeNew.tsx b/src/themes/ExpandableKnobThemeNew.tsx new file mode 100644 index 0000000000..05a6eb6c52 --- /dev/null +++ b/src/themes/ExpandableKnobThemeNew.tsx @@ -0,0 +1,21 @@ +import { Theme } from './index'; + +export const ExpandableKnobThemeNew = (theme: Theme) => ` +.feedbot-wrapper.collapsed .feedbot-header { + background-image: url(${ + theme.template && theme.template.iconUrl + ? theme.template.iconUrl + : '"' + + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M11.291 18.562L11.2898 18.5622L11.2882 18.5618L11.2869 18.5606L11.2864 18.5589L11.2867 18.5576L11.2879 18.5561L11.2898 18.5556C11.2904 18.5557 11.2916 18.5561 11.2921 18.5565C11.2926 18.557 11.2929 18.5576 11.293 18.5582L11.2928 18.5602L11.291 18.562Z' fill='white'/%3E%3Cpath d='M18.0016 18.5617L18.0025 18.5607L18.0031 18.5589L18.0026 18.5572C18.0022 18.5568 18.001 18.5558 18.0004 18.5556L17.9985 18.5558L17.997 18.557L17.9964 18.5589L17.9967 18.5602L17.9974 18.5612C17.9979 18.5617 17.9985 18.562 17.9991 18.5622L18.0016 18.5617Z' fill='white'/%3E%3Cpath d='M24.711 18.562L24.7097 18.5622C24.7091 18.5621 24.7078 18.5617 24.7074 18.5612C24.7069 18.5608 24.7066 18.5602 24.7065 18.5595L24.7066 18.5576L24.7079 18.5561L24.7097 18.5556C24.71 18.5556 24.7109 18.5558 24.7112 18.5559C24.7115 18.5561 24.7109 18.5557 24.7112 18.5559C24.7117 18.5564 24.7129 18.5576 24.713 18.5582L24.7128 18.5602L24.711 18.562Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4346 0.0453898C23.7144 0.351612 27.7405 2.19149 30.7729 5.22729C33.8088 8.25967 35.6487 12.2851 35.9546 16.5651C36.2605 20.8451 35.0123 25.0922 32.4388 28.5258C29.865 31.9593 26.1395 34.3494 21.9456 35.2567C17.7523 36.1643 13.3715 35.5283 9.60866 33.4655L3.46231 35.8297C2.84593 36.0668 2.16128 36.0551 1.55306 35.7973C0.944834 35.5394 0.460637 35.0551 0.202461 34.4469C-0.0557144 33.8388 -0.0673678 33.1541 0.169763 32.5377L2.53452 26.3913C0.471719 22.6289 -0.164628 18.2483 0.742975 14.0544C1.65029 9.86051 4.04038 6.1346 7.47397 3.56116C10.9074 0.98764 15.1546 -0.260549 19.4346 0.0453898ZM11.2898 17.4372C11.0679 17.4372 10.8511 17.503 10.6666 17.6263C10.4821 17.7495 10.3384 17.9247 10.2535 18.1297C10.1686 18.3346 10.1464 18.5601 10.1897 18.7777C10.2329 18.9953 10.3398 19.1952 10.4966 19.352C10.6535 19.5089 10.8534 19.6157 11.0709 19.659C11.2885 19.7023 11.514 19.6801 11.719 19.5952C11.924 19.5103 12.0991 19.3665 12.2224 19.1821C12.3456 18.9976 12.4114 18.7807 12.4114 18.5589C12.4114 18.2614 12.2932 17.9761 12.0829 17.7658C11.8725 17.5554 11.5872 17.4372 11.2898 17.4372ZM17.3766 17.6263C17.561 17.503 17.7779 17.4372 17.9997 17.4372C18.2972 17.4372 18.5825 17.5554 18.7929 17.7658C19.0032 17.9761 19.1214 18.2614 19.1214 18.5589C19.1214 18.7807 19.0556 18.9976 18.9324 19.1821C18.8091 19.3665 18.6339 19.5103 18.429 19.5952C18.224 19.6801 17.9985 19.7023 17.7809 19.659C17.5633 19.6157 17.3635 19.5089 17.2066 19.352C17.0497 19.1952 16.9429 18.9953 16.8996 18.7777C16.8564 18.5601 16.8786 18.3346 16.9635 18.1297C17.0484 17.9247 17.1921 17.7495 17.3766 17.6263ZM24.7097 17.4372C24.4879 17.4372 24.271 17.503 24.0866 17.6263C23.9021 17.7495 23.7583 17.9247 23.6734 18.1297C23.5885 18.3346 23.5663 18.5601 23.6096 18.7777C23.6529 18.9953 23.7597 19.1952 23.9166 19.352C24.0735 19.5089 24.2733 19.6157 24.4909 19.659C24.7085 19.7023 24.934 19.6801 25.139 19.5952C25.3439 19.5103 25.5191 19.3665 25.6423 19.1821C25.7656 18.9976 25.8314 18.7807 25.8314 18.5589C25.8314 18.2614 25.7132 17.9761 25.5028 17.7658C25.2925 17.5554 25.0072 17.4372 24.7097 17.4372Z' fill='white'/%3E%3C/svg%3E" + + '"' + }); +} +.feedbot-wrapper.collapsed .feedbot-header { + background-color: ${theme.mainColor ? theme.mainColor : '#0063f8'}; +} +.feedbot-wrapper.collapsed .feedbot-header:before { + border-color: ${theme.mainColor ? theme.mainColor : '#0063f8'}; +} + +${theme.customCss || ''} +`; diff --git a/src/themes/SidebarTheme.tsx b/src/themes/SidebarTheme.tsx index cd3d95f13a..a313884be4 100644 --- a/src/themes/SidebarTheme.tsx +++ b/src/themes/SidebarTheme.tsx @@ -1,9 +1,9 @@ -import { ExpandableKnobTheme } from './ExpandableKnobTheme' -import { Theme } from './index' +import { ExpandableKnobTheme } from './ExpandableKnobTheme'; +import { Theme } from './index'; function getSidebarBackgroundColor(theme: Theme) { - return '#e1e1e1' - + return '#e1e1e1'; + // TODO make background tint configurable in theme /*const color = theme.mainColor if(color.startsWith("rgb")){ @@ -79,7 +79,9 @@ export const SidebarTheme = (theme: Theme) => ` @supports ((-webkit-backdrop-filter: blur(40px)) or (backdrop-filter: blur(40px))) { .feedbot-wrapper { max-height: 100%; - background: linear-gradient(45deg, ${getSidebarBackgroundColor(theme)}33, #E1E1E1CE); + background: linear-gradient(45deg, ${getSidebarBackgroundColor( + theme + )}33, #E1E1E1CE); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); } @@ -137,4 +139,4 @@ export const SidebarTheme = (theme: Theme) => ` justify-content: center; } -` +`; diff --git a/src/themes/index.ts b/src/themes/index.ts index 9bd784270b..3924c3a7f2 100644 --- a/src/themes/index.ts +++ b/src/themes/index.ts @@ -1,49 +1,58 @@ -import { ExpandableBarTheme } from './ExpandableBarTheme' -import { FullScreenTheme } from './FullScreenTheme' -import { ExpandableKnobTheme } from './ExpandableKnobTheme' -import { SidebarTheme } from './SidebarTheme' +import { ExpandableBarTheme } from './ExpandableBarTheme'; +import { FullScreenTheme } from './FullScreenTheme'; +import { ExpandableKnobTheme } from './ExpandableKnobTheme'; +import { SidebarTheme } from './SidebarTheme'; +import { ExpandableKnobThemeNew } from './ExpandableKnobThemeNew'; export type Theme = { mainColor: string; template?: { // Dost možná tu nějaký propy chyběj, // tak je neváhej připsat! :) - autoExpandTimeout?: number, - type?: string, - headerText?: string, - collapsedHeaderText?: string, + autoExpandTimeout?: number; + type?: string; + headerText?: string; + collapsedHeaderText?: string; popupMessage?: { - title: string, - description: string, - timeout: number - }, - iconUrl?: string, - customScript?: string, - logoUrl?: string, + title: string; + description: string; + timeout: number; + }; + iconUrl?: string; + customScript?: string; + logoUrl?: string; + avatar?: string; + supportiveTitle?: string; }; customCss?: string; - showSignature?: boolean, - enableScreenshotUpload?: boolean + showSignature?: boolean; + enableScreenshotUpload?: boolean; signature?: { - partnerLogoUrl: string, - partnerLogoStyle: string, - partnerLinkUrl: string, - mode: string - } + partnerLogoUrl: string; + partnerLogoStyle: string; + partnerLinkUrl: string; + mode: string; + }; }; export function getStyleForTheme(theme: Theme, remoteConfig: boolean): string { switch (theme && theme.template && theme.template.type) { case 'expandable-bar': - return ExpandableBarTheme(theme) + return ExpandableBarTheme(theme); case 'full-screen': - return FullScreenTheme(theme) + return FullScreenTheme(theme); case 'expandable-knob': - return ExpandableKnobTheme(theme) + return ExpandableKnobThemeNew( + theme + ); /* LP: pro dev; vrátit zpět ExpandableKnobTheme(theme);*/ case 'sidebar': - return SidebarTheme(theme) + return SidebarTheme(theme); + case 'expandable-knob-new': + return ExpandableKnobThemeNew(theme); } - + // backward compatibility - knob is new default for remote config, old default is bar - return remoteConfig ? ExpandableKnobTheme(theme) : ExpandableBarTheme(theme) + return remoteConfig + ? ExpandableKnobTheme(theme) + : ExpandableBarTheme(theme); } diff --git a/typing-indicator.gif b/typing-indicator.gif new file mode 100644 index 0000000000000000000000000000000000000000..379608723e4e58c49ff8db83e5abb522aac2caab GIT binary patch literal 14372 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 Date: Wed, 10 Jan 2024 14:43:10 +0100 Subject: [PATCH 2/9] Redesign --- .prettierignore | 1 - .../ExpandableTemplate/ExpandableTemplate.tsx | 2 +- .../templates/ExpandableTemplate/Header.tsx | 18 ++---- .../Signature/Signature.tsx | 64 ++++++++++++++++--- .../Signature/SignatureLink.tsx | 4 +- src/scss/botchat-redesign.scss | 38 +++++------ src/themes/ExpandableKnobThemeNew.tsx | 10 ++- src/themes/SidebarThemeNew.tsx | 34 ++++++++++ src/themes/index.ts | 8 ++- 9 files changed, 127 insertions(+), 52 deletions(-) create mode 100644 src/themes/SidebarThemeNew.tsx diff --git a/.prettierignore b/.prettierignore index f59ec20aab..e69de29bb2 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +0,0 @@ -* \ No newline at end of file diff --git a/src/App/templates/ExpandableTemplate/ExpandableTemplate.tsx b/src/App/templates/ExpandableTemplate/ExpandableTemplate.tsx index 3d7b5bf552..1026da6b68 100644 --- a/src/App/templates/ExpandableTemplate/ExpandableTemplate.tsx +++ b/src/App/templates/ExpandableTemplate/ExpandableTemplate.tsx @@ -94,7 +94,7 @@ export class ExpandableTemplate extends React.Component {
{signature && showSignature && - + } {this.doesTemplateSupportPopupMsg() && !initialized && popupMessage && ( diff --git a/src/App/templates/ExpandableTemplate/Header.tsx b/src/App/templates/ExpandableTemplate/Header.tsx index 2d25725345..9a8e80272c 100644 --- a/src/App/templates/ExpandableTemplate/Header.tsx +++ b/src/App/templates/ExpandableTemplate/Header.tsx @@ -19,9 +19,8 @@ export const Header: React.StatelessComponent = ({ } = appProps; let backgroundColor; - {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} - if (template.type !== 'expandable-knob') { - backgroundColor = mainColor || '#e51836'; + if (template.type !== 'expandable-knob-new' && template.type !== 'sidebar-new') { + backgroundColor = mainColor || '#fb584e'; } const title = getTitle(appProps, isCollapsed); @@ -33,20 +32,16 @@ export const Header: React.StatelessComponent = ({
+ style={{ backgroundColor }}>
- {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} - {template.type === 'expandable-knob' ? ( + {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? (
) : null}
{title} - {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} - {template.type === 'expandable-knob' ? ( + {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( - {/* LP: for dev; pak text odstranit */} - S čím vám dnes mohu pomoci? {template.supportiveTitle} ): null} @@ -64,8 +59,7 @@ export const Header: React.StatelessComponent = ({ onClick={(e) => e.preventDefault()} className='feedbot-minimize' href='#'> - {/* LP: for dev; pak změnit type na 'expandable-knob-new' */} - {template.type === 'expandable-knob' ? ( + {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( diff --git a/src/App/templates/ExpandableTemplate/Signature/Signature.tsx b/src/App/templates/ExpandableTemplate/Signature/Signature.tsx index b43f797cc5..c79bf7a509 100644 --- a/src/App/templates/ExpandableTemplate/Signature/Signature.tsx +++ b/src/App/templates/ExpandableTemplate/Signature/Signature.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import { SignatureLink } from './SignatureLink'; import { Theme } from '../../../../themes'; +import { AppProps } from '../../../App'; + import { SignatureTemplate } from './SignatureTemplate'; type SignatureSchema = Theme['signature']; @@ -9,18 +11,28 @@ const FEEDYOU_LOGO_IMG_SRC = export type Props = { signature: SignatureSchema; + appProps: AppProps; botId: string; }; - const getLinkQueryString = (botId: string) => `?utm_source=webchat&utm_medium=chatbot&utm_campaign=${botId}`; export const Signature: React.StatelessComponent = ({ signature, botId, + appProps, }) => { - const { partnerLogoUrl, partnerLinkUrl, partnerLogoStyle, mode } = - signature; + const { + partnerLogoUrl, + partnerLinkUrl, + partnerLogoStyle, + mode, + partnerName, + } = signature; + const { + theme: { template }, + } = appProps; + const attachQueryStringToUrl = (url: string) => `${url}${getLinkQueryString(botId)}`; @@ -30,16 +42,19 @@ export const Signature: React.StatelessComponent = ({ : enhancedFeedyouUrl; const feedyouLink = ( - + ); const partnerLink = ( ); @@ -47,17 +62,50 @@ export const Signature: React.StatelessComponent = ({ return null; } - if (mode === 'both') { + /* Webchat Redesign Signature */ + if ( + template.type === 'expandable-knob-new' || + template.type === 'sidebar-new' + ) { + if (mode === 'both') { + return ( + + {partnerLink} &{' '} + + Feedyou + + + ); + } + if (mode === 'partner') { + return {partnerLink}; + } + return ( + + + Feedyou + + + ); + } + + if (partnerLogoUrl && mode === 'both') { return ( {partnerLink} -
&
+
&
{feedyouLink} ); } - if (mode === 'partner') { + if (partnerLogoUrl && mode === 'partner') { return {partnerLink}; } diff --git a/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx b/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx index 1edc3d8af1..5b8811d85d 100644 --- a/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx +++ b/src/App/templates/ExpandableTemplate/Signature/SignatureLink.tsx @@ -4,7 +4,7 @@ import { CustomStylesForCssClass } from '../../../CustomStylesForCssClass'; export type Props = { href: string; - imgSrc?: string; + imgSrc: string; className?: string; customStyles?: string; text?: string; @@ -22,7 +22,7 @@ export const SignatureLink: React.StatelessComponent = ({ className={cx('signature-link', className)} target='_blank' href={href}> - {imgSrc ? : text} + {imgSrc ? Logo : text} {className && customStyles && ( ` +/* webchat redesign */ .feedbot-wrapper.collapsed .feedbot-header { background-image: url(${ theme.template && theme.template.iconUrl @@ -13,9 +14,14 @@ export const ExpandableKnobThemeNew = (theme: Theme) => ` .feedbot-wrapper.collapsed .feedbot-header { background-color: ${theme.mainColor ? theme.mainColor : '#0063f8'}; } -.feedbot-wrapper.collapsed .feedbot-header:before { - border-color: ${theme.mainColor ? theme.mainColor : '#0063f8'}; + +/* expandable knob specific */ +.feedbot-signature { + bottom: -23px; + font-size: 13px; + right: -5px; } +/* theme custom css */ ${theme.customCss || ''} `; diff --git a/src/themes/SidebarThemeNew.tsx b/src/themes/SidebarThemeNew.tsx new file mode 100644 index 0000000000..4c3ec5bd9a --- /dev/null +++ b/src/themes/SidebarThemeNew.tsx @@ -0,0 +1,34 @@ +import { Theme } from './index'; + +export const SidebarThemeNew = (theme: Theme) => ` +/* webchat redesign */ +.feedbot-wrapper.collapsed .feedbot-header { + background-image: url(${ + theme.template && theme.template.iconUrl + ? theme.template.iconUrl + : '"' + + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M11.291 18.562L11.2898 18.5622L11.2882 18.5618L11.2869 18.5606L11.2864 18.5589L11.2867 18.5576L11.2879 18.5561L11.2898 18.5556C11.2904 18.5557 11.2916 18.5561 11.2921 18.5565C11.2926 18.557 11.2929 18.5576 11.293 18.5582L11.2928 18.5602L11.291 18.562Z' fill='white'/%3E%3Cpath d='M18.0016 18.5617L18.0025 18.5607L18.0031 18.5589L18.0026 18.5572C18.0022 18.5568 18.001 18.5558 18.0004 18.5556L17.9985 18.5558L17.997 18.557L17.9964 18.5589L17.9967 18.5602L17.9974 18.5612C17.9979 18.5617 17.9985 18.562 17.9991 18.5622L18.0016 18.5617Z' fill='white'/%3E%3Cpath d='M24.711 18.562L24.7097 18.5622C24.7091 18.5621 24.7078 18.5617 24.7074 18.5612C24.7069 18.5608 24.7066 18.5602 24.7065 18.5595L24.7066 18.5576L24.7079 18.5561L24.7097 18.5556C24.71 18.5556 24.7109 18.5558 24.7112 18.5559C24.7115 18.5561 24.7109 18.5557 24.7112 18.5559C24.7117 18.5564 24.7129 18.5576 24.713 18.5582L24.7128 18.5602L24.711 18.562Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4346 0.0453898C23.7144 0.351612 27.7405 2.19149 30.7729 5.22729C33.8088 8.25967 35.6487 12.2851 35.9546 16.5651C36.2605 20.8451 35.0123 25.0922 32.4388 28.5258C29.865 31.9593 26.1395 34.3494 21.9456 35.2567C17.7523 36.1643 13.3715 35.5283 9.60866 33.4655L3.46231 35.8297C2.84593 36.0668 2.16128 36.0551 1.55306 35.7973C0.944834 35.5394 0.460637 35.0551 0.202461 34.4469C-0.0557144 33.8388 -0.0673678 33.1541 0.169763 32.5377L2.53452 26.3913C0.471719 22.6289 -0.164628 18.2483 0.742975 14.0544C1.65029 9.86051 4.04038 6.1346 7.47397 3.56116C10.9074 0.98764 15.1546 -0.260549 19.4346 0.0453898ZM11.2898 17.4372C11.0679 17.4372 10.8511 17.503 10.6666 17.6263C10.4821 17.7495 10.3384 17.9247 10.2535 18.1297C10.1686 18.3346 10.1464 18.5601 10.1897 18.7777C10.2329 18.9953 10.3398 19.1952 10.4966 19.352C10.6535 19.5089 10.8534 19.6157 11.0709 19.659C11.2885 19.7023 11.514 19.6801 11.719 19.5952C11.924 19.5103 12.0991 19.3665 12.2224 19.1821C12.3456 18.9976 12.4114 18.7807 12.4114 18.5589C12.4114 18.2614 12.2932 17.9761 12.0829 17.7658C11.8725 17.5554 11.5872 17.4372 11.2898 17.4372ZM17.3766 17.6263C17.561 17.503 17.7779 17.4372 17.9997 17.4372C18.2972 17.4372 18.5825 17.5554 18.7929 17.7658C19.0032 17.9761 19.1214 18.2614 19.1214 18.5589C19.1214 18.7807 19.0556 18.9976 18.9324 19.1821C18.8091 19.3665 18.6339 19.5103 18.429 19.5952C18.224 19.6801 17.9985 19.7023 17.7809 19.659C17.5633 19.6157 17.3635 19.5089 17.2066 19.352C17.0497 19.1952 16.9429 18.9953 16.8996 18.7777C16.8564 18.5601 16.8786 18.3346 16.9635 18.1297C17.0484 17.9247 17.1921 17.7495 17.3766 17.6263ZM24.7097 17.4372C24.4879 17.4372 24.271 17.503 24.0866 17.6263C23.9021 17.7495 23.7583 17.9247 23.6734 18.1297C23.5885 18.3346 23.5663 18.5601 23.6096 18.7777C23.6529 18.9953 23.7597 19.1952 23.9166 19.352C24.0735 19.5089 24.2733 19.6157 24.4909 19.659C24.7085 19.7023 24.934 19.6801 25.139 19.5952C25.3439 19.5103 25.5191 19.3665 25.6423 19.1821C25.7656 18.9976 25.8314 18.7807 25.8314 18.5589C25.8314 18.2614 25.7132 17.9761 25.5028 17.7658C25.2925 17.5554 25.0072 17.4372 24.7097 17.4372Z' fill='white'/%3E%3C/svg%3E" + + '"' + }); +} +.feedbot-wrapper.collapsed .feedbot-header { + background-color: ${theme.mainColor ? theme.mainColor : '#0063f8'}; +} + +/* sidebar specific */ +.feedbot-wrapper { + height: 100vh; + bottom: 0; + right: 0; + max-height: 100%; + border-radius: 0; +} +.feedbot-signature { + bottom: -2px; + font-size: 11px; + right: 13px; +} + +/* theme custom css */ +${theme.customCss || ''} +`; diff --git a/src/themes/index.ts b/src/themes/index.ts index 3924c3a7f2..abb877499c 100644 --- a/src/themes/index.ts +++ b/src/themes/index.ts @@ -3,6 +3,7 @@ import { FullScreenTheme } from './FullScreenTheme'; import { ExpandableKnobTheme } from './ExpandableKnobTheme'; import { SidebarTheme } from './SidebarTheme'; import { ExpandableKnobThemeNew } from './ExpandableKnobThemeNew'; +import { SidebarThemeNew } from './SidebarThemeNew'; export type Theme = { mainColor: string; @@ -31,6 +32,7 @@ export type Theme = { partnerLogoUrl: string; partnerLogoStyle: string; partnerLinkUrl: string; + partnerName: string; mode: string; }; }; @@ -42,13 +44,13 @@ export function getStyleForTheme(theme: Theme, remoteConfig: boolean): string { case 'full-screen': return FullScreenTheme(theme); case 'expandable-knob': - return ExpandableKnobThemeNew( - theme - ); /* LP: pro dev; vrátit zpět ExpandableKnobTheme(theme);*/ + return ExpandableKnobTheme(theme); case 'sidebar': return SidebarTheme(theme); case 'expandable-knob-new': return ExpandableKnobThemeNew(theme); + case 'sidebar-new': + return SidebarThemeNew(theme); } // backward compatibility - knob is new default for remote config, old default is bar From e11d93f38f0777439e2fdefaeff1ccce9b3580cb Mon Sep 17 00:00:00 2001 From: Lukas Podmelle Date: Sat, 13 Jan 2024 00:46:40 +0100 Subject: [PATCH 3/9] Redesign & Persistent menu --- .prettierignore | 1 + .../templates/ExpandableTemplate/Header.tsx | 145 ++++++++++++------ src/scss/botchat-redesign.scss | 51 +++++- src/themes/index.ts | 4 + 4 files changed, 153 insertions(+), 48 deletions(-) diff --git a/.prettierignore b/.prettierignore index e69de29bb2..f59ec20aab 100644 --- a/.prettierignore +++ b/.prettierignore @@ -0,0 +1 @@ +* \ No newline at end of file diff --git a/src/App/templates/ExpandableTemplate/Header.tsx b/src/App/templates/ExpandableTemplate/Header.tsx index 9a8e80272c..00f54d27d6 100644 --- a/src/App/templates/ExpandableTemplate/Header.tsx +++ b/src/App/templates/ExpandableTemplate/Header.tsx @@ -8,45 +8,59 @@ export type Props = { isCollapsed: boolean; }; -export const Header: React.StatelessComponent = ({ - appProps, - onClick, - isCollapsed, -}) => { - const { - theme: { mainColor, template }, - header: { extraHtml }, - } = appProps; +export type State = { + isMenuOpen: boolean; +} - let backgroundColor; - if (template.type !== 'expandable-knob-new' && template.type !== 'sidebar-new') { - backgroundColor = mainColor || '#fb584e'; - } +export class Header extends React.Component { + state: State = {isMenuOpen: false} - const title = getTitle(appProps, isCollapsed); - const avatar = - template.avatar || - "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18Z' fill='%23F7F9FB'/%3E%3Cpath d='M14.024 18.026h-.003v-.005h.004l.001.002v.001l-.002.002Zm3.978 0v-.001l.001-.002v-.002h-.006v.004l.002.001h.003Zm3.976 0h-.003l-.001-.002v-.002l.001-.001h.004v.003l-.001.002Z' fill='%23385B75'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.718 9.023a8.912 8.912 0 0 1 5.669 2.59 8.91 8.91 0 0 1-10.583 14.12l-3.073 1.182a1.274 1.274 0 0 1-1.646-1.646l1.182-3.073a8.91 8.91 0 0 1 8.45-13.173ZM14.023 17a1.024 1.024 0 1 0 0 2.047 1.024 1.024 0 0 0 0-2.047Zm3.409.172a1.023 1.023 0 1 1 1.136 1.702 1.023 1.023 0 0 1-1.136-1.702ZM21.977 17a1.023 1.023 0 1 0 0 2.047 1.023 1.023 0 0 0 0-2.047Z' fill='%23385B75'/%3E%3C/svg%3E"; + render() { + const { + appProps: { + theme: { mainColor, template }, + header: { extraHtml }, + }, + isCollapsed, + onClick, + } = this.props; - return ( -
-
- {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( -
+ const handlePersistentMenuToggle = () => { + this.setState((prevState) => ({ + isMenuOpen: !prevState.isMenuOpen + })) + } + + let backgroundColor; + if (template.type !== 'expandable-knob-new' && template.type !== 'sidebar-new') { + backgroundColor = mainColor || '#fb584e'; + } + + const title = getTitle(this.props.appProps, isCollapsed); + + const avatar = + template.avatar || + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18Z' fill='%23F7F9FB'/%3E%3Cpath d='M14.024 18.026h-.003v-.005h.004l.001.002v.001l-.002.002Zm3.978 0v-.001l.001-.002v-.002h-.006v.004l.002.001h.003Zm3.976 0h-.003l-.001-.002v-.002l.001-.001h.004v.003l-.001.002Z' fill='%23385B75'/%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M18.718 9.023a8.912 8.912 0 0 1 5.669 2.59 8.91 8.91 0 0 1-10.583 14.12l-3.073 1.182a1.274 1.274 0 0 1-1.646-1.646l1.182-3.073a8.91 8.91 0 0 1 8.45-13.173ZM14.023 17a1.024 1.024 0 1 0 0 2.047 1.024 1.024 0 0 0 0-2.047Zm3.409.172a1.023 1.023 0 1 1 1.136 1.702 1.023 1.023 0 0 1-1.136-1.702ZM21.977 17a1.023 1.023 0 1 0 0 2.047 1.023 1.023 0 0 0 0-2.047Z' fill='%23385B75'/%3E%3C/svg%3E"; + + return ( +
+
+ {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( +
+
+ ) : null} +
+ {title} + {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( + + {template.supportiveTitle} + + ): null}
- ) : null} -
- {title} - {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( - - {template.supportiveTitle} - - ): null}
-
{extraHtml && ( = ({ /> )} - e.preventDefault()} - className='feedbot-minimize' - href='#'> +
- ); -}; + ) + } + +} const getTitle = (props: AppProps, isCollapsed: boolean) => { const { text, textWhenCollapsed } = props.header; @@ -83,4 +126,12 @@ const getTitle = (props: AppProps, isCollapsed: boolean) => { return titleToShow; }; +/** + * Triggers a specified dialog for the persistent menu item from Channel settings + * @param dialogId Dialog ID to be triggered on persistent menu item click + */ +const handleTriggerDialog = (dialogId: string) => { + window.dispatchEvent(new CustomEvent('feedbot:trigger-dialog', { detail: dialogId })) +} + export type HeaderProps = Props; diff --git a/src/scss/botchat-redesign.scss b/src/scss/botchat-redesign.scss index 3a19e07886..ff8b68e319 100644 --- a/src/scss/botchat-redesign.scss +++ b/src/scss/botchat-redesign.scss @@ -59,7 +59,6 @@ $card_padding: 8px; color: $greyDark; z-index: 10; padding: 18px; - cursor: pointer; font-size: 1em; display: flex; justify-content: space-between; @@ -167,6 +166,7 @@ $card_padding: 8px; height: 100%; width: 100%; padding: 0px; + cursor: pointer; text-indent: 999%; white-space: nowrap; overflow: hidden; @@ -1098,6 +1098,7 @@ body .wc-app, border-radius: 100px; background-position: center; background-size: cover; + aspect-ratio: 1/1; } } .feedbot-wrapper.collapsed .feedbot-avatar { @@ -1112,3 +1113,51 @@ body .wc-app, font-size: 13px; color: $grey; } +.feedbot-header-actions { + display: flex; + align-items: center; + gap: 8px; +} +.feedbot-persistent-menu-toggle { + color: $greyDark; + padding: 5px 5px; + cursor: pointer; +} +.feedbot-persistent-menu-toggle:hover { + color: $black; +} +.feedbot-persistent-menu { + line-height: 0.9em; + position: relative; +} +.feedbot-persistent-menu-links { + position: absolute; + top: 35px; + right: -35px; + background-color: $white; + border: 1px solid $silver; + border-radius: 6px; + box-shadow: 0px 1px 2px 0px $shadow; + z-index: 1; + list-style: none; + padding: 10px 0; + margin: 0; + min-width: 10em; + max-width: 17em; +} +.feedbot-persistent-menu-links a { + padding: 10px 20px; + display: block; + box-sizing: border-box; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + transition: background-color .2s ease, border .2 ease; +} +.feedbot-persistent-menu-links a:hover { + background-color: $blueLight; + outline: 2px solid $blueDark; + border-radius: 4px; + transition: background-color .2s ease, border .2 ease; +} \ No newline at end of file diff --git a/src/themes/index.ts b/src/themes/index.ts index abb877499c..d8eef09d6c 100644 --- a/src/themes/index.ts +++ b/src/themes/index.ts @@ -24,6 +24,10 @@ export type Theme = { logoUrl?: string; avatar?: string; supportiveTitle?: string; + persistentMenu?: [{ + title: string; + dialog: string; + }] }; customCss?: string; showSignature?: boolean; From 9370da8aaaa8866bad6c23dbb352c1036c05de9b Mon Sep 17 00:00:00 2001 From: Lukas Podmelle Date: Tue, 16 Jan 2024 12:29:02 +0100 Subject: [PATCH 4/9] Redesign & Persistent menu --- .../templates/ExpandableTemplate/Header.tsx | 34 +++++++++++++++++-- src/scss/botchat-redesign.scss | 20 +++++++++-- src/themes/ExpandableKnobThemeNew.tsx | 8 ++--- src/themes/SidebarThemeNew.tsx | 6 ++-- src/themes/index.ts | 1 + 5 files changed, 58 insertions(+), 11 deletions(-) diff --git a/src/App/templates/ExpandableTemplate/Header.tsx b/src/App/templates/ExpandableTemplate/Header.tsx index 00f54d27d6..06c64c171b 100644 --- a/src/App/templates/ExpandableTemplate/Header.tsx +++ b/src/App/templates/ExpandableTemplate/Header.tsx @@ -42,6 +42,12 @@ export class Header extends React.Component { template.avatar || "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'%3E%3Cpath d='M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18Z' fill='%23F7F9FB'/%3E%3Cpath d='M14.024 18.026h-.003v-.005h.004l.001.002v.001l-.002.002Zm3.978 0v-.001l.001-.002v-.002h-.006v.004l.002.001h.003Zm3.976 0h-.003l-.001-.002v-.002l.001-.001h.004v.003l-.001.002Z' fill='%23385B75'/%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M18.718 9.023a8.912 8.912 0 0 1 5.669 2.59 8.91 8.91 0 0 1-10.583 14.12l-3.073 1.182a1.274 1.274 0 0 1-1.646-1.646l1.182-3.073a8.91 8.91 0 0 1 8.45-13.173ZM14.023 17a1.024 1.024 0 1 0 0 2.047 1.024 1.024 0 0 0 0-2.047Zm3.409.172a1.023 1.023 0 1 1 1.136 1.702 1.023 1.023 0 0 1-1.136-1.702ZM21.977 17a1.023 1.023 0 1 0 0 2.047 1.023 1.023 0 0 0 0-2.047Z' fill='%23385B75'/%3E%3C/svg%3E"; + const startOverIcon = + + + + + return (
{ style={{ backgroundColor }}>
{template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( -
+
) : null}
@@ -70,7 +78,7 @@ export class Header extends React.Component { )}
- {template.type === 'expandable-knob-new' || template.type === 'sidebar-new' ? ( + {(template.type === 'expandable-knob-new' || template.type === 'sidebar-new') && (checkFeedbotTestMode() || template.persistentMenu.length > 0) ? (
@@ -79,6 +87,13 @@ export class Header extends React.Component { {this.state.isMenuOpen &&