@piedata/pieui 1.0.1 → 1.1.0

package/src/util/initializeComponents.ts

@@ -0,0 +1,84 @@
+import { registerPieComponent } from './registry'
+
+// Import all components that need registration
+import SequenceCard from '../components/Containers/SequenceCard/ui/SequenceCard'
+import UnionCard from '../components/Containers/UnionCard/ui/UnionCard'
+import AjaxGroupCard from '../components/Containers/AjaxGroupCard/ui/AjaxGroupCard'
+
+import AjaxButtonCard from '../components/Buttons/AjaxButtonCard/ui/AjaxButtonCard'
+
+import ChatCard from '../components/Chats/ChatCard/ui/ChatCard'
+
+let initialized = false
+
+/**
+ * Initialize all PieUI components by registering them in the component registry.
+ * This function should be called once before using PieRoot or any dynamic components.
+ *
+ * @example
+ * ```typescript
+ * import { initializePieComponents } from 'pieui'
+ *
+ * // Call this once in your app initialization
+ * initializePieComponents()
+ * ```
+ */
+export function initializePieComponents(): void {
+    if (initialized) {
+        return
+    }
+
+    // Register all built-in components
+    registerPieComponent({
+        name: 'SequenceCard',
+        component: SequenceCard,
+        metadata: {
+            author: "PieData",
+            description: "Simple div with styles joining few components"
+        }
+    })
+
+    registerPieComponent({
+        name: 'UnionCard',
+        component: UnionCard,
+        metadata: {
+            author: "PieData",
+            description: "Renders one of many components"
+        }
+    })
+
+    registerPieComponent({
+        name: 'AjaxGroupCard',
+        component: AjaxGroupCard,
+        metadata: {
+            author: "PieData",
+            description: "Group card with AJAX support"
+        }
+    })
+
+    registerPieComponent({
+        name: 'AjaxButtonCard',
+        component: AjaxButtonCard,
+        metadata: {
+            author: "PieData",
+            description: "Button with AJAX support"
+        }
+    })
+
+    registerPieComponent({
+        name: 'ChatCard',
+        component: ChatCard,
+        metadata: {
+            author: "PieData",
+        }
+    })
+
+    initialized = true
+}
+
+/**
+ * Check if PieUI components have been initialized
+ */
+export function isPieComponentsInitialized(): boolean {
+    return initialized
+}

package/src/util/lazy.ts

@@ -0,0 +1,25 @@
+import { lazy, ComponentType, LazyExoticComponent } from 'react'
+
+const moduleCache = new Map<string, any>()
+
+export function trackLazy<T extends ComponentType<any>>(
+    loader: () => Promise<{ default: T }>,
+    name: string,
+): LazyExoticComponent<T> {
+    return lazy(() => {
+        if (moduleCache.has(name)) {
+            return moduleCache.get(name)!
+        }
+        const promise = loader().then((mod) => mod)
+        moduleCache.set(name, promise)
+        return promise
+    })
+}
+
+export const preloadComponent = async (name: string, loader?: () => Promise<any>) => {
+    if (!loader) return
+    if (moduleCache.has(name)) return moduleCache.get(name)
+    const promise = loader().then((mod) => mod)
+    moduleCache.set(name, promise)
+    return promise
+}

package/src/util/mitt.ts

@@ -0,0 +1,11 @@
+import mitt from 'mitt'
+import { createContext } from 'react'
+
+export const emitter = mitt()
+export type MittEvents = {
+    [key: string]: any
+}
+
+const MittContext = createContext(emitter)
+
+export default MittContext

package/src/util/pieConfig.ts

