feat: data sources support displaying customized icons (#432)

ayangweb · web-flow · commit ab16543e6520 · 2025-04-24T16:28:34.000+08:00
* feat: data sources support displaying customized icons

* docs: update changelog
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -30,6 +30,8 @@ Information about release notes of Coco Server is provided here.
 - feat: web components assistant #422
 - feat: right-click menu support for search #423
 - feat: add chat mode launch page #424
+  feat: ai assistant supports search and paging #431
+- feat: data sources support displaying customized icons #432
 
 ### Bug fix
 
diff --git a/src/components/Cloud/DataSourceItem.tsx b/src/components/Cloud/DataSourceItem.tsx
@@ -5,6 +5,7 @@ import source_default_img from "@/assets/images/source_default.png";
 import source_default_dark_img from "@/assets/images/source_default_dark.png";
 import { useConnectStore } from "@/stores/connectStore";
 import { useThemeStore } from "@/stores/themeStore";
+import FontIcon from "../Common/Icons/FontIcon";
 
 interface Account {
   email: string;
@@ -13,11 +14,12 @@ interface Account {
 
 interface DataSourceItemProps {
   name: string;
+  icon?: string;
   connector: any;
   accounts?: Account[];
 }
 
-export function DataSourceItem({ name, connector }: DataSourceItemProps) {
+export function DataSourceItem({ name, icon, connector }: DataSourceItemProps) {
   // const isConnected = true;
 
   const isDark = useThemeStore((state) => state.isDark);
@@ -56,7 +58,12 @@ export function DataSourceItem({ name, connector }: DataSourceItemProps) {
     <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center space-x-3">
-          <img src={getTypeIcon()} alt={name} className="w-6 h-6" />
+          {icon?.startsWith("font_") ? (
+            <FontIcon name={icon} className="size-6" />
+          ) : (
+            <img src={getTypeIcon()} alt={name} className="size-6" />
+          )}
+
           <span className="font-medium text-gray-900 dark:text-white">
             {name}
           </span>
diff --git a/src/components/Search/SearchPopover.tsx b/src/components/Search/SearchPopover.tsx
@@ -21,6 +21,7 @@ import { useShortcutsStore } from "@/stores/shortcutsStore";
 import VisibleKey from "@/components/Common/VisibleKey";
 import { useChatStore } from "@/stores/chatStore";
 import NoDataImage from "@/components/Common/NoDataImage";
+import FontIcon from "../Common/Icons/FontIcon";
 
 interface SearchPopoverProps {
   isSearchActive: boolean;
@@ -288,8 +289,10 @@ export default function SearchPopover({
                             <div className="flex items-center gap-2 overflow-hidden">
                               {isAll ? (
                                 <Layers className="size-[16px] text-[#0287FF]" />
+                              ) : item.icon?.startsWith("font_") ? (
+                                <FontIcon name={item.icon} className="size-4" />
                               ) : (
-                                <TypeIcon item={item} className="size-[16px]" />
+                                <TypeIcon item={item} className="size-4" />
                               )}
 
                               <span className="truncate">
