@jazzmine-ui/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jazzmine Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,419 @@
+# Jazzmine UI
+
+A customizable React chat UI component library.
+
+This package gives you two integration modes:
+
+- Fully controlled UI with ChatInterface and your own data handlers.
+- SDK-powered UI with JazzmineChat and an IJazzmineClient-compatible client.
+
+## Installation
+
+```bash
+npm install @jazzmine-ui/react
+```
+
+Peer dependencies:
+
+- react
+- react-dom
+
+## Styles
+
+Import styles once in your app entry:
+
+```ts
+import '@jazzmine-ui/react/styles';
+```
+
+## Public Exports
+
+Components:
+
+- ChatInterface
+- Sidebar
+- MessageList
+- FloatingChatWidget
+- JazzmineChat
+
+Types:
+
+- ChatInterfaceProps
+- SidebarProps
+- MessageListProps
+- FloatingChatWidgetProps
+- JazzmineChatProps
+- IJazzmineClient
+- Message
+- Chat
+
+Example import of everything public:
+
+```ts
+import {
+	ChatInterface,
+	Sidebar,
+	MessageList,
+	FloatingChatWidget,
+	JazzmineChat,
+} from '@jazzmine-ui/react';
+
+import type {
+	ChatInterfaceProps,
+	SidebarProps,
+	MessageListProps,
+	FloatingChatWidgetProps,
+	JazzmineChatProps,
+	IJazzmineClient,
+	Message,
+	Chat,
+} from '@jazzmine-ui/react';
+```
+
+## 1) JazzmineChat (SDK-powered)
+
+JazzmineChat is the fastest way to integrate.
+It manages:
+
+- conversation creation
+- message sending
+- loading state
+- conversation deletion
+- basic error fallback behavior
+
+You provide a client that matches IJazzmineClient.
+
+```tsx
+'use client';
+
+import React from 'react';
+import { JazzmineChat } from '@jazzmine-ui/react';
+import type { IJazzmineClient } from '@jazzmine-ui/react';
+import '@jazzmine-ui/react/styles';
+
+// Example: any SDK client that structurally satisfies IJazzmineClient.
+declare const client: IJazzmineClient;
+
+export function App() {
+	return (
+		<div style={{ height: '100vh' }}>
+			<JazzmineChat
+				client={client}
+				placeholder="Ask anything..."
+				onError={(error) => {
+					console.error('JazzmineChat error:', error);
+				}}
+			/>
+		</div>
+	);
+}
+```
+
+JazzmineChatProps:
+
+- client: IJazzmineClient (required)
+- assistantName: string
+- placeholder: string
+- className: string
+- onError: (error: Error) => void
+
+## 2) ChatInterface (fully controlled)
+
+Use this when your app owns all data fetching/state.
+
+```tsx
+import React from 'react';
+import { ChatInterface } from '@jazzmine-ui/react';
+import type { Chat, Message } from '@jazzmine-ui/react';
+import '@jazzmine-ui/react/styles';
+
+export function App() {
+	const [messages, setMessages] = React.useState<Message[]>([]);
+	const [chats, setChats] = React.useState<Chat[]>([]);
+	const [activeChatId, setActiveChatId] = React.useState<string>();
+	const [isLoading, setIsLoading] = React.useState(false);
+
+	const onSend = async (text: string) => {
+		setMessages((prev) => [
+			...prev,
+			{ id: crypto.randomUUID(), text, sender: 'user', timestamp: new Date().toISOString() },
+		]);
+
+		setIsLoading(true);
+		try {
+			const reply = `Echo: ${text}`;
+			setMessages((prev) => [
+				...prev,
+				{
+					id: crypto.randomUUID(),
+					text: reply,
+					sender: 'assistant',
+					timestamp: new Date().toISOString(),
+				},
+			]);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const onNewChat = () => {
+		const id = crypto.randomUUID();
+		setChats((prev) => [{ id, title: 'New Chat', timestamp: 'Now' }, ...prev]);
+		setActiveChatId(id);
+		setMessages([]);
+	};
+
+	const onSelectChat = (chatId: string) => {
+		setActiveChatId(chatId);
+		setMessages([]);
+	};
+
+	const onDeleteChat = (chatId: string) => {
+		setChats((prev) => prev.filter((chat) => chat.id !== chatId));
+		if (activeChatId === chatId) {
+			setActiveChatId(undefined);
+			setMessages([]);
+		}
+	};
+
+	return (
+		<div style={{ height: '100vh' }}>
+			<ChatInterface
+				chats={chats}
+				activeChatId={activeChatId}
+				messages={messages}
+				assistantName="Jazzmine AI"
+				isLoading={isLoading}
+				onSend={onSend}
+				onNewChat={onNewChat}
+				onSelectChat={onSelectChat}
+				onDeleteChat={onDeleteChat}
+				placeholder="Type your message..."
+			/>
+		</div>
+	);
+}
+```
+
+ChatInterfaceProps:
+
+- messages: Message[]
+- chats: Chat[]
+- activeChatId: string
+- assistantName: string
+- onSend: (text: string, contexts?: Context[]) => void
+- onNewChat: () => void
+- onSelectChat: (chatId: string) => void
+- onDeleteChat: (chatId: string) => void
+- loadingText: string
+- loadingVariant: text-and-dots | dots-only
+- isLoading: boolean
+- placeholder: string
+- className: string
+
+## 3) FloatingChatWidget
+
+Compact floating launcher + chat panel.
+
+```tsx
+import React from 'react';
+import { FloatingChatWidget } from '@jazzmine-ui/react';
+import type { Message } from '@jazzmine-ui/react';
+
+export function WidgetDemo() {
+	const [messages, setMessages] = React.useState<Message[]>([]);
+
+	return (
+		<FloatingChatWidget
+			messages={messages}
+			assistantName="Jazzmine AI"
+			initialOpen={false}
+			onSend={(text) => {
+				setMessages((prev) => [
+					...prev,
+					{ id: crypto.randomUUID(), text, sender: 'user', timestamp: new Date().toISOString() },
+				]);
+			}}
+		/>
+	);
+}
+```
+
+FloatingChatWidgetProps:
+
+- messages: Message[]
+- assistantName: string
+- isLoading: boolean
+- loadingText: string
+- loadingVariant: text-and-dots | dots-only
+- initialOpen: boolean
+- onOpen: (open: boolean) => void
+- onSend: (text: string) => void
+- logo: string
+- className: string
+
+## 4) Sidebar
+
+Use standalone if you only need conversation navigation UI.
+
+```tsx
+import React from 'react';
+import { Sidebar } from '@jazzmine-ui/react';
+import type { Chat } from '@jazzmine-ui/react';
+
+export function SidebarDemo() {
+	const [chats] = React.useState<Chat[]>([
+		{ id: '1', title: 'General', timestamp: 'Today' },
+		{ id: '2', title: 'Ideas', timestamp: 'Yesterday' },
+	]);
+
+	return (
+		<Sidebar
+			chats={chats}
+			activeChatId="1"
+			assistantName="Jazzmine AI"
+			onNewChat={() => {}}
+			onSelectChat={(chatId) => console.log(chatId)}
+			onDeleteChat={(chatId) => console.log('delete', chatId)}
+		/>
+	);
+}
+```
+
+SidebarProps:
+
+- chats: Chat[]
+- activeChatId: string
+- assistantName: string
+- logo: string
+- logoAlt: string
+- chatActions: ChatAction[]
+- onNewChat: () => void
+- onSelectChat: (chatId: string) => void
+- onRenameChat: (chatId: string) => void
+- onDeleteChat: (chatId: string) => void
+- onArchiveChat: (chatId: string) => void
+- className: string
+- collapsed: boolean
+- onToggleCollapse: (value?: boolean) => void
+
+## 5) MessageList
+
+Use standalone if you only need the message feed block.
+
+```tsx
+import React from 'react';
+import { MessageList } from '@jazzmine-ui/react';
+import type { Message } from '@jazzmine-ui/react';
+
+export function MessageListDemo() {
+	const messages: Message[] = [
+		{ id: '1', text: 'Hello', sender: 'user' },
+		{ id: '2', text: 'Hi, how can I help?', sender: 'assistant' },
+	];
+
+	return <MessageList messages={messages} assistantName="Jazzmine AI" />;
+}
+```
+
+MessageListProps:
+
+- messages: Message[]
+- assistantName: string
+- isLoading: boolean
+- loadingText: string
+- loadingVariant: text-and-dots | dots-only
+- className: string
+- searchQuery: string
+- activeSearchMessageId: string
+- onAddContext: (context: Context) => void
+- scrollRef: ref object or callback ref
+
+## Exported Core Types
+
+Message:
+
+```ts
+interface Message {
+	id: string;
+	text: string;
+	sender: 'user' | 'assistant';
+	timestamp?: string;
+	avatar?: string;
+	contexts?: {
+		id: string;
+		messageId: string;
+		text: string;
+		sender: 'user' | 'assistant';
+		isPartial: boolean;
+	}[];
+}
+```
+
+Chat:
+
+```ts
+interface Chat {
+	id: string;
+	title: string;
+	timestamp?: string;
+}
+```
+
+IJazzmineClient:
+
+```ts
+interface IJazzmineClient {
+	sendMessage(
+		message: string,
+		options?: {
+			conversationId?: string;
+			autoCreateConversation?: boolean;
+			conversationTitle?: string;
+		}
+	): Promise<{
+		response: {
+			response: string;
+			response_markdown: string;
+			conversation_id: string;
+			message_id: string;
+			is_blocked: boolean;
+			errors: string[];
+		};
+		conversationId: string;
+	}>;
+
+	createConversation(payload?: { title?: string; user_id?: string }): Promise<{
+		conversation_id: string;
+		title: string;
+	}>;
+
+	deleteConversation(conversationId: string): Promise<{
+		conversation_id: string;
+		deleted: boolean;
+	}>;
+
+	getHealth(): Promise<{
+		status: string;
+		agent_name: string;
+	}>;
+}
+```
+
+## Notes
+
+- This package does not import from @jazzmine-ui/sdk directly.
+- Any SDK client that structurally matches IJazzmineClient works.
+- JazzmineChat is a client-side component and includes a use client directive.
+
+## Development
+
+```bash
+npm install
+npm run lint
+npm run build
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}