juq-llm-kit/README.md

Customizable UI components for React Native (Expo) chat applications

# JUQ LLM Kit

A collection of customizable React Native (Expo) UI components for building LLM chat applications.

## Features

- 🎨 **Fully customizable** - All components support light and dark themes
- 📱 **Cross-platform** - Works on iOS, Android, and Web (via Expo)
- 🔌 **Easy to integrate** - Simple CLI to add components to your project
- 📦 **Lightweight** - Only install the components you need
- 🎭 **Themeable** - Customize colors, fonts, and styles

## For Users

### Installation

```bash
# Install locally in your project (recommended)
npx juq-llm-kit add all-chat-kit

# Or using npx directly
npx juq-llm-kit@latest add all-chat-kit
```

### Troubleshooting Installation

If you encounter an error like `Error: ENOENT: no such file or directory`, try these steps:

Make sure you're using the latest version of the package:
   ```bash
   npx juq-llm-kit add all-chat-kit
   ```

## Available Components

JUQ LLM Kit includes the following components:

- `ChatInput` - A customizable chat input field with expanding/collapsing functionality
- `LoadingTextAnimation` - A text animation showing loading status
- `Messages` - A messages list component for displaying chat history
- `Sidebar` - A collapsible sidebar for navigation

## Usage

### Add components to your project:

```bash
# Add all components at once
npx juq-llm-kit@latest add all-chat-kit

# Or add individual components
npx juq-llm-kit@latest add chat-input
npx juq-llm-kit@latest add loading-text-animation
npx juq-llm-kit@latest add messages
npx juq-llm-kit@latest add sidebar
```

### Import and use components in your app:

```jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { 
  ChatInput, 
  LoadingTextAnimation, 
  Messages, 
  Sidebar 
} from './components/chat-kit';

export default function ChatScreen() {
  const [messages, setMessages] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);

  const handleSendMessage = (text) => {
    // Add user message
    const userMessage = {
      id: Date.now(),
      role: 'user',
      content: text,
      timestamp: new Date().toISOString()
    };
    
    setMessages([...messages, userMessage]);
    setIsLoading(true);
    
    // Simulate AI response (replace with your actual API call)
    setTimeout(() => {
      const aiMessage = {
        id: Date.now() + 1,
        role: 'assistant',
        content: `This is a response to: "${text}"`,
        timestamp: new Date().toISOString()
      };
      
      setMessages(prev => [...prev, aiMessage]);
      setIsLoading(false);
    }, 1500);
  };

  return (
    <View style={styles.container}>
      <Sidebar 
        theme="dark"
        projects={[
          { name: "My Project 1" },
          { name: "My Project 2" }
        ]}
      />
      <View style={styles.chatContainer}>
        <Messages 
          messages={messages}
          theme="dark"
        />
        <ChatInput 
          onSubmit={handleSendMessage}
          isLoading={isLoading}
          theme="dark"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  chatContainer: {
    flex: 1,
    justifyContent: 'space-between',
  },
});
```

## Component API

### ChatInput

```jsx
<ChatInput
  placeholder="Ask anything..."
  initialValue=""
  onSubmit={(message) => console.log(message)}
  isLoading={false}
  loadingPhrases={["loading...", "thinking...", "processing..."]}
  maxHeight={120}
  categoryButtons={[
    {
      icon: <Icon />,
      label: "Summary",
      onPress: () => {}
    }
  ]}
  containerStyle={{ /* custom styles */ }}
  inputStyle={{ /* custom styles */ }}
  fontFamily="SpaceMono"
  theme="dark" // or "light"
/>
```

### LoadingTextAnimation

```jsx
<LoadingTextAnimation
  phrases={["loading...", "thinking...", "processing..."]}
  animationDuration={3000}
  textStyle={{ /* custom styles */ }}
  containerStyle={{ /* custom styles */ }}
  fontFamily="SpaceMono"
  theme="dark" // or "light"
/>
```

### Messages

```jsx
<Messages
  messages={[
    {
      id: 1,
      role: 'user',
      content: 'Hello!',
      timestamp: new Date().toISOString()
    },
    {
      id: 2,
      role: 'assistant',
      content: 'Hi there! How can I help?',
      timestamp: new Date().toISOString()
    }
  ]}
  onCopy={(text) => {}}
  onRegenerate={(messageId) => {}}
  containerStyle={{ /* custom styles */ }}
  bubbleStyle={{ /* custom styles */ }}
  messageTextStyle={{ /* custom styles */ }}
  fontFamily="SpaceMono"
  theme="dark" // or "light"
  customActions={[
    {
      icon: <Icon />,
      onPress: (messageId) => {}
    }
  ]}
/>
```

### Sidebar

```jsx
<Sidebar
  onCollapsedChange={(collapsed) => {}}
  initialCollapsed={false}
  projects={[
    { 
      name: "Project 1",
      id: "1",
      onSelect: () => {}
    }
  ]}
  historyItems={[
    {
      name: "Chat History 1",
      date: new Date(),
      id: "1",
      onSelect: () => {}
    }
  ]}
  subscriptionTitle="View plans"
  subscriptionText="Unlimited access, team features,..."
  containerStyle={{ /* custom styles */ }}
  theme="dark" // or "light"
/>
```

## License

MIT