Skip to content

Commit

Permalink
fixed yarn lint and build
Browse files Browse the repository at this point in the history
  • Loading branch information
@msenechal
msenechal committed Jan 8, 2025
1 parent 3317153 commit 5ec40e4
Show file tree
Hide file tree
Showing 6 changed files with 239 additions and 180 deletions.
71 changes: 44 additions & 27 deletions src/templates/shared/components/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,48 +28,65 @@ const Card: React.FC<CardProps> & {
Content: React.FC<CardContentProps>;
} = ({ layout, imageSrc, imageSize = 'small', iconSystem, children, className }) => {
return (
<Box
className={`n-bg-palette-neutral-bg-weak border rounded-3xl shadow-lg mx-auto ${layout === 'horizontal' ? 'flex' : 'block'} ${className}`}
<Box
className={`n-bg-palette-neutral-bg-weak border rounded-3xl shadow-lg mx-auto ${
layout === 'horizontal' ? 'flex' : 'block'
} ${className}`}
style={{ padding: 0 }}
>
<div className={`n-bg-palette-neutral-bg-weak border rounded-3xl shadow-lg mx-auto ${layout === 'horizontal' ? 'flex' : 'block'} ${className}`}>
{imageSrc && (
<div className={`relative overflow-hidden ${layout === 'horizontal' ? (imageSize === 'full' ? 'w-1/3' : 'w-16 h-16 mr-4') : (imageSize === 'full' ? 'w-full h-64' : 'w-16 h-16 mb-4')}`}>
<img
src={imageSrc}
alt="Card Image"
className={`${imageSize === 'full' ? 'object-cover w-full h-full' : 'object-cover w-16 h-16'} ${layout === 'horizontal' ? 'rounded-tl-3xl rounded-bl-3xl' : 'rounded-tl-3xl rounded-tr-3xl'}`}

/>
</div>
)}
{iconSystem && (
<div className='p-4'>
{React.createElement(iconSystem, { className: 'w-8 h-8' })}
</div>
)}
<div className={`p-4 ${layout === 'horizontal' ? 'flex flex-col justify-between w-2/3' : ''}`}>
{children}
</div>
</div>
<div
className={`n-bg-palette-neutral-bg-weak border rounded-3xl shadow-lg mx-auto ${
layout === 'horizontal' ? 'flex' : 'block'
} ${className}`}
>
{imageSrc && (
<div
className={`relative overflow-hidden ${
layout === 'horizontal'
? imageSize === 'full'
? 'w-1/3'
: 'w-16 h-16 mr-4'
: imageSize === 'full'
? 'w-full h-64'
: 'w-16 h-16 mb-4'
}`}
>
<img
src={imageSrc}
alt='Card Image'
className={`${imageSize === 'full' ? 'object-cover w-full h-full' : 'object-cover w-16 h-16'} ${
layout === 'horizontal' ? 'rounded-tl-3xl rounded-bl-3xl' : 'rounded-tl-3xl rounded-tr-3xl'
}`}
/>
</div>
)}
{iconSystem && <div className='p-4'>{React.createElement(iconSystem, { className: 'w-8 h-8' })}</div>}
<div className={`p-4 ${layout === 'horizontal' ? 'flex flex-col justify-between w-2/3' : ''}`}>{children}</div>
</div>
</Box>
);
}
};

const Header: React.FC<CardHeaderProps> = ({ children }) => (
<Typography variant="h5" className="mb-2">{children}</Typography>
<Typography variant='h5' className='mb-2'>
{children}
</Typography>
);

const Subheader: React.FC<CardSubheaderProps> = ({ children }) => (
<Typography variant="subheading-large" className="mb-2">{children}</Typography>
<Typography variant='subheading-large' className='mb-2'>
{children}
</Typography>
);

const Content: React.FC<CardContentProps> = ({ children }) => (
<Typography variant="body-small" className='flex flex-col gap-3'>{children}</Typography>
<Typography variant='body-small' className='flex flex-col gap-3'>
{children}
</Typography>
);

Card.Header = Header;
Card.Subheader = Subheader;
Card.Content = Content;