@@ -0,0 +1,43 @@
+import {createContext, useContext} from "react";
+import {PieConfig} from "../types";
+
+
+export const PieConfigContext = createContext<PieConfig | null>(null)
+
+export const usePieConfig = () => {
+    const context = useContext(PieConfigContext)
+    if (!context) {
+        throw new Error('usePieConfig must be used within PieConfigProvider')
+    }
+    return context
+}
+
+// Helper functions that match the old API
+export const useApiServer = () => {
+    const { apiServer } = usePieConfig()
+    return apiServer
+}
+
+export const getApiServer = useApiServer
+
+
+export const useCentrifugeServer = () => {
+    const { centrifugeServer } = usePieConfig()
+    return centrifugeServer
+}
+
+export const getCentrifugeServer = useCentrifugeServer
+
+export const useIsRenderingLogEnabled = () => {
+    const { enableRenderingLog } = usePieConfig()
+    return enableRenderingLog
+}
+
+export const isRenderingLogEnabled = useIsRenderingLogEnabled
+
+export const usePageProcessor = () => {
+    const { pageProcessor } = usePieConfig()
+    return pageProcessor
+}
+
+export const getPageProcessor = usePageProcessor

package/src/util/registry.ts

@@ -0,0 +1,81 @@
+import {ComponentMetadata, ComponentRegistration} from '../types'
+import {trackLazy} from './lazy'
+import {ComponentType} from 'react'
+
+const registry = new Map<string, ComponentRegistration<any>>()
+
+
+const normalizeRegistration = <TProps,>(
+    registration: ComponentRegistration<TProps>
+): ComponentRegistration<TProps> => {
+    if (!registration.name) {
+        throw new Error('Component registration requires a name')
+    }
+
+    if (!registration.component && !registration.loader) {
+        throw new Error(`Component "${registration.name}" requires component or loader`)
+    }
+
+    const entry: ComponentRegistration<TProps> = {
+        name: registration.name,
+        component: registration.component,
+        loader: registration.loader,
+        metadata: registration.metadata,
+        fallback: registration.fallback,
+        isLazy: false,
+    }
+
+    if (!entry.component && entry.loader) {
+        entry.component = trackLazy(
+            entry.loader,
+            registration.name
+        ) as ComponentType<TProps>
+        entry.loader = undefined
+        entry.isLazy = true
+    }
+
+    return entry
+}
+
+
+export function registerPieComponent<TProps>(
+    registration: ComponentRegistration<TProps>
+): ComponentType<TProps> | undefined {
+    const entry = normalizeRegistration(registration)
+    registry.set(entry.name, entry)
+    return entry.component
+}
+
+
+export const registerMultipleComponents = (
+    components: ComponentRegistration<any>[]
+) => {
+    components.forEach((component) => registerPieComponent(component))
+}
+
+export const unregisterComponent = (name: string) => {
+    registry.delete(name)
+}
+
+export const hasComponent = (name: string) => {
+    return registry.has(name)
+}
+
+export const getComponentMeta = (name: string): ComponentMetadata | undefined => {
+    return registry.get(name)?.metadata
+}
+
+
+export const getRegistryEntry = (
+    name: string
+): ComponentRegistration<any> | undefined => {
+    return registry.get(name)
+}
+
+export const getAllRegisteredComponents = (): string[] => {
+    return Array.from(registry.keys())
+}
+
+export const getRegistrySize = (): number => {
+    return registry.size
+}

package/src/util/socket.ts

@@ -0,0 +1,24 @@
+import {io, Socket} from 'socket.io-client'
+import { createContext } from 'react'
+
+// export const socket = io(getApiServer(), {
+//     autoConnect: false,
+//     transports: ['websocket'],
+// })
+
+export const getSocket = (apiServer: string) => io(apiServer, {
+    autoConnect: false,
+    transports: ['websocket'],
+})
+
+/*
+const onPieInitEvent = (event) => {
+    window.sid = event.sid
+    console.log(`Connected: ${window.sid}`)
+}
+socket.on(`pieinit`, onPieInitEvent)
+*/
+
+const SocketIOContext = createContext<Socket | null>(null)
+
+export default SocketIOContext

package/src/util/sx2radium.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react'
+import Radium from 'radium'
+
+export function sx2radium(sx: Record<string, any> | CSSProperties | undefined): CSSProperties {
+    if (!sx) {
+        return {}
+    }
+
+    const copy = { ...sx }
+    if ('animationName' in copy && typeof copy.animationName === 'object') {
+        const uniqueAnimationName = 'radiumAnimation_' + Math.random().toString(36).substring(2, 8)
+        copy.animationName = Radium.keyframes(copy.animationName, uniqueAnimationName)
+    }
+    return copy
+}

