{"_id":"@abhiwangoo/chat-panel","name":"@abhiwangoo/chat-panel","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@abhiwangoo/chat-panel","version":"0.1.0","description":"AI-powered chat panel component for React applications","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./styles.css":"./dist/styles.css"},"sideEffects":["**/*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","lucide-react":">=0.400.0"},"dependencies":{"@radix-ui/react-scroll-area":"^1.2.0","@radix-ui/react-slot":"^1.1.0","class-variance-authority":"^0.7.0","clsx":"^2.1.0","framer-motion":"^11.0.0","tailwind-merge":"^2.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","postcss":"^8.4.0","tailwindcss":"^3.4.0","tsup":"^8.0.0","typescript":"^5.0.0"},"keywords":["react","chat","ai","assistant","component","panel","copilot"],"author":{"name":"kite"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/kite/chat-panel.git"},"bugs":{"url":"https://github.com/kite/chat-panel/issues"},"homepage":"https://github.com/kite/chat-panel#readme","_id":"@abhiwangoo/chat-panel@0.1.0","gitHead":"197fb79d90aabc8157829e723f3bc791923d7d3e","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-vhljwrbcvUwL3IojRITSlHdouzQb7BcJRxukuN2lbwoas5vFsZV8wXSUO3+4vD6Vq4kVHAr6pPMKvyMVFYRm4Q==","shasum":"ed2b37018cbcb7d095973cd6cf690465f7960694","tarball":"https://registry.npmjs.org/@abhiwangoo/chat-panel/-/chat-panel-0.1.0.tgz","fileCount":8,"unpackedSize":761420,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC8oH1FNehWq2wkiXY0jToxu1P5JPYoTW1qvaRoRWc3pAiBC+KfImfIX+2E+5ihXMUL6kGEM0M8eafW4QvigBxvhbw=="}]},"_npmUser":{"name":"abhiwangoo","email":"abhigyawangoo@gmail.com"},"directories":{},"maintainers":[{"name":"abhiwangoo","email":"abhigyawangoo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chat-panel_0.1.0_1765069731496_0.5187277908605232"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-07T01:08:51.394Z","0.1.0":"2025-12-07T01:08:51.681Z","modified":"2025-12-07T01:08:52.035Z"},"maintainers":[{"name":"abhiwangoo","email":"abhigyawangoo@gmail.com"}],"description":"AI-powered chat panel component for React applications","homepage":"https://github.com/kite/chat-panel#readme","keywords":["react","chat","ai","assistant","component","panel","copilot"],"repository":{"type":"git","url":"git+https://github.com/kite/chat-panel.git"},"author":{"name":"kite"},"bugs":{"url":"https://github.com/kite/chat-panel/issues"},"license":"MIT","readme":"# @kite/chat-panel\n\nAn AI-powered chat panel component for React applications. This package provides a floating chat interface that can integrate with any AI backend agent to provide intelligent assistance to users.\n\n## Features\n\n- 🤖 **AI-Powered Chat**: Connects to your AI backend agent for intelligent responses\n- 📂 **CSV Bulk Operations**: Upload CSV files for bulk data processing\n- 🎯 **Interactive Guides**: Built-in guided tours with animated cursor\n- 🎨 **Customizable Themes**: Light and dark mode support\n- 📱 **Responsive Design**: Works on desktop and mobile\n- 🔌 **Easy Integration**: Simple props-based API with React Context for configuration\n\n## Installation\n\n```bash\nnpm install @kite/chat-panel\n# or\nyarn add @kite/chat-panel\n# or\npnpm add @kite/chat-panel\n```\n\n### Peer Dependencies\n\nMake sure you have the following peer dependencies installed:\n\n```bash\nnpm install react react-dom lucide-react\n```\n\n## Quick Start\n\n### Basic Usage\n\n```tsx\nimport { ChatPanel, ChatPanelProvider } from '@kite/chat-panel'\nimport '@kite/chat-panel/styles.css'\n\nfunction App() {\n  // Get the current user from your authentication system\n  const { userId, orgId } = useAuth()\n\n  return (\n    <ChatPanelProvider config={{ userId, orgId }}>\n      <YourApp />\n      <ChatPanel />\n    </ChatPanelProvider>\n  )\n}\n```\n\n### With Navigation Integration\n\n```tsx\nimport { ChatPanel, ChatPanelProvider } from '@kite/chat-panel'\nimport '@kite/chat-panel/styles.css'\nimport { useRouter } from 'next/navigation'\n\nfunction App() {\n  const router = useRouter()\n  const { userId, orgId } = useAuth() // Your auth system\n  const [currentPage, setCurrentPage] = useState('dashboard')\n\n  return (\n    <ChatPanelProvider\n      config={{\n        userId,\n        orgId,\n        theme: 'light',\n        position: 'bottom-right',\n      }}\n    >\n      <YourApp />\n      <ChatPanel\n        currentPage={currentPage}\n        onNavigate={(page, subtab) => {\n          setCurrentPage(page)\n          router.push(`/${page}${subtab ? `?tab=${subtab}` : ''}`)\n        }}\n        onActionComplete={(actionType, data) => {\n          console.log('Action completed:', actionType, data)\n          // Refresh your data or perform other side effects\n        }}\n      />\n    </ChatPanelProvider>\n  )\n}\n```\n\n## Configuration\n\n### ChatPanelProvider Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `config` | `ChatPanelConfig` | Configuration object (see below) |\n\n### ChatPanelConfig\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `userId` | `string` | **Required** | User ID of the end user querying the chat panel |\n| `orgId` | `string` | **Required** | Organization ID the user belongs to |\n| `agentUrl` | `string` | Built-in URL | Optional override for agent backend URL (for development/testing only) |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | `'light'` | Theme preference |\n| `position` | `'bottom-right' \\| 'bottom-left' \\| 'custom'` | `'bottom-right'` | Panel position |\n| `guides` | `Record<string, GuideWithSteps>` | - | Custom interactive guides |\n| `folders` | `Folder[]` | - | Custom help topic folders |\n| `showDefaultFolders` | `boolean` | `true` | Show default help topics |\n| `enableGuideCursor` | `boolean` | `true` | Enable animated guide cursor |\n| `className` | `string` | - | Custom CSS class |\n\n### ChatPanel Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `currentPage` | `string` | Current page for context |\n| `onNavigate` | `(page: string, subtab?: string) => void` | Navigation callback |\n| `onActionComplete` | `(actionType: ActionType, data: ActionData) => void` | Action completion callback |\n| `onAgentAction` | `(event: AgentActionCompleteEvent) => void` | Agent action callback |\n| `onBack` | `() => void` | Back button callback |\n| `config` | `ChatPanelConfig` | Override provider config |\n\n## Backend Integration\n\nThe ChatPanel expects your backend agent to expose the following SSE endpoints. All requests include `user_id` and `org_id` in the request body.\n\n### `/chat/stream` (POST)\n\nMain chat endpoint for streaming responses.\n\n**Request Body:**\n```json\n{\n  \"session_id\": \"uuid\",\n  \"user_id\": \"user-123\",\n  \"org_id\": \"org-456\",\n  \"message\": \"user message\",\n  \"current_page\": \"dashboard\"\n}\n```\n\n**SSE Events:**\n- `progress`: Processing status updates\n- `response`: AI response with optional actions\n- `error`: Error messages\n- `done`: Stream completion\n\n### `/chat/bulk/stream` (POST)\n\nCSV file upload endpoint for bulk operations.\n\n**Request:** FormData with `file`, `message`, `session_id`, `user_id`, `org_id`, `current_page`\n\n**SSE Events:**\n- `preview`: CSV preview with row count and sample data\n- `error`: Error messages\n\n### `/chat/bulk/confirm` (POST)\n\nConfirm and execute bulk operation.\n\n**Request Body:**\n```json\n{\n  \"session_id\": \"uuid\",\n  \"user_id\": \"user-123\",\n  \"org_id\": \"org-456\",\n  \"bulk_session_id\": \"bulk-uuid\"\n}\n```\n\n**SSE Events:**\n- `progress`: Row-by-row processing updates\n- `summary`: Final results with success/failure counts\n- `error`: Error messages\n\n## Custom Guides\n\nYou can add custom interactive guides:\n\n```tsx\nconst customGuides = {\n  'my-guide': {\n    id: 'my-guide',\n    title: 'My Custom Guide',\n    steps: [\n      {\n        text: 'Step 1: Click the button below',\n        navigation: { page: 'settings' },\n        cursorTarget: {\n          selector: '[data-testid=\"my-button\"]',\n          onClick: true\n        }\n      },\n      // More steps...\n    ]\n  }\n}\n\n<ChatPanelProvider config={{ userId, orgId, guides: customGuides }}>\n  ...\n</ChatPanelProvider>\n```\n\n## Custom Help Topics\n\nAdd custom help topic folders:\n\n```tsx\nconst customFolders = [\n  {\n    id: 'support',\n    title: 'Support',\n    topics: [\n      {\n        id: 'contact',\n        label: 'Contact Us',\n        prompt: 'How can I contact support?'\n      }\n    ]\n  }\n]\n\n<ChatPanelProvider config={{ userId, orgId, folders: customFolders }}>\n  ...\n</ChatPanelProvider>\n```\n\n## Styling\n\n### Using the Default Styles\n\nImport the CSS file in your app:\n\n```tsx\nimport '@kite/chat-panel/styles.css'\n```\n\n### With Tailwind CSS\n\nIf you're using Tailwind, extend your config with our preset:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    // ... your paths\n    './node_modules/@kite/chat-panel/dist/**/*.{js,mjs}'\n  ],\n  theme: {\n    extend: {\n      colors: {\n        background: \"var(--background)\",\n        foreground: \"var(--foreground)\",\n        // ... other theme colors\n      }\n    }\n  }\n}\n```\n\n### CSS Variables\n\nThe component uses CSS variables for theming. Override them in your CSS:\n\n```css\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  /* ... more variables */\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  /* ... dark mode overrides */\n}\n```\n\n## TypeScript\n\nFull TypeScript support with exported types:\n\n```tsx\nimport type {\n  ChatPanelConfig,\n  ChatPanelProps,\n  ActionType,\n  ActionData,\n  Message,\n  GuideWithSteps,\n  Folder,\n} from '@kite/chat-panel'\n```\n\n## Events\n\nThe ChatPanel dispatches window events for backward compatibility:\n\n- `agentActionComplete`: Fired when the agent completes an action\n- `integrationTabClicked`: Listen for this to trigger contextual messages\n\n```tsx\nwindow.addEventListener('agentActionComplete', (e) => {\n  console.log('Agent action:', e.detail.result)\n})\n```\n\n## Examples\n\n### Next.js App Router\n\n```tsx\n// app/providers.tsx\n'use client'\n\nimport { ChatPanelProvider } from '@kite/chat-panel'\nimport { useAuth } from './auth' // Your auth provider\n\nexport function Providers({ children }) {\n  const { userId, orgId } = useAuth()\n\n  return (\n    <ChatPanelProvider\n      config={{\n        userId,\n        orgId,\n      }}\n    >\n      {children}\n    </ChatPanelProvider>\n  )\n}\n\n// app/layout.tsx\nimport { Providers } from './providers'\nimport '@kite/chat-panel/styles.css'\n\nexport default function RootLayout({ children }) {\n  return (\n    <html>\n      <body>\n        <Providers>{children}</Providers>\n      </body>\n    </html>\n  )\n}\n\n// app/page.tsx\n'use client'\n\nimport { ChatPanel } from '@kite/chat-panel'\n\nexport default function Page() {\n  return (\n    <main>\n      <h1>My App</h1>\n      <ChatPanel currentPage=\"home\" />\n    </main>\n  )\n}\n```\n\n### React with React Router\n\n```tsx\nimport { BrowserRouter, useLocation, useNavigate } from 'react-router-dom'\nimport { ChatPanel, ChatPanelProvider } from '@kite/chat-panel'\nimport '@kite/chat-panel/styles.css'\nimport { useAuth } from './auth' // Your auth provider\n\nfunction ChatPanelWithRouter() {\n  const location = useLocation()\n  const navigate = useNavigate()\n  const currentPage = location.pathname.slice(1) || 'dashboard'\n\n  return (\n    <ChatPanel\n      currentPage={currentPage}\n      onNavigate={(page) => navigate(`/${page}`)}\n    />\n  )\n}\n\nfunction App() {\n  const { userId, orgId } = useAuth()\n\n  return (\n    <BrowserRouter>\n      <ChatPanelProvider config={{ userId, orgId }}>\n        <Routes>\n          {/* Your routes */}\n        </Routes>\n        <ChatPanelWithRouter />\n      </ChatPanelProvider>\n    </BrowserRouter>\n  )\n}\n```\n\n## License\n\nMIT © kite\n\n","readmeFilename":"README.md","_rev":"1-673b9411a386306ec1ed18fa1e667543"}