remove MultiCodeBlock from ConvoAI Quickstart

Author: saudsami

conversational-ai/get-started/quickstart.mdx

@@ -7,7 +7,9 @@ description: >
   Set up real-time interaction with a Conversational AI agent.
 ---
 
-import MultiCodeBlock, { CodeGroup, CodeItem } from '@app/mdx-components/MultiCodeBlock';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
 
 This page describes how to call the <Vpd k="NAME" /> RESTful APIs to start and stop an AI agent.
 
@@ -53,9 +55,9 @@ This section introduces the basic RESTful API requests you use to start and stop
 
 Call the `join` endpoint to create an agent instance that joins an Agora channel. Pass in the `channel` name and `token` for agent authentication. To generate your base64-encoded credentials, see [RESTful authentication](../rest-api/restful-authentication.mdx).
 
-<MultiCodeBlock caption="Sample request:">
-<CodeGroup label="Select">
-  <CodeItem language="js" name="Node.js">{`const fetch = require('node-fetch');\n
+<Tabs groupId="language">
+<TabItem value="node" label="Node.js" default>
+  <CodeBlock language="js">{`const fetch = require('node-fetch');\n
 const url = "https://api.agora.io/api/conversational-ai-agent/v2/projects/:appid/join";\n
 const headers = \{
   "Authorization": "Basic <your_base64_encoded_credentials>",
@@ -106,9 +108,11 @@ fetch(url, \{
 })
   .then(response => response.json())
   .then(json => console.log(json))
-  .catch(error => console.error("Error:", error));`}</CodeItem>
+  .catch(error => console.error("Error:", error));`}</CodeBlock>
+</TabItem>
 
-<CodeItem language="json" name="curl">{`curl --request POST \\
+<TabItem value="curl" label="Curl">
+<CodeBlock language="json">{`curl --request POST \\
   --url https://api.agora.io/api/conversational-ai-agent/v2/projects/:appid/join \\
   --header 'Authorization: Basic <your_base64_encoded_credentials>' \\
   --header 'Content-Type: application/json' \\
@@ -150,9 +154,11 @@ fetch(url, \{
       }
     }
   }
-}'`}</CodeItem>
+}'`}</CodeBlock>
+</TabItem>
 
-  <CodeItem language="python" name="Python">{`import requests
+<TabItem value="python" label="Python">
+  <CodeBlock language="python">{`import requests
 import json\n
 url = "https://api.agora.io/api/conversational-ai-agent/v2/projects/:appid/join"\n
 headers = \{
@@ -198,10 +204,10 @@ data = \{
     }
 }\n
 response = requests.post(url, headers=headers, data=json.dumps(data))
-print(response.text)`}</CodeItem>
+print(response.text)`}</CodeBlock>
 
-</CodeGroup>
-</MultiCodeBlock>
+</TabItem>
+</Tabs>
 
 For complete information on all request parameters, see [Start a conversational AI agent](../rest-api/join).
 
@@ -223,9 +229,9 @@ Store the `agent_id` for use in subsequent API calls to [query](../rest-api/quer
 To end the conversation with the AI agent, call the `leave` endpoint. This causes the agent to leave the Agora channel.
 
 
-<MultiCodeBlock caption="Sample request:">
-<CodeGroup label="Select">
-  <CodeItem language="js" name="Node.js">{`const url = 'https://api.agora.io/api/conversational-ai-agent/v2/projects/:appid/agents/:agentId/leave';\n
+<Tabs groupId="language">
+<TabItem value="node" label="Node.js">
+  <CodeBlock language="js">{`const url = 'https://api.agora.io/api/conversational-ai-agent/v2/projects/:appid/agents/:agentId/leave';\n
 const options = \{
   method: 'POST',
   headers: {
@@ -237,24 +243,27 @@ fetch(url, options)
   .then(res => res.json())
   .then(json => console.log(json))
   .catch(err => console.error(err));
-`}</CodeItem>
+`}</CodeBlock>
+</TabItem>
 
-<CodeItem language="bash" name="curl">{`curl --request post \\
+<TabItem value="curl" label="Curl">
+<CodeBlock language="bash">{`curl --request post \\
   --url https://api.agora.io/api/conversational-ai-agent/v2/projects/:appid/agents/:agentId/leave \\
-  --header 'Authorization: Basic <your_base64_encoded_credentials>'`}</CodeItem>
+  --header 'Authorization: Basic <your_base64_encoded_credentials>'`}</CodeBlock>
+</TabItem>
 
-  <CodeItem language="python" name="Python">{`import requests\n
+<TabItem value="python" label="Python">
+  <CodeBlock language="python">{`import requests\n
 url = "https://api.agora.io/api/conversational-ai-agent/v2/projects/:appid/agents/:agentId/leave"\n
 headers = \{
     "Authorization": "Basic <your_base64_encoded_credentials>",
     "Content-Type": "application/json"
 }\n
 response = requests.post(url, headers=headers)
 print(response.text)
-`}</CodeItem>
-
-</CodeGroup>
-</MultiCodeBlock>
+`}</CodeBlock>
+</TabItem>
+</Tabs>
 
 If the request is successful, the server responds with a `200 OK` status and an empty JSON object.