style(web): move adapter doc link to icon button beside selector with tooltip

This commit is contained in:
Junyan Qin
2026-03-31 00:06:15 +08:00
parent 44b8354dfd
commit 1b1cc7769b
@@ -15,8 +15,13 @@ import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicForm
import { httpClient } from '@/app/infra/http/HttpClient';
import { Bot } from '@/app/infra/entities/api';
import { getAdapterDocUrl } from '@/app/infra/entities/adapter-docs';
import { ExternalLink } from 'lucide-react';
import { FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
@@ -473,6 +478,7 @@ export default function BotForm({
<span className="text-destructive">*</span>
</FormLabel>
<FormControl>
<div className="flex items-center gap-2">
<Select
onValueChange={(value) => {
field.onChange(value);
@@ -495,7 +501,9 @@ export default function BotForm({
</span>
</div>
) : (
<SelectValue placeholder={t('bots.selectAdapter')} />
<SelectValue
placeholder={t('bots.selectAdapter')}
/>
)}
</SelectTrigger>
<SelectContent>
@@ -526,12 +534,6 @@ export default function BotForm({
))}
</SelectContent>
</Select>
</FormControl>
{currentAdapter && adapterDescriptionList[currentAdapter] && (
<FormDescription>
{adapterDescriptionList[currentAdapter]}
</FormDescription>
)}
{currentAdapter &&
(() => {
const docUrl = getAdapterDocUrl(
@@ -539,10 +541,12 @@ export default function BotForm({
i18n.language,
);
return docUrl ? (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="link"
size="sm"
className="h-auto p-0 text-xs"
variant="outline"
size="icon"
className="h-9 w-9 shrink-0"
asChild
>
<a
@@ -550,12 +554,23 @@ export default function BotForm({
target="_blank"
rel="noopener noreferrer"
>
<ExternalLink className="mr-1 h-3 w-3" />
{t('bots.viewAdapterDocs')}
<FileText className="h-4 w-4" />
</a>
</Button>
</TooltipTrigger>
<TooltipContent>
{t('bots.viewAdapterDocs')}
</TooltipContent>
</Tooltip>
) : null;
})()}
</div>
</FormControl>
{currentAdapter && adapterDescriptionList[currentAdapter] && (
<FormDescription>
{adapterDescriptionList[currentAdapter]}
</FormDescription>
)}
<FormMessage />
</FormItem>
)}