@websolutespa/bom-llm 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.2.7
+
+### Patch Changes
+
+- added onMessage handler, LlmMessage
+
+## 0.2.6
+
+### Patch Changes
+
+- a843ef5: Added minimize option
+
 ## 0.2.5
 
 ### Patch Changes

package/dist/esm/index.js

@@ -8129,7 +8129,7 @@ reactJsxRuntime_production_min.jsxs = q$2;
 }
 var jsxRuntimeExports = jsxRuntime.exports;
 
-const [useLayout, LayoutContextProvider] = createGenericContext();
+const [useLayout_, LayoutContextProvider] = createGenericContext();
 function LayoutProvider(_ref) {
   let {
     children,
@@ -8141,6 +8141,7 @@ function LayoutProvider(_ref) {
     children: children
   });
 }
+const useLayout = useLayout_;
 
 function useAutosizeTextArea(textAreaRef, value) {
   reactExports.useEffect(() => {
@@ -19869,6 +19870,21 @@ function pushDataLayer(record) {
   }
 }
 
+const LLM_MINIMIZED_KEY = 'llm-minimized';
+function getPersistedMinimized() {
+  try {
+    return sessionStorage.getItem(LLM_MINIMIZED_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+function persistMinimized(minimized) {
+  try {
+    sessionStorage.setItem(LLM_MINIMIZED_KEY, String(minimized));
+  } catch {
+    // error
+  }
+}
 const createLlmViewStore = _ref => {
   let {
     threadId,
@@ -19899,6 +19915,7 @@ const createLlmViewStore = _ref => {
     fixed: false,
     idle: true,
     visible: false,
+    minimized: getPersistedMinimized(),
     scrollable: false,
     direction: 0
   };
@@ -20024,9 +20041,11 @@ const createLlmViewStore = _ref => {
         },
         send: async (prompt, onMessage, onEnd) => {
           await send(prompt, () => {
+            persistMinimized(false);
             set({
               skipCustomIntro: true,
-              opened: true
+              opened: true,
+              minimized: false
             });
             setTimeout(() => {
             }, 50);
@@ -20047,8 +20066,10 @@ const createLlmViewStore = _ref => {
             pushDataLayer({
               event: opened ? 'llm_open' : 'llm_close'
             });
+            persistMinimized(false);
             return {
-              opened
+              opened,
+              minimized: false
             };
           });
         },
@@ -20076,6 +20097,12 @@ const createLlmViewStore = _ref => {
             introed
           }));
         },
+        setMinimized: minimized => {
+          persistMinimized(minimized);
+          set(state => ({
+            minimized
+          }));
+        },
         setVisible: visible => set(state => ({
           visible
         })),
@@ -32879,6 +32906,10 @@ const PageActions = _ref => {
     wrapper
   } = _ref;
   const label = useLabel();
+  const streaming = useLlm(state => state.streaming);
+  const {
+    clear
+  } = useLlm(state => state.actions);
   const {
     send
   } = useLlmView(state => state.actions);
@@ -32886,7 +32917,8 @@ const PageActions = _ref => {
     setWrapper
   } = useActions();
   const onAction = async action => {
-    const prompt = action.message || `${action.label}: ${JSON.stringify(wrapper.actions)}`;
+    const prompt = action.message || action.label;
+    clear();
     await send(prompt, response => {
       // console.log('PageActions.onChunk', response.chunks);
     }, response => {
@@ -32904,7 +32936,11 @@ const PageActions = _ref => {
     }), wrapper.actions.map(x => /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
       type: "button",
       className: getClassNames(style$h.action),
-      onClick: () => onAction(x),
+      disabled: streaming,
+      onClick: e => {
+        e.stopPropagation();
+        onAction(x);
+      },
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(ActionIcon, {
         action: x
       }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
@@ -40819,6 +40855,9 @@ const PageHistory = _ref => {
     removeHistory
   } = useLlm(state => state.actions);
   // console.log('item', item);
+  if (!item.user) {
+    return;
+  }
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
     className: getClassNames(style$e.history),
     onClick: () => setHistory(item),
@@ -41336,7 +41375,11 @@ styleInject(css_248z$5);
 const PageSubmit = () => {
   const label = useLabel();
   useLlm(state => state.components);
+  const streaming = useLlm(state => state.streaming);
   const prompt = useLlm(state => state.prompt);
+  const {
+    clear
+  } = useLlm(state => state.actions);
   const {
     send
   } = useLlmView(state => state.actions);
@@ -41345,6 +41388,7 @@ const PageSubmit = () => {
     if (!prompt) {
       return;
     }
+    clear();
     await send(prompt, response => {
       // console.log('PagePrompt.onChunk', response.chunks);
     }, response => {
@@ -41354,7 +41398,7 @@ const PageSubmit = () => {
   return /*#__PURE__*/jsxRuntimeExports.jsx("button", {
     type: "submit",
     className: getClassNames(style$5.submit),
-    "aria-disabled": !prompt,
+    disabled: !prompt || streaming,
     "aria-label": label('llm.sendPrompt'),
     onClick: onSubmit,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmArrowUp, {})
@@ -41399,7 +41443,8 @@ const PageTextarea = () => {
   const prompt = useLlm(state => state.prompt);
   const streaming = useLlm(state => state.streaming);
   const {
-    setPrompt
+    setPrompt,
+    clear
   } = useLlm(state => state.actions);
   const {
     send
@@ -41410,6 +41455,7 @@ const PageTextarea = () => {
     if (!prompt) {
       return;
     }
+    clear();
     await send(prompt, response => {
       // console.log('PagePrompt.onChunk', response.chunks);
     }, response => {
@@ -41421,7 +41467,7 @@ const PageTextarea = () => {
     setPrompt(prompt);
   };
   const onKeyDown = event => {
-    if (event.code == 'Enter' && !event.shiftKey) {
+    if (event.code == 'Enter' && !event.shiftKey && !streaming) {
       onSubmit(event);
     }
   };
@@ -42210,6 +42256,32 @@ const Thread = () => {
   });
 };
 
+const MinimizeButton = _ref => {
+  let {
+    onClick,
+    label
+  } = _ref;
+  return /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+    type: "button",
+    className: "llm__trigger-minimize",
+    onClick: onClick,
+    "aria-label": label,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+        d: "M4 6L8 10L12 6",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    })
+  });
+};
 const Trigger = () => {
   const theme = useLlm(state => state.theme);
   const {
@@ -42217,16 +42289,21 @@ const Trigger = () => {
   } = useLlm(state => state.components);
   const app = useLlm(state => state.app);
   const opened = useLlmView(state => state.opened);
+  const minimized = useLlmView(state => state.minimized);
   const {
-    open
+    open,
+    setMinimized
   } = useLlmView(state => state.actions);
   const label = useLabel();
+  const enableMinimize = app?.contents.enableMinimize;
   const collapsedWelcomeText = messageMapper(app?.contents.collapsedWelcomeText);
   const collapsedWelcomeTextCta = messageMapper(app?.contents.collapsedWelcomeTextCta);
   const collapsedWelcomeTextHover = messageMapper(app?.contents.collapsedWelcomeTextHover);
   const position = theme.trigger?.position || 'bottom';
   return /*#__PURE__*/jsxRuntimeExports.jsxs(motion.nav, {
-    className: getClassNames('llm__trigger', '-' + position),
+    className: getClassNames('llm__trigger', '-' + position, {
+      '-minimized': minimized
+    }),
     initial: {
       y: '200%',
       opacity: 0
@@ -42240,7 +42317,7 @@ const Trigger = () => {
       opacity: 0
     },
     transition: {
-      duration: .4
+      duration: 0.4
     },
     "aria-label": "Trigger"
     /*
@@ -42256,14 +42333,20 @@ const Trigger = () => {
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blob, {}), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
         children: label('llm.button')
       })]
-    }), !opened && (collapsedWelcomeText || collapsedWelcomeTextCta || collapsedWelcomeTextHover) && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+    }), !opened && !minimized && (collapsedWelcomeText || collapsedWelcomeTextCta || collapsedWelcomeTextHover) && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
       className: "llm__trigger-popup -llm-t-body2",
       children: [(collapsedWelcomeText || collapsedWelcomeTextCta) && /*#__PURE__*/jsxRuntimeExports.jsxs(motion.div, {
         className: "llm__trigger-message",
         exit: {
           opacity: 0
         },
-        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Canvas, {}), collapsedWelcomeText, collapsedWelcomeTextCta && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Canvas, {}), collapsedWelcomeText, enableMinimize && /*#__PURE__*/jsxRuntimeExports.jsx(MinimizeButton, {
+          onClick: e => {
+            e.stopPropagation();
+            setMinimized(true);
+          },
+          label: label('llm.minimize') || 'Minimize'
+        }), collapsedWelcomeTextCta && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
           type: "button",
           className: "llm__trigger-cta",
           children: collapsedWelcomeTextCta
@@ -45239,6 +45322,7 @@ const createLlmStore = config => {
     decorateUrl,
     label,
     onAction,
+    onMessage,
     ...options
   } = sanitizedConfig;
   const theme = getThemes([customTheme], config.defaultTheme);
@@ -45478,6 +45562,7 @@ const createLlmStore = config => {
           if (typeof onMessage === 'function') {
             onMessage(response);
           }
+          state.actions.onMessage(response);
         },
         // onEnd
         response => {
@@ -45779,6 +45864,12 @@ const createLlmStore = config => {
         }
         return;
       },
+      onMessage: async message => {
+        if (typeof onMessage === 'function') {
+          return await onMessage(message);
+        }
+        return;
+      },
       clear: () => {
         const {
           abort
@@ -46390,6 +46481,13 @@ const App = _ref => {
       id: data.market,
       title: data.market
     }],
+    app: {
+      id: 'app',
+      brand: {
+        name: 'Mixer',
+        social: []
+      }
+    },
     menu: {},
     topLevelHrefs: {},
     topLevelRoutes: {}