@fencyai/react 0.1.14 → 0.1.15

package/README.md

@@ -1,202 +1,11 @@
-# @fencyai/react
+# `@fencyai/react`
 
-React components for Fency integration. Provides React hooks and components for easy Fency integration in React applications.
-
-## Installation
-
-```bash
-npm install @fencyai/react
-```
+> TODO: description
 
 ## Usage
 
-### Basic Usage
-
-```jsx
-import { FencyProvider, useFency } from '@fencyai/react';
-import { loadFency } from '@fencyai/js';
-
-// Make sure to call `loadFency` outside of a component's render to avoid
-// recreating the Fency object on every render.
-const fencyPromise = loadFency('pk_test_your_publishable_key_here');
-
-function App() {
-  return (
-    <FencyProvider fency={fencyPromise}>
-      <MyComponent />
-    </FencyProvider>
-  );
-}
-
-function MyComponent() {
-  const { fency, loading, error } = useFency();
-  
-  if (loading) return <div>Loading Fency...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-  
-  return (
-    <div>
-      <p>Fency loaded: {fency.publishableKey}</p>
-      <p>Version: {fency.version}</p>
-    </div>
-  );
-}
 ```
+const react = require('@fencyai/react');
 
-### With Configuration Options
-
-```jsx
-import { ChatCompletionProvider, useChatCompletion } from '@fencyai/react';
-
-function App() {
-  return (
-    <ChatCompletionProvider 
-      publishableKey="pk_test_your_key"
-      options={{
-        config: {
-          apiVersion: '2024-01-01',
-          endpoint: 'https://api.fency.ai'
-        }
-      }}
-    >
-      <ChatComponent />
-    </ChatCompletionProvider>
-  );
-}
-```
-
-### Error Handling
-
-```jsx
-import { ChatCompletionProvider, useChatCompletion } from '@fencyai/react';
-
-function ChatComponent() {
-  const { fency, loading, error, sendMessage } = useChatCompletion();
-  
-  if (loading) return <div>Loading...</div>;
-  if (error) {
-    return (
-      <div>
-        <h3>Failed to load Fency</h3>
-        <p>{error.message}</p>
-      </div>
-    );
-  }
-  
-  return <div>Fency is ready!</div>;
-}
+// TODO: DEMONSTRATE API
 ```
