@bmx-labs/chat-widget 0.0.2 → 0.0.3

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.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @bmx-labs/chat-widget
2
2
 
3
- A reusable chat AI widget for React/Next.js apps. Fixed bottom-right with highest stacking order, pluggable backend adapter.
3
+ A reusable chat AI widget for React/Next.js apps. Fixed bottom-right with highest stacking order, designed for server-side RAG integration.
4
4
 
5
5
  ## Install
6
6
 
@@ -20,48 +20,45 @@ pnpm add @bmx-labs/chat-widget react react-dom
20
20
 
21
21
  ```tsx
22
22
  import React from "react";
23
- import { BmxChatBot } from "@bmx-labs/chat-widget";
24
- import { PineconeRAGAdapter } from "@bmx-labs/chat-widget/adapters/context";
23
+ import { BmxChatBot, RestAdapters } from "@bmx-labs/chat-widget";
25
24
 
26
25
  export default function App() {
27
- // Frontend-only RAG adapter: embeds query with OpenAI, retrieves topK from Pinecone,
28
- // builds a system prompt, then calls OpenAI chat to generate the answer.
29
- const api = new PineconeRAGAdapter({
30
- openAIApiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY!,
31
- pineconeApiKey: process.env.NEXT_PUBLIC_PINECONE_API_KEY!,
32
- pineconeIndexUrl: process.env.NEXT_PUBLIC_PINECONE_HOST!,
33
- chatModel: "gpt-4o-mini",
34
- });
35
-
36
- return <BmxChatBot api={api} projectId="<your_project_id>" />;
26
+ // Server-side RAG adapter: calls your backend API endpoint
27
+ const api = RestAdapters.production(); // or RestAdapters.development()
28
+
29
+ return <BmxChatBot api={api} projectId="bmx" />;
37
30
  }
38
31
  ```
39
32
 
40
33
  - The widget is rendered via a portal to `document.body` with a very high `z-index`.
41
- - Provide your own API route at `/api/ai` that proxies to your LLM provider. Do not expose secrets in the browser.
34
+ - **Server-side RAG**: All AI processing happens on your server to keep API keys secure.
42
35
 
43
36
  ### Adapters
44
37
 
45
- - `PineconeRAGAdapter` – Frontend RAG: OpenAI embeddings Pinecone vector search → OpenAI chat.
46
- - `createMockAdapter(delayMs?)` – Echo responses for local dev.
38
+ - `RestAdapters.production()` – Calls your server endpoint (same domain)
39
+ - `RestAdapters.development()` – Calls localhost:8080 for development
40
+ - `createRestAdapter(config)` – Custom server configuration
41
+ - `createMockAdapter(delayMs?)` – Echo responses for local dev
42
+
43
+ ### Server Integration
47
44
 
48
- ### PineconeRAGAdapter Config
45
+ Create a POST endpoint on your server (e.g., `/common/ai/chat`) that handles RAG:
49
46
 
50
47
  ```ts
51
- type PineconeRAGAdapterConfig = {
52
- openAIApiKey: string;
53
- pineconeApiKey: string;
54
- pineconeIndexUrl: string;
55
- namespace?: string; // default: 'bmx-docs'
56
- topK?: number; // default: 4
57
- chatModel?: string; // default: gpt-4o-mini
58
- embeddingModel?: string; // default: text-embedding-3-large
59
- openAIBaseURL?: string; // default: https://api.openai.com/v1
60
- enableStreaming?: boolean; // not yet used
61
- maxContextTokens?: number; // default: 2000
62
- minScoreThreshold?: number; // default: 0.3
63
- debug?: boolean; // default: false
64
- };
48
+ // Your server endpoint
49
+ POST /common/ai/chat
50
+ {
51
+ "input": "user question",
52
+ "history": [{"role": "user", "content": "previous message"}]
53
+ }
54
+
55
+ // Response
56
+ {
57
+ "id": "msg-123",
58
+ "role": "assistant",
59
+ "content": "AI response with sources",
60
+ "createdAt": 1234567890
61
+ }
65
62
  ```
66
63
 
67
64
  ### BmxChatBot Props
@@ -1,2 +1,2 @@
1
1
  export { createMockAdapter } from "./mock";
