acecoderz-chat-ui 1.0.0

package/dist/src/UseChat.stories.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChat } from '../adapters/react/useChat';
+function UseChatDemo({ apiUrl }) {
+    const { messages, input, isLoading, sendMessage, setInput, clearMessages } = useChat({
+        apiUrl,
+    });
+    return (_jsxs("div", { style: { padding: '1rem', maxWidth: '600px', margin: '0 auto' }, children: [_jsx("h3", { style: { marginBottom: '1rem' }, children: "useChat Hook Demo" }), _jsxs("div", { style: {
+                    border: '1px solid #e2e8f0',
+                    borderRadius: '0.5rem',
+                    padding: '1rem',
+                    marginBottom: '1rem',
+                    minHeight: '300px',
+                    maxHeight: '400px',
+                    overflowY: 'auto',
+                    backgroundColor: '#f8fafc'
+                }, children: [messages.length === 0 ? (_jsx("p", { style: { color: '#64748b', textAlign: 'center', marginTop: '2rem' }, children: "No messages yet. Send a message to start!" })) : (messages.map((msg) => (_jsxs("div", { style: {
+                            marginBottom: '1rem',
+                            padding: '0.75rem',
+                            borderRadius: '0.5rem',
+                            backgroundColor: msg.role === 'user' ? '#3b82f6' : '#f1f5f9',
+                            color: msg.role === 'user' ? 'white' : '#1e293b',
+                            textAlign: msg.role === 'user' ? 'right' : 'left',
+                        }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '0.25rem' }, children: msg.role === 'user' ? 'You' : 'Assistant' }), _jsx("div", { children: msg.content }), _jsx("div", { style: { fontSize: '0.75rem', opacity: 0.7, marginTop: '0.25rem' }, children: new Date(msg.timestamp).toLocaleTimeString() })] }, msg.id)))), isLoading && (_jsx("div", { style: { padding: '0.75rem', color: '#64748b' }, children: "Thinking..." }))] }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem' }, children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: (e) => {
+                            if (e.key === 'Enter' && !isLoading && input.trim()) {
+                                sendMessage(input);
+                            }
+                        }, placeholder: "Type a message...", disabled: isLoading, style: {
+                            flex: 1,
+                            padding: '0.75rem',
+                            border: '1px solid #e2e8f0',
+                            borderRadius: '0.5rem',
+                            fontSize: '1rem',
+                        } }), _jsx("button", { onClick: () => sendMessage(input), disabled: isLoading || !input.trim(), style: {
+                            padding: '0.75rem 1.5rem',
+                            backgroundColor: '#3b82f6',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '0.5rem',
+                            cursor: isLoading || !input.trim() ? 'not-allowed' : 'pointer',
+                            opacity: isLoading || !input.trim() ? 0.5 : 1,
+                        }, children: "Send" }), _jsx("button", { onClick: clearMessages, style: {
+                            padding: '0.75rem 1rem',
+                            backgroundColor: '#ef4444',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '0.5rem',
+                            cursor: 'pointer',
+                        }, children: "Clear" })] })] }));
+}
+const meta = {
+    title: 'React/useChat Hook',
+    component: UseChatDemo,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        apiUrl: { control: 'text' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        apiUrl: 'http://localhost:3000/api/chat',
+    },
+};

package/dist/src/VanillaAdapter.stories.d.ts

