# @feedmepos/mf-common

This package provide:

- shared portal shell component

- shared coreStore pinia store

- other shared utilities, like: i18n, country etc

## 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
