docs: charge callgent

Signed-off-by: ZhaoYongChao <16632301768@163.com>

Author: ZhaoYongchao

.env.example

@@ -2,6 +2,7 @@
 
 # Set the production url of your site here
 SITE_URL=http://localhost:3030
+APP_URL=http://localhost:8000
 SITE_BASE_PATH=/
 SITE_SIGNUP_URL=http://localhost:3030/signup
 

docs/quick-start/pricing.mdx

@@ -14,6 +14,7 @@ This article assumes you already know [how to create a Callgent](/docs/quick-sta
 :::
 
 import SelectCallgent from "@site/src/components/module/select-callgent"
+import Publish from "@site/src/components/quick-start/publish"
 
 ### 1. Select Your Callgent
 
@@ -24,7 +25,7 @@ import SelectCallgent from "@site/src/components/module/select-callgent"
 ### 2. Configure Authentication  
 Set up authentication to ensure service security and specify who pays for the request. Different types of locks indicate different roles.
 
-**Client Entries**: Used for identity verification. If the lock is open, the creator pays; if closed, the caller pays.
+**Client Entries**: Used for identity verification. If the lock is open, the creator pays; if closed, the caller pays by default. Of cause you may specify a fixed payer.
 
 **Service Adaptors**: Indicate how the current request will be charged.
 
@@ -54,18 +55,28 @@ function calcPrice(req) {
 ```
 
 ### 3. Enable Monetization  
-Under the **test** section in the image above, find the newly imported API. Click the lock icon, choose your authentication method, and confirm the lock is closed to complete the setup.  
+In Figure 1 **test**, find the newly imported API. Click the lock icon, choose your authentication method, and confirm the lock is closed to complete the setup.  
 <a href="/solutions/showcase/user-as-a-service/service-design" target="_blank">How to import an API?</a>
 
 ## 🔗 Test Your Monetized Callgent  
-Once setup is complete, you can start calling your monetized service. Learn more: [Call the Callgent](/docs/quick-start/call-the-callgent)
+Once setup is complete, you can <Publish name='publish' /> your Callgent service for users to call. 
+
+Learn more: [Call the Callgent](/docs/quick-start/call-the-callgent)
 
 ## 🌟 Benefits of Monetizing with Callgent
 
 - **Zero Coding Required**: Start monetizing without writing any code  
 - **Instant Activation**: Monetization takes effect immediately upon setup  
 - **Full Transparency**: Users can clearly see the cost breakdown  
 - **Flexible Options**: Choose the billing method that best fits your service
+- **[Transaction Details](/redirect?app=billing)**: View your income and expense records
 
 ## 🎉 Start Your Monetization Journey Today!  
 With Callgent's powerful monetization tools, turn your AI agent into a revenue-generating machine. Get started now! 🚀
+
+
+The next step is how to promote my cg service based on the interface/tag on the hub.
+
+:::success  
+How to promote my CG service on the hub based on interface or tag.  
+:::

i18n/zh/docusaurus-plugin-content-docs/current/quick-start/pricing.mdx

@@ -14,6 +14,7 @@ Callgent 提供简单、灵活的变现方案！我的 Callgent 只通过几分
 :::
 
 import SelectCallgent from "@site/src/components/module/select-callgent"
+import Publish from "@site/src/components/quick-start/publish"
 
 ### 1. 选择 Callgent
 
@@ -54,7 +55,7 @@ function calcPrice(req) {
 ```
 
 ### 3. 启用变现
-在图一**test**下找到我们刚才新建导入的 API，点击锁状图标，选择认证方式，确认锁已关闭即表示设置成功，<a href="/solutions/showcase/user-as-a-service/service-design" target="_blank">如何导入 Api？</a>。
+在图一**test**下找到我们刚才新建导入的 API，您可以<Publish name='发布' />您的Callgent服务供用户调用。<a href="/solutions/showcase/user-as-a-service/service-design" target="_blank">如何导入 Api？</a>。
 
 
 ## 🔗 测试我的 Callgent 收费
@@ -65,6 +66,11 @@ function calcPrice(req) {
 - **即时生效**：设置完成后立即开始计费
 - **完全透明**：用户清晰了解每笔费用的构成
 - **灵活选择**：根据服务类型自由选择计费模式
+- **[收支明细](/redirect?app=billing)**：前往查看您的收支明细
 
 ## 🎉 立即开启变现之旅！
 借助 Callgent 的强大变现工具，将 AI Agent 转变为创收利器。现在行动吧！🚀
+
+:::success
+如何在hub上基于接口/tag推广我的cg服务。
+:::

src/components/module/select-callgent.tsx

@@ -3,7 +3,7 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import { CallgentResponse } from '@site/src/types/user';
 import React, { useEffect, useState } from 'react';
 
-const ShowLogin = () => {
+const SelectCallgent = () => {
     const isBrowser = useIsBrowser();
     if (!isBrowser) { return null; }
     const [callgent, setCallgent] = useState<CallgentResponse>();
@@ -26,4 +26,4 @@ const ShowLogin = () => {
     );
 };
 
-export default ShowLogin;
+export default SelectCallgent;

src/components/quick-start/publish.tsx

@@ -0,0 +1,60 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { CallgentResponse } from '@site/src/types/user';
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+
+const Publish = ({ name }: { name: string }) => {
+    const isBrowser = useIsBrowser();
+    if (!isBrowser) return null;
+
+    const [callgent, setCallgent] = useState<CallgentResponse>();
+    const [submitted, setSubmitted] = useState(false);
+    const { siteConfig } = useDocusaurusContext();
+    const appUrl = siteConfig.customFields.appUrl;
+
+    const init = async () => {
+        const LocCallgent = sessionStorage.getItem('callgent');
+        if (LocCallgent) {
+            setCallgent(JSON.parse(LocCallgent));
+        }
+    };
+
+    useEffect(() => {
+        init();
+    }, []);
+
+    const publish = async () => {
+        if (!callgent || submitted) return;
+        try {
+            await axios.post(`/api/hub/callgents/${callgent.id}/commit`, {
+                name: callgent.name,
+            });
+            setSubmitted(true);
+        } catch (error: any) {
+            if (axios.isAxiosError(error) && error.response?.status === 409) {
+                setSubmitted(true);
+            } else {
+                console.error('Publish error:', error);
+            }
+        }
+    };
+
+    return (
+        <span className="tailwind">
+            {callgent?.name ? (
+                <span
+                    onClick={publish}
+                    className={`${submitted ? 'text-green-700 cursor-not-allowed' : 'text-green-700 cursor-pointer hover:underline'
+                        }`}
+                >
+                    {name}
+                </span>
+            ) : (
+                <span className="text-gray-500">{name}</span>
+            )}
+        </span>
+    );
+};
+
+export default Publish;

src/pages/redirect/index.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { useLocation } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+export default function Redirect(): JSX.Element {
+    const isBrowser = useIsBrowser();
+    if (!isBrowser) return null;
+
+    const location = useLocation();
+    const { siteConfig } = useDocusaurusContext();
+
+    const redirectMap = {
+        app: siteConfig.customFields.appUrl
+    };
+
+    useEffect(() => {
+        const searchParams = new URLSearchParams(location.search);
+
+        for (const key in redirectMap) {
+            if (searchParams.has(key)) {
+                const path = searchParams.get(key);
+                if (path) {
+                    const targetUrl = `${redirectMap[key]}/${path}`;
+                    window.location.replace(targetUrl);
+                    return;
+                }
+            }
+        }
+
+        console.warn('No valid redirect query found:', location.search);
+    }, [location]);
+
+    return <></>;
+}