@@ -0,0 +1,39 @@
+import type { StoryObj } from '@storybook/react';
+import type { ChatTheme } from '../core/src/types';
+declare function VanillaAdapterDemo({ apiUrl, theme, enableMarkdown, placeholder, showTimestamp, showAvatar, initialGreeting }: {
+    apiUrl: string;
+    theme?: ChatTheme;
+    enableMarkdown?: boolean;
+    placeholder?: string;
+    showTimestamp?: boolean;
+    showAvatar?: boolean;
+    initialGreeting?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof VanillaAdapterDemo;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        apiUrl: {
+            control: "text";
+        };
+        enableMarkdown: {
+            control: "boolean";
+        };
+        showTimestamp: {
+            control: "boolean";
+        };
+        showAvatar: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomTheme: Story;
+export declare const NoMarkdown: Story;
+//# sourceMappingURL=VanillaAdapter.stories.d.ts.map

package/dist/src/VanillaAdapter.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VanillaAdapter.stories.d.ts","sourceRoot":"","sources":["../../src/VanillaAdapter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAElD,iBAAS,kBAAkB,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,cAAc,EACd,WAAW,EACX,aAAa,EACb,UAAU,EACV,eAAe,EAChB,EAAE;IACD,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,2CA8CA;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAaiC,CAAA;AAE3C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAA"}

package/dist/src/VanillaAdapter.stories.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { createChatUI } from '../adapters/vanilla/index';
+function VanillaAdapterDemo({ apiUrl, theme, enableMarkdown, placeholder, showTimestamp, showAvatar, initialGreeting }) {
+    const containerRef = useRef(null);
+    const instanceRef = useRef(null);
+    useEffect(() => {
+        if (containerRef.current && !instanceRef.current) {
+            const instance = createChatUI({
+                container: containerRef.current,
+                config: {
+                    apiUrl: apiUrl || 'http://localhost:3000/api/chat',
+                },
+                theme,
+                enableMarkdown: enableMarkdown !== false,
+                placeholder: placeholder || 'Type your message...',
+                showTimestamp: showTimestamp !== false,
+                showAvatar: showAvatar !== false,
+                emptyStateMessage: initialGreeting ? undefined : 'Start a conversation...',
+                loadingMessage: 'Thinking...',
+            });
+            instanceRef.current = instance;
+            // Add initial greeting if provided
+            if (initialGreeting) {
+                instance.engine.addMessage({
+                    id: `greeting-${Date.now()}`,
+                    content: initialGreeting,
+                    role: 'assistant',
+                    timestamp: new Date(),
+                });
+            }
+        }
+        return () => {
+            if (instanceRef.current) {
+                instanceRef.current.destroy();
+                instanceRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsx("div", { style: { width: '600px', height: '600px', margin: '0 auto' }, children: _jsx("div", { ref: containerRef, style: { width: '100%', height: '100%' } }) }));
+}
+const meta = {
+    title: 'Vanilla JS/createChatUI',
+    component: VanillaAdapterDemo,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        apiUrl: { control: 'text' },
+        enableMarkdown: { control: 'boolean' },
+        showTimestamp: { control: 'boolean' },
+        showAvatar: { control: 'boolean' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        apiUrl: 'http://localhost:3000/api/chat',
+    },
+};
+export const CustomTheme = {
+    args: {
+        apiUrl: 'http://localhost:3000/api/chat',
+        theme: {
+            primaryColor: '#8b5cf6',
+            userMessageColor: '#8b5cf6',
+            assistantMessageColor: '#ede9fe',
+            borderRadius: '1rem',
+        },
+    },
+};
+export const NoMarkdown = {
+    args: {
+        apiUrl: 'http://localhost:3000/api/chat',
+        enableMarkdown: false,
+    },
+};

package/dist/src/index.d.ts

@@ -0,0 +1,9 @@
+export { ChatEngine } from '../core/src/ChatEngine';
+export type { Message, ChatConfig, ChatTheme, ChatEventType, ChatEventListener } from '../core/src/types';
+export { ChatUI, useChat } from '../adapters/react';
+export type { ChatUIProps, UseChatReturn } from '../adapters/react';
+export { createChat } from '../adapters/solid';
+export type { CreateChatReturn } from '../adapters/solid';
+export { createChatUI } from '../adapters/vanilla';
+export type { ChatUIOptions, ChatUIInstance } from '../adapters/vanilla';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG1G,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGpE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,8 @@
+// Core exports
+export { ChatEngine } from '../core/src/ChatEngine';
+// React adapter
+export { ChatUI, useChat } from '../adapters/react';
+// Solid adapter
+export { createChat } from '../adapters/solid';
+// Vanilla JS adapter
+export { createChatUI } from '../adapters/vanilla';

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "acecoderz-chat-ui",
+  "version": "1.0.0",
+  "description": "A framework-agnostic, fully customizable chat UI package that works with React, Solid, Vanilla JS, and any other framework",
+  "keywords": [
+    "chat",
+    "ui",
+    "react",
+    "solid",
+    "vanilla",
+    "chatbot",
+    "conversation",
+    "messaging",
+    "typescript",
+    "framework-agnostic"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:sudhir_pratap_/chatbot.git",
+    "directory": "packages/chat-ui"
+  },
+  "bugs": {
+    "url": "https://bitbucket.org/sudhir_pratap_/chatbot/issues"
+  },
+  "homepage": "https://bitbucket.org/sudhir_pratap_/chatbot#readme",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./core": {
+      "import": "./dist/core/src/index.js",
+      "types": "./dist/core/src/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/adapters/react/index.js",
+      "types": "./dist/adapters/react/index.d.ts"
+    },
+    "./solid": {
+      "import": "./dist/adapters/solid/index.js",
+      "types": "./dist/adapters/solid/index.d.ts"
+    },
+    "./vanilla": {
+      "import": "./dist/adapters/vanilla/index.js",
+      "types": "./dist/adapters/vanilla/index.d.ts"
+    },
+    "./styles": "./styles/chat.css",
+    "./browser": {
+      "import": "./dist/browser/chatbot-ui.js",
+      "types": "./browser/index.ts"
+    },
+    "./cdn": {
+      "import": "./dist/browser/chatbot-ui.min.js",
+      "types": "./browser/index.ts"
+    },
+    "./cdn/css": "./styles/chat.css"
+  },
+  "scripts": {
+    "build": "tsc",
+    "build:browser": "node build-browser.js",
+    "build:all": "pnpm build && pnpm build:browser",
+    "dev": "tsc --watch",
+    "check-types": "tsc --noEmit",
+    "docs:storybook": "storybook dev -p 6006",
+    "docs:storybook:build": "storybook build",
+    "docs:typedoc": "typedoc",
+    "docs:build": "pnpm docs:typedoc && pnpm docs:storybook:build"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.15",
+    "@storybook/addon-interactions": "^8.6.15",
+    "@storybook/addon-links": "^8.6.15",
+    "@storybook/blocks": "^8.6.15",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/test": "^8.6.15",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.3.1",
+    "esbuild": "^0.24.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.6.15",
+    "typedoc": "^0.26.0",
+    "typescript": "~5.9.3",
+    "vite": "^5.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-markdown": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "solid-js": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-markdown": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    }
+  },
+  "files": [
+    "dist",
+    "styles",
+    "browser",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  }
+}