@libreapps/react 1.1.1

package/src/hooks/useMessage.ts

@@ -0,0 +1,105 @@
+"use client"
+
+import { useState, useCallback, useRef } from 'react'
+import { useLibreApps } from '../components/LibreAppsProvider'
+import type { Message } from '../components/LibreAppsProvider'
+
+export interface UseMessageOptions {
+  threadId?: string
+  onSuccess?: (message: Message) => void
+  onError?: (error: Error) => void
+  autoRetry?: boolean
+  maxRetries?: number
+  retryDelay?: number
+}
+
+export interface UseMessageReturn {
+  sendMessage: (content: string) => Promise<Message>
+  sendMessageWithAttachments: (content: string, attachments: File[]) => Promise<Message>
+  isLoading: boolean
+  error: Error | null
+  lastMessage: Message | null
+  clearError: () => void
+  retry: () => Promise<void>
+}
+
+export function useMessage(options: UseMessageOptions = {}): UseMessageReturn {
+  const {
+    threadId,
+    onSuccess,
+    onError,
+    autoRetry = false,
+    maxRetries = 3,
+    retryDelay = 1000
+  } = options
+  
+  const { sendMessage: sendToAPI, activeThreadId } = useLibreApps()
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const [lastMessage, setLastMessage] = useState<Message | null>(null)
+  const lastContentRef = useRef<string>('')
+  const retryCountRef = useRef(0)
+  
+  const sendMessage = useCallback(async (content: string): Promise<Message> => {
+    setIsLoading(true)
+    setError(null)
+    lastContentRef.current = content
+    retryCountRef.current = 0
+    
+    try {
+      const targetThread = threadId || activeThreadId
+      if (!targetThread) {
+        throw new Error('No thread available')
+      }
+      
+      const message = await sendToAPI(content, targetThread)
+      setLastMessage(message)
+      onSuccess?.(message)
+      return message
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to send message')
+      setError(error)
+      onError?.(error)
+      
+      if (autoRetry && retryCountRef.current < maxRetries) {
+        retryCountRef.current++
+        setTimeout(() => retry(), retryDelay * retryCountRef.current)
+      }
+      
+      throw error
+    } finally {
+      setIsLoading(false)
+    }
+  }, [sendToAPI, threadId, activeThreadId, onSuccess, onError, autoRetry, maxRetries, retryDelay])
+  
+  const sendMessageWithAttachments = useCallback(async (
+    content: string, 
+    attachments: File[]
+  ): Promise<Message> => {
+    // TODO: Implement file upload and attachment handling
+    // For now, we'll just append file names to the content
+    const attachmentInfo = attachments.map(f => `[Attached: ${f.name}]`).join(' ')
+    const enrichedContent = `${content}\n${attachmentInfo}`
+    return sendMessage(enrichedContent)
+  }, [sendMessage])
+  
+  const clearError = useCallback(() => {
+    setError(null)
+  }, [])
+  
+  const retry = useCallback(async () => {
+    if (lastContentRef.current) {
+      await sendMessage(lastContentRef.current)
+    }
+  }, [sendMessage])
+  
+  return {
+    sendMessage,
+    sendMessageWithAttachments,
+    isLoading,
+    error,
+    lastMessage,
+    clearError,
+    retry
+  }
+}

package/src/hooks/useStreaming.ts

