@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/chatbot/providers/openai-provider.ts

@@ -0,0 +1,239 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import type {
+    ChatbotProvider,
+    ProviderCapabilities,
+    ProviderConfig,
+    ChatbotContext
+} from '../core/types.js';
+import type { ChatbotFile, ChatbotModule } from '../chatbot.types.js';
+
+/**
+ * OpenAI provider for ChatGPT integration
+ */
+export class OpenAIProvider implements ChatbotProvider {
+  readonly id = 'openai';
+  readonly name = 'OpenAI';
+  readonly capabilities: ProviderCapabilities = {
+    streaming: true,
+    fileUpload: true,
+    modules: true,
+    functions: true,
+    imageGeneration: true
+  };
+
+  private apiKey: string = '';
+  private apiUrl: string = 'https://api.openai.com/v1';
+  private model: string = 'gpt-4';
+  private temperature: number = 0.7;
+  private maxTokens?: number;
+  private connected: boolean = false;
+
+  async connect(config: ProviderConfig): Promise<void> {
+    if (!config.apiKey) {
+      throw new Error('OpenAI API key is required');
+    }
+
+    this.apiKey = config.apiKey;
+    this.apiUrl = config.apiUrl || this.apiUrl;
+    this.model = config.model || this.model;
+    this.temperature = config.temperature ?? this.temperature;
+    this.maxTokens = config.maxTokens;
+
+    // Verify connection
+    try {
+      const response = await fetch(`${this.apiUrl}/models`, {
+        headers: {
+          'Authorization': `Bearer ${this.apiKey}`
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`OpenAI connection failed: ${response.statusText}`);
+      }
+
+      this.connected = true;
+      console.log('[OpenAIProvider] Connected successfully');
+    } catch (error) {
+      this.connected = false;
+      throw error;
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    this.connected = false;
+    console.log('[OpenAIProvider] Disconnected');
+  }
+
+  isConnected(): boolean {
+    return this.connected;
+  }
+
+  async *sendMessage(text: string, context: ChatbotContext): AsyncIterator<string> {
+    if (!this.connected) {
+      throw new Error('Provider not connected');
+    }
+
+    const messages = this.buildMessages(text, context);
+
+    const response = await fetch(`${this.apiUrl}/chat/completions`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${this.apiKey}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: this.model,
+        messages,
+        temperature: this.temperature,
+        max_tokens: this.maxTokens,
+        stream: true
+      })
+    });
+
+    if (!response.ok) {
+      throw new Error(`OpenAI API error: ${response.statusText}`);
+    }
+
+    if (!response.body) {
+      throw new Error('Response body is null');
+    }
+
+    // Process Server-Sent Events stream
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          if (line.trim() === '') continue;
+          if (line.trim() === 'data: [DONE]') continue;
+          
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6);
+            try {
+              const parsed = JSON.parse(data);
+              const content = parsed.choices?.[0]?.delta?.content;
+              if (content) {
+                yield content;
+              }
+            } catch (e) {
+              console.error('Error parsing SSE data:', e);
+            }
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  }
+
+  async getAvailableModules(): Promise<ChatbotModule[]> {
+    // Return example modules - in real implementation, fetch from OpenAI
+    return [
+      {
+        id: 'web-search',
+        name: 'Web Search',
+        description: 'Search the web for information',
+        icon: 'search',
+        enabled: true
+      },
+      {
+        id: 'code-interpreter',
+        name: 'Code Interpreter',
+        description: 'Execute Python code',
+        icon: 'code',
+        enabled: true
+      },
+      {
+        id: 'dalle',
+        name: 'DALL-E',
+        description: 'Generate images',
+        icon: 'image',
+        enabled: true
+      }
+    ];
+  }
+
+  async callModule(moduleId: string, params: any): Promise<any> {
+    // Implementation for function/tool calling
+    console.log(`[OpenAIProvider] Calling module: ${moduleId}`, params);
+    return { success: true, result: 'Module executed' };
+  }
+
+  async uploadFile(file: File): Promise<ChatbotFile> {
+    // Upload file to OpenAI
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('purpose', 'assistants');
+
+    const response = await fetch(`${this.apiUrl}/files`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${this.apiKey}`
+      },
+      body: formData
+    });
+
+    if (!response.ok) {
+      throw new Error(`File upload failed: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    return {
+      id: data.id,
+      name: file.name,
+      size: file.size,
+      type: this.determineFileType(file.type),
+      mimeType: file.type,
+      url: data.url
+    };
+  }
+
+  onError(error: Error): void {
+    console.error('[OpenAIProvider] Error:', error);
+  }
+
+  private buildMessages(text: string, context: ChatbotContext): any[] {
+    const messages: any[] = [];
+
+    // Add context messages (last N messages for context)
+    const contextMessages = context.messages.slice(-10); // Last 10 messages
+    for (const msg of contextMessages) {
+      messages.push({
+        role: msg.sender === 'user' ? 'user' : 'assistant',
+        content: msg.text
+      });
+    }
+
+    // Add current message if not already included
+    if (!messages.find(m => m.role === 'user' && m.content === text)) {
+      messages.push({
+        role: 'user',
+        content: text
+      });
+    }
+
+    return messages;
+  }
+
+  private determineFileType(mimeType: string): any {
+    if (mimeType.startsWith('image/')) return 'image';
+    if (mimeType.startsWith('video/')) return 'video';
+    if (mimeType.startsWith('audio/')) return 'audio';
+    return 'document';
+  }
+}

