@djangocfg/ext-knowbase 1.0.21 → 1.0.23

package/src/components/Chat/ChatWidget.tsx

@@ -7,9 +7,10 @@
 
 import { List, Maximize2, MessageSquare, Minimize2, Plus, X } from 'lucide-react';
 import { usePathname } from 'next/navigation';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
+import { useKnowbaseT } from '../../i18n';
 import {
     Button, Card, CardContent, CardHeader,
 } from '@djangocfg/ui-nextjs';
@@ -37,6 +38,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
   onToggle,
   onMessage,
 }) => {
+  const kt = useKnowbaseT();
   const { sendQuery, getChatHistory } = useKnowbaseChatContext();
   const { createSession, getSession } = useKnowbaseSessionsContext();
   const {
@@ -48,9 +50,21 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
     toggleTimestamps,
   } = useChatUI();
 
+  const labels = useMemo(() => ({
+    title: kt('chat.title'),
+    titleShort: kt('chat.titleShort'),
+    placeholder: kt('chat.placeholder'),
+    openChat: kt('chat.openChat'),
+    sessions: kt('actions.sessions'),
+    newChat: kt('sessions.newChat'),
+    collapse: kt('actions.collapse'),
+    expand: kt('actions.expand'),
+    close: kt('actions.close'),
+  }), [kt]);
+
   const pathname = usePathname();
   const isMobile = useIsMobile();
-  
+
   const [isLoading, setIsLoading] = useState(false);
   const [showSessions, setShowSessions] = useState(false);
   const [mounted, setMounted] = useState(false);
@@ -233,7 +247,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
             <div className="flex items-center justify-between p-4 border-b bg-background shadow-sm">
               <div className="flex items-center gap-2">
                 <MessageSquare className="h-5 w-5 text-primary" />
-                <h2 className="font-semibold text-foreground">Knowledge Assistant</h2>
+                <h2 className="font-semibold text-foreground">{labels.title}</h2>
               </div>
 
               <div className="flex items-center gap-2">
@@ -242,7 +256,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
                   size="sm"
                   onClick={() => setShowSessions(true)}
                   className="text-muted-foreground hover:text-foreground"
-                  title="Sessions"
+                  title={labels.sessions}
                 >
                   <List className="h-5 w-5" />
                 </Button>
@@ -252,7 +266,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
                   size="sm"
                   onClick={handleNewChat}
                   className="text-muted-foreground hover:text-foreground"
-                  title="New Chat"
+                  title={labels.newChat}
                 >
                   <Plus className="h-5 w-5" />
                 </Button>
@@ -282,7 +296,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
               <MessageInput
                 onSend={handleSendMessage}
                 isLoading={isLoading}
-                placeholder="Ask me anything..."
+                placeholder={labels.placeholder}
               />
             </div>
           </div>
@@ -342,7 +356,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
           <CardHeader className="flex-row items-center justify-between space-y-0 pb-3 border-b">
             <div className="flex items-center gap-2">
               <MessageSquare className="h-5 w-5 text-primary" />
-              <h3 className="font-semibold text-foreground">Support</h3>
+              <h3 className="font-semibold text-foreground">{labels.titleShort}</h3>
             </div>
 
             <div className="flex items-center gap-1">
@@ -351,7 +365,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
                 size="sm"
                 onClick={() => setShowSessions(true)}
                 className="h-8 w-8 p-0"
-                title="Sessions"
+                title={labels.sessions}
               >
                 <List className="h-4 w-4" />
               </Button>
@@ -361,7 +375,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
                 size="sm"
                 onClick={handleNewChat}
                 className="h-8 w-8 p-0"
-                title="New Chat"
+                title={labels.newChat}
               >
                 <Plus className="h-4 w-4" />
               </Button>
@@ -371,7 +385,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
                 size="sm"
                 onClick={uiState.isExpanded ? collapseChat : expandChat}
                 className="h-8 w-8 p-0"
-                title={uiState.isExpanded ? 'Collapse' : 'Expand'}
+                title={uiState.isExpanded ? labels.collapse : labels.expand}
               >
                 {uiState.isExpanded ? (
                   <Minimize2 className="h-4 w-4" />
@@ -385,7 +399,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
                 size="sm"
                 onClick={toggleChat}
                 className="h-8 w-8 p-0"
-                title="Close"
+                title={labels.close}
               >
                 <X className="h-4 w-4" />
               </Button>
@@ -406,7 +420,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
             <MessageInput
               onSend={handleSendMessage}
               isLoading={isLoading}
-              placeholder="Ask me anything..."
+              placeholder={labels.placeholder}
             />
           </CardContent>
         </Card>
@@ -439,8 +453,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
           `}</style>
           <Button
             onClick={toggleChat}
-            className="w-full h-full rounded-full shadow-2xl 
-                       hover:scale-110 hover:rotate-12 active:scale-95 
+            className="w-full h-full rounded-full shadow-2xl
+                       hover:scale-110 hover:rotate-12 active:scale-95
                        transition-all duration-300 ease-out
                        flex items-center justify-center
                        group"
@@ -449,8 +463,8 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
               borderRadius: '50%',
               padding: 0,
             }}
-            title="Open Support Chat"
-            aria-label="Open Support Chat"
+            title={labels.openChat}
+            aria-label={labels.openChat}
           >
             <MessageSquare 
               className="h-7 w-7 text-primary-foreground group-hover:scale-110 transition-transform duration-300" 

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

@@ -6,8 +6,9 @@
 'use client';
 
 import { Loader2, Send } from 'lucide-react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { useKnowbaseT } from '../../../i18n';
 import { Button, Textarea } from '@djangocfg/ui-nextjs';
 
 import { chatLogger } from '../../../utils/logger';
@@ -22,13 +23,19 @@ export const MessageInput: React.FC<MessageInputProps> = ({
   onSend,
   isLoading = false,
   disabled = false,
-  placeholder = 'Ask me anything...',
+  placeholder,
   className = '',
 }) => {
+  const kt = useKnowbaseT();
   const [message, setMessage] = useState('');
   const [rows, setRows] = useState(1);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  const labels = useMemo(() => ({
+    placeholder: placeholder || kt('chat.placeholder'),
+    enterToSend: kt('chat.enterToSend'),
+  }), [kt, placeholder]);
+
   // Auto-resize textarea based on content
   useEffect(() => {
     if (textareaRef.current) {
@@ -95,19 +102,19 @@ export const MessageInput: React.FC<MessageInputProps> = ({
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder={placeholder}
+          placeholder={labels.placeholder}
           disabled={isDisabled}
           rows={rows}
-          className="resize-none min-h-[40px] max-h-[120px] transition-all duration-200 
+          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 
+          className="shrink-0 h-10 w-10 transition-all duration-200
                      hover:scale-110 active:scale-95 disabled:scale-100"
         >
           {isLoading ? (
@@ -117,9 +124,9 @@ export const MessageInput: React.FC<MessageInputProps> = ({
           )}
         </Button>
       </div>
-      
+
       <p className="text-xs text-muted-foreground mt-2">
-        Press Enter to send, Shift+Enter for new line
+        {labels.enterToSend}
       </p>
     </form>
   );

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

@@ -7,9 +7,10 @@
 
 import { Bot, ExternalLink, Loader2, User } from 'lucide-react';
 import moment from 'moment';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useKnowbaseT } from '../../../i18n';
 import {
     Avatar, AvatarFallback, AvatarImage, Badge, Card, CardContent, ScrollArea
 } from '@djangocfg/ui-nextjs';
@@ -29,9 +30,17 @@ export const MessageList: React.FC<MessageListProps> = ({
   autoScroll = true,
   className = '',
 }) => {
+  const kt = useKnowbaseT();
   const scrollRef = useRef<HTMLDivElement>(null);
   const { user } = useAuth();
 
+  const labels = useMemo(() => ({
+    startConversation: kt('chat.startConversation'),
+    startConversationDescription: kt('chat.startConversationDescription'),
+    source: kt('chat.source'),
+    thinking: kt('chat.thinking'),
+  }), [kt]);
+
   // Auto-scroll to bottom on new messages
   useEffect(() => {
     if (autoScroll && scrollRef.current) {
@@ -58,10 +67,10 @@ export const MessageList: React.FC<MessageListProps> = ({
           <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
+              {labels.startConversation}
             </h3>
             <p className="text-sm text-muted-foreground max-w-md">
-              Ask me anything about the documentation, features, or get help with your project.
+              {labels.startConversationDescription}
             </p>
           </div>
         ) : (
@@ -123,12 +132,12 @@ export const MessageList: React.FC<MessageListProps> = ({
                         <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 
+                            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}`}
+                            {source.document_title || labels.source.replace('{index}', String(idx + 1))}
                             <ExternalLink className="h-3 w-3" />
                           </Badge>
                         </div>
@@ -163,7 +172,7 @@ export const MessageList: React.FC<MessageListProps> = ({
               <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>
+                  <span className="animate-pulse">{labels.thinking}</span>
                 </div>
               </CardContent>
             </Card>

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

@@ -7,8 +7,9 @@
 
 import { Archive, Clock, Loader2, MessageSquare, Trash2 } from 'lucide-react';
 import moment from 'moment';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
+import { useKnowbaseT } from '../../../i18n';
 import {
     Badge, Button, ScrollArea, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle
 } from '@djangocfg/ui-nextjs';
@@ -28,6 +29,7 @@ export const SessionList: React.FC<SessionListProps> = ({
   onSelectSession,
   className = '',
 }) => {
+  const kt = useKnowbaseT();
   const { deleteSession, archiveSession } = useKnowbaseSessionsContext();
   const {
     sessions,
@@ -36,7 +38,20 @@ export const SessionList: React.FC<SessionListProps> = ({
     hasMore,
     loadMore,
   } = useInfiniteSessions();
-  
+
+  const labels = useMemo(() => ({
+    title: kt('sessions.title'),
+    description: kt('sessions.description'),
+    noSessions: kt('sessions.noSessions'),
+    noSessionsDescription: kt('sessions.noSessionsDescription'),
+    untitled: kt('sessions.untitled'),
+    active: kt('sessions.active'),
+    archive: kt('sessions.archive'),
+    delete: kt('sessions.delete'),
+    loadingMore: kt('sessions.loadingMore'),
+    noMore: kt('sessions.noMore'),
+  }), [kt]);
+
   const scrollRef = useRef<HTMLDivElement>(null);
 
   // Handle scroll to load more
@@ -72,9 +87,9 @@ export const SessionList: React.FC<SessionListProps> = ({
     <Sheet open={isOpen} onOpenChange={onClose}>
       <SheetContent side="left" className={`w-[400px] sm:w-[540px] ${className}`}>
         <SheetHeader>
-          <SheetTitle>Chat Sessions</SheetTitle>
+          <SheetTitle>{labels.title}</SheetTitle>
           <SheetDescription>
-            View and manage your chat history
+            {labels.description}
           </SheetDescription>
         </SheetHeader>
 
@@ -87,10 +102,10 @@ export const SessionList: React.FC<SessionListProps> = ({
             <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
+                {labels.noSessions}
               </h3>
               <p className="text-sm text-muted-foreground max-w-md">
-                Start a new conversation to create your first session.
+                {labels.noSessionsDescription}
               </p>
             </div>
           ) : (
@@ -117,11 +132,11 @@ export const SessionList: React.FC<SessionListProps> = ({
                   <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'}
+                        {session.title || labels.untitled}
                       </h4>
                       {session.is_active && (
                         <Badge variant="default" className="shrink-0 text-xs">
-                          Active
+                          {labels.active}
                         </Badge>
                       )}
                     </div>
@@ -143,20 +158,20 @@ export const SessionList: React.FC<SessionListProps> = ({
                         e.stopPropagation();
                         archiveSession(session.id, {});
                       }}
-                      title="Archive"
+                      title={labels.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 
+                      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"
+                      title={labels.delete}
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -168,14 +183,14 @@ export const SessionList: React.FC<SessionListProps> = ({
               {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>
+                  <span className="text-sm text-muted-foreground">{labels.loadingMore}</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>
+                  <span className="text-xs text-muted-foreground">{labels.noMore}</span>
                 </div>
               )}
             </div>

package/src/i18n/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Knowbase Extension I18n
+ *
+ * Self-contained translations - no app configuration needed.
+ *
+ * @example
+ * ```tsx
+ * import { useKnowbaseT } from '@djangocfg/ext-knowbase/i18n';
+ *
+ * function MyComponent() {
+ *   const t = useKnowbaseT();
+ *   return <span>{t('chat.title')}</span>;
+ * }
+ * ```
+ */
+
+// Self-contained hook (recommended)
+export { useKnowbaseT } from './useKnowbaseT';
+
+// Types
+export type { KnowbaseTranslations, KnowbaseLocalKeys } from './types';
+
+// Locales (for direct access if needed)
+export { en } from './locales/en';
+export { ru } from './locales/ru';
+export { ko } from './locales/ko';

package/src/i18n/locales/en.ts

@@ -0,0 +1,36 @@
+import type { KnowbaseTranslations } from '../types';
+
+export const en: KnowbaseTranslations = {
+  chat: {
+    title: 'Knowledge Assistant',
+    titleShort: 'Support',
+    placeholder: 'Ask me anything...',
+    enterToSend: 'Press Enter to send, Shift+Enter for new line',
+    thinking: 'Thinking...',
+    source: 'Source {index}',
+    startConversation: 'Start a Conversation',
+    startConversationDescription: 'Ask me anything about the documentation, features, or get help with your project.',
+    openChat: 'Open Support Chat',
+  },
+
+  sessions: {
+    title: 'Chat Sessions',
+    description: 'View and manage your chat history',
+    noSessions: 'No Sessions Yet',
+    noSessionsDescription: 'Start a new conversation to create your first session.',
+    untitled: 'Untitled Session',
+    active: 'Active',
+    archive: 'Archive',
+    delete: 'Delete',
+    loadingMore: 'Loading more...',
+    noMore: 'No more sessions',
+    newChat: 'New Chat',
+  },
+
+  actions: {
+    sessions: 'Sessions',
+    collapse: 'Collapse',
+    expand: 'Expand',
+    close: 'Close',
+  },
+};

package/src/i18n/locales/ko.ts

@@ -0,0 +1,36 @@
+import type { KnowbaseTranslations } from '../types';
+
+export const ko: KnowbaseTranslations = {
+  chat: {
+    title: '지식 도우미',
+    titleShort: '지원',
+    placeholder: '무엇이든 물어보세요...',
+    enterToSend: 'Enter로 전송, Shift+Enter로 줄바꿈',
+    thinking: '생각 중...',
+    source: '출처 {index}',
+    startConversation: '대화 시작하기',
+    startConversationDescription: '문서, 기능에 대해 질문하거나 프로젝트 도움을 받으세요.',
+    openChat: '지원 채팅 열기',
+  },
+
+  sessions: {
+    title: '채팅 세션',
+    description: '채팅 기록 보기 및 관리',
+    noSessions: '세션 없음',
+    noSessionsDescription: '새 대화를 시작하여 첫 번째 세션을 만드세요.',
+    untitled: '제목 없음',
+    active: '활성',
+    archive: '보관',
+    delete: '삭제',
+    loadingMore: '불러오는 중...',
+    noMore: '더 이상 세션 없음',
+    newChat: '새 채팅',
+  },
+
+  actions: {
+    sessions: '세션',
+    collapse: '축소',
+    expand: '확장',
+    close: '닫기',
+  },
+};

package/src/i18n/locales/ru.ts

@@ -0,0 +1,36 @@
+import type { KnowbaseTranslations } from '../types';
+
+export const ru: KnowbaseTranslations = {
+  chat: {
+    title: 'База знаний',
+    titleShort: 'Поддержка',
+    placeholder: 'Задайте вопрос...',
+    enterToSend: 'Enter для отправки, Shift+Enter для новой строки',
+    thinking: 'Думаю...',
+    source: 'Источник {index}',
+    startConversation: 'Начать разговор',
+    startConversationDescription: 'Задайте любой вопрос о документации, функциях или получите помощь с проектом.',
+    openChat: 'Открыть чат поддержки',
+  },
+
+  sessions: {
+    title: 'Сессии чата',
+    description: 'Просмотр и управление историей чата',
+    noSessions: 'Нет сессий',
+    noSessionsDescription: 'Начните новый разговор, чтобы создать первую сессию.',
+    untitled: 'Без названия',
+    active: 'Активная',
+    archive: 'Архивировать',
+    delete: 'Удалить',
+    loadingMore: 'Загрузка...',
+    noMore: 'Больше нет сессий',
+    newChat: 'Новый чат',
+  },
+
+  actions: {
+    sessions: 'Сессии',
+    collapse: 'Свернуть',
+    expand: 'Развернуть',
+    close: 'Закрыть',
+  },
+};

package/src/i18n/types.ts

@@ -0,0 +1,59 @@
+/**
+ * Knowbase Extension I18n Types
+ */
+
+/**
+ * Helper type to get dot-notation paths from nested object
+ */
+type PathKeys<T, Prefix extends string = ''> = T extends object
+  ? {
+      [K in keyof T]: K extends string
+        ? T[K] extends object
+          ? PathKeys<T[K], `${Prefix}${K}.`>
+          : `${Prefix}${K}`
+        : never;
+    }[keyof T]
+  : never;
+
+/**
+ * Keys for knowbase translations
+ */
+export type KnowbaseLocalKeys = PathKeys<KnowbaseTranslations>;
+
+export interface KnowbaseTranslations {
+  /** Chat widget */
+  chat: {
+    title: string;
+    titleShort: string;
+    placeholder: string;
+    enterToSend: string;
+    thinking: string;
+    source: string;
+    startConversation: string;
+    startConversationDescription: string;
+    openChat: string;
+  };
+
+  /** Sessions */
+  sessions: {
+    title: string;
+    description: string;
+    noSessions: string;
+    noSessionsDescription: string;
+    untitled: string;
+    active: string;
+    archive: string;
+    delete: string;
+    loadingMore: string;
+    noMore: string;
+    newChat: string;
+  };
+
+  /** Actions */
+  actions: {
+    sessions: string;
+    collapse: string;
+    expand: string;
+    close: string;
+  };
+}

package/src/i18n/useKnowbaseT.ts

@@ -0,0 +1,60 @@
+'use client';
+
+/**
+ * Self-contained translation hook for ext-knowbase
+ *
+ * Uses built-in translations, no app configuration needed.
+ */
+
+import { useLocale } from 'next-intl';
+import { useMemo, useCallback } from 'react';
+
+import type { KnowbaseTranslations, KnowbaseLocalKeys } from './types';
+import { en } from './locales/en';
+import { ru } from './locales/ru';
+import { ko } from './locales/ko';
+
+const translations: Record<string, KnowbaseTranslations> = { en, ru, ko };
+
+/**
+ * Get nested value from object by dot-notation path
+ */
+function getNestedValue(obj: Record<string, unknown>, path: string): string {
+  const keys = path.split('.');
+  let result: unknown = obj;
+
+  for (const key of keys) {
+    if (result && typeof result === 'object' && key in result) {
+      result = (result as Record<string, unknown>)[key];
+    } else {
+      return path; // Return key if not found
+    }
+  }
+
+  return typeof result === 'string' ? result : path;
+}
+
+/**
+ * Self-contained translation hook for knowbase extension
+ *
+ * Uses built-in translations based on current locale from next-intl.
+ * No need to add translations to app's i18n config.
+ *
+ * @example
+ * ```tsx
+ * function ChatWidget() {
+ *   const t = useKnowbaseT();
+ *   return <h1>{t('chat.title')}</h1>;
+ * }
+ * ```
+ */
+export function useKnowbaseT(): (key: KnowbaseLocalKeys) => string {
+  const locale = useLocale();
+
+  const t = useMemo(() => translations[locale] || translations.en, [locale]);
+
+  return useCallback(
+    (key: KnowbaseLocalKeys): string => getNestedValue(t as unknown as Record<string, unknown>, key),
+    [t]
+  );
+}