@libreapps/react 1.1.1

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@libreapps/react",
+  "version": "1.1.1",
+  "description": "React package for building AI-powered applications with generative UI",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "scope": "@libreapps"
+  },
+  "author": "LibreApps Contributors",
+  "license": "BSD-3-Clause",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/libre-apps/UI.git",
+    "directory": "pkg/react"
+  },
+  "keywords": [
+    "ai",
+    "react",
+    "generative-ui",
+    "llm",
+    "chat",
+    "copilot",
+    "libreapps",
+    "mcp",
+    "model-context-protocol"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./tools": {
+      "types": "./dist/tools/index.d.ts",
+      "import": "./dist/tools/index.mjs",
+      "require": "./dist/tools/index.js"
+    },
+    "./mcp": {
+      "types": "./dist/mcp/index.d.ts",
+      "import": "./dist/mcp/index.mjs",
+      "require": "./dist/mcp/index.js"
+    }
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.10.2",
+    "clsx": "^2.1.1",
+    "nanoid": "^5.0.0",
+    "openai": "^4.0.0",
+    "swr": "^2.3.0",
+    "tailwind-merge": "^3.3.1",
+    "zod": "^3.25.0",
+    "zustand": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^20.14.15",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitest/coverage-v8": "^4.0.6",
+    "@vitest/ui": "^4.0.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.6.3",
+    "vitest": "^4.0.6"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/components/LibreAppsProvider.test.tsx

