refac

backend/open_webui/utils/models.py

@@ -203,8 +203,11 @@ async def get_all_models(request, user: UserModel = None):
                     "id": f"{function.id}.{action['id']}",
                     "name": action.get("name", f"{function.name} ({action['id']})"),
                     "description": function.meta.description,
-                    "icon_url": action.get(
-                        "icon_url", function.meta.manifest.get("icon_url", None)
+                    "icon": action.get(
+                        "icon_url",
+                        function.meta.manifest.get("icon_url", None)
+                        or getattr(module, "icon_url", None)
+                        or getattr(module, "icon", None),
                     ),
                 }
                 for action in actions
@@ -215,7 +218,9 @@ async def get_all_models(request, user: UserModel = None):
                     "id": function.id,
                     "name": function.name,
                     "description": function.meta.description,
-                    "icon_url": function.meta.manifest.get("icon_url", None),
+                    "icon": function.meta.manifest.get("icon_url", None)
+                    or getattr(module, "icon_url", None)
+                    or getattr(module, "icon", None),
                 }
             ]
 
@@ -226,7 +231,9 @@ async def get_all_models(request, user: UserModel = None):
                 "id": function.id,
                 "name": function.name,
                 "description": function.meta.description,
-                "icon_url": function.meta.manifest.get("icon_url", None),
+                "icon": function.meta.manifest.get("icon_url", None)
+                or getattr(module, "icon_url", None)
+                or getattr(module, "icon", None),
             }
         ]
 

src/lib/components/chat/MessageInput.svelte

@@ -1167,17 +1167,17 @@
 																filter.id
 															)
 																? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400'
-																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300  hover:bg-gray-100 dark:hover:bg-gray-800 '} capitalize"
+																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300  hover:bg-gray-50 dark:hover:bg-gray-800 '} capitalize"
 														>
-															{#if filter?.icon_url}
-																<div class="size-5">
+															{#if filter?.icon}
+																<div class="size-5 items-center flex justify-center">
 																	<img
-																		src={filter?.icon_url}
-																		class="size-5 {filter.icon_url.includes('svg')
+																		src={filter.icon}
+																		class="size-4.5 {filter.icon.includes('svg')
 																			? 'dark:invert-[80%]'
 																			: ''}"
 																		style="fill: currentColor;"
-																		alt={filter?.name}
+																		alt={filter.name}
 																	/>
 																</div>
 															{:else}
@@ -1199,7 +1199,7 @@
 															class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {webSearchEnabled ||
 															($settings?.webSearch ?? false) === 'always'
 																? 'bg-blue-100 dark:bg-blue-500/20 border-blue-400/20 text-blue-500 dark:text-blue-400'
-																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
+																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800'}"
 														>
 															<GlobeAlt className="size-5" strokeWidth="1.75" />
 															<span
@@ -1218,7 +1218,7 @@
 															type="button"
 															class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {imageGenerationEnabled
 																? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100 dark:border-gray-700 text-gray-600 dark:text-gray-400'
-																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300  hover:bg-gray-100 dark:hover:bg-gray-800 '}"
+																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300  hover:bg-gray-50 dark:hover:bg-gray-800 '}"
 														>
 															<Photo className="size-5" strokeWidth="1.75" />
 															<span
@@ -1237,7 +1237,7 @@
 															type="button"
 															class="px-1.5 @xl:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden border {codeInterpreterEnabled
 																? 'bg-gray-50 dark:bg-gray-400/10 border-gray-100  dark:border-gray-700 text-gray-600 dark:text-gray-400  '
-																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300  hover:bg-gray-100 dark:hover:bg-gray-800 '}"
+																: 'bg-transparent border-transparent text-gray-600 dark:text-gray-300  hover:bg-gray-50 dark:hover:bg-gray-800 '}"
 														>
 															<CommandLine className="size-5" strokeWidth="1.75" />
 															<span

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -1401,11 +1401,11 @@
 														actionMessage(action.id, message);
 													}}
 												>
-													{#if action.icon_url}
+													{#if action?.icon}
 														<div class="size-4">
 															<img
-																src={action.icon_url}
-																class="w-4 h-4 {action.icon_url.includes('svg')
+																src={action.icon}
+																class="w-4 h-4 {action.icon.includes('svg')
 																	? 'dark:invert-[80%]'
 																	: ''}"
 																style="fill: currentColor;"