Implement Button Functionality for Launching Pieces OS

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<Array<LocalAsset>>([]);
   const [selectedIndex, setSelectedIndex] = useState<number>(-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 (
       <div style={{ padding: '10px 20px' }}>
-          <Header />
-
+      <Header isConnected={ !error} />
+      {error && <div style={{border: '2px solid black',
+        backgroundColor: '#0e1111',
+          color: 'red',
+          minWidth: '1175px',
+          maxWidth: '1175px',
+          padding: '20px',
+          borderRadius: '9px',
+          display: "flex",
+        boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)',marginBottom:"10px"}}> Pieces OS is not running in the background. Click You're Not Connected to connect </div>}
         <div style={{
           // width: "auto",
           border: '2px solid black',
@@ -191,6 +205,8 @@ connect().then(__ => {
   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

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 (
       <div style={{ display: 'flex', flexDirection: "row", justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'black', padding: '0px 10px', marginBottom: '1rem', boxShadow: '-4px 4px 5px rgba(0,0,0, 0.2)', borderRadius: '10px', minWidth: '1200px', maxWidth: '1200px'}}>
         <h3 style={{color: 'white', fontWeight: 'normal' }}>Pieces OS Client SDK for Typescript<span style={{ fontSize: '8px', marginLeft: '5px', fontWeight: '100' }}>Open Source by Pieces</span></h3>
-        <Indicator />
+      <Indicator isConnected={ isConnected} />
       </div>
   )
 }

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 (
-      <>
-          <div style={{ display: "inherit", justifyContent: 'center', alignItems: 'center' }}>
-              {/*<p style={{ paddingRight: '10px' }}>Connection Status</p>*/}
-              <div id={"indicator"} style={{ backgroundColor: "red", height: '24px', borderRadius: '20px', border: '1px solid black', padding: '2px 10px', display: 'flex', flexWrap: 'wrap', alignItems: 'center'  }}>
-                <span id={"indicator_text"} style={{ color: "white", fontSize: '14px' }}>You're Connected!</span>
-                <img id={"checkmark"} src={check} alt={"checkmark"} style={{height: "20px", width: '20px', margin: '0 5px'}}/>
-              </div>
+    <>
+      <div style={{ display: "inherit", justifyContent: 'center', alignItems: 'center' }}>
+        <button style={{background:"transparent", border: '1px solid black'}}>
+          <div id={"indicator"} style={{ backgroundColor: isConnected?"Green":"red" , height: '24px', borderRadius: '20px', border: '1px solid black', padding: '4px 10px', display: 'flex', flexWrap: 'wrap', alignItems: 'center'  }} onClick={launchPiecesOS}>
+            <span id={"indicator_text"} style={{ color: "white", fontSize: '14px' }}>{isConnected?"You're Connected":"You're Not Connected"  }</span>
+            <img id={"checkmark"} src={check} alt={"checkmark"} style={{height: "20px", width: '20px', margin: '0 5px'}}/>
           </div>
-      </>
-  )
+        </button>
+      </div>
+    </>
+  );
 }

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 };