@trainly/react 1.1.2 → 1.2.0

package/README.md

@@ -86,6 +86,66 @@ function MyComponent() {
 - ✅ **Zero Migration**: Works with your existing OAuth setup
 - ✅ **Simple Integration**: Just add `appId` and use `connectWithOAuthToken()`
 
+## 📁 **NEW: File Management**
+
+Now users can manage their uploaded files directly:
+
+```tsx
+import { useTrainly, TrainlyFileManager } from "@trainly/react";
+
+function MyApp() {
+  const { listFiles, deleteFile, upload } = useTrainly();
+
+  // List all user's files
+  const handleListFiles = async () => {
+    const result = await listFiles();
+    console.log(
+      `${result.total_files} files, ${result.total_size_bytes} bytes total`,
+    );
+    result.files.forEach((file) => {
+      console.log(
+        `${file.filename}: ${file.size_bytes} bytes, ${file.chunk_count} chunks`,
+      );
+    });
+  };
+
+  // Delete a specific file
+  const handleDeleteFile = async (fileId) => {
+    const result = await deleteFile(fileId);
+    console.log(
+      `Deleted ${result.filename}, freed ${result.size_bytes_freed} bytes`,
+    );
+  };
+
+  return (
+    <div>
+      <button onClick={handleListFiles}>List My Files</button>
+
+      {/* Pre-built file manager component */}
+      <TrainlyFileManager
+        onFileDeleted={(fileId, filename) => {
+          console.log(`File deleted: ${filename}`);
+        }}
+        onError={(error) => {
+          console.error("File operation failed:", error);
+        }}
+        showUploadButton={true}
+        maxFileSize={5} // MB
+      />
+    </div>
+  );
+}
+```
+
+### File Management Features
+
+- 📋 **List Files**: View all uploaded documents with metadata
+- 🗑️ **Delete Files**: Remove files and free up storage space
+- 📊 **Storage Analytics**: Track file sizes and storage usage
+- 🔄 **Auto-Refresh**: File list updates after uploads/deletions
+- 🎨 **Pre-built UI**: `TrainlyFileManager` component with styling
+- 🔒 **Privacy-First**: Only works in V1 mode with OAuth authentication
+
 ---
 
 ## 🚀 Original Quick Start (Legacy)

package/dist/TrainlyProvider.js

@@ -67,9 +67,67 @@ export function TrainlyProvider(_a) {
     var _d = React.useState(false), isConnected = _d[0], setIsConnected = _d[1];
     var _e = React.useState(null), error = _e[0], setError = _e[1];
     var _f = React.useState([]), messages = _f[0], setMessages = _f[1];
-    // Auto-connect on mount
+    var _g = React.useState(null), currentToken = _g[0], setCurrentToken = _g[1];
+    var refreshIntervalRef = React.useRef(null);
+    // Auto-connect on mount (only for non-OAuth modes)
     React.useEffect(function () {
-        connect();
+        if (!appId && !getToken) {
+            connect();
+        }
+    }, []);
+    // NEW: Automatic OAuth state management
+    React.useEffect(function () {
+        if (!getToken || !appId)
+            return;
+        var manageOAuthConnection = function () { return __awaiter(_this, void 0, void 0, function () {
+            var token, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 6, , 7]);
+                        return [4 /*yield*/, getToken()];
+                    case 1:
+                        token = _a.sent();
+                        if (!(token && token !== currentToken)) return [3 /*break*/, 4];
+                        if (!(!isConnected || token !== currentToken)) return [3 /*break*/, 3];
+                        console.log("🔐 New OAuth session detected, connecting to Trainly...");
+                        return [4 /*yield*/, connectWithOAuthToken(token)];
+                    case 2:
+                        _a.sent();
+                        _a.label = 3;
+                    case 3: return [3 /*break*/, 5];
+                    case 4:
+                        if (!token && isConnected) {
+                            // User signed out, disconnect from Trainly
+                            console.log("🚪 User signed out, disconnecting from Trainly...");
+                            clearRefreshInterval();
+                            setIsConnected(false);
+                            setCurrentToken(null);
+                            setError(null);
+                        }
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
+                        error_1 = _a.sent();
+                        console.error("OAuth state management error:", error_1);
+                        return [3 /*break*/, 7];
+                    case 7: return [2 /*return*/];
+                }
+            });
+        }); };
+        // Check OAuth state immediately
+        manageOAuthConnection();
+        // Set up periodic OAuth state checking (every 10 seconds)
+        var stateCheckInterval = setInterval(manageOAuthConnection, 10000);
+        return function () {
+            clearInterval(stateCheckInterval);
+        };
+    }, [getToken, appId, currentToken, isConnected]);
+    // Cleanup on unmount
+    React.useEffect(function () {
+        return function () {
+            clearRefreshInterval();
+        };
     }, []);
     var connect = function () { return __awaiter(_this, void 0, void 0, function () {
         var err_1;
@@ -100,7 +158,62 @@ export function TrainlyProvider(_a) {
             }
         });
     }); };
