Implement a feature to add sensitive information to the snippets

package.json

@@ -14,14 +14,15 @@
   },
   "dependencies": {
     "@pieces.app/pieces-os-client": "^4.0.0",
+    "ajv": "^8.17.1",
+    "jest-environment-jsdom": "^29.7.0",
+    "pieces-copilot-sdk": "^1.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "9.0.1",
     "react-scripts": "^5.0.1",
-    "ts-node": "^10.9.1",
-    "jest-environment-jsdom": "^29.7.0",
     "rehype-sanitize": "6.0.0",
-    "react-markdown": "9.0.1",
-    "pieces-copilot-sdk": "^1.1.9"
+    "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.2.0",
@@ -33,10 +34,10 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "prettier": "^3.3.2",
+    "react-icons": "5.2.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.1.1",
-    "typescript": "^4.9.5",
-    "react-icons": "5.2.1"
+    "typescript": "^4.9.5"
   },
   "browserslist": {
     "production": [
@@ -62,5 +63,8 @@
     "typescript": "^4.9.5",
     "postcss": "^8.4.33",
     "nth-check": "^2.1.0"
-  }
+  },
+  "description": "<h1 align=\"center\">\r     <b>\r         <a href=\"https://pieces.app\">\r             <picture>\r                 <source srcset=\"./assets/Logo-light-theme.png\" media=\"(prefers-color-scheme: light)\">\r                 <source srcset=\"./assets/Logo-dark-theme.png\" media=\"(prefers-color-scheme: dark)\">\r                 <img src=\"./assets/Logo-dark-theme.png\" height=\"125\" width=\"600\" />\r             </picture>\r         </a><br>\r     </b>\r </h1>",
+  "author": "",
+  "license": "ISC"
 }

src/app/App.tsx

@@ -14,6 +14,8 @@ import { AiFillEye } from 'react-icons/ai';
 
 import { OSApi } from "@pieces.app/pieces-os-client";
 import { config } from "../platform.config";
+import SecretKeyForm from '../components/SecretKeyForm';
+import RetrieveSecretKey from '../components/RetrieveSecretKey';
 const osApi = new OSApi(); // Create an instance of the OSApi
 
 // types
@@ -319,6 +321,9 @@ export function App(): React.JSX.Element {
         {/* this is the copilot container. the copilot logic is inside the /components/Copilot.tsx */}
 
             <CopilotChat />
+
+            <SecretKeyForm />
+      <RetrieveSecretKey />
 
       </div>
     </>

src/app/components/RetrieveSecretKey.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { getSecretKey } from '../utils/sensitiveApi';
+
+const RetrieveSecretKey = () => {
+  const [retrievedKey, setRetrievedKey] = useState('');
+  const [keyName, setKeyName] = useState('');
+
+  const handleRetrieve = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const secret = await getSecretKey(keyName);
+    setRetrievedKey(secret || 'Secret not found');
+  };
+
+  return (
+    <div>
+      <h3>Retrieve a Secret Key</h3>
+      <form onSubmit={handleRetrieve}>
+        <input
+          type="text"
+          placeholder="Enter Key Name"
+          value={keyName}
+          onChange={(e) => setKeyName(e.target.value)}
+          required
+        />
+        <button type="submit">Retrieve Secret</button>
+      </form>
+      {retrievedKey && <p>Secret: {retrievedKey}</p>}
+    </div>
+  );
+};
+
+export default RetrieveSecretKey;

src/app/components/SecretKeyForm.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { addSecretKey } from '../utils/sensitiveApi';
+
+const SecretKeyForm = () => {
+  const [keyName, setKeyName] = useState('');
+  const [keyValue, setKeyValue] = useState('');
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    await addSecretKey({ keyName, keyValue });
+    setKeyName('');
+    setKeyValue('');
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="secret-form">
+      <h3>Add a Secret Key</h3>
+      <input
+        type="text"
+        placeholder="Key Name"
+        value={keyName}
+        onChange={(e) => setKeyName(e.target.value)}
+        required
+      />
+      <input
+        type="password"
+        placeholder="Key Value"
+        value={keyValue}
+        onChange={(e) => setKeyValue(e.target.value)}
+        required
+      />
+      <button type="submit">Add Secret</button>
+    </form>
+  );
+};
+
+export default SecretKeyForm;

src/app/utils/sensitiveApi.ts

@@ -0,0 +1,39 @@
+import { SensitivesApi } from "@pieces.app/pieces-os-client";
+
+// Initialize the API (you can configure this with your specific settings)
+const config = {
+  apiKey: 'YOUR_API_KEY', // Add your API key here
+  baseUrl: 'https://api.pieces.app', // Base URL for the API
+};
+
+const sensitiveApi = new SensitivesApi(config);
+
+type SensitiveData = {
+  keyName: string;
+  keyValue: string;
+};
+
+// Function to handle adding a secret key
+export const addSecretKey = async (secret: SensitiveData) => {
+  try {
+    const response = await sensitiveApi.createSensitive({
+      key: secret.keyName,
+      value: secret.keyValue,
+    });
+    console.log('Secret added successfully:', response);
+  } catch (error) {
+    console.error('Error adding secret:', error);
+  }
+};
+
+// Function to retrieve secret keys
+export const getSecretKey = async (keyName: string) => {
+  try {
+    const response = await sensitiveApi.getSensitive({
+      key: keyName,
+    });
+    return response?.value;
+  } catch (error) {
+    console.error('Error retrieving secret:', error);
+  }
+};