From 6d492e4bad9947641cdc132aa04fd8c9f6908ece Mon Sep 17 00:00:00 2001
From: pftom <1043269994@qq.com>
Date: Sun, 2 Feb 2025 21:44:25 +0800
Subject: [PATCH 1/2] feat(workspace): Add website favicon support for resource
 cards

- Implement dynamic favicon fetching for resources with URLs
- Add fallback icon rendering using SVG when favicon fails to load
- Use Google's favicon service for retrieving website icons
- Enhance resource card visual representation with website-specific icons
---
 .../components/workspace/resource-list/index.tsx  | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx b/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx
index d32e2c4b4..c3bb0d593 100644
--- a/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx
+++ b/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx
@@ -23,6 +23,7 @@ import { useSubscriptionUsage } from '@refly-packages/ai-workspace-common/hooks/
 import { NODE_COLORS } from '@refly-packages/ai-workspace-common/components/canvas/nodes/shared/colors';
 import { Markdown } from '@refly-packages/ai-workspace-common/components/markdown';
 import { useDeleteResource } from '@refly-packages/ai-workspace-common/hooks/canvas/use-delete-resource';
+import { getClientOrigin } from '@refly-packages/utils/url';
 
 const ActionDropdown = ({
   resource,
@@ -161,7 +162,19 @@ const ResourceCard = ({ item, onDelete }: { item: Resource; onDelete: () => void
       <Divider className="m-0 text-gray-200" />
       <div className="px-3 pt-2 pb-1 flex justify-between items-center bg-gray-50">
         <div className="flex items-center gap-3 mb-2">
-          <IconResourceFilled color={NODE_COLORS.resource} size={24} />
+          {item.data?.url ? (
+            <img
+              src={`https://www.google.com/s2/favicons?domain=${new URL(item?.data?.url || getClientOrigin()).hostname}&sz=32`}
+              alt="Website favicon"
+              className="w-6 h-6"
+              onError={(e) => {
+                e.currentTarget.src =
+                  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkgM0g1QzMuOSAzIDMgMy45IDMgNVYxOUMzIDIwLjEgMy45IDIxIDUgMjFIMTlDMjAuMSAyMSAyMSAyMC4xIDIxIDE5VjVDMjEgMy45IDIwLjEgMyAxOSAzWk0xOSAxOUg1VjVIMTlWMTlaIiBmaWxsPSIjNjY2NjY2Ii8+PC9zdmc+';
+              }}
+            />
+          ) : (
+            <IconResourceFilled color={NODE_COLORS.resource} size={24} />
+          )}
           <div className="flex-1 min-w-0">
             <h3 className="text-sm font-medium max-w-48 truncate">
               {item.title || t('common.untitled')}

From 9b75cfdd51c74b826a0175196c82e033f2cd8fa6 Mon Sep 17 00:00:00 2001
From: pftom <1043269994@qq.com>
Date: Sun, 2 Feb 2025 21:53:16 +0800
Subject: [PATCH 2/2] refactor(workspace): Improve resource card favicon
 handling with state-based fallback

---
 .../workspace/resource-list/index.tsx         | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx b/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx
index c3bb0d593..abe11566e 100644
--- a/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx
+++ b/packages/ai-workspace-common/src/components/workspace/resource-list/index.tsx
@@ -141,6 +141,7 @@ const ActionDropdown = ({
 const ResourceCard = ({ item, onDelete }: { item: Resource; onDelete: () => void }) => {
   const { t, i18n } = useTranslation();
   const language = i18n.languages?.[0];
+  const [showFallbackIcon, setShowFallbackIcon] = useState(false);
 
   const handleCardClick = () => {
     if (item.data?.url) {
@@ -163,15 +164,16 @@ const ResourceCard = ({ item, onDelete }: { item: Resource; onDelete: () => void
       <div className="px-3 pt-2 pb-1 flex justify-between items-center bg-gray-50">
         <div className="flex items-center gap-3 mb-2">
           {item.data?.url ? (
-            <img
-              src={`https://www.google.com/s2/favicons?domain=${new URL(item?.data?.url || getClientOrigin()).hostname}&sz=32`}
-              alt="Website favicon"
-              className="w-6 h-6"
-              onError={(e) => {
-                e.currentTarget.src =
-                  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkgM0g1QzMuOSAzIDMgMy45IDMgNVYxOUMzIDIwLjEgMy45IDIxIDUgMjFIMTlDMjAuMSAyMSAyMSAyMC4xIDIxIDE5VjVDMjEgMy45IDIwLjEgMyAxOSAzWk0xOSAxOUg1VjVIMTlWMTlaIiBmaWxsPSIjNjY2NjY2Ii8+PC9zdmc+';
-              }}
-            />
+            showFallbackIcon ? (
+              <IconResourceFilled color={NODE_COLORS.resource} size={24} />
+            ) : (
+              <img
+                src={`https://www.google.com/s2/favicons?domain=${new URL(item?.data?.url || getClientOrigin()).hostname}&sz=32`}
+                alt="Website favicon"
+                className="w-6 h-6"
+                onError={() => setShowFallbackIcon(true)}
+              />
+            )
           ) : (
             <IconResourceFilled color={NODE_COLORS.resource} size={24} />
           )}