-    // NEW: V1 OAuth Token connection method
+    // Clear any existing refresh interval
+    var clearRefreshInterval = function () {
+        if (refreshIntervalRef.current) {
+            clearInterval(refreshIntervalRef.current);
+            refreshIntervalRef.current = null;
+        }
+    };
+    // Set up automatic token refresh
+    var setupTokenRefresh = function (token) {
+        if (!getToken || !appId)
+            return;
+        // Clear any existing interval
+        clearRefreshInterval();
+        // Decode token to get expiration (without verification)
+        try {
+            var payload = JSON.parse(atob(token.split(".")[1]));
+            var exp = payload.exp * 1000; // Convert to milliseconds
+            var now = Date.now();
+            var timeUntilExpiry = exp - now;
+            // Refresh 30 seconds before expiry (or immediately if already expired)
+            var refreshIn = Math.max(timeUntilExpiry - 30000, 1000);
+            console.log("\uD83D\uDD04 Token refresh scheduled in ".concat(Math.round(refreshIn / 1000), " seconds"));
+            refreshIntervalRef.current = setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                var newToken, error_2;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 4, , 5]);
+                            console.log("🔄 Auto-refreshing token...");
+                            return [4 /*yield*/, getToken()];
+                        case 1:
+                            newToken = _a.sent();
+                            if (!(newToken && newToken !== currentToken)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, client.connectWithOAuthToken(newToken)];
+                        case 2:
+                            _a.sent();
+                            setCurrentToken(newToken);
+                            setupTokenRefresh(newToken); // Schedule next refresh
+                            console.log("✅ Token auto-refreshed successfully");
+                            _a.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            error_2 = _a.sent();
+                            console.error("❌ Auto token refresh failed:", error_2);
+                            setIsConnected(false);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); }, refreshIn);
+        }
+        catch (error) {
+            console.warn("Could not decode token for refresh scheduling:", error);
+        }
+    };
+    // NEW: V1 OAuth Token connection method with auto-refresh
     var connectWithOAuthToken = function (idToken) { return __awaiter(_this, void 0, void 0, function () {
         var err_2;
         return __generator(this, function (_a) {
@@ -112,7 +225,10 @@ export function TrainlyProvider(_a) {
                     return [4 /*yield*/, client.connectWithOAuthToken(idToken)];
                 case 1:
                     _a.sent();
+                    setCurrentToken(idToken);
                     setIsConnected(true);
+                    // Set up automatic token refresh
+                    setupTokenRefresh(idToken);
                     return [3 /*break*/, 4];
                 case 2:
                     err_2 = _a.sent();
@@ -131,7 +247,7 @@ export function TrainlyProvider(_a) {
         });
     }); };
     var ask = function (question) { return __awaiter(_this, void 0, void 0, function () {
-        var response, err_3, errorMessage, newToken, response, refreshError_1, error_1;
+        var response, err_3, errorMessage, newToken, response, refreshError_1, error_3;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -172,13 +288,13 @@ export function TrainlyProvider(_a) {
                     console.error("❌ Token refresh failed:", refreshError_1);
                     return [3 /*break*/, 9];
                 case 9:
-                    error_1 = {
+                    error_3 = {
                         code: "QUERY_FAILED",
                         message: "Failed to get answer",
                         details: err_3,
                     };
-                    setError(error_1);
-                    throw error_1;
+                    setError(error_3);
+                    throw error_3;
                 case 10:
                     setIsLoading(false);
                     return [7 /*endfinally*/];
@@ -187,7 +303,7 @@ export function TrainlyProvider(_a) {
         });
     }); };
     var askWithCitations = function (question) { return __awaiter(_this, void 0, void 0, function () {
-        var response, err_4, error_2;
+        var response, err_4, error_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -203,13 +319,13 @@ export function TrainlyProvider(_a) {
                         }];
                 case 2:
                     err_4 = _a.sent();
-                    error_2 = {
+                    error_4 = {
                         code: "QUERY_FAILED",
                         message: "Failed to get answer with citations",
                         details: err_4,
                     };
-                    setError(error_2);
-                    throw error_2;
+                    setError(error_4);
+                    throw error_4;
                 case 3:
                     setIsLoading(false);
                     return [7 /*endfinally*/];
@@ -218,7 +334,7 @@ export function TrainlyProvider(_a) {
         });
     }); };
     var upload = function (file) { return __awaiter(_this, void 0, void 0, function () {
-        var result, err_5, errorMessage, newToken, result, refreshError_2, error_3;
+        var result, err_5, errorMessage, newToken, result, refreshError_2, error_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -259,13 +375,125 @@ export function TrainlyProvider(_a) {
                     console.error("❌ Token refresh failed:", refreshError_2);
                     return [3 /*break*/, 9];
                 case 9:
-                    error_3 = {
+                    error_5 = {
                         code: "UPLOAD_FAILED",
                         message: "Failed to upload file",
                         details: err_5,
                     };
-                    setError(error_3);
-                    throw error_3;
+                    setError(error_5);
+                    throw error_5;
+                case 10:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 11: return [2 /*return*/];
+            }
+        });
+    }); };
+    var listFiles = function () { return __awaiter(_this, void 0, void 0, function () {
+        var result, err_6, errorMessage, newToken, result, refreshError_3, error_6;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 10, 11]);
+                    setIsLoading(true);
+                    setError(null);
+                    return [4 /*yield*/, client.listFiles()];
+                case 1:
+                    result = _a.sent();
+                    return [2 /*return*/, result];
+                case 2:
+                    err_6 = _a.sent();
+                    errorMessage = err_6 instanceof Error ? err_6.message : String(err_6);
+                    if (!(getToken &&
+                        appId &&
+                        (errorMessage.includes("401") ||
+                            errorMessage.includes("authentication") ||
+                            errorMessage.includes("Unauthorized")))) return [3 /*break*/, 9];
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 8, , 9]);
+                    console.log("🔄 Token expired during file listing, refreshing...");
+                    return [4 /*yield*/, getToken()];
+                case 4:
+                    newToken = _a.sent();
+                    if (!newToken) return [3 /*break*/, 7];
+                    return [4 /*yield*/, client.connectWithOAuthToken(newToken)];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, client.listFiles()];
+                case 6:
+                    result = _a.sent();
+                    console.log("✅ File listing succeeded after token refresh");
+                    return [2 /*return*/, result];
+                case 7: return [3 /*break*/, 9];
+                case 8:
+                    refreshError_3 = _a.sent();
+                    console.error("❌ Token refresh failed:", refreshError_3);
+                    return [3 /*break*/, 9];
+                case 9:
+                    error_6 = {
+                        code: "LIST_FILES_FAILED",
+                        message: "Failed to list files",
+                        details: err_6,
+                    };
+                    setError(error_6);
+                    throw error_6;
+                case 10:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 11: return [2 /*return*/];
+            }
+        });
+    }); };
+    var deleteFile = function (fileId) { return __awaiter(_this, void 0, void 0, function () {
+        var result, err_7, errorMessage, newToken, result, refreshError_4, error_7;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 10, 11]);
+                    setIsLoading(true);
+                    setError(null);
+                    return [4 /*yield*/, client.deleteFile(fileId)];
+                case 1:
+                    result = _a.sent();
+                    return [2 /*return*/, result];
+                case 2:
+                    err_7 = _a.sent();
+                    errorMessage = err_7 instanceof Error ? err_7.message : String(err_7);
+                    if (!(getToken &&
+                        appId &&
+                        (errorMessage.includes("401") ||
+                            errorMessage.includes("authentication") ||
+                            errorMessage.includes("Unauthorized")))) return [3 /*break*/, 9];
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 8, , 9]);
+                    console.log("🔄 Token expired during file deletion, refreshing...");
+                    return [4 /*yield*/, getToken()];
+                case 4:
+                    newToken = _a.sent();
+                    if (!newToken) return [3 /*break*/, 7];
+                    return [4 /*yield*/, client.connectWithOAuthToken(newToken)];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, client.deleteFile(fileId)];
+                case 6:
+                    result = _a.sent();
+                    console.log("✅ File deletion succeeded after token refresh");
+                    return [2 /*return*/, result];
+                case 7: return [3 /*break*/, 9];
+                case 8:
+                    refreshError_4 = _a.sent();
+                    console.error("❌ Token refresh failed:", refreshError_4);
+                    return [3 /*break*/, 9];
+                case 9:
+                    error_7 = {
+                        code: "DELETE_FILE_FAILED",
+                        message: "Failed to delete file",
+                        details: err_7,
+                    };
+                    setError(error_7);
+                    throw error_7;
                 case 10:
                     setIsLoading(false);
                     return [7 /*endfinally*/];