-
-## API Reference
-
-### `ChatCompletionProvider`
-
-React context provider that loads and provides Fency instance for chat completion functionality.
-
-**Props:**
-- `publishableKey` (string): Your Fency publishable key (must start with `pk_`)
-- `options` (object, optional): Configuration options
-  - `config.apiVersion` (string, optional): API version to use (default: `'2024-01-01'`)
-  - `config.endpoint` (string, optional): Custom endpoint URL (default: `'https://api.fency.ai'`)
-
-### `useChatCompletion()`
-
-React hook that provides access to chat completion functionality and Fency instance.
-
-**Returns:** `{ fency, loading, error, sendMessage }`
-- `fency` (FencyInstance | null): The loaded Fency instance
-- `loading` (boolean): Whether Fency is currently loading
-- `error` (Error | null): Any error that occurred during loading
-- `sendMessage` (function): Function to send messages for chat completion
-
-## Development
-
-### Prerequisites
-
-- Node.js 16.0.0 or higher
-- npm
-
-### Versioning
-
-This project follows [Semantic Versioning](https://semver.org/). See [VERSIONING.md](./VERSIONING.md) for detailed guidelines.
-
-**Quick version commands:**
-```bash
-npm run version:patch    # Bug fixes (0.1.0 → 0.1.1)
-npm run version:minor    # New features (0.1.0 → 0.2.0)  
-npm run version:major    # Breaking changes (0.1.0 → 1.0.0)
-```
-
-### Setup
-
-1. Clone the repository:
-```bash
-git clone https://github.com/fencyai/fency-react.git
-cd fency-react
-```
-
-2. Install dependencies:
-```bash
-npm install
-```
-
-3. Start development mode:
-```bash
-npm run dev
-```
-
-### Build
-
-Build the project for production:
-```bash
-npm run build
-```
-
-This will:
-- Compile TypeScript to JavaScript
-- Generate type definitions
-- Bundle and minify the code for browser use
-
-### Publishing
-
-Before publishing, make sure to:
-
-1. Update the version: `npm run version:patch|minor|major`
-2. Update the CHANGELOG.md with your changes
-3. Build the project: `npm run build`
-4. Publish to npm: `npm publish`
-
-**Quick publish commands:**
-```bash
-npm run publish:patch    # Bump patch + publish
-npm run publish:minor    # Bump minor + publish
-npm run publish:major    # Bump major + publish
-```
-
-## Project Structure
-
-```
-fency-react/
-├── src/
-│   └── index.ts          # Main entry point with React components and hooks
-├── dist/                 # Built files (generated)
-├── package.json          # Package configuration
-├── tsconfig.json         # TypeScript configuration
-└── README.md            # This file
-```
-
-## Features
-
-- ✅ React hooks and components for easy integration
-- ✅ TypeScript support with full type definitions
-- ✅ ESM module format for modern browsers
-- ✅ Tree-shakable exports
-- ✅ Minified production builds
-- ✅ Context-based state management
-- ✅ Publishable key validation
-- ✅ Loading and error states
-- ✅ npm package ready
-
-## License
-
-MIT 

package/{dist → lib}/FencyProvider.d.ts

@@ -24,4 +24,3 @@ export interface FencyProviderProps {
     fency: Promise<FencyInstance>;
     children: React.ReactNode;
 }
-//# sourceMappingURL=FencyProvider.d.ts.map

package/{dist → lib}/hooks/useChatCompletion.d.ts

@@ -1,22 +1,30 @@
 import { ChatCompletion } from '@fencyai/js';
+import z, { ZodTypeAny } from 'zod';
 import { ChatCompletionChunk } from './useEventSource';
 interface Completions {
-    chatCompletion: ChatCompletion;
-    streamId: string;
+    chatCompletion: ChatCompletion & {
+        structuredResponse?: any;
+    };
     chunks: ChatCompletionChunk[];
     fullMessage: string;
 }
 interface HookResponse {
     chatCompletions: Completions[];
-    createChatCompletion: (params: {
+    createStreamingChatCompletion: (params: {
         prompt: string;
         model: 'gpt-4o-mini' | 'gpt-4o';
     }) => Promise<{
-        streamId: string;
+        chatCompletionStreamId: string;
         chatCompletionId: string;
     }>;
+    createSynchronousChatCompletion: <T extends ZodTypeAny>(params: {
+        prompt: string;
+        model: 'gpt-4o-mini' | 'gpt-4o';
+        responseFormat?: T;
+    }) => Promise<ChatCompletion & {
+        structuredResponse?: z.infer<T>;
+    }>;
     latestCompletion: Completions | null;
 }
 export declare function useChatCompletion(): HookResponse;
 export {};
-//# sourceMappingURL=useChatCompletion.d.ts.map

package/{dist → lib}/hooks/useChatCompletion.js

@@ -1,6 +1,7 @@
 // hooks/useChatCompletion.ts
 import { createChatCompletion, createChatCompletionStream } from '@fencyai/js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import z from 'zod';
 import { useEventSource } from './useEventSource';
 import { useFency } from './useFency';
 export function useChatCompletion() {
@@ -8,13 +9,15 @@ export function useChatCompletion() {
     const { chunks, setUrl } = useEventSource();
     const [chatCompletions, setChatCompletions] = useState([]);
     const [stream, setStream] = useState(null);
-    const create = useCallback(async (params) => {
+    const createStreamingChatCompletion = useCallback(async (params) => {
         // Step 1: Create stream if not exists
-        const s = await createChatCompletionStream(fency.fency.publishableKey);
+        const s = await createChatCompletionStream({ pk: fency.fency.publishableKey });
         setStream(s);
         // Step 2: Send chat completion
-        const chatCompletion = await createChatCompletion(fency.fency.publishableKey, s.id, {
+        const chatCompletion = await createChatCompletion({
+            pk: fency.fency.publishableKey,
             request: {
+                chatCompletionStreamId: s.chatCompletionStreamId,
                 openai: {
                     model: params.model,
                     messages: [{ role: 'user', content: params.prompt }],
@@ -23,22 +26,43 @@ export function useChatCompletion() {
         });
         setChatCompletions((prev) => [...prev, chatCompletion]);
         return {
-            streamId: s.id,
-            chatCompletionId: s.id,
+            chatCompletionStreamId: s.chatCompletionStreamId,
+            chatCompletionId: chatCompletion.chatCompletionId,
         };
     }, [fency]);
+    const createSynchronousChatCompletion = useCallback(async (params) => {
+        const jsonSchema = params.responseFormat ? z.toJSONSchema(params.responseFormat) : undefined;
+        console.log(jsonSchema);
+        const chatCompletion = await createChatCompletion({
+            pk: fency.fency.publishableKey,
+            request: {
+                openai: {
+                    model: params.model,
+                    responseJsonSchema: jsonSchema ? JSON.stringify(jsonSchema) : undefined,
+                    messages: [{ role: 'user', content: params.prompt }],
+                },
+            },
+        });
+        setChatCompletions((prev) => [...prev, chatCompletion]);
+        if (chatCompletion.responseIsStructured && params.responseFormat && chatCompletion.response) {
+            return {
+                ...chatCompletion,
+                structuredResponse: params.responseFormat.parse(JSON.parse(chatCompletion.response))
+            };
+        }
+        return chatCompletion;
+    }, [fency]);
     const completions = useMemo(() => {
         const completions = [];
         for (const chatCompletion of chatCompletions) {
             const relevantChunks = chunks
-                .filter((chunk) => chunk.chatCompletionId === chatCompletion.id)
+                .filter((chunk) => chunk.chatCompletionId === chatCompletion.chatCompletionId)
                 .sort((a, b) => a.timestamp.localeCompare(b.timestamp));
             const fullMessage = relevantChunks
                 .map((chunk) => chunk.content)
                 .join('');
             completions.push({
                 chatCompletion,
-                streamId: relevantChunks[0].streamId,
                 chunks: relevantChunks,
                 fullMessage,
             });
@@ -50,11 +74,12 @@ export function useChatCompletion() {
     }, [completions]);
     useEffect(() => {
         if (stream) {
-            setUrl(`http://localhost:8080/v1/chat_completion_streams/${stream.id}?pk=${fency.fency.publishableKey}`);
+            setUrl(`http://localhost:8080/v1/pub/chat-completion-streams/${stream.chatCompletionStreamId}?pk=${fency.fency.publishableKey}`);
         }
     }, [stream, fency.fency.publishableKey, setUrl]);
     return {
-        createChatCompletion: create,
+        createStreamingChatCompletion: createStreamingChatCompletion,
+        createSynchronousChatCompletion: createSynchronousChatCompletion,
         chatCompletions: completions,
         latestCompletion,
     };

package/{dist → lib}/hooks/useEventSource.d.ts

@@ -9,4 +9,3 @@ export interface ChatCompletionChunk {
     timestamp: string;
     content: string;
 }
-//# sourceMappingURL=useEventSource.d.ts.map

package/{dist → lib}/hooks/useEventSource.js

@@ -11,6 +11,9 @@ export function useEventSource() {
             if (chunk) {
                 setChunks((prev) => [...prev, chunk]);
             }
+            else {
+                console.warn('Unknown message:', event);
+            }
         };
         eventSource.onerror = (error) => {
             console.error('EventSource error:', error);

package/{dist → lib}/hooks/useFency.d.ts

@@ -3,4 +3,3 @@ import type { FencyContext } from '../FencyProvider';
  * Hook to access Fency instance and loading state
  */
 export declare function useFency(): FencyContext;
-//# sourceMappingURL=useFency.d.ts.map

package/{dist → lib}/index.d.ts

@@ -1,5 +1,4 @@
 export { FencyProvider } from './FencyProvider';
-export { useFency } from './hooks/useFency';
 export { useChatCompletion } from './hooks/useChatCompletion';
+export { useFency } from './hooks/useFency';
 export type { FencyContext, FencyOptions, FencyProviderProps } from './FencyProvider';
-//# sourceMappingURL=index.d.ts.map

package/{dist → lib}/index.js

@@ -1,4 +1,5 @@
 // Re-export components and hooks
 export { FencyProvider } from './FencyProvider';
-export { useFency } from './hooks/useFency';
 export { useChatCompletion } from './hooks/useChatCompletion';
+export { useFency } from './hooks/useFency';
+console.log("hello world");

package/lib/react.d.ts

@@ -0,0 +1,7 @@
+export declare function react(): string;
+export declare function createFormattedMessage(message: string): string;
+export declare function validateUserEmail(email: string): {
+    isValid: boolean;
+    message: string;
+};
+export default react;

package/lib/react.js

@@ -0,0 +1,17 @@
+import { formatMessage, validateEmail } from '@fencyai/js';
+export function react() {
+    return 'Hello from react';
+}
+export function createFormattedMessage(message) {
+    return formatMessage(message, 'React');
+}
+export function validateUserEmail(email) {
+    const isValid = validateEmail(email);
+    return {
+        isValid,
+        message: isValid
+            ? formatMessage('Email is valid!', 'Validation')
+            : formatMessage('Invalid email format', 'Validation')
+    };
+}
+export default react;

package/package.json

@@ -1,69 +1,49 @@
 {
   "name": "@fencyai/react",
-  "version": "0.1.14",
-  "description": "React components for Fency integration",
+  "version": "0.1.15",
+  "description": "> TODO: description",
+  "author": "staklau <steinaageklaussen@gmail.com>",
+  "homepage": "",
+  "license": "MIT",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "main": "lib/react.js",
+  "types": "lib/react.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "import": "./lib/react.js",
+      "types": "./lib/react.d.ts"
     }
   },
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
   "files": [
-    "dist"
+    "lib"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "build": "tsc && node esbuild.config.js",
+    "build": "tsc",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "dev": "tsc --watch",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "npm run clean && npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "version:patch": "npm version patch",
-    "version:minor": "npm version minor",
-    "version:major": "npm version major",
-    "version:prepatch": "npm version prepatch",
-    "version:preminor": "npm version preminor",
-    "version:premajor": "npm version premajor",
-    "version:prerelease": "npm version prerelease",
-    "publish:patch": "npm run version:patch && npm publish --access public",
-    "publish:minor": "npm run version:minor && npm publish --access public",
-    "publish:major": "npm run version:major && npm publish --access public"
+    "prepublishOnly": "npm run build"
   },
-  "keywords": [
-    "fency",
-    "fencyai",
-    "react",
-    "react-hooks",
-    "typescript",
-    "esm",
-    "publishable-key"
-  ],
-  "author": "",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "@fencyai/js": "^0.1.12"
+  "dependencies": {
+    "@fencyai/js": "^0.1.15",
+    "zod": "^4.0.5"
   },
   "devDependencies": {
-    "@types/node": "^20.10.0",
-    "@types/react": "^18.0.0",
-    "esbuild": "^0.19.0",
-    "react": "^18.0.0",
-    "typescript": "^5.3.0"
-  },
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/fencyai/fency-react.git"
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.3.3"
   },
-  "bugs": {
-    "url": "https://github.com/fencyai/fency-react/issues"
-  },
-  "homepage": "https://github.com/fencyai/fency-react#readme"
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  }
 }

package/dist/FencyProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FencyProvider.d.ts","sourceRoot":"","sources":["../src/FencyProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C,eAAO,MAAM,iBAAiB,mDAAqD,CAAC;AAEpF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,kDAiCpE;AAED,MAAM,WAAW,YAAY;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/dist/hooks/useChatCompletion.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useChatCompletion.d.ts","sourceRoot":"","sources":["../../src/hooks/useChatCompletion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAA0E,MAAM,aAAa,CAAA;AAEpH,OAAO,EAAE,mBAAmB,EAAkB,MAAM,kBAAkB,CAAA;AAGtE,UAAU,WAAW;IACjB,cAAc,EAAE,cAAc,CAAA;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,mBAAmB,EAAE,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;CACtB;AAED,UAAU,YAAY;IAClB,eAAe,EAAE,WAAW,EAAE,CAAA;IAC9B,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAC3B,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,aAAa,GAAG,QAAQ,CAAA;KAClC,KAAK,OAAO,CAAC;QACV,QAAQ,EAAE,MAAM,CAAA;QAChB,gBAAgB,EAAE,MAAM,CAAA;KAC3B,CAAC,CAAA;IACF,gBAAgB,EAAE,WAAW,GAAG,IAAI,CAAA;CACvC;AAED,wBAAgB,iBAAiB,IAAI,YAAY,CA8EhD"}

package/dist/hooks/useEventSource.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEventSource.d.ts","sourceRoot":"","sources":["../../src/hooks/useEventSource.ts"],"names":[],"mappings":"AAQA,wBAAgB,cAAc;;;;EAgC7B;AAgCD,MAAM,WAAW,mBAAmB;IAChC,gBAAgB,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;CAClB"}

package/dist/hooks/useFency.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFency.d.ts","sourceRoot":"","sources":["../../src/hooks/useFency.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD;;GAEG;AACH,wBAAgB,QAAQ,IAAI,YAAY,CAMvC"}

package/dist/index.cjs

@@ -1 +0,0 @@
-"use strict";var g=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var j=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},A=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of O(t))!$.call(e,n)&&n!==o&&g(e,n,{get:()=>t[n],enumerable:!(i=T(t,n))||i.enumerable});return e};var K=e=>A(g({},"__esModule",{value:!0}),e);var q={};j(q,{FencyProvider:()=>v,useChatCompletion:()=>S,useFency:()=>y});module.exports=K(q);var l=require("react"),b=require("react/jsx-runtime"),F=(0,l.createContext)(void 0);function v({fency:e,children:t}){let[o,i]=(0,l.useState)(null),[n,r]=(0,l.useState)(!0),[a,m]=(0,l.useState)(null);if((0,l.useEffect)(()=>{e.then(u=>{i(u),r(!1)}).catch(u=>{m(u),r(!1)})},[e]),!o)return null;let p={fency:o,loading:n,error:a};return(0,b.jsx)(F.Provider,{value:p,children:t})}var I=require("react");function y(){let e=(0,I.useContext)(F);if(e===void 0)throw new Error("useFency must be used within a FencyProvider");return e}var _=e=>typeof e=="object"&&e!==null&&"id"in e,M=e=>typeof e=="object"&&e!==null&&"id"in e;async function x(e,t,o={}){let i=o.apiUrl||"http://localhost:8080/v1/chat_completions",n={...o.request,streamId:t,openai:{model:"gpt-4o-mini",messages:[{role:"user",content:"Hello, how are you?"}],...o.request?.openai}},r=await fetch(i,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify(n)});if(!r.ok)throw new Error(`Failed to create chat completion: ${r.status} ${r.statusText}`);let a=await r.json();if(!M(a))throw new Error("Invalid chat completion response");return a}async function k(e,t={}){let o=t.apiUrl||"http://localhost:8080/v1/chat_completion_streams",i=t.name||e,n=await fetch(o,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify({name:i})});if(!n.ok)throw new Error(`Failed to create stream: ${n.status} ${n.statusText}`);let r=await n.json();if(!_(r))throw new Error("Invalid stream response");return r}var s=require("react");var d=require("react");function P(){let[e,t]=(0,d.useState)([]),[o,i]=(0,d.useState)();return(0,d.useEffect)(()=>{if(!o)return;let n=new EventSource(o);return n.onmessage=r=>{let a=H(r);a&&t(m=>[...m,a])},n.onerror=r=>{console.error("EventSource error:",r)},()=>{n.close()}},[o]),{chunks:e,setUrl:i,url:o}}var N=e=>atob(e),H=e=>{try{let t=JSON.parse(N(e.data));return J(t)?t:null}catch(t){return console.error("Error parsing message:",t),null}},J=e=>typeof e=="object"&&e!==null&&"chatCompletionId"in e&&"streamId"in e&&"timestamp"in e&&"content"in e;function S(){let e=y(),{chunks:t,setUrl:o}=P(),[i,n]=(0,s.useState)([]),[r,a]=(0,s.useState)(null),m=(0,s.useCallback)(async h=>{let c=await k(e.fency.publishableKey);a(c);let f=await x(e.fency.publishableKey,c.id,{request:{openai:{model:h.model,messages:[{role:"user",content:h.prompt}]}}});return n(w=>[...w,f]),{streamId:c.id,chatCompletionId:c.id}},[e]),p=(0,s.useMemo)(()=>{let h=[];for(let c of i){let f=t.filter(C=>C.chatCompletionId===c.id).sort((C,E)=>C.timestamp.localeCompare(E.timestamp)),w=f.map(C=>C.content).join("");h.push({chatCompletion:c,streamId:f[0].streamId,chunks:f,fullMessage:w})}return h},[t,i]),u=(0,s.useMemo)(()=>p[p.length-1],[p]);return(0,s.useEffect)(()=>{r&&o(`http://localhost:8080/v1/chat_completion_streams/${r.id}?pk=${e.fency.publishableKey}`)},[r,e.fency.publishableKey,o]),{createChatCompletion:m,chatCompletions:p,latestCompletion:u}}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAG9D,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.mjs

@@ -1,2 +0,0 @@
-import{createContext as k,useEffect as P,useState as C}from"react";import{jsx as E}from"react/jsx-runtime";var d=k(void 0);function S({fency:e,children:o}){let[n,i]=C(null),[r,t]=C(!0),[s,c]=C(null);if(P(()=>{e.then(p=>{i(p),t(!1)}).catch(p=>{c(p),t(!1)})},[e]),!n)return null;let l={fency:n,loading:r,error:s};return E(d.Provider,{value:l,children:o})}import{useContext as T}from"react";function y(){let e=T(d);if(e===void 0)throw new Error("useFency must be used within a FencyProvider");return e}var O=e=>typeof e=="object"&&e!==null&&"id"in e,$=e=>typeof e=="object"&&e!==null&&"id"in e;async function w(e,o,n={}){let i=n.apiUrl||"http://localhost:8080/v1/chat_completions",r={...n.request,streamId:o,openai:{model:"gpt-4o-mini",messages:[{role:"user",content:"Hello, how are you?"}],...n.request?.openai}},t=await fetch(i,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify(r)});if(!t.ok)throw new Error(`Failed to create chat completion: ${t.status} ${t.statusText}`);let s=await t.json();if(!$(s))throw new Error("Invalid chat completion response");return s}async function g(e,o={}){let n=o.apiUrl||"http://localhost:8080/v1/chat_completion_streams",i=o.name||e,r=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify({name:i})});if(!r.ok)throw new Error(`Failed to create stream: ${r.status} ${r.statusText}`);let t=await r.json();if(!O(t))throw new Error("Invalid stream response");return t}import{useCallback as M,useEffect as N,useMemo as b,useState as I}from"react";import{useEffect as j,useState as F}from"react";function v(){let[e,o]=F([]),[n,i]=F();return j(()=>{if(!n)return;let r=new EventSource(n);return r.onmessage=t=>{let s=K(t);s&&o(c=>[...c,s])},r.onerror=t=>{console.error("EventSource error:",t)},()=>{r.close()}},[n]),{chunks:e,setUrl:i,url:n}}var A=e=>atob(e),K=e=>{try{let o=JSON.parse(A(e.data));return _(o)?o:null}catch(o){return console.error("Error parsing message:",o),null}},_=e=>typeof e=="object"&&e!==null&&"chatCompletionId"in e&&"streamId"in e&&"timestamp"in e&&"content"in e;function H(){let e=y(),{chunks:o,setUrl:n}=v(),[i,r]=I([]),[t,s]=I(null),c=M(async m=>{let a=await g(e.fency.publishableKey);s(a);let u=await w(e.fency.publishableKey,a.id,{request:{openai:{model:m.model,messages:[{role:"user",content:m.prompt}]}}});return r(f=>[...f,u]),{streamId:a.id,chatCompletionId:a.id}},[e]),l=b(()=>{let m=[];for(let a of i){let u=o.filter(h=>h.chatCompletionId===a.id).sort((h,x)=>h.timestamp.localeCompare(x.timestamp)),f=u.map(h=>h.content).join("");m.push({chatCompletion:a,streamId:u[0].streamId,chunks:u,fullMessage:f})}return m},[o,i]),p=b(()=>l[l.length-1],[l]);return N(()=>{t&&n(`http://localhost:8080/v1/chat_completion_streams/${t.id}?pk=${e.fency.publishableKey}`)},[t,e.fency.publishableKey,n]),{createChatCompletion:c,chatCompletions:l,latestCompletion:p}}export{S as FencyProvider,H as useChatCompletion,y as useFency};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/FencyProvider.tsx", "../src/hooks/useFency.ts", "../node_modules/@fencyai/js/dist/index.js", "../src/hooks/useChatCompletion.ts", "../src/hooks/useEventSource.ts"],
-  "sourcesContent": ["import { FencyInstance } from '@fencyai/js';\nimport { createContext, useEffect, useState } from 'react';\n\n// Create the context\nexport const FencyContextValue = createContext<FencyContext | undefined>(undefined);\n\n/**\n * Provider component that provides Fency instance to child components\n * Expects a promise that resolves to a Fency instance\n */\nexport function FencyProvider({ fency, children }: FencyProviderProps) {\n  const [fencyInstance, setFencyInstance] = useState<FencyInstance | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  useEffect(() => {\n    fency\n      .then((instance: FencyInstance) => {\n        setFencyInstance(instance);\n        setLoading(false);\n      })\n      .catch((err: Error) => {\n        setError(err);\n        setLoading(false);\n      });\n  }, [fency]);\n\n  // Only render children and provide context when fency is loaded\n  if (!fencyInstance) {\n    return null;\n  }\n\n  const value: FencyContext = {\n    fency: fencyInstance,\n    loading,\n    error,\n  };\n\n  return (\n    <FencyContextValue.Provider value={value}>\n      {children}\n    </FencyContextValue.Provider>\n  );\n} \n\nexport interface FencyOptions {\n  publishableKey: string;\n  endpoint?: string;\n}\n\n/**\n * Context for Fency instance\n */\nexport interface FencyContext {\n  fency: FencyInstance;\n  loading: boolean;\n  error: Error | null;\n}\n\n/**\n * Props for FencyProvider\n */\nexport interface FencyProviderProps {\n  fency: Promise<FencyInstance>;\n  children: React.ReactNode;\n} ", "import { useContext } from 'react';\nimport { FencyContextValue } from '../FencyProvider';\nimport type { FencyContext } from '../FencyProvider';\n\n/**\n * Hook to access Fency instance and loading state\n */\nexport function useFency(): FencyContext {\n  const context = useContext(FencyContextValue);\n  if (context === undefined) {\n    throw new Error('useFency must be used within a FencyProvider');\n  }\n  return context;\n} ", "var f=t=>typeof t==\"object\"&&t!==null&&\"id\"in t,C=t=>typeof t==\"object\"&&t!==null&&\"id\"in t;async function a(t,o,e={}){let n=e.apiUrl||\"http://localhost:8080/v1/chat_completions\",i={...e.request,streamId:o,openai:{model:\"gpt-4o-mini\",messages:[{role:\"user\",content:\"Hello, how are you?\"}],...e.request?.openai}},r=await fetch(n,{method:\"POST\",headers:{\"Content-Type\":\"application/json\",Authorization:`Bearer ${t}`},body:JSON.stringify(i)});if(!r.ok)throw new Error(`Failed to create chat completion: ${r.status} ${r.statusText}`);let m=await r.json();if(!C(m))throw new Error(\"Invalid chat completion response\");return m}async function s(t,o={}){let e=o.apiUrl||\"http://localhost:8080/v1/chat_completion_streams\",n=o.name||t,i=await fetch(e,{method:\"POST\",headers:{\"Content-Type\":\"application/json\",Authorization:`Bearer ${t}`},body:JSON.stringify({name:n})});if(!i.ok)throw new Error(`Failed to create stream: ${i.status} ${i.statusText}`);let r=await i.json();if(!f(r))throw new Error(\"Invalid stream response\");return r}function p(){if(typeof window>\"u\")return!1;let t=[\"fetch\",\"Promise\",\"JSON\"];for(let o of t)if(typeof window[o]>\"u\")return!1;if(typeof window.location<\"u\"){let o=window.location.hostname===\"localhost\"||window.location.hostname===\"127.0.0.1\",e=window.location.protocol===\"https:\";!o&&!e&&console.warn(\"Fency: For security, we recommend using HTTPS in production.\")}return!0}function l(){let t={available:!0,missing:[],warnings:[]};if(typeof window>\"u\")return t.available=!1,t.missing.push(\"Browser environment\"),t;let o=[\"fetch\",\"Promise\",\"JSON\"];for(let e of o)typeof window[e]>\"u\"&&(t.available=!1,t.missing.push(`${e} API`));if(typeof window.location<\"u\"){let e=window.location.hostname===\"localhost\"||window.location.hostname===\"127.0.0.1\",n=window.location.protocol===\"https:\";!e&&!n&&t.warnings.push(\"HTTPS is recommended for production use\")}return t}function c(t,o={}){return new Promise((e,n)=>{if(!t||typeof t!=\"string\"){n(new Error(\"Fency: A valid publishable key is required.\"));return}if(!t.startsWith(\"pk_\")){n(new Error('Fency: Invalid publishable key format. Keys should start with \"pk_\".'));return}let i={publishableKey:t,endpoint:o.endpoint||\"https://api.fency.ai\"};setTimeout(()=>{e(i)},0)})}var P={loadFency:c,isFencyAvailable:p,getFencyAvailabilityInfo:l,createChatCompletion:a,createChatCompletionStream:s};export{a as createChatCompletion,s as createChatCompletionStream,P as default,l as getFencyAvailabilityInfo,p as isFencyAvailable,c as loadFency};\n", "// hooks/useChatCompletion.ts\nimport { ChatCompletion, ChatCompletionStream, createChatCompletion, createChatCompletionStream } from '@fencyai/js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ChatCompletionChunk, useEventSource } from './useEventSource'\nimport { useFency } from './useFency'\n\ninterface Completions {\n    chatCompletion: ChatCompletion\n    streamId: string\n    chunks: ChatCompletionChunk[]\n    fullMessage: string\n}\n\ninterface HookResponse {\n    chatCompletions: Completions[]\n    createChatCompletion: (params: {\n        prompt: string\n        model: 'gpt-4o-mini' | 'gpt-4o'\n    }) => Promise<{\n        streamId: string\n        chatCompletionId: string\n    }>\n    latestCompletion: Completions | null\n}\n\nexport function useChatCompletion(): HookResponse {\n    const fency = useFency()\n    const { chunks, setUrl } = useEventSource()\n    const [chatCompletions, setChatCompletions] = useState<ChatCompletion[]>([])\n    const [stream, setStream] = useState<ChatCompletionStream | null>(null)\n\n    const create = useCallback(\n        async (params: {\n            prompt: string\n            model: 'gpt-4o-mini' | 'gpt-4o'\n        }): Promise<{\n            streamId: string\n            chatCompletionId: string\n        }> => {\n            // Step 1: Create stream if not exists\n            const s = await createChatCompletionStream(fency.fency.publishableKey)\n            setStream(s)\n\n            // Step 2: Send chat completion\n            const chatCompletion = await createChatCompletion(fency.fency.publishableKey, s.id, {\n                request: {\n                    openai: {\n                        model: params.model,\n                        messages: [{ role: 'user', content: params.prompt }],\n                    },\n                },\n            })\n\n            setChatCompletions((prev) => [...prev, chatCompletion])\n\n            return {\n                streamId: s.id,\n                chatCompletionId: s.id,\n            }\n        },\n        [fency]\n    )\n\n    const completions = useMemo(() => {\n        const completions: Completions[] = []\n\n        for (const chatCompletion of chatCompletions) {\n            const relevantChunks = chunks\n                .filter((chunk) => chunk.chatCompletionId === chatCompletion.id)\n                .sort((a, b) => a.timestamp.localeCompare(b.timestamp))\n\n            const fullMessage = relevantChunks\n                .map((chunk) => chunk.content)\n                .join('')\n\n            completions.push({\n                chatCompletion,\n                streamId: relevantChunks[0].streamId,\n                chunks: relevantChunks,\n                fullMessage,\n            })\n        }\n\n        return completions\n    }, [chunks, chatCompletions])\n\n    const latestCompletion = useMemo(() => {\n        return completions[completions.length - 1]\n    }, [completions])\n\n    useEffect(() => {\n        if (stream) {\n            setUrl(\n                `http://localhost:8080/v1/chat_completion_streams/${stream.id}?pk=${fency.fency.publishableKey}`\n            )\n        }\n    }, [stream, fency.fency.publishableKey, setUrl])\n\n    return {\n        createChatCompletion: create,\n        chatCompletions: completions,\n        latestCompletion,\n    }\n}\n", "import { useEffect, useState } from 'react'\n\ntype Message = {\n    data: string\n    event?: string\n    lastEventId?: string\n}\n\nexport function useEventSource() {\n    const [chunks, setChunks] = useState<ChatCompletionChunk[]>([])\n    const [url, setUrl] = useState<string | null>()\n\n    \n\n    useEffect(() => {\n        if (!url) return\n\n        const eventSource = new EventSource(url)\n\n        eventSource.onmessage = (event: MessageEvent) => {\n            const chunk = getChatCompletionChunk(event)\n            if (chunk) {\n                setChunks((prev) => [...prev, chunk])\n            }\n        }\n\n        eventSource.onerror = (error) => {\n            console.error('EventSource error:', error)\n        }\n\n        return () => {\n            eventSource.close()\n        }\n    }, [url])\n\n    return {\n        chunks,\n        setUrl,\n        url,\n    }\n}\n\nconst base64Decode = (str: string) => {\n    return atob(str)\n}\n\nconst getChatCompletionChunk = (\n    message: Message\n): ChatCompletionChunk | null => {\n    try {\n        const json = JSON.parse(base64Decode(message.data))\n        if (isChatCompletionChunk(json)) {\n            return json\n        }\n        return null\n    } catch (error) {\n        console.error('Error parsing message:', error)\n        return null\n    }\n}\n\nconst isChatCompletionChunk = (data: unknown): boolean => {\n    return (\n        typeof data === 'object' &&\n        data !== null &&\n        'chatCompletionId' in data &&\n        'streamId' in data &&\n        'timestamp' in data &&\n        'content' in data\n    )\n}\n\nexport interface ChatCompletionChunk {\n    chatCompletionId: string\n    streamId: string\n    timestamp: string\n    content: string\n}\n"],
-  "mappings": "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",
-  "names": ["createContext", "useEffect", "useState", "jsx", "FencyContextValue", "FencyProvider", "fency", "children", "fencyInstance", "setFencyInstance", "loading", "setLoading", "error", "setError", "instance", "err", "value", "useContext", "useFency", "context", "useContext", "FencyContextValue", "f", "t", "C", "a", "e", "n", "i", "r", "m", "s", "useCallback", "useEffect", "useMemo", "useState", "useEffect", "useState", "useEventSource", "chunks", "setChunks", "url", "setUrl", "eventSource", "event", "chunk", "getChatCompletionChunk", "prev", "error", "base64Decode", "str", "message", "json", "isChatCompletionChunk", "data", "useChatCompletion", "fency", "useFency", "chunks", "setUrl", "useEventSource", "chatCompletions", "setChatCompletions", "useState", "stream", "setStream", "create", "useCallback", "params", "s", "chatCompletion", "a", "prev", "completions", "useMemo", "relevantChunks", "chunk", "b", "fullMessage", "latestCompletion", "useEffect"]
-}