From 2612e934dd6c7a101889e4826c5db15f6b49ae4a Mon Sep 17 00:00:00 2001 From: Vishal Pawar Date: Tue, 23 Jul 2024 06:38:58 +0530 Subject: [PATCH 1/3] feat: addet snippet preview --- package.json | 3 ++- src/app/App.tsx | 24 +++++++++++++++++++++++- src/app/components/Asset/Modal.tsx | 20 ++++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 src/app/components/Asset/Modal.tsx diff --git a/package.json b/package.json index e997c70..5d51b89 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,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": [ diff --git a/src/app/App.tsx b/src/app/App.tsx index ca97baa..9329d9e 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -10,6 +10,9 @@ import { Indicator } from "./components/Indicator/Indicator"; import CopilotStreamController from "./controllers/copilotStreamController"; 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 @@ -43,6 +46,19 @@ export function App(): React.JSX.Element { const [array, setArray] = useState>([]); const [selectedIndex, setSelectedIndex] = useState(-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().assetSnapshot({ asset: snippetId }); + console.log('asset ===', asset) + setPreviewData(asset); + setShowModal(true); + } catch (error) { + console.error(error); + } + }; const [userName, setUserName] = useState(null); @@ -272,8 +288,14 @@ export function App(): React.JSX.Element {

{item.name}

-

{item.id}

+ {/*

{item.id}

*/}

{item.classification}

+ + {showModal && ( + setShowModal(false)} /> + )} +
+
diff --git a/src/app/components/Asset/Modal.tsx b/src/app/components/Asset/Modal.tsx new file mode 100644 index 0000000..2ad434f --- /dev/null +++ b/src/app/components/Asset/Modal.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +const Modal = ({ onClose, asset }) => { + if (!asset) return null; + + return ( +
+
+

Snippet Details

+

ID: {asset.id}

+

Name: {asset.name}

+

Mechanism: {asset?.mechanism}

+

Preview schema semantic: {asset.preview?.schema?.semantic}

+ +
+
+ ); +}; + +export default Modal; From dbe5a244470dfd09b5827d298f331ee6068dfb2f Mon Sep 17 00:00:00 2001 From: Vishal Pawar Date: Thu, 25 Jul 2024 05:01:11 +0530 Subject: [PATCH 2/3] feat: resolved copilot and modal conflicts --- src/app/App.tsx | 6 +++--- src/app/components/Asset/Modal.tsx | 4 ++-- src/app/components/Copilot/Copilot.css | 11 +++++++++++ src/app/components/Copilot/Copilot.tsx | 2 ++ src/app/global.css | 11 +---------- 5 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 9329d9e..e16a1e9 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -319,9 +319,9 @@ export function App(): React.JSX.Element { {/* this is the copilot container. the copilot logic is inside the /components/Copilot.tsx */} -
- -
+ + + ); diff --git a/src/app/components/Asset/Modal.tsx b/src/app/components/Asset/Modal.tsx index 2ad434f..066f5b7 100644 --- a/src/app/components/Asset/Modal.tsx +++ b/src/app/components/Asset/Modal.tsx @@ -4,8 +4,8 @@ const Modal = ({ onClose, asset }) => { if (!asset) return null; return ( -
-
+
+

Snippet Details

ID: {asset.id}

Name: {asset.name}

diff --git a/src/app/components/Copilot/Copilot.css b/src/app/components/Copilot/Copilot.css index 0a08821..38948c1 100644 --- a/src/app/components/Copilot/Copilot.css +++ b/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; } diff --git a/src/app/components/Copilot/Copilot.tsx b/src/app/components/Copilot/Copilot.tsx index 2fbac0b..6686ff4 100644 --- a/src/app/components/Copilot/Copilot.tsx +++ b/src/app/components/Copilot/Copilot.tsx @@ -128,6 +128,7 @@ export function CopilotChat(): React.JSX.Element { }, []); return ( +
@@ -152,5 +153,6 @@ export function CopilotChat(): React.JSX.Element {
+
); } \ No newline at end of file diff --git a/src/app/global.css b/src/app/global.css index f6098c4..4caa4fb 100644 --- a/src/app/global.css +++ b/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 */ From eafcf21cc69c4ef6bf856926d893c92ae49968de Mon Sep 17 00:00:00 2001 From: Vishal Pawar Date: Thu, 25 Jul 2024 13:42:41 +0530 Subject: [PATCH 3/3] feat: changes added --- src/app/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index e16a1e9..266a6fb 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -51,7 +51,7 @@ export function App(): React.JSX.Element { const handlePreview = async (snippetId:string) => { try { - const asset = await new Pieces.AssetApi().assetSnapshot({ asset: snippetId }); + const asset = await new Pieces.AssetApi(config).assetSnapshot({ asset: snippetId }); console.log('asset ===', asset) setPreviewData(asset); setShowModal(true);