package/src/util/tailwindCommonUtils.ts

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

package/src/util/useIsSupported.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export function useIsSupported(apiServer: string, name: string): boolean | null {
+    const [isSupported, setIsSupported] = useState<boolean | null>(null)
+    const [supportIsRequested, setSupportIsRequested] = useState(false)
+    useEffect(() => {
+        if (!supportIsRequested) {
+            setSupportIsRequested(true)
+            fetch(apiServer + `api/support/${name}`, { method: 'GET' })
+                .then((res) => res.json())
+                .then((res) => {
+                    setIsSupported(res)
+                })
+        }
+    }, [])
+    return isSupported
+}

package/src/util/useOpenAIWebRTC.ts

@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export type OpenAIEvent = {
+    type: string
+    event_id?: string
+    timestamp?: string
+    [key: string]: any
+}
+
+export type UseOpenAIWebRTCReturn = {
+    isSessionActive: boolean
+    startSession: (ephemeralKey: string, useMicrophone?: boolean) => Promise<void>
+    stopSession: () => void
+    sendTextMessage: (text: string) => void
+}
+
+// Создаём немой аудио-трек для случаев без микрофона
+function createSilentAudioTrack(): MediaStreamTrack {
+    const ctx = new AudioContext()
+    const oscillator = ctx.createOscillator()
+    const dst = oscillator.connect(ctx.createMediaStreamDestination())
+    oscillator.start()
+
+    const track = (dst as any).stream.getAudioTracks()[0]
+    track.enabled = false
+    return track
+}
+
+export default function useOpenAIWebRTC(
+    audioElement: HTMLAudioElement | null = null,
+    onEvent?: (event: OpenAIEvent) => void
+): UseOpenAIWebRTCReturn {
+    const [isSessionActive, setIsSessionActive] = useState<boolean>(false)
+    const peerConnection = useRef<RTCPeerConnection | null>(null)
+    const dataChannelRef = useRef<RTCDataChannel | null>(null)
+    const waitForDataChannelOpen = useRef<Promise<void> | null>(null)
+
+    const startSession = useCallback(async (ephemeralKey: string, useMicrophone: boolean = true) => {
+        if (peerConnection.current) stopSession()
+
+        const pc = new RTCPeerConnection()
+
+        // Обновляем isSessionActive по реальному состоянию соединения
+        pc.onconnectionstatechange = () => {
+            if (pc.connectionState === 'connected') {
+                setIsSessionActive(true)
+            } else if (['disconnected', 'failed', 'closed'].includes(pc.connectionState)) {
+                setIsSessionActive(false)
+            }
+        }
+
+        pc.ontrack = (e: RTCTrackEvent) => {
+            if (audioElement) audioElement.srcObject = e.streams[0]
+        }
+
+        if (useMicrophone) {
+            const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true })
+            pc.addTrack(mediaStream.getTracks()[0], mediaStream)
+        } else {
+            const silentTrack = createSilentAudioTrack()
+            pc.addTrack(silentTrack)
+        }
+
+        const dc = pc.createDataChannel('oai-events')
+        dataChannelRef.current = dc
+
+        // Promise ждёт открытия DataChannel
+        waitForDataChannelOpen.current = new Promise<void>((resolve) => {
+            dc.addEventListener('open', () => {
+                resolve()
+            })
+        })
+
+        const offer = await pc.createOffer()
+        await pc.setLocalDescription(offer)
+
+        const baseUrl = 'https://api.openai.com/v1/realtime/calls'
+        const model = 'gpt-realtime'
+        const sdpResponse = await fetch(`${baseUrl}?model=${model}`, {
+            method: 'POST',
+            body: offer.sdp,
+            headers: {
+                Authorization: `Bearer ${ephemeralKey}`,
+                'Content-Type': 'application/sdp',
+            },
+        })
+
+        const sdp = await sdpResponse.text()
+        await pc.setRemoteDescription({ type: 'answer', sdp })
+
+        peerConnection.current = pc
+
+        // ждём открытия DataChannel, чтобы можно было безопасно отправлять сообщения
+        await waitForDataChannelOpen.current
+    }, [audioElement])
+
+    const stopSession = useCallback(() => {
+        const dc = dataChannelRef.current
+        if (dc) dc.close()
+
+        peerConnection.current?.getSenders()?.forEach(sender => sender.track?.stop())
+        peerConnection.current?.close()
+
+        setIsSessionActive(false)
+        peerConnection.current = null
+        dataChannelRef.current = null
+        waitForDataChannelOpen.current = null
+    }, [audioElement])
+
+    const sendClientEvent = useCallback((message: OpenAIEvent) => {
+        const dc = dataChannelRef.current
+        if (!dc) {
+            console.error('Data channel is not ready', message)
+            return
+        }
+
+        const timestamp = new Date().toLocaleTimeString()
+        message.event_id = message.event_id || crypto.randomUUID()
+
+        dc.send(JSON.stringify(message))
+
+        if (!message.timestamp) message.timestamp = timestamp
+        onEvent?.(message)
+    }, [onEvent, audioElement])
+
+    const sendTextMessage = useCallback((text: string) => {
+        const dc = dataChannelRef.current
+        if (!dc) {
+            console.error('Data channel is not ready')
+            return
+        }
+
+        const send = () => {
+            const event: OpenAIEvent = {
+                type: 'conversation.item.create',
+                item: {
+                    type: 'message',
+                    role: 'user',
+                    content: [{ type: 'input_text', text }],
+                },
+            }
+            sendClientEvent(event)
+            sendClientEvent({ type: 'response.create' })
+        }
+
+        // Ждём открытия канала, если ещё не открылся
+        if (waitForDataChannelOpen.current) {
+            waitForDataChannelOpen.current.then(send)
+        } else {
+            send()
+        }
+    }, [onEvent, audioElement])
+
+    useEffect(() => {
+        const dc = dataChannelRef.current
+        if (!dc) return
+
+        const handleMessage = (e: MessageEvent) => {
+            const event: OpenAIEvent = JSON.parse(e.data)
+            if (!event.timestamp) event.timestamp = new Date().toLocaleTimeString()
+            onEvent?.(event)
+        }
+
+        dc.addEventListener('message', handleMessage)
+        return () => {
+            dc.removeEventListener('message', handleMessage)
+        }
+    }, [onEvent, audioElement])
+
+    return {
+        isSessionActive,
+        startSession,
+        stopSession,
+        sendTextMessage,
+    }
+}