@@ -274,7 +502,7 @@ export function TrainlyProvider(_a) {
         });
     }); };
     var sendMessage = function (content) { return __awaiter(_this, void 0, void 0, function () {
-        var userMessage, response, assistantMessage_1, err_6;
+        var userMessage, response, assistantMessage_1, err_8;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -301,9 +529,9 @@ export function TrainlyProvider(_a) {
                     setMessages(function (prev) { return __spreadArray(__spreadArray([], prev, true), [assistantMessage_1], false); });
                     return [3 /*break*/, 4];
                 case 3:
-                    err_6 = _a.sent();
+                    err_8 = _a.sent();
                     // Error is already set by askWithCitations
-                    console.error("Failed to send message:", err_6);
+                    console.error("Failed to send message:", err_8);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -316,6 +544,8 @@ export function TrainlyProvider(_a) {
         ask: ask,
         askWithCitations: askWithCitations,
         upload: upload,
+        listFiles: listFiles, // NEW: File management methods
+        deleteFile: deleteFile,
         connectWithOAuthToken: connectWithOAuthToken, // NEW: V1 OAuth connection method
         isLoading: isLoading,
         isConnected: isConnected,

package/dist/api/TrainlyClient.d.ts

@@ -1,4 +1,4 @@
-import { TrainlyConfig, Citation, UploadResult } from "../types";
+import { TrainlyConfig, Citation, UploadResult, FileListResult, FileDeleteResult } from "../types";
 interface QueryResponse {
     answer: string;
     citations?: Citation[];
@@ -19,6 +19,8 @@ export declare class TrainlyClient {
         includeCitations?: boolean;
     }): Promise<QueryResponse>;
     upload(file: File): Promise<UploadResult>;
+    listFiles(): Promise<FileListResult>;
+    deleteFile(fileId: string): Promise<FileDeleteResult>;
     private extractChatId;
     private generateAnonymousId;
 }

package/dist/api/TrainlyClient.js

@@ -324,6 +324,81 @@ var TrainlyClient = /** @class */ (function () {
             });
         });
     };
+    TrainlyClient.prototype.listFiles = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, error, data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.scopedToken) {
+                            throw new Error("Not connected. Call connect() or connectWithOAuthToken() first.");
+                        }
+                        if (!(this.isV1Mode && this.config.appId)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, fetch("".concat(this.config.baseUrl, "/v1/me/chats/files"), {
+                                method: "GET",
+                                headers: {
+                                    Authorization: "Bearer ".concat(this.scopedToken),
+                                    "X-App-ID": this.config.appId,
+                                },
+                            })];
+                    case 1:
+                        response = _a.sent();
+                        if (!!response.ok) return [3 /*break*/, 3];
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        error = _a.sent();
+                        throw new Error("V1 list files failed: ".concat(error.detail || response.statusText));
+                    case 3: return [4 /*yield*/, response.json()];
+                    case 4:
+                        data = _a.sent();
+                        return [2 /*return*/, data];
+                    case 5: 
+                    // For other modes, this functionality is not yet implemented
+                    // as it requires chat-specific API endpoints
+                    throw new Error("File listing is currently only available in V1 Trusted Issuer mode");
+                }
+            });
+        });
+    };
+    TrainlyClient.prototype.deleteFile = function (fileId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, error, data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.scopedToken) {
+                            throw new Error("Not connected. Call connect() or connectWithOAuthToken() first.");
+                        }
+                        if (!fileId) {
+                            throw new Error("File ID is required");
+                        }
+                        if (!(this.isV1Mode && this.config.appId)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, fetch("".concat(this.config.baseUrl, "/v1/me/chats/files/").concat(encodeURIComponent(fileId)), {
+                                method: "DELETE",
+                                headers: {
+                                    Authorization: "Bearer ".concat(this.scopedToken),
+                                    "X-App-ID": this.config.appId,
+                                },
+                            })];
+                    case 1:
+                        response = _a.sent();
+                        if (!!response.ok) return [3 /*break*/, 3];
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        error = _a.sent();
+                        throw new Error("V1 delete file failed: ".concat(error.detail || response.statusText));
+                    case 3: return [4 /*yield*/, response.json()];
+                    case 4:
+                        data = _a.sent();
+                        return [2 /*return*/, data];
+                    case 5: 
+                    // For other modes, this functionality is not yet implemented
+                    // as it requires chat-specific API endpoints
+                    throw new Error("File deletion is currently only available in V1 Trusted Issuer mode");
+                }
+            });
+        });
+    };
     TrainlyClient.prototype.extractChatId = function () {
         if (!this.config.apiKey) {
             throw new Error("API key not provided");

package/dist/components/TrainlyFileManager.d.ts

@@ -0,0 +1,8 @@
+export interface TrainlyFileManagerProps {
+    className?: string;
+    onFileDeleted?: (fileId: string, filename: string) => void;
+    onError?: (error: Error) => void;
+    showUploadButton?: boolean;
+    maxFileSize?: number;
+}
+export declare function TrainlyFileManager({ className, onFileDeleted, onError, showUploadButton, maxFileSize, }: TrainlyFileManagerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TrainlyFileManager.js

@@ -0,0 +1,304 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useTrainly } from "../useTrainly";
+export function TrainlyFileManager(_a) {
+    var _this = this;
+    var _b = _a.className, className = _b === void 0 ? "" : _b, onFileDeleted = _a.onFileDeleted, onError = _a.onError, _c = _a.showUploadButton, showUploadButton = _c === void 0 ? true : _c, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 5 : _d;
+    var _e = useTrainly(), listFiles = _e.listFiles, deleteFile = _e.deleteFile, upload = _e.upload, isLoading = _e.isLoading, error = _e.error;
+    var _f = React.useState([]), files = _f[0], setFiles = _f[1];
+    var _g = React.useState(false), isLoadingFiles = _g[0], setIsLoadingFiles = _g[1];
+    var _h = React.useState(null), isDeletingFile = _h[0], setIsDeletingFile = _h[1];
+    var _j = React.useState(false), isUploading = _j[0], setIsUploading = _j[1];
+    var fileInputRef = React.useRef(null);
+    // Load files on component mount
+    React.useEffect(function () {
+        loadFiles();
+    }, []);
+    var loadFiles = function () { return __awaiter(_this, void 0, void 0, function () {
+        var result, err_1, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, 3, 4]);
+                    setIsLoadingFiles(true);
+                    return [4 /*yield*/, listFiles()];
+                case 1:
+                    result = _a.sent();
+                    setFiles(result.files);
+                    return [3 /*break*/, 4];
+                case 2:
+                    err_1 = _a.sent();
+                    error_1 = err_1 instanceof Error ? err_1 : new Error(String(err_1));
+                    console.error("Failed to load files:", error_1);
+                    onError === null || onError === void 0 ? void 0 : onError(error_1);
+                    return [3 /*break*/, 4];
+                case 3:
+                    setIsLoadingFiles(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDeleteFile = function (fileId, filename) { return __awaiter(_this, void 0, void 0, function () {
+        var result, err_2, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!confirm("Are you sure you want to delete \"".concat(filename, "\"? This action cannot be undone."))) {
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    setIsDeletingFile(fileId);
+                    return [4 /*yield*/, deleteFile(fileId)];
+                case 2:
+                    result = _a.sent();
+                    // Remove file from local state
+                    setFiles(function (prev) { return prev.filter(function (f) { return f.file_id !== fileId; }); });
+                    // Notify parent component
+                    onFileDeleted === null || onFileDeleted === void 0 ? void 0 : onFileDeleted(fileId, filename);
+                    console.log("File deleted: ".concat(result.message));
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_2 = _a.sent();
+                    error_2 = err_2 instanceof Error ? err_2 : new Error(String(err_2));
+                    console.error("Failed to delete file:", error_2);
+                    onError === null || onError === void 0 ? void 0 : onError(error_2);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsDeletingFile(null);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleFileUpload = function (event) { return __awaiter(_this, void 0, void 0, function () {
+        var file, error_3, result, err_3, error_4;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                    if (!file)
+                        return [2 /*return*/];
+                    // Check file size
+                    if (file.size > maxFileSize * 1024 * 1024) {
+                        error_3 = new Error("File size must be less than ".concat(maxFileSize, "MB"));
+                        onError === null || onError === void 0 ? void 0 : onError(error_3);
+                        return [2 /*return*/];
+                    }
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 5, 6, 7]);
+                    setIsUploading(true);
+                    return [4 /*yield*/, upload(file)];
+                case 2:
+                    result = _b.sent();
+                    if (!result.success) return [3 /*break*/, 4];
+                    // Reload files to show the new upload
+                    return [4 /*yield*/, loadFiles()];
+                case 3:
+                    // Reload files to show the new upload
+                    _b.sent();
+                    console.log("File uploaded: ".concat(result.filename));
+                    _b.label = 4;
+                case 4: return [3 /*break*/, 7];
+                case 5:
+                    err_3 = _b.sent();
+                    error_4 = err_3 instanceof Error ? err_3 : new Error(String(err_3));
+                    console.error("Failed to upload file:", error_4);
+                    onError === null || onError === void 0 ? void 0 : onError(error_4);
+                    return [3 /*break*/, 7];
+                case 6:
+                    setIsUploading(false);
+                    // Clear the input
+                    if (fileInputRef.current) {
+                        fileInputRef.current.value = "";
+                    }
+                    return [7 /*endfinally*/];
+                case 7: return [2 /*return*/];
+            }
+        });
+    }); };
+    var formatFileSize = function (bytes) {
+        if (bytes === 0)
+            return "0 Bytes";
+        var k = 1024;
+        var sizes = ["Bytes", "KB", "MB", "GB"];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    };
+    var formatDate = function (dateString) {
+        try {
+            var date = new Date(parseInt(dateString));
+            return date.toLocaleDateString() + " " + date.toLocaleTimeString();
+        }
+        catch (_a) {
+            return dateString;
+        }
+    };
+    var totalSize = files.reduce(function (sum, file) { return sum + file.size_bytes; }, 0);
+    var styles = {
+        container: {
+            border: "1px solid #e5e7eb",
+            borderRadius: "8px",
+            padding: "16px",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif",
+        },
+        header: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            marginBottom: "16px",
+        },
+        title: {
+            margin: "0 0 4px 0",
+            fontSize: "18px",
+            fontWeight: "600",
+            color: "#1f2937",
+        },
+        totalSize: {
+            margin: "0",
+            fontSize: "14px",
+            color: "#6b7280",
+        },
+        uploadButton: {
+            backgroundColor: "#3b82f6",
+            color: "white",
+            border: "none",
+            borderRadius: "6px",
+            padding: "8px 16px",
+            fontSize: "14px",
+            cursor: "pointer",
+            transition: "background-color 0.2s",
+        },
+        uploadButtonDisabled: {
+            backgroundColor: "#9ca3af",
+            cursor: "not-allowed",
+        },
+        error: {
+            backgroundColor: "#fef2f2",
+            color: "#dc2626",
+            padding: "12px",
+            borderRadius: "6px",
+            marginBottom: "16px",
+            fontSize: "14px",
+        },
+        loading: {
+            textAlign: "center",
+            padding: "32px",
+            color: "#6b7280",
+            fontSize: "14px",
+        },
+        emptyState: {
+            textAlign: "center",
+            padding: "32px",
+            color: "#6b7280",
+        },
+        emptyStateText: {
+            margin: "0 0 8px 0",
+            fontSize: "14px",
+        },
+        fileItem: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "12px",
+            border: "1px solid #f3f4f6",
+            borderRadius: "6px",
+            backgroundColor: "#f9fafb",
+            marginBottom: "8px",
+            transition: "background-color 0.2s",
+        },
+        fileName: {
+            fontWeight: "500",
+            color: "#1f2937",
+            fontSize: "14px",
+            marginBottom: "4px",
+        },
+        fileMeta: {
+            fontSize: "12px",
+            color: "#6b7280",
+        },
+        deleteButton: {
+            backgroundColor: "#dc2626",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            padding: "6px 12px",
+            fontSize: "12px",
+            cursor: "pointer",
+            transition: "background-color 0.2s",
+        },
+        deleteButtonDisabled: {
+            backgroundColor: "#9ca3af",
+            cursor: "not-allowed",
+        },
+    };
+    return (_jsxs("div", { className: className, style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsxs("div", { children: [_jsxs("h3", { style: styles.title, children: ["Your Files (", files.length, ")"] }), _jsxs("p", { style: styles.totalSize, children: ["Total: ", formatFileSize(totalSize)] })] }), showUploadButton && (_jsxs("div", { children: [_jsx("input", { ref: fileInputRef, type: "file", onChange: handleFileUpload, disabled: isUploading || isLoading, accept: ".pdf,.docx,.txt,.md,.csv,.json,.html,.xml,.yaml,.yml,.js,.py,.java,.cpp,.c,.h,.cs,.php,.rb,.sh,.bat,.ps1", style: { display: "none" } }), _jsx("button", { onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: isUploading || isLoading, style: __assign(__assign({}, styles.uploadButton), (isUploading || isLoading
+                                    ? styles.uploadButtonDisabled
+                                    : {})), children: isUploading ? "Uploading..." : "Upload File" })] }))] }), error && _jsx("div", { style: styles.error, children: error.message }), isLoadingFiles ? (_jsx("div", { style: styles.loading, children: "Loading files..." })) : files.length === 0 ? (_jsxs("div", { style: styles.emptyState, children: [_jsx("p", { style: styles.emptyStateText, children: "No files uploaded yet." }), showUploadButton && (_jsx("p", { style: styles.emptyStateText, children: "Click \"Upload File\" to add your first document." }))] })) : (_jsx("div", { children: files.map(function (file) { return (_jsxs("div", { style: styles.fileItem, onMouseEnter: function (e) {
+                        e.currentTarget.style.backgroundColor = "#f3f4f6";
+                    }, onMouseLeave: function (e) {
+                        e.currentTarget.style.backgroundColor = "#f9fafb";
+                    }, children: [_jsxs("div", { children: [_jsx("div", { style: styles.fileName, children: file.filename }), _jsxs("div", { style: styles.fileMeta, children: [formatFileSize(file.size_bytes), " \u2022 ", file.chunk_count, " chunks \u2022 ", formatDate(file.upload_date)] })] }), _jsx("div", { children: _jsx("button", { onClick: function () { return handleDeleteFile(file.file_id, file.filename); }, disabled: isDeletingFile === file.file_id || isLoading, style: __assign(__assign({}, styles.deleteButton), (isDeletingFile === file.file_id || isLoading
+                                    ? styles.deleteButtonDisabled
+                                    : {})), onMouseEnter: function (e) {
+                                    if (!e.currentTarget.disabled) {
+                                        e.currentTarget.style.backgroundColor = "#b91c1c";
+                                    }
+                                }, onMouseLeave: function (e) {
+                                    if (!e.currentTarget.disabled) {
+                                        e.currentTarget.style.backgroundColor = "#dc2626";
+                                    }
+                                }, children: isDeletingFile === file.file_id ? "Deleting..." : "Delete" }) })] }, file.file_id)); }) }))] }));
+}

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export { useTrainly } from "./useTrainly";
 export { TrainlyChat } from "./components/TrainlyChat";
 export { TrainlyUpload } from "./components/TrainlyUpload";
 export { TrainlyStatus } from "./components/TrainlyStatus";
