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