diff --git a/api/v1/_types.ts b/api/v1/_types.ts index 8a31d29..4d956a1 100644 --- a/api/v1/_types.ts +++ b/api/v1/_types.ts @@ -1,3 +1,4 @@ export interface Settings { SERPAPI_API_KEY?: string; + SHOW_STYLE?: string; } diff --git a/api/v1/_utils.ts b/api/v1/_utils.ts index a8ce323..c0ce84d 100644 --- a/api/v1/_utils.ts +++ b/api/v1/_utils.ts @@ -5,6 +5,7 @@ const BASE_URL = 'https://serpapi.com/search'; const fetchResult = async (args: { query: string }, settings: Settings): Promise => { const apiKey = settings.SERPAPI_API_KEY; + const showStyle = settings.SHOW_STYLE ?? 'list'; const { default: querystring } = await import('query-string'); @@ -27,15 +28,18 @@ const fetchResult = async (args: { query: string }, settings: Settings): Promise const results = data.organic_results as OrganicResults; - return results.map((r) => ({ - content: r.snippet, - date: r.date, - displayed_link: r.displayed_link, - favicon: r.favicon, - link: r.link, - source: r.source, - title: r.title, - })); + return { + search_items: results.map((r) => ({ + content: r.snippet, + date: r.date, + displayed_link: r.displayed_link, + favicon: r.favicon, + link: r.link, + source: r.source, + title: r.title, + })), + show_style: showStyle, + }; }; export default fetchResult; diff --git a/docs/data.ts b/docs/data.ts index d3b330b..1cee9fe 100644 --- a/docs/data.ts +++ b/docs/data.ts @@ -1,93 +1,95 @@ import { Result } from '@lobehub/chat-plugin-search-engine'; -export const data: Result = [ - { - content: - 'Empowering your AI dreams with LobeHub. LobeHub has 16 repositories available. Follow their code on GitHub.', - displayed_link: 'https://github.com › lobehub', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f1bbde9729ef8e1ae8a488d7c74c8ad5.png', - link: 'https://github.com/lobehub', - source: 'github.com', - title: 'LobeHub - GitHub', - }, - { - content: - 'Lobe UI is an open-source UI component library for building AIGC web apps - GitHub - lobehub/lobe-ui: Lobe UI is an open-source UI component library for ...', - displayed_link: 'https://github.com › lobehub › lobe-ui', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f7d5cfce4fde91906aba32fa8a7f31b2.png', - link: 'https://github.com/lobehub/lobe-ui', - source: 'github.com', - title: 'lobehub/lobe-ui - GitHub', - }, - { - content: 'Meet the LobeHub: Empowering your AI dreams with LobeHub.', - displayed_link: 'https://lablab.ai › anthropic-ai-hackathon › l...', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39220df8c473af72e6e3eaf6444118e39dcd.png', - link: 'https://lablab.ai/event/anthropic-ai-hackathon/lobehub', - source: 'lablab.ai', - title: 'Team: LobeHub - Lablab.ai', - }, - { - content: - 'dumi-theme-antd-style · 源码. dumi2 theme for antd-style document website. dumi-theme-lobehub · 源码. dumi2 theme for LobeHub document website.', - displayed_link: 'https://d.umijs.org › theme › market', - link: 'https://d.umijs.org/theme/market', - source: 'umijs.org', - title: 'Dumi 主题市场', - }, - { - content: - 'Lobe UI is an open-source UI component library for building AIGC web apps. Version: 1.68.0 was published by arvinxx.', - date: '2023年8月5日', - displayed_link: 'https://socket.dev › npm › @lobehub', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922a78893068fa9ff7249d46b96a844cc8f.png', - link: 'https://socket.dev/npm/package/@lobehub/ui', - source: 'socket.dev', - title: '@lobehub/ui - npm Package Overview - Socket', - }, - { - content: - 'Log in · Sign up. See new Tweets. Opens profile photo. Follow. Click to Follow Lovehub07. Lovehub. @Lovehub07. Joined June 2020.', - displayed_link: 'https://twitter.com › Lovehub07', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39227335dd288e4903d572cd8aad8641d5b6.png', - link: 'https://twitter.com/Lovehub07', - source: 'twitter.com', - title: 'Lovehub (@Lovehub07) / X - Twitter', - }, - { - content: - 'dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading ...', - displayed_link: 'https://www.npmjs.com › ~canisminor1990', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f5fc8b00bf3ee8f0db2499a79c5f1e36.png', - link: 'https://www.npmjs.com/~canisminor1990', - source: 'npmjs.com', - title: 'canisminor1990 - npm', - }, - { - content: - 'Lobe Chat Plugin SDK, help you to build an amazing chat plugin for Lobe Chat - 1.0.1 - a TypeScript package on npm - Libraries.io.', - date: '7天前', - displayed_link: 'https://libraries.io › npm › chat-plugin-sdk', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922256f22e96143101960e1008fb76a0c04.png', - link: 'https://libraries.io/npm/@lobehub%2Fchat-plugin-sdk', - source: 'libraries.io', - title: '@lobehub/chat-plugin-sdk 1.0.1 on npm - Libraries.io', - }, - { - content: - '3-lobe hub and shaft for these headlight motors: 87-92 Firebird 87-88 Fiero 87-91 Reatta.', - displayed_link: 'http://www.top-downsolutions.com › 87-Fire...', - favicon: - 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922b551ab2717e44679b0fe989081b1da57.png', - link: 'http://www.top-downsolutions.com/87-Firebird-Headlight-motor', - source: 'top-downsolutions.com', - title: '3-lobe hub and shaft for 87-92 Firebird headlight motor', - }, -]; +export const data: Result = { + search_items: [ + { + content: + 'Empowering your AI dreams with LobeHub. LobeHub has 16 repositories available. Follow their code on GitHub.', + displayed_link: 'https://github.com › lobehub', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f1bbde9729ef8e1ae8a488d7c74c8ad5.png', + link: 'https://github.com/lobehub', + source: 'github.com', + title: 'LobeHub - GitHub', + }, + { + content: + 'Lobe UI is an open-source UI component library for building AIGC web apps - GitHub - lobehub/lobe-ui: Lobe UI is an open-source UI component library for ...', + displayed_link: 'https://github.com › lobehub › lobe-ui', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f7d5cfce4fde91906aba32fa8a7f31b2.png', + link: 'https://github.com/lobehub/lobe-ui', + source: 'github.com', + title: 'lobehub/lobe-ui - GitHub', + }, + { + content: 'Meet the LobeHub: Empowering your AI dreams with LobeHub.', + displayed_link: 'https://lablab.ai › anthropic-ai-hackathon › l...', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39220df8c473af72e6e3eaf6444118e39dcd.png', + link: 'https://lablab.ai/event/anthropic-ai-hackathon/lobehub', + source: 'lablab.ai', + title: 'Team: LobeHub - Lablab.ai', + }, + { + content: + 'dumi-theme-antd-style · 源码. dumi2 theme for antd-style document website. dumi-theme-lobehub · 源码. dumi2 theme for LobeHub document website.', + displayed_link: 'https://d.umijs.org › theme › market', + link: 'https://d.umijs.org/theme/market', + source: 'umijs.org', + title: 'Dumi 主题市场', + }, + { + content: + 'Lobe UI is an open-source UI component library for building AIGC web apps. Version: 1.68.0 was published by arvinxx.', + date: '2023年8月5日', + displayed_link: 'https://socket.dev › npm › @lobehub', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922a78893068fa9ff7249d46b96a844cc8f.png', + link: 'https://socket.dev/npm/package/@lobehub/ui', + source: 'socket.dev', + title: '@lobehub/ui - npm Package Overview - Socket', + }, + { + content: + 'Log in · Sign up. See new Tweets. Opens profile photo. Follow. Click to Follow Lovehub07. Lovehub. @Lovehub07. Joined June 2020.', + displayed_link: 'https://twitter.com › Lovehub07', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b39227335dd288e4903d572cd8aad8641d5b6.png', + link: 'https://twitter.com/Lovehub07', + source: 'twitter.com', + title: 'Lovehub (@Lovehub07) / X - Twitter', + }, + { + content: + 'dumi-theme-lobehub is a documentation site theme package designed for dumi2. It provides a more beautiful and user-friendly development and reading ...', + displayed_link: 'https://www.npmjs.com › ~canisminor1990', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922f5fc8b00bf3ee8f0db2499a79c5f1e36.png', + link: 'https://www.npmjs.com/~canisminor1990', + source: 'npmjs.com', + title: 'canisminor1990 - npm', + }, + { + content: + 'Lobe Chat Plugin SDK, help you to build an amazing chat plugin for Lobe Chat - 1.0.1 - a TypeScript package on npm - Libraries.io.', + date: '7天前', + displayed_link: 'https://libraries.io › npm › chat-plugin-sdk', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922256f22e96143101960e1008fb76a0c04.png', + link: 'https://libraries.io/npm/@lobehub%2Fchat-plugin-sdk', + source: 'libraries.io', + title: '@lobehub/chat-plugin-sdk 1.0.1 on npm - Libraries.io', + }, + { + content: + '3-lobe hub and shaft for these headlight motors: 87-92 Firebird 87-88 Fiero 87-91 Reatta.', + displayed_link: 'http://www.top-downsolutions.com › 87-Fire...', + favicon: + 'https://serpapi.com/searches/64e83bc4c9990330f48fd62f/images/f40516e98093ab4c002d39bf835b3922b551ab2717e44679b0fe989081b1da57.png', + link: 'http://www.top-downsolutions.com/87-Firebird-Headlight-motor', + source: 'top-downsolutions.com', + title: '3-lobe hub and shaft for 87-92 Firebird headlight motor', + }, + ], +}; diff --git a/public/manifest-dev.json b/public/manifest-dev.json index c0f41cc..d216401 100644 --- a/public/manifest-dev.json +++ b/public/manifest-dev.json @@ -18,6 +18,12 @@ ], "gateway": "http://localhost:3400/api/gateway", "identifier": "searchEngine-dev", + "meta": { + "avatar": "🔍", + "tags": ["web", "search"], + "title": "Search Engine (dev)", + "description": "Query search engine to get information" + }, "settings": { "type": "object", "required": ["SERPAPI_API_KEY"], @@ -29,6 +35,12 @@ "minLength": 64, "maxLength": 64, "format": "password" + }, + "SHOW_STYLE": { + "title": "Searched items show style | 搜索结果展示风格", + "description": "default: list view | 默认: 列表视图", + "type": "string", + "enum": ["grid", "list"] } } }, diff --git a/public/manifest.json b/public/manifest.json index 5e7631d..9e2061a 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -38,6 +38,12 @@ "minLength": 64, "maxLength": 64, "format": "password" + }, + "SHOW_STYLE": { + "title": "Searched items show style | 搜索结果展示风格", + "description": "default: list view | 默认: 列表视图", + "type": "string", + "enum": ["grid", "list"] } } }, diff --git a/src/Render.tsx b/src/Render.tsx index e1461c7..4feeec5 100644 --- a/src/Render.tsx +++ b/src/Render.tsx @@ -12,7 +12,8 @@ const listRender = (item: any) => ; const gridRender = (item: any) => ; const Render = memo>(({ content }) => { - const [grid, setGrid] = useState(false); + const showStyle = content.show_style; + const [grid, setGrid] = useState(showStyle === 'grid'); return ( @@ -22,7 +23,7 @@ const Render = memo>(({ content }) => { diff --git a/src/type.ts b/src/type.ts index e369c6f..0a930d8 100644 --- a/src/type.ts +++ b/src/type.ts @@ -10,7 +10,10 @@ export interface SearchItem { title: string; } -export type Result = SearchItem[]; +export interface Result { + search_items: SearchItem[]; + show_style?: string; +} interface OrganicResult { about_page_link: string;