@0xbot/chat-react 1.0.8

package/README.md

@@ -0,0 +1,203 @@
+# Chat Library React
+
+A React component for building chat interfaces with streaming support.
+
+## Installation
+
+```bash
+npm install @0xbot/chat-react
+# or
+yarn add @0xbot/chat-react
+# or
+pnpm add @0xbot/chat-react
+```
+
+## Usage
+
+```tsx
+import React from 'react'
+import { ChatLibrary } from '@0xbot/chat-react'
+import '@0xbot/chat-react/dist/style.css' // Import the CSS
+
+const App = () => {
+  return (
+    <ChatLibrary
+      apiKey="your-api-key"  // required  
+      serverUrl="your-server-url" // not required
+      UserAvatar={<YourUserAvatar />} // required
+      AgentAvatar={<YourAgentAvatar />} // required
+      loadingText="AI is thinking..." // not required
+      emptyText="No messages yet" // not required
+    />
+  )
+}
+
+export default App
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| apiKey | string | Yes | - | Your API key for authentication |
+| serverUrl | string | Yes | - | The server URL for API requests |
+| UserAvatar | ReactNode | Yes | - | The avatar component for user messages |
+| AgentAvatar | ReactNode | Yes | - | The avatar component for agent messages |
+| loadingText | string | No | 'AI is thinking...' | Text to display while loading |
+| emptyText | string | No | 'No messages yet' | Text to display when there are no messages |
+| theme | object | No | {} | Theme configuration object |
+
+## Features
+
+- Real-time message streaming
+- Markdown support
+- Customizable theme
+- Responsive design
+- Built-in loading states
+- Error handling
+
+## Dependencies
+
+This library requires the following peer dependencies:
+
+- React 16.8 or higher
+- React DOM 16.8 or higher
+
+## Styling
+
+```css
+/* Main container */
+.chat-library {
+  box-sizing: border-box;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+/* Bottom bar */
+.chat-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* Input field */
+.chat-bar-input {
+  flex: 1;
+  height: 44px;
+  outline: none;
+  border-radius: 99999px;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  color: #fff;
+  padding: 0 16px;
+  min-width: 0;
+}
+
+/* Send button */
+.chat-bar-send {
+  flex: none;
+  width: auto;
+  border: 1px solid;
+  height: 48px;
+  padding: 0 32px;
+  border-radius: 99999px;
+  cursor: pointer;
+  background-color: transparent;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Send button hover */
+.chat-bar-send:hover {
+  background-color: var(--primary-color);
+  color: white !important;
+}
+
+/* Chat container (excluding bottom bar) */
+.chat-container {
+  flex: 1;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+/* Hide scrollbar */
+.chat-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Chat message list */
+.chat-container-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Message bubble */
+.message-bubble {
+  padding: 12px 16px;
+  border-radius: 8px;
+  max-width: 90%;
+  font-size: 14px;
+  word-break: break-all;
+  line-height: 24px;
+}
+
+@media (min-width: 768px) {
+  .message-bubble {
+    max-width: 70%;
+    font-size: 13px;
+  }
+}
+
+/* Avatar */
+.chat-avatar {
+  width: 44px;
+  height: 44px;
+  max-width:44px;
+  max-height:44px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: 8px;
+}
+
+/* Message bubble background */
+.chat-message {
+  background-color: rgba(255, 255, 255, 0.1)
+}
+
+/* Message container */
+.message-container {
+  display: flex;
+}
+
+/* Delete button */
+.chat-bar-trash {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  color: #fff;
+  cursor: pointer;
+}
+
+/* Loading state */
+.message-loading {
+  color: #fff;
+  font-style: italic;
+}
+
+/* Empty message state */
+.message-empty {
+  color: #fff;
+  font-style: italic;
+  text-align: center;
+}
+```
+
+## License
+
+MIT 

package/dist/api/index.d.ts

@@ -0,0 +1,8 @@
+import { ResponseData } from '../utils/request';
+import { loginWithDeviceProps, conversationHistoryProps, authProps, AuthDataRes, upsertConversationProps } from './types';
+
+export declare const login_with_device: (data: loginWithDeviceProps) => Promise<ResponseData<AuthDataRes>>;
+export declare const sdk_sdk_get_token: (data: authProps) => Promise<ResponseData<AuthDataRes>>;
+export declare const app_conversation_history: (data: conversationHistoryProps) => Promise<ResponseData>;
+export declare const app_upsert_conversation: (data: upsertConversationProps) => Promise<ResponseData>;
+export declare const app_delete_one_conversation_history: (id: string) => Promise<ResponseData>;

package/dist/api/types.d.ts

@@ -0,0 +1,81 @@
+export interface loginWithDeviceProps {
+    device_id: string;
+    location: string;
+}
+export interface conversationHistoryProps {
+    page: number;
+    pagesize: number;
+    app_id: string;
+    conversation_id: string;
+}
+export interface authProps {
+    api_key: string;
+    unique_id: string;
+}
+export interface AuthDataRes {
+    auth: Auth;
+    agent: Agent;
+}
+export interface DataProps {
+    auth: Auth;
+    agent: Agent;
+}
+export interface Agent {
+    id: string;
+    name: string;
+    description: string;
+    nickname: string;
+    icon: string;
+    user_pay_bill: boolean;
+    conversation_id: string;
+    app_id: string;
+    agent_type: string;
+    visibility: number;
+    category: string;
+    base_url: string;
+    api_key: string;
+    twitter_cookie: string;
+    twitter_username: string;
+    shortcuts: any[];
+    user_prompt: string;
+    opening_text: string;
+    role_user_id: string;
+}
+export interface Auth {
+    token: string;
+    user_id: string;
+    invite_code: string;
+    invite_link: string;
+    parent_user_id: string;
+    avatar: string;
+    phone: string;
+    email: string;
+    is_agent: boolean;
+    name: string;
+}
+export interface upsertConversationProps {
+    id: string;
+    app_id: string;
+    name: string;
+}
+export interface StramProps {
+    q: string;
+    app_id: string;
+    conversation_id: string;
+    is_debug: boolean;
+    medias: any[];
+    tool?: Tool;
+    knowledge?: Knowledge;
+}
+export interface Knowledge {
+    id: string;
+    type: string;
+    q: string;
+}
+export interface Tool {
+    id: string;
+    params: Params;
+    json: Params;
+}
+export interface Params {
+}

package/dist/components/ChatLibrary.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ChatLibraryProps } from '../types';
+
+declare const ChatLibrary: React.FC<ChatLibraryProps>;
+export default ChatLibrary;

package/dist/components/MessageItem.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { MessageItemProps } from '../types';
+
+declare const MessageItem: React.FC<MessageItemProps>;
+export default MessageItem;

package/dist/composables/useEventStream.d.ts

@@ -0,0 +1,6 @@
+export declare const useEventStream: () => {
+    loading: boolean;
+    error: Error | null;
+    connect: (data: any, SERVER_URL: string, onMessage: (message: any) => void) => Promise<void>;
+    close: () => void;
+};

package/dist/composables/useStorage.d.ts

@@ -0,0 +1,11 @@
+interface UseStorageOptions {
+    prefix?: string;
+}
+export declare function useStorage(options?: UseStorageOptions): {
+    getStorage: <T>(key: string) => Promise<T | null>;
+    setStorage: <T>(key: string, value: T) => Promise<void>;
+    removeStorage: (key: string) => Promise<void>;
+    clearStorage: () => Promise<void>;
+    useStorageState: <T>(key: string, defaultValue: T) => readonly [T, import('react').Dispatch<import('react').SetStateAction<T>>];
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { default as ChatLibrary } from './components/ChatLibrary';
+import { default as MessageItem } from './components/MessageItem';
+import { ChatLibraryProps, ChatMessage } from './types';
+import { Agent, authProps, conversationHistoryProps, StramProps } from './api/types';
+
+export { ChatLibrary, MessageItem };
+export type { ChatLibraryProps, ChatMessage, Agent, authProps, conversationHistoryProps, StramProps };
+export default ChatLibrary;