@libreapps/react 1.1.1

package/src/components/LibreAppsProvider.tsx

@@ -0,0 +1,508 @@
+"use client"
+
+import React, { createContext, useContext, useCallback, useEffect, useMemo, useState } from 'react'
+import { nanoid } from 'nanoid'
+import { z } from 'zod'
+
+// Types
+export interface LibreAppsComponent {
+  name: string
+  component: React.ComponentType<any>
+  description?: string
+  parameters?: z.ZodType<any>
+  generateUI?: (params: any) => React.ReactElement
+}
+
+export interface LibreAppsTool {
+  name: string
+  description: string
+  parameters: z.ZodType<any>
+  execute: (params: any) => Promise<any>
+}
+
+export interface Message {
+  id: string
+  role: 'user' | 'assistant' | 'system' | 'tool'
+  content: string | React.ReactElement
+  timestamp: Date
+  threadId: string
+  toolCalls?: ToolCall[]
+  metadata?: Record<string, any>
+}
+
+export interface ToolCall {
+  id: string
+  name: string
+  arguments: any
+  result?: any
+  status: 'pending' | 'running' | 'completed' | 'failed'
+}
+
+export interface Thread {
+  id: string
+  messages: Message[]
+  createdAt: Date
+  updatedAt: Date
+  metadata?: Record<string, any>
+}
+
+export interface LibreAppsContextValue {
+  // Configuration
+  apiKey?: string
+  apiUrl?: string
+  model?: string
+  
+  // Components & Tools
+  components: Map<string, LibreAppsComponent>
+  tools: Map<string, LibreAppsTool>
+  
+  // Thread Management
+  threads: Map<string, Thread>
+  activeThreadId?: string
+  
+  // Message Operations
+  sendMessage: (content: string, threadId?: string) => Promise<Message>
+  streamMessage: (content: string, threadId?: string) => AsyncGenerator<Message>
+  
+  // Thread Operations
+  createThread: (metadata?: Record<string, any>) => Thread
+  switchThread: (threadId: string) => void
+  deleteThread: (threadId: string) => void
+  
+  // Component Operations
+  registerComponent: (component: LibreAppsComponent) => void
+  unregisterComponent: (name: string) => void
+  renderComponent: (name: string, props: any) => React.ReactElement | null
+  
+  // Tool Operations
+  registerTool: (tool: LibreAppsTool) => void
+  unregisterTool: (name: string) => void
+  executeTool: (name: string, params: any) => Promise<any>
+  
+  // State Management
+  isStreaming: boolean
+  responseStage?: 'thinking' | 'generating' | 'tool-calling' | 'completed'
+  error?: Error
+}
+
+const LibreAppsContext = createContext<LibreAppsContextValue | undefined>(undefined)
+
+export interface LibreAppsProviderProps {
+  children: React.ReactNode
+  apiKey?: string
+  apiUrl?: string
+  model?: string
+  components?: LibreAppsComponent[]
+  tools?: LibreAppsTool[]
+  initialMessages?: Message[]
+  onMessage?: (message: Message) => void
+  onError?: (error: Error) => void
+  enableStreaming?: boolean
+  enableMCP?: boolean
+  mcpServers?: string[]
+}
+
+export function LibreAppsProvider({
+  children,
+  apiKey,
+  apiUrl = 'https://api.libreapps.com/v1',
+  model = 'gpt-4-turbo-preview',
+  components: initialComponents = [],
+  tools: initialTools = [],
+  initialMessages = [],
+  onMessage,
+  onError,
+  enableStreaming = true,
+  // @ts-expect-error - MCP integration coming soon
+  enableMCP = false, // eslint-disable-line @typescript-eslint/no-unused-vars
+  // @ts-expect-error - MCP server support coming soon
+  mcpServers = [] // eslint-disable-line @typescript-eslint/no-unused-vars
+}: LibreAppsProviderProps) {
+  // State
+  const [components] = useState(() => new Map(initialComponents.map(c => [c.name, c])))
+  const [tools] = useState(() => new Map(initialTools.map(t => [t.name, t])))
+  const [threads, setThreads] = useState<Map<string, Thread>>(new Map())
+  const [activeThreadId, setActiveThreadId] = useState<string>()
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [responseStage, setResponseStage] = useState<LibreAppsContextValue['responseStage']>()
+  const [error, setError] = useState<Error>()
+  
+  // Initialize default thread
+  useEffect(() => {
+    const defaultThread = createThread({ name: 'default' })
+    if (initialMessages.length > 0) {
+      defaultThread.messages = initialMessages
+    }
+    setActiveThreadId(defaultThread.id)
+  }, [])
+  
+  // Thread Operations
+  const createThread = useCallback((metadata?: Record<string, any>): Thread => {
+    const thread: Thread = {
+      id: nanoid(),
+      messages: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      metadata
+    }
+    setThreads(prev => new Map(prev).set(thread.id, thread))
+    return thread
+  }, [])
+  
+  const switchThread = useCallback((threadId: string) => {
+    if (threads.has(threadId)) {
+      setActiveThreadId(threadId)
+    } else {
+      throw new Error(`Thread ${threadId} not found`)
+    }
+  }, [threads])
+  
+  const deleteThread = useCallback((threadId: string) => {
+    setThreads(prev => {
+      const next = new Map(prev)
+      next.delete(threadId)
+      return next
+    })
+    if (activeThreadId === threadId) {
+      const remainingThreads = Array.from(threads.keys()).filter(id => id !== threadId)
+      setActiveThreadId(remainingThreads[0])
+    }
+  }, [activeThreadId, threads])
+  
+  // Message Operations
+  const sendMessage = useCallback(async (content: string, threadId?: string): Promise<Message> => {
+    const targetThreadId = threadId || activeThreadId
+    if (!targetThreadId) {
+      throw new Error('No active thread')
+    }
+    
+    const thread = threads.get(targetThreadId)
+    if (!thread) {
+      throw new Error(`Thread ${targetThreadId} not found`)
+    }
+    
+    // Create user message
+    const userMessage: Message = {
+      id: nanoid(),
+      role: 'user',
+      content,
+      timestamp: new Date(),
+      threadId: targetThreadId
+    }
+    
+    // Add to thread
+    thread.messages.push(userMessage)
+    thread.updatedAt = new Date()
+    setThreads(new Map(threads))
+    
+    // Notify callback
+    onMessage?.(userMessage)
+    
+    // Send to API
+    setIsStreaming(true)
+    setResponseStage('thinking')
+    
+    try {
+      const response = await fetch(`${apiUrl}/chat/completions`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          model,
+          messages: thread.messages.map(m => ({
+            role: m.role,
+            content: typeof m.content === 'string' ? m.content : 'Component rendered'
+          })),
+          tools: Array.from(tools.values()).map(t => ({
+            type: 'function',
+            function: {
+              name: t.name,
+              description: t.description,
+              parameters: t.parameters
+            }
+          })),
+          stream: enableStreaming
+        })
+      })
+      
+      if (!response.ok) {
+        throw new Error(`API error: ${response.statusText}`)
+      }
+      
+      setResponseStage('generating')
+      
+      // Handle response
+      const data = await response.json()
+      const assistantMessage: Message = {
+        id: nanoid(),
+        role: 'assistant',
+        content: data.choices[0].message.content,
+        timestamp: new Date(),
+        threadId: targetThreadId
+      }
+      
+      // Handle tool calls
+      if (data.choices[0].message.tool_calls) {
+        setResponseStage('tool-calling')
+        assistantMessage.toolCalls = await Promise.all(
+          data.choices[0].message.tool_calls.map(async (call: any) => {
+            const tool = tools.get(call.function.name)
+            if (!tool) {
+              return {
+                id: call.id,
+                name: call.function.name,
+                arguments: call.function.arguments,
+                status: 'failed',
+                result: `Tool ${call.function.name} not found`
+              }
+            }
+            
+            try {
+              const result = await tool.execute(JSON.parse(call.function.arguments))
+              return {
+                id: call.id,
+                name: call.function.name,
+                arguments: call.function.arguments,
+                status: 'completed',
+                result
+              }
+            } catch (error) {
+              return {
+                id: call.id,
+                name: call.function.name,
+                arguments: call.function.arguments,
+                status: 'failed',
+                result: error instanceof Error ? error.message : 'Unknown error'
+              }
+            }
+          })
+        )
+      }
+      
+      // Add assistant message
+      thread.messages.push(assistantMessage)
+      thread.updatedAt = new Date()
+      setThreads(new Map(threads))
+      
+      // Notify callback
+      onMessage?.(assistantMessage)
+      
+      setResponseStage('completed')
+      return assistantMessage
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Unknown error')
+      setError(error)
+      onError?.(error)
+      throw error
+    } finally {
+      setIsStreaming(false)
+      setResponseStage(undefined)
+    }
+  }, [apiKey, apiUrl, model, activeThreadId, threads, tools, onMessage, onError, enableStreaming])
+  
+  // Streaming Message Operation
+  const streamMessage = useCallback(async function* (
+    content: string, 
+    threadId?: string
+  ): AsyncGenerator<Message> {
+    const targetThreadId = threadId || activeThreadId
+    if (!targetThreadId) {
+      throw new Error('No active thread')
+    }
+    
+    const thread = threads.get(targetThreadId)
+    if (!thread) {
+      throw new Error(`Thread ${targetThreadId} not found`)
+    }
+    
+    // Create user message
+    const userMessage: Message = {
+      id: nanoid(),
+      role: 'user',
+      content,
+      timestamp: new Date(),
+      threadId: targetThreadId
+    }
+    
+    thread.messages.push(userMessage)
+    yield userMessage
+    
+    // Stream from API
+    setIsStreaming(true)
+    setResponseStage('thinking')
+    
+    try {
+      const response = await fetch(`${apiUrl}/chat/completions`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${apiKey}`
+        },
+        body: JSON.stringify({
+          model,
+          messages: thread.messages.map(m => ({
+            role: m.role,
+            content: typeof m.content === 'string' ? m.content : 'Component rendered'
+          })),
+          stream: true
+        })
+      })
+      
+      if (!response.ok) {
+        throw new Error(`API error: ${response.statusText}`)
+      }
+      
+      setResponseStage('generating')
+      
+      const reader = response.body?.getReader()
+      if (!reader) {
+        throw new Error('No response body')
+      }
+      
+      const decoder = new TextDecoder()
+      let assistantMessage: Message = {
+        id: nanoid(),
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        threadId: targetThreadId
+      }
+      
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        
+        const chunk = decoder.decode(value)
+        const lines = chunk.split('\n').filter(line => line.trim() !== '')
+        
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6)
+            if (data === '[DONE]') continue
+            
+            try {
+              const parsed = JSON.parse(data)
+              if (parsed.choices?.[0]?.delta?.content) {
+                assistantMessage.content += parsed.choices[0].delta.content
+                yield { ...assistantMessage }
+              }
+            } catch (e) {
+              console.error('Error parsing SSE data:', e)
+            }
+          }
+        }
+      }
+      
+      thread.messages.push(assistantMessage)
+      thread.updatedAt = new Date()
+      setThreads(new Map(threads))
+      
+      setResponseStage('completed')
+    } finally {
+      setIsStreaming(false)
+      setResponseStage(undefined)
+    }
+  }, [apiKey, apiUrl, model, activeThreadId, threads])
+  
+  // Component Operations
+  const registerComponent = useCallback((component: LibreAppsComponent) => {
+    components.set(component.name, component)
+  }, [components])
+  
+  const unregisterComponent = useCallback((name: string) => {
+    components.delete(name)
+  }, [components])
+  
+  const renderComponent = useCallback((name: string, props: any): React.ReactElement | null => {
+    const component = components.get(name)
+    if (!component) return null
+    
+    if (component.generateUI) {
+      return component.generateUI(props)
+    }
+    
+    const Component = component.component
+    return <Component {...props} />
+  }, [components])
+  
+  // Tool Operations
+  const registerTool = useCallback((tool: LibreAppsTool) => {
+    tools.set(tool.name, tool)
+  }, [tools])
+  
+  const unregisterTool = useCallback((name: string) => {
+    tools.delete(name)
+  }, [tools])
+  
+  const executeTool = useCallback(async (name: string, params: any): Promise<any> => {
+    const tool = tools.get(name)
+    if (!tool) {
+      throw new Error(`Tool ${name} not found`)
+    }
+    return tool.execute(params)
+  }, [tools])
+  
+  // Context value
+  const contextValue = useMemo<LibreAppsContextValue>(() => ({
+    apiKey,
+    apiUrl,
+    model,
+    components,
+    tools,
+    threads,
+    activeThreadId,
+    sendMessage,
+    streamMessage,
+    createThread,
+    switchThread,
+    deleteThread,
+    registerComponent,
+    unregisterComponent,
+    renderComponent,
+    registerTool,
+    unregisterTool,
+    executeTool,
+    isStreaming,
+    responseStage,
+    error
+  }), [
+    apiKey,
+    apiUrl,
+    model,
+    components,
+    tools,
+    threads,
+    activeThreadId,
+    sendMessage,
+    streamMessage,
+    createThread,
+    switchThread,
+    deleteThread,
+    registerComponent,
+    unregisterComponent,
+    renderComponent,
+    registerTool,
+    unregisterTool,
+    executeTool,
+    isStreaming,
+    responseStage,
+    error
+  ])
+  
+  return (
+    <LibreAppsContext.Provider value={contextValue}>
+      {children}
+    </LibreAppsContext.Provider>
+  )
+}
+
+// Hook to use LibreApps context
+export function useLibreApps() {
+  const context = useContext(LibreAppsContext)
+  if (!context) {
+    throw new Error('useLibreApps must be used within LibreAppsProvider')
+  }
+  return context
+}

package/src/hooks/index.ts

@@ -0,0 +1,39 @@
+// Core LibreApps hooks for AI interactions
+export { useLibreApps } from '../components/LibreAppsProvider'
+export { useMessage } from './useMessage'
+// export { useThread } from './useThread'
+// export { useComponent } from './useComponent'
+// export { useTool } from './useTool'
+export { useStreaming } from './useStreaming'
+// export { useSuggestions } from './useSuggestions'
+// export { useModelConfig } from './useModelConfig'
+// export { useMCP } from './useMCP'
+// export { useGenerativeUI } from './useGenerativeUI'
+// export { useAuth } from './useAuth'
+// export { useAttachments } from './useAttachments'
+
+// Type exports
+export type {
+  UseMessageOptions,
+  UseMessageReturn,
+  // UseThreadOptions,
+  // UseThreadReturn,
+  // UseComponentOptions,
+  // UseComponentReturn,
+  // UseToolOptions,
+  // UseToolReturn,
+  UseStreamingOptions,
+  UseStreamingReturn,
+  // UseSuggestionsOptions,
+  // UseSuggestionsReturn,
+  // UseModelConfigOptions,
+  // UseModelConfigReturn,
+  // UseMCPOptions,
+  // UseMCPReturn,
+  // UseGenerativeUIOptions,
+  // UseGenerativeUIReturn,
+  // UseAuthOptions,
+  // UseAuthReturn,
+  // UseAttachmentsOptions,
+  // UseAttachmentsReturn
+} from './types'

package/src/hooks/types.ts

@@ -0,0 +1,162 @@
+// Hook type definitions
+
+export interface UseMessageOptions {
+  threadId?: string
+  onSuccess?: (message: any) => void
+  onError?: (error: Error) => void
+  autoRetry?: boolean
+  maxRetries?: number
+  retryDelay?: number
+}
+
+export interface UseMessageReturn {
+  sendMessage: (content: string) => Promise<any>
+  sendMessageWithAttachments: (content: string, attachments: File[]) => Promise<any>
+  isLoading: boolean
+  error: Error | null
+  lastMessage: any | null
+  clearError: () => void
+  retry: () => Promise<void>
+}
+
+export interface UseStreamingOptions {
+  threadId?: string
+  onChunk?: (chunk: string) => void
+  onComplete?: (message: any) => void
+  onError?: (error: Error) => void
+  bufferSize?: number
+  throttleMs?: number
+}
+
+export interface UseStreamingReturn {
+  streamMessage: (content: string) => Promise<void>
+  isStreaming: boolean
+  currentMessage: string
+  error: Error | null
+  stopStreaming: () => void
+  clearMessage: () => void
+  progress: number
+}
+
+export interface UseThreadOptions {
+  maxThreads?: number
+  autoArchive?: boolean
+}
+
+export interface UseThreadReturn {
+  threads: Map<string, any>
+  activeThread: any | undefined
+  createThread: (metadata?: Record<string, any>) => any
+  switchThread: (threadId: string) => void
+  deleteThread: (threadId: string) => void
+  updateThreadMetadata: (threadId: string, metadata: Record<string, any>) => void
+  getThreadMessages: (threadId: string) => any[]
+  clearThread: (threadId: string) => void
+}
+
+export interface UseComponentOptions {
+  lazy?: boolean
+}
+
+export interface UseComponentReturn {
+  registerComponent: (component: any) => void
+  unregisterComponent: (name: string) => void
+  renderComponent: (name: string, props: any) => React.ReactElement | null
+  getComponent: (name: string) => any | undefined
+  hasComponent: (name: string) => boolean
+  listComponents: () => string[]
+}
+
+export interface UseToolOptions {
+  timeout?: number
+}
+
+export interface UseToolReturn {
+  executeTool: (name: string, params: any) => Promise<any>
+  registerTool: (tool: any) => void
+  unregisterTool: (name: string) => void
+  isExecuting: boolean
+  lastResult: any | null
+  error: Error | null
+}
+
+export interface UseSuggestionsOptions {
+  maxSuggestions?: number
+  autoRefresh?: boolean
+  refreshInterval?: number
+}
+
+export interface UseSuggestionsReturn {
+  suggestions: any[]
+  getSuggestions: (options?: any) => Promise<void>
+  acceptSuggestion: (suggestion: any) => void
+  dismissSuggestion: (id: string) => void
+  isLoading: boolean
+}
+
+export interface UseModelConfigOptions {
+  defaultModel?: string
+}
+
+export interface UseModelConfigReturn {
+  currentModel: string
+  availableModels: any[]
+  switchModel: (modelId: string) => void
+  updateParameters: (params: any) => void
+  resetToDefaults: () => void
+}
+
+export interface UseMCPOptions {
+  autoConnect?: boolean
+}
+
+export interface UseMCPReturn {
+  connectServer: (config: any) => Promise<void>
+  disconnectServer: (id: string) => void
+  connectedServers: any[]
+  executeServerTool: (serverId: string, tool: string, params: any) => Promise<any>
+  getServerResources: (serverId: string) => any[]
+  isConnected: (serverId: string) => boolean
+}
+
+export interface UseGenerativeUIOptions {
+  cacheResults?: boolean
+}
+
+export interface UseGenerativeUIReturn {
+  generateUI: (options: any) => Promise<React.ReactElement>
+  isGenerating: boolean
+  generatedComponents: React.ReactElement[]
+  clearComponents: () => void
+  saveComponent: (name: string, component: React.ReactElement) => void
+}
+
+export interface UseAuthOptions {
+  provider?: string
+}
+
+export interface UseAuthReturn {
+  user: any | null
+  isAuthenticated: boolean
+  isLoading: boolean
+  signIn: (options?: any) => Promise<void>
+  signOut: () => Promise<void>
+  getToken: () => Promise<string | null>
+  refreshToken: () => Promise<void>
+}
+
+export interface UseAttachmentsOptions {
+  maxSize?: number
+  allowedTypes?: string[]
+  autoUpload?: boolean
+}
+
+export interface UseAttachmentsReturn {
+  attachments: any[]
+  addAttachment: (file: File) => Promise<any>
+  removeAttachment: (id: string) => void
+  clearAttachments: () => void
+  uploadAttachment: (attachment: any) => Promise<void>
+  isUploading: boolean
+  uploadProgress: number
+}