|
| 1 | +import { useEffect, useRef } from 'react'; |
| 2 | +import { useAtom } from 'jotai'; |
| 3 | +import { showKymaCompanionAtom } from 'state/companion/showKymaCompanionAtom'; |
| 4 | + |
| 5 | +import { useCurrentResource } from 'components/KymaCompanion/utils/useResource'; |
| 6 | +import { useFeature } from 'hooks/useFeature'; |
| 7 | +import { configFeaturesNames } from 'state/types'; |
| 8 | + |
| 9 | +export default function JouleChat() { |
| 10 | + const [showKymaCompanion, setShowKymaCompanion] = useAtom( |
| 11 | + showKymaCompanionAtom, |
| 12 | + ); |
| 13 | + |
| 14 | + const { isEnabled, jouleConfig } = useFeature( |
| 15 | + configFeaturesNames.KYMA_COMPANION, |
| 16 | + ); |
| 17 | + |
| 18 | + const currentResource = useCurrentResource(); |
| 19 | + const resourceRef = useRef(currentResource); |
| 20 | + useEffect(() => { |
| 21 | + resourceRef.current = currentResource; |
| 22 | + }, [currentResource]); |
| 23 | + |
| 24 | + useEffect(() => { |
| 25 | + if (!isEnabled || !jouleConfig?.url || !jouleConfig?.botname) { |
| 26 | + return; |
| 27 | + } |
| 28 | + |
| 29 | + const dasProps = { |
| 30 | + url: jouleConfig.url, |
| 31 | + botname: jouleConfig.botname, |
| 32 | + }; |
| 33 | + |
| 34 | + window.sapdas = window.sapdas || {}; |
| 35 | + window.sapdas.webclientBridge = window.sapdas.webclientBridge || {}; |
| 36 | + |
| 37 | + window.sapdas.webclientBridge.onClose = () => { |
| 38 | + setShowKymaCompanion((prevState) => ({ |
| 39 | + ...prevState, |
| 40 | + show: false, |
| 41 | + })); |
| 42 | + }; |
| 43 | + |
| 44 | + const myBridgeImpl = { |
| 45 | + getApplicationContext: () => { |
| 46 | + return resourceRef.current; |
| 47 | + }, |
| 48 | + }; |
| 49 | + |
| 50 | + window.sapdas.webclientPreregistration = |
| 51 | + window.sapdas.webclientPreregistration || {}; |
| 52 | + window.sapdas.webclientPreregistration.myAppId = { |
| 53 | + callbacks: myBridgeImpl, |
| 54 | + priority: 3, // default prio, higher values are higher prio |
| 55 | + }; |
| 56 | + |
| 57 | + // Check if script already exists to avoid duplicates |
| 58 | + const existingScript = document.querySelector( |
| 59 | + `script[src="${dasProps.url}"]`, |
| 60 | + ); |
| 61 | + if (existingScript) return; |
| 62 | + |
| 63 | + const script = document.createElement('script'); |
| 64 | + script.src = dasProps.url; |
| 65 | + script.setAttribute('data-bot-name', dasProps.botname); |
| 66 | + script.setAttribute('data-expander-type', 'CUSTOM'); |
| 67 | + |
| 68 | + script.onload = () => { |
| 69 | + console.log('Joule Web Client loaded successfully'); |
| 70 | + }; |
| 71 | + |
| 72 | + script.onerror = () => { |
| 73 | + console.error('Failed to load Joule Web Client'); |
| 74 | + }; |
| 75 | + |
| 76 | + document.head.appendChild(script); |
| 77 | + |
| 78 | + return () => { |
| 79 | + if (script.parentNode) { |
| 80 | + script.parentNode.removeChild(script); |
| 81 | + } |
| 82 | + if (window.sapdas?.webclientBridge) { |
| 83 | + delete window.sapdas.webclientBridge.onClose; |
| 84 | + } |
| 85 | + }; |
| 86 | + }, [isEnabled, jouleConfig, setShowKymaCompanion]); |
| 87 | + |
| 88 | + // Control visibility based on Jotai state |
| 89 | + useEffect(() => { |
| 90 | + if (!isEnabled) return; |
| 91 | + |
| 92 | + const webclient = window.sap?.das?.webclient; |
| 93 | + if (!webclient) return; |
| 94 | + |
| 95 | + if ( |
| 96 | + showKymaCompanion.show && |
| 97 | + showKymaCompanion.useJoule && |
| 98 | + !webclient.isOpen() |
| 99 | + ) { |
| 100 | + webclient.show(); |
| 101 | + } else if (!showKymaCompanion.show && webclient.isOpen()) { |
| 102 | + webclient.hide(); |
| 103 | + } |
| 104 | + }, [isEnabled, showKymaCompanion]); |
| 105 | + |
| 106 | + return null; |
| 107 | +} |
0 commit comments