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

# 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:

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:

# 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:

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

<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

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

Messages

<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

<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