package/components/ui/nuraly-ui/src/components/chatbot/react.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrChatbotElement } from './chatbot.component.js';
+
+/**
+ * React wrapper for the nr-chatbot component
+ * 
+ * @example
+ * ```jsx
+ * import { NrChatbot } from '@nuralyui/chatbot/react';
+ * 
+ * function ChatExample() {
+ *   const [messages, setMessages] = useState([]);
+ *   const [suggestions] = useState([
+ *     { id: '1', text: 'Help with account', enabled: true },
+ *     { id: '2', text: 'Check balance', enabled: true }
+ *   ]);
+ * 
+ *   const handleMessageSent = (event) => {
+ *     const newMessage = event.detail.message;
+ *     setMessages(prev => [...prev, newMessage]);
+ *   };
+ * 
+ *   return (
+ *     <NrChatbot
+ *       messages={messages}
+ *       suggestions={suggestions}
+ *       size="medium"
+ *       variant="default"
+ *       onChatbotMessageSent={handleMessageSent}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const NrChatbot = createComponent({
+  tagName: 'nr-chatbot',
+  elementClass: NrChatbotElement,
+  react: React,
+  events: {
+    onChatbotMessageSent: 'nr-chatbot-message-sent',
+    onChatbotSuggestionClicked: 'nr-chatbot-suggestion-clicked',
+    onChatbotRetryRequested: 'nr-chatbot-retry-requested',
+    onChatbotInputChanged: 'nr-chatbot-input-changed',
+    onChatbotInputFocused: 'nr-chatbot-input-focused',
+    onChatbotInputBlurred: 'nr-chatbot-input-blurred',
+  },
+});
+
+// Legacy alias for backward compatibility
+export const HyChatbot = NrChatbot;

package/components/ui/nuraly-ui/src/components/chatbot/storage/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+// Storage implementations
+export { MemoryStorage, LocalStorageAdapter, IndexedDBStorage } from './storage-implementations.js';

package/components/ui/nuraly-ui/src/components/chatbot/storage/storage-implementations.ts

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { ChatbotStorage } from '../core/types.js';
+
+/**
+ * In-memory storage (data lost on page refresh)
+ */
+export class MemoryStorage implements ChatbotStorage {
+  private store: Map<string, any> = new Map();
+
+  async save(key: string, data: any): Promise<void> {
+    this.store.set(key, JSON.parse(JSON.stringify(data))); // Deep clone
+  }
+
+  async load(key: string): Promise<any> {
+    const data = this.store.get(key);
+    return data ? JSON.parse(JSON.stringify(data)) : null; // Deep clone
+  }
+
+  async remove(key: string): Promise<void> {
+    this.store.delete(key);
+  }
+
+  async clear(): Promise<void> {
+    this.store.clear();
+  }
+
+  async has(key: string): Promise<boolean> {
+    return this.store.has(key);
+  }
+}
+
+/**
+ * LocalStorage-based storage (persists across page refreshes)
+ */
+export class LocalStorageAdapter implements ChatbotStorage {
+  async save(key: string, data: any): Promise<void> {
+    try {
+      localStorage.setItem(key, JSON.stringify(data));
+    } catch (error) {
+      console.error('[LocalStorage] Save error:', error);
+      throw new Error(`Failed to save to localStorage: ${error}`);
+    }
+  }
+
+  async load(key: string): Promise<any> {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : null;
+    } catch (error) {
+      console.error('[LocalStorage] Load error:', error);
+      return null;
+    }
+  }
+
+  async remove(key: string): Promise<void> {
+    localStorage.removeItem(key);
+  }
+
+  async clear(): Promise<void> {
+    // Only clear chatbot-related keys
+    const keys = Object.keys(localStorage);
+    keys.filter(k => k.startsWith('chatbot-')).forEach(k => {
+      localStorage.removeItem(k);
+    });
+  }
+
+  async has(key: string): Promise<boolean> {
+    return localStorage.getItem(key) !== null;
+  }
+}
+
+/**
+ * IndexedDB storage (for larger data, better performance)
+ */
+export class IndexedDBStorage implements ChatbotStorage {
+  private dbName: string;
+  private storeName: string;
+  private db?: IDBDatabase;
+
+  constructor(dbName: string = 'chatbot-db', storeName: string = 'chatbot-store') {
+    this.dbName = dbName;
+    this.storeName = storeName;
+  }
+
+  private async getDB(): Promise<IDBDatabase> {
+    if (this.db) return this.db;
+
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, 1);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(this.db);
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result;
+        if (!db.objectStoreNames.contains(this.storeName)) {
+          db.createObjectStore(this.storeName);
+        }
+      };
+    });
+  }
+
+  async save(key: string, data: any): Promise<void> {
+    const db = await this.getDB();
+    
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readwrite');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.put(data, key);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  }
+
+  async load(key: string): Promise<any> {
+    const db = await this.getDB();
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readonly');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.get(key);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result || null);
+    });
+  }
+
+  async remove(key: string): Promise<void> {
+    const db = await this.getDB();
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readwrite');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.delete(key);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  }
+
+  async clear(): Promise<void> {
+    const db = await this.getDB();
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([this.storeName], 'readwrite');
+      const store = transaction.objectStore(this.storeName);
+      const request = store.clear();
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve();
+    });
+  }
+
+  async has(key: string): Promise<boolean> {
+    const data = await this.load(key);
+    return data !== null;
+  }
+}

