@feedmepos/mf-common 1.28.5 → 1.28.8

package/README.md

@@ -11,3 +11,80 @@ This package provide:
 ## Changelog
 
 See [CHANGELOG.md](./CHANGELOG.md) for details about changes in each version.
+
+---
+
+# Remy Integration Guide
+
+## Overview
+
+The common package provides a simplified interface for integrating Remy AI assistant into microfrontends. The responsibility of the common package is only to:
+
+1. Register a callback when Remy icon is clicked
+2. Show/hide the Remy icon based on callback registration
+3. Trigger the callback when the icon is clicked
+
+## Usage
+
+### 1. Register Remy Callback
+
+In your microfrontend (e.g., `mf-menu`), register a callback that will be triggered when the Remy icon is clicked:
+
+```typescript
+import { useCoreStore } from '@feedmepos/common'
+
+const coreStore = useCoreStore()
+
+// Register your callback
+coreStore.registerOnRemyClicked(() => {
+  // Your Remy logic here
+  // For example: open Remy dialog, activate Remy session, etc.
+  console.log('Remy icon clicked!')
+})
+```
+
+### 2. Automatic Icon Display
+
+When you register the callback:
+- The `publicSetting.aiSettings.remy.enable` will be automatically set to `true`
+- The Remy icon will appear on Desktop, Mobile, and Tablet views
+- The icon is a video element showing the Remy animation
+
+### 3. Icon Click Behavior
+
+When a user clicks the Remy icon:
+- The registered callback will be triggered
+- You control what happens next (open dialog, start session, etc.)
+
+## Implementation Details
+
+### Desktop (PortalDesktop.vue)
+- Icon appears in the header next to user info
+- Positioned before debug and storefront buttons
+
+### Mobile (PortalMobile.vue)
+- Icon appears in the footer navigation
+- Positioned next to the more menu button
+
+### Tablet (PortalTablet.vue)
+- Icon appears in the header
+- Similar position to desktop view
+
+## Example: Full Integration
+
+```typescript
+// In your microfrontend's main component or setup
+import { onMounted } from 'vue'
+import { useCoreStore } from '@feedmepos/common'
+
+onMounted(async () => {
+  const coreStore = useCoreStore()
+})
+```
+
+## Benefits
+
+1. **Decoupled**: Common package doesn't need to know about Remy implementation details
+2. **Flexible**: Each microfrontend can implement their own Remy behavior
+3. **Simple API**: Only one method to register, icon visibility is automatic
+4. **Consistent UX**: Icon appears in the same place across all views

package/dist/{CustomAttributesForm-603b1077.js → CustomAttributesForm-a255e824.js}

@@ -1,5 +1,5 @@
 import { defineComponent as A, computed as d, resolveComponent as N, openBlock as f, createElementBlock as b, createVNode as S, toDisplayString as C, unref as F, h } from "vue";
-import { t as w, u as O } from "./app-117cb626.js";
+import { t as w, u as O } from "./app-7ca435b2.js";
 import { components as y } from "@feedmepos/ui-library";
 import { c as x } from "./object-27ce045b.js";
 import "pinia";

package/dist/Entry.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Entry.vue.d.ts","sourceRoot":"","sources":["../../src/Entry.vue.ts"],"names":[],"mappings":";AAqVA,wBAKG"}
+{"version":3,"file":"Entry.vue.d.ts","sourceRoot":"","sources":["../../src/Entry.vue.ts"],"names":[],"mappings":";AAyWA,wBAKG"}