@doderasoftware/restify-ai 0.1.0-beta.5 → 0.1.0-beta.7

package/README.md

@@ -1,631 +1,1048 @@
-<div align="center">
-  <h1>🤖 Restify AI</h1>
-  <p><strong>Professional AI Chatbot Component for Vue 3 + Laravel Restify</strong></p>
-  <p>Build intelligent, context-aware AI assistants that integrate seamlessly with your Laravel backend</p>
-
-  <a href="https://www.npmjs.com/package/@doderasoftware/restify-ai"><img src="https://img.shields.io/npm/v/@doderasoftware/restify-ai.svg?style=flat-square" alt="npm version"></a>
-  <a href="https://www.npmjs.com/package/@doderasoftware/restify-ai"><img src="https://img.shields.io/npm/dm/@doderasoftware/restify-ai.svg?style=flat-square" alt="npm downloads"></a>
-  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square" alt="License: MIT"></a>
-  <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/Vue-3.x-brightgreen.svg?style=flat-square" alt="Vue 3"></a>
-  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-5.x-blue.svg?style=flat-square" alt="TypeScript"></a>
-  <a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/TailwindCSS-3.x-38bdf8.svg?style=flat-square" alt="TailwindCSS"></a>
-
-  <br /><br />
-
-  <a href="https://laravel-restify.com">Laravel Restify</a> •
-  <a href="https://binarcode.com">BinarCode</a> •
-  <a href="#features">Features</a> •
-  <a href="#installation">Installation</a> •
-  <a href="#quick-start">Quick Start</a> •
-  <a href="#configuration">Configuration</a>
-</div>
+# @doderasoftware/restify-ai
+
+A production-ready AI chatbot component for Vue 3 with real-time SSE streaming, file attachments, @mentions, and seamless [Laravel Restify](https://laravel-restify.com) integration.
+
+[![npm version](https://img.shields.io/npm/v/@doderasoftware/restify-ai.svg)](https://www.npmjs.com/package/@doderasoftware/restify-ai)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Vue 3](https://img.shields.io/badge/Vue-3.x-brightgreen.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)
+
+**📖 [Laravel Restify](https://laravel-restify.com) | 📦 [npm](https://www.npmjs.com/package/@doderasoftware/restify-ai) | 🏢 [BinarCode](https://binarcode.com)**
 
 ---
 
-## Overview
-
-**Restify AI** is a production-ready Vue 3 component library that provides a fully-featured AI chatbot interface designed to work seamlessly with [Laravel Restify](https://laravel-restify.com) backends. Built by [BinarCode](https://binarcode.com), the team behind Laravel Restify, this package enables you to add powerful AI capabilities to your Vue.js applications in minutes.
-
-Whether you are building a customer support system, an intelligent assistant for your SaaS application, or an AI-powered admin panel, Restify AI provides all the building blocks you need.
-
-## Features
-
-### 🎯 Core Features
-- **Real-time SSE Streaming** - Smooth, character-by-character response streaming
-- **File Attachments** - Upload and process documents, images, and more
-- **@Mentions System** - Reference entities from your application (users, documents, etc.)
-- **Context-Aware Suggestions** - Smart prompts based on current page/route
-- **Chat History** - Persistent conversation memory with configurable limits
-- **Markdown Rendering** - Beautiful formatting with syntax highlighting
-- **Quota Management** - Track and display API usage limits
-
-### 🎨 UI/UX
-- **Fully Customizable** - Override any style with Tailwind CSS classes
-- **Dark Mode Support** - Automatic dark/light theme detection
-- **Responsive Design** - Works on desktop, tablet, and mobile
-- **Keyboard Shortcuts** - Quick access with configurable shortcuts (Cmd/Ctrl+G)
-- **Fullscreen Mode** - Expandable chat interface
-- **Animations** - Smooth transitions and loading states
-- **Customizable Avatars** - Use custom components or images
-
-### 🔧 Developer Experience
-- **TypeScript First** - Full type definitions included
-- **Vue 3 Composition API** - Modern Vue patterns
-- **Pinia Integration** - State management built-in
-- **Slot-Based Customization** - Override any component section
-- **Lifecycle Hooks** - Tap into every stage of the chat flow
-- **i18n Ready** - Full internationalization support
-
-### 🔒 Enterprise Ready
-- **Support Mode** - Route conversations to human agents
-- **Permission System** - Control features based on user permissions
-- **Request/Response Interceptors** - Customize API communication
-- **Retry Logic** - Automatic retry with configurable backoff
-- **Error Handling** - User-friendly error messages
-
-## Installation
+## ✨ Features
+
+- 🌊 **Real-time SSE Streaming** - Smooth character-by-character response streaming
+- 📎 **File Attachments** - Upload and process documents, images, and more
+- 👥 **@Mentions System** - Reference entities from your application (employees, jobs, projects, etc.)
+- 💡 **Context-Aware Suggestions** - Smart prompts based on current page/route
+- 💬 **Chat History** - Persistent conversation memory with configurable limits
+- 📝 **Markdown Rendering** - Beautiful formatting with syntax highlighting
+- 📊 **Quota Management** - Track and display API usage limits
+- 🎨 **Fully Customizable** - Override any style with CSS classes
+- 🌙 **Dark Mode Support** - Automatic dark/light theme detection
+- 📱 **Responsive Design** - Works on desktop, tablet, and mobile
+- ⌨️ **Keyboard Shortcuts** - Quick access with configurable shortcuts
+- 🔳 **Fullscreen Mode** - Expandable chat interface
+- 🎯 **TypeScript First** - Full type definitions included
+- 🗃️ **Pinia Integration** - State management built-in
+- 🔧 **Slot-Based Customization** - Override any component section
+- 🌐 **i18n Ready** - Full internationalization support
+- 🆘 **Support Mode** - Route conversations to human support
+- 🔄 **Retry Logic** - Automatic retry with configurable backoff
+
+## 📦 Installation
 
 ```bash
-# npm
 npm install @doderasoftware/restify-ai
-
-# yarn
-yarn add @doderasoftware/restify-ai
-
-# pnpm
-pnpm add @doderasoftware/restify-ai
 ```
 
 ### Peer Dependencies
 
 ```bash
-npm install vue@^3.3.0 pinia@^2.1.0 tailwindcss@^3.3.0
+npm install vue@^3.3.0 pinia@^2.1.0
 ```
 
-## Quick Start
-
-### 1. Configure Tailwind CSS
-
-```javascript
-// tailwind.config.js
-export default {
-  content: [
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-    "./node_modules/@doderasoftware/restify-ai/dist/**/*.{js,vue}",
-  ],
-  presets: [
-    require("@doderasoftware/restify-ai/tailwind"),
-  ],
-}
-```
+## 🚀 Quick Start
 
-### 2. Import Styles
+### 1. Import Styles
 
 ```typescript
 // main.ts
-import "@doderasoftware/restify-ai/styles"
+import '@doderasoftware/restify-ai/styles'
 ```
 
-### 3. Register the Plugin
+### 2. Create Plugin Configuration
 
 ```typescript
 // plugins/restifyAi.ts
-import { RestifyAiPlugin } from "@doderasoftware/restify-ai"
-import type { App } from "vue"
+import type { App } from 'vue'
+import { RestifyAiPlugin } from '@doderasoftware/restify-ai'
+import '@doderasoftware/restify-ai/styles'
 
 export function setupRestifyAi(app: App) {
   app.use(RestifyAiPlugin, {
     endpoints: {
-      ask: "/api/ai/ask",
-      uploadFile: "/api/ai/upload",
-      quota: "/api/ai/quota",
+      ask: '/ask',
+      uploadFile: '/ai/upload',
+      quota: '/ai/quota',
     },
-    getAuthToken: () => localStorage.getItem("token"),
     baseUrl: import.meta.env.VITE_API_URL,
+    getAuthToken: () => localStorage.getItem('token'),
   })
 }
 ```
 
+### 3. Register in Main
+
 ```typescript
 // main.ts
-import { createApp } from "vue"
-import { createPinia } from "pinia"
-import App from "./App.vue"
-import { setupRestifyAi } from "./plugins/restifyAi"
-import "@doderasoftware/restify-ai/styles"
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import { setupRestifyAi } from './plugins/restifyAi'
+import '@doderasoftware/restify-ai/styles'
 
 const app = createApp(App)
 app.use(createPinia())
 setupRestifyAi(app)
-app.mount("#app")
+app.mount('#app')
 ```
 
 ### 4. Add the Component
 
 ```vue
 <template>
-  <div>
-    <button @click="showChat = true" class="fixed bottom-4 right-4 p-3 bg-blue-600 rounded-full">
-      <SparklesIcon class="w-6 h-6 text-white" />
-    </button>
-    <AiChatDrawer v-model="showChat" />
-  </div>
+  <AiChatDrawer v-model="aiStore.showChat" top-offset="50px" />
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
-import { AiChatDrawer } from "@doderasoftware/restify-ai"
+import { AiChatDrawer, useRestifyAiStore } from '@doderasoftware/restify-ai'
 
-const showChat = ref(false)
+const aiStore = useRestifyAiStore()
 </script>
 ```
 
-### 5. Enable Keyboard Shortcut
+### 5. Enable Keyboard Shortcut (Optional)
 
 ```typescript
-import { useAiDrawerShortcut } from "@doderasoftware/restify-ai"
+// In your layout or App.vue
+import { useAiDrawerShortcut } from '@doderasoftware/restify-ai'
 
-// Enable Cmd/Ctrl+G to toggle drawer
-useAiDrawerShortcut()
+useAiDrawerShortcut() // Enables Cmd/Ctrl+G to toggle
 ```
 
-## Configuration
+## ⚙️ Configuration
 
 ### Full Configuration Options
 
 ```typescript
-app.use(RestifyAiPlugin, {
-  // REQUIRED
-  endpoints: {
-    ask: "/api/ai/ask",
-    uploadFile: "/api/ai/upload",
-    quota: "/api/ai/quota",
-  },
-  getAuthToken: () => localStorage.getItem("auth_token"),
-
-  // API CONFIGURATION
-  baseUrl: "https://api.example.com",
-  getCustomHeaders: () => ({ "X-Tenant-ID": getTenantId() }),
-  buildRequest: (payload) => ({ ...payload, custom: "value" }),
-  parseStreamContent: (data) => JSON.parse(data).choices?.[0]?.delta?.content,
-
-  // RETRY
-  retry: { maxRetries: 3, retryDelay: 1000 },
-
-  // INTERNATIONALIZATION
-  translate: (key, params) => i18n.t("ai." + key, params),
-  labels: {
-    title: "AI Assistant",
-    placeholder: "Ask me anything...",
-    loadingText: "Thinking...",
-  },
-
-  // PROVIDERS
-  mentionProviders: [{
-    type: "user",
-    label: "Users",
-    search: async (q) => api.searchUsers(q),
-  }],
-  suggestionProviders: [{
-    id: "invoices",
-    routes: ["/invoices/*"],
-    getSuggestions: (ctx) => [{ id: "1", title: "Create Invoice", prompt: "Help me create an invoice" }],
-  }],
-
-  // THEMING
-  theme: {
-    primaryColor: "#3b82f6",
-    userBubbleColor: "#3b82f6",
-    drawerWidth: "500px",
-  },
-
-  // LIMITS
-  chatHistoryLimit: 50,
-  maxAttachments: 5,
-  maxFileSize: 10 * 1024 * 1024,
-
-  // FEATURES
-  keyboardShortcut: "cmd+g",
-  enableSupportMode: true,
-
-  // CUSTOM COMPONENTS
-  assistantAvatar: CustomAvatarComponent,
-  userAvatar: () => currentUser.value?.avatarUrl,
-
-  // CALLBACKS
-  onMessageSent: (msg) => analytics.track("ai_sent"),
-  onError: (err) => Sentry.captureException(err),
-  onStreamStart: () => console.log("Stream started"),
-  beforeSend: (payload) => ({ ...payload, timestamp: Date.now() }),
-})
-```
+import type { App } from 'vue'
+import { RestifyAiPlugin } from '@doderasoftware/restify-ai'
+import type { MentionProvider, SuggestionProvider, AISuggestion } from '@doderasoftware/restify-ai'
+
+export function setupRestifyAi(app: App) {
+  app.use(RestifyAiPlugin, {
+    // ═══════════════════════════════════════════════════════════════
+    // REQUIRED
+    // ═══════════════════════════════════════════════════════════════
+    
+    endpoints: {
+      ask: '/ask',                    // SSE streaming endpoint
+      uploadFile: '/ai/upload',       // File upload endpoint
+      quota: '/ai/quota',             // Quota fetch endpoint
+    },
+    getAuthToken: () => localStorage.getItem('token'),
+
+    // ═══════════════════════════════════════════════════════════════
+    // API CONFIGURATION
+    // ═══════════════════════════════════════════════════════════════
+    
+    baseUrl: 'https://api.example.com',
+    
+    // Custom headers for every request
+    getCustomHeaders: () => ({
+      'X-Tenant-ID': getTenantId(),
+      'Accept-Language': getCurrentLocale(),
+    }),
+    
+    // Transform request payload before sending
+    buildRequest: (payload) => ({
+      ...payload,
+      customField: 'value',
+    }),
+    
+    // Parse SSE stream content (default handles OpenAI format)
+    parseStreamContent: (data) => {
+      const parsed = JSON.parse(data)
+      return parsed.choices?.[0]?.delta?.content || null
+    },
+
+    // ═══════════════════════════════════════════════════════════════
+    // RETRY CONFIGURATION
+    // ═══════════════════════════════════════════════════════════════
+    
+    retry: {
+      maxRetries: 3,
+      retryDelay: 1000,
+      shouldRetry: (error, attempt) => attempt < 3,
+    },
 
-## Component API
+    // ═══════════════════════════════════════════════════════════════
+    // INTERNATIONALIZATION
+    // ═══════════════════════════════════════════════════════════════
+    
+    // Translate function for i18n integration
+    translate: (key, params) => i18n.t(key, params),
+    
+    // Permission check function
+    can: (permission) => userCan(permission),
+
+    // ═══════════════════════════════════════════════════════════════
+    // LABELS (all customizable)
+    // ═══════════════════════════════════════════════════════════════
+    
+    labels: {
+      title: 'AI Assistant',
+      aiName: 'AI Assistant',
+      you: 'You',
+      newChat: 'New chat',
+      placeholder: 'Ask me anything...',
+      inputPlaceholder: 'Ask me anything...',
+      supportPlaceholder: 'Describe your issue...',
+      loadingText: 'Gathering data...',
+      analyzingText: 'Analyzing...',
+      craftingText: 'Crafting response...',
+      quotaRemaining: 'questions remaining',
+      noQuota: 'No AI credit available',
+      contactSupport: 'Contact Support',
+      close: 'Close',
+      minimize: 'Minimize',
+      fullscreen: 'Fullscreen',
+      exitFullscreen: 'Exit fullscreen',
+      copyToClipboard: 'Copy to clipboard',
+      copied: 'Content copied to clipboard',
+      showMore: 'Show more',
+      showLess: 'Show less',
+      retry: 'Retry',
+      attachFiles: 'Attach files',
+      emptyStateTitle: 'How can I help you today?',
+      emptyStateDescription: 'Ask questions or get help with tasks',
+      keyboardShortcutHint: 'Press ⌘G to toggle',
+      sendMessage: 'Send message',
+      attachFile: 'Attach file',
+      closeConfirmTitle: 'Close chat window?',
+      closeConfirmMessage: 'You will lose the conversation.',
+      confirmClose: 'Yes, close it',
+      cancel: 'Cancel',
+      toggleSupportMode: 'Contact Support',
+      exitSupportMode: 'Exit Support Mode',
+      historyLimitReachedTitle: 'Conversation Limit Reached',
+      historyLimitReachedMessage: 'Maximum messages reached.',
+      startNewChat: 'New Chat',
+    },
 
-### AiChatDrawer Props
+    // ═══════════════════════════════════════════════════════════════
+    // MENTION PROVIDERS
+    // ═══════════════════════════════════════════════════════════════
+    
+    mentionProviders: createMentionProviders(),
+
+    // ═══════════════════════════════════════════════════════════════
+    // SUGGESTION PROVIDERS
+    // ═══════════════════════════════════════════════════════════════
+    
+    suggestionProviders: createSuggestionProviders(),
+    defaultSuggestions: getDefaultSuggestions(),
+
+    // ═══════════════════════════════════════════════════════════════
+    // THEME
+    // ═══════════════════════════════════════════════════════════════
+    
+    theme: {
+      primaryColor: '#3b82f6',
+      primaryLightColor: '#60a5fa',
+      userBubbleColor: '#3b82f6',
+      userTextColor: '#ffffff',
+      borderColor: '#e5e7eb',
+      drawerWidth: '600px',
+      drawerFullscreenWidth: '90vw',
+    },
+
+    // ═══════════════════════════════════════════════════════════════
+    // LIMITS
+    // ═══════════════════════════════════════════════════════════════
+    
+    chatHistoryLimit: 15,
+    maxAttachments: 5,
+    maxFileSize: 10 * 1024 * 1024, // 10MB
+    acceptedFileTypes: 'image/*,.pdf,.txt,.doc,.docx,.xls,.xlsx,.csv',
+
+    // ═══════════════════════════════════════════════════════════════
+    // STORAGE
+    // ═══════════════════════════════════════════════════════════════
+    
+    chatHistoryKey: 'app_chat_history',
+    drawerStateKey: 'app_chat_drawer_open',
+
+    // ═══════════════════════════════════════════════════════════════
+    // FEATURES
+    // ═══════════════════════════════════════════════════════════════
+    
+    keyboardShortcut: 'mod+g',  // 'mod' = Cmd on Mac, Ctrl on Windows
+    enableSupportMode: true,
+    canToggle: () => true,
+
+    // ═══════════════════════════════════════════════════════════════
+    // AVATARS
+    // ═══════════════════════════════════════════════════════════════
+    
+    assistantAvatar: CustomAiAvatarComponent,
+    userAvatar: () => authStore.profile?.avatar || null,
+
+    // ═══════════════════════════════════════════════════════════════
+    // CALLBACKS
+    // ═══════════════════════════════════════════════════════════════
+    
+    onError: (error) => console.error('AI Error:', error),
+    onQuotaFetched: (quota) => console.log('Quota:', quota),
+    onMessageSent: (message) => analytics.track('ai_message_sent'),
+    onResponseReceived: (message) => console.log('Response:', message),
+    onDrawerToggle: (isOpen) => console.log('Drawer:', isOpen),
+    onNewChat: () => console.log('New chat started'),
+    
+    // Stream lifecycle hooks
+    onStreamStart: () => console.log('Stream started'),
+    onStreamEnd: (fullMessage) => console.log('Stream ended'),
+    onStreamChunk: (chunk) => console.log('Chunk:', chunk),
+    beforeSend: (payload) => payload,
+    afterResponse: (message) => {},
+
+    // File upload hooks
+    onFileUploadStart: (file) => {},
+    onFileUploadProgress: (file, progress) => {},
+    onFileUploadComplete: (file) => {},
+    onFileUploadError: (file, error) => {},
+  })
+}
+```
+
+## 📋 AiChatDrawer Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `modelValue` | `boolean` | required | Controls drawer visibility (v-model) |
 | `width` | `string` | `"600px"` | Drawer width |
-| `fullscreenWidth` | `string` | `"90vw"` | Width when fullscreen |
-| `topOffset` | `string` | `"0"` | Top offset (for fixed headers) |
+| `fullscreenWidth` | `string` | `"90vw"` | Width when in fullscreen mode |
+| `topOffset` | `string` | `"0"` | Top offset for fixed headers |
 | `position` | `"left" \| "right"` | `"right"` | Drawer position |
 | `showBackdrop` | `boolean` | `false` | Show backdrop overlay |
+| `closeOnBackdropClick` | `boolean` | `false` | Close when clicking backdrop |
 | `closeOnEscape` | `boolean` | `true` | Close on Escape key |
 | `showQuota` | `boolean` | `true` | Show quota display |
-| `confirmClose` | `boolean` | `true` | Confirm before clearing |
+| `showFullscreenToggle` | `boolean` | `true` | Show fullscreen button |
+| `showMinimizeButton` | `boolean` | `true` | Show minimize button |
+| `showCloseButton` | `boolean` | `true` | Show close button |
+| `showNewChatButton` | `boolean` | `true` | Show new chat button |
+| `confirmClose` | `boolean` | `true` | Confirm before clearing history |
+| `autoFetchQuota` | `boolean` | `true` | Auto-fetch quota when opened |
+| `historyLimit` | `HistoryLimitConfig` | - | History limit configuration |
+| `loadingText` | `LoadingTextConfig` | - | Loading text configuration |
 | `ui` | `AiChatDrawerUI` | `{}` | Custom CSS classes |
 | `texts` | `AiChatDrawerTexts` | `{}` | Custom text labels |
 
-### Events
+### Component Usage Example
+
+```vue
+<template>
+  <AiChatDrawer
+    v-model="aiStore.showChat"
+    top-offset="50px"
+    :show-backdrop="false"
+    :confirm-close="true"
+    :show-quota="true"
+    @contact-support="handleContactSupport"
+  >
+    <template #context-link>
+      <p class="text-center text-xs text-gray-500">
+        For accurate results, provide
+        <router-link to="/settings/ai-context" class="text-primary-600 hover:underline">
+          company context
+        </router-link>
+      </p>
+    </template>
+  </AiChatDrawer>
+</template>
+
+<script setup lang="ts">
+import { AiChatDrawer, useRestifyAiStore, useAiDrawerShortcut } from '@doderasoftware/restify-ai'
+
+const aiStore = useRestifyAiStore()
+
+useAiDrawerShortcut()
+
+function handleContactSupport() {
+  // Handle support request
+}
+</script>
+```
+
+## 📡 Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `update:modelValue` | `boolean` | Drawer state changed |
-| `close` | - | Drawer closed |
+| `close` | - | Drawer was closed |
 | `contact-support` | - | Support mode activated |
 | `new-chat` | - | New chat started |
 
-### Slots
+## 🎰 Slots
 
-```vue
-<AiChatDrawer v-model="isOpen">
-  <template #header="{ quota, isFullscreen, onNewChat, onClose }">
-    <MyCustomHeader />
-  </template>
-  <template #empty-state="{ suggestions, onClick }">
-    <MyCustomEmptyState />
-  </template>
-  <template #message="{ message, isUser, isLoading }">
-    <MyCustomMessage />
-  </template>
-  <template #input="{ modelValue, sending, onSubmit }">
-    <MyCustomInput />
-  </template>
-</AiChatDrawer>
-```
-
-## UI Customization
-
-Every component accepts a `ui` prop for CSS class customization:
+| Slot | Props | Description |
+|------|-------|-------------|
+| `header` | `HeaderSlotProps` | Custom header content |
+| `quota` | `{ quota: ChatQuota }` | Custom quota display |
+| `setup` | - | Custom setup guide |
+| `empty-state` | `{ suggestions, onClick }` | Custom empty state |
+| `message` | `MessageSlotProps` | Custom message bubble |
+| `input` | `InputSlotProps` | Custom input area |
+| `context-link` | - | Custom context link below input |
 
-```vue
-<AiChatDrawer
-  v-model="isOpen"
-  :ui="{
-    backdrop: "bg-black/50 backdrop-blur-sm",
-    drawer: "shadow-2xl",
-    panel: "bg-gray-50 dark:bg-gray-900",
-    header: "border-b-2 border-blue-500",
-    newChatButton: "bg-gradient-to-r from-blue-500 to-purple-500",
-  }"
-/>
-```
-
-### Available UI Interfaces
+### Slot Props Types
 
 ```typescript
-interface AiChatDrawerUI {
-  backdrop?: string
-  drawer?: string
-  panel?: string
-  header?: string
-  headerTitle?: string
-  body?: string
-  footer?: string
-  newChatButton?: string
-  errorContainer?: string
-  retryButton?: string
+interface HeaderSlotProps {
+  quota: ChatQuota
+  isFullscreen: boolean
+  hasHistory: boolean
+  onNewChat: () => void
+  onClose: () => void
+  onMinimize: () => void
+  onToggleFullscreen: () => void
 }
 
-interface ChatInputUI {
-  root?: string
-  textarea?: string
-  sendButton?: string
-  attachButton?: string
-  suggestionsDropdown?: string
+interface MessageSlotProps {
+  message: ChatMessage
+  isUser: boolean
+  isLoading: boolean
+  isStreaming: boolean
 }
 
-interface ChatMessageUI {
-  root?: string
-  userBubble?: string
-  assistantBubble?: string
-  content?: string
-  loadingDots?: string
+interface InputSlotProps {
+  modelValue: string
+  sending: boolean
+  disabled: boolean
+  onSubmit: (payload: SubmitPayload) => void
+  onCancel: () => void
 }
 ```
 
-## Store API
-
-Access the Pinia store for advanced use cases:
+## 🏪 Store API
 
 ```typescript
-import { useRestifyAiStore } from "@doderasoftware/restify-ai"
+import { useRestifyAiStore } from '@doderasoftware/restify-ai'
 
 const store = useRestifyAiStore()
 
-// State
-store.chatHistory          // ChatMessage[]
-store.loading              // boolean
-store.sending              // boolean
-store.quota                // { limit, used, remaining }
-store.error                // { message, failedQuestion, timestamp }
-
-// Actions
-store.toggleChat()
-store.sendMessage(payload)
-store.cancelRequest()
-store.retryLastMessage()
-store.clearChatHistory()
-store.fetchQuota()
-store.uploadFile(file)
+// ═══════════════════════════════════════════════════════════════
+// STATE
+// ═══════════════════════════════════════════════════════════════
+
+store.chatHistory         // ChatMessage[] - All messages
+store.showChat            // boolean - Drawer visibility
+store.sending             // boolean - Message being sent
+store.loading             // boolean - Loading state
+store.isFullscreen        // boolean - Fullscreen mode
+store.quota               // { limit, used, remaining }
+store.error               // { message, failedQuestion, failedAttachments, timestamp }
+store.supportRequestMode  // boolean - Support mode active
+store.pageContext         // PageContext | null - Current page context
+
+// ═══════════════════════════════════════════════════════════════
+// GETTERS
+// ═══════════════════════════════════════════════════════════════
+
+store.hasMessages         // boolean - Has any messages
+store.isInSetupMode       // boolean - In setup mode
+store.canChat             // boolean - Can send messages
+
+// ═══════════════════════════════════════════════════════════════
+// ACTIONS
+// ═══════════════════════════════════════════════════════════════
+
+store.toggleDrawer()            // Toggle drawer visibility
+store.openDrawer()              // Open drawer
+store.closeDrawer()             // Close drawer
+store.askQuestion(question, attachments?, mentions?, isSupportRequest?)
+store.cancelRequest()           // Cancel current request
+store.retry()                   // Retry failed message
+store.clearChatHistory()        // Clear all messages
+store.clearError()              // Clear error state
+store.toggleSupportMode()       // Toggle support mode
+store.fetchQuota()              // Fetch quota from server
+store.uploadFile(file)          // Upload file
+store.setPageContext(context)   // Set page context
+store.scrollToBottom()          // Scroll chat to bottom
 ```
 
-## Composables
+## 🪝 Composables
 
 ### useAiDrawerShortcut
 
+Toggle drawer with keyboard shortcut:
+
 ```typescript
-import { useAiDrawerShortcut } from "@doderasoftware/restify-ai"
+import { useAiDrawerShortcut } from '@doderasoftware/restify-ai'
 
-// Uses store directly (recommended)
+// Uses store's showChat state directly
 useAiDrawerShortcut()
-
-// Or pass a ref
-const drawerRef = ref(false)
-useAiDrawerShortcut(drawerRef)
 ```
 
 ### usePageAiContext
 
+Set page context for AI suggestions:
+
 ```typescript
-import { usePageAiContext } from "@doderasoftware/restify-ai"
+import { usePageAiContext } from '@doderasoftware/restify-ai'
 
-usePageAiContext({
-  pageType: "invoice-detail",
-  entityId: route.params.id,
-  entityType: "invoice",
-  metadata: { customerName: invoice.value?.customer?.name },
+// Simple usage
+usePageAiContext('invoices')
+
+// With dynamic metadata
+usePageAiContext('employee-detail', {
+  employeeId: computed(() => route.params.id),
+  employeeName: computed(() => employee.value?.name),
 })
 ```
 
-## Backend Integration
+### useAiContext
 
-### Laravel Restify Setup
+Programmatic context control:
 
-This package is designed to work with [Laravel Restify](https://laravel-restify.com):
+```typescript
+import { useAiContext } from '@doderasoftware/restify-ai'
 
-```php
-// routes/api.php
-Route::middleware("auth:sanctum")->group(function () {
-    Route::post("/ai/ask", [AiController::class, "ask"]);
-    Route::post("/ai/upload", [AiController::class, "upload"]);
-    Route::get("/ai/quota", [AiController::class, "quota"]);
-});
+const { setContext, updateContext, clearContext, context } = useAiContext()
+
+setContext({
+  pageType: 'dashboard',
+  entityType: 'report',
+  entityId: '123',
+  metadata: { period: 'Q4' }
+})
 ```
 
-### Expected Request/Response Formats
+### useAiSuggestions
 
-**Ask Endpoint (SSE Stream):**
+Get suggestions for current context:
 
 ```typescript
-// Request
-{
-  question: string
-  history: Array<{ role: string, message: string }>
-  stream: true
-  files?: Array<{ id: string, name: string }>
-  mentions?: Array<{ id: string, type: string, name: string }>
-}
+import { useAiSuggestions } from '@doderasoftware/restify-ai'
 
-// Response: Server-Sent Events (OpenAI format)
-data: {"choices":[{"delta":{"content":"Hello"}}]}
-data: {"choices":[{"delta":{"content":" world"}}]}
-data: [DONE]
+const { suggestions, resolvePrompt } = useAiSuggestions()
 ```
 
-**Upload Endpoint:**
+## 🏷️ Mention Providers
+
+Enable @mentions to reference entities from your application:
 
 ```typescript
-{ id: string, name: string, url: string, type: string, size: number }
+import type { MentionProvider, MentionItem } from '@doderasoftware/restify-ai'
+
+function createMentionProviders(): MentionProvider[] {
+  return [
+    {
+      type: 'employee',
+      label: 'Team Members',
+      iconClass: 'text-primary',
+      priority: 10,
+      
+      // Search function - can be sync or async
+      search: (query: string): MentionItem[] => {
+        const employeeStore = useEmployeeStore()
+        const employees = employeeStore.allEmployees || []
+
+        if (!query) {
+          return employees.slice(0, 5).map(emp => ({
+            id: emp.id,
+            type: 'employee',
+            attributes: emp.attributes,
+          }))
+        }
+
+        const lowerQuery = query.toLowerCase()
+        return employees
+          .filter((emp) => {
+            const firstName = emp.attributes?.first_name?.toLowerCase() || ''
+            const lastName = emp.attributes?.last_name?.toLowerCase() || ''
+            return firstName.includes(lowerQuery) || lastName.includes(lowerQuery)
+          })
+          .slice(0, 5)
+          .map(emp => ({
+            id: emp.id,
+            type: 'employee',
+            attributes: emp.attributes,
+          }))
+      },
+      
+      // Display formatting
+      getDisplayName: (item: MentionItem): string => {
+        const firstName = item.attributes?.first_name || ''
+        const lastName = item.attributes?.last_name || ''
+        return `${firstName} ${lastName}`.trim()
+      },
+      
+      getSubtitle: (item: MentionItem): string | null => {
+        return item.attributes?.position || null
+      },
+      
+      buildMentionText: (item: MentionItem): string => {
+        const firstName = item.attributes?.first_name || ''
+        const lastName = item.attributes?.last_name || ''
+        return `@${firstName} ${lastName}`.trim()
+      },
+    },
+    {
+      type: 'job',
+      label: 'Jobs',
+      iconClass: 'text-blue-500',
+      routes: ['/hiring/jobs'],  // Only show on these routes
+      priority: 5,
+      search: async (query: string): Promise<MentionItem[]> => {
+        const response = await api.get('/jobs', { params: { search: query }})
+        return response.data.map(job => ({
+          id: job.id,
+          type: 'job',
+          attributes: job,
+        }))
+      },
+      getDisplayName: (item) => item.attributes?.title || 'Untitled',
+      getSubtitle: (item) => item.attributes?.location || null,
+    },
+  ]
+}
 ```
 
-**Quota Endpoint:**
+### MentionProvider Interface
 
 ```typescript
-{ limit: number, used: number, remaining: number }
+interface MentionProvider {
+  type: string                                              // Unique type identifier
+  label: string                                             // Display label for group
+  icon?: Component                                          // Icon component
+  iconClass?: string                                        // Icon CSS classes
+  routes?: string[]                                         // Limit to specific routes
+  priority?: number                                         // Sort order (higher = first)
+  search: (query: string) => Promise<MentionItem[]> | MentionItem[]
+  getDisplayName?: (item: MentionItem) => string
+  getSubtitle?: (item: MentionItem) => string | null
+  buildMentionText?: (item: MentionItem) => string
+}
+
+interface MentionItem {
+  id: string
+  type: string
+  name?: string
+  label?: string
+  title?: string
+  attributes?: Record<string, any> | null
+  relationships?: Record<string, any> | null
+}
 ```
 
-## TypeScript Support
+## 💡 Suggestion Providers
 
-Full TypeScript support with exported types:
+Context-aware suggestions based on current page:
 
 ```typescript
-import type {
-  ChatMessage,
-  ChatAttachment,
-  Mention,
-  ChatQuota,
-  RestifyAiConfig,
-  MentionProvider,
-  SuggestionProvider,
-  AISuggestion,
-  AiChatDrawerUI,
-  AiChatDrawerTexts,
-} from "@doderasoftware/restify-ai"
+import type { SuggestionProvider, AISuggestion, PageContext } from '@doderasoftware/restify-ai'
+import { UserGroupIcon, ChartBarIcon, CalendarDaysIcon } from '@heroicons/vue/24/outline'
+
+function createSuggestionProviders(): SuggestionProvider[] {
+  return [
+    {
+      id: 'employees',
+      routes: ['/employees'],
+      priority: 10,
+      
+      getSuggestions: (context: PageContext): AISuggestion[] => {
+        const isDetailView = context.entityId
+        const employeeName = context.metadata?.employeeName
+
+        if (isDetailView && employeeName) {
+          // Suggestions for employee detail page
+          return [
+            {
+              id: 'performance-review',
+              title: 'Prepare Evaluation',
+              description: 'Performance review points',
+              icon: ChartBarIcon,
+              gradientClass: 'bg-gradient-to-br from-violet-500/10 to-purple-500/10',
+              prompt: `Help me prepare a performance review for ${employeeName}.`,
+              permission: 'manageEmployees',
+            },
+          ]
+        }
+
+        // Suggestions for employee list
+        return [
+          {
+            id: 'find-available',
+            title: 'Who is Available?',
+            description: 'See who is not on leave',
+            icon: CalendarDaysIcon,
+            gradientClass: 'bg-gradient-to-br from-teal-500/10 to-emerald-500/10',
+            prompt: 'Who is available today and not on leave?',
+            permission: 'manageEmployees',
+          },
+          {
+            id: 'team-analytics',
+            title: 'Team Analysis',
+            description: 'Team structure insights',
+            icon: ChartBarIcon,
+            gradientClass: 'bg-gradient-to-br from-amber-500/10 to-orange-500/10',
+            prompt: 'Give me an overview of our team structure.',
+            permission: 'manageEmployees',
+          },
+        ]
+      },
+    },
+    {
+      id: 'hiring',
+      routes: ['/hiring/jobs', '/hiring/candidates'],
+      priority: 10,
+      getSuggestions: (): AISuggestion[] => [
+        {
+          id: 'open-positions',
+          title: 'Open Positions',
+          description: 'List all open job positions',
+          icon: UserGroupIcon,
+          prompt: 'Show me all currently open job positions.',
+        },
+      ],
+    },
+  ]
+}
 ```
 
-## Browser Support
-
-- Chrome 80+
-- Firefox 75+
-- Safari 13+
-- Edge 80+
+### Default Suggestions
 
-## Contributing
+```typescript
+function getDefaultSuggestions(): AISuggestion[] {
+  return [
+    {
+      id: 'help',
+      title: 'How can you help?',
+      description: 'Learn what I can do',
+      prompt: 'What can you help me with?',
+    },
+    {
+      id: 'contact-support',
+      title: 'Contact Support',
+      description: 'Get help from a human',
+      prompt: 'I need to contact support',
+      isSupportRequest: true,
+    },
+  ]
+}
+```
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+### SuggestionProvider Interface
 
-## License
+```typescript
+interface SuggestionProvider {
+  id: string                                                  // Unique identifier
+  routes?: string[]                                           // Route patterns to match
+  matcher?: (path: string, context: PageContext | null) => boolean
+  getSuggestions: (context: PageContext) => AISuggestion[]
+  extractContext?: (path: string) => Record<string, any>
+  priority?: number                                           // Higher = first
+}
 
-[MIT](LICENSE) - [BinarCode](https://binarcode.com)
+interface AISuggestion {
+  id: string
+  title: string
+  description?: string
+  icon?: Component
+  className?: string
+  gradientClass?: string
+  prompt: string | ((context: PageContext) => string)
+  permission?: string
+  category?: string
+  isSupportRequest?: boolean
+}
+```
 
----
+## 🎨 UI Customization
 
-<div align="center">
-  <p><strong>Built with love by <a href="https://binarcode.com">BinarCode</a></strong></p>
-  <p>
-    <a href="https://laravel-restify.com">Laravel Restify</a> |
-    <a href="https://github.com/BinarCode/laravel-restify">GitHub</a> |
-    <a href="https://binarcode.com">Website</a>
-  </p>
-  <p><sub>Published by <a href="https://doderasoft.com">Dodera Software</a></sub></p>
-</div>
+Override CSS classes for any component:
 
-## Store API
+```vue
+<AiChatDrawer
+  v-model="isOpen"
+  :ui="{
+    backdrop: 'bg-black/50 backdrop-blur-sm',
+    drawer: 'shadow-2xl',
+    panel: 'bg-gray-50 dark:bg-gray-900',
+    header: 'border-b-2 border-primary-500',
+    body: 'custom-scrollbar',
+    footer: 'border-t border-gray-200',
+  }"
+/>
+```
 
-Access the Pinia store for advanced use cases:
+### AiChatDrawerUI
 
 ```typescript
-import { useRestifyAiStore } from "@doderasoftware/restify-ai"
-
-const store = useRestifyAiStore()
-
-// State
-store.chatHistory          // ChatMessage[]
-store.loading              // boolean
-store.sending              // boolean
-store.quota                // { limit, used, remaining }
-store.error                // { message, failedQuestion, timestamp }
-
-// Actions
-store.toggleChat()
-store.sendMessage(payload)
-store.cancelRequest()
-store.retryLastMessage()
-store.clearChatHistory()
-store.fetchQuota()
-store.uploadFile(file)
+interface AiChatDrawerUI {
+  backdrop?: string              // Backdrop overlay
+  drawer?: string                // Main drawer container
+  panel?: string                 // Inner panel
+  header?: string                // Header container
+  headerTitle?: string           // Header title
+  headerActions?: string         // Header actions
+  headerActionButton?: string    // Header buttons
+  body?: string                  // Messages container
+  footer?: string                // Footer container
+  quotaDisplay?: string          // Quota display
+  newChatButton?: string         // New chat button
+  errorContainer?: string        // Error container
+  errorMessage?: string          // Error message
+  retryButton?: string           // Retry button
+  closeConfirmModal?: string     // Confirm modal
+  closeConfirmButton?: string    // Confirm button
+  cancelButton?: string          // Cancel button
+  historyLimitModal?: string     // History limit modal
+  historyLimitButton?: string    // History limit button
+}
 ```
 
-## Composables
-
-### useAiDrawerShortcut
+### ChatInputUI
 
 ```typescript
-import { useAiDrawerShortcut } from "@doderasoftware/restify-ai"
+interface ChatInputUI {
+  root?: string                  // Root container
+  form?: string                  // Form wrapper
+  inputContainer?: string        // Input container
+  inputWrapper?: string          // Input border wrapper
+  textarea?: string              // Textarea element
+  attachButton?: string          // Attach button
+  sendButton?: string            // Send button
+  sendButtonActive?: string      // Send active state
+  sendButtonDisabled?: string    // Send disabled state
+  stopButton?: string            // Stop button
+  supportToggle?: string         // Support toggle
+  supportBadge?: string          // Support badge
+  attachmentsContainer?: string  // Attachments container
+  attachmentItem?: string        // Attachment item
+  attachmentThumbnail?: string   // Attachment thumbnail
+  attachmentRemove?: string      // Remove button
+  suggestionsDropdown?: string   // Suggestions dropdown
+  suggestionItem?: string        // Suggestion item
+  suggestionItemSelected?: string // Selected suggestion
+  contextLink?: string           // Context link
+}
+```
 
-// Uses store directly (recommended)
-useAiDrawerShortcut()
+### ChatMessageUI
 
-// Or pass a ref
-const drawerRef = ref(false)
-useAiDrawerShortcut(drawerRef)
+```typescript
+interface ChatMessageUI {
+  root?: string                  // Root container
+  userMessage?: string           // User message container
+  userBubble?: string            // User bubble
+  userAvatar?: string            // User avatar
+  assistantMessage?: string      // Assistant container
+  assistantBubble?: string       // Assistant bubble
+  loadingIndicator?: string      // Loading indicator
+  loadingDots?: string           // Loading dots
+  content?: string               // Content wrapper
+  attachmentsContainer?: string  // Attachments
+  attachmentItem?: string        // Attachment item
+  actionsContainer?: string      // Actions container
+  showMoreButton?: string        // Show more button
+}
 ```
 
-### usePageAiContext
+## 📝 TypeScript Types
 
-```typescript
-import { usePageAiContext } from "@doderasoftware/restify-ai"
+All types are exported:
 
-usePageAiContext({
-  pageType: "invoice-detail",
-  entityId: route.params.id,
-  entityType: "invoice",
-  metadata: { customerName: invoice.value?.customer?.name },
-})
+```typescript
+import type {
+  // Core Config
+  RestifyAiConfig,
+  RestifyAiEndpoints,
+  RestifyAiLabels,
+  RestifyAiTheme,
+  
+  // Chat Types
+  ChatMessage,
+  ChatQuota,
+  ChatError,
+  ChatAttachment,
+  ChatRole,
+  SubmitPayload,
+  
+  // Context
+  PageContext,
+  
+  // Providers
+  MentionProvider,
+  MentionItem,
+  Mention,
+  SuggestionProvider,
+  AISuggestion,
+  
+  // History
+  HistoryLimitConfig,
+  LoadingTextConfig,
+  
+  // UI Customization
+  AiChatDrawerUI,
+  ChatInputUI,
+  ChatMessageUI,
+  AiEmptyStateUI,
+  MentionListUI,
+  
+  // Text Customization
+  AiChatDrawerTexts,
+  ChatInputTexts,
+  ChatMessageTexts,
+  
+  // Slot Props
+  HeaderSlotProps,
+  MessageSlotProps,
+  InputSlotProps,
+  EmptyStateSlotProps,
+  
+  // Hooks
+  BeforeSendHook,
+  AfterResponseHook,
+  OnStreamStartHook,
+  OnStreamEndHook,
+  OnStreamChunkHook,
+  StreamParserFunction,
+  RetryConfig,
+} from '@doderasoftware/restify-ai'
 ```
 
-## Backend Integration
+## 🔌 Backend Integration
 
-### Laravel Restify Setup
+This package is designed for [Laravel Restify](https://laravel-restify.com) backends:
 
-This package is designed to work with [Laravel Restify](https://laravel-restify.com):
+### Ask Endpoint (SSE Stream)
 
 ```php
 // routes/api.php
-Route::middleware("auth:sanctum")->group(function () {
-    Route::post("/ai/ask", [AiController::class, "ask"]);
-    Route::post("/ai/upload", [AiController::class, "upload"]);
-    Route::get("/ai/quota", [AiController::class, "quota"]);
-});
+Route::post('/ask', [AiController::class, 'ask']);
 ```
 
-### Expected Request/Response Formats
-
-**Ask Endpoint (SSE Stream):**
-
-```typescript
-// Request
+**Request:**
+```json
 {
-  question: string
-  history: Array<{ role: string, message: string }>
-  stream: true
-  files?: Array<{ id: string, name: string }>
-  mentions?: Array<{ id: string, type: string, name: string }>
+  "question": "Who is available today?",
+  "history": [
+    { "role": "user", "message": "Hello" },
+    { "role": "assistant", "message": "Hi! How can I help?" }
+  ],
+  "stream": true,
+  "files": [{ "id": "file-123", "name": "report.pdf" }],
+  "mentions": [{ "id": "emp-1", "type": "employee", "name": "John Doe" }],
+  "contact_support": false
 }
+```
 
-// Response: Server-Sent Events (OpenAI format)
-data: {"choices":[{"delta":{"content":"Hello"}}]}
-data: {"choices":[{"delta":{"content":" world"}}]}
+**Response (SSE):**
+```
+data: {"choices":[{"delta":{"content":"Based on"}}]}
+data: {"choices":[{"delta":{"content":" the schedule..."}}]}
 data: [DONE]
 ```
 
-**Upload Endpoint:**
+### Quota Endpoint
 
-```typescript
-{ id: string, name: string, url: string, type: string, size: number }
+```php
+// routes/api.php
+Route::get('/ai/quota', [AiController::class, 'quota']);
 ```
 
-**Quota Endpoint:**
+**Response:**
+```json
+{
+  "data": {
+    "limit": 100,
+    "used": 25,
+    "remaining": 75
+  }
+}
+```
 
-```typescript
-{ limit: number, used: number, remaining: number }
+### Upload Endpoint
+
+```php
+// routes/api.php
+Route::post('/ai/upload', [AiController::class, 'upload']);
+```
+
+**Response:**
+```json
+{
+  "data": {
+    "id": "file-123",
+    "name": "document.pdf",
+    "url": "/storage/uploads/document.pdf",
+    "type": "application/pdf",
+    "size": 102400
+  }
+}
 ```
 
-## TypeScript Support
+## ⌨️ Keyboard Shortcuts
 
-Full TypeScript support with exported types:
+| Shortcut | Action |
+|----------|--------|
+| `⌘/Ctrl + G` | Toggle drawer (configurable) |
+| `Escape` | Close drawer |
+| `Enter` | Send message |
+| `Shift + Enter` | New line |
+
+## 💾 Session Storage
+
+Chat history persists in `sessionStorage` by default:
+
+- Key: `restify_ai_chat_history` (configurable via `chatHistoryKey`)
+- Cleared on browser close
+- Persists across page navigation
+
+## 📦 Package Exports
 
 ```typescript
-import type {
-  ChatMessage,
-  ChatAttachment,
-  Mention,
-  ChatQuota,
-  RestifyAiConfig,
-  MentionProvider,
-  SuggestionProvider,
-  AISuggestion,
-  AiChatDrawerUI,
-  AiChatDrawerTexts,
-} from "@doderasoftware/restify-ai"
+// Components
+export { AiChatDrawer } from './components'
+
+// Store
+export { useRestifyAiStore } from './store'
+
+// Composables
+export { 
+  useAiDrawerShortcut,
+  usePageAiContext,
+  useAiContext,
+  useAiSuggestions 
+} from './composables'
+
+// Config
+export { 
+  initRestifyAi, 
+  getConfig, 
+  getLabels, 
+  getUI,
+  RestifyAiPlugin 
+} from './config'
+
+// Types
+export * from './types'
 ```
 
-## Browser Support
+## 🤝 Requirements
 
-- Chrome 80+
-- Firefox 75+
-- Safari 13+
-- Edge 80+
+- **Vue 3.3+**
+- **Pinia 2.1+**
+- A backend implementing the streaming chat API (e.g., [Laravel Restify](https://laravel-restify.com))
 
-## Contributing
+## 🔗 Links
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+- [📖 Laravel Restify Documentation](https://laravel-restify.com)
+- [📦 npm Package](https://www.npmjs.com/package/@doderasoftware/restify-ai)
+- [🏢 BinarCode](https://binarcode.com)
+- [💻 GitHub](https://github.com/BinarCode/laravel-restify)
 
-## License
+## 📄 License
 
-[MIT](LICENSE) - [BinarCode](https://binarcode.com)
+MIT © [BinarCode](https://binarcode.com)
 
 ---
 
-<div align="center">
-  <p><strong>Built with love by <a href="https://binarcode.com">BinarCode</a></strong></p>
-  <p>
-    <a href="https://laravel-restify.com">Laravel Restify</a> |
-    <a href="https://github.com/BinarCode/laravel-restify">GitHub</a> |
-    <a href="https://binarcode.com">Website</a>
-  </p>
-  <p><sub>Published by <a href="https://doderasoft.com">Dodera Software</a></sub></p>
-</div>
+Built with ❤️ by the [BinarCode](https://binarcode.com) team · Published by [Dodera Software](https://doderasoft.com)