npm - @doderasoftware/restify-ai - Versions diffs - 0.1.0-beta.4 → 0.1.0-beta.6 - Mend

@doderasoftware/restify-ai 0.1.0-beta.4 → 0.1.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/README.md +354 -413
package/package.json +21 -9

package/README.md CHANGED Viewed

@@ -1,514 +1,455 @@
 # @doderasoftware/restify-ai
-> 🤖 A fully customizable Vue 3 AI chatbot component library with Laravel Restify integration
+A production-ready AI chatbot component for Vue 3 with real-time SSE streaming, file attachments, @mentions, and seamless 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/)
+[![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/)
+[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.x-38bdf8.svg)](https://tailwindcss.com/)
----
+**📖 [Laravel Restify](https://laravel-restify.com) | 📦 [npm](https://www.npmjs.com/package/@doderasoftware/restify-ai) | 🏢 [BinarCode](https://binarcode.com)**
 ## ✨ 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 |
----
+- 🌊 **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
+- 🎨 **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
+- 🎯 **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 agents
+- 🔄 **Retry Logic** - Automatic retry with configurable backoff
+- ⚠️ **Error Handling** - User-friendly error messages
 ## 📦 Installation
-\`\`\`bash
+```bash
 npm install @doderasoftware/restify-ai
-# or
-pnpm add @doderasoftware/restify-ai
-\`\`\`
+```
-**Peer Dependencies:** \`vue ^3.4\`, \`pinia ^2.1\`
+### Peer Dependencies
----
+```bash
+npm install vue@^3.3.0 pinia@^2.1.0 tailwindcss@^3.3.0
+```
 ## 🚀 Quick Start
-\`\`\`typescript
+### 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"),
+  ],
+}
+```
+### 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
 // 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'),
-})
+### 4. Add the Component
-app.mount('#app')
-\`\`\`
-\`\`\`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',
-  }),
-}
-\`\`\`
-### Request Customization
+  getAuthToken: () => localStorage.getItem("auth_token"),
-\`\`\`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,
-}
-\`\`\`
+  // 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 Configuration
+  // RETRY
+  retry: { maxRetries: 3, retryDelay: 1000 },
-\`\`\`typescript
-{
-  retry: {
-    maxRetries: 3,
-    retryDelay: 1000, // ms, multiplied by attempt
-    shouldRetry: (error, attempt) => error.status >= 500,
+  // INTERNATIONALIZATION
+  translate: (key, params) => i18n.t("ai." + key, params),
+  labels: {
+    title: "AI Assistant",
+    placeholder: "Ask me anything...",
+    loadingText: "Thinking...",
   },
-}
-\`\`\`
-### Providers
-\`\`\`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?' },
-  ],
-}
-\`\`\`
-### Limits & Storage
-\`\`\`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
-}
-\`\`\`
-### Features
-\`\`\`typescript
-{
-  keyboardShortcut: 'cmd+g',    // null to disable
-  enableSupportMode: true,      // Support request toggle
-}
-\`\`\`
-### Custom Components
-\`\`\`typescript
-{
-  assistantAvatar: MyAvatarComponent,
-  userAvatar: UserAvatarComponent,
-}
-\`\`\`
+  // MENTION PROVIDERS
+  mentionProviders: [{
+    type: "user",
+    label: "Users",
+    search: async (query) => api.searchUsers(query),
+  }],
+  // SUGGESTION PROVIDERS
+  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",
+  },
-### Lifecycle Callbacks
+  // LIMITS
+  chatHistoryLimit: 50,
+  maxAttachments: 5,
+  maxFileSize: 10 * 1024 * 1024,
-\`\`\`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),
-}
-\`\`\`
+  // FEATURES
+  keyboardShortcut: "cmd+g",
+  enableSupportMode: true,
-### Labels / i18n
+  // CUSTOM AVATARS
+  assistantAvatar: CustomAvatarComponent,
+  userAvatar: () => currentUser.value?.avatarUrl,
-\`\`\`typescript
-{
-  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),
-}
-\`\`\`
----
-## 🧩 Components
+  // CALLBACKS
+  onMessageSent: (msg) => analytics.track("ai_sent"),
+  onError: (err) => Sentry.captureException(err),
+  onStreamStart: () => console.log("Stream started"),
+  beforeSend: (payload) => ({ ...payload, timestamp: Date.now() }),
+})
+```
-### \`<AiChatDrawer>\`
+## 🎨 UI Customization
-Main chat drawer component with all features.
+The `:ui` prop allows complete control over every element's styling:
-#### Props
+```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 Keys - AiChatDrawer
+| Key | Description |
+|-----|-------------|
+| `backdrop` | Backdrop overlay |
+| `drawer` | Drawer container |
+| `panel` | Inner panel |
+| `header` | Header container |
+| `headerTitle` | Header title text |
+| `body` | Chat body area |
+| `footer` | Footer container |
+| `newChatButton` | New chat button |
+| `errorContainer` | Error message container |
+| `retryButton` | Retry button |
+### Available UI Keys - ChatInput
+| Key | Description |
+|-----|-------------|
+| `root` | Input root container |
+| `textarea` | Textarea element |
+| `sendButton` | Send button |
+| `attachButton` | Attachment button |
+| `suggestionsDropdown` | Suggestions dropdown |
+### Available UI Keys - ChatMessage
+| Key | Description |
+|-----|-------------|
+| `root` | Message root container |
+| `userBubble` | User message bubble |
+| `assistantBubble` | Assistant message bubble |
+| `content` | Message content |
+| `loadingDots` | Loading animation dots |
+## 📋 Props
 | 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
+| `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
 | Event | Payload | Description |
 |-------|---------|-------------|
