From f981494613c138353ebe08e78ca6fe004288105c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 16 Oct 2024 16:28:07 +0800
Subject: [PATCH] feat: plugin support emoji icon

---
 .../(commonLayout)/plugins/test/card/page.tsx |  4 ++--
 .../plugins/card/base/card-icon.tsx           | 19 ++++++++++++++++++-
 .../components/plugins/card/base/org-info.tsx | 14 +++++++++-----
 web/app/components/plugins/card/card-mock.ts  | 19 +++++++++++++++++++
 .../components/plugins/plugin-item/action.tsx |  1 +
 5 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index 81ac3e4ea6..db54d5c9d3 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -1,7 +1,7 @@
 import { handleDelete } from './actions'
 import TestClientPlugin from './test-client-plugin'
 import Card from '@/app/components/plugins/card'
-import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 import PluginItem from '@/app/components/plugins/plugin-item'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import ProviderCard from '@/app/components/plugins/provider-card'
@@ -10,7 +10,7 @@ import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 import Badge from '@/app/components/base/badge'
 const PluginList = async () => {
   const locale = getLocaleOnServer()
-  const pluginList = [toolNotion, extensionDallE, modelGPT4]
+  const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
   const { t: pluginI8n } = await translate(locale, 'plugin')
   return (
     <div className='pb-3 bg-white'>
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index 0fcc28d997..4c0335c248 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -1,4 +1,5 @@
 import { RiCheckLine } from '@remixicon/react'
+import AppIcon from '@/app/components/base/app-icon'
 import cn from '@/utils/classnames'
 
 const Icon = ({
@@ -7,9 +8,25 @@ const Icon = ({
   installed = false,
 }: {
   className?: string
-  src: string
+  src: string | {
+    'content': string
+    'background': string
+  }
   installed?: boolean
 }) => {
+  if (typeof src === 'object') {
+    return (
+      <div className={cn('relative', className)}>
+        <AppIcon
+          size='large'
+          iconType={'emoji'}
+          icon={src.content}
+          background={src.background}
+          className='rounded-md'
+        />
+      </div>
+    )
+  }
   return (
     <div
       className={cn('shrink-0 relative w-10 h-10 rounded-md bg-center bg-no-repeat bg-contain', className)}
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index d68f31cf37..0d335eacad 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -1,7 +1,7 @@
 import cn from '@/utils/classnames'
 type Props = {
   className?: string
-  orgName: string
+  orgName?: string
   packageName: string
   packageNameClassName?: string
 }
@@ -14,10 +14,14 @@ const OrgInfo = ({
 }: Props) => {
   return (
     <div className={cn('flex items-center h-4 space-x-0.5', className)}>
-      <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
-      <span className='shrink-0 text-text-quaternary system-xs-regular'>
-        /
-      </span>
+      {orgName && (
+        <>
+          <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
+          <span className='shrink-0 text-text-quaternary system-xs-regular'>
+            /
+          </span>
+        </>
+      )}
       <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
         {packageName}
       </span>
diff --git a/web/app/components/plugins/card/card-mock.ts b/web/app/components/plugins/card/card-mock.ts
index d411288db7..4679a367f4 100644
--- a/web/app/components/plugins/card/card-mock.ts
+++ b/web/app/components/plugins/card/card-mock.ts
@@ -52,3 +52,22 @@ export const modelGPT4 = {
     'zh-Hans': '一个使用 OpenAI GPT-4 模型的简单插件。',
   },
 }
+
+export const customTool = {
+  type: PluginType.tool,
+  name: 'notion page search',
+  version: '1.2.0',
+  latest_version: '1.3.0',
+  icon: {
+    content: '🕵️',
+    background: '#FEF7C3',
+  },
+  label: {
+    'en-US': 'Notion Page Search',
+    'zh-Hans': 'Notion 页面搜索',
+  },
+  brief: {
+    'en-US': 'Description: Search Notion pages and open visited ones faster. No admin access required.More and more info...More and more info...More and more info...',
+    'zh-Hans': '搜索 Notion 页面并更快地打开已访问的页面。无需管理员访问权限。More and more info...More and more info...More and more info...',
+  },
+}
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index 5aae4649bb..d995f8c8f8 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -47,6 +47,7 @@ const Action: FC<Props> = ({
   // const handleDelete = () => { }
   return (
     <div className='flex space-x-1'>
+      {/* Only plugin installed from GitHub need to check if it's the new version  */}
       {isShowFetchNewVersion
         && (
           <Tooltip popupContent={t(`${i18nPrefix}.checkForUpdates`)}>