feat: enhance model abilities display in DynamicFormItem and ModelsDialog components with icons for vision and function call

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -43,7 +43,7 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Plus, X } from 'lucide-react';
+import { Plus, X, Eye, Wrench } from 'lucide-react';
 
 export default function DynamicFormItemComponent({
   config,
@@ -277,9 +277,15 @@ export default function DynamicFormItemComponent({
                 <SelectLabel>{providerName}</SelectLabel>
                 {models.map((model) => (
                   <SelectItem key={model.uuid} value={model.uuid}>
-                    {model.name}
+                    <span className="inline-flex items-center gap-1">
-                    {model.abilities?.includes('vision') && ' 👁'}
+                      {model.name}
-                    {model.abilities?.includes('func_call') && ' 🔧'}
+                      {model.abilities?.includes('vision') && (
+                        <Eye className="h-3 w-3 text-muted-foreground" />
+                      )}
+                      {model.abilities?.includes('func_call') && (
+                        <Wrench className="h-3 w-3 text-muted-foreground" />
+                      )}
+                    </span>
                   </SelectItem>
                 ))}
               </SelectGroup>

web/src/app/home/components/models-dialog/ModelsDialog.tsx

@@ -11,6 +11,8 @@ import {
   Settings,
   Sparkles,
   LogIn,
+  Eye,
+  Wrench,
 } from 'lucide-react';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import {
@@ -400,13 +402,13 @@ export default function ModelsDialog({
                           {t('models.chat')}
                         </Badge>
                         {model.abilities?.includes('vision') && (
-                          <Badge variant="outline" className="text-xs">
+                          <Badge variant="outline" className="text-xs gap-1">
-                            👁
+                            <Eye className="h-3 w-3" />
                           </Badge>
                         )}
                         {model.abilities?.includes('func_call') && (
-                          <Badge variant="outline" className="text-xs">
+                          <Badge variant="outline" className="text-xs gap-1">
-                            🔧
+                            <Wrench className="h-3 w-3" />
                           </Badge>
                         )}
                       </div>