@@ -0,0 +1,346 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { LibreAppsProvider, useLibreApps } from './LibreAppsProvider'
+import { z } from 'zod'
+
+// Mock fetch
+global.fetch = vi.fn()
+
+describe('LibreAppsProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+  
+  it('should provide context to children', () => {
+    const TestComponent = () => {
+      const context = useLibreApps()
+      return <div>Context: {context ? 'Available' : 'Not Available'}</div>
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key">
+        <TestComponent />
+      </LibreAppsProvider>
+    )
+    
+    expect(screen.getByText('Context: Available')).toBeInTheDocument()
+  })
+  
+  it('should throw error when useLibreApps is used outside provider', () => {
+    const TestComponent = () => {
+      const context = useLibreApps()
+      return <div>{context}</div>
+    }
+    
+    // Suppress console.error for this test
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    
+    expect(() => render(<TestComponent />)).toThrow(
+      'useLibreApps must be used within LibreAppsProvider'
+    )
+    
+    spy.mockRestore()
+  })
+  
+  it('should initialize with default thread', async () => {
+    const TestComponent = () => {
+      const { threads, activeThreadId } = useLibreApps()
+      return (
+        <div>
+          <div>Threads: {threads.size}</div>
+          <div>Active: {activeThreadId || 'none'}</div>
+        </div>
+      )
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key">
+        <TestComponent />
+      </LibreAppsProvider>
+    )
+    
+    await waitFor(() => {
+      expect(screen.getByText(/Threads: 1/)).toBeInTheDocument()
+      expect(screen.getByText(/Active: /)).toBeInTheDocument()
+    })
+  })
+  
+  it('should register components', () => {
+    const TestComponent = () => <div>Test Component</div>
+    const components = [
+      {
+        name: 'test',
+        component: TestComponent,
+        description: 'Test component'
+      }
+    ]
+    
+    const ConsumerComponent = () => {
+      const { components: registeredComponents } = useLibreApps()
+      return <div>Components: {registeredComponents.size}</div>
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key" components={components}>
+        <ConsumerComponent />
+      </LibreAppsProvider>
+    )
+    
+    expect(screen.getByText('Components: 1')).toBeInTheDocument()
+  })
+  
+  it('should register tools', () => {
+    const tools = [
+      {
+        name: 'calculator',
+        description: 'Calculate math',
+        parameters: z.object({ expression: z.string() }),
+        execute: async ({ expression }: any) => ({ result: eval(expression) })
+      }
+    ]
+    
+    const ConsumerComponent = () => {
+      const { tools: registeredTools } = useLibreApps()
+      return <div>Tools: {registeredTools.size}</div>
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key" tools={tools}>
+        <ConsumerComponent />
+      </LibreAppsProvider>
+    )
+    
+    expect(screen.getByText('Tools: 1')).toBeInTheDocument()
+  })
+  
+  it('should send message to API', async () => {
+    const mockResponse = {
+      choices: [{
+        message: {
+          content: 'AI response'
+        }
+      }]
+    }
+    
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockResponse
+    })
+    
+    const TestComponent = () => {
+      const { sendMessage } = useLibreApps()
+      const [response, setResponse] = React.useState<any>(null)
+      
+      const handleSend = async () => {
+        const msg = await sendMessage('Hello')
+        setResponse(msg)
+      }
+      
+      return (
+        <div>
+          <button onClick={handleSend}>Send</button>
+          {response && <div>Response: {response.content}</div>}
+        </div>
+      )
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key">
+        <TestComponent />
+      </LibreAppsProvider>
+    )
+    
+    const button = screen.getByText('Send')
+    await userEvent.click(button)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Response: AI response')).toBeInTheDocument()
+    })
+    
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://api.libreapps.com/v1/chat/completions',
+      expect.objectContaining({
+        method: 'POST',
+        headers: expect.objectContaining({
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer test-key'
+        })
+      })
+    )
+  })
+  
+  it('should handle API errors', async () => {
+    ;(global.fetch as any).mockRejectedValueOnce(new Error('Network error'))
+    
+    const onError = vi.fn()
+    
+    const TestComponent = () => {
+      const { sendMessage } = useLibreApps()
+      const [error, setError] = React.useState<any>(null)
+      
+      const handleSend = async () => {
+        try {
+          await sendMessage('Hello')
+        } catch (err) {
+          setError(err)
+        }
+      }
+      
+      return (
+        <div>
+          <button onClick={handleSend}>Send</button>
+          {error && <div>Error: {error.message}</div>}
+        </div>
+      )
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key" onError={onError}>
+        <TestComponent />
+      </LibreAppsProvider>
+    )
+    
+    const button = screen.getByText('Send')
+    await userEvent.click(button)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Error: Network error')).toBeInTheDocument()
+    })
+    
+    expect(onError).toHaveBeenCalledWith(expect.any(Error))
+  })
+  
+  it('should execute tools', async () => {
+    const mockExecute = vi.fn().mockResolvedValue({ result: 42 })
+    
+    const tools = [
+      {
+        name: 'calculator',
+        description: 'Calculate',
+        parameters: z.object({ expression: z.string() }),
+        execute: mockExecute
+      }
+    ]
+    
+    const TestComponent = () => {
+      const { executeTool } = useLibreApps()
+      const [result, setResult] = React.useState<any>(null)
+      
+      const handleExecute = async () => {
+        const res = await executeTool('calculator', { expression: '2+2' })
+        setResult(res)
+      }
+      
+      return (
+        <div>
+          <button onClick={handleExecute}>Execute</button>
+          {result && <div>Result: {result.result}</div>}
+        </div>
+      )
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key" tools={tools}>
+        <TestComponent />
+      </LibreAppsProvider>
+    )
+    
+    const button = screen.getByText('Execute')
+    await userEvent.click(button)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Result: 42')).toBeInTheDocument()
+    })
+    
+    expect(mockExecute).toHaveBeenCalledWith({ expression: '2+2' })
+  })
+  
+  it('should render components dynamically', () => {
+    const CustomComponent = ({ text }: { text: string }) => (
+      <div>Custom: {text}</div>
+    )
+    
+    const components = [
+      {
+        name: 'custom',
+        component: CustomComponent,
+        description: 'Custom component'
+      }
+    ]
+    
+    const TestComponent = () => {
+      const { renderComponent } = useLibreApps()
+      const rendered = renderComponent('custom', { text: 'Hello' })
+      
+      return <div>{rendered}</div>
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key" components={components}>
+        <TestComponent />
+      </LibreAppsProvider>
+    )
+    
+    expect(screen.getByText('Custom: Hello')).toBeInTheDocument()
+  })
+  
+  it('should manage thread operations', async () => {
+    const TestComponent = () => {
+      const { 
+        threads, 
+        createThread, 
+        switchThread, 
+        deleteThread,
+        activeThreadId 
+      } = useLibreApps()
+      
+      const handleCreate = () => {
+        const thread = createThread({ name: 'New Thread' })
+        switchThread(thread.id)
+      }
+      
+      const handleDelete = () => {
+        if (activeThreadId) {
+          deleteThread(activeThreadId)
+        }
+      }
+      
+      return (
+        <div>
+          <div>Thread Count: {threads.size}</div>
+          <button onClick={handleCreate}>Create Thread</button>
+          <button onClick={handleDelete}>Delete Thread</button>
+        </div>
+      )
+    }
+    
+    render(
+      <LibreAppsProvider apiKey="test-key">
+        <TestComponent />
+      </LibreAppsProvider>
+    )
+    
+    // Initially should have 1 thread
+    await waitFor(() => {
+      expect(screen.getByText('Thread Count: 1')).toBeInTheDocument()
+    })
+    
+    // Create a new thread
+    const createButton = screen.getByText('Create Thread')
+    await userEvent.click(createButton)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Thread Count: 2')).toBeInTheDocument()
+    })
+    
+    // Delete current thread
+    const deleteButton = screen.getByText('Delete Thread')
+    await userEvent.click(deleteButton)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Thread Count: 1')).toBeInTheDocument()
+    })
+  })
+})