aov-agent 1.0.18 → 1.0.21

package/dist/agent-ui/components/Assistant/AgentButton/AgentButton.js

@@ -1,25 +1,47 @@
 import React from "react";
 import PropTypes from "prop-types";
+import StarIcon from "../../../resources/star-icon.svg";
 import "./AgentButton.scss";
-import iconImg from "../../../resources/assistant-avatar.svg";
-
-/**
- * AgentButton - Floating button to trigger AI assistant
- *
- * @param {Function} onClick - Click handler to open assistant
- * @returns {React.ReactElement} Agent button component
- */
 var AgentButton = function AgentButton(_ref) {
-  var onClick = _ref.onClick;
-  return /*#__PURE__*/React.createElement("div", {
+  var onClick = _ref.onClick,
+    isOpen = _ref.isOpen;
+  var buttonClass = "aov-agent-button".concat(isOpen ? ' aov-agent-button--compact' : '');
+  return /*#__PURE__*/React.createElement("button", {
     onClick: onClick,
-    className: "aov-agent-button"
+    className: buttonClass
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "aov-agent-button__icon"
   }, /*#__PURE__*/React.createElement("img", {
-    src: iconImg,
-    alt: "AI Assistant Icon"
-  }));
+    src: StarIcon,
+    alt: ""
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "aov-agent-button__content"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "aov-agent-button__text"
+  }, "AOV assistant"), /*#__PURE__*/React.createElement("span", {
+    className: "aov-agent-button__arrow"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "8",
+    cy: "8",
+    r: "7",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 5L10 8L6 11",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))));
 };
 AgentButton.propTypes = {
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool
 };
 export default AgentButton;

package/dist/agent-ui/components/Assistant/AgentButton/AgentButton.scss

@@ -5,28 +5,32 @@
   z-index: 380;
   display: flex;
   align-items: center;
-  gap: 6px;
+  padding: 8px;
   border: none;
   border-radius: 50px;
-  box-shadow: 0 4px 20px rgba(10, 40, 70, 0.5),
-              0 8px 32px rgba(26, 74, 92, 0.4);
+  background: linear-gradient(0deg, rgba(0, 205, 174, 0.15) 0%, rgba(0, 205, 174, 0.15) 100%), #FFF;
+
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1),
+              0 4px 20px rgba(6, 105, 116, 0.15);
   cursor: pointer;
-  transition: all 0.3s ease;
-  max-width: 60px;
+  will-change: transform, border-radius, padding;
+  transition:
+    padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+    border-radius 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+    background 0.3s ease,
+    box-shadow 0.3s ease;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 24px rgba(10, 40, 70, 0.6),
-                0 12px 40px rgba(26, 74, 92, 0.5);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
+                0 8px 32px rgba(6, 105, 116, 0.2);
   }
 
   &:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 12px rgba(10, 40, 70, 0.5);
+    transform: scale(0.96);
   }
 
   &:focus {
-    outline: 2px solid #fff;
+    outline: 2px solid #066974;
     outline-offset: 2px;
   }
 
@@ -34,24 +38,111 @@
     outline: none;
   }
 
