feat(docs): update required fields for apis (#1164)

Author: gautamgambhir97

components/api-endpoint.tsx

@@ -1,10 +1,8 @@
 import { Code, Pre } from "nextra/components";
 import { CodeBlock } from "./code";
 
-import React, { useState } from "react";
+import React from "react";
 import { ApiIntro, Col, Properties, Property, Row } from "./mdx";
-import Tooltip from "./tooltip";
-import Link from "next/link";
 
 interface PropertyType {
   name: string;
@@ -13,18 +11,6 @@ interface PropertyType {
   required?: boolean;
 }
 
-// Helper function to replace path parameters in the URL
-const replacePathParameters = (
-  path: string,
-  pathParameters: Record<string, string> = {},
-) => {
-  let updatedPath = path;
-  for (const param in pathParameters) {
-    updatedPath = updatedPath.replace(`{${param}}`, pathParameters[param]);
-  }
-  return updatedPath;
-};
-
 const PythonCodeTab: React.FC<{
   method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
   url: string;
@@ -334,58 +320,6 @@ export const ApiEndpointRequestResponse: React.FC<{
   pathParameters?: Record<string, string>;
   isBearerTokenRequired?: boolean;
 }> = ({ isBearerTokenRequired = true, ...properties }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [requestPayload, setRequestPayload] = useState<string | null>(
-    properties.samplePayload
-      ? JSON.stringify(properties.samplePayload, null, 2)
-      : null,
-  );
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [bearerToken, setBearerToken] = useState("");
-  const [actualResponse, setActualResponse] = useState("");
-  const [pathParameters, setPathParameters] = useState(
-    properties.pathParameters || {},
-  );
-
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-
-  const hitRequestWithoutLogin = async () => {
-    try {
-      setLoading(true);
-      setError("");
-      const requestPayloadJSON = JSON.parse(requestPayload || "{}");
-      const bodyPayload = properties.samplePayload?.code
-        ? JSON.stringify({
-            code: JSON.stringify(properties.samplePayload.code),
-          })
-        : JSON.stringify(requestPayloadJSON);
-      const apiUrlWithParams = (properties.apiUrl +
-        replacePathParameters(properties.path, pathParameters)) as string;
-      const response = await fetch(apiUrlWithParams, {
-        method: properties.method,
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${bearerToken}`,
-        },
-        body: properties.method.includes("GET") ? null : bodyPayload,
-      });
-      const data = await response.json();
-      const responseText = JSON.stringify(data, null, 2);
-      setActualResponse(responseText);
-    } catch (error) {
-      setError(`Error: ${error.message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
   return (
     <>
       <Row>
@@ -399,187 +333,8 @@ export const ApiEndpointRequestResponse: React.FC<{
           <span className="nx-text-purple nx-font-normal dark:nx-text-indigo-250">
             {properties.path}
           </span>
-          {isModalOpen ? (
-            <button
-              className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
-              onClick={closeModal}
-            >
-              Cancel
-            </button>
-          ) : (
-            <button
-              className="nx-bg-white nx-text-fetch-main nx-py-2 nx-px-4 nx-rounded-xxl dark:nx-text-white dark:nx-bg-indigo-500"
-              onClick={openModal}
-            >
-              Run Code
-            </button>
-          )}
         </p>
       </Row>
-
-      {isModalOpen && (
-        <div className="nx-bg-grey nx-px-6 nx-py-8 nx-rounded nx-mt-12 dark:nx-bg-dark-mode-white-2">
-          <div className="nx-bg-white nextra-content nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
-            Parameters
-          </div>
-
-          <div className="nx-flex nx-flex-col nx-text-sm">
-            <div className="nx-flex nx-mt-4 nx-ml-4">
-              <div className="nx-w-1/4">
-                <p className="nextra-content nx-text-sm dark:nx-text-white-60">
-                  Name
-                </p>
-              </div>
-              <div className="nx-w-3/4">
-                <p className="nextra-content nx-text-sm dark:nx-text-white-60">
-                  Description
-                </p>
-              </div>
-            </div>
-            <div className="nx-mt-2 nx-mb-4 nx-border-t nx-border-gray-300" />
-            {isBearerTokenRequired && (
-              <div className="md:nx-flex nx-block nx-items-center nx-ml-4">
-                <div className="nx-flex nx-gap-2 nx-w-1/4">
-                  <p className="nextra-content nx-text-sm dark:nx-text-white-60">
-                    Bearer Token required
-                  </p>
-                  <Tooltip>
-                    <p className="nx-text-sm nx-font-bold nx-text-gray-800 dark:nx-text-white-90 nx-pb-1">
-                      To access your Agentverse API key, please follow these
-                      steps:
-                    </p>
-                    <ol className="nx-text-xs nx-leading-4 nx-text-gray-600 dark:nx-text-white-60 nx-pb-3 nx-list-decimal nx-mt-2 nx-p-[10px]">
-                      <li>
-                        Log in to your{" "}
-                        <Link
-                          target="_blank"
-                          className="nx-text-blue-500"
-                          href="https://agentverse.ai/"
-                        >
-                          Agentverse
-                        </Link>{" "}
-                        account.
-                      </li>
-                      <li>
-                        Once logged in, click on your profile icon in the
-                        top-right corner.
-                      </li>
-                      <li>
-                        In the dropdown menu, select <b>API Keys</b>.
-                      </li>
-                      <li>
-                        If you haven`t generated an API key yet, click on{" "}
-                        <b>Create New API Key</b>.
-                      </li>
-                      <li>Copy the generated API key and paste it here.</li>
-                    </ol>
-                  </Tooltip>
-                </div>
-
-                <div className="nx-w-3/4">
-                  <input
-                    type="text"
-                    placeholder="Bearer Token"
-                    value={bearerToken}
-                    onChange={(e) => setBearerToken(e.target.value)}
-                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Render Path Parameters as input fields */}
-            {Object.keys(pathParameters).map((paramName) => (
-              <div className="nx-flex nx-items-center nx-ml-4" key={paramName}>
-                <div className="nx-w-1/4">
-                  <p className="nextra-content nx-text-sm">
-                    {paramName} required
-                  </p>
-                </div>
-                <div className="nx-w-3/4">
-                  <input
-                    type="text"
-                    placeholder={paramName}
-                    value={pathParameters[paramName]}
-                    onChange={(e) => {
-                      // Update the path parameter value
-                      const updatedPathParameters = { ...pathParameters };
-                      updatedPathParameters[paramName] = e.target.value;
-                      setPathParameters(updatedPathParameters);
-                    }}
-                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nx-mt-2 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
-                  />
-                </div>
-              </div>
-            ))}
-
-            {/* Additional Sample Payload */}
-            {requestPayload && (
-              <div className="nx-flex nx-items-center nx-ml-4">
-                <div className="nx-w-1/4">
-                  <p className="nextra-content nx-text-sm">
-                    Additional Sample Payload
-                  </p>
-                </div>
-                <div className="nx-w-3/4">
-                  <textarea
-                    value={requestPayload}
-                    onChange={(e) => setRequestPayload(e.target.value)}
-                    style={{ resize: "none" }}
-                    className="nx-p-2 nx-rounded nx-border nx-border-gray-300 nextra-content nx-mt-2 nx-h-24 nx-w-full dark:nx-bg-dark-mode-white-10 dark:nx-border-none"
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Execute Button */}
-            <div className="nx-flex nx-ml-4">
-              <div className="nx-w-1/4">
-                <button
-                  className="nx-bg-purple hover:nx-bg-purple-500 nx-text-white nx-py-2 nx-px-4 nx-rounded-xxl nx-text-sm nx-mt-6"
-                  onClick={hitRequestWithoutLogin}
-                >
-                  Execute
-                </button>
-              </div>
-            </div>
-
-            {loading && <div className="nx-mt-4 nx-ml-4">Loading...</div>}
-
-            {error && (
-              <div className="nx-mt-4 nx-text-red-500 nx-ml-4">{error}</div>
-            )}
-
-            {/* Display Actual Response */}
-            {actualResponse && (
-              <div className="nx-mt-6">
-                <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
-                  Actual Response
-                </div>
-                <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4 dark:nx-bg-dark-mode-white-10">
-                  <pre className="nx-whitespace-pre-wrap dark:nx-bg-dark-mode-white-10">
-                    {actualResponse}
-                  </pre>
-                </div>
-              </div>
-            )}
-
-            {/* Display Sample Response if Available */}
-            {!actualResponse && properties.responses && (
-              <div className="nx-mt-6">
-                <div className="nx-bg-white nextra-content nx-text-base nx-py-2 nx-px-4 nx-rounded dark:nx-bg-dark-mode-white-5">
-                  Sample Response
-                </div>
-                <div className="nx-bg-white nx-rounded nx-p-2 nx-mt-4 dark:nx-bg-dark-mode-white-5">
-                  <pre className="nx-whitespace-pre-wrap dark:nx-bg-dark-mode-white-5">
-                    {JSON.stringify(properties.responses, null, 2)}
-                  </pre>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
       <ApiRequest
         apiUrl={properties.apiUrl}
         method={properties.method}

components/mdx.tsx

@@ -91,7 +91,7 @@ export function Property({
         {required !== undefined && (
           <>
             <dt className="nx-sr-only">Required</dt>
-            <dd className="nx-font-mono nx-text-xs nx-text-zinc-400 dark:nx-text-white-40">
+            <dd className="nx-font-mono nx-text-xs nx-text-[#ef4146] dark:nx-text-white-40">
               {required ? `required` : `optional`}
             </dd>
           </>

pages/apis/agentverse/_meta.json

@@ -1,5 +1,6 @@
 {
   "almanac": { "title": "Almanac APIs", "timestamp": true },
   "hosting": { "title": "Hosting APIs", "timestamp": true },
-  "mailroom": { "title": "Mailroom APIs", "timestamp": true }
+  "mailroom": { "title": "Mailroom APIs", "timestamp": true },
+  "search": { "title": "Search APIs", "timestamp": true }
 }