@telia-ace/widget-conversation 1.0.12 → 1.0.15

package/dist/conversation.js

@@ -0,0 +1,558 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Input, Button, borderTabStyle, SymbolBadge, useDispatch, useProperties, useScroll, invertedHoverButton, Html, List, buttonCss, Lightbox, useTransitionEnd, headingElement } from "@telia-ace/widget-ui";
+import { appendClassNames } from "@telia-ace/widget-utilities";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import styled, { css } from "styled-components";
+import { C as ContentBundle, M as MessageContainer, a as MessageContent, L as Loader, b as ConversationMessageType, S as SystemMessage, c as ConversationContent, A as AgentMessage, U as UserMessage } from "./index2.js";
+import { FormComponent } from "@telia-ace/widget-forms";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-services";
+import "@telia-ace/widget-plugins";
+const ConversationInput = ({ className }) => {
+  const [inputText, setInputText] = useState("");
+  const [inputFocus, setInputFocus] = useState(false);
+  const [calculatedLineHeight, setCalculatedLineHeight] = useState(0);
+  const [textareaMaxHeight, setTextareaMaxHeight] = useState(0);
+  const dispatch = useDispatch();
+  const {
+    inputPlaceholder = "Type your message",
+    inputHidden = false,
+    inputDisabled = false,
+    sendButtonLabel = "Send message",
+    inputMultiline: multiline = true,
+    secondaryAction
+  } = useProperties();
+  const [scrollableCss, inputRef] = useScroll(true);
+  useEffect(() => {
+    if (inputRef.current) {
+      const { lineHeight, maxHeight } = getComputedStyle(inputRef.current);
+      if (lineHeight && lineHeight.indexOf("px") > -1) {
+        const lineHeightNumber = lineHeight.split("px");
+        const calcLH = parseInt(lineHeightNumber[0], 10);
+        setCalculatedLineHeight(calcLH);
+        const maxHeightNumber = maxHeight.split("px");
+        setTextareaMaxHeight(parseInt(maxHeightNumber[0], 10));
+      }
+    }
+  }, [inputRef.current]);
+  const submit = (e) => {
+    if (!e.shiftKey || !multiline) {
+      e.preventDefault();
+      if (inputText && inputText.length > 0) {
+        dispatch("user-submit", { text: inputText });
+        setInputText("");
+        onChange("");
+      }
+    } else if (inputText.length < 1) {
+      e.preventDefault();
+    }
+  };
+  const onSecondaryActionButtonClick = (e) => {
+    if (!secondaryAction) {
+      return;
+    }
+    e.preventDefault();
+    dispatch("action", secondaryAction.action);
+  };
+  const calculateHeight = (value) => {
+    if (multiline && inputRef.current) {
+      const scrollHeight = inputRef.current.scrollHeight;
+      if (scrollHeight > calculatedLineHeight) {
+        inputRef.current.style.height = "auto";
+        let areaHeight = scrollHeight;
+        if (value.length < 1) {
+          areaHeight = calculatedLineHeight;
+        }
+        inputRef.current.style.height = `${areaHeight}px`;
+        if (areaHeight >= textareaMaxHeight) {
+          inputRef.current.style.overflowY = "scroll";
+        } else {
+          inputRef.current.style.overflowY = "hidden";
+        }
+      }
+    }
+  };
+  const onChange = (value) => {
+    calculateHeight(value);
+    setInputText(value);
+    if (value && value.length > 0) {
+      dispatch("user-typing", { textLength: value.length });
+    }
+  };
+  if (inputHidden) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Wrapper$1, {
+    grow: multiline,
+    className: appendClassNames("humany-conversation-input", className),
+    "data-has-focus": inputFocus,
+    scrollableCss
+  }, secondaryAction && /* @__PURE__ */ React.createElement(StyledButton, {
+    disabled: inputDisabled,
+    onClick: onSecondaryActionButtonClick,
+    title: secondaryAction.label,
+    "aria-label": secondaryAction.label
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 24,
+    symbol: { type: "Svg", content: secondaryAction.icon || "browse" }
+  })), multiline ? /* @__PURE__ */ React.createElement(StyledTextArea, {
+    value: inputText,
+    onChange,
+    onEnter: submit,
+    disabled: inputDisabled,
+    "aria-label": inputPlaceholder,
+    placeholder: inputPlaceholder,
+    onFocusChange: setInputFocus,
+    type: "textarea",
+    rows: 1,
+    ref: inputRef
+  }) : /* @__PURE__ */ React.createElement(StyledInput, {
+    value: inputText,
+    onChange,
+    onEnter: submit,
+    disabled: inputDisabled,
+    "aria-label": inputPlaceholder,
+    placeholder: inputPlaceholder,
+    onFocusChange: setInputFocus
+  }), /* @__PURE__ */ React.createElement(StyledButton, {
+    disabled: inputDisabled,
+    onClick: submit,
+    title: sendButtonLabel,
+    "aria-label": sendButtonLabel
+  }, /* @__PURE__ */ React.createElement(SendSymbol, {
+    size: 22,
+    symbol: { type: "Svg", content: "send" },
+    hasContent: inputText && inputText.length
+  })));
+};
+const StyledTextArea = styled(Input)`
+    resize: none;
+    flex: 1;
+    flex-shrink: 1;
+    min-height: 1.2em;
+    max-height: 148px;
+    line-height: 1.2em;
+    height: 1.2em;
+    padding: 0;
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    border: none;
+    transition: height 200ms linear;
+    outline: none;
+`;
+const StyledInput = styled(Input)`
+    flex: 1;
+    border: none;
+    background-color: transparent;
+    font-weight: 300;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    line-height: 1.2em;
+    outline: none;
+    padding-left: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    &::placeholder {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.textLight;
+}};
+        font-style: italic;
+    }
+`;
+const StyledButton = styled(Button)`
+    flex: 0 0 50px;
+    align-self: stretch;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    color: #a6a6a6;
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+    }
+`;
+const Wrapper$1 = styled.div`
+    ${(p) => p.grow ? css`
+                  min-height: 50px;
+                  max-height: 150px;
+              ` : css`
+                  height: 50px;
+              `}
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
+}};
+    border-top: ${(p) => p.theme.inputBorder};
+    ${(p) => p["data-has-focus"] && css`
+            ${(p2) => {
+  var _a;
+  return ((_a = p2.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+        `}
+    ${StyledTextArea} {
+        ${(p) => !!p.scrollableCss && p.scrollableCss}
+    }
+`;
+const SendSymbol = styled((_a) => {
+  var _b = _a, { hasContent } = _b, other = __objRest(_b, ["hasContent"]);
+  return /* @__PURE__ */ React.createElement(SymbolBadge, __spreadValues({}, other));
+})`
+    line,
+    path {
+        stroke: ${(p) => {
+  var _a;
+  return p.hasContent ? (_a = p.theme.colors) == null ? void 0 : _a.primary : "#a6a6a6";
+}};
+        fill: ${(p) => {
+  var _a;
+  return p.hasContent ? (_a = p.theme.colors) == null ? void 0 : _a.primary : "#a6a6a6";
+}};
+    }
+`;
+const ConversationLoader = ({ className, agentData }) => {
+  return /* @__PURE__ */ React.createElement(ContentBundle, null, /* @__PURE__ */ React.createElement(MessageContainer, null, /* @__PURE__ */ React.createElement(MessageContent, null, /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null)))));
+};
+const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
+  attrs
+});
+const htmlParseInstructions = {
+  transform: {
+    img: imageLightboxRenderer
+  }
+};
+const ConversationMessageComponent = ({
+  className,
+  timestamp,
+  sender,
+  type,
+  content
+}) => {
+  useDispatch();
+  const getMessageStackPosition = (index) => {
+    let messageOrder = void 0;
+    if (content.length > 1) {
+      messageOrder = index === 0 ? "first" : index + 1 === content.length ? "last" : "middle";
+    }
+    return messageOrder;
+  };
+  const createSystemMessage = () => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, content.map((item) => {
+      const { key, body, title, form, actions } = item;
+      const discrete = !!body && !title && !form && !actions;
+      return /* @__PURE__ */ React.createElement(SystemMessage, {
+        className,
+        key,
+        discrete,
+        timestamp,
+        fullWidth: !!form || !!actions
+      }, discrete && body ? /* @__PURE__ */ React.createElement(Html, {
+        html: body,
+        htmlParseInstruction: htmlParseInstructions
+      }) : /* @__PURE__ */ React.createElement(ConversationContent, {
+        content: item,
+        isUser: false
+      }));
+    }));
+  };
+  const createAgentMessage = () => {
+    return /* @__PURE__ */ React.createElement(AgentMessage, {
+      sender,
+      timestamp,
+      className
+    }, /* @__PURE__ */ React.createElement(ContentBundle, null, content.map((item, index) => {
+      return /* @__PURE__ */ React.createElement(MessageContainer, {
+        key: item.key
+      }, /* @__PURE__ */ React.createElement(ConversationContent, {
+        content: item,
+        isUser: false,
+        stacked: getMessageStackPosition(index)
+      }));
+    })));
+  };
+  const createUserMessage = () => {
+    return /* @__PURE__ */ React.createElement(UserMessage, {
+      timestamp,
+      className
+    }, /* @__PURE__ */ React.createElement(ContentBundle, null, content.map((item, index) => {
+      return /* @__PURE__ */ React.createElement(MessageContainer, {
+        key: item.key
+      }, /* @__PURE__ */ React.createElement(ConversationContent, {
+        content: item,
+        isUser: true,
+        stacked: getMessageStackPosition(index)
+      }));
+    })));
+  };
+  switch (type) {
+    case ConversationMessageType.System:
+      return createSystemMessage();
+    case ConversationMessageType.Agent:
+      return createAgentMessage();
+    case ConversationMessageType.User:
+      return createUserMessage();
+    default:
+      return null;
+  }
+};
+styled(FormComponent)`
+    & button.humany-form-component-button {
+        ${(p) => {
+  var _a, _b;
+  return invertedHoverButton({
+    active: false,
+    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
+    secondaryColor: (_b = p.theme.colors) == null ? void 0 : _b.accent
+  });
+}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    }
+
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        }
+    }
+`;
+styled(Html)`
+    white-space: pre-wrap;
+
+    a {
+        color: ${(p) => p.theme.colors.link};
+        &:focus {
+            ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+        }
+    }
+`;
+styled(List)`
+    padding: 0;
+    list-style: none;
+    margin: 0 -${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    > li {
+        margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    }
+`;
+styled.button`
+    ${buttonCss};
+    display: block;
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    width: 100%;
+    color: #fff;
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+            `;
+}}
+    }
+`;
+const Conversation = ({ className }) => {
+  const lastEntry = useRef(document.createElement("div"));
+  const [scrollableCss, viewElem] = useScroll(true);
+  const { messages, loading, typingActors } = useProperties();
+  const [canSmooth, setCanSmooth] = useState(false);
+  const scrollView = useCallback((lastEntry2, smooth = true) => {
+    if (lastEntry2 !== null && lastEntry2.current !== null) {
+      if (messages && messages.length === 1) {
+        lastEntry2.current.focus();
+      }
+      if (lastEntry2.current.id.indexOf("typing_") !== -1 && viewElem.current.scrollTopMax - viewElem.current.scrollTop > lastEntry2.current.clientHeight + 100) {
+        return;
+      }
+      setTimeout(() => {
+        if (lastEntry2.current) {
+          lastEntry2.current.scrollIntoView({
+            block: "end",
+            behavior: smooth ? "smooth" : "auto"
+          });
+        }
+      }, 0);
+    }
+  }, [lastEntry]);
+  useEffect(() => {
+    if (canSmooth) {
+      scrollView(lastEntry);
+    }
+  }, [messages, typingActors]);
+  useTransitionEnd(() => {
+    setCanSmooth(true);
+    scrollView(lastEntry, false);
+  });
+  const renderTypingActors = () => {
+    if (typingActors && typingActors.length) {
+      return typingActors.map((actor, index) => {
+        return /* @__PURE__ */ React.createElement(MessageEntry, {
+          id: `typing_${actor.name}`,
+          ref: typingActors.length ? lastEntry : null,
+          key: `typing_${actor.name}`
+        }, /* @__PURE__ */ React.createElement(AgentMessage, {
+          timestamp: Date.now(),
+          sender: actor
+        }, /* @__PURE__ */ React.createElement(ConversationLoader, null)));
+      });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ React.createElement(Wrapper, {
+    className: appendClassNames(className, "humany-conversation-component")
+  }, /* @__PURE__ */ React.createElement(Scrollable, {
+    tabIndex: 0,
+    scrollableCss,
+    ref: viewElem
+  }, messages && messages.length ? messages.map((message, index) => {
+    const { type, timestamp, sender, content } = message;
+    return /* @__PURE__ */ React.createElement(MessageEntry, {
+      className: "humany-conversation-entry",
+      tabIndex: -1,
+      key: `${type}_${sender == null ? void 0 : sender.name}_${timestamp}_${content[0].key}`,
+      ref: index + 1 < messages.length ? null : typingActors.length ? null : lastEntry
+    }, /* @__PURE__ */ React.createElement(ConversationMessageComponent, __spreadValues({}, message)));
+  }) : null, renderTypingActors(), loading && /* @__PURE__ */ React.createElement(MessageEntry, null, /* @__PURE__ */ React.createElement(ConversationLoader, null))), /* @__PURE__ */ React.createElement(ConversationInput, null));
+};
+const Wrapper = styled.div`
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+`;
+const Scrollable = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 0 1 100%;
+    padding: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    ${(p) => !!p.scrollableCss && p.scrollableCss};
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+    }
+`;
+const MessageEntry = styled.div`
+    margin: 0;
+    margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+
+    &:first-of-type {
+        margin-top: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    }
+
+    &:last-of-type {
+        padding-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    }
+
+    * {
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    }
+
+    & span,
+    p,
+    a,
+    div {
+        font-weight: 300;
+    }
+
+    & b,
+    h1 {
+        font-weight: normal;
+    }
+
+    ${headingElement("h1", css`
+            font-weight: normal;
+        `)}
+`;
+export { Conversation as default };
+//# sourceMappingURL=conversation.js.map

