@telia-ace/widget-conversation 1.0.24 → 1.0.25

package/dist/conversation.3981560b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.3981560b.js","sources":["../src/ui/conversation/conversation-input.tsx","../src/ui/conversation/conversation-styles.tsx","../src/ui/conversation/conversation-loader.tsx","../src/ui/conversation/message-types/timestamp.tsx","../src/ui/conversation/message-types/agent.tsx","../src/ui/conversation/message-types/custom.tsx","../src/ui/conversation/message-types/system.tsx","../src/ui/conversation/message-types/user.tsx","../src/ui/conversation/conversation-content.tsx","../src/ui/conversation/conversation-message.tsx","../src/ui/conversation/conversation.tsx"],"sourcesContent":["import {\r\n    borderTabStyle,\r\n    Button,\r\n    Input,\r\n    SymbolBadge,\r\n    useDispatch,\r\n    useProperties,\r\n    useScroll,\r\n} from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ConversationComponentProperties } from './conversation-component';\r\n\r\ntype Props = {\r\n    className?: string;\r\n};\r\n\r\nconst ConversationInput: React.FC<Props> = ({ className }) => {\r\n    const [inputText, setInputText] = useState('');\r\n    const [inputFocus, setInputFocus] = useState(false);\r\n    const [calculatedLineHeight, setCalculatedLineHeight] = useState(0);\r\n    const [textareaMaxHeight, setTextareaMaxHeight] = useState(0);\r\n    const dispatch = useDispatch();\r\n    const {\r\n        inputPlaceholder = 'Type your message',\r\n        inputHidden = false,\r\n        inputDisabled = false,\r\n        sendButtonLabel = 'Send message',\r\n        inputMultiline: multiline = true,\r\n    } = useProperties<ConversationComponentProperties>();\r\n    const [scrollableCss, inputRef] = useScroll(true);\r\n\r\n    useEffect(() => {\r\n        if (inputRef.current) {\r\n            const { lineHeight, maxHeight } = getComputedStyle(inputRef.current);\r\n            if (lineHeight && lineHeight.indexOf('px') > -1) {\r\n                const lineHeightNumber = lineHeight.split('px');\r\n                const calcLH = parseInt(lineHeightNumber[0], 10);\r\n                setCalculatedLineHeight(calcLH);\r\n                const maxHeightNumber = maxHeight.split('px');\r\n                setTextareaMaxHeight(parseInt(maxHeightNumber[0], 10));\r\n            }\r\n        }\r\n    }, [inputRef.current]);\r\n\r\n    const submit = (e: any) => {\r\n        if (!e.shiftKey || !multiline) {\r\n            e.preventDefault();\r\n            if (inputText && inputText.length > 0) {\r\n                dispatch('user-submit', { text: inputText });\r\n                setInputText('');\r\n                onChange('');\r\n            }\r\n        } else if (inputText.length < 1) {\r\n            e.preventDefault();\r\n        }\r\n    };\r\n\r\n    const calculateHeight = (value: string) => {\r\n        if (multiline && inputRef.current) {\r\n            const scrollHeight = inputRef.current.scrollHeight;\r\n            if (scrollHeight > calculatedLineHeight) {\r\n                inputRef.current.style.height = 'auto';\r\n                let areaHeight = scrollHeight;\r\n                if (value.length < 1) {\r\n                    areaHeight = calculatedLineHeight;\r\n                }\r\n                inputRef.current.style.height = `${areaHeight}px`;\r\n\r\n                if (areaHeight >= textareaMaxHeight) {\r\n                    inputRef.current.style.overflowY = 'scroll';\r\n                } else {\r\n                    inputRef.current.style.overflowY = 'hidden';\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    const onChange = (value: string) => {\r\n        calculateHeight(value);\r\n        setInputText(value);\r\n        if (value && value.length > 0) {\r\n            dispatch('user-typing', { textLength: value.length });\r\n        }\r\n    };\r\n\r\n    if (inputHidden) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <Wrapper\r\n            grow={multiline}\r\n            className={appendClassNames('humany-conversation-input', className)}\r\n            data-has-focus={inputFocus}\r\n            scrollableCss={scrollableCss}\r\n        >\r\n            {multiline ? (\r\n                <StyledTextArea\r\n                    value={inputText}\r\n                    onChange={onChange}\r\n                    onEnter={submit}\r\n                    disabled={inputDisabled}\r\n                    aria-label={inputPlaceholder}\r\n                    placeholder={inputPlaceholder}\r\n                    onFocusChange={setInputFocus}\r\n                    type={'textarea'}\r\n                    rows={1}\r\n                    ref={inputRef}\r\n                />\r\n            ) : (\r\n                <StyledInput\r\n                    value={inputText}\r\n                    onChange={onChange}\r\n                    onEnter={submit}\r\n                    disabled={inputDisabled}\r\n                    aria-label={inputPlaceholder}\r\n                    placeholder={inputPlaceholder}\r\n                    onFocusChange={setInputFocus}\r\n                />\r\n            )}\r\n            <StyledButton\r\n                disabled={inputDisabled}\r\n                onClick={submit}\r\n                title={sendButtonLabel}\r\n                aria-label={sendButtonLabel}\r\n            >\r\n                <SendSymbol\r\n                    size={22}\r\n                    symbol={{ type: 'Svg', content: 'send' }}\r\n                    hasContent={inputText && inputText.length}\r\n                />\r\n            </StyledButton>\r\n        </Wrapper>\r\n    );\r\n};\r\n\r\nconst StyledTextArea = styled(Input)<any>`\r\n    resize: none;\r\n    flex: 1;\r\n    flex-shrink: 1;\r\n    min-height: 1.2em;\r\n    max-height: 148px;\r\n    line-height: 1.2em;\r\n    height: 1.2em;\r\n    padding: 0;\r\n    margin: ${(p) => p.theme.sizes?.small} ${(p) => p.theme.sizes?.medium};\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    border: none;\r\n    transition: height 200ms linear;\r\n    outline: none;\r\n`;\r\n\r\nconst StyledInput = styled(Input)<any>`\r\n    flex: 1;\r\n    border: none;\r\n    background-color: transparent;\r\n    font-weight: 300;\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    line-height: 1.2em;\r\n    outline: none;\r\n    padding-left: ${(p) => p.theme.sizes?.large};\r\n    color: ${(p) => p.theme.colors?.text};\r\n    &::placeholder {\r\n        color: ${(p) => p.theme.colors?.textLight};\r\n        font-style: italic;\r\n    }\r\n`;\r\n\r\nconst StyledButton = styled(Button)<any>`\r\n    flex: 0 0 50px;\r\n    align-self: stretch;\r\n    background-color: transparent;\r\n    border: none;\r\n    &:focus {\r\n        ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\r\n    }\r\n`;\r\n\r\nconst Wrapper = styled.div<{ 'data-has-focus': boolean } & any>`\r\n    ${(p) =>\r\n        p.grow\r\n            ? css`\r\n                  min-height: 50px;\r\n                  max-height: 150px;\r\n              `\r\n            : css`\r\n                  height: 50px;\r\n              `}\r\n    flex: 0 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    background-color: ${(p) => p.theme.colors?.accent};\r\n    border-top: ${(p) => p.theme.inputBorder};\r\n    ${(p) =>\r\n        p['data-has-focus'] &&\r\n        css`\r\n            ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\r\n        `}\r\n    ${StyledTextArea} {\r\n        ${(p) => !!p.scrollableCss && p.scrollableCss}\r\n    }\r\n`;\r\n\r\nconst SendSymbol = styled(({ hasContent, ...other }) => <SymbolBadge {...other} />)`\r\n    line,\r\n    path {\r\n        stroke: ${(p) => (p.hasContent ? p.theme.colors?.primary : '#a6a6a6')};\r\n        fill: ${(p) => (p.hasContent ? p.theme.colors?.primary : '#a6a6a6')};\r\n    }\r\n`;\r\n\r\nexport default ConversationInput;\r\n","import { Typography } from '@telia-ace/widget-ui';\r\nimport styled, { css, keyframes } from 'styled-components';\r\n\r\nexport const Avatar = styled.div<any>`\r\n    width: ${(p) => p.avatarSize || '32px'};\r\n    height: ${(p) => p.avatarSize || '32px'};\r\n    border-radius: 50%;\r\n    background-color: ${(p) => p.theme.colors?.accent};\r\n    border: ${(p) => p.theme.border};\r\n    grid-area: avatar;\r\n    align-self: flex-end;\r\n    justify-self: center;\r\n    overflow: hidden;\r\n    margin-right: ${(p) => p.theme.sizes?.normal};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: ${(p) => p.theme.colors?.text};\r\n\r\n    > img {\r\n        height: 100%;\r\n        width: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    > svg {\r\n        width: 90%;\r\n        height: 90%;\r\n        padding: 10%;\r\n        color: ${(p) => p.theme.colors?.text};\r\n\r\n        line,\r\n        path,\r\n        circle,\r\n        fill {\r\n            stroke: ${(p) => p.theme.colors?.text};\r\n        }\r\n    }\r\n`;\r\n\r\nexport const LoaderAnimation = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  75% {\r\n    opacity: 1;\r\n  }\r\n  100% {\r\n    opacity: 0;\r\n  }\r\n`;\r\n\r\nexport const Loader = styled.div`\r\n    display: flex;\r\n    justify-content: center;\r\n    > div {\r\n        height: 10px;\r\n        width: 10px;\r\n        border-radius: 50%;\r\n        margin: 5px;\r\n        background-color: ${(p) => p.theme.colors?.text};\r\n        animation: ${LoaderAnimation} 1s infinite;\r\n    }\r\n    > div:nth-child(2) {\r\n        animation-delay: 100ms;\r\n    }\r\n    > div:nth-child(3) {\r\n        animation-delay: 200ms;\r\n    }\r\n`;\r\n\r\nexport const ContentBundle = styled.div`\r\n    grid-area: content;\r\n    max-width: 100%;\r\n    overflow: hidden;\r\n`;\r\n\r\nexport const MessageTitle = styled(Typography)`\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    font-weight: normal;\r\n    margin: 0;\r\n`;\r\n\r\nexport const MessageContainer = styled.div`\r\n    display: flex;\r\n`;\r\n\r\nexport const MessageContent = styled.div<any>`\r\n    background-color: ${(p) => (p.user ? p.theme.colors?.primary : p.theme.colors?.accent)};\r\n    color: ${(p) => (p.user ? p.theme.colors?.accent : p.theme.colors?.text)};\r\n    border-radius: 5px; // TODO: prop?\r\n    margin-top: ${(p) => p.theme.sizes?.normal};\r\n    display: inline-block;\r\n    && > * {\r\n        overflow-wrap: break-word;\r\n        word-wrap: break-word;\r\n        word-break: break-all;\r\n        word-break: break-word;\r\n        hyphens: auto;\r\n    }\r\n    max-width: 100%;\r\n    ${(p) => p.fullWidth && 'width: 100%;'}\r\n\r\n    ${(p) =>\r\n        !p.user &&\r\n        css`\r\n            border: ${p.theme.border};\r\n        `}\r\n  ${(p) => p.user && 'margin-left: auto'};\r\n\r\n    ${(p) =>\r\n        p.stacked === 'first' &&\r\n        p.user &&\r\n        css<any>`\r\n            border-bottom-right-radius: 1px; // TODO: Prop?\r\n        `}\r\n    ${(p) =>\r\n        p.stacked === 'middle' &&\r\n        p.user &&\r\n        css<any>`\r\n            border-bottom-right-radius: 1px;\r\n            border-top-right-radius: 1px;\r\n        `}\r\n  ${(p) =>\r\n        p.stacked === 'last' &&\r\n        p.user &&\r\n        css<any>`\r\n            border-top-right-radius: 1px;\r\n        `}\r\n  ${(p) =>\r\n        p.stacked === 'first' &&\r\n        !p.user &&\r\n        css<any>`\r\n            border-bottom-left-radius: 1px;\r\n        `}\r\n  ${(p) =>\r\n        p.stacked === 'middle' &&\r\n        !p.user &&\r\n        css<any>`\r\n            border-bottom-left-radius: 1px;\r\n            border-top-left-radius: 1px;\r\n        `}\r\n  ${(p) =>\r\n        p.stacked === 'last' &&\r\n        !p.user &&\r\n        css<any>`\r\n            border-top-left-radius: 1px;\r\n        `};\r\n\r\n    ${(p) =>\r\n        !p.stacked &&\r\n        css<any>`\r\n            ${p.user ? 'border-bottom-right-radius: 1px;' : 'border-bottom-left-radius: 1px;'}\r\n        `};\r\n\r\n    transition: border-radius 500ms linear;\r\n`;\r\n\r\nexport const MessageContentPart = styled.div<{ noPadding?: boolean }>`\r\n    padding: ${(p) => p.theme.sizes?.medium};\r\n\r\n    ${(p) =>\r\n        p.noPadding &&\r\n        css`\r\n            padding: 0;\r\n        `}\r\n\r\n    margin-bottom: ${(p) => p.theme.sizes?.normal};\r\n    &:last-child {\r\n        margin-bottom: 0;\r\n    }\r\n`;\r\n","import React from 'react';\r\nimport { ConversationMessageSender } from '../../types';\r\nimport { ContentBundle, Loader, MessageContainer, MessageContent } from './conversation-styles';\r\n\r\ntype Props = {\r\n    className?: string;\r\n    agentData?: ConversationMessageSender;\r\n};\r\n\r\nconst ConversationLoader: React.FC<Props> = ({ className, agentData }) => {\r\n    return (\r\n        <ContentBundle>\r\n            <MessageContainer>\r\n                <MessageContent>\r\n                    <Loader>\r\n                        <div />\r\n                        <div />\r\n                        <div />\r\n                    </Loader>\r\n                </MessageContent>\r\n            </MessageContainer>\r\n        </ContentBundle>\r\n    );\r\n};\r\n\r\nexport default ConversationLoader;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ntype Props = {\r\n    className?: string;\r\n    name?: string;\r\n    timestamp?: number | null;\r\n};\r\n\r\nconst StyledTimestamp = styled.p`\r\n    && {\r\n        font-size: ${(p) => p.theme.fonts?.small};\r\n        font-weight: 300;\r\n    }\r\n    margin: 0;\r\n    line-height: 1.5em;\r\n    grid-area: info;\r\n    color: ${(p) => p.theme.colors?.text};\r\n`;\r\n\r\nconst getTimestamp = (raw: number) => {\r\n    return new Date(raw).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\r\n};\r\n\r\nconst Timestamp: React.FC<Props> = ({ className, name, timestamp }) => {\r\n    if (!name && !timestamp) {\r\n        return null;\r\n    }\r\n\r\n    let output = '';\r\n    if (name) {\r\n        if (timestamp) {\r\n            output = `${name}: ${getTimestamp(timestamp)}`;\r\n        } else {\r\n            output = name;\r\n        }\r\n    } else if (timestamp) {\r\n        output = getTimestamp(timestamp);\r\n    }\r\n\r\n    return <StyledTimestamp>{output}</StyledTimestamp>;\r\n};\r\n\r\nexport default Timestamp;\r\n","import { SymbolBadge, useProperties } from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ConversationMessageSender } from '../../../types';\r\nimport { ConversationComponentProperties } from '../conversation-component';\r\nimport { Avatar } from '../conversation-styles';\r\nimport Timestamp from './timestamp';\r\n\r\ntype Props = {\r\n    className?: string;\r\n    children: any;\r\n    sender: ConversationMessageSender;\r\n    timestamp: number | null;\r\n};\r\n\r\nconst AgentMessage: React.FC<Props> = ({ className, children, sender, timestamp }) => {\r\n    const { avatar, name } = sender;\r\n    const { avatarSize } = useProperties<ConversationComponentProperties>();\r\n\r\n    return (\r\n        <StyledAgentMessage\r\n            hasAvatar={!!avatar}\r\n            className={appendClassNames(className, 'humany-conversation-agent-message')}\r\n        >\r\n            {avatar && (\r\n                <Avatar avatarSize={avatarSize}>\r\n                    {typeof avatar === 'string' ? (\r\n                        <img src={avatar} />\r\n                    ) : (\r\n                        <SymbolBadge symbol={avatar} />\r\n                    )}\r\n                </Avatar>\r\n            )}\r\n            {children}\r\n            <Timestamp name={name} timestamp={timestamp}></Timestamp>\r\n        </StyledAgentMessage>\r\n    );\r\n};\r\n\r\nexport const StyledAgentMessage = styled.div<any>`\r\n    display: grid;\r\n    margin-right: 0;\r\n    width: 100%;\r\n    ${(p) =>\r\n        p.hasAvatar\r\n            ? css`\r\n                  grid-template-columns: auto 1fr;\r\n                  grid-template-rows: 1fr auto;\r\n                  grid-template-areas:\r\n                      'avatar content'\r\n                      '. info';\r\n              `\r\n            : css`\r\n                  grid-template-columns: 1fr;\r\n                  grid-template-rows: 1fr auto;\r\n                  grid-template-areas:\r\n                      'content'\r\n                      'info';\r\n              `};\r\n`;\r\n\r\nexport default AgentMessage;\r\n","import { useComponent } from '@telia-ace/widget-ui';\r\nimport React, { Suspense } from 'react';\r\nimport { MessageContent, MessageContentPart } from '../conversation-styles';\r\n\r\nexport type Props = {\r\n    type: any;\r\n    content: any;\r\n    isUser: any;\r\n    stacked: any;\r\n};\r\n\r\nconst CustomMessage: React.FC<Props> = (props) => {\r\n    const CustomComponent = useComponent(props.type);\r\n\r\n    if (!CustomComponent) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <Suspense fallback={null}>\r\n            <MessageContent\r\n                user={props.isUser}\r\n                stacked={!!props.stacked && props.stacked}\r\n                fullWidth={!!props.content.form || !!props.content.actions}\r\n            >\r\n                <MessageContentPart\r\n                    noPadding={!!props.content.noPadding && props.content.noPadding}\r\n                >\r\n                    <CustomComponent {...props.content} />\r\n                </MessageContentPart>\r\n            </MessageContent>\r\n        </Suspense>\r\n    );\r\n};\r\n\r\nexport default CustomMessage;\r\n","import { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport Timestamp from './timestamp';\r\n\r\nexport type Props = {\r\n    className?: string;\r\n    timestamp: number;\r\n    discrete?: boolean;\r\n    fullWidth?: boolean;\r\n    children: any;\r\n};\r\n\r\nconst SystemMessage: React.FC<Props> = ({\r\n    className,\r\n    children,\r\n    timestamp,\r\n    discrete,\r\n    fullWidth,\r\n}) => {\r\n    return (\r\n        <StyledSystemMessage\r\n            className={appendClassNames(className, 'humany-conversation-system-message')}\r\n            fullWidth={fullWidth}\r\n        >\r\n            {discrete ? (\r\n                <Discrete className=\"humany-conversation-discrete-message\">\r\n                    {children}\r\n                    <Timestamp timestamp={timestamp}></Timestamp>\r\n                </Discrete>\r\n            ) : (\r\n                <>\r\n                    {children}\r\n                    <Timestamp timestamp={timestamp}></Timestamp>\r\n                </>\r\n            )}\r\n        </StyledSystemMessage>\r\n    );\r\n};\r\n\r\nexport const StyledSystemMessage = styled.div<any>`\r\n    ${(p) => p.fullWidth && 'width: 100%'};\r\n    padding: 0 ${(p) => p.theme.sizes?.large};\r\n    overflow: auto;\r\n`;\r\n\r\nexport const Discrete = styled.div`\r\n    text-align: center;\r\n    word-wrap: break-word;\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    color: ${(p) => p.theme.colors?.text};\r\n    > p {\r\n        margin: 0;\r\n    }\r\n`;\r\n\r\nexport default SystemMessage;\r\n","import { useProperties } from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport { ConversationComponentProperties } from '../conversation-component';\r\nimport Timestamp from './timestamp';\r\n\r\nexport type Props = {\r\n    className?: string;\r\n    timestamp: number;\r\n    children: any;\r\n};\r\n\r\nconst UserMessage: React.FC<Props> = ({ className, children, timestamp }) => {\r\n    const { userLabel = '' } = useProperties<ConversationComponentProperties>();\r\n    return (\r\n        <StyledUserMessage\r\n            className={appendClassNames(className, 'humany-conversation-user-message')}\r\n        >\r\n            {children}\r\n            <Timestamp name={userLabel} timestamp={timestamp}></Timestamp>\r\n        </StyledUserMessage>\r\n    );\r\n};\r\n\r\nconst StyledUserMessage = styled.div`\r\n    margin-left: 15%;\r\n    width: 85%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-end;\r\n`;\r\n\r\nexport default UserMessage;\r\n","import { FormComponent } from '@telia-ace/widget-forms';\r\nimport {\r\n    borderTabStyle,\r\n    buttonCss,\r\n    Html,\r\n    Icon,\r\n    invertedHoverButton,\r\n    Lightbox,\r\n    List,\r\n    SymbolBadge,\r\n    useDispatch,\r\n} from '@telia-ace/widget-ui';\r\nimport { uuid } from '@telia-ace/widget-utilities';\r\nimport React, { Fragment } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport {\r\n    ConversationMessageContent,\r\n    ConversationMessageListItemType,\r\n    ConverstationMessageItem,\r\n} from '../../types';\r\nimport { MessageContent, MessageContentPart as Part, MessageTitle } from './conversation-styles';\r\nimport { CustomMessage } from './message-types';\r\n\r\nconst imageLightboxRenderer = (\r\n    attrs: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLImageElement>, HTMLImageElement>\r\n) => <Lightbox attrs={attrs} />;\r\n\r\nconst htmlParseInstructions = {\r\n    transform: {\r\n        img: imageLightboxRenderer,\r\n    },\r\n};\r\n\r\ntype Props = {\r\n    className?: string;\r\n    content: ConversationMessageContent;\r\n    isUser: boolean;\r\n    stacked?: string;\r\n    CustomComponent?: any;\r\n};\r\n\r\nconst ConversationContent: React.FC<Props> = ({ content, isUser, stacked }) => {\r\n    const dispatch = useDispatch();\r\n    const { title, body, actions, form, type, items } = content;\r\n\r\n    if (type)\r\n        return <CustomMessage type={type} content={content} isUser={isUser} stacked={stacked} />;\r\n\r\n    return (\r\n        <MessageContent\r\n            noPadding\r\n            user={isUser}\r\n            stacked={!!stacked && stacked}\r\n            fullWidth={!!form || !!actions}\r\n        >\r\n            {title && (\r\n                <Part>\r\n                    <MessageTitle variant=\"h2\">{title}</MessageTitle>\r\n                </Part>\r\n            )}\r\n            {body && (\r\n                <Part>\r\n                    <StyledHtml html={body} htmlParseInstruction={htmlParseInstructions} />\r\n                </Part>\r\n            )}\r\n            {form && (\r\n                <Part>\r\n                    <StyledForm\r\n                        {...form}\r\n                        onChange={(key: string, data: any) => {\r\n                            dispatch('form', {\r\n                                data,\r\n                                formKey: form.schema.id,\r\n                                actionKey: key,\r\n                            });\r\n                        }}\r\n                    />\r\n                </Part>\r\n            )}\r\n            {actions && (\r\n                <Part>\r\n                    <StyledActionList\r\n                        items={Object.keys(actions).map((i: any) => {\r\n                            return { label: actions[i], actionKey: i };\r\n                        })}\r\n                        renderItem={(item: any) => {\r\n                            return (\r\n                                <li key={item.actionKey}>\r\n                                    <StyledActionButton\r\n                                        onClick={() => {\r\n                                            dispatch('action', item.actionKey);\r\n                                        }}\r\n                                    >\r\n                                        {item.label}\r\n                                    </StyledActionButton>\r\n                                </li>\r\n                            );\r\n                        }}\r\n                    />\r\n                </Part>\r\n            )}\r\n            {items && (\r\n                <Fragment>\r\n                    <Part key={uuid()} noPadding>\r\n                        <StyledActionList\r\n                            items={items.map(([type, content]: ConverstationMessageItem<any>) => {\r\n                                return { type, content };\r\n                            })}\r\n                            renderItem={(item: any) => {\r\n                                const itemKey = uuid();\r\n                                switch (item.type) {\r\n                                    case ConversationMessageListItemType.Header: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey}>\r\n                                                <strong>{item.content}</strong>\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    case ConversationMessageListItemType.Text: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey}>\r\n                                                <span>{item.content}</span>\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    case ConversationMessageListItemType.HTML: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey}>\r\n                                                <StyledHtml\r\n                                                    html={item.content.body}\r\n                                                    htmlParseInstruction={htmlParseInstructions}\r\n                                                />\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    case ConversationMessageListItemType.Separator: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey} noPadding>\r\n                                                <Separator />\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    case ConversationMessageListItemType.LinkList: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey}>\r\n                                                <StyledLinkList\r\n                                                    items={Object.keys(item.content.actions).map(\r\n                                                        (i: any) => {\r\n                                                            return {\r\n                                                                label: item.content.actions[i],\r\n                                                                actionKey: i,\r\n                                                            };\r\n                                                        }\r\n                                                    )}\r\n                                                    renderItem={(item: any) => {\r\n                                                        return (\r\n                                                            <li key={item.actionKey}>\r\n                                                                <StyledLinkButton\r\n                                                                    help={item.actionKey === 'help'}\r\n                                                                    onClick={() => {\r\n                                                                        dispatch(\r\n                                                                            'action',\r\n                                                                            item.actionKey\r\n                                                                        );\r\n                                                                    }}\r\n                                                                >\r\n                                                                    {item.label}\r\n                                                                    {item.actionKey === 'help' && (\r\n                                                                        <SymbolBadge\r\n                                                                            size={14}\r\n                                                                            symbol={{\r\n                                                                                type: 'Svg',\r\n                                                                                content:\r\n                                                                                    'caret-down',\r\n                                                                            }}\r\n                                                                        />\r\n                                                                    )}\r\n                                                                </StyledLinkButton>\r\n                                                            </li>\r\n                                                        );\r\n                                                    }}\r\n                                                />\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    case ConversationMessageListItemType.ButtonList: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey}>\r\n                                                <StyledButtonList\r\n                                                    items={Object.keys(item.content.actions).map(\r\n                                                        (i: any) => {\r\n                                                            return {\r\n                                                                label: item.content.actions[i],\r\n                                                                actionKey: i,\r\n                                                            };\r\n                                                        }\r\n                                                    )}\r\n                                                    renderItem={(item: any) => {\r\n                                                        return (\r\n                                                            <li key={item.actionKey}>\r\n                                                                <StyledButtonListButton\r\n                                                                    onClick={() => {\r\n                                                                        dispatch(\r\n                                                                            'action',\r\n                                                                            item.actionKey\r\n                                                                        );\r\n                                                                    }}\r\n                                                                >\r\n                                                                    {item.label}\r\n                                                                </StyledButtonListButton>\r\n                                                            </li>\r\n                                                        );\r\n                                                    }}\r\n                                                />\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    case ConversationMessageListItemType.NoGoodAlternative: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey}>\r\n                                                <NoGoodAlternativeWrapper\r\n                                                    onClick={() => {\r\n                                                        dispatch('action', 'help');\r\n                                                    }}\r\n                                                >\r\n                                                    <SymbolBadge\r\n                                                        size={14}\r\n                                                        symbol={{\r\n                                                            type: 'FontAwesome',\r\n                                                            content: 'meh-o',\r\n                                                        }}\r\n                                                    />\r\n                                                    <span>{item.content.body}</span>\r\n                                                </NoGoodAlternativeWrapper>\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    case ConversationMessageListItemType.FeedbackList: {\r\n                                        return (\r\n                                            <ConversationListItem key={itemKey}>\r\n                                                <StyledButtonList\r\n                                                    items={Object.keys(item.content.actions).map(\r\n                                                        (i: any) => {\r\n                                                            return {\r\n                                                                label: item.content.actions[i],\r\n                                                                actionKey: i,\r\n                                                            };\r\n                                                        }\r\n                                                    )}\r\n                                                    renderItem={(item: any) => {\r\n                                                        return (\r\n                                                            <li key={item.actionKey}>\r\n                                                                <FeedbackButton\r\n                                                                    className=\"humany-feedback-button\"\r\n                                                                    disabled={false}\r\n                                                                    aria-pressed={true}\r\n                                                                    data-selected={true}\r\n                                                                    data-direction={'vertical'}\r\n                                                                    onClick={() => {\r\n                                                                        dispatch(\r\n                                                                            'action',\r\n                                                                            item.actionKey\r\n                                                                        );\r\n                                                                    }}\r\n                                                                >\r\n                                                                    <Icon\r\n                                                                        faIcon={\r\n                                                                            item.actionKey == 'yes'\r\n                                                                                ? 'smile-o'\r\n                                                                                : 'frown-o'\r\n                                                                        }\r\n                                                                    />\r\n                                                                    <span>{item.label}</span>\r\n                                                                </FeedbackButton>\r\n                                                            </li>\r\n                                                        );\r\n                                                    }}\r\n                                                />\r\n                                            </ConversationListItem>\r\n                                        );\r\n                                    }\r\n                                    default: {\r\n                                        return (\r\n                                            <Fragment>\r\n                                                <p>Unknown message type</p>\r\n                                                {/* {item.content.map((listItem: any) => (\r\n                                                    <StyledActionButton\r\n                                                        onClick={() => {\r\n                                                            dispatch('action', listItem.key);\r\n                                                        }}\r\n                                                    >\r\n                                                        {listItem.body}\r\n                                                    </StyledActionButton>\r\n                                                ))} */}\r\n                                            </Fragment>\r\n                                        );\r\n                                    }\r\n                                }\r\n                            }}\r\n                        />\r\n                    </Part>\r\n                </Fragment>\r\n            )}\r\n        </MessageContent>\r\n    );\r\n};\r\n\r\nconst StyledForm = styled(FormComponent)`\r\n    & button.humany-form-component-button {\r\n        ${(p) =>\r\n            invertedHoverButton({\r\n                active: false,\r\n                primaryColor: p.theme.colors?.primary,\r\n                secondaryColor: p.theme.colors?.accent,\r\n            })};\r\n        display: block;\r\n        width: 100%;\r\n        margin-bottom: ${(p) => p.theme.sizes?.normal};\r\n    }\r\n    & button.humany-form-component-submit {\r\n        width: 100%;\r\n        margin: 0;\r\n        :not(:last-child) {\r\n            margin-bottom: ${(p) => p.theme.sizes?.normal};\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledHtml = styled(Html)<any>`\r\n    white-space: pre-wrap;\r\n    a {\r\n        color: ${(p) => p.theme.colors.link};\r\n        &:focus {\r\n            ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledActionList = styled(List)`\r\n    padding: 0;\r\n    list-style: none;\r\n    margin: 0 -${(p) => p.theme.sizes?.normal};\r\n    > li {\r\n        margin: ${(p) => p.theme.sizes?.normal};\r\n    }\r\n`;\r\n\r\nconst StyledButtonList = styled(List)`\r\n    padding: 0;\r\n    list-style: none;\r\n    > li {\r\n        margin: ${(p) => p.theme.sizes?.small} ${(p) => p.theme.sizes?.normal};\r\n        margin-left: 0;\r\n        display: inline-block;\r\n    }\r\n`;\r\n\r\nconst StyledButtonListButton = styled.button`\r\n    ${buttonCss};\r\n    display: block;\r\n    background-color: ${(p) => p.theme.colors?.primary};\r\n    width: 100%;\r\n    color: #fff;\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                background-color: transparent;\r\n            `}\r\n    }\r\n`;\r\n\r\nconst StyledLinkList = styled(List)`\r\n    padding: 0;\r\n    list-style: none;\r\n    > li {\r\n        margin-bottom: ${(p) => p.theme.sizes?.normal};\r\n\r\n        &:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledLinkButton = styled.button<{ help: boolean }>`\r\n    display: block;\r\n    background-color: transparent;\r\n    border: none;\r\n    padding: 0;\r\n    font-weight: 300;\r\n    font-family: inherit;\r\n    cursor: pointer;\r\n    color: ${(p) => p.theme.colors?.primary};\r\n\r\n    ${(p) =>\r\n        p.help &&\r\n        css`\r\n            color: ${p.theme.colors?.text};\r\n            text-decoration: underline;\r\n\r\n            i,\r\n            svg {\r\n                margin-left: ${p.theme.sizes?.small};\r\n            }\r\n        `}\r\n`;\r\n\r\nconst StyledActionButton = styled.button`\r\n    ${buttonCss};\r\n    display: block;\r\n    background-color: ${(p) => p.theme.colors?.primary};\r\n    width: 100%;\r\n    color: #fff;\r\n    font-family: Lato;\r\n    font-size: 1rem;\r\n    font-weight: 300;\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                background-color: transparent;\r\n            `}\r\n    }\r\n`;\r\n\r\nconst Separator = styled.div`\r\n    background-color: #efefef;\r\n    height: 1px;\r\n    width: 100%;\r\n`;\r\n\r\nconst NoGoodAlternativeWrapper = styled.div`\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n\r\n    > i,\r\n    svg {\r\n        margin-right: ${(p) => p.theme.sizes?.small};\r\n    }\r\n`;\r\n\r\nconst ConversationListItem = styled.li<{ noPadding?: boolean }>`\r\n    padding-left: ${(p) => (p.noPadding ? 0 : p.theme.sizes?.medium)};\r\n    padding-right: ${(p) => (p.noPadding ? 0 : p.theme.sizes?.medium)};\r\n`;\r\n\r\nconst FeedbackButton = styled.button<{\r\n    'data-selected': boolean;\r\n    'data-direction': 'horizontal' | 'vertical';\r\n}>`\r\n    display: inline-block;\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    background-color: #ffffff !important;\r\n    color: ${(p) => p.theme.colors?.primary} !important;\r\n    border-color: ${(p) => p.theme.colors?.primary} !important;\r\n    font-weight: 300;\r\n    && {\r\n        margin-right: ${(p) => p.theme.sizes?.small};\r\n    }\r\n    ${(p) =>\r\n        p['data-direction'] === 'horizontal' &&\r\n        css`\r\n            width: 225px;\r\n            max-width: calc(50% - ${p.theme.sizes?.large} - ${p.theme.sizes?.small});\r\n        `}\r\n    ${(p) =>\r\n        p['data-direction'] === 'vertical' &&\r\n        css`\r\n            min-width: 150px;\r\n        `}\r\n  ${(p) =>\r\n        invertedHoverButton({\r\n            active: p['data-selected'],\r\n            primaryColor: p.theme.colors?.primary,\r\n            secondaryColor: '#FFFFFF',\r\n        })}\r\n    i {\r\n        margin: 0 ${(p) => p.theme.sizes?.small} 0 0;\r\n        color: ${(p) => p.theme.colors?.primary} !important;\r\n    }\r\n    span {\r\n        color: ${(p) => p.theme.colors?.primary} !important;\r\n    }\r\n`;\r\n\r\nexport default ConversationContent;\r\n","import { FormComponent } from '@telia-ace/widget-forms';\r\nimport {\r\n    borderTabStyle,\r\n    buttonCss,\r\n    Html,\r\n    invertedHoverButton,\r\n    Lightbox,\r\n    List,\r\n    useDispatch,\r\n} from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ConversationMessageType } from '../../conversation-controller';\r\nimport { ConversationMessageContent } from '../../types';\r\nimport { BundledConversationMessage } from './conversation-component';\r\nimport ConversationContent from './conversation-content';\r\nimport {\r\n    ContentBundle,\r\n    MessageContainer,\r\n    MessageContent,\r\n    MessageContentPart as Part,\r\n    MessageTitle,\r\n} from './conversation-styles';\r\nimport { AgentMessage, SystemMessage, UserMessage } from './message-types';\r\n\r\nconst imageLightboxRenderer = (\r\n    attrs: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLImageElement>, HTMLImageElement>\r\n) => <Lightbox attrs={attrs} />;\r\n\r\nconst htmlParseInstructions = {\r\n    transform: {\r\n        img: imageLightboxRenderer,\r\n    },\r\n};\r\n\r\ntype Props = {\r\n    className?: string;\r\n} & BundledConversationMessage;\r\n\r\nconst ConversationMessageComponent: React.FC<Props> = ({\r\n    className,\r\n    timestamp,\r\n    sender,\r\n    type,\r\n    content,\r\n}) => {\r\n    const dispatch = useDispatch();\r\n\r\n    const getMessageStackPosition = (index: number) => {\r\n        let messageOrder = undefined;\r\n        if (content.length > 1) {\r\n            messageOrder = index === 0 ? 'first' : index + 1 === content.length ? 'last' : 'middle';\r\n        }\r\n        return messageOrder;\r\n    };\r\n\r\n    const renderContent = (content: ConversationMessageContent, isUser = false, stacked?: any) => {\r\n        const { title, body, actions, form } = content;\r\n        return (\r\n            <MessageContent\r\n                user={isUser}\r\n                stacked={!!stacked && stacked}\r\n                fullWidth={!!form || !!actions}\r\n            >\r\n                {title && (\r\n                    <Part>\r\n                        <MessageTitle variant=\"h2\">{title}</MessageTitle>\r\n                    </Part>\r\n                )}\r\n                {body && (\r\n                    <Part>\r\n                        <StyledHtml html={body} htmlParseInstruction={htmlParseInstructions} />\r\n                    </Part>\r\n                )}\r\n                {form && (\r\n                    <Part>\r\n                        <StyledForm\r\n                            {...form}\r\n                            onChange={(key: string, data: any) => {\r\n                                dispatch('form', {\r\n                                    data,\r\n                                    formKey: form.schema.id,\r\n                                    actionKey: key,\r\n                                });\r\n                            }}\r\n                        />\r\n                    </Part>\r\n                )}\r\n                {actions && (\r\n                    <Part>\r\n                        <StyledActionList\r\n                            items={Object.keys(actions).map((i: any) => {\r\n                                return { label: actions[i], actionKey: i };\r\n                            })}\r\n                            renderItem={(item: any) => {\r\n                                return (\r\n                                    <li key={item.actionKey}>\r\n                                        <StyledActionButton\r\n                                            onClick={() => {\r\n                                                dispatch('action', item.actionKey);\r\n                                            }}\r\n                                        >\r\n                                            {item.label}\r\n                                        </StyledActionButton>\r\n                                    </li>\r\n                                );\r\n                            }}\r\n                        />\r\n                    </Part>\r\n                )}\r\n            </MessageContent>\r\n        );\r\n    };\r\n\r\n    const createSystemMessage = () => {\r\n        return (\r\n            <>\r\n                {content.map((item) => {\r\n                    const { key, body, title, form, actions } = item;\r\n                    const discrete = !!body && !title && !form && !actions;\r\n                    return (\r\n                        <SystemMessage\r\n                            className={className}\r\n                            key={key}\r\n                            discrete={discrete}\r\n                            timestamp={timestamp}\r\n                            fullWidth={!!form || !!actions}\r\n                        >\r\n                            {discrete && body ? (\r\n                                <Html html={body} htmlParseInstruction={htmlParseInstructions} />\r\n                            ) : (\r\n                                <ConversationContent content={item} isUser={false} />\r\n                            )}\r\n                        </SystemMessage>\r\n                    );\r\n                })}\r\n            </>\r\n        );\r\n    };\r\n\r\n    const createAgentMessage = () => {\r\n        return (\r\n            <AgentMessage sender={sender} timestamp={timestamp} className={className}>\r\n                <ContentBundle>\r\n                    {content.map((item, index) => {\r\n                        return (\r\n                            <MessageContainer key={item.key}>\r\n                                <ConversationContent\r\n                                    content={item}\r\n                                    isUser={false}\r\n                                    stacked={getMessageStackPosition(index)}\r\n                                />\r\n                            </MessageContainer>\r\n                        );\r\n                    })}\r\n                </ContentBundle>\r\n            </AgentMessage>\r\n        );\r\n    };\r\n\r\n    const createUserMessage = () => {\r\n        return (\r\n            <UserMessage timestamp={timestamp} className={className}>\r\n                <ContentBundle>\r\n                    {content.map((item, index) => {\r\n                        return (\r\n                            <MessageContainer key={item.key}>\r\n                                <ConversationContent\r\n                                    content={item}\r\n                                    isUser={true}\r\n                                    stacked={getMessageStackPosition(index)}\r\n                                />\r\n                            </MessageContainer>\r\n                        );\r\n                    })}\r\n                </ContentBundle>\r\n            </UserMessage>\r\n        );\r\n    };\r\n\r\n    switch (type) {\r\n        case ConversationMessageType.System:\r\n            return createSystemMessage();\r\n        case ConversationMessageType.Agent:\r\n            return createAgentMessage();\r\n        case ConversationMessageType.User:\r\n            return createUserMessage();\r\n        default:\r\n            return null;\r\n    }\r\n};\r\n\r\nconst StyledForm = styled(FormComponent)`\r\n    & button.humany-form-component-button {\r\n        ${(p) =>\r\n            invertedHoverButton({\r\n                active: false,\r\n                primaryColor: p.theme.colors?.primary,\r\n                secondaryColor: p.theme.colors?.accent,\r\n            })};\r\n        display: block;\r\n        width: 100%;\r\n        margin-bottom: ${(p) => p.theme.sizes?.normal};\r\n    }\r\n\r\n    & button.humany-form-component-submit {\r\n        width: 100%;\r\n        margin: 0;\r\n        :not(:last-child) {\r\n            margin-bottom: ${(p) => p.theme.sizes?.normal};\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledHtml = styled(Html)<any>`\r\n    white-space: pre-wrap;\r\n\r\n    a {\r\n        color: ${(p) => p.theme.colors.link};\r\n        &:focus {\r\n            ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledActionList = styled(List)`\r\n    padding: 0;\r\n    list-style: none;\r\n    margin: 0 -${(p) => p.theme.sizes?.normal};\r\n    > li {\r\n        margin: ${(p) => p.theme.sizes?.normal};\r\n    }\r\n`;\r\n\r\nconst StyledActionButton = styled.button`\r\n    ${buttonCss};\r\n    display: block;\r\n    background-color: ${(p) => p.theme.colors?.primary};\r\n    width: 100%;\r\n    color: #fff;\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                background-color: transparent;\r\n            `}\r\n    }\r\n`;\r\n\r\nexport default ConversationMessageComponent;\r\n","import {\r\n    borderTabStyle,\r\n    headingElement,\r\n    useProperties,\r\n    useScroll,\r\n    useTransitionEnd,\r\n} from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ConversationMessageSender } from '../../types';\r\nimport {\r\n    BundledConversationMessage,\r\n    ConversationComponentProperties,\r\n} from './conversation-component';\r\nimport ConversationInput from './conversation-input';\r\nimport ConversationLoader from './conversation-loader';\r\nimport ConversationMessageComponent from './conversation-message';\r\nimport { AgentMessage } from './message-types';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst Conversation: React.FC<Props> = ({ className }) => {\r\n    const lastEntry = useRef(document.createElement('div'));\r\n    const [scrollableCss, viewElem] = useScroll(true);\r\n    const { messages, loading, typingActors } = useProperties<ConversationComponentProperties>();\r\n    const [canSmooth, setCanSmooth] = useState(false);\r\n    const scrollView = useCallback(\r\n        (lastEntry: any, smooth = true) => {\r\n            if (lastEntry !== null && lastEntry.current !== null) {\r\n                if (messages && messages.length === 1) {\r\n                    lastEntry.current.focus();\r\n                }\r\n                /**\r\n                 * Don't scroll on typing state if the user has scrolled up a bit.\r\n                 */\r\n                if (\r\n                    lastEntry.current.id.indexOf('typing_') !== -1 &&\r\n                    viewElem.current.scrollTopMax - viewElem.current.scrollTop >\r\n                        lastEntry.current.clientHeight + 100\r\n                ) {\r\n                    return;\r\n                }\r\n                setTimeout(() => {\r\n                    if (lastEntry.current) {\r\n                        lastEntry.current.scrollIntoView({\r\n                            block: 'end',\r\n                            behavior: smooth ? 'smooth' : 'auto',\r\n                        });\r\n                    }\r\n                }, 0);\r\n            }\r\n        },\r\n        [lastEntry]\r\n    );\r\n\r\n    useEffect(() => {\r\n        if (canSmooth) {\r\n            scrollView(lastEntry);\r\n        }\r\n    }, [messages, typingActors]);\r\n\r\n    useTransitionEnd(() => {\r\n        setCanSmooth(true);\r\n        scrollView(lastEntry, false);\r\n    });\r\n\r\n    const renderTypingActors = () => {\r\n        if (typingActors && typingActors.length) {\r\n            return typingActors.map((actor: ConversationMessageSender, index) => {\r\n                return (\r\n                    <MessageEntry\r\n                        id={`typing_${actor.name}`}\r\n                        ref={typingActors.length ? lastEntry : null}\r\n                        key={`typing_${actor.name}`}\r\n                    >\r\n                        <AgentMessage timestamp={Date.now()} sender={actor}>\r\n                            <ConversationLoader></ConversationLoader>\r\n                        </AgentMessage>\r\n                    </MessageEntry>\r\n                );\r\n            });\r\n        }\r\n        return null;\r\n    };\r\n\r\n    return (\r\n        <Wrapper className={appendClassNames(className, 'humany-conversation-component')}>\r\n            <Scrollable tabIndex={0} scrollableCss={scrollableCss} ref={viewElem}>\r\n                {messages && messages.length\r\n                    ? messages.map((message: BundledConversationMessage, index: any) => {\r\n                          const { type, timestamp, sender, content } = message;\r\n                          return (\r\n                              <MessageEntry\r\n                                  className={'humany-conversation-entry'}\r\n                                  tabIndex={-1}\r\n                                  key={`${type}_${sender?.name}_${timestamp}_${content[0].key}`}\r\n                                  ref={\r\n                                      index + 1 < messages.length\r\n                                          ? null\r\n                                          : typingActors.length\r\n                                          ? null\r\n                                          : lastEntry\r\n                                  }\r\n                              >\r\n                                  <ConversationMessageComponent {...message} />\r\n                              </MessageEntry>\r\n                          );\r\n                      })\r\n                    : null}\r\n                {renderTypingActors()}\r\n                {loading && (\r\n                    <MessageEntry>\r\n                        <ConversationLoader />\r\n                    </MessageEntry>\r\n                )}\r\n            </Scrollable>\r\n            <ConversationInput />\r\n        </Wrapper>\r\n    );\r\n};\r\n\r\nconst Wrapper = styled.div`\r\n    position: absolute;\r\n    right: 0;\r\n    left: 0;\r\n    bottom: 0;\r\n    top: 0;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n`;\r\n\r\nconst Scrollable = styled.div<{ scrolling: boolean } & any>`\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    flex: 0 1 100%;\r\n    padding: 0 ${(p) => p.theme.sizes?.medium};\r\n    ${(p) => !!p.scrollableCss && p.scrollableCss};\r\n    &:focus {\r\n        ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\r\n    }\r\n`;\r\n\r\nconst MessageEntry = styled.div`\r\n    margin: 0;\r\n    margin-bottom: ${(p) => p.theme.sizes?.medium};\r\n\r\n    &:first-of-type {\r\n        margin-top: ${(p) => p.theme.sizes?.medium};\r\n    }\r\n\r\n    &:last-of-type {\r\n        padding-bottom: ${(p) => p.theme.sizes?.medium};\r\n    }\r\n\r\n    * {\r\n        font-size: ${(p) => p.theme.fonts?.normal};\r\n    }\r\n\r\n    & span,\r\n    p,\r\n    a,\r\n    div {\r\n        font-weight: 300;\r\n    }\r\n\r\n    & b,\r\n    h1 {\r\n        font-weight: normal;\r\n    }\r\n\r\n    ${headingElement(\r\n        'h1',\r\n        css`\r\n            font-weight: normal;\r\n        `\r\n    )}\r\n`;\r\n\r\nexport default Conversation;\r\n"],"names":["Wrapper","imageLightboxRenderer","htmlParseInstructions","Part"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 import { ConversationEndedBehavior, ConversationPlatform, UnregisterControllerDelegate } from './conversation-platform';
-export { ConversationComponent } from './components/conversation/plugin';
-export { ConversationReturnButtonComponent } from './components/return-button/plugin';
 export { ConversationController, ConversationEntry, ConversationMessageType, } from './conversation-controller';
 export type { ConversationMessage } from './conversation-controller';
 export { ConversationMessageListItemType } from './types';
 export type { ConversationMessageContent, ConversationMessageSender, ConverstationMessageItem, } from './types';
+export { ConversationComponent, ConversationReturnButtonComponent } from './ui';
 export { registerCustomMessageComponent } from './utils/custom-message';
 export { ConversationPlatform, ConversationEndedBehavior };
 export type { UnregisterControllerDelegate };