Feat: If a model configured in the agent is deleted from the user center, a notification will be displayed on the canvas with a red border. (#13872)

### What problem does this PR solve?

Feat: If a model configured in the agent is deleted from the user
center, a notification will be displayed on the canvas with a red
border.

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/llm-select/llm-label.tsx

@@ -14,12 +14,7 @@ const LLMLabel = ({ value }: IProps) => {
 
   return (
     <div className="flex items-center gap-1 text-xs text-text-secondary">
-      <LlmIcon
-        name={getLLMIconName(fId, llmName)}
-        width={20}
-        height={20}
-        size={'small'}
-      />
+      <LlmIcon name={getLLMIconName(fId, llmName)} width={20} height={20} />
       <span className="flex-1 truncate"> {llmName}</span>
     </div>
   );

web/src/pages/agent/canvas/node/card.tsx

@@ -17,8 +17,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { useSelectFlatLlmList } from '@/hooks/use-llm-request';
 import { cn } from '@/lib/utils';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
 
 export function CardWithForm() {
   return (
@@ -79,8 +80,17 @@ export function LabelCard({ children, className, ...props }: LabelCardProps) {
 }
 
 export function LLMLabelCard({ llmId }: { llmId?: string }) {
+  const flatLlmList = useSelectFlatLlmList();
+
+  const isValidLlm = useMemo(() => {
+    if (!llmId) return false;
+    return flatLlmList.some((llm) => llm.uuid === llmId);
+  }, [flatLlmList, llmId]);
+
   return (
-    <LabelCard>
+    <LabelCard
+      className={isValidLlm ? '' : 'bg-state-error-5 border-state-error border'}
+    >
       <LLMLabel value={llmId}></LLMLabel>
     </LabelCard>
   );

web/src/utils/api.ts

@@ -1,4 +1,4 @@
-let api_host = `/v1`;
+const api_host = `/v1`;
 const ExternalApi = `/api`;
 
 export { ExternalApi, api_host };