Merge pull request #139 from VishalPawar1010/#78-Show-Snippet-Preview-When-Selected

feat: Added snippet preview

Author: shivaypiece

package.json

@@ -35,7 +35,8 @@
     "prettier": "^3.3.2",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.1.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "react-icons": "5.2.1"
   },
   "browserslist": {
     "production": [

src/app/App.tsx

@@ -9,6 +9,9 @@ import {connect} from './utils/Connect'
 import { Indicator } from "./components/Indicator/Indicator";
 import "./global.css";
 import WorkflowActivityList from "./components/WorkflowActivity";
+import Modal from "./components/Asset/Modal";
+import { AiFillEye } from 'react-icons/ai';
+
 import { OSApi } from "@pieces.app/pieces-os-client";
 import { config } from "../platform.config";
 const osApi = new OSApi(); // Create an instance of the OSApi
@@ -42,6 +45,19 @@ export function App(): React.JSX.Element {
   const [array, setArray] = useState<Array<LocalAsset>>([]);
   const [selectedIndex, setSelectedIndex] = useState<number>(-1);
   const [error, setError] = useState(null);
+  const [previewData, setPreviewData] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+
+  const handlePreview = async (snippetId:string) => {
+    try {
+      const asset = await new Pieces.AssetApi(config).assetSnapshot({ asset: snippetId });
+      console.log('asset ===', asset)
+      setPreviewData(asset);
+      setShowModal(true);
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   const [userName, setUserName] = useState(null);
 
@@ -270,8 +286,14 @@ export function App(): React.JSX.Element {
                   <div>
                     <h3>{item.name}</h3>
                     <div className="snippet-details">
-                      <p>{item.id}</p>
+                      {/* <p>{item.id}</p> */}
                       <p>{item.classification}</p>
+                  <button onClick={() => handlePreview(item.id)}><AiFillEye title="Preview"/></button>
+                  {showModal && (
+                      <Modal asset={previewData} onClose={() => setShowModal(false)} />
+                    )}
+                  <div>
+                </div>
                     </div>
                   </div>
                 </div>
@@ -295,9 +317,9 @@ export function App(): React.JSX.Element {
         </div>
 
         {/* this is the copilot container. the copilot logic is inside the /components/Copilot.tsx */}
-        <div className="copilot-container">
-        <CopilotChat />
-        </div>
+       
+            <CopilotChat />
+       
       </div>
     </>
   );

src/app/components/Asset/Modal.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const Modal = ({  onClose, asset }) => {
+  if (!asset) return null;
+
+  return (
+    <div style={{ zIndex:1000, position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ zIndex:1005, padding: 20, background: 'white', borderRadius: 5, width: '50%', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>
+        <h2>Snippet Details</h2>
+        <p>ID: {asset.id}</p>
+        <p>Name: {asset.name}</p>
+        <p>Mechanism: {asset?.mechanism}</p>
+        <p>Preview schema semantic: {asset.preview?.schema?.semantic}</p>
+        <button onClick={onClose} style={{ marginTop: 20 }}>Close</button>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/app/components/Copilot/Copilot.css

@@ -1,4 +1,15 @@
 /* Container styles */
+.copilot-container {
+  border: 2px solid black;
+  background-color: #0e1111;
+  height: 600px;
+  padding: 20px;
+  border-radius: 9px;
+  display: flex;
+  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
+  margin-top: 20px;
+}
+
 .container {
     width: -webkit-fill-available;
   }

src/app/components/Copilot/Copilot.tsx

@@ -126,6 +126,7 @@ export function CopilotChat(): React.JSX.Element {
   };
 
   return (
+    <div className="copilot-container">
     <div className="container">
       <div className="header">
         <div>
@@ -155,5 +156,6 @@ export function CopilotChat(): React.JSX.Element {
         </div>
       </div>
     </div>
+    </div>
   );
 }

src/app/global.css

@@ -203,16 +203,7 @@ html {
   flex-direction: column;
 }
 
-.copilot-container {
-  border: 2px solid black;
-  background-color: #0e1111;
-  height: 600px;
-  padding: 20px;
-  border-radius: 9px;
-  display: flex;
-  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
-  margin-top: 20px;
-}
+
 
 
 /* Common styles for the response formatting body */