feat(api-dialog): improve API panel for AI and developers (T1480) (#943) (#2363)

Synced from teableio/teable-ee@44c8c3c

Co-authored-by: teable-bot <[email protected]>

Author: tea-artist

apps/nestjs-backend/src/types/i18n.generated.ts

@@ -2928,8 +2928,9 @@ export type I18nTranslations = {
                     "confirmExpiry": string;
                     "confirmButton": string;
                     "tokenInfo": string;
+                    "tokenCreatedSuccess": string;
                     "copied": string;
-                    "copyToClipboard": string;
+                    "copy": string;
                     "advancedDesc": string;
                     "openAdvanced": string;
                 };

apps/nextjs-app/src/features/app/blocks/view/tool-bar/APIDialog.tsx

@@ -7,6 +7,7 @@ import {
   getTableById,
   type CreateAccessTokenVo,
 } from '@teable/openapi';
+import { MarkdownPreview } from '@teable/sdk';
 import { useBaseId, useTableId } from '@teable/sdk/hooks';
 import {
   Button,
@@ -123,23 +124,6 @@ const generateAIContext = (
 
   return `# Table: ${tableName}
 ${tableDescription ? `\nDescription: ${tableDescription}\n` : ''}
-## Fields
-${fieldDescriptions}
-
-## API Configuration
-- **Base URL**: ${baseUrl}
-- **Table ID**: ${tableId}
-- **API Token**: ${displayToken}
-- **Endpoint**: \`${baseUrl}/api/table/${tableId}/record\`
-
-## Authentication
-All requests require the \`Authorization\` header:
-\`\`\`
-Authorization: Bearer ${displayToken}
-\`\`\`
-
----
-
 ## API Operations
 
 ### 1. Read Records (GET)
@@ -244,6 +228,25 @@ curl -X DELETE "${baseUrl}/api/table/${tableId}/record/{recordId}" \\
 
 ---
 
+## API Configuration
+- **Base URL**: ${baseUrl}
+- **Table ID**: ${tableId}
+- **API Token**: ${displayToken}
+- **Endpoint**: \`${baseUrl}/api/table/${tableId}/record\`
+
+## Authentication
+All requests require the \`Authorization\` header:
+\`\`\`
+Authorization: Bearer ${displayToken}
+\`\`\`
+
+---
+
+## Fields
+${fieldDescriptions}
+
+---
+
 ## Notes for AI
 - Fields marked [PRIMARY] are the main identifier field
 - Fields marked [READ-ONLY] are computed and cannot be directly modified
@@ -351,17 +354,8 @@ export const APIDialog = ({ children }: APIDialogProps) => {
     );
   }, [tableInfo, fields, currentUrl, tableId, generatedToken]);
 
-  const handleCopy = useCallback(() => {
-    const textArea = document.createElement('textarea');
-    textArea.value = aiContext;
-    textArea.style.position = 'fixed';
-    textArea.style.left = '-999999px';
-    textArea.style.top = '-999999px';
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-    document.execCommand('copy');
-    document.body.removeChild(textArea);
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(aiContext);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   }, [aiContext]);
@@ -372,7 +366,7 @@ export const APIDialog = ({ children }: APIDialogProps) => {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="max-h-[90vh] max-w-4xl">
+      <DialogContent className="flex max-h-[90vh] max-w-4xl flex-col overflow-hidden">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Code2 className="size-5" />
@@ -392,7 +386,7 @@ export const APIDialog = ({ children }: APIDialogProps) => {
             </TabsTrigger>
           </TabsList>
 
-          <TabsContent value="ai-context">
+          <TabsContent value="ai-context" className="w-full overflow-hidden">
             {isDataLoading ? (
               <div className="flex h-64 items-center justify-center">
                 <Loader2 className="size-8 animate-spin text-muted-foreground" />
@@ -413,11 +407,16 @@ export const APIDialog = ({ children }: APIDialogProps) => {
 
                 <div className="flex items-center justify-between gap-4">
                   {generatedToken ? (
-                    <div className="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
-                      <Check className="size-4" />
-                      {t('table:toolbar.others.api.tokenInfo', {
-                        expiry: new Date(generatedToken.expiredTime).toLocaleDateString(),
-                      })}
+                    <div className="flex flex-col gap-1">
+                      <div className="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
+                        <Check className="size-4" />
+                        {t('table:toolbar.others.api.tokenCreatedSuccess')}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {t('table:toolbar.others.api.tokenInfo', {
+                          expiry: new Date(generatedToken.expiredTime).toLocaleDateString(),
+                        })}
+                      </div>
                     </div>
                   ) : (
                     <Button
@@ -448,14 +447,14 @@ export const APIDialog = ({ children }: APIDialogProps) => {
                     ) : (
                       <>
                         <Copy className="size-4" />
-                        {t('table:toolbar.others.api.copyToClipboard')}
+                        {t('table:toolbar.others.api.copy')}
                       </>
                     )}
                   </Button>
                 </div>
 
                 <ScrollArea className="h-[400px] rounded-lg border bg-muted/20 p-4">
-                  <pre className="whitespace-pre-wrap text-sm">{aiContext}</pre>
+                  <MarkdownPreview>{aiContext}</MarkdownPreview>
                 </ScrollArea>
               </div>
             )}

packages/common-i18n/src/locales/en/table.json

@@ -53,8 +53,9 @@
         "confirmExpiry": "The token will be valid for 1 year.",
         "confirmButton": "Confirm & Create",
         "tokenInfo": "Token expires: {{expiry}}",
+        "tokenCreatedSuccess": "Token created successfully! Click copy to use it with your AI assistant.",
         "copied": "Copied!",
-        "copyToClipboard": "Copy to Clipboard",
+        "copy": "Copy",
         "advancedDesc": "Open the advanced API query builder for more customization options.",
         "openAdvanced": "Open Query Builder"
       },

packages/common-i18n/src/locales/zh/table.json

@@ -53,8 +53,9 @@
         "confirmExpiry": "Token 有效期为 1 年。",
         "confirmButton": "确认创建",
         "tokenInfo": "Token 过期时间：{{expiry}}",
+        "tokenCreatedSuccess": "Token 创建成功！点击复制即可使用。",
         "copied": "已复制！",
-        "copyToClipboard": "复制到剪贴板",
+        "copy": "复制",
         "advancedDesc": "打开高级 API 查询构建器，获取更多自定义选项。",
         "openAdvanced": "打开查询构建器"
       },