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

package/README.md

@@ -1,514 +1,631 @@
-# @doderasoftware/restify-ai
+<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>
 
-> 🤖 A fully customizable Vue 3 AI chatbot component library with Laravel Restify integration
+---
 
-[![npm version](https://img.shields.io/npm/v/@doderasoftware/restify-ai)](https://www.npmjs.com/package/@doderasoftware/restify-ai)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
-[![Vue 3](https://img.shields.io/badge/Vue-3.x-brightgreen)](https://vuejs.org/)
+## 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
+
+```bash
+# npm
+npm install @doderasoftware/restify-ai
 
----
+# yarn
+yarn add @doderasoftware/restify-ai
 
-## ✨ Features
-
-| Feature | Description |
-|---------|-------------|
-| 🔌 **Laravel Restify** | Built for seamless Laravel Restify AI endpoints |
-| 📡 **SSE Streaming** | Real-time streaming responses with Server-Sent Events |
-| 📎 **File Attachments** | Built-in file upload with progress & preview |
-| 💬 **@Mentions** | Pluggable mention providers (employees, projects, etc.) |
-| 💡 **Smart Suggestions** | Route-aware suggestion system |
-| 🎨 **Fully Customizable** | UI classes, texts, slots, themes |
-| ⌨️ **Keyboard Shortcuts** | Configurable shortcuts (e.g., \`Cmd+G\`) |
-| 🔄 **Auto Retry** | Configurable retry logic with exponential backoff |
-| 💾 **Session Persistence** | Chat history survives page refresh |
-| 🌙 **Dark Mode** | Full dark mode support out of the box |
-| 📦 **Tree-shakable** | Import only what you need |
-| 🎯 **TypeScript** | Full TypeScript support |
+# pnpm
+pnpm add @doderasoftware/restify-ai
+```
 
----
+### Peer Dependencies
 
-## 📦 Installation
+```bash
+npm install vue@^3.3.0 pinia@^2.1.0 tailwindcss@^3.3.0
+```
 
-\`\`\`bash
-npm install @doderasoftware/restify-ai
-# or
-pnpm add @doderasoftware/restify-ai
-\`\`\`
+## Quick Start
 
-**Peer Dependencies:** \`vue ^3.4\`, \`pinia ^2.1\`
+### 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
+
+```typescript
+// main.ts
+import "@doderasoftware/restify-ai/styles"
+```
+
+### 3. Register the Plugin
+
+```typescript
+// plugins/restifyAi.ts
+import { RestifyAiPlugin } from "@doderasoftware/restify-ai"
+import type { App } from "vue"
+
+export function setupRestifyAi(app: App) {
+  app.use(RestifyAiPlugin, {
+    endpoints: {
+      ask: "/api/ai/ask",
+      uploadFile: "/api/ai/upload",
+      quota: "/api/ai/quota",
+    },
+    getAuthToken: () => localStorage.getItem("token"),
+    baseUrl: import.meta.env.VITE_API_URL,
+  })
+}
+```
 
-\`\`\`typescript
+```typescript
 // main.ts
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import { RestifyAiPlugin } from '@doderasoftware/restify-ai'
-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.use(RestifyAiPlugin, {
-  endpoints: {
-    ask: '/api/ai/ask',        // Required - SSE streaming endpoint
-    quota: '/api/ai/quota',    // Optional - quota endpoint
-    uploadFile: '/api/ai/upload', // Optional - file upload
-  },
-  getAuthToken: () => localStorage.getItem('token'),
-})
-
-app.mount('#app')
-\`\`\`
+### 4. Add the Component
 
-\`\`\`vue
-<!-- App.vue -->
+```vue
 <template>
-  <AiChatDrawer v-model="showChat" />
-  <button @click="showChat = true">Open AI Chat</button>
+  <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>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-import { AiChatDrawer } from '@doderasoftware/restify-ai'
+<script setup lang="ts">
+import { ref } from "vue"
+import { AiChatDrawer } from "@doderasoftware/restify-ai"
 
 const showChat = ref(false)
 </script>
-\`\`\`
+```
 
----
+### 5. Enable Keyboard Shortcut
 
-## ⚙️ Plugin Configuration
+```typescript
+import { useAiDrawerShortcut } from "@doderasoftware/restify-ai"
 
-### Required Options
+// Enable Cmd/Ctrl+G to toggle drawer
+useAiDrawerShortcut()
+```
 
-| Option | Type | Description |
-|--------|------|-------------|
-| \`endpoints.ask\` | \`string\` | SSE streaming endpoint |
-| \`getAuthToken\` | \`() => string \| Promise<string>\` | Auth token getter |
+## Configuration
 
-### API Configuration
+### Full Configuration Options
 
-\`\`\`typescript
-{
-  baseUrl: 'https://api.example.com',
+```typescript
+app.use(RestifyAiPlugin, {
+  // REQUIRED
   endpoints: {
-    ask: '/api/ai/ask',
-    quota: '/api/ai/quota',
-    uploadFile: '/api/ai/upload',
+    ask: "/api/ai/ask",
+    uploadFile: "/api/ai/upload",
+    quota: "/api/ai/quota",
   },
-  getAuthToken: () => authStore.token,
-  getCustomHeaders: () => ({
-    'X-CSRF-TOKEN': csrfToken,
-    'X-App-Version': '1.0.0',
-  }),
-}
-\`\`\`
+  getAuthToken: () => localStorage.getItem("auth_token"),
 
-### Request Customization
+  // 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,
 
-\`\`\`typescript
-{
-  // Modify request payload before sending
-  buildRequest: (payload) => ({
-    ...payload,
-    context: { page: 'dashboard' },
-  }),
-  
-  // Custom stream parser (default: OpenAI format)
-  parseStreamContent: (data) => JSON.parse(data).content,
-  
-  // Request/response interceptors
-  requestInterceptor: (url, options) => options,
-  responseInterceptor: (response) => response,
-}
-\`\`\`
+  // RETRY
+  retry: { maxRetries: 3, retryDelay: 1000 },
 
-### Retry Configuration
+  // INTERNATIONALIZATION
+  translate: (key, params) => i18n.t("ai." + key, params),
+  labels: {
+    title: "AI Assistant",
+    placeholder: "Ask me anything...",
+    loadingText: "Thinking...",
+  },
 
-\`\`\`typescript
-{
-  retry: {
-    maxRetries: 3,
-    retryDelay: 1000, // ms, multiplied by attempt
-    shouldRetry: (error, attempt) => error.status >= 500,
+  // 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",
   },
-}
-\`\`\`
 
-### Providers
+  // LIMITS
+  chatHistoryLimit: 50,
+  maxAttachments: 5,
+  maxFileSize: 10 * 1024 * 1024,
 
-\`\`\`typescript
-{
-  // @Mention providers
-  mentionProviders: [
-    {
-      type: 'employee',
-      label: 'Employees',
-      priority: 10,
-      search: async (query) => api.searchEmployees(query),
-    },
-  ],
-  
-  // Route-aware suggestions
-  suggestionProviders: [
-    {
-      id: 'dashboard',
-      routes: ['/dashboard', '/analytics'],
-      getSuggestions: (context) => [...],
-    },
-  ],
-  
-  // Default suggestions for empty state
-  defaultSuggestions: [
-    { id: '1', title: 'How can you help?', prompt: 'What can you do?' },
-  ],
-}
-\`\`\`
+  // FEATURES
+  keyboardShortcut: "cmd+g",
+  enableSupportMode: true,
 
-### Limits & Storage
+  // CUSTOM COMPONENTS
+  assistantAvatar: CustomAvatarComponent,
+  userAvatar: () => currentUser.value?.avatarUrl,
 
-\`\`\`typescript
-{
-  chatHistoryLimit: 15,           // Max messages
-  maxAttachments: 5,              // Max files per message
-  maxFileSize: 10 * 1024 * 1024,  // 10MB
-  acceptedFileTypes: 'image/*,.pdf,.txt',
-  chatHistoryKey: 'my_chat_history',    // sessionStorage key
-  drawerStateKey: 'my_drawer_state',    // localStorage key
-}
-\`\`\`
+  // CALLBACKS
+  onMessageSent: (msg) => analytics.track("ai_sent"),
+  onError: (err) => Sentry.captureException(err),
+  onStreamStart: () => console.log("Stream started"),
+  beforeSend: (payload) => ({ ...payload, timestamp: Date.now() }),
+})
+```
 
-### Features
+## Component API
 
-\`\`\`typescript
-{
-  keyboardShortcut: 'cmd+g',    // null to disable
-  enableSupportMode: true,      // Support request toggle
-}
-\`\`\`
+### AiChatDrawer Props
 
-### Custom Components
+| 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) |
+| `position` | `"left" \| "right"` | `"right"` | Drawer position |
+| `showBackdrop` | `boolean` | `false` | Show backdrop overlay |
+| `closeOnEscape` | `boolean` | `true` | Close on Escape key |
+| `showQuota` | `boolean` | `true` | Show quota display |
+| `confirmClose` | `boolean` | `true` | Confirm before clearing |
+| `ui` | `AiChatDrawerUI` | `{}` | Custom CSS classes |
+| `texts` | `AiChatDrawerTexts` | `{}` | Custom text labels |
+
+### Events
 
-\`\`\`typescript
-{
-  assistantAvatar: MyAvatarComponent,
-  userAvatar: UserAvatarComponent,
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `boolean` | Drawer state changed |
+| `close` | - | Drawer closed |
+| `contact-support` | - | Support mode activated |
+| `new-chat` | - | New chat started |
+
+### 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:
+
+```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
+
+```typescript
+interface AiChatDrawerUI {
+  backdrop?: string
+  drawer?: string
+  panel?: string
+  header?: string
+  headerTitle?: string
+  body?: string
+  footer?: string
+  newChatButton?: string
+  errorContainer?: string
+  retryButton?: string
 }
-\`\`\`
 
-### Lifecycle Callbacks
+interface ChatInputUI {
+  root?: string
+  textarea?: string
+  sendButton?: string
+  attachButton?: string
+  suggestionsDropdown?: string
+}
 
-\`\`\`typescript
-{
-  onError: (error) => console.error(error),
-  onQuotaFetched: (quota) => console.log(quota),
-  onMessageSent: (message) => analytics.track('message_sent'),
-  onResponseReceived: (message) => console.log(message),
-  onDrawerToggle: (isOpen) => console.log(isOpen),
-  onNewChat: () => console.log('New chat started'),
-  
-  // Stream hooks
-  onStreamStart: () => console.log('Streaming...'),
-  onStreamEnd: (fullMessage) => console.log('Done'),
-  onStreamChunk: (chunk) => console.log(chunk.content),
-  beforeSend: (payload) => payload,
-  afterResponse: (message) => saveToHistory(message),
-  
-  // File upload hooks
-  onFileUploadStart: (file) => console.log('Uploading', file.name),
-  onFileUploadProgress: (file, progress) => console.log(progress),
-  onFileUploadComplete: (file) => console.log('Done'),
-  onFileUploadError: (file, error) => console.error(error),
+interface ChatMessageUI {
+  root?: string
+  userBubble?: string
+  assistantBubble?: string
+  content?: string
+  loadingDots?: string
 }
-\`\`\`
+```
+
+## Store API
+
+Access the Pinia store for advanced use cases:
+
+```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)
+```
+
+## Composables
+
+### useAiDrawerShortcut
+
+```typescript
+import { useAiDrawerShortcut } from "@doderasoftware/restify-ai"
+
+// Uses store directly (recommended)
+useAiDrawerShortcut()
+
+// Or pass a ref
+const drawerRef = ref(false)
+useAiDrawerShortcut(drawerRef)
+```
 
-### Labels / i18n
+### usePageAiContext
 
-\`\`\`typescript
+```typescript
+import { usePageAiContext } from "@doderasoftware/restify-ai"
+
+usePageAiContext({
+  pageType: "invoice-detail",
+  entityId: route.params.id,
+  entityType: "invoice",
+  metadata: { customerName: invoice.value?.customer?.name },
+})
+```
+
+## Backend Integration
+
+### Laravel Restify Setup
+
+This package is designed to work with [Laravel Restify](https://laravel-restify.com):
+
+```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"]);
+});
+```
+
+### Expected Request/Response Formats
+
+**Ask Endpoint (SSE Stream):**
+
+```typescript
+// Request
 {
-  labels: {
-    aiName: 'My AI Assistant',
-    inputPlaceholder: 'Type your message...',
-    emptyStateTitle: 'How can I help?',
-    // 40+ customizable labels
-  },
-  translate: (key, params) => i18n.t(key, params),
-  can: (permission) => user.hasPermission(permission),
+  question: string
+  history: Array<{ role: string, message: string }>
+  stream: true
+  files?: Array<{ id: string, name: string }>
+  mentions?: Array<{ id: string, type: string, name: string }>
 }
-\`\`\`
 
----
+// Response: Server-Sent Events (OpenAI format)
+data: {"choices":[{"delta":{"content":"Hello"}}]}
+data: {"choices":[{"delta":{"content":" world"}}]}
+data: [DONE]
+```
 
-## 🧩 Components
+**Upload Endpoint:**
 
-### \`<AiChatDrawer>\`
+```typescript
+{ id: string, name: string, url: string, type: string, size: number }
+```
 
-Main chat drawer component with all features.
+**Quota Endpoint:**
 
-#### Props
+```typescript
+{ limit: number, used: number, remaining: number }
+```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| \`v-model\` | \`boolean\` | - | Drawer visibility |
-| \`width\` | \`string\` | \`'600px'\` | Drawer width |
-| \`fullscreenWidth\` | \`string\` | \`'90vw'\` | Fullscreen width |
-| \`position\` | \`'left' \| 'right'\` | \`'right'\` | Drawer position |
-| \`showBackdrop\` | \`boolean\` | \`false\` | Show backdrop overlay |
-| \`closeOnBackdropClick\` | \`boolean\` | \`false\` | Close on backdrop click |
-| \`closeOnEscape\` | \`boolean\` | \`true\` | Close on Escape key |
-| \`showQuota\` | \`boolean\` | \`true\` | Show quota display |
-| \`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 closing |
-| \`ui\` | \`AiChatDrawerUI\` | - | Custom CSS classes |
-| \`texts\` | \`AiChatDrawerTexts\` | - | Custom text labels |
-| \`historyLimit\` | \`HistoryLimitConfig\` | - | History limit config |
-| \`loadingText\` | \`LoadingTextConfig\` | - | Dynamic loading text |
-
-#### Events
+## TypeScript Support
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| \`close\` | - | Drawer closed |
-| \`contact-support\` | - | Support mode triggered |
-| \`new-chat\` | - | New chat started |
-
-#### Slots
-
-| Slot | Props | Description |
-|------|-------|-------------|
-| \`header\` | \`HeaderSlotProps\` | Custom header |
-| \`empty-state\` | \`{ suggestions, onClick }\` | Custom empty state |
-| \`message\` | \`MessageSlotProps\` | Custom message rendering |
-| \`input\` | \`InputSlotProps\` | Custom input |
-| \`quota\` | \`{ quota }\` | Custom quota display |
-| \`setup\` | - | Custom setup guide |
-| \`context-link\` | - | Link above input |
-
-### Other Components
-
-| Component | Description |
-|-----------|-------------|
-| \`<ChatInput>\` | Message input with attachments & mentions |
-| \`<ChatMessage>\` | Single message display |
-| \`<AiEmptyState>\` | Empty state with suggestions |
-| \`<MentionList>\` | @mention dropdown |
-| \`<AiAvatar>\` | AI avatar icon |
-| \`<UserAvatar>\` | User avatar icon |
-| \`<ChatMessageActions>\` | Copy/action buttons |
-
-All components accept \`:ui\` and \`:texts\` props for full customization.
+Full TypeScript support with exported types:
 
----
+```typescript
+import type {
+  ChatMessage,
+  ChatAttachment,
+  Mention,
+  ChatQuota,
+  RestifyAiConfig,
+  MentionProvider,
+  SuggestionProvider,
+  AISuggestion,
+  AiChatDrawerUI,
+  AiChatDrawerTexts,
+} from "@doderasoftware/restify-ai"
+```
 
-## 🎨 UI Customization
+## Browser Support
 
-Every component accepts a \`:ui\` prop for CSS class overrides:
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
 
-\`\`\`vue
-<AiChatDrawer
-  :ui="{
-    drawer: 'my-drawer-class',
-    header: 'my-header-class',
-    body: 'my-body-class',
-  }"
-  :texts="{
-    title: 'My AI',
-    placeholder: 'Ask anything...',
-  }"
-/>
-\`\`\`
+## Contributing
 
-### Available UI Props
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
 
-- \`AiChatDrawerUI\` - backdrop, drawer, panel, header, body, etc.
-- \`ChatInputUI\` - root, textarea, sendButton, attachButton, etc.
-- \`ChatMessageUI\` - userBubble, assistantBubble, loadingDots, etc.
-- \`AiEmptyStateUI\` - grid, suggestionCard, title, etc.
-- \`MentionListUI\` - item, itemSelected, groupHeader, etc.
+## License
+
+[MIT](LICENSE) - [BinarCode](https://binarcode.com)
 
 ---
 
-## 📚 Composables
-
-\`\`\`typescript
-import {
-  useRestifyAiStore,      // Pinia store
-  useAiSuggestions,       // Suggestions management
-  useAiContext,           // Page context
-  usePageAiContext,       // Route-based context
-  useKeyboardShortcut,    // Custom shortcuts
-  useAiDrawerShortcut,    // Drawer toggle shortcut
-  useMentionParsing,      // Parse @mentions
-  useChatMarkdown,        // Markdown rendering
-  useChatScroll,          // Auto-scroll
-  useChatErrorHandling,   // Error management
-  useLoadingText,         // Dynamic loading messages
-  useHistoryLimit,        // History limit dialogs
-} from '@doderasoftware/restify-ai'
-\`\`\`
-
-### Store Actions
-
-\`\`\`typescript
+<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>
+
+## Store API
+
+Access the Pinia store for advanced use cases:
+
+```typescript
+import { useRestifyAiStore } from "@doderasoftware/restify-ai"
+
 const store = useRestifyAiStore()
 
-store.askQuestion(question, attachments, mentions)
+// 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.retry()
+store.retryLastMessage()
 store.clearChatHistory()
-store.clearError()
 store.fetchQuota()
-store.toggleSupportMode()
-\`\`\`
+store.uploadFile(file)
+```
 
-### Store State
+## Composables
 
-\`\`\`typescript
-store.chatHistory      // ChatMessage[]
-store.sending          // boolean
-store.error            // ChatError
-store.quota            // ChatQuota
-store.showChat         // boolean
-store.isFullscreen     // boolean
-store.supportRequestMode // boolean
-\`\`\`
+### useAiDrawerShortcut
 
----
+```typescript
+import { useAiDrawerShortcut } from "@doderasoftware/restify-ai"
 
-## 🔧 Advanced Features
+// Uses store directly (recommended)
+useAiDrawerShortcut()
 
-### History Limit Dialog
+// Or pass a ref
+const drawerRef = ref(false)
+useAiDrawerShortcut(drawerRef)
+```
 
-\`\`\`vue
-<AiChatDrawer
-  :history-limit="{
-    limit: 20,
-    showWarningAt: 3,
-    warningMessage: 'Almost at limit!',
-    limitMessage: 'Start a new chat to continue.',
-  }"
-/>
-\`\`\`
+### usePageAiContext
 
-### Dynamic Loading Text
+```typescript
+import { usePageAiContext } from "@doderasoftware/restify-ai"
 
-\`\`\`vue
-<AiChatDrawer
-  :loading-text="{
-    messages: ['Thinking...', 'Analyzing...', 'Almost done...'],
-    intervals: [0, 2000, 4000],
-  }"
-/>
-\`\`\`
+usePageAiContext({
+  pageType: "invoice-detail",
+  entityId: route.params.id,
+  entityType: "invoice",
+  metadata: { customerName: invoice.value?.customer?.name },
+})
+```
 
-### Keyboard Shortcut
+## Backend Integration
 
-\`\`\`typescript
-// Plugin config
-{ keyboardShortcut: 'cmd+shift+a' }
+### Laravel Restify Setup
 
-// Or use composable
-const { toggle } = useAiDrawerShortcut()
-\`\`\`
+This package is designed to work with [Laravel Restify](https://laravel-restify.com):
 
----
+```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"]);
+});
+```
 
-## 📡 Laravel Restify Backend
+### Expected Request/Response Formats
 
-Expected SSE endpoint format:
+**Ask Endpoint (SSE Stream):**
 
-\`\`\`php
-// routes/api.php
-Route::post('/ai/ask', [AiController::class, 'ask']);
-Route::get('/ai/quota', [AiController::class, 'quota']);
-\`\`\`
-
-\`\`\`php
-// AiController.php
-public function ask(Request $request)
+```typescript
+// Request
 {
-    return response()->stream(function () use ($request) {
-        // Stream OpenAI-format chunks
-        echo "data: " . json_encode([
-            'choices' => [['delta' => ['content' => 'Hello']]]
-        ]) . "\n\n";
-        ob_flush();
-        flush();
-        
-        echo "data: [DONE]\n\n";
-    }, 200, [
-        'Content-Type' => 'text/event-stream',
-        'Cache-Control' => 'no-cache',
-        'X-Accel-Buffering' => 'no',
-    ]);
+  question: string
+  history: Array<{ role: string, message: string }>
+  stream: true
+  files?: Array<{ id: string, name: string }>
+  mentions?: Array<{ id: string, type: string, name: string }>
 }
-\`\`\`
 
----
+// Response: Server-Sent Events (OpenAI format)
+data: {"choices":[{"delta":{"content":"Hello"}}]}
+data: {"choices":[{"delta":{"content":" world"}}]}
+data: [DONE]
+```
+
+**Upload Endpoint:**
+
+```typescript
+{ id: string, name: string, url: string, type: string, size: number }
+```
 
-## 📝 TypeScript Types
+**Quota Endpoint:**
 
-All types are exported:
+```typescript
+{ limit: number, used: number, remaining: number }
+```
 
-\`\`\`typescript
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```typescript
 import type {
   ChatMessage,
   ChatAttachment,
   Mention,
+  ChatQuota,
+  RestifyAiConfig,
   MentionProvider,
   SuggestionProvider,
   AISuggestion,
-  RestifyAiConfig,
-  ChatQuota,
-  ChatError,
-  // UI types
   AiChatDrawerUI,
-  ChatInputUI,
-  ChatMessageUI,
-  // Text types
   AiChatDrawerTexts,
-  ChatInputTexts,
-  // Config types
-  HistoryLimitConfig,
-  LoadingTextConfig,
-  RetryConfig,
-  // Hook types
-  BeforeSendHook,
-  AfterResponseHook,
-  StreamParserFunction,
-} from '@doderasoftware/restify-ai'
-\`\`\`
+} from "@doderasoftware/restify-ai"
+```
 
----
+## Browser Support
 
-## 📋 Quick Reference
-
-| Feature | Configuration |
-|---------|---------------|
-| SSE Streaming | Built-in, automatic |
-| Keyboard Shortcut | \`keyboardShortcut: 'cmd+g'\` |
-| @Mentions | \`mentionProviders: [...]\` |
-| Route Suggestions | \`suggestionProviders: [...]\` |
-| File Attachments | \`endpoints.uploadFile\` + \`maxAttachments\` |
-| Support Mode | \`enableSupportMode: true\` |
-| Custom Headers | \`getCustomHeaders: () => ({...})\` |
-| Auth Token | \`getAuthToken: () => token\` |
-| Base URL | \`baseUrl: 'https://api.example.com'\` |
-| Error Handling | \`onError: (err) => {...}\` |
-| Retry Logic | \`retry: { maxRetries: 3 }\` |
-| UI Customization | \`:ui\` prop on all components |
-| Text/i18n | \`:texts\` prop + \`labels\` config |
-| History Limit | \`:history-limit\` prop |
-| Loading Messages | \`:loading-text\` prop |
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
 
----
+## Contributing
 
-## 📄 License
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## License
+
+[MIT](LICENSE) - [BinarCode](https://binarcode.com)
+
+---
 
-MIT © [Dodera Software](https://github.com/doderasoftware)
+<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>