Skip to content

Commit

Permalink
Updated doc website hero section
Browse files Browse the repository at this point in the history
  • Loading branch information
@salmenus
salmenus committed Jun 3, 2024
1 parent e282ef6 commit 5cc3638
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 44 deletions.
4 changes: 4 additions & 0 deletions docs/src/pages/(sections)/hero/hero.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
gap: 2rem;
}

.adaptersShowcase {
padding: 1rem;
}

.heroTitleContainer {
display: flex;
flex-direction: column;
Expand Down
99 changes: 56 additions & 43 deletions docs/src/pages/(sections)/hero/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@ import Heading from '@theme/Heading';
const NluxLogoLight = '/nlux/images/logos/nlux/black.png';
const NluxLogoDark = '/nlux/images/logos/nlux/white.png';
const JavaScriptLogo = '/nlux/images/logos/platforms/javascript-logo-60pxh.png';
const ReactJsLogo = '/nlux/images/logos/platforms/react-js-logo-60pxh.png'
const ReactJsLogo = '/nlux/images/logos/platforms/react-js-logo-60pxh.png';
const LangChainLogo = '/nlux/images/logos/platforms/langchain-logo-60pxh.png';
const OpenAiLogo = '/nlux/images/logos/platforms/openai-logo-60pxh.png';
const HuggingFaceLogo = '/nlux/images/logos/platforms/hugging-face-logo-60pxh.png'
const AdapterLogo = '/nlux/images/logos/platforms/adapters-logo-60pxh.png';
const HuggingFaceLogo = '/nlux/images/logos/platforms/hugging-face-logo-60pxh.png';

export const Hero = ({className}: {className?: string}) => {
const { colorMode } = useColorMode();
export const Hero = ({className}: { className?: string }) => {
const {colorMode} = useColorMode();
const [nluxLogoForHeroBanner, setLogo] = useState(
colorMode === 'dark' ? NluxLogoDark : NluxLogoLight
colorMode === 'dark' ? NluxLogoDark : NluxLogoLight,
);

useEffect(() => {
Expand All @@ -36,37 +37,66 @@ export const Hero = ({className}: {className?: string}) => {
<img src={nluxLogoForHeroBanner} alt="NLUX logo" width={200}/>
<a
href="https://github.com/nluxai/nlux"
target="_blank"><img src={'https://img.shields.io/badge/Free%20%26%20Open%20Source-%2348c342'}/></a>
target="_blank"><img
src={'https://img.shields.io/badge/Free%20%26%20Open%20Source-%2348c342'}/></a>
</Heading>
<div className={heroStyles.heroSubtitleContainer}>
<p className={clsx('hero__subtitle', heroStyles.heroSubtitleContent)}>
The <strong>Powerful</strong> Conversational AI<br />
The <strong>Powerful</strong> Conversational AI<br/>
JavaScript Library
</p>
</div>
</div>
<div className={heroStyles.adaptersShowcase}>
<div className={heroStyles.platformName}>
<img src={LangChainLogo} alt="LangChain Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>LangChain<br/>Adapters</h5>
</div>
<div className={heroStyles.platformName}>
<img src={HuggingFaceLogo} alt="Hugging Face Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>Hugging&nbsp;Face<br/>Adapters</h5>
</div>
<div className={heroStyles.platformName}>
<img src={OpenAiLogo} alt="OpenAI Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>OpenAI<br/>Adapters</h5>
<div className={heroStyles.adaptersShowcase}>
<div className={heroStyles.platformName}>
<img src={ReactJsLogo} alt="React JS Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>React JS<br/>Components</h5>
</div>
<div className={heroStyles.platformName}>
<img src={JavaScriptLogo} alt="Vanilla JS Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>JavaScript<br/>API</h5>
</div>
</div>
<div className={heroStyles.platformName}>
<img src={ReactJsLogo} alt="React JS Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>React JS<br/>Components</h5>
</div>
<div>
<div className={heroStyles.integrationsTitle}>
Integrates with
</div>
<div className={heroStyles.platformName}>
<img src={JavaScriptLogo} alt="Vanilla JS Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>JavaScript<br/>API</h5>
<div className={heroStyles.adaptersShowcase}>
<div className={heroStyles.platformName}>
<img src={LangChainLogo} alt="LangChain Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>LangChain</h5>
</div>
<div className={heroStyles.platformName}>
<img src={HuggingFaceLogo} alt="Hugging Face Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>Hugging&nbsp;Face</h5>
</div>
<div className={heroStyles.platformName}>
<img src={OpenAiLogo} alt="OpenAI Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>OpenAI</h5>
</div>
<div className={heroStyles.platformName}>
<img src={AdapterLogo} alt="Adapters Logo" width={40}/>
<h5 style={{textAlign: 'left'}}>Any AI Backend</h5>
</div>
</div>
</div>
<div className={styles.nluxInAction}>
<p>
<strong><code>@nlux/react</code> in action</strong> 👇 ―
You can edit the code below to see how it works.
</p>
<CodeEditor
className={styles.codeEditor}
direction="row"
files={{
'App.tsx': exampleIntroFileAiChatBot(colorMode),
'adapter.ts': exampleIntroFileStreamAdapter,
'personas.tsx': exampleIntroFilePersonas,
}}
editorHeight={420}
simulatedPrompt="How an AI assistant can enhance my website's user experience?"
/>
</div>
<div className={styles.buttons}>
<Link
className="button button--primary button--lg"
Expand All @@ -87,23 +117,6 @@ export const Hero = ({className}: {className?: string}) => {
API Reference
</Link>
</div>
<div className={styles.nluxInAction}>
<p>
<strong><code>@nlux/react</code> in action</strong> 👇 ―
You can edit the code below to see how it works.
</p>
<CodeEditor
className={styles.codeEditor}
direction="row"
files={{
'App.tsx': exampleIntroFileAiChatBot(colorMode),
'adapter.ts': exampleIntroFileStreamAdapter,
'personas.tsx': exampleIntroFilePersonas,
}}
editorHeight={420}
simulatedPrompt="How an AI assistant can enhance my website's user experience?"
/>
</div>
</div>
</header>
);
Expand Down
Binary file added docs/static/images/logos/platforms/adapters-logo-60pxh.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/react/langchain/src/hooks/useChatAdapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const useChatAdapter = <AiMsg = string>(
return;
}

const newAdapter = getAdapterBuilder(options).create();
const newAdapter = getAdapterBuilder<AiMsg>(options).create();
setAdapter(newAdapter);
}, [
isInitialized,
Expand Down

0 comments on commit 5cc3638

Please sign in to comment.