@mordn/chat-widget 0.1.1 → 0.1.4

package/README.md

@@ -2,12 +2,21 @@
 
 A customizable AI chat widget for React/Next.js applications with built-in conversation persistence.
 
-## Installation
+## Quick Start
 
 ```bash
-npm install @mordn/chat-widget
+# 1. Install the package
+npm install @mordn/chat-widget drizzle-kit
+
+# 2. Run the setup wizard
+npx @mordn/chat-widget
 ```
 
+The setup wizard creates all required files:
+- API routes (`/api/chat/...`)
+- `drizzle.config.ts`
+- `.env.example`
+
 ## Requirements
 
 - Next.js 14+ (App Router)
@@ -17,241 +26,113 @@ npm install @mordn/chat-widget
 
 ## Setup
 
-### 1. Environment Variable
+### 1. Environment Variables
 
-Add your database connection string:
+Copy `.env.example` to `.env.local` and fill in your credentials:
 
 ```env
+# Database (Required)
 DATABASE_URL="postgresql://postgres.xxx:[PASSWORD]@aws-0-region.pooler.supabase.com:6543/postgres"
-```
-
-### 2. Database Setup
 
-Install drizzle-kit as a dev dependency:
-
-```bash
-npm install drizzle-kit --save-dev
+# AI Provider (Required)
+AI_GATEWAY_API_KEY="your-ai-gateway-key"
 ```
 
-Create `drizzle.config.ts` in your project root:
-
-```typescript
-import { defineConfig } from 'drizzle-kit';
-
-export default defineConfig({
-  schema: './node_modules/@mordn/chat-widget/dist/db/index.js',
-  out: './drizzle',
-  dialect: 'postgresql',
-  dbCredentials: {
-    url: process.env.DATABASE_URL!,
-  },
-});
-```
+### 2. Database Setup
 
-Run the migration to create tables:
+Push the schema to your database:
 
 ```bash
 npx drizzle-kit push
 ```
 
-### 3. API Routes
-
-Create the following API routes in your Next.js app:
+### 3. Configure Your AI Model
 
-#### `app/api/chat/route.ts` - Main Chat Endpoint
+Open `app/api/chat/route.ts` and update the config:
 
 ```typescript
-import { saveChat, createChat, db, conversations, eq } from '@mordn/chat-widget/api';
-import { streamText } from 'ai';
-import { openai } from '@ai-sdk/openai';
-
-export async function POST(req: Request) {
-  const { messages, id } = await req.json();
-  const userId = req.headers.get('X-User-Id');
-
-  if (!userId) {
-    return new Response('Unauthorized', { status: 401 });
-  }
-
-  // Create conversation if it doesn't exist
-  const existing = await db
-    .select({ id: conversations.id })
-    .from(conversations)
-    .where(eq(conversations.id, id))
-    .limit(1);
-
-  if (existing.length === 0) {
-    await createChat(userId);
-    // Update the ID to match the provided one
-    await db.update(conversations)
-      .set({ id })
-      .where(eq(conversations.id, existing[0]?.id));
-  }
-
-  const result = streamText({
-    model: openai('gpt-4o'),
-    system: 'You are a helpful assistant.',
-    messages,
-    onFinish: async ({ response }) => {
-      await saveChat({
-        chatId: id,
-        messages: [...messages, ...response.messages],
-        userId,
-      });
-    },
-  });
-
-  return result.toDataStreamResponse();
-}
-```
-
-#### `app/api/chat/history/route.ts` - List Conversations
-
-```typescript
-import { NextResponse } from 'next/server';
-import { getConversations } from '@mordn/chat-widget/api';
-
-export async function GET(request: Request) {
-  const userId = request.headers.get('X-User-Id');
-
-  if (!userId) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
-  }
-
-  const conversations = await getConversations(userId);
-  return NextResponse.json({ conversations });
-}
+const DEVELOPER_CONFIG = {
+  model: 'openai/gpt-4o', // Your AI model
+  systemPrompt: 'You are a helpful assistant',
+  temperature: 0.7,
+};
 ```
 
