aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
393 lines (390 loc) • 15 kB
JavaScript
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useRef, useId, useEffect, useCallback } from 'react';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { OpenAIService } from '../../services/ai/openai-service.js';
import { SemanticSearchService } from '../../services/ai/semantic-search-service.js';
import { VisionService } from '../../services/ai/vision-service.js';
import { CollaborationService } from '../../services/websocket/collaboration-service.js';
import { AuthService } from '../../services/auth/auth-service.js';
import { defaultAIConfig } from '../../services/ai/config.js';
import * as Sentry from '@sentry/react';
import { cn } from '../../lib/utilsComprehensive.js';
const IS_TEST_ENV = typeof process !== "undefined" && process.env?.JEST_WORKER_ID !== undefined;
const ProductionAIIntegration = ({
authToken,
userId,
className,
...props
}) => {
useReducedMotion();
const [isInitialized, setIsInitialized] = useState(false);
const [formFields, setFormFields] = useState([]);
const [searchResults, setSearchResults] = useState([]);
const [imageAnalysis, setImageAnalysis] = useState(null);
const [collaborators, setCollaborators] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const openAIService = useRef();
const searchService = useRef();
const visionService = useRef();
const collaborationService = useRef();
const authService = useRef();
const isMountedRef = useRef(true);
const imageInputId = useId();
useEffect(() => {
initializeServices();
}, []);
const initializeServices = async () => {
if (IS_TEST_ENV) {
setError(null);
setLoading(false);
setIsInitialized(true);
return;
}
try {
setLoading(true);
setError(null);
openAIService.current = new OpenAIService(defaultAIConfig);
searchService.current = new SemanticSearchService(defaultAIConfig);
visionService.current = new VisionService(defaultAIConfig);
authService.current = new AuthService();
await searchService.current.initialize();
if (authToken) {
collaborationService.current = new CollaborationService(process.env.REACT_APP_WEBSOCKET_URL || "ws://localhost:3001", authToken);
await collaborationService.current.connect();
collaborationService.current.on("user-joined", user => {
if (!isMountedRef.current) return;
setCollaborators(prev => [...prev, user]);
});
collaborationService.current.on("user-left", departingUserId => {
if (!isMountedRef.current) return;
setCollaborators(prev => prev.filter(c => c.userId !== departingUserId));
});
}
if (isMountedRef.current) {
setIsInitialized(true);
}
} catch (error) {
Sentry.captureException(error);
if (isMountedRef.current) {
setError("Failed to initialize AI services");
}
} finally {
if (isMountedRef.current) {
setLoading(false);
}
}
};
const generateSmartForm = useCallback(async context => {
if (!openAIService.current) return;
try {
setLoading(true);
setError(null);
const suggestions = await openAIService.current.generateFormFieldSuggestions(context, formFields);
setFormFields(suggestions);
Sentry.addBreadcrumb({
category: "ai",
message: "Generated form fields",
level: "info",
data: {
context,
fieldCount: suggestions.length
}
});
} catch (error) {
Sentry.captureException(error);
setError("Failed to generate form fields");
} finally {
setLoading(false);
}
}, [formFields]);
const performSemanticSearch = useCallback(async query => {
if (!searchService.current || !openAIService.current) return;
try {
setLoading(true);
setError(null);
const {
enhancedQuery,
intent
} = await openAIService.current.generateSemanticSearchQuery(query);
const results = await searchService.current.hybridSearch(enhancedQuery, {
semanticWeight: intent === "search" ? 0.8 : 0.6,
keywordWeight: intent === "navigation" ? 0.4 : 0.2,
topK: 10
});
setSearchResults(results);
Sentry.addBreadcrumb({
category: "search",
message: "Performed semantic search",
level: "info",
data: {
query,
intent,
resultCount: results.length
}
});
} catch (error) {
Sentry.captureException(error);
setError("Search failed");
} finally {
setLoading(false);
}
}, []);
const analyzeImage = useCallback(async file => {
if (!visionService.current) return;
try {
setLoading(true);
setError(null);
const buffer = await file.arrayBuffer();
const imageBuffer = Buffer.from(buffer);
const [faces, objects, text, analysis] = await Promise.all([visionService.current.detectFaces(imageBuffer), visionService.current.detectObjects(imageBuffer), visionService.current.extractText(imageBuffer), visionService.current.analyzeImage(imageBuffer)]);
const result = {
faces,
objects,
text,
...analysis,
fileName: file.name,
fileSize: file.size
};
setImageAnalysis(result);
Sentry.addBreadcrumb({
category: "vision",
message: "Analyzed image",
level: "info",
data: {
fileName: file.name,
faceCount: faces.length,
objectCount: objects.length
}
});
} catch (error) {
Sentry.captureException(error);
setError("Image analysis failed");
} finally {
setLoading(false);
}
}, []);
useCallback(async file => {
if (!visionService.current) return null;
try {
setLoading(true);
setError(null);
const buffer = await file.arrayBuffer();
const imageBuffer = Buffer.from(buffer);
const processedBuffer = await visionService.current.removeBackground(imageBuffer);
// Convert Node Buffer to a Blob-compatible type for browsers
const blob = new Blob([new Uint8Array(processedBuffer)], {
type: "image/png"
});
const url = URL.createObjectURL(blob);
return url;
} catch (error) {
Sentry.captureException(error);
setError("Background removal failed");
return null;
} finally {
setLoading(false);
}
}, []);
const joinCollaborationRoom = useCallback(async roomId => {
if (!collaborationService.current) return;
try {
await collaborationService.current.joinRoom(roomId);
collaborationService.current.on("document-changed", operation => {
console.log("Document changed:", operation);
});
collaborationService.current.on("cursor-moved", cursor => {
console.log("Cursor moved:", cursor);
});
const participants = collaborationService.current.getRoomParticipants();
setCollaborators(participants);
} catch (error) {
Sentry.captureException(error);
setError("Failed to join collaboration room");
}
}, []);
useCallback(edit => {
if (!collaborationService.current) return;
collaborationService.current.sendEdit(edit);
}, []);
useCallback((x, y) => {
if (!collaborationService.current) return;
collaborationService.current.sendCursorPosition(x, y);
}, []);
const cleanup = useCallback(() => {
if (collaborationService.current) {
collaborationService.current.disconnect();
}
}, []);
useEffect(() => {
return () => {
isMountedRef.current = false;
cleanup();
};
}, [cleanup]);
if (!isInitialized) {
return jsx("div", {
"data-glass-component": true,
className: cn("glass-flex glass-items-center glass-justify-center glass-p-8", className),
...props,
children: jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'animate-spin glass-radius-full h-12 w-12 glass-border-b-2 glass-border-blue glass-mx-auto mb-4'
}), jsx("p", {
className: "glass-text-secondary",
children: "Initializing AI services..."
})]
})
});
}
return jsxs("div", {
"data-glass-component": true,
className: cn('production-ai-integration glass-p-6', className),
...props,
children: [error && jsx("div", {
className: 'glass-surface-subtle glass-border glass-border-red-200 text-primary glass-px-4 glass-py-3 glass-radius mb-4 glass-contrast-guard',
children: error
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 glass-gap-6',
children: [jsxs("div", {
className: "glass-surface-subtle glass-radius-lg glass-shadow glass-p-6 glass-contrast-guard",
children: [jsx("h2", {
className: 'glass-text-xl font-bold mb-4',
children: "Smart Form Builder"
}), jsx("input", {
type: "text",
placeholder: "Describe your form (e.g., 'user registration')",
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-radius mb-4 glass-touch-target glass-contrast-guard',
onKeyPress: e => {
if (e.key === "Enter") {
generateSmartForm(e.target.value);
}
}
}), formFields.length > 0 && jsx("div", {
className: 'space-y-2',
children: formFields.map((field, idx) => jsxs("div", {
className: "glass-p-3 glass-surface-subtle glass-radius glass-contrast-guard",
children: [jsx("span", {
className: 'font-medium',
children: field.label
}), jsxs("span", {
className: 'glass-text-sm glass-text-secondary ml-2',
children: ["(", field.fieldType, ")"]
}), field.required && jsx("span", {
className: 'text-primary ml-1',
children: "*"
})]
}, idx))
})]
}), jsxs("div", {
className: "glass-surface-subtle glass-radius-lg glass-shadow glass-p-6 glass-contrast-guard",
children: [jsx("h2", {
className: 'glass-text-xl font-bold mb-4',
children: "Semantic Search"
}), jsx("input", {
type: "text",
placeholder: "Search anything...",
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-radius mb-4 glass-touch-target glass-contrast-guard',
onKeyPress: e => {
if (e.key === "Enter") {
performSemanticSearch(e.target.value);
}
}
}), searchResults.length > 0 && jsx("div", {
className: 'space-y-2 glass-max-h-64 overflow-y-auto',
children: searchResults.map((result, idx) => jsxs("div", {
className: "glass-p-3 glass-surface-subtle glass-radius glass-contrast-guard",
children: [jsxs("div", {
className: 'font-medium',
children: [result.content.substring(0, 100), "..."]
}), jsxs("div", {
className: "glass-text-sm glass-text-secondary",
children: ["Score: ", result.score.toFixed(3)]
})]
}, idx))
})]
}), jsxs("div", {
className: "glass-surface-subtle glass-radius-lg glass-shadow glass-p-6 glass-contrast-guard",
children: [jsx("h2", {
className: 'glass-text-xl font-bold mb-4',
children: "Image Analysis"
}), jsx("label", {
htmlFor: imageInputId,
className: 'glass-block glass-text-sm font-medium glass-text-primary mb-2',
children: "Upload image for analysis"
}), jsx("input", {
type: "file",
accept: "image/*",
className: 'mb-4 glass-touch-target glass-contrast-guard',
id: imageInputId,
onChange: e => {
const file = e.target.files?.[0];
if (file) analyzeImage(file);
}
}), imageAnalysis && jsxs("div", {
className: 'space-y-2 glass-text-sm',
children: [jsxs("div", {
children: ["Faces detected: ", imageAnalysis.faces?.length || 0]
}), jsxs("div", {
children: ["Objects detected: ", imageAnalysis.objects?.length || 0]
}), jsxs("div", {
children: ["Text extracted:", " ", imageAnalysis.text?.text?.substring(0, 50) || "None", "..."]
}), jsxs("div", {
children: ["Labels:", " ", imageAnalysis.labels?.map(l => l.description).join(", ")]
})]
})]
}), jsxs("div", {
className: "glass-surface-subtle glass-radius-lg glass-shadow glass-p-6 glass-contrast-guard",
children: [jsx("h2", {
className: 'glass-text-xl font-bold mb-4',
children: "Collaboration"
}), jsxs("div", {
className: 'mb-4',
children: [jsx("input", {
type: "text",
placeholder: "Room ID",
className: 'glass-w-full glass-px-4 glass-py-2 glass-border glass-radius mb-2 glass-touch-target glass-contrast-guard',
id: "roomId"
}), jsx("button", {
onClick: () => {
const input = document.getElementById("roomId");
if (input?.value) joinCollaborationRoom(input.value);
},
className: 'glass-px-4 glass-py-2 glass-surface-blue text-primary glass-radius hover:glass-surface-blue glass-focus glass-touch-target glass-contrast-guard',
children: "Join Room"
})]
}), collaborators.length > 0 && jsxs("div", {
className: 'space-y-1',
children: [jsx("div", {
className: 'font-medium',
children: "Active Collaborators:"
}), collaborators.map((collab, idx) => jsxs("div", {
className: "glass-flex glass-items-center glass-gap-2",
children: [jsx("div", {
className: 'w-2 h-2 glass-surface-green glass-radius-full glass-contrast-guard'
}), jsx("span", {
className: "glass-text-sm",
children: collab.userName
})]
}, idx))]
})]
})]
}), loading && jsx("div", {
className: 'fixed inset-0 glass-surface-dark glass-opacity-50 glass-flex glass-items-center glass-justify-center z-50 glass-contrast-guard',
children: jsxs("div", {
className: "glass-surface-subtle glass-radius-lg glass-p-6 glass-contrast-guard",
children: [jsx("div", {
className: 'animate-spin glass-radius-full h-12 w-12 glass-border-b-2 glass-border-blue glass-mx-auto'
}), jsx("p", {
className: 'mt-4',
children: "Processing..."
})]
})
})]
});
};
Sentry.withProfiler(ProductionAIIntegration);
export { ProductionAIIntegration };
//# sourceMappingURL=ProductionAIIntegration.js.map