@kite-copilot/chat-panel 0.2.2 → 0.2.3

package/README.md

@@ -74,24 +74,115 @@ chat.setCurrentPage('settings');
 chat.unmount();
 ```
 
-### Vanilla HTML/JavaScript (Easiest)
+### Vue.js
+
+Create a composable for reusable chat functionality:
+
+```ts
+// composables/useKiteChat.ts
+import { ref, onMounted, onUnmounted } from 'vue';
+import { createKiteChat, type KiteChatInstance, type KiteChatConfig } from '@kite-copilot/chat-panel';
+import '@kite-copilot/chat-panel/style.css';
+
+export function useKiteChat(config: KiteChatConfig) {
+  const chat = ref<KiteChatInstance | null>(null);
+  const isOpen = ref(false);
+
+  onMounted(() => {
+    chat.value = createKiteChat({
+      ...config,
+      onNavigate: config.onNavigate,
+    });
+    chat.value.mount(document.body);
+  });
+
+  onUnmounted(() => {
+    chat.value?.unmount();
+  });
+
+  const open = () => {
+    chat.value?.open();
+    isOpen.value = true;
+  };
+
+  const close = () => {
+    chat.value?.close();
+    isOpen.value = false;
+  };
+
+  const toggle = () => {
+    chat.value?.toggle();
+    isOpen.value = !isOpen.value;
+  };
+
+  const setCurrentPage = (page: string) => {
+    chat.value?.setCurrentPage(page);
+  };
+
+  return { isOpen, open, close, toggle, setCurrentPage };
+}
+```
+
+Use in your App.vue or any component:
+
+```vue
+<!-- App.vue -->
+<script setup lang="ts">
+import { useKiteChat } from './composables/useKiteChat';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
-```html
-<!-- No special container or layout needed! -->
-<script>
-window.KiteChatConfig = {
+const { open, close, toggle, setCurrentPage } = useKiteChat({
   userId: 'user-123',
   orgId: 'org-456',
-  agentUrl: 'https://your-api.example.com'
-};
+  agentUrl: 'https://your-api.example.com',
+  onNavigate: (page, subtab) => {
+    router.push(`/${page}${subtab ? `?tab=${subtab}` : ''}`);
+  },
+});
+
+// Update context when route changes
+router.afterEach((to) => {
+  setCurrentPage(to.name as string);
+});
 </script>
-<script src="https://cdn.example.com/kite-chat.js"></script>
+
+<template>
+  <div>
+    <button @click="toggle">Toggle Help Panel</button>
+    <!-- Your app content -->
+    <router-view />
+  </div>
+</template>
 ```
 
-That's it! The panel automatically:
-- Adds a toggle arrow (◀) to the right edge of the page
-- Slides in when clicked, pushing page content left
-- Manages `padding-right` on the body element
+Or initialize directly in main.ts for app-wide availability:
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { createKiteChat } from '@kite-copilot/chat-panel';
+import '@kite-copilot/chat-panel/style.css';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
+
+// Initialize chat after Vue app is mounted
+const chat = createKiteChat({
+  userId: 'user-123',
+  orgId: 'org-456',
+  agentUrl: 'https://your-api.example.com',
+  onNavigate: (page) => router.push(`/${page}`),
+});
+chat.mount(document.body);
+
+// Expose globally if needed
+window.kiteChat = chat;
+```
 
 ### React Component
 
@@ -265,26 +356,6 @@ function CustomPanel() {
 
 ## Framework Examples
 
-### Vue.js
-
-```ts
-import { createKiteChat } from '@kite-copilot/chat-panel';
-import '@kite-copilot/chat-panel/style.css';
-
-const chat = createKiteChat({
-  userId: 'user-123',
-  orgId: 'org-456',
-  onNavigate: (page) => router.push(`/${page}`),
-});
-
-// Mount after Vue app is ready
-app.mount('#app');
-chat.mount(document.body);
-
-// Open programmatically
-chat.open();
-```
-
 ### Angular
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kite-copilot/chat-panel",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "AI-powered chat panel SDK with programmatic lifecycle control",
   "type": "module",
   "main": "./dist/index.cjs",