-  img{
-    max-width: 100%;
-    border-radius: 50%;
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+    will-change: transform, width, height;
+    transition:
+      width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+      height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+      transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &:hover &__icon {
+    transform: scale(1.1) rotate(15deg);
+  }
+
+  &__content {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 6px;
+    width: 130px;
+    padding-left: 8px;
+    padding-right: 4px;
+    overflow: hidden;
+    will-change: width, opacity, padding;
+    transition:
+      width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+      padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+      opacity 0.25s ease;
+  }
+
+  &__text {
+    color: #066974;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    white-space: nowrap;
+    letter-spacing: -0.01em;
+    will-change: transform, opacity;
+    transition:
+      transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
+      opacity 0.2s ease;
   }
 
-  &__badge {
+  &__arrow {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 2px 20px;
-    border: 2px solid rgba(255, 255, 255, 0.4);
-    border-radius: 50px;
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(4px);
-    color: #fff;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 1px;
+    color: #066974;
+    opacity: 0.6;
+    flex-shrink: 0;
+    will-change: transform, opacity;
+    transition:
+      transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
+      opacity 0.2s ease;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
   }
-}
 
+  &:hover &__arrow {
+    opacity: 1;
+    transform: translateX(2px);
+  }
+
+  &--compact {
+    padding: 10px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #d4f0f2 0%, #e8f4f5 100%);
+
+    .aov-agent-button__icon {
+      width: 32px;
+      height: 32px;
+    }
+
+    .aov-agent-button__content {
+      width: 0;
+      padding-left: 0;
+      padding-right: 0;
+      opacity: 0;
+    }
+
+    .aov-agent-button__text {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+
+    .aov-agent-button__arrow {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+
+    &:hover .aov-agent-button__icon {
+      transform: scale(1.15);
+    }
+  }
+}

package/dist/agent-ui/components/Assistant/Assistant.js

@@ -2,10 +2,10 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { AgentProvider, AgentContext } from "../../contexts/AgentContext.js";
 import { SuggestionsProvider } from "../../contexts/SuggestionsContext.js";
+import ResizableModal from "../ResizableModal/ResizableModal.js";
 import AgentButton from "./AgentButton/AgentButton.js";
 import ThreadProvider from "./ThreadProvider.js";
 import AssistantWidget from "./AssistantWidget/AssistantWidget.js";
-import ResizableModal from "../ResizableModal/ResizableModal.js";
 import "./Assistant.scss";
 var AssistantCore = function AssistantCore() {
   var _useContext = useContext(AgentContext),
@@ -15,8 +15,9 @@ var AssistantCore = function AssistantCore() {
     className: "aov-assistant-core"
   }, /*#__PURE__*/React.createElement(AgentButton, {
     onClick: function onClick() {
-      return setOpenAgent(true);
-    }
+      return setOpenAgent(!openAgent);
+    },
+    isOpen: openAgent
   }), /*#__PURE__*/React.createElement(ResizableModal, {
     open: openAgent,
     onClose: function onClose() {
@@ -46,7 +47,6 @@ export var Assistant = function Assistant(_ref) {
     apiUrl = _ref.apiUrl,
     appName = _ref.appName,
     customToolRenderers = _ref.customToolRenderers;
-  if (!shop.showAgentChat) return null;
   return /*#__PURE__*/React.createElement(AgentProvider, {
     contextValue: {
       appName: appName,

package/dist/agent-ui/components/Assistant/AssistantWidget/AssistantWidget.js

@@ -1,89 +1,34 @@
-var _excluded = ["shop"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useState, useContext, useMemo } from "react";
 import PropTypes from "prop-types";
-import { Badge, BlockStack, Box, Button, InlineStack, Popover, Spinner, Text } from "@shopify/polaris";
-import { ComposeIcon, XIcon } from "@shopify/polaris-icons";
-import { ThreadContext } from "../../../contexts/ThreadContext.js";
-import { useThread, useMessage } from "@assistant-ui/react";
+import { Popover, Spinner } from "@shopify/polaris";
 import { Composer, Thread, ThreadWelcome } from "@assistant-ui/react-ui";
-import { MarkdownText } from "../Markdown/MarkdownText.js";
-import MathRenderer from "../Markdown/MathRenderer.js";
-import { useThreadAutoScrollFix } from "../ThreadProvider.js";
-import Suggestions from "../Suggestions/Suggestions.js";
 import "@assistant-ui/react-markdown/styles/dot.css";
-import ToolResult from "../ToolResult/ToolResult.js";
-import ListChat from "./components/ListChat.js";
-import "./AssistantWidget.scss";
-import Avatar from "../../../resources/assistant-avatar.svg";
-import { welcomeSuggestions, welComeMessage } from "../../../const/option";
+import { ThreadContext } from "../../../contexts/ThreadContext.js";
+import { useThreadViewport } from "../../../hooks/useThreadViewport.js";
+import Suggestions from "../Suggestions/Suggestions.js";
+
+// import Avatar from "@resources/assistant-avatar.svg";
 import { AgentContext } from "../../../contexts/AgentContext.js";
-import { ContactSupportCard } from "../ToolResult/CardTool.js";
-var AssistantText = /*#__PURE__*/React.memo(function AssistantText(props) {
-  try {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "assistant-markdown-text"
-    }, /*#__PURE__*/React.createElement(MathRenderer, null, /*#__PURE__*/React.createElement(MarkdownText, props)));
-  } catch (err) {
-    console.error("Error rendering markdown text:", err);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "assistant-markdown-text"
-    }, props.children);
-  }
-});
-var AssistantTool = /*#__PURE__*/React.memo(function AssistantTool(_ref) {
-  var shop = _ref.shop,
-    props = _objectWithoutProperties(_ref, _excluded);
-  try {
-    return /*#__PURE__*/React.createElement(ToolResult, _extends({}, props, {
-      shop: shop
-    }));
-  } catch (err) {
-    console.error("Error rendering tool result:", err);
-    return null;
-  }
-});
-var AssistantMessageFooter = function AssistantMessageFooter() {
-  var messages = useThread(function (state) {
-    return state.messages;
-  });
-  var currentMessage = useMessage();
-  var isRunning = useThread(function (state) {
-    return state.isRunning;
-  });
-  if (isRunning) return null;
-  var currentIndex = messages.findIndex(function (m) {
-    return m.id === currentMessage.id;
-  });
-  var userMessage = messages.slice(0, currentIndex).reverse().find(function (m) {
-    return m.role === "user";
-  });
-  if (!userMessage) return null;
-  var userContent = Array.isArray(userMessage.content) ? userMessage.content.filter(function (part) {
-    return part.type === "text";
-  }).map(function (part) {
-    return part.text;
-  }).join(" ") : userMessage.content;
-  return /*#__PURE__*/React.createElement(ContactSupportCard, {
-    userContent: userContent
-  });
-};
-var AssistantWidget = function AssistantWidget(_ref2) {
-  var onClose = _ref2.onClose;
+import ListChat from "./sections/ListChat.js";
+import AllSessions from "./sections/AllSessions.js";
+import ChatHeader from "./sections/ChatHeader.js";
+import CustomWelcome from "./sections/CustomWelcome.js";
+import { AssistantText, AssistantTool, AssistantMessageFooter } from "./sections/AssistantMessage.js";
+import "./AssistantWidget.scss";
+var AssistantWidget = function AssistantWidget(_ref) {
+  var onClose = _ref.onClose;
   var _useContext = useContext(AgentContext),
     appName = _useContext.appName,
     shop = _useContext.shop;
   var _useContext2 = useContext(ThreadContext),
     threads = _useContext2.threads,
-    loadingThreads = _useContext2.loadingThreads,
     getThread = _useContext2.getThread,
     loadingMessages = _useContext2.loadingMessages,
     thread = _useContext2.thread,
@@ -91,30 +36,29 @@ var AssistantWidget = function AssistantWidget(_ref2) {
     resetThread = _useContext2.resetThread,
     updateThread = _useContext2.updateThread,
     deleteThread = _useContext2.deleteThread;
-  var _useThreadAutoScrollF = useThreadAutoScrollFix(),
-    autoScroll = _useThreadAutoScrollF.autoScroll,
-    handleScroll = _useThreadAutoScrollF.handleScroll;
+  var _useThreadViewport = useThreadViewport(),
+    autoScroll = _useThreadViewport.autoScroll,
+    handleScroll = _useThreadViewport.handleScroll,
+    isRunning = _useThreadViewport.isRunning;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     popoverActive = _useState2[0],
     setPopoverActive = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showAllSessions = _useState4[0],
+    setShowAllSessions = _useState4[1];
   var togglePopoverActive = useCallback(function () {
-    return setPopoverActive(function (popoverActive) {
-      return !popoverActive;
+    return setPopoverActive(function (prev) {
+      return !prev;
     });
   }, []);
-  var activator = /*#__PURE__*/React.createElement(Box, {
-    width: "fit-content"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: togglePopoverActive,
-    disclosure: true,
-    variant: "monochromePlain"
-  }, /*#__PURE__*/React.createElement(Box, {
-    width: "fit-content",
-    minWidth: "60px"
-  }, /*#__PURE__*/React.createElement(Text, {
-    truncate: true
-  }, thread && "title" in thread ? thread.title : "New chat"))));
+  var handleNewChat = useCallback(function () {
+    setShowAllSessions(false);
+    _setThread({});
+    resetThread();
+  }, [_setThread, resetThread]);
+  var isWelcomeScreen = (!thread || !thread.id) && !isRunning && !loadingMessages && !showAllSessions;
   var assistantComponents = useMemo(function () {
     return {
       Text: AssistantText,
@@ -127,82 +71,61 @@ var AssistantWidget = function AssistantWidget(_ref2) {
     };
   }, [shop]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "AOV-Sidekick__Container"
-  }, /*#__PURE__*/React.createElement(Box, {
-    paddingBlockStart: "300",
-    paddingBlockEnd: "200",
-    paddingInlineStart: "200",
-    paddingInlineEnd: "300",
-    borderBlockEndWidth: "0165",
-    borderColor: "border-disabled"
-  }, /*#__PURE__*/React.createElement(InlineStack, {
-    align: "space-between",
-    blockAlign: "center",
-    gap: "100",
-    wrap: false
-  }, loadingThreads && !(thread !== null && thread !== void 0 && thread.title) ? /*#__PURE__*/React.createElement(Spinner, {
-    size: "small"
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "AOV-Sidekick__ChatSelector"
-  }, /*#__PURE__*/React.createElement(Popover, {
+    className: "AOV-Sidekick__Container".concat(isWelcomeScreen ? " AOV-Sidekick__Container--welcome" : "")
+  }, /*#__PURE__*/React.createElement(ChatHeader, {
+    isWelcomeScreen: isWelcomeScreen,
+    onClose: onClose,
+    onHistoryClick: togglePopoverActive,
+    onNewChat: handleNewChat
+  }), /*#__PURE__*/React.createElement(Popover, {
     active: popoverActive,
-    activator: activator,
+    activator: /*#__PURE__*/React.createElement("div", null),
     onClose: togglePopoverActive,
-    preferredAlignment: "start"
+    preferredAlignment: "left",
+    fullWidth: true
   }, /*#__PURE__*/React.createElement(ListChat, {
     threads: threads,
-    setThread: function setThread(thread) {
+    setThread: function setThread(selectedThread) {
       togglePopoverActive();
-      if ("id" in thread) {
-        getThread(thread.id, thread);
+      if ("id" in selectedThread) {
+        getThread(selectedThread.id, selectedThread);
       } else {
-        _setThread(thread);
+        _setThread(selectedThread);
       }
     },
     updateThread: updateThread,
-    deleteThread: deleteThread
-  }))), /*#__PURE__*/React.createElement(Box, {
-    width: "90px"
-  }, /*#__PURE__*/React.createElement(InlineStack, {
-    wrap: false,
-    blockAlign: "center",
-    gap: "100"
-  }, /*#__PURE__*/React.createElement(Badge, {
-    tone: "info-strong"
-  }, "BETA"), /*#__PURE__*/React.createElement(Button, {
-    icon: ComposeIcon,
-    variant: "monochromePlain",
-    onClick: function onClick() {
-      _setThread({});
-      resetThread();
+    deleteThread: deleteThread,
+    onViewAll: function onViewAll() {
+      togglePopoverActive();
+      setShowAllSessions(true);
+    },
+    onClose: togglePopoverActive
+  })), showAllSessions && /*#__PURE__*/React.createElement(AllSessions, {
+    threads: threads,
+    setThread: function setThread(selectedThread) {
+      setShowAllSessions(false);
+      if ("id" in selectedThread) {
+        getThread(selectedThread.id, selectedThread);
+      } else {
+        _setThread(selectedThread);
+      }
+    },
+    updateThread: updateThread,
+    deleteThread: deleteThread,
+    onBack: function onBack() {
+      return setShowAllSessions(false);
     }
-  }), /*#__PURE__*/React.createElement(Button, {
-    icon: XIcon,
-    variant: "monochromePlain",
-    onClick: onClose
-  }))))), /*#__PURE__*/React.createElement(Thread.Root, {
+  }), /*#__PURE__*/React.createElement(Thread.Root, {
+    className: showAllSessions ? "AOV-Sidekick__Hidden" : "",
     config: {
-      welcome: {
-        message: /*#__PURE__*/React.createElement(BlockStack, {
-          gap: "200",
-          inlineAlign: "center"
-        }, /*#__PURE__*/React.createElement(InlineStack, {
-          gap: "200",
-          blockAlign: "center"
-        }, /*#__PURE__*/React.createElement(Text, {
-          variant: "headingMd"
-        }, "Hi! I'm Pemond"), /*#__PURE__*/React.createElement(Badge, {
-          tone: "info-strong"
-        }, "BETA")), /*#__PURE__*/React.createElement(Text, {
-          tone: "subdued"
-        }, welComeMessage(appName)))
-      },
       assistantAvatar: {
-        src: Avatar,
+        src: "",
         alt: "Pemond"
       },
       assistantMessage: {
         allowEdit: false,
+        allowCopy: true,
+        allowReload: true,
         components: assistantComponents
       },
       userMessage: {
@@ -216,20 +139,12 @@ var AssistantWidget = function AssistantWidget(_ref2) {
     className: "AOV-Sidekick__Loading"
   }, /*#__PURE__*/React.createElement(Spinner, {
     size: "small"
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ThreadWelcome.Root, null, /*#__PURE__*/React.createElement(ThreadWelcome.Center, null, /*#__PURE__*/React.createElement(ThreadWelcome.Avatar, {
-    size: "large"
-  }), /*#__PURE__*/React.createElement(ThreadWelcome.Message, null)), /*#__PURE__*/React.createElement("div", {
-    className: "aui-thread-welcome-suggestion-container"
-  }, welcomeSuggestions(appName).map(function (prompt, index) {
-    return /*#__PURE__*/React.createElement(ThreadWelcome.Suggestion, {
-      key: index,
-      suggestion: {
-        prompt: prompt
-      }
-    });
-  }))), /*#__PURE__*/React.createElement(Thread.Messages, null))), /*#__PURE__*/React.createElement(Thread.ViewportFooter, null, /*#__PURE__*/React.createElement(Suggestions, null), /*#__PURE__*/React.createElement(Composer.Root, null, /*#__PURE__*/React.createElement(Composer.Input, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ThreadWelcome.Root, null, /*#__PURE__*/React.createElement(CustomWelcome, {
+    appName: appName,
+    name: shop === null || shop === void 0 ? void 0 : shop.firstName
+  })), /*#__PURE__*/React.createElement(Thread.Messages, null))), /*#__PURE__*/React.createElement(Thread.ViewportFooter, null, /*#__PURE__*/React.createElement(Suggestions, null), /*#__PURE__*/React.createElement(Composer.Root, null, /*#__PURE__*/React.createElement(Composer.Input, {
     autoFocus: true,
-    placeholder: "Ask anything ..."
+    placeholder: "Ask anything"
   }), /*#__PURE__*/React.createElement(Composer.Action, null)))));
 };
 AssistantWidget.propTypes = {