@djangocfg/ext-knowbase 1.0.0

package/src/components/Chat/components/MessageInput.tsx

@@ -0,0 +1,124 @@
+/**
+ * Message Input Component
+ * Input field for sending chat messages
+ */
+
+'use client';
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Button, Textarea } from '@djangocfg/ui-nextjs';
+import { Send, Loader2 } from 'lucide-react';
+import { chatLogger } from '../../../utils/logger';
+import type { MessageInputProps } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Message Input Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export const MessageInput: React.FC<MessageInputProps> = ({
+  onSend,
+  isLoading = false,
+  disabled = false,
+  placeholder = 'Ask me anything...',
+  className = '',
+}) => {
+  const [message, setMessage] = useState('');
+  const [rows, setRows] = useState(1);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea based on content
+  useEffect(() => {
+    if (textareaRef.current) {
+      const lineHeight = 24; // approximate line height
+      const maxRows = 5;
+      const minRows = 1;
+      
+      // If message is empty, reset to min height
+      if (!message) {
+        textareaRef.current.style.height = 'auto';
+        setRows(minRows);
+        return;
+      }
+      
+      textareaRef.current.style.height = 'auto';
+      const scrollHeight = textareaRef.current.scrollHeight;
+      const newRows = Math.max(minRows, Math.min(maxRows, Math.floor(scrollHeight / lineHeight)));
+      setRows(newRows);
+    }
+  }, [message]);
+
+  const handleSubmit = useCallback(
+    async (e?: React.FormEvent) => {
+      e?.preventDefault();
+      
+      const trimmedMessage = message.trim();
+      if (!trimmedMessage || isLoading || disabled) return;
+
+      try {
+        await onSend(trimmedMessage);
+        setMessage('');
+        setRows(1);
+        
+        // Reset textarea height
+        if (textareaRef.current) {
+          textareaRef.current.style.height = 'auto';
+        }
+      } catch (error) {
+        chatLogger.error('Failed to send message from input:', error);
+      }
+    },
+    [message, isLoading, disabled, onSend]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Send on Enter (without Shift)
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  const isDisabled = disabled || isLoading;
+  const canSend = message.trim().length > 0 && !isDisabled;
+
+  return (
+    <form onSubmit={handleSubmit} className={`border-t p-4 ${className}`}>
+      <div className="flex items-end gap-2">
+        <Textarea
+          ref={textareaRef}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={isDisabled}
+          rows={rows}
+          className="resize-none min-h-[40px] max-h-[120px] transition-all duration-200 
+                     focus:ring-2 focus:ring-primary/20"
+          style={{ resize: 'none' }}
+        />
+        
+        <Button
+          type="submit"
+          size="icon"
+          disabled={!canSend}
+          className="shrink-0 h-10 w-10 transition-all duration-200 
+                     hover:scale-110 active:scale-95 disabled:scale-100"
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Send className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+      
+      <p className="text-xs text-muted-foreground mt-2">
+        Press Enter to send, Shift+Enter for new line
+      </p>
+    </form>
+  );
+};
+

package/src/components/Chat/components/MessageList.tsx

@@ -0,0 +1,169 @@
+/**
+ * Message List Component
+ * Displays chat messages with markdown support and sources
+ */
+
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import { Card, CardContent, Avatar, AvatarImage, AvatarFallback, Badge, ScrollArea } from '@djangocfg/ui-nextjs';
+import { Bot, User, ExternalLink, Loader2 } from 'lucide-react';
+import { useAuth } from '@djangocfg/api/auth';
+import type { MessageListProps } from '../types';
+import { Enums } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Message List Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  isLoading = false,
+  showSources = true,
+  showTimestamps = false,
+  autoScroll = true,
+  className = '',
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const { user } = useAuth();
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (autoScroll && scrollRef.current) {
+      const scrollContainer = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
+      if (scrollContainer) {
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      }
+    }
+  }, [messages, isLoading, autoScroll]);
+
+  const formatTimestamp = (timestamp: string) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+  };
+
+  return (
+    <ScrollArea className={`h-full bg-muted/50 ${className}`} viewportRef={scrollRef}>
+      <div className="space-y-4 p-4">
+        {messages.length === 0 && !isLoading ? (
+          <div className="flex flex-col items-center justify-center h-full text-center py-12">
+            <Bot className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-semibold text-foreground mb-2">
+              Start a Conversation
+            </h3>
+            <p className="text-sm text-muted-foreground max-w-md">
+              Ask me anything about the documentation, features, or get help with your project.
+            </p>
+          </div>
+        ) : (
+          messages.map((message, index) => {
+            const isUser = message.role === Enums.ChatMessageRole.USER;
+            const isAssistant = message.role === Enums.ChatMessageRole.ASSISTANT;
+            
+            return (
+            <div
+              key={message.id}
+              className={`flex gap-3 ${isUser ? 'justify-end' : 'justify-start'}
+                         animate-in fade-in slide-in-from-bottom-2 duration-300`}
+              style={{ animationDelay: `${index * 50}ms` }}
+            >
+              {/* Avatar */}
+              {isAssistant && (
+                <Avatar className="h-8 w-8 shrink-0">
+                  <div className="flex h-full w-full items-center justify-center bg-primary text-primary-foreground">
+                    <Bot className="h-5 w-5" />
+                  </div>
+                </Avatar>
+              )}
+
+              {/* Message Content */}
+              <div
+                className={`flex flex-col gap-2 flex-1 max-w-[80%] ${
+                  isUser ? 'items-end' : 'items-start'
+                }`}
+              >
+                {/* Message Bubble */}
+                <Card
+                  className={`${
+                    isUser
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted'
+                  } transition-all duration-200 hover:shadow-md`}
+                >
+                  <CardContent className="p-3">
+                    <div className="text-sm whitespace-pre-wrap break-words">
+                      {message.content}
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Timestamp */}
+                {showTimestamps && message.created_at && (
+                  <span className="text-xs text-muted-foreground px-1">
+                    {formatTimestamp(message.created_at)}
+                  </span>
+                )}
+
+                {/* Sources */}
+                {showSources &&
+                  isAssistant &&
+                  message.sources &&
+                  message.sources.length > 0 && (
+                    <div className="flex flex-wrap gap-2 px-1 animate-in fade-in slide-in-from-left-2 duration-300 delay-100">
+                      {message.sources.map((source, idx) => (
+                        <div key={idx}>
+                          <Badge
+                            variant="secondary"
+                            className="text-xs flex items-center gap-1 cursor-pointer 
+                                     hover:bg-secondary/80 hover:scale-105 active:scale-95 
+                                     transition-all duration-200 animate-in fade-in zoom-in-95"
+                            style={{ animationDelay: `${(idx + 1) * 100}ms` }}
+                          >
+                            {source.document_title || `Source ${idx + 1}`}
+                            <ExternalLink className="h-3 w-3" />
+                          </Badge>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+              </div>
+
+              {/* User Avatar */}
+              {isUser && (
+                <Avatar className="h-8 w-8 shrink-0">
+                  {user?.avatar && <AvatarImage src={user.avatar} alt={user.display_username || user.email || 'User'} />}
+                  <AvatarFallback className="bg-primary/10 text-primary font-semibold">
+                    {user?.display_username?.charAt(0)?.toUpperCase() || 
+                     user?.email?.charAt(0)?.toUpperCase() || 
+                     <User className="h-5 w-5" />}
+                  </AvatarFallback>
+                </Avatar>
+              )}
+            </div>
+            );
+          })
+        )}
+
+        {/* Loading Indicator */}
+        {isLoading && (
+          <div className="flex gap-3 justify-start animate-in fade-in slide-in-from-bottom-2 duration-300">
+            <Avatar className="h-8 w-8 shrink-0 animate-pulse">
+              <div className="flex h-full w-full items-center justify-center bg-primary text-primary-foreground">
+                <Bot className="h-5 w-5 animate-bounce" />
+              </div>
+            </Avatar>
+            <Card className="bg-muted animate-pulse">
+              <CardContent className="p-3">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <span className="animate-pulse">Thinking...</span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+};
+

package/src/components/Chat/components/SessionList.tsx

@@ -0,0 +1,192 @@
+/**
+ * Session List Component
+ * Drawer with list of chat sessions
+ */
+
+'use client';
+
+import React, { useCallback, useRef, useEffect } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  Button,
+  ScrollArea,
+  Badge,
+} from '@djangocfg/ui-nextjs';
+import { MessageSquare, Clock, Archive, Trash2, Loader2 } from 'lucide-react';
+import { useKnowbaseSessionsContext } from '../../../contexts/knowbase';
+import { useInfiniteSessions } from '../hooks/useInfiniteSessions';
+import type { SessionListProps } from '../types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Session List Component
+// ─────────────────────────────────────────────────────────────────────────
+
+export const SessionList: React.FC<SessionListProps> = ({
+  isOpen,
+  onClose,
+  onSelectSession,
+  className = '',
+}) => {
+  const { deleteSession, archiveSession } = useKnowbaseSessionsContext();
+  const {
+    sessions,
+    isLoading,
+    isLoadingMore,
+    hasMore,
+    loadMore,
+  } = useInfiniteSessions();
+  
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Handle scroll to load more
+  const handleScroll = useCallback(() => {
+    if (!scrollRef.current || isLoadingMore || !hasMore) return;
+
+    const scrollContainer = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
+    if (!scrollContainer) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+    // Load more when scrolled 80% down
+    if (scrollPercentage > 0.8) {
+      loadMore();
+    }
+  }, [hasMore, isLoadingMore, loadMore]);
+
+  // Attach scroll listener
+  useEffect(() => {
+    const scrollContainer = scrollRef.current?.querySelector('[data-radix-scroll-area-viewport]');
+    if (!scrollContainer) return;
+
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={onClose}>
+      <SheetContent side="left" className={`w-[400px] sm:w-[540px] ${className}`}>
+        <SheetHeader>
+          <SheetTitle>Chat Sessions</SheetTitle>
+          <SheetDescription>
+            View and manage your chat history
+          </SheetDescription>
+        </SheetHeader>
+
+        <ScrollArea className="h-[calc(100vh-120px)] mt-6" viewportRef={scrollRef}>
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : !sessions || sessions.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <MessageSquare className="h-12 w-12 text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold text-foreground mb-2">
+                No Sessions Yet
+              </h3>
+              <p className="text-sm text-muted-foreground max-w-md">
+                Start a new conversation to create your first session.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {sessions.map((session, index) => (
+                <div
+                  key={session.id}
+                  className="group relative flex items-start gap-3 p-4 border rounded-sm 
+                           hover:bg-muted/50 hover:border-primary/50 hover:shadow-md
+                           transition-all duration-200 cursor-pointer
+                           animate-in fade-in slide-in-from-left-2"
+                  style={{ animationDelay: `${index * 50}ms` }}
+                  onClick={() => {
+                    onSelectSession(session.id);
+                    onClose();
+                  }}
+                >
+                  {/* Session Icon */}
+                  <div className="shrink-0 mt-1">
+                    <MessageSquare className="h-5 w-5 text-muted-foreground" />
+                  </div>
+
+                  {/* Session Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-2 mb-1">
+                      <h4 className="font-medium text-sm truncate">
+                        {session.title || 'Untitled Session'}
+                      </h4>
+                      {session.is_active && (
+                        <Badge variant="default" className="shrink-0 text-xs">
+                          Active
+                        </Badge>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <Clock className="h-3 w-3" />
+                      <span>{formatDate(session.created_at)}</span>
+                    </div>
+                  </div>
+
+                  {/* Actions */}
+                  <div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 
+                                transition-all duration-200 group-hover:translate-x-0 translate-x-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 hover:scale-110 active:scale-95 transition-transform duration-200"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        archiveSession(session.id, {});
+                      }}
+                      title="Archive"
+                    >
+                      <Archive className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive 
+                               hover:scale-110 active:scale-95 transition-transform duration-200"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        deleteSession(session.id);
+                      }}
+                      title="Delete"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+              
+              {/* Loading more indicator */}
+              {isLoadingMore && (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground mr-2" />
+                  <span className="text-sm text-muted-foreground">Loading more...</span>
+                </div>
+              )}
+              
+              {/* No more sessions indicator */}
+              {!hasMore && sessions.length > 0 && (
+                <div className="text-center py-4">
+                  <span className="text-xs text-muted-foreground">No more sessions</span>
+                </div>
+              )}
+            </div>
+          )}
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+};
+

package/src/components/Chat/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Chat Components
+ * Re-exports for all chat components
+ */
+
+export { MessageList } from './MessageList';
+export { MessageInput } from './MessageInput';
+export { SessionList } from './SessionList';
+

package/src/components/Chat/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Chat hooks
+ */
+
+export { useInfiniteSessions } from './useInfiniteSessions';
+

package/src/components/Chat/hooks/useInfiniteSessions.ts

@@ -0,0 +1,81 @@
+/**
+ * Hook for infinite scroll chat sessions
+ * Uses SWR Infinite for pagination
+ */
+
+import useSWRInfinite from 'swr/infinite';
+import { apiKnowbase, ExtKnowbaseTypes, ExtKnowbaseFetchers } from '@djangocfg/api';
+
+type PaginatedChatSessionList = ExtKnowbaseTypes.PaginatedChatSessionList;
+type ChatSession = ExtKnowbaseTypes.ChatSession;
+
+const PAGE_SIZE = 20;
+
+export function useInfiniteSessions() {
+  const getKey = (pageIndex: number, previousPageData: PaginatedChatSessionList | null) => {
+    // Reached the end
+    if (previousPageData && !previousPageData.has_next) return null;
+    
+    // First page, no previous data
+    if (pageIndex === 0) return ['cfg-knowbase-admin-sessions-infinite', 1, PAGE_SIZE];
+    
+    // Add the page number to the SWR key
+    return ['cfg-knowbase-admin-sessions-infinite', pageIndex + 1, PAGE_SIZE];
+  };
+
+  const fetcher = async ([, page, pageSize]: [string, number, number]) => {
+    return ExtKnowbaseFetchers.getKnowbaseAdminSessionsList(
+      { page, page_size: pageSize },
+      apiKnowbase
+    );
+  };
+
+  const {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    size,
+    setSize,
+    mutate,
+  } = useSWRInfinite<PaginatedChatSessionList>(getKey, fetcher, {
+    revalidateFirstPage: false,
+    parallel: false,
+  });
+
+  // Flatten all pages into single array
+  const sessions: ChatSession[] = data ? data.flatMap((page) => page.results) : [];
+  
+  // Check if there are more pages
+  const hasMore = data && data[data.length - 1]?.has_next;
+  
+  // Total count from last page
+  const totalCount = data && data[data.length - 1]?.count;
+  
+  // Loading more state
+  const isLoadingMore = isValidating && data && typeof data[size - 1] !== 'undefined';
+
+  // Function to load next page
+  const loadMore = () => {
+    if (hasMore && !isLoadingMore) {
+      setSize(size + 1);
+    }
+  };
+
+  // Refresh all pages
+  const refresh = async () => {
+    await mutate();
+  };
+
+  return {
+    sessions,
+    isLoading,
+    isLoadingMore: isLoadingMore || false,
+    error,
+    hasMore: hasMore || false,
+    totalCount: totalCount || 0,
+    loadMore,
+    refresh,
+  };
+}
+

package/src/components/Chat/index.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+/**
+ * Knowledge Chat Module
+ * Complete RAG-powered chat widget with context providers
+ */
+
+'use client';
+
+import React from 'react';
+import { KnowbaseChatProvider, KnowbaseSessionsProvider } from '../../contexts/knowbase';
+import { ChatUIProvider } from './ChatUIContext';
+import { ChatWidget } from './ChatWidget';
+import type { ChatWidgetProps } from './types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Main Component with Providers
+// ─────────────────────────────────────────────────────────────────────────
+
+export const KnowledgeChat: React.FC<ChatWidgetProps> = (props) => {
+  return (
+    <KnowbaseChatProvider>
+      <KnowbaseSessionsProvider>
+        <ChatUIProvider initialState={{ isOpen: false }}>
+          <ChatWidget {...props} />
+        </ChatUIProvider>
+      </KnowbaseSessionsProvider>
+    </KnowbaseChatProvider>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────
+// Named Exports
+// ─────────────────────────────────────────────────────────────────────────
+
+export { ChatWidget } from './ChatWidget';
+export { ChatUIProvider, useChatUI } from './ChatUIContext';
+export { MessageList, MessageInput, SessionList } from './components';
+export * from './types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Default Export
+// ─────────────────────────────────────────────────────────────────────────
+
+export default KnowledgeChat;
+