-export type { TrainlyProviderProps, TrainlyConfig, ChatMessage, Citation, UploadResult, TrainlyError, } from "./types";
+export { TrainlyFileManager } from "./components/TrainlyFileManager";
+export type { TrainlyProviderProps, TrainlyConfig, ChatMessage, Citation, UploadResult, FileInfo, FileListResult, FileDeleteResult, TrainlyError, TrainlyFileManagerProps, } from "./types";

package/dist/index.js

@@ -5,3 +5,4 @@ export { useTrainly } from "./useTrainly";
 export { TrainlyChat } from "./components/TrainlyChat";
 export { TrainlyUpload } from "./components/TrainlyUpload";
 export { TrainlyStatus } from "./components/TrainlyStatus";
+export { TrainlyFileManager } from "./components/TrainlyFileManager";

package/dist/types.d.ts

@@ -34,11 +34,39 @@ export interface UploadResult {
     size: number;
     message?: string;
 }
+export interface FileInfo {
+    file_id: string;
+    filename: string;
+    upload_date: string;
+    size_bytes: number;
+    chunk_count: number;
+}
+export interface FileListResult {
+    success: boolean;
+    files: FileInfo[];
+    total_files: number;
+    total_size_bytes: number;
+}
+export interface FileDeleteResult {
+    success: boolean;
+    message: string;
+    file_id: string;
+    filename: string;
+    chunks_deleted: number;
+    size_bytes_freed: number;
+}
 export interface TrainlyError {
     code: string;
     message: string;
     details?: any;
 }
+export interface TrainlyFileManagerProps {
+    className?: string;
+    onFileDeleted?: (fileId: string, filename: string) => void;
+    onError?: (error: Error) => void;
+    showUploadButton?: boolean;
+    maxFileSize?: number;
+}
 export interface TrainlyContextValue {
     ask: (question: string) => Promise<string>;
     askWithCitations: (question: string) => Promise<{
@@ -46,6 +74,8 @@ export interface TrainlyContextValue {
         citations: Citation[];
     }>;
     upload: (file: File) => Promise<UploadResult>;
+    listFiles: () => Promise<FileListResult>;
+    deleteFile: (fileId: string) => Promise<FileDeleteResult>;
     connectWithOAuthToken: (idToken: string) => Promise<void>;
     isLoading: boolean;
     isConnected: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trainly/react",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Dead simple RAG integration for React apps with OAuth authentication",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,7 +25,10 @@
     "auth0",
     "retrieval-augmented-generation",
     "semantic-search",
-    "document-chat"
+    "document-chat",
+    "file-management",
+    "file-upload",
+    "file-deletion"
   ],
   "author": "Trainly",
   "license": "MIT",