2
- export { PineconeRAGAdapter } from "./context";
2
+ export { createRestAdapter, RestAdapters } from "./rest-adapter";
@@ -0,0 +1,25 @@
1
+ import type { BmxChatApiAdapter, RestAdapterConfig } from "../types";
2
+ /**
3
+ * Creates a REST adapter that calls your server endpoint.
4
+ *
5
+ * @param {RestAdapterConfig} config - Configuration for the REST adapter.
6
+ * @returns {BmxChatApiAdapter} BmxChatApiAdapter implementation.
7
+ */
8
+ export declare function createRestAdapter(config: RestAdapterConfig): BmxChatApiAdapter;
9
+ /**
10
+ * Convenience factory for development and production.
11
+ */
12
+ export declare const RestAdapters: {
13
+ /**
14
+ * For development (localhost:8080)
15
+ */
16
+ development: () => BmxChatApiAdapter;
17
+ /**
18
+ * For production (same domain)
19
+ */
20
+ production: (baseUrl?: string) => BmxChatApiAdapter;
21
+ /**
22
+ * Custom configuration
23
+ */
24
+ custom: (config: RestAdapterConfig) => BmxChatApiAdapter;
25
+ };
@@ -19,6 +19,7 @@ interface ChatPanelProps {
19
19
  onHoverIntensityChange: (intensity: number) => void;
20
20
  rotateOnHover: boolean;
21
21
  onRotateOnHoverChange: (rotate: boolean) => void;
22
+ onSuggestionClick?: (suggestion: string) => void;
22
23
  }
23
- export declare function ChatPanel({ title, messages, input, setInput, onKeyDown, onSend, onClose, placeholder, sending, showSettings, onToggleSettings, onClearHistory, hue, onHueChange, hoverIntensity, onHoverIntensityChange, rotateOnHover, onRotateOnHoverChange, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
24
+ export declare function ChatPanel({ title, messages, input, setInput, onKeyDown, onSend, onClose, placeholder, sending, showSettings, onToggleSettings, onClearHistory, hue, onHueChange, hoverIntensity, onHoverIntensityChange, rotateOnHover, onRotateOnHoverChange, onSuggestionClick, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
24
25
  export {};
@@ -1,6 +1,8 @@
1
+ import { ChatMessage } from "../../types";
1
2
  interface SettingsPanelProps {
2
3
  onClose: () => void;
3
4
  onClearHistory: () => void;
5
+ history: ChatMessage[];
4
6
  hue: number;
5
7
  onHueChange: (hue: number) => void;
6
8
  hoverIntensity: number;
@@ -8,5 +10,5 @@ interface SettingsPanelProps {
8
10
  rotateOnHover: boolean;
9
11
  onRotateOnHoverChange: (rotate: boolean) => void;
10
12
  }
11
- export declare function SettingsPanel({ onClose, onClearHistory, hue, onHueChange, hoverIntensity, onHoverIntensityChange, rotateOnHover, onRotateOnHoverChange, }: SettingsPanelProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare function SettingsPanel({ onClose, onClearHistory, history, hue, onHueChange, hoverIntensity, onHoverIntensityChange, rotateOnHover, onRotateOnHoverChange, }: SettingsPanelProps): import("react/jsx-runtime").JSX.Element;
12
14
  export {};
@@ -0,0 +1,4 @@
1
+ export declare const EmptyMessages: ({ onSuggestionClick, }: {
2
+ onSuggestionClick?: (suggestion: string) => void;
3
+ }) => import("react/jsx-runtime").JSX.Element;
4
+ export default EmptyMessages;
@@ -2,6 +2,7 @@ import type { ChatMessage } from "../../types";
2
2
  interface MessageListProps {
3
3
  messages: ChatMessage[];
4
4
  sending?: boolean;
5
+ onSuggestionClick?: (suggestion: string) => void;
5
6
  }
6
- export declare function MessageList({ messages, sending }: MessageListProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function MessageList({ messages, sending, onSuggestionClick, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
7
8
  export {};
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
+ export { createMockAdapter, createRestAdapter, RestAdapters } from "./adapters";
1
2
  export { BmxChatBot } from "./components/BmxChatBot";
2
3
  export type { BmxChatApiAdapter, ChatMessage, ChatRole } from "./types";
3
- export { createMockAdapter, PineconeRAGAdapter } from "./adapters";