kyt-chat 1.0.0

package/README.md

@@ -0,0 +1,122 @@
+# kyt-chat
+
+Embeddable KYT (Know Your Topic) chat widget. Works in React apps and plain HTML pages.
+
+## Install
+
+```bash
+npm install kyt-chat
+```
+
+---
+
+## React usage
+
+### Floating bubble
+
+Renders a fixed-position button in the bottom-right corner. Click to open a compact chat window.
+
+```tsx
+import { KytChatBubble } from 'kyt-chat'
+
+export default function App() {
+  return (
+    <>
+      {/* your existing app */}
+      <KytChatBubble
+        config={{
+          queryUrl: 'https://your-proxy.example.com/query',
+          title: 'Ask anything',
+          primaryColor: '#1565c0',
+          faqs: ['What is this about?', 'How does it work?'],
+        }}
+      />
+    </>
+  )
+}
+```
+
+### Full-page chat
+
+```tsx
+import { KytChat } from 'kyt-chat'
+
+export default function ChatPage() {
+  return (
+    <KytChat
+      config={{
+        queryUrl: 'https://your-proxy.example.com/query',
+        title: 'Ask anything',
+        primaryColor: '#1565c0',
+        theme: 'dark',
+        avatarLabel: 'AI',
+        hint: 'Powered by KYT',
+      }}
+      style={{ height: '100vh' }}
+    />
+  )
+}
+```
+
+### Headless hook (bring your own UI)
+
+```tsx
+import { useKytChat } from 'kyt-chat'
+
+function MyChat() {
+  const { messages, loading, sendMessage } = useKytChat({
+    queryUrl: 'https://your-proxy.example.com/query',
+  })
+
+  return (
+    <div>
+      {messages.map(m => (
+        <div key={m.id}><strong>{m.role}</strong>: {m.text}</div>
+      ))}
+      <button onClick={() => sendMessage('Hello')} disabled={loading}>Send</button>
+    </div>
+  )
+}
+```
+
+---
+
+## Plain HTML / CDN usage
+
+No React, no npm, no bundler needed.
+
+```html
+<div id="chat"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/kyt-chat/dist/kyt-chat.iife.js"></script>
+<script>
+  KytUI.mountBubble({
+    queryUrl: 'https://your-proxy.example.com/query',
+    title: 'Ask anything',
+    primaryColor: '#1565c0',
+  }, '#chat')
+
+  // OR full-page:
+  // KytUI.mountChat({ queryUrl: '...' }, '#chat')
+</script>
+```
+
+---
+
+## Config reference
+
+```ts
+interface KytConfig {
+  queryUrl: string        // required — your proxy server URL
+  title?: string          // chat window title
+  welcomeMessage?: string // subtitle shown before first message
+  placeholder?: string    // input placeholder text
+  faqs?: string[]         // suggested questions
+  primaryColor?: string   // accent color (any CSS hex, e.g. '#1565c0')
+  theme?: 'dark' | 'light' | 'auto'
+  avatarLabel?: string    // letter shown on AI avatar (default: 'AI')
+  hint?: string           // small text below input bar
+}
+```
+
+`queryUrl` is the only required field. Point it at your proxy server — never directly at the KYT edge function.