-#### `app/api/chat/history/[id]/route.ts` - Get Conversation Messages
-
-```typescript
-import { NextResponse } from 'next/server';
-import { loadChat } from '@mordn/chat-widget/api';
-
-export async function GET(
-  request: Request,
-  { params }: { params: { id: string } }
-) {
-  const userId = request.headers.get('X-User-Id');
-
-  if (!userId) {
-    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
-  }
-
-  const messages = await loadChat(params.id);
-  return NextResponse.json({ messages });
-}
-```
-
-#### `app/api/chat/upload/route.ts` - File Upload (Optional)
-
-```typescript
-import { NextResponse } from 'next/server';
-import { createClient } from '@supabase/supabase-js';
-
-const supabase = createClient(
-  process.env.NEXT_PUBLIC_SUPABASE_URL!,
-  process.env.SUPABASE_SERVICE_ROLE_KEY!
-);
-
-export async function POST(request: Request) {
-  const formData = await request.formData();
-  const file = formData.get('file') as File;
-  const conversationId = formData.get('conversationId') as string;
-  const userId = formData.get('userId') as string;
-
-  if (!file || !userId) {
-    return NextResponse.json({ error: 'Missing required fields' }, { status: 400 });
-  }
-
-  const filename = `${userId}/${conversationId}/${Date.now()}-${file.name}`;
-  const { data, error } = await supabase.storage
-    .from('chat-uploads')
-    .upload(filename, file);
-
-  if (error) {
-    return NextResponse.json({ error: error.message }, { status: 500 });
-  }
-
-  const { data: { publicUrl } } = supabase.storage
-    .from('chat-uploads')
-    .getPublicUrl(filename);
-
-  return NextResponse.json({
-    url: publicUrl,
-    filename: file.name,
-    mediaType: file.type,
-    size: file.size,
-  });
-}
-```
-
-### 4. Use the Widget
-
-**For sitewide usage**, create a provider component:
+### 4. Add the Widget
 
 ```tsx
-// components/chat-provider.tsx
 'use client';
 
 import { ChatWidget } from '@mordn/chat-widget';
 import '@mordn/chat-widget/styles.css';
-import { useAuth } from '@/contexts/auth-context'; // Your auth hook
-
-export function ChatProvider() {
-  const { user, loading } = useAuth();
-
-  if (loading || !user) {
-    return null;
-  }
 
+export default function Page() {
   return (
     <ChatWidget
-      userId={user.id}
-      theme={{ mode: 'dark' }}
+      // Required
+      userId="user-123"
+
+      // Theme: 'light' | 'dark'
+      theme={{ mode: 'light' }}
+
+      // Feature toggles
+      features={{
+        fileUpload: false,  // Requires Supabase Storage setup
+      }}
+
+      // Display options
+      display={{
+        defaultOpen: false,      // Start with chat open
+        size: 'default',         // 'compact' | 'default' | 'large' | 'full'
+        resizable: true,         // Allow resizing
+        showToggleButton: true,  // Show FAB toggle button
+      }}
+
+      // Starter prompts shown on empty chat
+      starterPrompts={[
+        { title: "What can you help me with?" },
+        { title: "How do I get started?" },
+      ]}
     />
   );
 }
 ```
 
-Add to your root layout:
+---
 
