Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add Pylon chat widget and replace Chef AI #1472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add Pylon chat widget and replace Chef AI #1472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
42c1fab
pylon widget shows up without needing to connect wallet
bz-hashtag-0780 Sep 19, 2025
09ca27f
ask flow ai button, can open pylon chat widget
bz-hashtag-0780 Sep 19, 2025
32bfcf9
Update docusaurus.config.js
bz-hashtag-0780 Sep 19, 2025
33aefe1
styling of Ask Flow AI button on header
bz-hashtag-0780 Sep 19, 2025
a8c03f2
Update HeroSection.tsx
bz-hashtag-0780 Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,14 +245,27 @@ const config = {
image: 'img/og-image-flow-docs-2025-dark.png',
metadata: [
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:image', content: getUrl() + '/img/og-image-flow-docs-2025-dark.png' },
{ property: 'og:image', content: getUrl() + '/img/og-image-flow-docs-2025-dark.png' },
{
name: 'twitter:image',
content: getUrl() + '/img/og-image-flow-docs-2025-dark.png',
},
{
property: 'og:image',
content: getUrl() + '/img/og-image-flow-docs-2025-dark.png',
},
{ property: 'og:image:type', content: 'image/png' },
{ 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: {
Expand Down Expand Up @@ -295,6 +308,12 @@ const config = {
type: 'custom-connectButton',
position: 'right',
},
{
type: 'html',
position: 'right',
value:
"<button onclick=\"if(window.Pylon){console.log('Opening Pylon from navbar'); window.Pylon('show');}else{console.warn('Pylon not available');}\" class=\"inline-flex items-center justify-center font-semibold text-center border transition duration-200 cursor-pointer font-display text-sm px-4 py-2 rounded-md bg-black text-white border-transparent hover:bg-gray-800 hover:text-white active:bg-gray-900 active:text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 dark:hover:text-black dark:active:bg-gray-200 dark:active:text-black\">Ask Flow AI</button>",
},
{
href: 'https://github.com/onflow',
html: '<img src="" alt="GitHub" id="navbar-github" class="box-content h-32 w-32"/><span class="p-2 desktop:hidden">Github</span>',
Expand All @@ -320,7 +339,7 @@ const config = {
to: '/build/cadence/getting-started/contract-interaction',
},
{
label: "Tools & SDKs",
label: 'Tools & SDKs',
to: '/build/tools',
},
{
Expand Down Expand Up @@ -632,6 +651,7 @@ const config = {
},

require('./src/plugins/font-preload'),
require('./src/plugins/pylon-chat'),
],
stylesheets: [
{
Expand Down
54 changes: 54 additions & 0 deletions src/components/PylonConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <BrowserOnly>{() => <PylonConfigInner />}</BrowserOnly>;
};

export default PylonConfig;
36 changes: 36 additions & 0 deletions src/plugins/pylon-chat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: '[email protected]',
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');
`,
},
],
};
},
};
};
13 changes: 7 additions & 6 deletions src/theme/SearchBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<SearchBar {...props} />
<BrowserOnly>
{/* Replaced with Pylon chat widget integration */}
{/* <BrowserOnly>
{() => <AskCookbook apiKey={COOKBOOK_PUBLIC_API_KEY} />}
</BrowserOnly>
</BrowserOnly> */}
</>
);
}
34 changes: 8 additions & 26 deletions src/ui/design-system/src/lib/Components/ContentFeatureList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ const ContentFeatures: Record<string, ContentFeatureProps> = {
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,
Expand Down Expand Up @@ -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': {
Expand Down
51 changes: 19 additions & 32 deletions src/ui/design-system/src/lib/Components/GoldStarPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -47,13 +29,20 @@ export const GoldStarPanel: React.FC = () => {
<div className="flex flex-col gap-4 h-full">
<div className="flex gap-2">
<button
onClick={() => window.open('https://calendar.google.com/calendar/embed?src=c_47978f5cd9da636cadc6b8473102b5092c1a865dd010558393ecb7f9fd0c9ad0%40group.calendar.google.com', '_blank')}
onClick={() =>
window.open(
'https://calendar.google.com/calendar/embed?src=c_47978f5cd9da636cadc6b8473102b5092c1a865dd010558393ecb7f9fd0c9ad0%40group.calendar.google.com',
'_blank',
)
}
className={`flex-1 ${colors.black.dark} text-white px-4 py-2 rounded-xl hover:bg-gray-700 appearance-none cursor-pointer border-0`}
>
Office Hours
</button>
<button
onClick={() => window.open('https://github.com/orgs/onflow/discussions', '_blank')}
onClick={() =>
window.open('https://github.com/orgs/onflow/discussions', '_blank')
}
className={`flex-1 ${colors.black.dark} text-white px-4 py-2 rounded-xl hover:bg-gray-700 appearance-none cursor-pointer border-0`}
>
Discussions
Expand All @@ -66,13 +55,13 @@ export const GoldStarPanel: React.FC = () => {
</button>
</div>

<div
<div
onClick={handleProfileClick}
className={`${colors.black.dark} p-6 rounded-lg shadow-lg flex-1 hover:scale-[1.02] transition-transform cursor-pointer`}
>
<div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div
className={`${colors.flowgreen.light} h-2.5 rounded-full`}
<div
className={`${colors.flowgreen.light} h-2.5 rounded-full`}
style={{ width: `${progress}%` }}
></div>
</div>
Expand All @@ -83,9 +72,7 @@ export const GoldStarPanel: React.FC = () => {
: 'Please connect your wallet and create a profile'}
</p>
{user.loggedIn && progress < 100 && (
<p className="text-sm text-gray-100">
Learn More
</p>
<p className="text-sm text-gray-100">Learn More</p>
)}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,4 @@ const HeroSection: React.FC = () => {
);
};

export default HeroSection;
export default HeroSection;
2 changes: 2 additions & 0 deletions src/ui/design-system/src/lib/Pages/HomePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import HeroSection from './HeroSection';
import FeatureSection from './FeatureSection';
import BrowseByCategory from './BrowseByCategory';
import QuickStartShowcase from './QuickStartShowcase';
// import { ContentFeatureList } from '../../Components/ContentFeatureList';
// import { HomeHeader } from '../../Components/HomeHeader';

export type HomePageProps = {};

Expand Down