@@ -0,0 +1,161 @@
+"use client"
+
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { useLibreApps } from '../components/LibreAppsProvider'
+import type { Message } from '../components/LibreAppsProvider'
+
+export interface UseStreamingOptions {
+  threadId?: string
+  onChunk?: (chunk: string) => void
+  onComplete?: (message: Message) => 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 // 0-100
+}
+
+export function useStreaming(options: UseStreamingOptions = {}): UseStreamingReturn {
+  const {
+    threadId,
+    onChunk,
+    onComplete,
+    onError,
+    bufferSize = 1,
+    throttleMs = 0
+  } = options
+  
+  const { streamMessage: streamFromAPI, activeThreadId, isStreaming: globalStreaming } = useLibreApps()
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [currentMessage, setCurrentMessage] = useState('')
+  const [error, setError] = useState<Error | null>(null)
+  const [progress, setProgress] = useState(0)
+  const abortControllerRef = useRef<AbortController | null>(null)
+  const bufferRef = useRef<string[]>([])
+  const lastUpdateRef = useRef<number>(Date.now())
+  
+  const streamMessage = useCallback(async (content: string): Promise<void> => {
+    setIsStreaming(true)
+    setError(null)
+    setCurrentMessage('')
+    setProgress(0)
+    bufferRef.current = []
+    
+    // Create abort controller
+    abortControllerRef.current = new AbortController()
+    
+    try {
+      const targetThread = threadId || activeThreadId
+      if (!targetThread) {
+        throw new Error('No thread available')
+      }
+      
+      const stream = streamFromAPI(content, targetThread)
+      let totalChunks = 0
+      let estimatedTotal = 100 // Start with estimate, will adjust
+      
+      for await (const message of stream) {
+        if (abortControllerRef.current?.signal.aborted) {
+          break
+        }
+        
+        totalChunks++
+        
+        // Extract string content from message
+        const chunk = typeof message.content === 'string' ? message.content : ''
+        
+        // Buffer management
+        bufferRef.current.push(chunk)
+        
+        // Throttling
+        const now = Date.now()
+        const shouldUpdate = (
+          bufferRef.current.length >= bufferSize ||
+          (throttleMs > 0 && now - lastUpdateRef.current >= throttleMs)
+        )
+        
+        if (shouldUpdate) {
+          const bufferedContent = bufferRef.current.join('')
+          setCurrentMessage(prev => prev + bufferedContent)
+          onChunk?.(bufferedContent)
+          bufferRef.current = []
+          lastUpdateRef.current = now
+        }
+        
+        // Update progress (estimate based on typical response length)
+        const estimatedProgress = Math.min(95, (totalChunks / estimatedTotal) * 100)
+        setProgress(estimatedProgress)
+        
+        // Adjust estimate based on response speed
+        if (totalChunks > 10 && totalChunks % 10 === 0) {
+          estimatedTotal = Math.max(estimatedTotal, totalChunks * 1.5)
+        }
+      }
+      
+      // Flush remaining buffer
+      if (bufferRef.current.length > 0) {
+        const remainingContent = bufferRef.current.join('')
+        setCurrentMessage(prev => prev + remainingContent)
+        onChunk?.(remainingContent)
+        bufferRef.current = []
+      }
+      
+      setProgress(100)
+      
+      // Create complete message
+      const completeMessage: Message = {
+        id: `stream-${Date.now()}`,
+        role: 'assistant',
+        content: currentMessage,
+        timestamp: new Date(),
+        threadId: targetThread
+      }
+      
+      onComplete?.(completeMessage)
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Streaming failed')
+      setError(error)
+      onError?.(error)
+    } finally {
+      setIsStreaming(false)
+      abortControllerRef.current = null
+    }
+  }, [streamFromAPI, threadId, activeThreadId, onChunk, onComplete, onError, bufferSize, throttleMs, currentMessage])
+  
+  const stopStreaming = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort()
+      setIsStreaming(false)
+    }
+  }, [])
+  
+  const clearMessage = useCallback(() => {
+    setCurrentMessage('')
+    setProgress(0)
+  }, [])
+  
+  // Sync with global streaming state
+  useEffect(() => {
+    if (!globalStreaming && isStreaming) {
+      setIsStreaming(false)
+    }
+  }, [globalStreaming, isStreaming])
+  
+  return {
+    streamMessage,
+    isStreaming,
+    currentMessage,
+    error,
+    stopStreaming,
+    clearMessage,
+    progress
+  }
+}

package/src/index.ts

@@ -0,0 +1,40 @@
+// @libreapps/react - React package for building AI-powered applications
+// with generative UI and natural language interactions
+
+// Core Provider and Context
+export { 
+  LibreAppsProvider, 
+  useLibreApps,
+  type LibreAppsProviderProps,
+  type LibreAppsContextValue,
+  type LibreAppsComponent,
+  type LibreAppsTool,
+  type Message,
+  type Thread,
+  type ToolCall
+} from './components/LibreAppsProvider'
+
+// Hooks
+export { useMessage, type UseMessageOptions, type UseMessageReturn } from './hooks/useMessage'
+export { useStreaming, type UseStreamingOptions, type UseStreamingReturn } from './hooks/useStreaming'
+// TODO: Implement the following hooks
+// export { useThread } from './hooks/useThread'
+// export { useComponent } from './hooks/useComponent'
+// export { useTool } from './hooks/useTool'
+// export { useSuggestions } from './hooks/useSuggestions'
+// export { useModelConfig } from './hooks/useModelConfig'
+// export { useMCP } from './hooks/useMCP'
+// export { useGenerativeUI } from './hooks/useGenerativeUI'
+// export { useAuth } from './hooks/useAuth'
+// export { useAttachments } from './hooks/useAttachments'
+
+// Utilities
+export { cn } from './utils/cn'
+export { generateId } from './utils/id'
+export { parseStream } from './utils/stream'
+
+// Types
+export * from './types'
+
+// Version
+export const VERSION = '1.0.0'

package/src/types/index.ts

@@ -0,0 +1,25 @@
+// Re-export all types from hooks
+export * from '../hooks/types'
+
+// Additional common types
+export interface Suggestion {
+  id: string
+  text: string
+  metadata?: Record<string, any>
+}
+
+export interface Model {
+  id: string
+  name: string
+  description: string
+  parameters?: Record<string, any>
+}
+
+export interface Attachment {
+  id: string
+  name: string
+  size: number
+  type: string
+  url?: string
+  file?: File
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/utils/id.ts

@@ -0,0 +1,6 @@
+import { nanoid } from 'nanoid'
+
+export function generateId(prefix?: string): string {
+  const id = nanoid()
+  return prefix ? `${prefix}-${id}` : id
+}

package/src/utils/stream.ts

@@ -0,0 +1,33 @@
+export async function parseStream(stream: ReadableStream<Uint8Array>) {
+  const reader = stream.getReader()
+  const decoder = new TextDecoder()
+  const chunks: string[] = []
+  
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    
+    const chunk = decoder.decode(value)
+    chunks.push(chunk)
+  }
+  
+  return chunks.join('')
+}
+
+export function* streamToGenerator<T>(stream: ReadableStream<T>) {
+  const reader = stream.getReader()
+  
+  async function* generator() {
+    try {
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        yield value
+      }
+    } finally {
+      reader.releaseLock()
+    }
+  }
+  
+  return generator()
+}