package/components/ui/nuraly-ui/src/components/chatbot/templates/chatbot-main.template.ts

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { nothing, html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import {
+  renderMessages,
+  renderBotTypingIndicator,
+  MessageTemplateHandlers
+} from './message.template.js';
+import {
+  renderSuggestions,
+  SuggestionTemplateHandlers
+} from './suggestion.template.js';
+import {
+  renderInputBox,
+  InputBoxTemplateData,
+  InputBoxTemplateHandlers
+} from './input-box.template.js';
+import {
+  renderThreadSidebar,
+  ThreadSidebarTemplateData,
+  ThreadSidebarTemplateHandlers
+} from './thread-sidebar.template.js';
+import {
+  renderFileUploadArea,
+  FileUploadAreaTemplateHandlers
+} from './file-upload-area.template.js';
+import {
+  renderUrlModal,
+  UrlModalTemplateData,
+  UrlModalTemplateHandlers
+} from './url-modal.template.js';
+import { ChatbotMessage, ChatbotSuggestion, ChatbotLoadingType } from '../chatbot.types.js';
+
+export interface ChatbotMainTemplateData {
+  // Display mode
+  boxed?: boolean;
+  
+  // Messages
+  messages: ChatbotMessage[];
+  isTyping: boolean;
+  loadingIndicator?: ChatbotLoadingType;
+  loadingText?: string;
+  
+  // Suggestions
+  chatStarted: boolean;
+  suggestions: ChatbotSuggestion[];
+  
+  // Input box
+  inputBox: InputBoxTemplateData;
+  
+  // Thread sidebar
+  enableThreads: boolean;
+  enableThreadCreation: boolean;
+  isThreadSidebarOpen: boolean;
+  threadSidebar?: ThreadSidebarTemplateData;
+  
+  // File upload area
+  isDragging: boolean;
+  
+  // URL modal
+  urlModal?: UrlModalTemplateData;
+}
+
+export interface ChatbotMainTemplateHandlers {
+  message: MessageTemplateHandlers;
+  suggestion: SuggestionTemplateHandlers;
+  inputBox: InputBoxTemplateHandlers;
+  threadSidebar?: ThreadSidebarTemplateHandlers;
+  fileUploadArea: FileUploadAreaTemplateHandlers;
+  urlModal?: UrlModalTemplateHandlers;
+  onToggleThreadSidebar?: () => void;
+}
+
+/**
+ * Main chatbot template that orchestrates all sub-templates
+ */
+export function renderChatbotMain(
+  data: ChatbotMainTemplateData,
+  handlers: ChatbotMainTemplateHandlers
+): TemplateResult {
+  return html`
+    <div class="chatbot-container ${classMap({
+      'chatbot-container--with-sidebar': data.enableThreads && data.isThreadSidebarOpen
+    })}" part="container">
+      
+      ${data.enableThreads && data.isThreadSidebarOpen && data.threadSidebar && handlers.threadSidebar
+        ? renderThreadSidebar(data.threadSidebar, handlers.threadSidebar)
+        : ''}
+      
+      <div class="chatbot-main" part="main">
+        ${data.enableThreads ? html`
+          <div class="chatbot-header" part="chatbot-header">
+            <nr-button
+              type="text"
+              size="small"
+              .icon=${['bars']}
+              @click=${handlers.onToggleThreadSidebar}
+              title="${msg(data.isThreadSidebarOpen ? 'Hide threads' : 'Show threads')}"
+              aria-label="${msg(data.isThreadSidebarOpen ? 'Hide threads' : 'Show threads')}"
+            ></nr-button>
+            ${data.enableThreadCreation && data.messages.length > 0 ? html`
+              <nr-button
+                type="text"
+                size="small"
+                .icon=${['pencil-alt']}
+                @click=${handlers.threadSidebar?.onCreateNew}
+                title="${msg('New conversation')}"
+                aria-label="${msg('New conversation')}"
+              ></nr-button>
+            ` : ''}
+          </div>
+        ` : ''}
+        
+        <slot name="header"></slot>
+        
+        <div class="chatbot-content" part="content">
+          ${renderMessages(
+            data.messages,
+            renderSuggestions(data.chatStarted, data.suggestions, handlers.suggestion),
+            data.isTyping 
+              ? renderBotTypingIndicator(
+                  data.isTyping, 
+                  data.loadingIndicator || ChatbotLoadingType.Spinner
+                )
+              : nothing,
+            handlers.message
+          )}
+          
+          <slot name="messages"></slot>
+        </div>
+        
+        ${renderInputBox(data.inputBox, handlers.inputBox)}
+        
+        <slot name="footer"></slot>
+      </div>
+      
+      ${data.isDragging 
+        ? renderFileUploadArea(
+            { isDragging: data.isDragging },
+            handlers.fileUploadArea
+          )
+        : ''}
+      
+      ${data.urlModal && handlers.urlModal
+        ? renderUrlModal(data.urlModal, handlers.urlModal)
+        : ''}
+      
+      <slot></slot>
+    </div>
+  `;
+}