@kite-copilot/chat-panel 0.2.2 → 0.2.4

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/dist/auto.cjs

@@ -1020,19 +1020,19 @@ var defaultStartingQuestions = [
   {
     id: "changing-layouts",
     label: "Changing layouts",
-    prompt: "How can I customize and change the layout of my dashboard?",
+    prompt: "How do I change the layout of my profiles or folders?",
     icon: "layout"
   },
   {
     id: "bulk-uploads",
     label: "Bulk uploads",
-    prompt: "How do I perform bulk uploads of data using CSV files?",
+    prompt: "How do I bulk upload profiles using a CSV file?",
     icon: "upload"
   },
   {
     id: "example-setups",
     label: "Example setups",
-    prompt: "Can you show me some example configurations and setups?",
+    prompt: "Can you show me some example folder setups?",
     icon: "setup"
   }
 ];
@@ -2376,21 +2376,6 @@ ${userText}`
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pb-4", children: [
             panelView === "landing" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Quick Start" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: "secondary",
-                  className: "w-full justify-start rounded-xl border border-primary/20 bg-primary/5 px-3 py-2.5 text-xs font-medium text-primary shadow-none transition-all hover:bg-primary/10 hover:border-primary/30 h-auto mb-4",
-                  onClick: () => startGuide("getting-started"),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Play, { className: "mr-2 h-3.5 w-3.5" }),
-                    "Getting started"
-                  ]
-                }
-              ),
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Loader2, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
                 const iconColors = ["bg-blue-400", "bg-green-400", "bg-purple-400", "bg-orange-400", "bg-pink-400"];

package/dist/auto.js

@@ -1,6 +1,6 @@
 import {
   createKiteChat
-} from "./chunk-R73Y24JS.js";
+} from "./chunk-6BQ6C2XU.js";
 
 // src/auto.ts
 function mountKiteChat(config) {

package/dist/{chunk-R73Y24JS.js → chunk-6BQ6C2XU.js}

@@ -883,7 +883,7 @@ function DataRenderer({ type, data }) {
 
 // src/ChatPanel.tsx
 import * as React4 from "react";
-import { ArrowLeft, ArrowUp, Play, Command, CornerDownLeft, CheckCircle2 as CheckCircle23, SquarePen, Paperclip, X, FileSpreadsheet, Loader2 as Loader22, ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowLeft, ArrowUp, Command, CornerDownLeft, CheckCircle2 as CheckCircle23, SquarePen, Paperclip, X, FileSpreadsheet, Loader2 as Loader22, ChevronLeft, ChevronRight } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 400;
@@ -1019,19 +1019,19 @@ var defaultStartingQuestions = [
   {
     id: "changing-layouts",
     label: "Changing layouts",
-    prompt: "How can I customize and change the layout of my dashboard?",
+    prompt: "How do I change the layout of my profiles or folders?",
     icon: "layout"
   },
   {
     id: "bulk-uploads",
     label: "Bulk uploads",
-    prompt: "How do I perform bulk uploads of data using CSV files?",
+    prompt: "How do I bulk upload profiles using a CSV file?",
     icon: "upload"
   },
   {
     id: "example-setups",
     label: "Example setups",
-    prompt: "Can you show me some example configurations and setups?",
+    prompt: "Can you show me some example folder setups?",
     icon: "setup"
   }
 ];
@@ -2375,21 +2375,6 @@ ${userText}`
           ] }),
           /* @__PURE__ */ jsxs5("div", { className: "pb-4", children: [
             panelView === "landing" && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-              /* @__PURE__ */ jsx9("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Quick Start" }),
-              /* @__PURE__ */ jsxs5(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  variant: "secondary",
-                  className: "w-full justify-start rounded-xl border border-primary/20 bg-primary/5 px-3 py-2.5 text-xs font-medium text-primary shadow-none transition-all hover:bg-primary/10 hover:border-primary/30 h-auto mb-4",
-                  onClick: () => startGuide("getting-started"),
-                  children: [
-                    /* @__PURE__ */ jsx9(Play, { className: "mr-2 h-3.5 w-3.5" }),
-                    "Getting started"
-                  ]
-                }
-              ),
               /* @__PURE__ */ jsx9("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Suggested Questions" }),
               /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-1", children: loadingQuestions ? /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx9(Loader22, { className: "h-4 w-4 animate-spin text-gray-400" }) }) : startingQuestions.map((question, index) => {
                 const iconColors = ["bg-blue-400", "bg-green-400", "bg-purple-400", "bg-orange-400", "bg-pink-400"];