aov-agent 1.0.1 → 1.0.6

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

@@ -7,13 +7,10 @@ import ThreadProvider from "./ThreadProvider.js";
 import AssistantWidget from "./AssistantWidget/AssistantWidget.js";
 import ResizableModal from "../ResizableModal/ResizableModal.js";
 import "./Assistant.scss";
-var AssistantCore = function AssistantCore(_ref) {
-  var shop = _ref.shop,
-    apiUrl = _ref.apiUrl;
+var AssistantCore = function AssistantCore() {
   var _useContext = useContext(AgentContext),
     openAgent = _useContext.openAgent,
     setOpenAgent = _useContext.setOpenAgent;
-  if (!(shop !== null && shop !== void 0 && shop.showAgentChat)) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: "aov-assistant-core"
   }, /*#__PURE__*/React.createElement(AgentButton, {
@@ -26,48 +23,46 @@ var AssistantCore = function AssistantCore(_ref) {
       return setOpenAgent(false);
     },
     accessibilityLabel: "Mavi"
-  }, /*#__PURE__*/React.createElement(SuggestionsProvider, null, /*#__PURE__*/React.createElement(ThreadProvider, {
-    shop: shop,
-    apiUrl: apiUrl
-  }, /*#__PURE__*/React.createElement(AssistantWidget, {
-    shop: shop,
+  }, /*#__PURE__*/React.createElement(SuggestionsProvider, null, /*#__PURE__*/React.createElement(ThreadProvider, null, /*#__PURE__*/React.createElement(AssistantWidget, {
     onClose: function onClose() {
       return setOpenAgent(false);
     }
   })))));
 };
-AssistantCore.propTypes = {
-  shop: PropTypes.shape({
-    showAgentChat: PropTypes.bool,
-    id: PropTypes.string
-  }),
-  apiUrl: PropTypes.string
-};
 
-/**
- * Assistant - Main AI assistant component with chat interface
- *
- * @param {Object} shop - Shop data object
- * @param {boolean} shop.showAgentChat - Whether to show the agent chat
- * @param {string} shop.id - Shop identifier
- * @param {string} apiUrl - API endpoint URL for chat
- * @returns {React.ReactElement} Assistant component
+/**
+ * Assistant - Main AI assistant component with chat interface
+ *
+ * @param {Object} shop - Shop data object
+ * @param {boolean} shop.showAgentChat - Whether to show the agent chat
+ * @param {string} shop.id - Shop identifier
+ * @param {string} apiUrl - API endpoint URL for chat
+ * @param {string} appName - Application name
+ * @param {Object} customToolRenderers - Custom renderers for tools
+ * @returns {React.ReactElement} Assistant component
  */
-export var Assistant = function Assistant(_ref2) {
-  var shop = _ref2.shop,
-    apiUrl = _ref2.apiUrl;
-  return /*#__PURE__*/React.createElement(AgentProvider, null, /*#__PURE__*/React.createElement(AssistantCore, {
-    shop: shop || {
-      showAgentChat: true
-    },
-    apiUrl: apiUrl
-  }));
+export var Assistant = function Assistant(_ref) {
+  var shop = _ref.shop,
+    apiUrl = _ref.apiUrl,
+    appName = _ref.appName,
+    customToolRenderers = _ref.customToolRenderers;
+  if (!shop.showAgentChat) return null;
+  return /*#__PURE__*/React.createElement(AgentProvider, {
+    contextValue: {
+      appName: appName,
+      shop: shop,
+      apiUrl: apiUrl,
+      customToolRenderers: customToolRenderers
+    }
+  }, /*#__PURE__*/React.createElement(AssistantCore, null));
 };
 Assistant.propTypes = {
   shop: PropTypes.shape({
     showAgentChat: PropTypes.bool,
     id: PropTypes.string
   }),
-  apiUrl: PropTypes.string
+  apiUrl: PropTypes.string,
+  appName: PropTypes.string,
+  customToolRenderers: PropTypes.object
 };
 export default Assistant;

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

@@ -1,3 +1,3 @@
-.aov-assistant-core {
-  position: relative;
-}
+.aov-assistant-core {
+  position: relative;
+}

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

@@ -1,14 +1,17 @@
+var _excluded = ["shop"];
 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 { Box, Button, InlineStack, Popover, Spinner } from "@shopify/polaris";
+import { Box, Button, InlineStack, Popover, Spinner, Text } from "@shopify/polaris";
 import { ComposeIcon, XIcon } from "@shopify/polaris-icons";
-import { connect } from "react-redux";
 import { ThreadContext } from "../../../contexts/ThreadContext.js";
 import { Composer, Thread, ThreadWelcome } from "@assistant-ui/react-ui";
 import { MarkdownText } from "../Markdown/MarkdownText.js";
@@ -19,6 +22,9 @@ 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 } from "../../../const/option";
+import { AgentContext } from "../../../contexts/AgentContext.js";
 var AssistantText = /*#__PURE__*/React.memo(function AssistantText(props) {
   try {
     return /*#__PURE__*/React.createElement("div", {
@@ -31,27 +37,33 @@ var AssistantText = /*#__PURE__*/React.memo(function AssistantText(props) {
     }, props.children);
   }
 });
-var AssistantTool = /*#__PURE__*/React.memo(function AssistantTool(props) {
+var AssistantTool = /*#__PURE__*/React.memo(function AssistantTool(_ref) {
+  var shop = _ref.shop,
+    props = _objectWithoutProperties(_ref, _excluded);
   try {
-    return /*#__PURE__*/React.createElement(ToolResult, props);
+    return /*#__PURE__*/React.createElement(ToolResult, _extends({}, props, {
+      shop: shop
+    }));
   } catch (err) {
     console.error("Error rendering tool result:", err);
     return null;
   }
 });
-var AssistantWidget = function AssistantWidget(_ref) {
-  var shop = _ref.shop,
-    onClose = _ref.onClose;
-  var _useContext = useContext(ThreadContext),
-    threads = _useContext.threads,
-    loadingThreads = _useContext.loadingThreads,
-    getThread = _useContext.getThread,
-    loadingMessages = _useContext.loadingMessages,
-    thread = _useContext.thread,
-    _setThread = _useContext.setThread,
-    resetThread = _useContext.resetThread,
-    updateThread = _useContext.updateThread,
-    deleteThread = _useContext.deleteThread;
+var AssistantWidget = function AssistantWidget(_ref2) {
+  var onClose = _ref2.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,
+    _setThread = _useContext2.setThread,
+    resetThread = _useContext2.resetThread,
+    updateThread = _useContext2.updateThread,
+    deleteThread = _useContext2.deleteThread;
   var _useThreadAutoScrollF = useThreadAutoScrollFix(),
     autoScroll = _useThreadAutoScrollF.autoScroll,
     handleScroll = _useThreadAutoScrollF.handleScroll;
@@ -73,19 +85,24 @@ var AssistantWidget = function AssistantWidget(_ref) {
   }, /*#__PURE__*/React.createElement(Box, {
     width: "fit-content",
     minWidth: "60px"
-  }, thread && "title" in thread ? thread.title : "New chat")));
+  }, /*#__PURE__*/React.createElement(Text, {
+    truncate: true
+  }, thread && "title" in thread ? thread.title : "New chat"))));
   var assistantComponents = useMemo(function () {
     return {
       Text: AssistantText,
-      ToolFallback: AssistantTool
+      ToolFallback: function ToolFallback(props) {
+        return /*#__PURE__*/React.createElement(AssistantTool, _extends({
+          shop: shop
+        }, props));
+      }
     };
-  }, []);
-  var welcomeSuggestions = ["How do I create my first Buy X Get Y campaign?", "How do I set a spending threshold for free gifts?", "How do I customize the Pop-up for my campaign?", "How do I check campaign performance and reports?"];
+  }, [shop]);
   return /*#__PURE__*/React.createElement("div", {
     className: "AOV-Sidekick__Container"
   }, /*#__PURE__*/React.createElement(Box, {
     paddingBlockStart: "300",
-    paddingBlockEnd: "050",
+    paddingBlockEnd: "200",
     paddingInlineStart: "200",
     paddingInlineEnd: "300"
   }, /*#__PURE__*/React.createElement(InlineStack, {
@@ -136,8 +153,7 @@ var AssistantWidget = function AssistantWidget(_ref) {
         message: "Hi! I'm Mavi, AOV Free Gift Assistant. I'm here to help you."
       },
       assistantAvatar: {
-        src: "",
-        // TODO: Add avatar path
+        src: Avatar,
         alt: "Mavi"
       },
       assistantMessage: {
@@ -159,7 +175,7 @@ var AssistantWidget = function AssistantWidget(_ref) {
     size: "large"
   }), /*#__PURE__*/React.createElement(ThreadWelcome.Message, null)), /*#__PURE__*/React.createElement("div", {
     className: "aui-thread-welcome-suggestion-container"
-  }, welcomeSuggestions.map(function (prompt, index) {
+  }, welcomeSuggestions(appName).map(function (prompt, index) {
     return /*#__PURE__*/React.createElement(ThreadWelcome.Suggestion, {
       key: index,
       suggestion: {
@@ -172,16 +188,6 @@ var AssistantWidget = function AssistantWidget(_ref) {
   }), /*#__PURE__*/React.createElement(Composer.Action, null)))));
 };
 AssistantWidget.propTypes = {
-  shop: PropTypes.shape({
-    id: PropTypes.string,
-    showAgentChat: PropTypes.bool
-  }),
   onClose: PropTypes.func.isRequired
 };
-var mapStateToProps = function mapStateToProps(state) {
-  var _state$shop;
-  return {
-    shop: (_state$shop = state.shop) === null || _state$shop === void 0 ? void 0 : _state$shop.activeShop
-  };
-};
-export default connect(mapStateToProps)(AssistantWidget);
+export default AssistantWidget;

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

@@ -1,211 +1,205 @@
-.AOV-Sidekick__Container {
-  position: relative;
-  background-color: #fff;
-  height: 100%;
-  padding-bottom: 5px;
-
-  .Polaris-Spinner--sizeSmall {
-    height: 20px;
-  }
-}
-
-.AOV-Sidekick__Loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.assistant-markdown-text {
-  // Container for markdown content rendering
-}
-
-.aui-thread-root {
-  height: 100%;
-  font-family: Arial, Helvetica, sans-serif;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 20px;
-  button {
-    cursor: pointer;
-  }
-  .aui-thread-message-content {
-    font-size: 14px;
-  }
-  .aui-avatar-root img {
-    width: 32px;
-    height: 32px;
-    max-width: 32px;
-    max-height: 32px;
-    border-radius: 16px;
-  }
-  .aui-thread-viewport {
-    flex: 1;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    padding: 1rem 0;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    .aui-thread-welcome-root {
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8rem;
-      justify-content: center;
-      height: 100%;
-      padding: 1rem;
-      .aui-thread-welcome-center {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 8px;
-      }
-      .aui-thread-welcome-message {
-        font-weight: 500;
-      }
-    }
-    .aui-thread-welcome-suggestion-container {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 0.75rem;
-      width: 100%;
-      max-width: 500px;
-      margin: 0 auto;
-      .aui-thread-welcome-suggestion {
-        font-family: Arial, Helvetica, sans-serif !important;
-        background-color: transparent;
-        border: 1px solid #e0e0e0;
-        border-radius: 10px;
-        padding: 6px 12px;
-        font-size: 12px;
-        cursor: pointer;
-        font-weight: 500;
-      }
-    }
-    .aui-user-message-root {
-      padding: 1px 12px;
-      display: flex;
-      justify-content: flex-end;
-      margin-left: 2rem;
-      .aui-user-message-content {
-        width: fit-content;
-        padding: 4px 12px;
-        background-color: rgb(241, 241, 241);
-        border-radius: 10px;
-        p {
-          word-break: break-word;
-        }
-      }
-    }
-    .aui-assistant-message-root {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      padding: 1px 12px;
-      margin-right: 6px;
-      .aui-assistant-message-content {
-        width: calc(100% - 40px);
-        max-width: 100%;
-      }
-      .aui-assistant-action-bar-root {
-        height: 20px;
-        left: 0px;
-        &[data-floating='true'] {
-          display: none;
-        }
-      }
-      .aui-branch-picker-root {
-        display: flex;
-        align-items: center;
-      }
-    }
-    img {
-      display: block;
-      width: 100%;
-      height: auto;
-      object-fit: contain;
-    }
-  }
-  .aui-thread-viewport-footer {
-    height: fit-content;
-    min-height: 85px;
-    display: flex;
-    flex-direction: column;
-    justify-content: end;
-    width: 100%;
-    padding: 12px;
-    background-color: #fff;
-    gap: 8px;
-    .aui-composer-root {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 4px 8px;
-      border: 1px solid #e0e0e0;
-      border-radius: 16px;
-      background-color: #ffffff;
-      .aui-composer-input {
-        width: 100%;
-        font-family: Arial, Helvetica, sans-serif;
-        resize: none;
-        border: none;
-        outline: none;
-        background-color: transparent;
-        font-size: 12px;
-        padding-left: 6px;
-        scrollbar-width: none;
-        max-height: 200px;
-      }
-    }
-  }
-  .aui-button {
-    border: none;
-    height: 24px;
-    background-color: transparent;
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-    span {
-      display: none;
-    }
-  }
-}
-
-.Polaris-Scrollable {
-  scrollbar-width: thin;
-  li {
-    .AOV-Sidekick__ChatItem {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-      position: relative;
-      gap: 4px;
-      > span {
-        width: 100%;
-      }
-      .AOV-Sidekick__ChatAction {
-        display: none;
-        position: absolute;
-        right: 0;
-      }
-      > div:first-child {
-        width: calc(100% - 50px);
-      }
-    }
-    &:hover {
-      .AOV-Sidekick__ChatItem {
-        > span {
-          width: calc(100% - 60px);
-        }
-        .AOV-Sidekick__ChatAction {
-          display: flex;
-        }
-      }
-    }
-  }
-}
-
+.AOV-Sidekick__Container {
+  position: relative;
+  background-color: #fff;
+  height: 100%;
+  padding-bottom: 5px;
+
+  .Polaris-Spinner--sizeSmall {
+    height: 20px;
+  }
+}
+
+.AOV-Sidekick__Loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.aui-thread-root {
+  height: 100%;
+  font-family: Arial, Helvetica, sans-serif;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  button {
+    cursor: pointer;
+  }
+  .aui-thread-message-content {
+    font-size: 14px;
+  }
+  .aui-avatar-root img {
+    width: 32px;
+    height: 32px;
+    max-width: 32px;
+    max-height: 32px;
+    border-radius: 16px;
+  }
+  .aui-thread-viewport {
+    flex: 1;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding: 1rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    .aui-thread-welcome-root {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8rem;
+      justify-content: center;
+      height: 100%;
+      padding: 1rem;
+      .aui-thread-welcome-center {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+      }
+      .aui-thread-welcome-message {
+        font-weight: 500;
+      }
+    }
+    .aui-thread-welcome-suggestion-container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.75rem;
+      width: 100%;
+      max-width: 500px;
+      margin: 0 auto;
+      .aui-thread-welcome-suggestion {
+        font-family: Arial, Helvetica, sans-serif !important;
+        background-color: transparent;
+        border: 1px solid #e0e0e0;
+        border-radius: 10px;
+        padding: 6px 12px;
+        font-size: 12px;
+        cursor: pointer;
+        font-weight: 500;
+      }
+    }
+    .aui-user-message-root {
+      padding: 1px 12px;
+      display: flex;
+      justify-content: flex-end;
+      margin-left: 2rem;
+      .aui-user-message-content {
+        width: fit-content;
+        padding: 4px 12px;
+        background-color: rgb(241, 241, 241);
+        border-radius: 10px;
+        p {
+          word-break: break-word;
+        }
+      }
+    }
+    .aui-assistant-message-root {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 1px 12px;
+      margin-right: 6px;
+      .aui-assistant-message-content {
+        width: calc(100% - 40px);
+        max-width: 100%;
+      }
+      .aui-assistant-action-bar-root {
+        height: 20px;
+        left: 0px;
+        &[data-floating="true"] {
+          display: none;
+        }
+      }
+      .aui-branch-picker-root {
+        display: flex;
+        align-items: center;
+      }
+    }
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+      object-fit: contain;
+    }
+  }
+  .aui-thread-viewport-footer {
+    height: fit-content;
+    min-height: 85px;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    width: 100%;
+    padding: 12px;
+    background-color: #fff;
+    gap: 8px;
+    margin-bottom: 6px;
+    .aui-composer-root {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 8px;
+      border: 1px solid #e0e0e0;
+      border-radius: 16px;
+      background-color: #ffffff;
+      .aui-composer-input {
+        width: 100%;
+        font-family: Arial, Helvetica, sans-serif;
+        resize: none;
+        border: none;
+        outline: none;
+        background-color: transparent;
+        font-size: 12px;
+        padding-left: 6px;
+        scrollbar-width: none;
+        max-height: 200px;
+      }
+    }
+  }
+  .aui-button {
+    border: none;
+    height: 24px;
+    background-color: transparent;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+    span {
+      display: none;
+    }
+  }
+}
+
+.Polaris-Scrollable {
+  scrollbar-width: thin;
+  li {
+    .AOV-Sidekick__ChatItem {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      position: relative;
+      gap: 4px;
+      > span {
+        width: 100%;
+      }
+      .AOV-Sidekick__ChatAction {
+        display: none;
+        position: absolute;
+        right: 0;
+      }
+      > div:first-child {
+        width: calc(100% - 50px);
+      }
+      &:hover {
+        > span {
+          width: calc(100% - 60px);
+        }
+        .AOV-Sidekick__ChatAction {
+          display: flex;
+        }
+      }
+    }
+  }
+}