package/dist/conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.js","sources":["../src/ui/conversation/conversation-input.tsx","../src/ui/conversation/conversation-loader.tsx","../src/ui/conversation/conversation-message.tsx","../src/ui/conversation/conversation.tsx"],"sourcesContent":["import {\n    borderTabStyle,\n    Button,\n    Input,\n    SymbolBadge,\n    useDispatch,\n    useProperties,\n    useScroll,\n} from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ConversationComponentProperties } from './conversation-component';\n\ntype Props = {\n    className?: string;\n};\n\nconst ConversationInput: React.FC<Props> = ({ className }) => {\n    const [inputText, setInputText] = useState('');\n    const [inputFocus, setInputFocus] = useState(false);\n    const [calculatedLineHeight, setCalculatedLineHeight] = useState(0);\n    const [textareaMaxHeight, setTextareaMaxHeight] = useState(0);\n    const dispatch = useDispatch();\n    const {\n        inputPlaceholder = 'Type your message',\n        inputHidden = false,\n        inputDisabled = false,\n        sendButtonLabel = 'Send message',\n        inputMultiline: multiline = true,\n        secondaryAction,\n    } = useProperties<ConversationComponentProperties>();\n    const [scrollableCss, inputRef] = useScroll(true);\n\n    useEffect(() => {\n        if (inputRef.current) {\n            const { lineHeight, maxHeight } = getComputedStyle(inputRef.current);\n            if (lineHeight && lineHeight.indexOf('px') > -1) {\n                const lineHeightNumber = lineHeight.split('px');\n                const calcLH = parseInt(lineHeightNumber[0], 10);\n                setCalculatedLineHeight(calcLH);\n                const maxHeightNumber = maxHeight.split('px');\n                setTextareaMaxHeight(parseInt(maxHeightNumber[0], 10));\n            }\n        }\n    }, [inputRef.current]);\n\n    const submit = (e: any) => {\n        if (!e.shiftKey || !multiline) {\n            e.preventDefault();\n            if (inputText && inputText.length > 0) {\n                dispatch('user-submit', { text: inputText });\n                setInputText('');\n                onChange('');\n            }\n        } else if (inputText.length < 1) {\n            e.preventDefault();\n        }\n    };\n\n    const onSecondaryActionButtonClick = (e: any) => {\n        if (!secondaryAction) {\n            return;\n        }\n        e.preventDefault();\n        dispatch('action', secondaryAction.action);\n    };\n\n    const calculateHeight = (value: string) => {\n        if (multiline && inputRef.current) {\n            const scrollHeight = inputRef.current.scrollHeight;\n            if (scrollHeight > calculatedLineHeight) {\n                inputRef.current.style.height = 'auto';\n                let areaHeight = scrollHeight;\n                if (value.length < 1) {\n                    areaHeight = calculatedLineHeight;\n                }\n                inputRef.current.style.height = `${areaHeight}px`;\n\n                if (areaHeight >= textareaMaxHeight) {\n                    inputRef.current.style.overflowY = 'scroll';\n                } else {\n                    inputRef.current.style.overflowY = 'hidden';\n                }\n            }\n        }\n    };\n\n    const onChange = (value: string) => {\n        calculateHeight(value);\n        setInputText(value);\n        if (value && value.length > 0) {\n            dispatch('user-typing', { textLength: value.length });\n        }\n    };\n\n    if (inputHidden) {\n        return null;\n    }\n\n    return (\n        <Wrapper\n            grow={multiline}\n            className={appendClassNames('humany-conversation-input', className)}\n            data-has-focus={inputFocus}\n            scrollableCss={scrollableCss}\n        >\n            {secondaryAction && (\n                <StyledButton\n                    disabled={inputDisabled}\n                    onClick={onSecondaryActionButtonClick}\n                    title={secondaryAction.label}\n                    aria-label={secondaryAction.label}\n                >\n                    <SymbolBadge\n                        size={24}\n                        symbol={{ type: 'Svg', content: secondaryAction.icon || 'browse' }}\n                    />\n                </StyledButton>\n            )}\n            {multiline ? (\n                <StyledTextArea\n                    value={inputText}\n                    onChange={onChange}\n                    onEnter={submit}\n                    disabled={inputDisabled}\n                    aria-label={inputPlaceholder}\n                    placeholder={inputPlaceholder}\n                    onFocusChange={setInputFocus}\n                    type={'textarea'}\n                    rows={1}\n                    ref={inputRef}\n                />\n            ) : (\n                <StyledInput\n                    value={inputText}\n                    onChange={onChange}\n                    onEnter={submit}\n                    disabled={inputDisabled}\n                    aria-label={inputPlaceholder}\n                    placeholder={inputPlaceholder}\n                    onFocusChange={setInputFocus}\n                />\n            )}\n            <StyledButton\n                disabled={inputDisabled}\n                onClick={submit}\n                title={sendButtonLabel}\n                aria-label={sendButtonLabel}\n            >\n                <SendSymbol\n                    size={22}\n                    symbol={{ type: 'Svg', content: 'send' }}\n                    hasContent={inputText && inputText.length}\n                />\n            </StyledButton>\n        </Wrapper>\n    );\n};\n\nconst StyledTextArea = styled(Input)<any>`\n    resize: none;\n    flex: 1;\n    flex-shrink: 1;\n    min-height: 1.2em;\n    max-height: 148px;\n    line-height: 1.2em;\n    height: 1.2em;\n    padding: 0;\n    margin: ${(p) => p.theme.sizes?.small} ${(p) => p.theme.sizes?.medium};\n    font-size: ${(p) => p.theme.fonts?.normal};\n    border: none;\n    transition: height 200ms linear;\n    outline: none;\n`;\n\nconst StyledInput = styled(Input)<any>`\n    flex: 1;\n    border: none;\n    background-color: transparent;\n    font-weight: 300;\n    font-size: ${(p) => p.theme.fonts?.normal};\n    line-height: 1.2em;\n    outline: none;\n    padding-left: ${(p) => p.theme.sizes?.large};\n    color: ${(p) => p.theme.colors?.text};\n    &::placeholder {\n        color: ${(p) => p.theme.colors?.textLight};\n        font-style: italic;\n    }\n`;\n\nconst StyledButton = styled(Button)<any>`\n    flex: 0 0 50px;\n    align-self: stretch;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    color: #a6a6a6;\n    &:focus {\n        ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\n    }\n`;\n\nconst Wrapper = styled.div<{ 'data-has-focus': boolean } & any>`\n    ${(p) =>\n        p.grow\n            ? css`\n                  min-height: 50px;\n                  max-height: 150px;\n              `\n            : css`\n                  height: 50px;\n              `}\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    background-color: ${(p) => p.theme.colors?.accent};\n    border-top: ${(p) => p.theme.inputBorder};\n    ${(p) =>\n        p['data-has-focus'] &&\n        css`\n            ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\n        `}\n    ${StyledTextArea} {\n        ${(p) => !!p.scrollableCss && p.scrollableCss}\n    }\n`;\n\nconst SendSymbol = styled(({ hasContent, ...other }) => <SymbolBadge {...other} />)`\n    line,\n    path {\n        stroke: ${(p) => (p.hasContent ? p.theme.colors?.primary : '#a6a6a6')};\n        fill: ${(p) => (p.hasContent ? p.theme.colors?.primary : '#a6a6a6')};\n    }\n`;\n\nexport default ConversationInput;\n","import React from 'react';\nimport { ConversationMessageSender } from '../../types';\nimport { ContentBundle, Loader, MessageContainer, MessageContent } from './conversation-styles';\n\ntype Props = {\n    className?: string;\n    agentData?: ConversationMessageSender;\n};\n\nconst ConversationLoader: React.FC<Props> = ({ className, agentData }) => {\n    return (\n        <ContentBundle>\n            <MessageContainer>\n                <MessageContent>\n                    <Loader>\n                        <div />\n                        <div />\n                        <div />\n                    </Loader>\n                </MessageContent>\n            </MessageContainer>\n        </ContentBundle>\n    );\n};\n\nexport default ConversationLoader;\n","import { FormComponent } from '@telia-ace/widget-forms';\nimport {\n    borderTabStyle,\n    buttonCss,\n    Html,\n    invertedHoverButton,\n    Lightbox,\n    List,\n    useDispatch,\n} from '@telia-ace/widget-ui';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\nimport { ConversationMessageType } from '../../conversation-controller';\nimport { ConversationMessageContent } from '../../types';\nimport { BundledConversationMessage } from './conversation-component';\nimport ConversationContent from './conversation-content';\nimport {\n    ContentBundle,\n    MessageContainer,\n    MessageContent,\n    MessageContentPart as Part,\n    MessageTitle,\n} from './conversation-styles';\nimport { AgentMessage, SystemMessage, UserMessage } from './message-types';\n\nconst imageLightboxRenderer = (\n    attrs: React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLImageElement>, HTMLImageElement>\n) => <Lightbox attrs={attrs} />;\n\nconst htmlParseInstructions = {\n    transform: {\n        img: imageLightboxRenderer,\n    },\n};\n\ntype Props = {\n    className?: string;\n} & BundledConversationMessage;\n\nconst ConversationMessageComponent: React.FC<Props> = ({\n    className,\n    timestamp,\n    sender,\n    type,\n    content,\n}) => {\n    const dispatch = useDispatch();\n\n    const getMessageStackPosition = (index: number) => {\n        let messageOrder = undefined;\n        if (content.length > 1) {\n            messageOrder = index === 0 ? 'first' : index + 1 === content.length ? 'last' : 'middle';\n        }\n        return messageOrder;\n    };\n\n    const renderContent = (content: ConversationMessageContent, isUser = false, stacked?: any) => {\n        const { title, body, actions, form } = content;\n        return (\n            <MessageContent\n                user={isUser}\n                stacked={!!stacked && stacked}\n                fullWidth={!!form || !!actions}\n            >\n                {title && (\n                    <Part>\n                        <MessageTitle variant=\"h2\">{title}</MessageTitle>\n                    </Part>\n                )}\n                {body && (\n                    <Part>\n                        <StyledHtml html={body} htmlParseInstruction={htmlParseInstructions} />\n                    </Part>\n                )}\n                {form && (\n                    <Part>\n                        <StyledForm\n                            {...form}\n                            onChange={(key: string, data: any) => {\n                                dispatch('form', {\n                                    data,\n                                    formKey: form.schema.id,\n                                    actionKey: key,\n                                });\n                            }}\n                        />\n                    </Part>\n                )}\n                {actions && (\n                    <Part>\n                        <StyledActionList\n                            items={Object.keys(actions).map((i: any) => {\n                                return { label: actions[i], actionKey: i };\n                            })}\n                            renderItem={(item: any) => {\n                                return (\n                                    <li key={item.actionKey}>\n                                        <StyledActionButton\n                                            onClick={() => {\n                                                dispatch('action', item.actionKey);\n                                            }}\n                                        >\n                                            {item.label}\n                                        </StyledActionButton>\n                                    </li>\n                                );\n                            }}\n                        />\n                    </Part>\n                )}\n            </MessageContent>\n        );\n    };\n\n    const createSystemMessage = () => {\n        return (\n            <>\n                {content.map((item) => {\n                    const { key, body, title, form, actions } = item;\n                    const discrete = !!body && !title && !form && !actions;\n                    return (\n                        <SystemMessage\n                            className={className}\n                            key={key}\n                            discrete={discrete}\n                            timestamp={timestamp}\n                            fullWidth={!!form || !!actions}\n                        >\n                            {discrete && body ? (\n                                <Html html={body} htmlParseInstruction={htmlParseInstructions} />\n                            ) : (\n                                <ConversationContent content={item} isUser={false} />\n                            )}\n                        </SystemMessage>\n                    );\n                })}\n            </>\n        );\n    };\n\n    const createAgentMessage = () => {\n        return (\n            <AgentMessage sender={sender} timestamp={timestamp} className={className}>\n                <ContentBundle>\n                    {content.map((item, index) => {\n                        return (\n                            <MessageContainer key={item.key}>\n                                <ConversationContent\n                                    content={item}\n                                    isUser={false}\n                                    stacked={getMessageStackPosition(index)}\n                                />\n                            </MessageContainer>\n                        );\n                    })}\n                </ContentBundle>\n            </AgentMessage>\n        );\n    };\n\n    const createUserMessage = () => {\n        return (\n            <UserMessage timestamp={timestamp} className={className}>\n                <ContentBundle>\n                    {content.map((item, index) => {\n                        return (\n                            <MessageContainer key={item.key}>\n                                <ConversationContent\n                                    content={item}\n                                    isUser={true}\n                                    stacked={getMessageStackPosition(index)}\n                                />\n                            </MessageContainer>\n                        );\n                    })}\n                </ContentBundle>\n            </UserMessage>\n        );\n    };\n\n    switch (type) {\n        case ConversationMessageType.System:\n            return createSystemMessage();\n        case ConversationMessageType.Agent:\n            return createAgentMessage();\n        case ConversationMessageType.User:\n            return createUserMessage();\n        default:\n            return null;\n    }\n};\n\nconst StyledForm = styled(FormComponent)`\n    & button.humany-form-component-button {\n        ${(p) =>\n            invertedHoverButton({\n                active: false,\n                primaryColor: p.theme.colors?.primary,\n                secondaryColor: p.theme.colors?.accent,\n            })};\n        display: block;\n        width: 100%;\n        margin-bottom: ${(p) => p.theme.sizes?.normal};\n    }\n\n    & button.humany-form-component-submit {\n        width: 100%;\n        margin: 0;\n        :not(:last-child) {\n            margin-bottom: ${(p) => p.theme.sizes?.normal};\n        }\n    }\n`;\n\nconst StyledHtml = styled(Html)<any>`\n    white-space: pre-wrap;\n\n    a {\n        color: ${(p) => p.theme.colors.link};\n        &:focus {\n            ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\n        }\n    }\n`;\n\nconst StyledActionList = styled(List)`\n    padding: 0;\n    list-style: none;\n    margin: 0 -${(p) => p.theme.sizes?.normal};\n    > li {\n        margin: ${(p) => p.theme.sizes?.normal};\n    }\n`;\n\nconst StyledActionButton = styled.button`\n    ${buttonCss};\n    display: block;\n    background-color: ${(p) => p.theme.colors?.primary};\n    width: 100%;\n    color: #fff;\n    &:focus {\n        ${(p) =>\n            p.theme.accessibility?.isTabbing &&\n            css`\n                ${borderTabStyle}\n                background-color: transparent;\n            `}\n    }\n`;\n\nexport default ConversationMessageComponent;\n","import {\n    borderTabStyle,\n    headingElement,\n    useProperties,\n    useScroll,\n    useTransitionEnd,\n} from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ConversationMessageSender } from '../../types';\nimport {\n    BundledConversationMessage,\n    ConversationComponentProperties,\n} from './conversation-component';\nimport ConversationInput from './conversation-input';\nimport ConversationLoader from './conversation-loader';\nimport ConversationMessageComponent from './conversation-message';\nimport { AgentMessage } from './message-types';\n\ntype Props = {\n    className: string;\n};\n\nconst Conversation: React.FC<Props> = ({ className }) => {\n    const lastEntry = useRef(document.createElement('div'));\n    const [scrollableCss, viewElem] = useScroll(true);\n    const { messages, loading, typingActors } = useProperties<ConversationComponentProperties>();\n    const [canSmooth, setCanSmooth] = useState(false);\n    const scrollView = useCallback(\n        (lastEntry: any, smooth = true) => {\n            if (lastEntry !== null && lastEntry.current !== null) {\n                if (messages && messages.length === 1) {\n                    lastEntry.current.focus();\n                }\n                /**\n                 * Don't scroll on typing state if the user has scrolled up a bit.\n                 */\n                if (\n                    lastEntry.current.id.indexOf('typing_') !== -1 &&\n                    viewElem.current.scrollTopMax - viewElem.current.scrollTop >\n                        lastEntry.current.clientHeight + 100\n                ) {\n                    return;\n                }\n                setTimeout(() => {\n                    if (lastEntry.current) {\n                        lastEntry.current.scrollIntoView({\n                            block: 'end',\n                            behavior: smooth ? 'smooth' : 'auto',\n                        });\n                    }\n                }, 0);\n            }\n        },\n        [lastEntry]\n    );\n\n    useEffect(() => {\n        if (canSmooth) {\n            scrollView(lastEntry);\n        }\n    }, [messages, typingActors]);\n\n    useTransitionEnd(() => {\n        setCanSmooth(true);\n        scrollView(lastEntry, false);\n    });\n\n    const renderTypingActors = () => {\n        if (typingActors && typingActors.length) {\n            return typingActors.map((actor: ConversationMessageSender, index) => {\n                return (\n                    <MessageEntry\n                        id={`typing_${actor.name}`}\n                        ref={typingActors.length ? lastEntry : null}\n                        key={`typing_${actor.name}`}\n                    >\n                        <AgentMessage timestamp={Date.now()} sender={actor}>\n                            <ConversationLoader></ConversationLoader>\n                        </AgentMessage>\n                    </MessageEntry>\n                );\n            });\n        }\n        return null;\n    };\n\n    return (\n        <Wrapper className={appendClassNames(className, 'humany-conversation-component')}>\n            <Scrollable tabIndex={0} scrollableCss={scrollableCss} ref={viewElem}>\n                {messages && messages.length\n                    ? messages.map((message: BundledConversationMessage, index: any) => {\n                          const { type, timestamp, sender, content } = message;\n                          return (\n                              <MessageEntry\n                                  className={'humany-conversation-entry'}\n                                  tabIndex={-1}\n                                  key={`${type}_${sender?.name}_${timestamp}_${content[0].key}`}\n                                  ref={\n                                      index + 1 < messages.length\n                                          ? null\n                                          : typingActors.length\n                                          ? null\n                                          : lastEntry\n                                  }\n                              >\n                                  <ConversationMessageComponent {...message} />\n                              </MessageEntry>\n                          );\n                      })\n                    : null}\n                {renderTypingActors()}\n                {loading && (\n                    <MessageEntry>\n                        <ConversationLoader />\n                    </MessageEntry>\n                )}\n            </Scrollable>\n            <ConversationInput />\n        </Wrapper>\n    );\n};\n\nconst Wrapper = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    top: 0;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n`;\n\nconst Scrollable = styled.div<{ scrolling: boolean } & any>`\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    flex: 0 1 100%;\n    padding: 0 ${(p) => p.theme.sizes?.normal};\n    ${(p) => !!p.scrollableCss && p.scrollableCss};\n    &:focus {\n        ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\n    }\n`;\n\nconst MessageEntry = styled.div`\n    margin: 0;\n    margin-bottom: ${(p) => p.theme.sizes?.medium};\n\n    &:first-of-type {\n        margin-top: ${(p) => p.theme.sizes?.medium};\n    }\n\n    &:last-of-type {\n        padding-bottom: ${(p) => p.theme.sizes?.medium};\n    }\n\n    * {\n        font-size: ${(p) => p.theme.fonts?.normal};\n    }\n\n    & span,\n    p,\n    a,\n    div {\n        font-weight: 300;\n    }\n\n    & b,\n    h1 {\n        font-weight: normal;\n    }\n\n    ${headingElement(\n        'h1',\n        css`\n            font-weight: normal;\n        `\n    )}\n`;\n\nexport default Conversation;\n"],"names":["Wrapper"],"mappings":"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"}

package/{lib → dist}/index.d.ts

@@ -1,9 +1,9 @@
-import { ConversationEndedBehavior, ConversationPlatform, UnregisterControllerDelegate } from './conversation-platform';
-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 };
+import { ConversationEndedBehavior, ConversationPlatform, UnregisterControllerDelegate } from './conversation-platform';
+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, StyledButtonList } from './ui';
+export { registerCustomMessageComponent } from './utils/custom-message';
+export { ConversationPlatform, ConversationEndedBehavior };
+export type { UnregisterControllerDelegate };

package/dist/index.js

@@ -0,0 +1,10 @@
+export { i as ConversationComponent, f as ConversationController, e as ConversationEndedBehavior, g as ConversationEntry, h as ConversationMessageListItemType, b as ConversationMessageType, d as ConversationPlatform, j as ConversationReturnButtonComponent, k as StyledButtonList, r as registerCustomMessageComponent } from "./index2.js";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-services";
+import "@telia-ace/widget-utilities";
+import "@telia-ace/widget-forms";
+import "@telia-ace/widget-plugins";
+import "@telia-ace/widget-ui";
+import "react";
+import "styled-components";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}