package/src/util/useWebApp.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { getPageProcessor } from './pieConfig'
+import { InitData, InitDataUnsafe, WebApp } from '../types'
+
+export const useWebApp = (): WebApp | null => {
+    const [webApp, setWebApp] = useState<WebApp | null>(null)
+    const pageProcessor = getPageProcessor()
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return
+
+        const wApp = window.Telegram.WebApp
+        wApp.ready()
+
+        if (
+            pageProcessor === 'telegram_expanded' &&
+            (wApp.platform === 'ios' || wApp.platform === 'android')
+        ) {
+            wApp.expand()
+        }
+
+        setWebApp(wApp)
+    }, [])
+
+    return webApp
+}
+
+export const useInitData = (): readonly [InitDataUnsafe | undefined, InitData | undefined] => {
+    const webApp = useWebApp()
+
+    return [webApp?.initDataUnsafe, webApp?.initData] as const
+}

package/src/util/waitForSidAvailable.ts

@@ -0,0 +1,21 @@
+
+
+export default function waitForSidAvailable(interval = 1000) {
+    return new Promise<void>((resolve) => {
+        if (typeof window === 'undefined') {
+            // На сервере просто резолвим сразу или кидаем ошибку
+            resolve()
+            return
+        }
+
+        const check = () => {
+            if (typeof window.sid !== 'undefined') {
+                resolve()
+            } else {
+                setTimeout(check, interval)
+            }
+        }
+
+        check()
+    })
+}