-| \`close\` | - | Drawer closed |
-| \`contact-support\` | - | Support mode triggered |
-| \`new-chat\` | - | New chat started |
+| `update:modelValue` | `boolean` | Drawer state changed |
+| `close` | - | Drawer closed |
+| `contact-support` | - | Support mode activated |
+| `new-chat` | - | New chat started |
-#### Slots
+## 🎰 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.
+| `header` | `{ quota, isFullscreen, onNewChat, onClose }` | Custom header |
+| `empty-state` | `{ suggestions, onClick }` | Custom empty state |
+| `message` | `{ message, isUser, isLoading }` | Custom message bubble |
+| `input` | `{ modelValue, sending, onSubmit }` | Custom input area |
+```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>
+```
+## 🏪 Store API
+Access the Pinia store for advanced use cases:
+```typescript
+import { useRestifyAiStore } from "@doderasoftware/restify-ai"
----
-## 🎨 UI Customization
-Every component accepts a \`:ui\` prop for CSS class overrides:
-\`\`\`vue
-<AiChatDrawer
-  :ui="{
-    drawer: 'my-drawer-class',
-    header: 'my-header-class',
-    body: 'my-body-class',
-  }"
-  :texts="{
-    title: 'My AI',
-    placeholder: 'Ask anything...',
-  }"
-/>
-\`\`\`
-### Available UI Props
-- \`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.
----
-## 📚 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
 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
----
+Enable keyboard shortcuts to toggle the chat drawer:
-## 🔧 Advanced Features
+```typescript
+import { useAiDrawerShortcut } from "@doderasoftware/restify-ai"
-### History Limit Dialog
+// Uses store directly (recommended)
+useAiDrawerShortcut()
-\`\`\`vue
-<AiChatDrawer
-  :history-limit="{
-    limit: 20,
-    showWarningAt: 3,
-    warningMessage: 'Almost at limit!',
-    limitMessage: 'Start a new chat to continue.',
-  }"
-/>
-\`\`\`
+// Or pass a ref
+const drawerRef = ref(false)
+useAiDrawerShortcut(drawerRef)
+```
-### Dynamic Loading Text
+### usePageAiContext
-\`\`\`vue
-<AiChatDrawer
-  :loading-text="{
-    messages: ['Thinking...', 'Analyzing...', 'Almost done...'],
-    intervals: [0, 2000, 4000],
-  }"
-/>
-\`\`\`
+Provide page context to the AI for smarter responses:
-### Keyboard Shortcut
+```typescript
+import { usePageAiContext } from "@doderasoftware/restify-ai"
-\`\`\`typescript
-// Plugin config
-{ keyboardShortcut: 'cmd+shift+a' }
+usePageAiContext({
+  pageType: "invoice-detail",
+  entityId: route.params.id,
+  entityType: "invoice",
+  metadata: { customerName: invoice.value?.customer?.name },
+})
+```
-// Or use composable
-const { toggle } = useAiDrawerShortcut()
-\`\`\`
+## 🔌 Backend Integration
----
+This package is designed to work with [Laravel Restify](https://laravel-restify.com):
-## 📡 Laravel Restify Backend
+```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 SSE endpoint format:
+### Expected Request/Response Formats
-\`\`\`php
-// routes/api.php
-Route::post('/ai/ask', [AiController::class, 'ask']);
-Route::get('/ai/quota', [AiController::class, 'quota']);
-\`\`\`
+**Ask Endpoint (SSE Stream):**
-\`\`\`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 Types
+```typescript
+// Response
+{ id: string, name: string, url: string, type: string, size: number }
+```
-All types are exported:
+**Quota Endpoint:**
-\`\`\`typescript
+```typescript
+// Response
+{ limit: number, used: number, remaining: number }
+```
+## 📐 TypeScript
+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+
----
+## 🔗 Links
+- [📖 Laravel Restify Documentation](https://laravel-restify.com)
+- [📦 npm Package](https://www.npmjs.com/package/@doderasoftware/restify-ai)
+- [🏢 BinarCode](https://binarcode.com)
 ## 📄 License
-MIT © [Dodera Software](https://github.com/doderasoftware)
+MIT © [BinarCode](https://binarcode.com)
+---
+Built with ❤️ by [BinarCode](https://binarcode.com) · Published by [Dodera Software](https://doderasoft.com)

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@doderasoftware/restify-ai",
-  "version": "0.1.0-beta.4",
-  "description": "Professional AI Chatbot Vue 3 component for Laravel Restify backends. Fully customizable with SSE streaming, file attachments, mentions, and context-aware suggestions.",
+  "version": "0.1.0-beta.6",
+  "description": "Professional AI Chatbot Vue 3 component for Laravel Restify backends. SSE streaming, file uploads, @mentions, context-aware suggestions, and full TypeScript support.",
   "type": "module",
   "main": "./dist/restify-ai.umd.cjs",
   "module": "./dist/restify-ai.js",
@@ -83,37 +83,49 @@
     "chatbot",
     "chat",
     "assistant",
+    "ai-assistant",
     "laravel",
     "restify",
     "laravel-restify",
+    "binarcode",
     "sse",
     "streaming",
     "component",
     "openai",
     "anthropic",
     "claude",
+    "gpt",
+    "llm",
     "tailwindcss",
-    "typescript"
+    "typescript",
+    "pinia",
+    "vue-component",
+    "chatgpt",
+    "ai-chat"
   ],
   "author": {
-    "name": "Dodera Software",
-    "email": "contact@doderasoftware.com",
-    "url": "https://doderasoftware.com"
+    "name": "BinarCode",
+    "email": "hello@binarcode.com",
+    "url": "https://binarcode.com"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/doderasoftware/restify-ai.git"
+    "url": "git+https://github.com/BinarCode/restify-ai.git"
   },
   "bugs": {
-    "url": "https://github.com/doderasoftware/restify-ai/issues"
+    "url": "https://github.com/BinarCode/restify-ai/issues"
   },
-  "homepage": "https://github.com/doderasoftware/restify-ai#readme",
+  "homepage": "https://laravel-restify.com",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "engines": {
     "node": ">=18.0.0"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/binarcode"
   }
 }