export default Card;
export default Card;
92 changes: 59 additions & 33 deletions src/templates/shared/components/Chatbot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { useEffect, useRef, useState } from 'react';
import { Button, Widget, Typography, Avatar, TextInput, IconButton, useCopyToClipboard, Modal } from '@neo4j-ndl/react';

import ChatBotAvatar from '../assets/chatbot-ai.png';
import { ArrowPathIconOutline, ClipboardDocumentIconOutline, HandThumbDownIconOutline, InformationCircleIconOutline, SpeakerWaveIconOutline } from '@neo4j-ndl/react/icons';
import {
ArrowPathIconOutline,
ClipboardDocumentIconOutline,
HandThumbDownIconOutline,
InformationCircleIconOutline,
SpeakerWaveIconOutline,
} from '@neo4j-ndl/react/icons';
import RetrievalInformation from './RetrievalInformation';

type ChatbotProps = {
Expand All @@ -26,7 +32,7 @@ export default function Chatbot(props: ChatbotProps) {
const { messages } = props;
const [listMessages, setListMessages] = useState(messages);
const [inputMessage, setInputMessage] = useState('');
const [value, copy] = useCopyToClipboard();
const [, copy] = useCopyToClipboard();
const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
const [timeTaken, setTimeTaken] = useState<number>(0);
const [sourcesModal, setSourcesModal] = useState<string[]>([]);
Expand All @@ -53,7 +59,14 @@ export default function Chatbot(props: ChatbotProps) {
const datetime = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
setListMessages((msgs) => [
...msgs,
{ id: Date.now(), user: 'chatbot', message: currentTypedText, datetime: datetime, isTyping: true, src: responseText.src },
{
id: Date.now(),
user: 'chatbot',
message: currentTypedText,
datetime: datetime,
isTyping: true,
src: responseText.src,
},
]);
} else {
setListMessages((msgs) => msgs.map((msg) => (msg.isTyping ? { ...msg, message: currentTypedText } : msg)));
Expand All @@ -76,7 +89,11 @@ export default function Chatbot(props: ChatbotProps) {
setListMessages((listMessages) => [...listMessages, userMessage]);
setInputMessage('');

const chatbotReply = {response: 'Hello, here is an example response with sources. To use the chatbot, plug this to your backend with a fetch containing an object response of type: {response: string, src: Array<string>}', src: ["1:1234-abcd-efgh-ijkl-5678:2", "3:8765-zyxw-vuts-rqpo-4321:4"]}; // Replace with getting a response from your chatbot through your APIs
const chatbotReply = {
response:
'Hello, here is an example response with sources. To use the chatbot, plug this to your backend with a fetch containing an object response of type: {response: string, src: Array<string>}',
src: ['1:1234-abcd-efgh-ijkl-5678:2', '3:8765-zyxw-vuts-rqpo-4321:4'],
}; // Replace with getting a response from your chatbot through your APIs
simulateTypingEffect(chatbotReply);
};

Expand Down Expand Up @@ -147,31 +164,36 @@ export default function Chatbot(props: ChatbotProps) {
<Typography variant='body-small' className='text-right'>
{chat.user === 'chatbot' ? (
<div className='flex gap-1'>
<>
<IconButton isClean ariaLabel="Search Icon">
<SpeakerWaveIconOutline className="w-4 h-4 inline-block"/>
</IconButton>
{chat.src ? (
<IconButton isClean ariaLabel="Search Icon"
onClick={() => {
setModelModal('OpenAI GPT 4o');
setSourcesModal(chat.src ?? []);
setTimeTaken(50);
setIsOpenModal(true)
}}>
<InformationCircleIconOutline className='w-4 h-4 inline-block' />
</IconButton>
) : <></>}
<IconButton isClean ariaLabel="Search Icon" onClick={() => copy(chat.message)} >
<ClipboardDocumentIconOutline className='w-4 h-4 inline-block' />
</IconButton>
<IconButton isClean ariaLabel="Search Icon">
<ArrowPathIconOutline className='w-4 h-4 inline-block' />
</IconButton>
<IconButton isClean ariaLabel="Search Icon">
<HandThumbDownIconOutline className='w-4 h-4 inline-block n-text-palette-danger-text' />
</IconButton>
</>
<>
<IconButton isClean ariaLabel='Search Icon'>
<SpeakerWaveIconOutline className='w-4 h-4 inline-block' />
</IconButton>
{chat.src ? (
<IconButton
isClean
ariaLabel='Search Icon'
onClick={() => {
setModelModal('OpenAI GPT 4o');
setSourcesModal(chat.src ?? []);
setTimeTaken(50);
setIsOpenModal(true);
}}
>
<InformationCircleIconOutline className='w-4 h-4 inline-block' />
</IconButton>
) : (
<></>
)}
<IconButton isClean ariaLabel='Search Icon' onClick={() => copy(chat.message)}>
<ClipboardDocumentIconOutline className='w-4 h-4 inline-block' />
</IconButton>
<IconButton isClean ariaLabel='Search Icon'>
<ArrowPathIconOutline className='w-4 h-4 inline-block' />
</IconButton>
<IconButton isClean ariaLabel='Search Icon'>
<HandThumbDownIconOutline className='w-4 h-4 inline-block n-text-palette-danger-text' />
</IconButton>
</>
</div>
) : (
<></>
Expand All @@ -192,18 +214,22 @@ export default function Chatbot(props: ChatbotProps) {
onChange={handleInputChange}
htmlAttributes={{
type: 'text',
"aria-label": "Chatbot Input",
'aria-label': 'Chatbot Input',
}}
/>
<Button type='submit'>Submit</Button>
</form>
</div>

<Modal modalProps={{
<Modal
modalProps={{
id: 'default-menu',
className: 'n-p-token-4 n-bg-palette-neutral-bg-weak n-rounded-lg min-w-[60%]',
}} onClose={handleCloseModal} isOpen={isOpenModal}>
<RetrievalInformation sources={sourcesModal} model={modelModal} timeTaken={timeTaken} />
}}
onClose={handleCloseModal}
isOpen={isOpenModal}
>
<RetrievalInformation sources={sourcesModal} model={modelModal} timeTaken={timeTaken} />
</Modal>
</div>
);
Expand Down
49 changes: 28 additions & 21 deletions src/templates/shared/components/DemoCards.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,98 @@
import Card from './Card';
import testImg from '../assets/cardImg.png';
import { Button, Typography } from '@neo4j-ndl/react';
import { AcademicCapIconOutline, RocketLaunchIconOutline } from '@neo4j-ndl/react/icons';
import { AcademicCapIconOutline, RocketLaunchIconOutline } from '@neo4j-ndl/react/icons';

export default function DemoCards() {
return (
<div className="min-h-screen max-h-full p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 n-bg-palette-neutral-bg-default">
<Card layout="vertical" imageSrc={testImg} imageSize="full" className="h-auto w-96">
<div className='min-h-screen max-h-full p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 n-bg-palette-neutral-bg-default'>
<Card layout='vertical' imageSrc={testImg} imageSize='full' className='h-auto w-96'>
<Card.Header>Header text</Card.Header>
<Card.Subheader>Subtitle or description</Card.Subheader>
<Card.Content>
<p>Some description about relatively important things but not too long since this is a card component.</p>
<ul className="list-disc list-inside">
<ul className='list-disc list-inside'>
<li>1 Key information</li>
<li>12.59 Key information</li>
<li>3 Key information</li>
</ul>
<div className='flex flex-row min-w-full justify-between'>
<Button size='small' color='danger' className='w-2/5 mx-2.5'><Typography variant="body-small">Cancel</Typography></Button>
<Button size='small' color='primary' className='w-2/5 mx-2.5'><Typography variant="body-small">Sign</Typography></Button>
<Button size='small' color='danger' className='w-2/5 mx-2.5'>
<Typography variant='body-small'>Cancel</Typography>
</Button>
<Button size='small' color='primary' className='w-2/5 mx-2.5'>
<Typography variant='body-small'>Sign</Typography>
</Button>
</div>
</Card.Content>
</Card>

<Card layout="vertical" imageSrc={testImg} imageSize="full" className="h-auto w-96">
<Card layout='vertical' imageSrc={testImg} imageSize='full' className='h-auto w-96'>
<Card.Content>
<p>Some description about relatively important things but not too long since this is a card component.</p>
<ul className="list-disc list-inside">
<ul className='list-disc list-inside'>
<li>18 Key information</li>
<li>12.59 Key information</li>
<li>5 Key information</li>
</ul>
</Card.Content>
</Card>

<Card layout="vertical" className="h-auto w-96" iconSystem={RocketLaunchIconOutline}>
<Card layout='vertical' className='h-auto w-96' iconSystem={RocketLaunchIconOutline}>
<Card.Header>Header text</Card.Header>
<Card.Content>
<p>Some description about relatively important things but not too long since this is a card component.</p>
<ul className="list-disc list-inside">
<ul className='list-disc list-inside'>
<li>18 Key information</li>
<li>12.59 Key information</li>
<li>5 Key information</li>
</ul>
</Card.Content>
</Card>
<Card layout="horizontal" imageSrc={testImg} imageSize="full" className="h-72">

<Card layout='horizontal' imageSrc={testImg} imageSize='full' className='h-72'>
<Card.Header>Header text</Card.Header>
<Card.Subheader>Subtitle or description</Card.Subheader>
<Card.Content>
<p>Some description about relatively important things but not too long since this is a card component.</p>
<ul className="list-disc list-inside">
<ul className='list-disc list-inside'>
<li>18 Key information</li>
<li>12.59 Key information</li>
<li>5 Key information</li>
</ul>
<div className='flex flex-row min-w-full justify-between'>
<Button size='small' color='danger' className='w-2/5 mx-2.5'><Typography variant="body-small">Cancel</Typography></Button>
<Button size='small' color='primary' className='w-2/5 mx-2.5'><Typography variant="body-small">Sign</Typography></Button>
<Button size='small' color='danger' className='w-2/5 mx-2.5'>
<Typography variant='body-small'>Cancel</Typography>
</Button>
<Button size='small' color='primary' className='w-2/5 mx-2.5'>
<Typography variant='body-small'>Sign</Typography>
</Button>
</div>
</Card.Content>
</Card>

<Card layout="horizontal" imageSrc={testImg} imageSize="full" className="h-44">
<Card layout='horizontal' imageSrc={testImg} imageSize='full' className='h-44'>
<Card.Content>
<p>Some description about relatively important things but not too long since this is a card component.</p>
<ul className="list-disc list-inside">
<ul className='list-disc list-inside'>
<li>1 Key information</li>
<li>12.59 Key information</li>
<li>3 Key information</li>
</ul>
</Card.Content>
</Card>

<Card layout="horizontal" iconSystem={AcademicCapIconOutline}>
<Card layout='horizontal' iconSystem={AcademicCapIconOutline}>
<Card.Header>Header text</Card.Header>
<Card.Content>
<p>Some description about relatively important things but not too long since this is a card component.</p>
<ul className="list-disc list-inside">
<ul className='list-disc list-inside'>
<li>18 Key information</li>
<li>12.59 Key information</li>
<li>5 Key information</li>
</ul>
</Card.Content>
</Card>

</div>
);
}
}
10 changes: 8 additions & 2 deletions src/templates/shared/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Header({
setConnectNeo4j = () => {},
openConnectionModal = () => {},
userHeader = true,
documentation = "",
documentation = '',
}: {
title: string;
navItems?: string[];
Expand Down Expand Up @@ -103,7 +103,13 @@ export default function Header({
</span>
)}
</IconButton>
<IconButton onClick={() => handleURLClick(documentation)} className='hidden md:inline-flex' ariaLabel='Help' isClean size='large'>
<IconButton
onClick={() => handleURLClick(documentation)}
className='hidden md:inline-flex'
ariaLabel='Help'
isClean
size='large'
>
<QuestionMarkCircleIconOutline />
</IconButton>

Expand Down
Loading

0 comments on commit 5ec40e4

Please sign in to comment.