From 42c1fabc03aa71312f100d33440d5059ab773277 Mon Sep 17 00:00:00 2001 From: bz <88026162+bz-hashtag-0780@users.noreply.github.com> Date: Fri, 19 Sep 2025 07:08:44 +0400 Subject: [PATCH 1/5] pylon widget shows up without needing to connect wallet --- docusaurus.config.js | 14 +++++++-- src/components/PylonConfig.tsx | 54 ++++++++++++++++++++++++++++++++++ src/plugins/pylon-chat.js | 36 +++++++++++++++++++++++ 3 files changed, 101 insertions(+), 3 deletions(-) create mode 100644 src/components/PylonConfig.tsx create mode 100644 src/plugins/pylon-chat.js diff --git a/docusaurus.config.js b/docusaurus.config.js index a2722a4856..52a610401a 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -251,8 +251,15 @@ const config = { { property: 'og:image:width', content: '1200' }, { property: 'og:image:height', content: '630' }, { property: 'og:type', content: 'website' }, - { property: 'og:description', content: 'Flow Developer Documentation - The future of culture and digital assets is built on Flow' }, - { property: 'og:logo', content: getUrl() + '/img/flow-docs-logo-light.png' }, + { + property: 'og:description', + content: + 'Flow Developer Documentation - The future of culture and digital assets is built on Flow', + }, + { + property: 'og:logo', + content: getUrl() + '/img/flow-docs-logo-light.png', + }, ], docs: { sidebar: { @@ -320,7 +327,7 @@ const config = { to: '/build/cadence/getting-started/contract-interaction', }, { - label: "Tools & SDKs", + label: 'Tools & SDKs', to: '/build/tools', }, { @@ -632,6 +639,7 @@ const config = { }, require('./src/plugins/font-preload'), + require('./src/plugins/pylon-chat'), ], stylesheets: [ { diff --git a/src/components/PylonConfig.tsx b/src/components/PylonConfig.tsx new file mode 100644 index 0000000000..4a8064f521 --- /dev/null +++ b/src/components/PylonConfig.tsx @@ -0,0 +1,54 @@ +import React, { useEffect } from 'react'; +import { useCurrentUser } from '@site/src/hooks/use-current-user'; +import BrowserOnly from '@docusaurus/BrowserOnly'; + +// Your Pylon APP_ID +const PYLON_APP_ID = 'cc6b067b-cddb-4fd4-8043-030f95e703e4'; + +declare global { + interface Window { + pylon?: { + chat_settings: { + app_id: string; + email?: string; + name?: string; + account_external_id?: string; + }; + }; + Pylon?: (action: string, ...args: any[]) => void; + } +} + +const PylonConfigInner: React.FC = () => { + const { user, addr } = useCurrentUser(); + + useEffect(() => { + if (typeof window !== 'undefined') { + console.log('🔧 Setting Pylon configuration with user context...'); + console.log('👤 User logged in:', user.loggedIn, 'Address:', addr); + + window.pylon = { + chat_settings: { + app_id: PYLON_APP_ID, + // Add user context when available + ...(user.loggedIn && + addr && { + email: `${addr}@flow.blockchain`, + name: `Flow User ${addr.slice(0, 8)}...`, + account_external_id: addr, + }), + }, + }; + + console.log('✅ Pylon config set:', window.pylon); + } + }, [user.loggedIn, addr]); + + return null; +}; + +const PylonConfig: React.FC = () => { + return {() => }; +}; + +export default PylonConfig; diff --git a/src/plugins/pylon-chat.js b/src/plugins/pylon-chat.js new file mode 100644 index 0000000000..384dbaf4d8 --- /dev/null +++ b/src/plugins/pylon-chat.js @@ -0,0 +1,36 @@ +module.exports = function pylonChatPlugin() { + return { + name: 'pylon-chat', + injectHtmlTags() { + return { + headTags: [], + postBodyTags: [ + // Set Pylon configuration immediately (like the working test file) + { + tagName: 'script', + innerHTML: ` +console.log('🔧 Setting Pylon configuration...'); +window.pylon = { + chat_settings: { + app_id: 'cc6b067b-cddb-4fd4-8043-030f95e703e4', + email: 'anonymous@flow.docs', + name: 'Flow Docs User' + } +}; +console.log('✅ Pylon config set:', window.pylon); + `, + }, + // Then add Pylon chat widget script + { + tagName: 'script', + innerHTML: ` +console.log('📦 Loading Pylon script...'); +(function(){var e=window;var t=document;var n=function(){n.e(arguments)};n.q=[];n.e=function(e){n.q.push(e)};e.Pylon=n;var r=function(){var e=t.createElement("script");e.setAttribute("type","text/javascript");e.setAttribute("async","true");e.setAttribute("src","https://widget.usepylon.com/widget/cc6b067b-cddb-4fd4-8043-030f95e703e4");e.onload=function(){console.log('🎉 Pylon widget script fully loaded!');setTimeout(function(){console.log('🔍 Checking for chat elements:', document.querySelectorAll('[data-pylon]').length);if(window.Pylon){console.log('🚀 Chat bubble should now be visible!');}},1000);};e.onerror=function(){console.error('❌ Failed to load Pylon script');};var n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};if(t.readyState==="complete"){r()}else if(e.addEventListener){e.addEventListener("load",r,false)}})(); +console.log('✅ Pylon script loader initialized'); + `, + }, + ], + }; + }, + }; +}; From 09ca27fb119849a29f322c67f6da4c1e057d7856 Mon Sep 17 00:00:00 2001 From: bz <88026162+bz-hashtag-0780@users.noreply.github.com> Date: Fri, 19 Sep 2025 07:39:59 +0400 Subject: [PATCH 2/5] ask flow ai button, can open pylon chat widget --- src/theme/SearchBar.js | 13 ++--- .../Components/ContentFeatureList/index.tsx | 34 +++---------- .../lib/Components/GoldStarPanel/index.tsx | 51 +++++++------------ .../src/lib/Pages/HomePage/HeroSection.tsx | 33 +++++++++--- .../src/lib/Pages/HomePage/index.tsx | 2 + 5 files changed, 61 insertions(+), 72 deletions(-) diff --git a/src/theme/SearchBar.js b/src/theme/SearchBar.js index cd0a7ee0b3..b0bcd4521d 100644 --- a/src/theme/SearchBar.js +++ b/src/theme/SearchBar.js @@ -1,17 +1,18 @@ import React from 'react'; import SearchBar from '@theme-original/SearchBar'; -import AskCookbook from '@cookbookdev/docsbot/react'; -import BrowserOnly from '@docusaurus/BrowserOnly'; +// import AskCookbook from '@cookbookdev/docsbot/react'; +// import BrowserOnly from '@docusaurus/BrowserOnly'; /** It's a public API key, so it's safe to expose it here */ -const COOKBOOK_PUBLIC_API_KEY = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NzEyYWRkYjk5YjBmNWViM2ZkODQxOGMiLCJpYXQiOjE3MjkyNzc0MDMsImV4cCI6MjA0NDg1MzQwM30._bhlmAnFpvxvkTV0PvU-6FwabhFOdSOx-qed2UIogpY'; +// const COOKBOOK_PUBLIC_API_KEY = +// 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NzEyYWRkYjk5YjBmNWViM2ZkODQxOGMiLCJpYXQiOjE3MjkyNzc0MDMsImV4cCI6MjA0NDg1MzQwM30._bhlmAnFpvxvkTV0PvU-6FwabhFOdSOx-qed2UIogpY'; export default function SearchBarWrapper(props) { return ( <> - + {/* Replaced with Pylon chat widget integration */} + {/* {() => } - + */} ); } diff --git a/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx b/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx index b279b02dba..67212e27b4 100644 --- a/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx +++ b/src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx @@ -12,14 +12,14 @@ const ContentFeatures: Record = { image: 'feature-why-flow-image', header: 'Why Flow', text: "Explore Flow's scalable and high-performance blockchain architecture", - link: '/build/cadence/flow', + link: '/build/flow', }, 'smart-accounts': { icon: IconName.FEATURE_WAND_ICON, image: 'feature-wand-image', header: 'Smart Accounts', text: 'Benefit from flexible accounts with seamless key management for security and convenience', - link: 'build/basics/accounts', + link: '/build/cadence/basics/accounts', }, transactions: { icon: IconName.FEATURE_STACKS_ICON, @@ -62,31 +62,13 @@ const homepagePillData: Record< text: 'Flow AI Assistant', subText: 'Chat with devs', onClick: () => { - const el = document.querySelector('ask-cookbook') as HTMLElement & { - shadowRoot?: ShadowRoot; - }; - if (!el) { - console.warn('ask-cookbook element not found'); - return; + // Open Pylon chat widget instead of ask-cookbook + if (typeof window !== 'undefined' && window.Pylon) { + console.log('Opening Pylon chat widget from Flow AI Assistant button'); + window.Pylon('show'); + } else { + console.warn('Pylon widget not available yet'); } - - const shadow = el.shadowRoot; - if (!shadow) { - console.warn('ask-cookbook has no shadowRoot'); - return; - } - - const button = shadow.querySelector( - '#ask-cookbook-button', - ) as HTMLButtonElement; - if (!button) { - console.warn( - 'Internal #ask-cookbook-button not found in the shadow root', - ); - return; - } - - button.click(); }, }, 'developer-chat': { diff --git a/src/ui/design-system/src/lib/Components/GoldStarPanel/index.tsx b/src/ui/design-system/src/lib/Components/GoldStarPanel/index.tsx index 36dce9aad6..3080146719 100644 --- a/src/ui/design-system/src/lib/Components/GoldStarPanel/index.tsx +++ b/src/ui/design-system/src/lib/Components/GoldStarPanel/index.tsx @@ -10,31 +10,13 @@ export const GoldStarPanel: React.FC = () => { const handleAskFlowAI = (e: React.MouseEvent) => { e.preventDefault(); - const el = document.querySelector('ask-cookbook') as HTMLElement & { - shadowRoot?: ShadowRoot; - }; - if (!el) { - console.warn('ask-cookbook element not found'); - return; + // Open Pylon chat widget instead of ask-cookbook + if (typeof window !== 'undefined' && window.Pylon) { + console.log('Opening Pylon chat widget from Ask Flow AI button'); + window.Pylon('show'); + } else { + console.warn('Pylon widget not available yet'); } - - const shadow = el.shadowRoot; - if (!shadow) { - console.warn('ask-cookbook has no shadowRoot'); - return; - } - - const button = shadow.querySelector( - '#ask-cookbook-button', - ) as HTMLButtonElement; - if (!button) { - console.warn( - 'Internal #ask-cookbook-button not found in the shadow root', - ); - return; - } - - button.click(); }; const progress = user.loggedIn ? getProgress() * 100 : 0; @@ -47,13 +29,20 @@ export const GoldStarPanel: React.FC = () => {
-
-
@@ -83,9 +72,7 @@ export const GoldStarPanel: React.FC = () => { : 'Please connect your wallet and create a profile'}

{user.loggedIn && progress < 100 && ( -

- Learn More -

+

Learn More

)}
diff --git a/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx b/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx index 0f104d87cb..0b53abcfc1 100644 --- a/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx +++ b/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx @@ -1,7 +1,11 @@ import React from 'react'; import { useColorMode } from '@docusaurus/theme-common'; import { event } from '@site/src/utils/gtags.client'; -import { GA_EVENTS, GA_CATEGORIES, GA_ACTIONS } from '@site/src/constants/ga-events'; +import { + GA_EVENTS, + GA_CATEGORIES, + GA_ACTIONS, +} from '@site/src/constants/ga-events'; const HeroSection: React.FC = () => { const { colorMode } = useColorMode(); @@ -17,12 +21,14 @@ const HeroSection: React.FC = () => { Better apps deserve better blockchains

- Cadence for whats next. Solidity for what you've got. On Flow, both run natively with no tricks and no rewrites. Build the next killer app. + Cadence for whats next. Solidity{' '} + for what you've got. On Flow, both run natively with no tricks and + no rewrites. Build the next killer app.

- { event({ action: GA_EVENTS.ACTION_CARD_CLICK, @@ -30,10 +36,20 @@ const HeroSection: React.FC = () => { label: 'Build with AI', location: true, }); + + // Open Pylon chat widget instead of navigating to tutorial + if (typeof window !== 'undefined' && window.Pylon) { + console.log( + 'Opening Pylon chat widget from Ask Flow AI button', + ); + window.Pylon('show'); + } else { + console.warn('Pylon widget not available yet'); + } }} > Build with AI - + ', + }, { href: 'https://github.com/onflow', html: 'GitHubGithub', From 33aefe138b737164ac949b97d01ee2b1473d1eae Mon Sep 17 00:00:00 2001 From: bz <88026162+bz-hashtag-0780@users.noreply.github.com> Date: Fri, 19 Sep 2025 08:16:52 +0400 Subject: [PATCH 4/5] styling of Ask Flow AI button on header --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index a003dd741e..26e7deb5ba 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -312,7 +312,7 @@ const config = { type: 'html', position: 'right', value: - '', + "", }, { href: 'https://github.com/onflow', From a8c03f24b2c54566dca8b7bf2d734aec8c529ffc Mon Sep 17 00:00:00 2001 From: bz <88026162+bz-hashtag-0780@users.noreply.github.com> Date: Fri, 19 Sep 2025 08:37:30 +0400 Subject: [PATCH 5/5] Update HeroSection.tsx Keeping current old herosection (not adding chat widget there) --- .../src/lib/Pages/HomePage/HeroSection.tsx | 33 +++++-------------- 1 file changed, 8 insertions(+), 25 deletions(-) diff --git a/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx b/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx index 0b53abcfc1..68dbb89d86 100644 --- a/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx +++ b/src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx @@ -1,11 +1,7 @@ import React from 'react'; import { useColorMode } from '@docusaurus/theme-common'; import { event } from '@site/src/utils/gtags.client'; -import { - GA_EVENTS, - GA_CATEGORIES, - GA_ACTIONS, -} from '@site/src/constants/ga-events'; +import { GA_EVENTS, GA_CATEGORIES, GA_ACTIONS } from '@site/src/constants/ga-events'; const HeroSection: React.FC = () => { const { colorMode } = useColorMode(); @@ -21,14 +17,12 @@ const HeroSection: React.FC = () => { Better apps deserve better blockchains

- Cadence for whats next. Solidity{' '} - for what you've got. On Flow, both run natively with no tricks and - no rewrites. Build the next killer app. + Cadence for whats next. Solidity for what you've got. On Flow, both run natively with no tricks and no rewrites. Build the next killer app.

- +