diff --git a/src/app/App.tsx b/src/app/App.tsx index 130e6af..979af63 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -6,8 +6,10 @@ import {DataTextInput, DeleteAssetButton, RenameAssetInput} from './components/T import {Header} from './components/Header' import {CopilotChat} from './components/Copilot' import {connect} from './utils/Connect' +import { Indicator } from "./components/Indicator"; import CopilotStreamController from "./controllers/copilotStreamController"; + // types type LocalAsset = { name: string, @@ -31,6 +33,7 @@ export function App(): React.JSX.Element { const [array, setArray] = useState>([]); const [selectedIndex, setSelectedIndex] = useState(-1); + const [error, setError] = useState(null); const refresh = (_newAsset: LocalAsset) => { setArray(prevArray => [...prevArray, _newAsset]) @@ -64,14 +67,25 @@ export function App(): React.JSX.Element { refresh(_local); } - }) - + }).catch((error) => { + console.error(error); + setError(true); + }); } + return (
-
- +
+ {error &&
Pieces OS is not running in the background. Click You're Not Connected to connect
}
{ if (_indicator != null) { __ != undefined ? _indicator.style.backgroundColor = "green" : _indicator.style.backgroundColor = "red"; } + + _indicator.firstElementChild.innerHTML = __ != undefined ? "You're Connected!" : "You're Not Connected"; // @agrim implemented - Upon connecting to the Pieces OS, there is a need to enhance the user experience by implementing a timer // that automatically hides the "You're Connected" text and shrinks the button after a certain duration diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index 6608df3..191835d 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -2,14 +2,18 @@ import * as React from 'react' import { Indicator } from "./Indicator" +// this is the header element with its children: +interface HeaderProps { + isConnected: boolean +} // Header element with connection indicator nested inside, shows if pieces os is running. // We don't support logic for detecting the offline status but will be adding it soon! -export function Header(): React.JSX.Element { +export function Header({isConnected}:HeaderProps): React.JSX.Element { return (

Pieces OS Client SDK for TypescriptOpen Source by Pieces

- +
) } \ No newline at end of file diff --git a/src/app/components/Indicator.tsx b/src/app/components/Indicator.tsx index 543ab34..6b3ad2c 100644 --- a/src/app/components/Indicator.tsx +++ b/src/app/components/Indicator.tsx @@ -2,19 +2,25 @@ import * as React from "react"; // @ts-ignore import check from "../icons/check.png"; +import { launchPiecesOS } from "../utils/launchPiecesOS"; + +interface IndicatorProps{ + isConnected: boolean +} // this is your indicator badge that we will manipulate through the initial connect call. it will either // be green or red depending on the current status. -export function Indicator(): React.JSX.Element { +export function Indicator({isConnected}:IndicatorProps): React.JSX.Element { return ( - <> -
- {/*

Connection Status

*/} -
- You're Connected! - {"checkmark"} -
+ <> +
+ +
+ + ); } \ No newline at end of file diff --git a/src/app/utils/launchPiecesOS.tsx b/src/app/utils/launchPiecesOS.tsx new file mode 100644 index 0000000..cfe759f --- /dev/null +++ b/src/app/utils/launchPiecesOS.tsx @@ -0,0 +1,35 @@ +import { connect } from './Connect';; // Import the Promise type + +const launchPiecesOS = async () => { + const url: string = 'pieces://launch'; + try { + const isPiecesOSConnected = navigator.userAgent.includes('PiecesOS'); + if (isPiecesOSConnected) { + console.log("Pieces OS is already connected."); + // Perform any additional actions for connected state + } else { + await window.open(url, '_blank'); + console.log("Pieces OS is installed."); + window.location.reload();// Refresh the page + } + } catch { + console.error("Pieces OS is not installed."); + } + finally { + connect().then((data: JSON) => { + // define the indicator now that it exists. + const _indicator = document.getElementById("indicator"); + + // conditional for the response back on application. + // + // (1) first @jordan-pieces came in here and added this turing statement here inside a new + // if statement. this is an upgrade in comparison to the previous if statement that would not check to + // see if the _indicator itself is added to the DOM yet. + if (_indicator != null) { + _indicator != undefined ? _indicator.style.backgroundColor = "green" : _indicator.style.backgroundColor = "red"; + } + _indicator.firstElementChild.innerHTML = _indicator != undefined ? "You're Connected!" : "You're Not Connected"; + }) + } // Add a missing closing parenthesis and semicolon here +} +export { launchPiecesOS }; \ No newline at end of file