-```tsx
-// app/layout.tsx
-import { ChatProvider } from '@/components/chat-provider';
+## File Uploads (Optional)
 
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <ChatProvider />
-      </body>
-    </html>
-  );
-}
+To enable image attachments, you need Supabase Storage and to enable the feature:
+
+```tsx
+<ChatWidget
+  userId="user-123"
+  features={{ fileUpload: true }}
+/>
 ```
 
-**For a specific page only:**
+### 1. Create Storage Bucket
 
-```tsx
-// app/dashboard/page.tsx
-'use client';
+1. Go to your [Supabase Dashboard](https://supabase.com/dashboard)
+2. Navigate to **Storage** → **New Bucket**
+3. Create a bucket named `chat-attachments`
+4. Set it to **Public** (or configure RLS policies for private access)
 
-import { ChatWidget } from '@mordn/chat-widget';
-import '@mordn/chat-widget/styles.css';
+### 2. Add Environment Variables
 
-export default function DashboardPage() {
-  return (
-    <div>
-      <h1>Dashboard</h1>
-      <ChatWidget userId="user-123" />
-    </div>
-  );
-}
+```env
+NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
+SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"
 ```
 
+You can find these in Supabase Dashboard → **Settings** → **API**
+
+### 3. Create Upload Route
+
+When running `npx @mordn/chat-widget`, select **Yes** when asked about the upload route.
+
+---
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -260,9 +141,6 @@ export default function DashboardPage() {
 | `conversationId` | `string` | - | Load a specific conversation |
 | `initialMessages` | `array` | - | Pre-fill the chat with messages |
 | `className` | `string` | - | Additional CSS classes |
-| `model` | `string` | - | AI model identifier |
-| `systemPrompt` | `string` | - | System prompt for the AI |
-| `temperature` | `number` | - | AI temperature (0-1) |
 | `theme` | `ThemeConfig` | - | Theme configuration |
 | `features` | `FeatureConfig` | - | Feature toggles |
 | `display` | `DisplayConfig` | - | Display options |
@@ -272,9 +150,6 @@ export default function DashboardPage() {
 ```typescript
 {
   mode?: 'light' | 'dark';
-  primaryColor?: string;      // Hex color
-  backgroundColor?: string;   // Hex color
-  textColor?: string;         // Hex color
 }
 ```
 
@@ -282,7 +157,7 @@ export default function DashboardPage() {
 
 ```typescript
 {
-  fileUpload?: boolean;  // Enable file attachments (default: true)
+  fileUpload?: boolean;  // Enable file attachments (default: false)
   webSearch?: boolean;   // Enable web search toggle
 }
 ```
@@ -291,16 +166,18 @@ export default function DashboardPage() {
 
 ```typescript
 {
-  width?: string;              // e.g., '400px' or '30vw' (default: '30vw')
+  width?: string;              // e.g., '400px' or '30vw'
   defaultOpen?: boolean;       // Start with chat open (default: false)
   showToggleButton?: boolean;  // Show FAB toggle button (default: true)
   toggleButtonPosition?: {
-    bottom?: string;           // e.g., '24px'
-    right?: string;            // e.g., '24px'
+    bottom?: string;
+    right?: string;
   };
 }
 ```
 
+---
+
 ## Exports
 
 ```typescript
@@ -321,18 +198,338 @@ import {
   updateConversationTitle,
   eq, and, or, desc, asc, sql
 } from '@mordn/chat-widget/api';
+```
+
+---
+
+## Generated Files Reference
+
+<details>
+<summary><strong>app/api/chat/route.ts</strong> - Main Chat Endpoint</summary>
+
+```typescript
+import { saveChat, updateConversationTitle, db, conversations, messages, eq } from '@mordn/chat-widget/api';
+import { convertToModelMessages, streamText, UIMessage } from 'ai';
+
+export const maxDuration = 30;
+
+const DEVELOPER_CONFIG = {
+  model: 'openai/gpt-4o',
+  systemPrompt: 'You are a helpful assistant',
+  temperature: 0.7,
+};
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const userId = req.headers.get('X-User-Id');
+
+    if (!userId) {
+      return new Response('userId is required in X-User-Id header', { status: 400 });
+    }
+
+    const chatMessages: UIMessage[] = body.messages || [];
+    const id: string = body.id || 'temp-id';
+    const { model, systemPrompt, temperature } = DEVELOPER_CONFIG;
+
+    const existingConv = await db
+      .select({ id: conversations.id })
+      .from(conversations)
+      .where(eq(conversations.id, id))
+      .limit(1);
+
+    if (!existingConv.length) {
+      await db.insert(conversations).values({
+        id,
+        userId,
+        title: 'New Chat',
+        metadata: {},
+      });
+    }
+
+    const userMessages = chatMessages.filter(msg => msg.role === 'user');
+    if (userMessages.length > 0) {
+      const newUserMessage = userMessages[userMessages.length - 1];
+      const textPart = newUserMessage.parts?.find(p => p.type === 'text') as { text: string } | undefined;
+      const fileParts = newUserMessage.parts?.filter(p => p.type === 'file') || [];
+
+      const existingMsg = await db
+        .select({ id: messages.id })
+        .from(messages)
+        .where(eq(messages.id, newUserMessage.id))
+        .limit(1);
+
+      if (!existingMsg.length) {
+        await db.insert(messages).values({
+          id: newUserMessage.id,
+          conversationId: id,
+          role: newUserMessage.role,
+          content: textPart?.text || '',
+          files: fileParts,
+          model: model,
+          metadata: { parts: newUserMessage.parts || [] },
+        });
+      }
+
+      if (textPart?.text) {
+        const conv = await db
+          .select({ title: conversations.title })
+          .from(conversations)
+          .where(eq(conversations.id, id))
+          .limit(1);
+
+        if (conv[0]?.title === 'New Chat') {
+          await updateConversationTitle(id, textPart.text.slice(0, 100));
+        }
+      }
+    }
+
+    const transformedMessages = chatMessages.map(msg => {
+      if (msg.role === 'user' && msg.parts) {
+        const textPart = msg.parts.find(p => p.type === 'text');
+        const fileParts = msg.parts.filter(p => p.type === 'file');
+
+        if (fileParts.length > 0) {
+          const content: any[] = [];
+          if (textPart && 'text' in textPart) {
+            content.push({ type: 'text', text: textPart.text });
+          }
+          for (const file of fileParts) {
+            if ('mediaType' in file && (file as any).mediaType?.startsWith('image/')) {
+              content.push({ type: 'image', image: (file as any).url });
+            }
+          }
+          return { ...msg, content };
+        }
+      }
+      return msg;
+    });
+
+    const result = streamText({
+      model: model,
+      messages: convertToModelMessages(transformedMessages),
+      system: systemPrompt,
+      temperature: temperature,
+    });
+
+    return result.toUIMessageStreamResponse({
+      sendSources: true,
+      sendReasoning: true,
+      onFinish: ({ messages: finalMessages }) => {
+        if (finalMessages.length > 0) {
+          saveChat({ chatId: id, messages: finalMessages, model, userId });
+        }
+      },
+    });
+  } catch (error) {
+    console.error('Chat API error:', error);
+    return new Response(JSON.stringify({ error: 'Internal server error' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+}
+```
+
+</details>
 
-// Types
-import type {
-  ChatWidgetConfig,
-  ThemeConfig,
-  FeatureConfig,
-  DisplayConfig,
-  Conversation,
-  Message
-} from '@mordn/chat-widget';
+<details>
+<summary><strong>app/api/chat/history/route.ts</strong> - List Conversations</summary>
+
+```typescript
+import { NextResponse } from 'next/server';
+import { getConversations } from '@mordn/chat-widget/api';
+
+export async function GET(request: Request) {
+  try {
+    const url = new URL(request.url);
+    const userId = url.searchParams.get('userId') || request.headers.get('X-User-Id');
+
+    if (!userId) {
+      return NextResponse.json({ error: 'userId is required' }, { status: 400 });
+    }
+
+    const conversationsData = await getConversations(userId);
+
+    const conversations = conversationsData.map(conv => ({
+      id: conv.id,
+      title: conv.title,
+      created_at: conv.createdAt,
+      updated_at: conv.updatedAt,
+      metadata: conv.metadata,
+      message_count: conv.messageCount,
+    }));
+
+    return NextResponse.json({ conversations });
+  } catch (error) {
+    console.error('Error in chat history API:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+```
+
+</details>
+
+<details>
+<summary><strong>app/api/chat/history/[conversationId]/route.ts</strong> - Get Conversation</summary>
+
+```typescript
+import { NextResponse } from 'next/server';
+import { db, conversations, messages, eq, and, asc } from '@mordn/chat-widget/api';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ conversationId: string }> }
+) {
+  try {
+    const { conversationId } = await params;
+    const url = new URL(request.url);
+    const userId = url.searchParams.get('userId') || request.headers.get('X-User-Id');
+
+    if (!userId) {
+      return NextResponse.json({ error: 'userId is required' }, { status: 400 });
+    }
+
+    const conv = await db
+      .select({
+        id: conversations.id,
+        title: conversations.title,
+        metadata: conversations.metadata,
+      })
+      .from(conversations)
+      .where(and(
+        eq(conversations.id, conversationId),
+        eq(conversations.userId, userId)
+      ))
+      .limit(1);
+
+    if (!conv.length) {
+      return NextResponse.json({ error: 'Conversation not found' }, { status: 404 });
+    }
+
+    const conversation = conv[0];
+
+    const dbMessages = await db
+      .select()
+      .from(messages)
+      .where(eq(messages.conversationId, conversationId))
+      .orderBy(asc(messages.createdAt))
+      .limit(1000);
+
+    const transformedMessages = dbMessages.map(msg => {
+      const metadata = msg.metadata as { parts?: any[] } | null;
+
+      if (metadata?.parts && Array.isArray(metadata.parts)) {
+        return {
+          id: msg.id,
+          role: msg.role,
+          content: msg.content,
+          created_at: msg.createdAt,
+          parts: metadata.parts
+        };
+      }
+
+      return {
+        id: msg.id,
+        role: msg.role,
+        content: msg.content,
+        created_at: msg.createdAt,
+        parts: msg.content ? [{ type: 'text', text: msg.content }] : undefined
+      };
+    });
+
+    return NextResponse.json({ conversation, messages: transformedMessages });
+  } catch (error) {
+    console.error('Error loading conversation:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
 ```
 
+</details>
+
+<details>
+<summary><strong>app/api/chat/upload/route.ts</strong> - File Upload (Optional)</summary>
+
+```typescript
+import { createClient } from '@supabase/supabase-js';
+import { nanoid } from 'nanoid';
+
+export async function POST(req: Request) {
+  try {
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+    // Check for required environment variables
+    if (!supabaseUrl || !supabaseServiceKey) {
+      console.error('Missing Supabase environment variables');
+      return Response.json({
+        error: 'File upload is not configured. Please set up Supabase Storage environment variables.'
+      }, { status: 503 });
+    }
+
+    const formData = await req.formData();
+    const file = formData.get('file') as File;
+    const conversationId = formData.get('conversationId') as string;
+    const userId = formData.get('userId') as string;
+
+    if (!file) {
+      return Response.json({ error: 'No file provided' }, { status: 400 });
+    }
+
+    if (!userId) {
+      return Response.json({ error: 'userId is required' }, { status: 400 });
+    }
+
+    if (!file.type.startsWith('image/')) {
+      return Response.json({ error: 'Only image files are supported' }, { status: 400 });
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      return Response.json({ error: 'File size exceeds 5MB limit' }, { status: 400 });
+    }
+
+    const supabase = createClient(supabaseUrl, supabaseServiceKey);
+
+    const timestamp = Date.now();
+    const randomId = nanoid(8);
+    const safeFilename = file.name.replace(/[^a-zA-Z0-9.-]/g, '_');
+    const filePath = `${userId}/${conversationId || 'default'}/${timestamp}-${randomId}-${safeFilename}`;
+
+    const fileBuffer = await file.arrayBuffer();
+
+    const { error: uploadError } = await supabase.storage
+      .from('chat-attachments')
+      .upload(filePath, fileBuffer, {
+        contentType: file.type,
+        upsert: false,
+      });
+
+    if (uploadError) {
+      return Response.json({ error: 'Failed to upload file' }, { status: 500 });
+    }
+
+    const { data: urlData } = supabase.storage
+      .from('chat-attachments')
+      .getPublicUrl(filePath);
+
+    return Response.json({
+      url: urlData.publicUrl,
+      filename: file.name,
+      mediaType: file.type,
+      size: file.size,
+      type: 'file',
+    });
+  } catch (error) {
+    return Response.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+```
+
+</details>
+
+---
+
 ## License
 
 MIT